/* ============================================================================
   responsive.css — Device adaptation, landscape lock, mobile parity layout
   Goal: mobile LANDSCAPE must read and play exactly like desktop.
   ========================================================================== */

/* ==========================================================================
   1. LANDSCAPE LOCK — portrait on a touch device shows the rotate gate
   ========================================================================== */
.app[data-orient="portrait"][data-touch="1"] .orientation-gate { display: grid; }
.app[data-orient="portrait"][data-touch="1"] .stage,
.app[data-orient="portrait"][data-touch="1"] .screens,
.app[data-orient="portrait"][data-touch="1"] .loading { visibility: hidden; pointer-events: none; }

/* Desktop portrait windows keep playing — only touch devices are gated. */

/* ==========================================================================
   2. LARGE DESKTOP — more breathing room
   ========================================================================== */
@media (min-width: 1600px) and (min-height: 860px) {
  :root { --u: 6px; --hud-scale: 1.04; }
}

@media (min-width: 2200px) {
  :root { --u: 7px; }
  .screen { width: min(1420px, 88vw); }
}

/* ==========================================================================
   3. SHORT VIEWPORTS (laptops, mobile landscape) — compress vertical rhythm
   ========================================================================== */
@media (max-height: 720px) {
  :root { --u: 4px; --hud-scale: 0.94; }
  .powers__sep { margin: calc(var(--u) * 0.9) 0 calc(var(--u) * 0.7); }
  .minimap { padding: calc(var(--u) * 0.9); }
}

@media (max-height: 560px) {
  :root { --u: 3.4px; --hud-scale: 0.88; }
  .screen__head { margin-bottom: calc(var(--u) * 1.6); }
  .panel { padding: calc(var(--u) * 2.2); }
  .minimap__legend { display: none; }
  .title__foot { display: none; }
}

@media (max-height: 430px) {
  :root { --u: 3px; --hud-scale: 0.82; }
  .powers__sep span { display: none; }
  .vitals__xp span { display: none; }
  .scorebox__row--sub { display: none; }
}

/* ==========================================================================
   4. NARROW VIEWPORTS
   ========================================================================== */
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pause-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .daily-row { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   5. TOUCH DEVICES — control affordances, larger hit targets
   ========================================================================== */
.app[data-touch="1"] .game-canvas { cursor: none; }
.app[data-touch="1"] .crosshair { display: none; }

.app[data-touch="1"] .btn { padding: calc(var(--u) * 2.2) calc(var(--u) * 3.6); min-height: 44px; }
.app[data-touch="1"] .btn--sm { min-height: 38px; }
.app[data-touch="1"] .iconbtn { width: 44px; height: 44px; }
.app[data-touch="1"] .power { min-width: 34px; }
.app[data-touch="1"] .tab { min-height: 40px; }
.app[data-touch="1"] .wslot { min-height: 34px; }
.app[data-touch="1"] .toggle { width: 52px; height: 28px; }
.app[data-touch="1"] .toggle::after { width: 22px; height: 22px; }
.app[data-touch="1"] .toggle.is-on::after { left: 26px; }

/* Hover effects are noise on touch — neutralise them */
@media (hover: none) {
  .btn:hover  { transform: none; box-shadow: var(--shadow-btn); }
  .card:hover { transform: none; }
  .power:hover { transform: none; }
  .iconbtn:hover { transform: none; }
  .btn::before { display: none; }
}

/* ==========================================================================
   6. MOBILE LANDSCAPE — desktop-parity layout on a small, wide screen
   Everything stays in the same three top clusters; bottom remains clear.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  :root {
    --u: 2.9px;
    --hud-scale: 0.9;
    --fs-nano:  8px;
    --fs-micro: 9px;
    --fs-xs:    10.5px;
    --fs-sm:    12.5px;
    --fs-md:    15px;
    --fs-lg:    21px;
    --fs-xl:    30px;
    --fs-2xl:   40px;
  }

  .hud-zone--tl { width: clamp(150px, 27vw, 230px); }
  .hud-zone--tr { width: clamp(126px, 22vw, 190px); }
  .hud-zone--tc { width: clamp(200px, 40vw, 380px); }

  /* Compress the top-right cluster so it ends well above the mid-line, which
     is what frees the right edge for the action rail. */
  .scorebox { display: none; }
  .minimap canvas { max-height: 56px; object-fit: contain; }
  .minimap__legend { display: none; }
  .weaponbox__slots { gap: 3px; margin-top: calc(var(--u) * 1); }

  /* Action rail hugs the right EDGE at thumb height — never a bottom corner.
     Aiming already auto-fires past the stick dead-zone and reloads are
     automatic, so only Fire and Dash need a physical button here. */
  .touch-rail {
    top: 68%;
    bottom: auto;
    right: calc(var(--safe-r) + 6px);
    transform: translateY(-50%);
    flex-direction: column;
    gap: 8px;
  }
  .touch-rail .tbtn { width: 46px; height: 46px; font-size: 18px; }
  .touch-rail .tbtn--fire { width: 58px; height: 58px; font-size: 22px; }
  .touch-rail .tbtn[data-action="reload"],
  .touch-rail .tbtn[data-action="weapon"] { display: none; }

  .stick { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
  .stick__knob { width: 42px; height: 42px; margin: -21px 0 0 -21px; }

  .powers__hint { display: none; }
  .mission__fail { max-height: 3.4em; overflow: hidden; }

  .screen { max-height: calc(100vh - 12px); }
  .screen__head { margin-bottom: calc(var(--u) * 1.6); }
  .title__menu { width: min(320px, 52vw); }
  .title__row { gap: calc(var(--u) * 1); }
  .card { padding: calc(var(--u) * 1.8); }
  .card__desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Very small landscape phones (e.g. 568x320) */
@media (orientation: landscape) and (max-height: 360px) and (pointer: coarse) {
  :root { --u: 2.5px; --hud-scale: 0.84; }
  .powers__sep { display: none; }
  .powers__grid[data-bank="advanced"] { margin-top: 3px; }
  .vitals__foot { margin-top: 3px; }
  .minimap canvas { max-height: 44px; }
  .touch-rail { top: 70%; }
  .touch-rail .tbtn { width: 42px; height: 42px; font-size: 16px; }
  .touch-rail .tbtn--fire { width: 52px; height: 52px; font-size: 20px; }
}

/* ==========================================================================
   7. WIDE / ULTRAWIDE — clamp HUD clusters so they hug the corners
   ========================================================================== */
@media (min-aspect-ratio: 21/9) {
  .hud-zone--tl { max-width: 300px; }
  .hud-zone--tr { max-width: 250px; }
  .hud-zone--tc { max-width: 560px; }
}

/* ==========================================================================
   8. FULLSCREEN POLISH
   ========================================================================== */
:fullscreen .app, :-webkit-full-screen .app { background: #000; }
.app[data-fullscreen="1"] #btn-fullscreen { color: var(--c-lime); border-color: rgba(124,255,90,0.5); }

/* ==========================================================================
   9. UI SCALE PREFERENCE (accessibility slider writes --ui-scale)
   ========================================================================== */
.app[data-uiscale] { --hud-scale: var(--ui-scale, 1); }
.app[data-uiscale] .screen { zoom: var(--ui-scale, 1); }

/* ==========================================================================
   10. PRINT — nothing meaningful to print, keep it clean
   ========================================================================== */
@media print { body { display: none; } }