/* Final responsive rules shared by the game and account overlays. */
@media (max-width: 950px) {
    html { -webkit-text-size-adjust: 100%; }
    .app-main, .game-hero, .game-controls, .top-actions { min-width: 0; }
    button, a, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    .sidebar.menu-open { overscroll-behavior: contain; max-width: calc(100vw - 48px); }
    .modal, .bet-picker-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
    .modal input, .modal select, .personal-invite input { font-size: 16px; }
    .modal-backdrop, .welcome-bonus { padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
    .personal-content .modal { max-height: none; overflow: visible; }
    .personal-content, .checkout-body { overflow-wrap: anywhere; }
    .checkout-card { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .personal-table { max-width: 100%; overscroll-behavior-x: contain; }
}
@media (max-width: 620px) {
    body { min-height: 100dvh; }
    .topbar { height: calc(62px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: max(6px,env(safe-area-inset-left)); padding-right: max(6px,env(safe-area-inset-right)); gap: 3px; }
    .topbar .mobile-menu { width: 32px; min-height: 44px; }
    .topbar .brand { flex-shrink: 0; }
    .topbar .top-actions { gap: 4px; flex: 0 1 auto; }
    .topbar .top-balance { min-width: 0; max-width: clamp(82px,27vw,132px); gap: 4px; padding: 6px; }
    .topbar .top-balance strong { min-width: 0; overflow: hidden; }
    .topbar #headerBalance { display: block; white-space: nowrap; font-size: clamp(10px,3vw,13px); }
    .topbar .header-deposit { flex-shrink: 0; white-space: nowrap; }
    .app-main { padding-left: max(6px,env(safe-area-inset-left)); padding-right: max(6px,env(safe-area-inset-right)); }
    .game-hero .temple-scene { --phone-wheel: min(78vw,330px); min-height: calc(var(--phone-wheel) + 116px); }
    .game-hero > .game-controls { grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr); gap: 7px 6px; padding: 12px 8px 10px; }
    .game-controls .result-stat, .game-controls .bet-control { min-width: 0; }
    .game-controls .result-stat strong { max-width: 100%; overflow-wrap: anywhere; }
    .game-controls .result-stat:nth-child(4) { max-width: 100%; flex-wrap: wrap; justify-content: center; }
    .mobile-nav { padding-left: max(5px,env(safe-area-inset-left)); padding-right: max(5px,env(safe-area-inset-right)); }
    .mobile-nav a { min-width: 0; padding: 3px 2px; font-size: clamp(9px,2.5vw,10px); text-align: center; line-height: 1.3; }
    .sidebar.menu-open { top: calc(62px + env(safe-area-inset-top)); bottom: calc(64px + env(safe-area-inset-bottom)); }
    .personal-center { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .personal-content { flex: 1 1 auto; min-height: 0; }
    .personal-content .modal input, .personal-content .modal select { width: 100%; min-width: 0; }
    .personal-identity > div:last-child { min-width: 0; }
    .personal-identity h3 { font-size: 20px; }
    .personal-content .deposit-preview > strong { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
    .withdrawal-turnover > div { gap: 6px; }
    .toast { max-height: 25dvh; overflow-y: auto; overflow-wrap: anywhere; }
    .welcome-poster { max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
    .topbar .brand-logo { width: 34px; height: 38px; }
    .topbar .header-deposit { padding: 8px 6px; font-size: 9px; letter-spacing: .2px; }
    .topbar .top-balance svg { width: 14px; height: 14px; flex-shrink: 0; }
    .topbar .music-toggle { width: 30px; height: 30px; padding: 7px; }
    .personal-menu { padding: 15px 10px 10px; }
    .personal-menu nav { gap: 5px; }
    .personal-menu button { font-size: 9px; }
    .personal-content { padding: 15px 12px; }
    .personal-brand h2 { font-size: 19px; }
    .personal-close { top: 14px; right: 12px; }
    .welcome-copy { padding-inline: 15px; }
}
@media (min-width: 621px) and (max-width: 950px) {
    .game-hero > .game-controls { grid-template-columns: minmax(160px,1.3fr) 76px minmax(90px,.8fr) minmax(110px,1fr); padding: 12px; gap: 12px; }
    .game-controls .spin-button { width: 68px; height: 68px; }
    .game-controls .bet-box { grid-template-columns: 28px minmax(35px,1fr) 28px 38px; gap: 4px; }
    .game-controls .bet-box button { width: 28px; }
    .game-controls .bet-box #maxBet { width: 38px; }
    .personal-center { grid-template-columns: 175px minmax(0,1fr); }
    .personal-content { padding: 20px; }
}
/* Short screens and the on-screen keyboard keep the active form scrollable. */
@media (max-width: 950px) and (max-height: 540px) {
    .personal-center { display: flex; flex-direction: column; height: calc(100dvh - 24px); }
    .personal-menu { padding: 8px 12px; flex-shrink: 0; border: 0; }
    .personal-brand { display: none; }
    .personal-menu nav { display: flex; gap: 6px; overflow-x: auto; padding: 0; }
    .personal-menu button { flex: 0 0 auto; min-height: 40px; flex-direction: row; padding: 8px; font-size: 10px; gap: 5px; }
    .personal-main { flex: 1; min-height: 0; }
    .personal-main header { padding: 8px 15px; }
    .personal-close { position: static; width: 36px; height: 36px; }
    .personal-content { padding: 12px 16px; }
    .welcome-art { display: none; }
    .welcome-poster { display: block; max-width: 440px; }
    .welcome-copy { padding: 20px; }
    .welcome-percent { font-size: 48px; }
}

/* Artwork stays behind the wheel; compact headers keep branding by the menu. */
.temple-scene .scene-logo { z-index: 5; pointer-events: none; }
@media (max-width: 950px) {
    .topbar { justify-content: flex-start; gap: 10px; }
    .topbar .brand { margin: 0; }
    .topbar .top-actions { margin-left: auto; }
}
@media (max-width: 620px) { .topbar { gap: 3px; } }