/* ============================================================================
   LIBERTY ARCADE — Phaser Game Kit  (companion stylesheet to game-kit.js)
   US Semiquincentennial (1776–2026)
   ----------------------------------------------------------------------------
   Vanilla CSS. No build step. Layers ON TOP of shared/design.css — it reuses
   the design tokens (--c-navy, --accent, etc.) and adds only the bits a Phaser
   game needs: a Liberty-Steel letterbox stage frame, the auto-injected game
   chrome (header + back link + audio bar slot), and the on-screen mobile
   controls (virtual joystick + action buttons) that the kit renders into the
   DOM layered above the Phaser <canvas>.

   Load AFTER design.css:
     <link rel="stylesheet" href="../../shared/design.css">
     <link rel="stylesheet" href="../../shared/game-kit.css">
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. KIT TOKENS  (Liberty Steel — derived from the design system)
   --------------------------------------------------------------------------- */
:root {
  /* "Liberty Steel" letterbox backdrop: brushed gun-metal navy that reads as
     a machined arcade bezel. Built from the existing navy palette. */
  --steel-0:   #05101f;   /* deepest steel shadow            */
  --steel-1:   #0a1c30;   /* steel base                      */
  --steel-2:   #122b47;   /* raised steel face               */
  --steel-edge: rgba(201, 162, 39, 0.45);  /* gold machined edge */

  /* Joystick / control surfaces */
  --pad-bg:    rgba(6, 21, 40, 0.55);
  --pad-ring:  rgba(247, 243, 232, 0.22);
  --pad-knob:  rgba(201, 162, 39, 0.92);
  --pad-knob-2:rgba(228, 201, 91, 0.95);
  --pad-fire:  rgba(178, 34, 52, 0.92);   /* federal red action */
  --pad-fire-2:rgba(201, 162, 39, 0.92);  /* gold secondary action */

  --kit-z-canvas:   1;
  --kit-z-controls: 30;
  --kit-z-overlay:  40;
}

/* ---------------------------------------------------------------------------
   2. THE STAGE  — Liberty-Steel letterbox frame that hosts the Phaser canvas
   The kit mounts Phaser into #liberty-stage (or a caller-supplied parent).
   Scale.FIT keeps the game's native aspect; the leftover area is the
   letterbox, painted as brushed steel so the game sits in an arcade bezel.
   --------------------------------------------------------------------------- */
.liberty-stage {
  position: relative;
  width: 100%;
  max-width: var(--maxw, 1100px);
  margin-inline: auto;
  /* the steel bezel */
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(27,64,106,0.55), transparent 60%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, var(--steel-2), var(--steel-1) 55%, var(--steel-0));
  border: 1px solid var(--steel-edge);
  border-radius: var(--r-lg, 16px);
  box-shadow:
    inset 0 0 0 1px rgba(201,162,39,0.10),
    inset 0 2px 0 rgba(255,255,255,0.04),
    0 10px 34px rgba(0,0,0,0.5);
  overflow: hidden;
  /* the kit sets an explicit pixel height to match the FIT'd canvas; this is
     just a sensible first-paint default before JS sizes it. */
  min-height: 220px;
  touch-action: none;        /* we own all touch gestures inside the stage */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* The Phaser-injected <canvas> lives here. Center it in the bezel. */
.liberty-stage canvas {
  display: block;
  margin: auto;
  position: relative;
  z-index: var(--kit-z-canvas);
  /* crisp pixel art if a game opts into it via body.is-pixelated */
}
body.liberty-pixelated .liberty-stage canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* faint scanline / vignette over the whole bezel for arcade depth */
.liberty-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,0.38) 100%);
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------------
   3. AUTO-INJECTED CHROME  (only used when mountGameChrome injects a header;
   if the page already has .usa-header, the kit reuses it and adds nothing.)
   --------------------------------------------------------------------------- */
.liberty-chrome-spacer { height: var(--s-4, 1rem); }

