/* =====================================================================
       RESPONSIVE + SAFE AREA
       The page declares viewport-fit=cover, so on a notch/Dynamic Island
       phone the layout extends underneath the system UI. Every fixed corner
       used a flat pixel offset, which put the gear and the "?" straight under
       the Dynamic Island on an iPhone 16 — invisible and untappable — and put
       the bottom buttons under the home indicator.
       ===================================================================== */
    :root{
      --sat: env(safe-area-inset-top, 0px);
      --sar: env(safe-area-inset-right, 0px);
      --sab: env(safe-area-inset-bottom, 0px);
      --sal: env(safe-area-inset-left, 0px);
    }

    /* iOS Safari's collapsing toolbars make height:100% taller than what is
       actually on screen; dvh tracks the visible viewport instead. */
    @supports (height: 100dvh){
      html, body{ height:100dvh }
    }

    /* A flex container that is both centred and scrollable clips its own
       overflow at the TOP, and the clipped part cannot be scrolled to. That
       is why the lower buttons "disappeared" on short screens. `safe center`
       keeps the centring but stops it from ever cutting content off; browsers
       without support just keep the previous `center`. */
    .menu-screen, .lobby-screen{
      justify-content:center;
      justify-content:safe center;
      -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
      padding:
        calc(var(--sat) + 20px) calc(var(--sar) + 16px)
        calc(var(--sab) + 20px) calc(var(--sal) + 16px);
    }
    /* Never let a card be squashed into unreadability by the flex algorithm. */
    .menu-screen > *, .lobby-screen > *{ flex-shrink:0 }

    /* Keep the menu content clear of the two floating corner buttons. */
    #mainMenu{ padding-top: calc(var(--sat) + 66px) }

    /* These live INSIDE #mainMenu, which is the scroll container — as
       position:absolute they scrolled away with the content and ended up
       off-screen (that is why tapping them appeared to do nothing). Pin them
       to the viewport instead so they stay put while the menu scrolls. */
    .settings-btn, .help-btn{ position:fixed }
    .settings-btn{ top: calc(var(--sat) + 10px); right: calc(var(--sar) + 10px) }
    .help-btn    { top: calc(var(--sat) + 10px); left:  calc(var(--sal) + 10px) }

    #hud{
      top:   calc(var(--sat) + 10px);
      left:  calc(var(--sal) + 10px);
      right: calc(var(--sar) + 10px);
    }
    #mobileControls{
      bottom: calc(var(--sab) + 16px);
      left:   calc(var(--sal) + 16px);
      right:  calc(var(--sar) + 16px);
    }

    /* Two different elements carry .version-badge and both are absolutely
       positioned in the same corner, so they were drawn on top of each other;
       on a phone the "landing page" link also floated over the character
       cards. Stack them on desktop, hide them where space is tight. (The link
       needs !important — it sets display inline.) */
    .version-badge{ bottom: calc(var(--sab) + 12px); left: calc(var(--sal) + 14px) }
    a.version-badge{ bottom: calc(var(--sab) + 50px) }
    @media (max-width:780px), (max-height:760px){
      .version-badge, a.version-badge{ display:none !important }
    }

    /* Short viewports (iPhone in Safari with both toolbars, or landscape):
       tighten every vertical rhythm so the primary button stays reachable. */
    @media (max-height:760px){
      .menu-screen, .lobby-screen{ gap:10px }
      .brand-mark{ width:60px;height:60px;border-radius:16px }
      .brand-mark img{ width:48px;height:48px }
      .brand-title{ font-size:1.45rem }
      .game-subtitle{ font-size:.82rem }
      .mode-card{ padding:10px }
      .mode-icon-wrap{ width:44px;height:44px;font-size:1.35rem }
      .char-thumb{ width:46px;height:46px }
      .char-thumb img{ width:40px;height:40px }
      .lobby-players-list{ max-height:150px }
      #mainMenu{ padding-top: calc(var(--sat) + 58px) }
    }
    @media (max-height:640px){
      .game-subtitle, .char-desc{ display:none }
      .brand-mark{ width:48px;height:48px }
      .brand-mark img{ width:38px;height:38px }
      .brand-title{ font-size:1.2rem }
      .menu-screen, .lobby-screen{ gap:8px }
      .mode-card{ padding:8px }
      .lobby-players-list{ max-height:120px }
    }

    /* Narrow phones: the character row used to force 5 fixed columns and
       overflow horizontally. Let it wrap instead. */
    @media (max-width:430px){
      .char-grid{ grid-template-columns:repeat(auto-fit, minmax(56px, 1fr)); gap:5px }
      .char-thumb{ width:44px;height:44px }
      .char-thumb img{ width:38px;height:38px }
      .char-name{ font-size:.6rem }
      .char-desc{ display:none }
      .btn-main{ font-size:.95rem; padding:13px 18px }
      .menu-tabs{ gap:6px;padding:3px }
      .diff-chip{ font-size:.78rem;padding:7px 10px }
      .action-buttons {
        width: 154px;
        height: 146px;
      }
      .sprint-touch-btn {
        width: 74px;
        height: 74px;
        font-size: 0.74rem;
      }
      .ability-touch-btn {
        width: 60px;
        height: 60px;
        right: 32px;
        top: 0;
        font-size: 0.70rem;
      }
      .smoke-touch-btn, .trap-touch-btn {
        width: 60px;
        height: 60px;
        left: 0;
        bottom: 4px;
        font-size: 0.70rem;
      }
      .sprint-touch-btn span, .smoke-touch-btn span, .ability-touch-btn span, .trap-touch-btn span {
        font-size: 1.05rem;
      }
      .joystick-zone {
        width: 110px;
        height: 110px;
      }
      .joystick-knob {
        width: 44px;
        height: 44px;
        top: 33px;
        left: 33px;
      }
    }

    /* Landscape phones: the menu is far too tall to centre. */
    @media (max-height:480px) and (orientation:landscape){
      .menu-screen, .lobby-screen{ justify-content:flex-start; gap:7px }
      #mainMenu{ padding-top: calc(var(--sat) + 12px) }
      .settings-btn, .help-btn{ width:36px;height:36px;border-radius:10px }
      .brand{ flex-direction:row;align-items:center;gap:10px }
    }

    /* Touch targets + cool mode: reduce blur which heats GPU */
    @media (pointer:coarse){
      .settings-btn, .help-btn{ min-width:44px;min-height:44px }
      .icon-btn{ min-width:44px;min-height:44px }
      .hud-card, .toast, .quest-pill{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
      .lobby-box, .help-content, .settings-panel{ backdrop-filter:none !important; }
    }

    /* On a phone the HUD row ran out of width and wrapped, dropping the sound
       and pause buttons onto a second line on top of the play area. Keep it on
       one line and shrink the cards instead. */
    /* On mobile / small screens: guarantee top Pause, Sound, Voice buttons are ALWAYS visible */
    @media (max-width:600px){
      #cardAbility{ display:none !important }
      #hud{
        top: calc(var(--sat) + 8px);
        left: calc(var(--sal) + 8px);
        right: calc(var(--sar) + 8px);
        gap: 6px;
        flex-wrap: nowrap;
        align-items: center;
        overflow: visible;
        pointer-events: none;
        z-index: 25;
      }
      .hud-group{
        display: flex;
        gap: 5px;
        align-items: center;
        flex-wrap: nowrap;
      }
      #hud .hud-group:first-child{
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
      }
      #hud .hud-group:last-child{
        flex: 1 0 auto;
        justify-content: flex-end;
        align-items: center;
        min-width: 0;
      }
      .hud-card{
        padding: 4px 8px;
        min-height: 38px;
        border-radius: 10px;
        flex-shrink: 0;
        pointer-events: auto;
      }
      #cardRole{
        max-width: 105px;
        overflow: hidden;
        gap: 5px !important;
      }
      #cardRole img{
        width: 24px !important;
        height: 24px !important;
      }
      #cardRole > div{ min-width:0; overflow:hidden }
      #txtRole{ font-size: .78rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      #cardHideState{ display: none !important; }
      #hud #cardCoins{ display: none !important; }
      .stamina-container{ width: 42px; height: 6px; }
      .hud-title{ font-size: .56rem; }
      .hud-value{ font-size: .84rem; }
      #hud .hud-group:last-child .hud-card{ min-width: 0 !important; padding: 4px 6px; }
      
      /* Guarantee Icon Buttons (Pause / Sound / Voice) are 100% visible */
      .icon-btn{
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        pointer-events: auto !important;
        z-index: 30;
      }
      .icon-btn svg{ width: 17px !important; height: 17px !important; }
      #btnVoice{ display: none !important; }
      body.online #btnVoice{ display: flex !important; }
    }
    @media (max-width:360px){
      .stamina-container, #cardStamina{ display: none !important; }
      #cardRole{ max-width: 85px; }
      .icon-btn{ width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; }
    }

    /* Overlays used 100vh / 85vh, which on iOS Safari measure the viewport
       WITHOUT the browser toolbars — so their bottom (and the close button)
       ended up underneath the browser chrome. dvh tracks what is on screen. */
    .settings-panel{
      padding-top:    calc(var(--sat) + 20px);
      padding-bottom: calc(var(--sab) + 20px);
    }
    .help-modal{
      padding:
        calc(var(--sat) + 16px) calc(var(--sar) + 16px)
        calc(var(--sab) + 16px) calc(var(--sal) + 16px);
    }
    @supports (height: 100dvh){
      .settings-panel{ height:100dvh }
      .help-content{ max-height: calc(100dvh - var(--sat) - var(--sab) - 32px) }
    }