/**
 * Phone layout — loaded last, wins over the desktop rules. On a phone the
 * maze IS the screen: compact HUD strip on top, one-line quest strip, the
 * viewport filling everything else, a slim inventory strip at the bottom,
 * minimap floating in the corner, d-pad over the lower viewport.
 */

/* Menu button exists only for touch — desktops pause with Esc. */
.game-menu-btn { display: none; }

@media (max-width: 760px) {

  /* ── Game screen: fixed full-height column, nothing scrolls ── */
  .screen--game {
    height: 100dvh;
    overflow: hidden;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px
             calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }

  /* Compact HUD strip */
  .hud {
    gap: 10px;
    padding: 6px 10px;
  }

  .hud__avatar { width: 38px; height: 38px; font-size: 1.4rem; }
  .hud__name { font-size: 0.9rem; }
  .hud__stats { gap: 2px; }
  .hud__barline { gap: 6px; }
  .hud__bar { height: 8px; }
  .hud__bar-text { font-size: 0.6rem; }

  .hud__row--small {
    gap: 6px;
    flex-wrap: wrap;
  }

  .hud__row--small span {
    font-size: 0.6rem;
    padding: 1px 7px;
  }

  /* Score and steps are Game Over material — reclaim the space. */
  #hud-score, #hud-steps { display: none; }

  /* An empty key-item slot is just a mystery box on a phone — appear only
     when there is an actual item to show. */
  .hud__key-item--empty { display: none; }

  /* ── Game area: column, viewport takes the rest ── */
  .game-area {
    flex-direction: column;
    gap: 6px;
    position: relative;
    min-height: 0;
  }

  /* Right column dissolves; its children become flex items we re-order. */
  .game-area__right { display: contents; }

  /* The tasks strip is a signpost, not a hero banner — surface tones,
     not the glowing accent that outshone the maze itself. */
  .quest-btn {
    order: -1;
    width: 100%;
    min-height: 34px;
    padding: 4px 12px;
    background: var(--c-surface);
    border-color: var(--c-border);
    color: var(--c-text-dim);
  }

  .event-log { display: none; }

  .grid-container {
    flex: 1;
    min-height: 0;
    width: 100%;
  }

  /* Minimap floats over the viewport's top-right corner. !important beats
     the inline style.width the renderer sets for the desktop panel. */
  .minimap {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 150px);
    right: 14px;
    width: 72px !important;
    height: 72px !important;
    opacity: 0.7;
    z-index: 60;
    border-radius: 8px;
    pointer-events: none;
  }

  /* ── Left sidebar becomes a slim bottom inventory strip ── */
  .game-area__left {
    order: 3;
    flex-direction: row;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    gap: 6px;
  }

  .game-area__left .sidebar__section { flex: 1; padding: 4px 8px; }
  /* Perk text lives on the hero screen — the strip is for items only. */
  .game-area__left .sidebar__section:has(.sidebar__perk) { display: none; }
  .game-area__left .sidebar__title { display: none; }

  .sidebar__inventory {
    display: flex !important;
    gap: 6px;
    justify-content: center;
  }

  .sidebar__inventory .inv-slot {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
  }

  /* Slots 7-9 don't fit a phone row — the inventory popup still shows all. */
  .sidebar__inventory .inv-slot:nth-child(n+8) { display: none; }

  /* Phones have visible buttons for all of these — keyboard hints are noise. */
  .title__hint,
  .gameover__hint { display: none; }

  /* Onboarding tips float above the action button, clear of both zones. */
  .onboard-tip {
    bottom: calc(190px + env(safe-area-inset-bottom, 0px));
  }

  /* Menu/pause — the phone's Esc. A readable text pill, minimap's mirror. */
  .game-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 150px);
    left: 14px;
    padding: 7px 14px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-surface) 80%, transparent);
    color: var(--c-text-dim);
    font: 600 0.72rem/1 var(--font-ui, system-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
    z-index: 60;
  }

  /* ── Combat: full-height scene, everything reachable ── */
  .screen--combat {
    height: 100dvh;
    max-width: none;
    overflow: hidden;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px
             calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    justify-content: flex-start;
  }

  /* The enemy IS the scene — it owns the middle of the screen, centered,
     panel chrome stripped. The old layout pinned a small card to the top
     and left a void where the monster should loom. */
  .combat__enemy {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .combat__enemy-icon svg.gi { width: 11rem; height: 11rem; }
  .combat__enemy-name { font-size: 1.5rem; }
  .combat--boss .combat__enemy-name { font-size: 1.75rem; }
  .combat__enemy .combat__bar { width: min(70vw, 300px); }

  /* The bar and the verdict are the fight's whole voice on a phone */
  .beat__bar { height: 58px; }
  .beat__label { font-size: 1.1rem; }
  .combat__verdict { font-size: 1.35rem; padding: 10px 20px; }
  .combat__zone { font-size: 0.86rem; }

  /* The log cannot be read at this tempo — the verdict says it all */
  .combat__log { display: none; }

  /* Advisor chip breathes; the sentence reads at arm's length */
  .combat__intent { padding: 6px 14px; }
  .combat__intent-hint { font-size: 0.84rem; color: var(--c-text-bright); }


  /* Thumb-sized tactical buttons in an even grid; wide singles get a
     full row instead of squeezing. Combat runs edge to edge on a phone. */
  .screen--combat { padding-left: 10px; padding-right: 10px; }
  .combat__actions { gap: 8px; width: 100%; }
  .combat__btn {
    padding: 10px 4px;
    font-size: 0.92rem;
    min-height: 62px;
    letter-spacing: 0.03em;
  }
  .combat__btn-sub { font-size: 0.74rem; margin-top: 3px; }
  .combat__btn--item, .combat__btn--world { grid-column: 1 / -1; min-height: 46px; }
  .combat__flee { padding: 8px 26px; font-size: 0.76rem; }

  /* Keyboard digit badges (1/2/3/4) mean nothing to a thumb. */
  .combat__btn-key { display: none; }

  /* Desktop keeps the popup click-through (mouse plays via keyboard);
     on a phone the popup IS the button — tapping it confirms. */
  .danger-popup { pointer-events: auto; }

  .combat__player { padding: 8px 12px; gap: 4px; margin-top: 0; }

  /* ── Hero select: all cards on one screen — 3-wide grid, no scrolling ── */
  /* flex-start + safe-area padding: with the full grid the content is as
     tall as the screen, and centered layouts shove the title under the
     notch (the .screen-centering trap). Scrolls if a small phone needs it. */
  .screen--hero {
    justify-content: flex-start;
    overflow-y: auto;
    gap: 14px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 0
             calc(env(safe-area-inset-bottom, 0px) + 14px);
  }

  .hero-select__mission {
    font-size: 0.72rem;
    padding: 0 16px;
  }

  .hero-select__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    padding: 0 12px;
  }

  .hero-card {
    width: auto; /* fill the grid cell instead of the fixed 120px */
  }

  /* Stats panel shouldn't sit flush against the screen edges. */
  .hero-detail {
    width: calc(100% - 24px);
  }

  /* Altar breathes easier on a phone. */
  .altar-card { padding: 10px 12px; }
  .altar-worlds__section { margin-top: 18px; }
  .altar-worlds__head h2 { font-size: 1.4rem; }

  /* ── Meta screens: don't crawl under the status bar ── */
  .screen--altar-worlds {
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
  }
}