/* --- Fullscreen / immersive toggle (kit-provided, every game) ------------- */
.liberty-fs-btn {
  pointer-events: auto;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: 6px;
  border-radius: 10px;
  border: 1px solid var(--steel-edge, rgba(201,162,39,0.45));
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--steel-2, #122b47), var(--steel-1, #0a1c30));
  color: var(--c-cream, #f7f3e8);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.4);
  transition: filter .12s ease, transform .05s ease;
  -webkit-tap-highlight-color: transparent;
}
.liberty-fs-btn:hover { filter: brightness(1.15); }
.liberty-fs-btn:active { transform: scale(0.94); }
.liberty-fs-btn:focus-visible { outline: 2px solid var(--accent, #c9a227); outline-offset: 2px; }

/* "Full Screen" discoverability label sitting next to the ⛶ button. The wrap
   keeps the icon + label as one inline cluster in the header actions row. */
.liberty-fs-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
}
.liberty-fs-wrap .liberty-fs-btn { margin-right: 0; }   /* gap handles spacing */
.liberty-fs-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #b9c6d8);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
}
.liberty-fs-label:hover { color: var(--c-cream, #f7f3e8); }

/* CSS IMMERSIVE MODE — the iPhone-Safari path (no Fullscreen API on iPhone).
   The stage container is promoted to fill the dynamic viewport; page chrome is
   hidden so the playfield owns the screen. Uses 100dvh so the iOS toolbar can't
   crop the bottom. Real Fullscreen API is preferred where it exists. */
body.liberty-immersive {
  overflow: hidden;
}
body.liberty-immersive .usa-header,
body.liberty-immersive h1,
body.liberty-immersive .usa-instructions {
  display: none !important;
}
.liberty-immersive-target {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;   /* dynamic viewport — iOS toolbar safe */
  max-width: none !important;
  margin: 0 !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--steel-0, #05101f);
  /* Keep the playfield clear of the notch / Dynamic Island (top), the home
     indicator (bottom), and the floating ✕ exit button (top-right, ~58px tall).
     Padding shrinks the usable box; the game's height-fit sizer fits the field
     into what remains, so nothing is cropped top or bottom. box-sizing keeps the
     padding inside the 100dvh box. */
  box-sizing: border-box !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
}
/* When a game wraps its stage (e.g. the Eagle Aces .ea-cabinet flex row), the
   wrapper becomes the immersive target; keep the stage centered within it. */
.liberty-immersive-target > .liberty-stage { margin: auto; }

/* DEDICATED IMMERSIVE EXIT BUTTON — the only way back out on a phone (the header
   ✕ is hidden in immersive mode, and phones have no Esc key). Lives on <body>,
   NOT in the header, so hiding the header never hides it. Pinned to the top-right
   corner ABOVE the immersive target (z 9500 > the target's 9000), thumb-sized
   (≥44px hit target), notch/Dynamic-Island safe via env(safe-area-inset-*).
   display is toggled inline by JS (grid when active, none otherwise). */
.liberty-immersive-exit {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  z-index: 9500;               /* above .liberty-immersive-target (9000) */
  width: 48px;
  height: 48px;                /* ≥44px thumb target */
  place-items: center;         /* display:grid set inline when shown */
  border-radius: 50%;
  border: 1px solid var(--steel-edge, rgba(201,162,39,0.6));
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(180deg, rgba(18,43,71,0.96), rgba(10,28,48,0.96));
  color: var(--c-cream, #f7f3e8);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 10px rgba(0,0,0,0.55);
  -webkit-tap-highlight-color: transparent;
  transition: filter .12s ease, transform .05s ease;
}
.liberty-immersive-exit:hover { filter: brightness(1.15); }
.liberty-immersive-exit:active { transform: scale(0.94); }
.liberty-immersive-exit:focus-visible {
  outline: 2px solid var(--accent, #c9a227); outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   3b. MOBILE HEADER WRAP — the game-page chrome (brand + ⛶ + SOUND/MUSIC/FX
   audio bar + Hub) is too wide for a phone, so the audio bar + Hub ran off the
   right edge and needed a horizontal swipe. On narrow widths we let the header
   bar WRAP: the brand stays on row 1, the actions cluster (⛶ + audio bar + Hub)
   drops to a full-width second row, centered, with each control at a ≥44px tap
   target. The default desktop header (single row) is untouched.
   These rules live in the kit (which owns the chrome) and additively override
   the base .usa-header* layout from design.css on small screens only.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* ---- RECLAIM PHONE REAL-ESTATE: the playfield, not chrome, owns the screen.
     The game TITLE (<h1>) and the long "Goal / How to play" description block
     (.usa-instructions) duplicate what's already on the hub card, so on a phone
     they only steal vertical space above the field. Hide them; keep ONE compact
     header strip (⛶ Full Screen + SOUND/MUSIC/FX bar + Hub). The game's height-
     fit sizer recomputes against the now-larger viewport and the field grows to
     fill it. Desktop (≥900px) keeps the title + instructions untouched. ------- */
  .usa-section > h1,
  main.usa-section > h1,
  .usa-container > h1,
  .liberty-game-title,
  .usa-instructions {
    display: none !important;
  }
  /* drop the big section padding that pushed the field down */
  .usa-section { padding-block: var(--s-2, 0.5rem); }

  /* compact, single header strip — tighten its height so it's just a control bar */
  .usa-header__bar {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--s-1, 0.25rem);
    padding-block: var(--s-1, 0.25rem);
  }
  /* brand owns the full first row */
  .usa-header__bar > .usa-brand { flex: 1 1 100%; justify-content: center; }
  /* actions cluster drops to its own full-width second row, centered + wrapping
     so nothing is ever pushed off-screen */
  .usa-header__actions {
    flex: 1 1 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-2, 0.5rem);
  }
  /* full-size, comfortably tappable controls on the second row */
  .usa-header__actions .liberty-fs-btn {
    width: 44px;
    height: 44px;
    margin-right: 0;
  }
  .usa-header__actions .liberty-fs-wrap { margin-right: 0; }
  /* keep the label legible but small so the icon+label cluster doesn't overflow
     the wrapped row */
  .usa-header__actions .liberty-fs-label { font-size: 0.66rem; }
  .usa-header__actions .usa-audiobar__btn {
    min-height: 44px;
    padding: 8px 14px;
  }
  .usa-header__actions .usa-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
  }
}

/* ---------------------------------------------------------------------------
   4. ON-SCREEN MOBILE CONTROLS  — virtual joystick + action buttons
   Rendered by the kit's Mobile Input module into an overlay that sits above
   the canvas. Auto-shown on touch devices; hidden on desktop (toggleable).
   --------------------------------------------------------------------------- */
.liberty-controls {
  position: absolute;
  inset: 0;
  z-index: var(--kit-z-controls);
  pointer-events: none;     /* only the pads themselves catch input */
  display: none;            /* shown by JS on touch devices          */
}
.liberty-controls.is-on { display: block; }

/* --- Virtual joystick (left) --- */
.liberty-stick {
  position: absolute;
  left: clamp(12px, 4%, 40px);
  bottom: clamp(12px, 5%, 48px);
  width: 132px;
  height: 132px;
  border-radius: 50%;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 42%, rgba(20,54,92,0.30), transparent 70%),
    var(--pad-bg);
  border: 2px solid var(--pad-ring);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  touch-action: none;
}
/* directional star tick marks on the ring */
.liberty-stick::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(247,243,232,0.14);
}
.liberty-stick__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, var(--pad-knob-2), var(--pad-knob) 70%);
  border: 2px solid rgba(6,21,40,0.55);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.35);
  transition: transform .03s linear;
  will-change: transform;
}

