/* Base layout (Phase 3 Agent LAYOUT owns css/*).
   The two chrome bars (#hud, #ability-bar) are fixed to the viewport edges.
   The canvas renders behind the bottom chrome so the scene reads as continuous;
   gameplay placement still reserves the bar height in js/config.js. */
* { box-sizing: border-box; }

:root {
  /* Phase 4 (Agent LAYOUT): FLUID bar heights (content only; safe-area insets are
     ADDED below so the bars grow to clear notches / the home indicator, and the
     canvas inset matches). Sized from BOTH viewport width and height via
     min(vw, vh): tall phones get roomy bars, while short / landscape viewports
     compress instead of eating the whole play area. Combined bars stay ~<=25% of
     viewport height on phones and <=20% on desktop (see the matrix in the handoff).
     The Phaser canvas auto-follows any change here via SCALE's ResizeObserver. */
  --hud-h: clamp(66px, min(23vw, 11.5vh), 100px);
  --ability-h: clamp(130px, min(34vw, 24vh), 244px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bar-top: calc(var(--hud-h) + var(--safe-top));           /* total top-bar height */
  --bar-bottom: calc(var(--ability-h) + var(--safe-bottom)); /* total bottom-bar height */
}

/* Short viewports (landscape phones, split-screen, ~<=520px tall): shrink the
   bars hard so the canvas keeps a usable band. SCALE drops to its compact sprite
   mode below a 320px canvas; smaller bars help stay above that threshold. */
@media (max-height: 520px) {
  :root {
    --hud-h: clamp(42px, 11vh, 66px);
    --ability-h: clamp(92px, min(29vw, 22vh), 138px);
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background:
    radial-gradient(circle at 50% -10%, rgba(43, 220, 255, 0.2), transparent 34%),
    radial-gradient(circle at 18% 18%, rgba(168, 93, 255, 0.16), transparent 28%),
    linear-gradient(180deg, #030711 0%, #071027 42%, #05040e 100%);
  font-family: 'Baloo 2', 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  color: #eef0ff;
  overflow: hidden;
  /* Mobile: kill page scroll/bounce, pinch/double-tap zoom, and the tap flash. */
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Fill the visual viewport including behind notches; svh handles mobile URL bars. */
  width: 100%;
  width: 100vw;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, transparent 0 23px, rgba(255, 255, 255, 0.025) 24px 25px),
    radial-gradient(circle at 50% 112%, rgba(30, 212, 255, 0.16), transparent 34%);
  opacity: 0.7;
}

body {
  /* Prefer the small viewport height so the layout doesn't jump when the mobile
     browser chrome shows/hides; fall back to 100% for older engines. */
  height: 100svh;
  height: 100dvh;
}

html.high-contrast-mode {
  --ssm-ink: #ffffff;
}
html.high-contrast-mode .hud-bar,
html.high-contrast-mode .ability-row { filter: contrast(1.16) saturate(1.12); }
html.high-contrast-mode .trivia-question,
html.high-contrast-mode .trivia-answer-text,
html.high-contrast-mode .result-sub { text-shadow: 0 2px 6px #000, 0 0 2px #000; }
html.large-text-mode { font-size: 112.5%; }
html.large-text-mode .trivia-question { font-size: clamp(21px, 5.4vw, 33px); }
html.large-text-mode .trivia-answer-text { font-size: clamp(16px, 4vw, 22px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
html.prefers-reduced-motion *, html.prefers-reduced-motion *::before, html.prefers-reduced-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* Phase 4 (Agent SCALE): the game is RESPONSIVE — no aspect-ratio lock and no
   letterboxing. #game-root is the full visual viewport; the top chrome reserves
   space, while the Phaser canvas extends behind the bottom chrome so the art
   continues to the ability controls. */
#game-root {
  position: fixed;
  inset: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  /* No long-press callout / text selection / image drag anywhere in the game
     shell (both are inherited, so this cascades to the HUD, bars and canvas). */
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* The play surface starts below the HUD and extends behind the bottom ability
   rail. Gameplay anchors subtract the live rail height, but the backdrop keeps
   painting behind the controls so there is no dead band. */
#phaser-container {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--bar-top);
  bottom: 0;
}
/* Kill ALL native touch gestures on the play surface (double-tap zoom, pinch,
   pull-to-refresh / rubber-band) so every touch is a clean game input. Explicit
   on the canvas itself (not just the #game-root ancestor) for engines that only
   honour touch-action on the direct touch target. GameScene toggles the cursor
   to `pointer` over tappable cats; default the rest of the time. */
#phaser-container,
#phaser-container canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
#phaser-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: default;
}

/* The two chrome bars only ever receive taps (never scroll): `manipulation`
   removes the legacy 300ms tap delay and double-tap zoom while keeping taps
   instant, and nothing in them is selectable or long-press-callout-able. */
#hud,
#ability-bar {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.overlay {
  pointer-events: none; /* interactive children must set pointer-events: auto */
}

/* Modal/announcement layers cover the WHOLE viewport (over the bars too) so a
   trivia modal or a title/game-over screen fully occludes the fixed chrome. */
#toast-layer,
#trivia-layer,
#screen-layer {
  position: fixed;
  inset: 0;
}

/* #hud spans the full reserved top band (var(--bar-top), incl. safe-area). The
   actual raster frame (.hud-bar) is width-capped + centered inside it by
   screens.css, and carries the container context so its % children track the
   frame — not the whole viewport — at every size. */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bar-top);
}

/* #ability-bar is ABSOLUTE inside the aspect-locked #game-root container. */
#ability-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  height: var(--bar-bottom);
}

/* Layer stacking: hud/ability under toast, trivia above, full screens on top */
#hud          { z-index: 10; }
#ability-bar  { z-index: 11; }
#toast-layer  { z-index: 20; }
#trivia-layer { z-index: 30; }
#screen-layer { z-index: 40; }

/* Shared premium screen chrome. Launch, game screens, and meta panels use one
   material language without changing their runtime contracts. */
:root {
  --kuriosi-lacquer: #030812;
  --kuriosi-lacquer-raised: #081426;
  --kuriosi-gold: #d9a23d;
  --kuriosi-gold-hot: #ffe08a;
  --kuriosi-cyan: #35dfff;
  --kuriosi-cyan-soft: #bff8ff;
  --kuriosi-danger: #ff4d36;
  --kuriosi-screen-shadow: 0 28px 80px rgba(0, 0, 0, 0.82);
  --kuriosi-ui-font: 'Trebuchet MS', 'Arial Narrow', system-ui, sans-serif;
}