/* --- Action buttons (right) --- */
.liberty-actions {
  position: absolute;
  right: clamp(12px, 4%, 40px);
  bottom: clamp(12px, 5%, 48px);
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}
.liberty-btn {
  pointer-events: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid rgba(6,21,40,0.5);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-cream, #f7f3e8);
  background:
    radial-gradient(circle at 40% 32%, rgba(255,255,255,0.22), transparent 60%),
    var(--pad-fire);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.25);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform .05s ease, filter .1s ease;
}
.liberty-btn--b {
  background:
    radial-gradient(circle at 40% 32%, rgba(255,255,255,0.22), transparent 60%),
    var(--pad-fire-2);
  color: var(--c-navy-deep, #061528);
  width: 62px;
  height: 62px;
  font-size: 0.95rem;
}
.liberty-btn.is-down { transform: scale(0.9); filter: brightness(1.2); }

/* small-screen sizing so the pads never crowd a portrait phone */
@media (max-width: 520px) {
  .liberty-stick  { width: 116px; height: 116px; }
  .liberty-stick__knob { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; }
  .liberty-btn    { width: 66px; height: 66px; }
  .liberty-btn--b { width: 56px; height: 56px; }
}

/* ---------------------------------------------------------------------------
   5. GAME-OVER / PAUSE / BOSS overlays  (DOM, above the canvas)
   The kit renders these as DOM overlays inside the stage so they inherit the
   design system's type + buttons and work without redrawing in Phaser.
   --------------------------------------------------------------------------- */
.liberty-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--kit-z-overlay);
  display: none;
  place-items: center;
  text-align: center;
  padding: var(--s-5, 1.5rem);
  background:
    radial-gradient(80% 90% at 50% 30%, rgba(178,34,52,0.18), transparent 60%),
    rgba(6, 21, 40, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;     /* whole overlay is tap-to-restart on game over */
}
.liberty-overlay.is-on { display: grid; }

.liberty-overlay__card {
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3, 0.75rem);
}
.liberty-overlay__kicker {
  font-family: var(--font-sans);
  font-size: var(--t-xs, 0.75rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent, #c9a227);
}
.liberty-overlay__title {
  font-family: var(--font-serif);
  font-size: var(--t-3xl, 3.052rem);
  line-height: 1.05;
  margin: 0;
  color: var(--c-cream, #f7f3e8);
  text-shadow: 0 3px 22px rgba(0,0,0,0.6);
}
.liberty-overlay__score {
  font-family: var(--font-sans);
  font-size: var(--t-lg, 1.563rem);
  color: var(--text-dim, #b9c6d8);
}
.liberty-overlay__score b { color: var(--c-gold-light, #e4c95b); }
.liberty-overlay__hint {
  font-size: var(--t-sm, 0.875rem);
  color: var(--text-dim, #b9c6d8);
  margin-top: var(--s-2, 0.5rem);
}
.liberty-overlay__row {
  display: flex;
  gap: var(--s-3, 0.75rem);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s-3, 0.75rem);
}

/* Pause overlay is a calmer variant (no red wash) */
.liberty-overlay--pause {
  background: rgba(6, 21, 40, 0.86);
}
/* Boss-key overlay: looks like an innocuous spreadsheet/blank, fully opaque */
.liberty-overlay--boss {
  background: #0e1116;
  cursor: default;
}
.liberty-overlay--boss .liberty-overlay__title { color: #6b7280; font-family: var(--font-sans); font-size: var(--t-lg,1.563rem); }

/* ---------------------------------------------------------------------------
   6. IN-CANVAS HUD is drawn by Phaser; this is just an optional DOM HUD the
   kit can render above the canvas if a game prefers crisp HTML text.
   --------------------------------------------------------------------------- */
.liberty-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: var(--kit-z-controls);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4, 1rem);
  padding: var(--s-2, 0.5rem) var(--s-4, 1rem);
  pointer-events: none;
  font-family: var(--font-sans);
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
.liberty-hud__cell {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.liberty-hud__label {
  font-size: var(--t-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent, #c9a227);
}
.liberty-hud__value {
  font-size: var(--t-md, 1.25rem);
  color: var(--c-cream, #f7f3e8);
  font-variant-numeric: tabular-nums;
}

/* Respect reduced motion: kill the knob transition + overlay blur animation */
@media (prefers-reduced-motion: reduce) {
  .liberty-stick__knob { transition: none; }
}