/* ==========================================================================
   FiDo-5 — Game interface.
   The play surface is a fixed 480x270 canvas scaled to fit with
   nearest-neighbour. Everything else is DOM, because crisp text at any device
   pixel ratio beats a pixel font for numbers the player has to read fast.
   ========================================================================== */

:root {
  --ink:      #080a12;
  --ink-2:    #101632;
  --panel:    #12183a;
  --panel-2:  #1a2148;
  --line:     #2c3566;
  --text:     #dfe4ff;
  --dim:      #8f9ad2;
  --purple:   #8b5cf6;
  --purple-l: #b794ff;
  --cyan:     #35d0ff;
  --amber:    #ffb238;
  --yellow:   #ffe66d;
  --red:      #ff3d68;
  --green:    #2ee6a6;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tap: 48px;                /* minimum touch target */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--ui);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app { position: fixed; inset: 0; overflow: hidden; }

/* ---- Play surface ------------------------------------------------------- */
/* Sized and centred by main.js so the aspect ratio is exact and the scaling
   stays nearest-neighbour. The body colour becomes the letterbox. */
#stage {
  position: absolute; top: 0; left: 0;
  display: block;
  background: #070a18;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.layer { position: absolute; inset: 0; }
[hidden] { display: none !important; }

/* ---- Shared controls ---------------------------------------------------- */
.btn {
  font: 700 clamp(.85rem, 2.6vh, 1rem)/1 var(--ui);
  letter-spacing: .04em;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 0 1.1em;
  min-height: var(--tap);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { background: #222a58; border-color: var(--purple); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.btn--play {
  background: linear-gradient(180deg, var(--purple-l), var(--purple));
  border-color: #6d28d9; color: #fff;
  font-size: clamp(1rem, 3.4vh, 1.35rem);
  letter-spacing: .1em; text-transform: uppercase;
  min-height: 54px; padding: 0 2em;
  box-shadow: 0 4px 0 #52208f, 0 8px 22px rgba(139,92,246,.4);
}
.btn--play:hover { background: linear-gradient(180deg, #c9adff, #9a6ff8); }
.btn--play:active { box-shadow: 0 2px 0 #52208f; transform: translateY(2px); }
.btn--menu { text-transform: uppercase; letter-spacing: .08em; }
.btn--wide { width: 100%; }
.btn--back { min-width: var(--tap); padding: 0; font-size: 1.2rem; }
.btn--danger { border-color: #7a1c33; color: #ffb9c8; background: #2a1020; width: 100%; margin-top: 1rem; }
.btn--danger:hover { background: #3d1329; border-color: var(--red); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--panel-2); border-color: var(--line); }

.iconbtn {
  width: var(--tap); height: var(--tap);
  background: rgba(8,10,18,.62); border: 2px solid var(--line);
  border-radius: 10px; cursor: pointer; color: var(--text);
  display: grid; place-items: center;
}
.iconbtn svg { width: 20px; height: 20px; fill: currentColor; }
.iconbtn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ---- Logo -------------------------------------------------------------- */
.logo {
  font-size: clamp(2.4rem, 11vh, 4.6rem);
  font-weight: 800; letter-spacing: -.03em; line-height: .9;
  color: #fff;
  text-shadow: 0 0 10px rgba(139,92,246,.95), 0 0 34px rgba(139,92,246,.5), 0 3px 0 #52208f;
}
.logo span { color: var(--cyan); text-shadow: 0 0 10px rgba(53,208,255,.9), 0 3px 0 #16607f; }
.logo--sm { font-size: clamp(1.9rem, 7.4vh, 3.1rem); }
.tagline {
  font-size: clamp(.62rem, 1.9vh, .82rem); font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--amber);
  margin-top: .5em;
}

/* ---- Loading ----------------------------------------------------------- */
.screen { z-index: 20; }
.screen--center { display: grid; place-items: center; }
.screen--dim { background: rgba(8,10,18,.82); backdrop-filter: blur(3px); }
#screen-loading { background: radial-gradient(120% 90% at 50% 120%, #2a1f56 0%, #080a12 70%); }
.brandmark { text-align: center; }
.loading { margin-top: 1.6rem; color: var(--dim); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }

/* ---- Main menu --------------------------------------------------------- */
#screen-menu { display: block; }
#menu-scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; object-fit: cover;
}
.menu {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.5rem, 1.6vh, 1rem);
  padding: calc(var(--safe-t) + .6rem) calc(var(--safe-r) + .8rem) calc(var(--safe-b) + .6rem) calc(var(--safe-l) + .8rem);
  text-align: center;
  /* Dark where the text sits, clearing towards the bottom so the operative
     and FiDo-5 running along the street stay visible. */
  background: linear-gradient(180deg,
    rgba(8,10,18,.90) 0%,
    rgba(8,10,18,.82) 46%,
    rgba(8,10,18,.55) 74%,
    rgba(8,10,18,.20) 100%);
}
.menu__head { margin-bottom: .3rem; }
.menu__wallet { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.menu__nav { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; max-width: 30rem; }
.menu__best { font-size: .74rem; color: var(--dim); letter-spacing: .04em; }
.menu__best strong { color: var(--text); }
.menu__foot { font-size: .7rem; color: var(--dim); }
.menu__foot a { color: var(--cyan); text-decoration: none; }
.menu__foot a:hover { text-decoration: underline; }

.daily-nudge {
  position: absolute; top: calc(var(--safe-t) + .7rem); right: calc(var(--safe-r) + .7rem);
  background: linear-gradient(180deg, var(--yellow), var(--amber));
  color: #3a2400; border: 2px solid #a86a00; border-radius: 10px;
  font: 800 .74rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase;
  min-height: 40px; padding: 0 .9em; cursor: pointer;
  animation: nudge 1.9s ease-in-out infinite;
}
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .daily-nudge { animation: none; } }

/* ---- Pills / icons ----------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .35em;
  background: rgba(8,10,18,.72); border: 1px solid var(--line);
  border-radius: 999px; padding: .3em .7em;
  font: 700 .78rem/1 var(--ui); color: var(--text);
}
.pill--coin { border-color: #7a5a12; }
.pill--part { border-color: #6b4a12; }
.pill--key  { border-color: #7a5a12; }
.pill--lvl  { border-color: var(--purple); color: var(--purple-l); }
.pill--streak { border-color: var(--yellow); color: var(--yellow); }

.ico { width: 11px; height: 11px; display: inline-block; flex: none; border-radius: 2px; }
.ico-coin { background: radial-gradient(circle at 35% 35%, var(--yellow), var(--amber) 70%); border-radius: 50%; }
.ico-part { background: linear-gradient(135deg, var(--amber), #a8410d); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.ico-key  { background: var(--amber); clip-path: polygon(0 35%,62% 35%,62% 20%,100% 20%,100% 80%,62% 80%,62% 65%,0 65%); }

/* ---- HUD --------------------------------------------------------------- */
/* Anchored to the canvas, not the window, so it stays on the play surface at
   any window shape. */
#hud {
  pointer-events: none; z-index: 15;
  left: var(--stage-l, 0); top: var(--stage-t, 0);
  width: var(--stage-w, 100%); height: var(--stage-h, 100%);
  right: auto; bottom: auto;
}
#hud button { pointer-events: auto; }

.hud-top {
  position: absolute; top: calc(var(--safe-t) + .45rem);
  left: calc(var(--safe-l) + .5rem); right: calc(var(--safe-r) + .5rem);
  display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
}
.hud-left { display: flex; gap: .9rem; }
.hud-right { display: flex; gap: .4rem; align-items: center; }
.stat { display: flex; flex-direction: column; line-height: 1; }
.stat__label { font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.stat__val {
  font: 800 clamp(1rem, 3.2vh, 1.5rem)/1 var(--ui);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(8,10,18,.9);
}
.stat--score .stat__val { color: #fff; }

/* Under the score, because the bottom-left corner belongs to the movement
   buttons now that the operative is driven rather than automatic. */
.hud-bars {
  position: absolute; left: calc(var(--safe-l) + .5rem); top: calc(var(--safe-t) + 3.1rem);
  display: flex; flex-direction: column; gap: .24rem; width: min(46vw, 220px);
}
.bar { display: flex; align-items: center; gap: .35rem; }
.bar__glyph {
  font: 800 .54rem/1 var(--ui); letter-spacing: .06em; color: var(--dim);
  width: 1.4em; text-align: right; flex: none;
}
.bar__track {
  flex: 1; height: 9px; background: rgba(8,10,18,.8);
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
}
.bar__fill { height: 100%; width: 100%; transition: width .12s linear; }
.bar__num {
  font: 700 .62rem/1 var(--ui); color: var(--dim); font-variant-numeric: tabular-nums;
  width: 2.4em; flex: none;
}
.bar--health .bar__fill { background: linear-gradient(90deg, #1f9e6f, var(--green)); }
.bar--health.is-low .bar__fill { background: linear-gradient(90deg, #8c1533, var(--red)); }
.bar--shield .bar__fill { background: linear-gradient(90deg, #6d28d9, var(--purple-l)); }
.bar--energy .bar__fill { background: linear-gradient(90deg, #1a6c99, var(--cyan)); }
.bar--energy.is-warn .bar__track { border-color: var(--red); animation: warn .3s steps(2) 3; }
/* Overheated: the same flash, held for as long as the weapon is out. */
.bar--energy.is-overheat .bar__track { border-color: var(--red); animation: warn .3s steps(2) infinite; }
.bar--energy.is-overheat .bar__fill { background: linear-gradient(90deg, #8c1533, var(--red)); }
@keyframes warn { 50% { background: rgba(255,61,104,.4); } }

/* Sits directly above the health / shield / energy bars, so everything the
   player has to glance at during a run is in one corner. */
.hud-drone {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .1rem;
}
.hud-drone__name { font: 800 .54rem/1 var(--ui); letter-spacing: .12em; color: var(--cyan); flex: none; }
.hud-drone__state { font: 700 .62rem/1 var(--ui); color: var(--text); flex: 1; white-space: nowrap; }
.hud-drone__bar { width: 42px; height: 4px; flex: none; background: rgba(8,10,18,.9); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.hud-drone__bar > div { height: 100%; width: 100%; background: var(--green); transition: width .15s linear; }
.hud-drone.is-cooling .hud-drone__bar > div { background: var(--dim); }

/* Out of the way for the boss intro card, back with the bell. */
#hud { transition: opacity .22s ease; }
#hud.is-card { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #hud { transition: none; } }

/* Lives. Only ever on screen during a boss fight. Deliberately louder than
   the bars beside it: running out of these ends the run outright. */
.hud-lives {
  display: flex; align-items: center; gap: .45em; align-self: flex-start;
  background: rgba(8,10,18,.8); border: 1px solid var(--line);
  border-left: 2px solid var(--red);
  border-radius: 6px; padding: .2rem .45rem;
}
.hud-lives__label {
  font: 800 .56rem/1 var(--ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.hud-lives__pips { display: flex; gap: .28em; }
.hud-lives__pips i {
  width: .62rem; height: .62rem; border-radius: 2px;
  background: var(--red); box-shadow: 0 0 6px rgba(255,61,104,.65);
}
.hud-lives__pips i.is-spent {
  background: transparent; box-shadow: none;
  border: 1px solid var(--line); opacity: .55;
}
/* The pip that has just gone flashes before it empties, so a life lost in the
   middle of a fight is not something the player only notices afterwards. */
.hud-lives.is-lost .hud-lives__pips i.is-spent:first-of-type { animation: life-lost .5s ease-out; }
@keyframes life-lost {
  0%   { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.9); opacity: 1; }
  100% { background: transparent; box-shadow: none; opacity: .55; }
}

.hud-powers {
  position: absolute; top: calc(var(--safe-t) + 3.4rem); right: calc(var(--safe-r) + .5rem);
  list-style: none; display: flex; flex-direction: column; gap: .22rem; align-items: flex-end;
}
.hud-powers li {
  display: flex; align-items: center; gap: .35em;
  background: rgba(8,10,18,.66); border: 1px solid var(--line); border-radius: 6px;
  padding: .16rem .42rem; font: 700 .62rem/1 var(--ui);
}
.hud-powers .t { font-variant-numeric: tabular-nums; color: var(--dim); }

/* What the last crate held. Bottom centre: clear of both button clusters on a
   phone, and clear of everything on a desktop. */
.hud-reward {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + .55rem);
  display: flex; align-items: baseline; gap: .55em;
  max-width: min(88%, 30rem);
  background: rgba(8,10,18,.88); border: 1px solid var(--line);
  border-bottom: 2px solid var(--yellow);
  border-radius: 9px; padding: .34rem .85rem;
  animation: reward-in .18s ease-out;
}
.hud-reward__what {
  font: 800 .58rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow); flex: none; white-space: nowrap;
}
.hud-reward__got { font: 700 .88rem/1.2 var(--ui); color: #fff; }
@keyframes reward-in { from { opacity: 0; transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .hud-reward { animation: none; } }

/* Overheat. Centred over the play surface, well clear of the bars it refers to. */
.hud-overheat {
  position: absolute; left: 50%; top: 27%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: .6em;
  background: rgba(8,10,18,.9); border: 1px solid var(--red);
  border-radius: 9px; padding: .4rem 1rem;
  box-shadow: 0 0 18px rgba(255,61,104,.35);
  animation: overheat-pulse .5s steps(2) infinite;
}
.hud-overheat__label {
  font: 800 .82rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}
.hud-overheat__left {
  font: 700 .78rem/1 var(--ui); color: var(--dim); font-variant-numeric: tabular-nums;
}
@keyframes overheat-pulse { 50% { border-color: var(--amber); } }
@media (prefers-reduced-motion: reduce) { .hud-overheat { animation: none; } }

/* Touch pad. Movement on the left, actions on the right, and neither cluster
   covers the deck the player has to read. */
.pad__btn {
  position: absolute; pointer-events: auto;
  width: var(--btn-alt); height: var(--btn-alt);
  border-radius: 50%;
  background: rgba(18,24,58,.55);
  border: 2px solid rgba(143,154,210,.45);
  color: var(--text); cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(2px);
}
.pad__btn svg { width: 46%; height: 46%; fill: currentColor; stroke: currentColor; stroke-width: 1.6; }
.pad__btn.is-down { background: rgba(139,92,246,.55); border-color: var(--purple-l); transform: scale(.94); }
.pad__btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* Padding on the touch target only, for the held pair.

   Hit testing respects border-radius, so two circles on a diagonal leave a
   dead corridor between them where a tap lands on neither and the run just
   carries on without you — the worst of the three ways to miss, and the one a
   player cannot learn around. The corridor is about 12px at every size,
   because it is `--btn-gap` times root-two plus a rounding of the button.

   An absolutely positioned child is not a grid item, so this changes no
   layout and draws nothing; a tap on it bubbles to the button. Tying the
   inset to --btn-gap is what keeps the residual gap constant: the one number
   that opens the corridor is the number that closes it. About 3px is left, so
   the two never actually overlap and neither can steal the other's tap.

   Deliberately not on the gadget — overshooting a reach for jump into a
   cooldown is the one miss the layout below is built to keep expensive. */
.pad__btn--jump::before,
.pad__btn--fire::before {
  content: ''; position: absolute;
  /* The 2px is the button's own border: an absolutely positioned child is
     placed against the padding box, so without it the border quietly eats
     that much of the reach. Measured, not assumed — it was the difference
     between a 6px residual corridor and a 2.5px one. */
  inset: calc(-2px - var(--btn-gap) * .62);
  border-radius: 50%;
}
/* The right-hand cluster, laid out from four numbers rather than from four
   sets of hand-computed offsets. Sizes are clamps in vh, so rem arithmetic
   cannot tell you whether two buttons touch — expressing every position in
   terms of the same size makes the gaps hold at any viewport height, and the
   @media block below only has to restate these four. */
.pad {
  position: absolute; inset: 0; pointer-events: none;
  --btn-main: clamp(76px, calc(14.5vh + 6px), 98px); /* jump and fire: the held pair */
  --btn-alt:  clamp(64px, calc(11.5vh + 8px), 86px); /* gadget */
  --btn-gap:  .5rem;
  /* Held in from the right edge rather than tucked against it. A thumb
     reaching the last few millimetres of the corner is a thumb at the end of
     its travel, which is where aim goes first: the cluster sits far enough in
     that both held buttons are taken mid-sweep instead. */
  --pad-r:    calc(var(--safe-r) + 1.4rem);
  --pad-b:    calc(var(--safe-b) + 1.1rem);
  /* How far apart the staggered pair sits, on both axes. At 0.72 of a button
     plus the gap the two circles clear each other by about 12px even at the
     smallest size, while the boxes still overlap — which is fine, because a
     round button does not take taps in its corners. */
  --btn-step: calc(var(--btn-main) * .72 + var(--btn-gap));
}

/* The two held buttons sit on a diagonal rather than a row, along the arc a
   right thumb actually sweeps: fire low and inboard where the thumb rests,
   jump up and out in the corner where it reaches. Both are the same size —
   jump is the one input in the game where a few pixels of miss is a death, so
   it does not get the smaller target. The gadget is cooldown-gated and the
   least time-critical, so it takes the longest reach, above the pair. */
.pad__btn--jump   { right: var(--pad-r);
                    bottom: calc(var(--pad-b) + var(--btn-step));
                    width: var(--btn-main); height: var(--btn-main);
                    background: rgba(46,230,166,.16); border-color: rgba(46,230,166,.5); }
.pad__btn--fire   { right: calc(var(--pad-r) + var(--btn-step));
                    bottom: var(--pad-b);
                    width: var(--btn-main); height: var(--btn-main); }
.pad__btn--jump.is-down { background: rgba(46,230,166,.5); border-color: var(--green); }
/* A wider gap above jump than between jump and fire: reaching up for jump and
   overshooting into the gadget wastes a cooldown and misses the jump, which is
   worse than either of the two held buttons catching the other. */
.pad__btn--gadget { right: calc(var(--pad-r) + var(--btn-step) * .5);
                    bottom: calc(var(--pad-b) + var(--btn-step) + var(--btn-main)
                                 + var(--btn-gap) * 2.2); }

/* ---- Movement stick -------------------------------------------------------
   One thumb, four directions. Left and right run, up jumps or climbs a level,
   down slides or drops one — the same vocabulary the keyboard has, which the
   four separate buttons split across both sides of the screen.

   The zone is invisible and much larger than the ring: a thumb that lands
   anywhere in the lower-left corner takes the stick with it, so nothing has to
   be aimed at. */
.stick {
  position: absolute; pointer-events: auto;
  left: 0; bottom: 0;
  width: min(46%, 300px); height: min(62%, 340px);
  touch-action: none;
}
.stick__base {
  position: absolute;
  left: calc(var(--safe-l) + 4.6rem); bottom: calc(var(--safe-b) + 4.2rem);
  width: 116px; height: 116px; margin: -58px 0 0 -58px;
  border-radius: 50%;
  border: 2px solid rgba(143,154,210,.34);
  background: radial-gradient(circle at 50% 50%, rgba(18,24,58,.5), rgba(18,24,58,.22) 70%, transparent 72%);
  display: grid; place-items: center;
  opacity: .5;
  transition: opacity .16s ease;
}
.stick.is-live .stick__base { opacity: 1; transition: none; }
.stick__knob {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(139,92,246,.5);
  border: 2px solid rgba(183,148,255,.85);
  box-shadow: 0 0 12px rgba(139,92,246,.4);
  will-change: transform;
}
.stick.is-live .stick__knob { background: rgba(139,92,246,.8); }
/* Chevrons on the rim, lit by whichever way the stick is pushed: the stick
   teaches that up is jump and down is slide without a tutorial line. */
.stick__dir {
  position: absolute; width: 0; height: 0; opacity: .3;
  border: 7px solid transparent;
  transition: opacity .1s linear;
}
.stick__dir--up    { top: 2px;    border-bottom-color: var(--dim); border-top-width: 0; }
.stick__dir--down  { bottom: 2px; border-top-color: var(--dim); border-bottom-width: 0; }
.stick__dir--left  { left: 2px;   border-right-color: var(--dim); border-left-width: 0; }
.stick__dir--right { right: 2px;  border-left-color: var(--dim); border-right-width: 0; }
.stick__base.on-up    .stick__dir--up    { opacity: 1; border-bottom-color: var(--purple-l); }
.stick__base.on-down  .stick__dir--down  { opacity: 1; border-top-color: var(--purple-l); }
.stick__base.on-left  .stick__dir--left  { opacity: 1; border-right-color: var(--purple-l); }
.stick__base.on-right .stick__dir--right { opacity: 1; border-left-color: var(--purple-l); }
.pad.is-hidden .stick { display: none; }
@media (prefers-reduced-motion: reduce) {
  .stick__base, .stick__dir { transition: none; }
}
.pad__btn--gadget canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.pad__cool {
  position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(rgba(8,10,18,.78) var(--p, 0deg), transparent 0deg);
  pointer-events: none;
}
.pad.is-hidden .pad__btn { display: none; }

/* Health bars sit low-left, so on very short screens shrink the pad instead. */
@media (max-height: 400px) {
  /* Only these numbers change; every size and position above follows them. */
  .pad { --btn-main: 78px; --btn-alt: 58px; --btn-gap: .4rem;
         --pad-b: calc(var(--safe-b) + .7rem); }
  .stick__base { width: 92px; height: 92px; margin: -46px 0 0 -46px;
                 left: calc(var(--safe-l) + 3.6rem); bottom: calc(var(--safe-b) + 3.2rem); }
  .stick__knob { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .hud-reward { bottom: calc(var(--safe-b) + 6.4rem); font-size: .9em; }
}

/* ---- Panels ------------------------------------------------------------ */
.screen--panel {
  background: linear-gradient(180deg, #0b0f24 0%, #12183a 100%);
  display: flex; flex-direction: column;
  padding: calc(var(--safe-t)) calc(var(--safe-r)) calc(var(--safe-b)) calc(var(--safe-l));
}
.phead {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .8rem; border-bottom: 1px solid var(--line);
  background: rgba(8,10,18,.6); flex: none;
}
.phead h2 {
  font-size: clamp(1rem, 3.4vh, 1.4rem); letter-spacing: .05em;
  text-transform: uppercase; flex: 1;
}
.phead--center { justify-content: center; }
.phead--center h2 { text-align: center; flex: none; }
.phead__wallet {
  display: flex; align-items: center; gap: .3em;
  font: 700 .82rem/1 var(--ui); color: var(--text);
  background: rgba(8,10,18,.6); border: 1px solid var(--line); border-radius: 999px;
  padding: .35em .8em;
}
.pbody { flex: 1; overflow-y: auto; padding: .8rem; -webkit-overflow-scrolling: touch; }
.pfoot { flex: none; padding: .6rem .8rem; border-top: 1px solid var(--line); background: rgba(8,10,18,.6); }
.pfoot--two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.grouphead {
  font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan); margin: 1.1rem 0 .5rem;
}
.grouphead:first-child { margin-top: 0; }
.grouphead small { color: var(--dim); letter-spacing: .04em; text-transform: none; font-weight: 600; }
.note { font-size: .74rem; color: var(--dim); line-height: 1.5; margin-top: .5rem; }

/* ---- Selection cards -------------------------------------------------- */
.cards { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.card {
  text-align: left; background: var(--panel); border: 2px solid var(--line);
  border-radius: 10px; padding: .6rem .7rem; cursor: pointer; color: var(--text);
  display: flex; flex-direction: column; gap: .25rem; min-height: var(--tap);
  font-family: var(--ui);
}
.card:hover { border-color: var(--purple); background: #182052; }
.card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.card.is-on { border-color: var(--cyan); background: #14264a; box-shadow: inset 0 0 0 1px rgba(53,208,255,.35); }
.card.is-on .card__name::after {
  content: "Equipped"; margin-left: .5em; font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan); border: 1px solid var(--cyan);
  border-radius: 4px; padding: .1em .35em; vertical-align: 1px;
}
.card__name { display: block; font-weight: 800; font-size: .88rem; }
.card__blurb { display: block; font-size: .72rem; color: var(--dim); line-height: 1.4; }
.card__stats { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .66rem; color: var(--text); margin-top: .1rem; }
.card__stats b { color: var(--yellow); font-variant-numeric: tabular-nums; }
.cards--skins .card { flex-direction: row; align-items: center; gap: .6rem; }
.cards--skins .card > span:last-child { display: block; }
.card__swatch {
  width: 34px; height: 26px; flex: none; border-radius: 5px; border: 1px solid var(--line);
  display: grid; place-items: center;
}
.card__swatch canvas { image-rendering: pixelated; width: 30px; height: 22px; }

/* ---- Upgrade rows ----------------------------------------------------- */
.ups { display: flex; flex-direction: column; gap: .42rem; }
.up {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem .7rem; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: .5rem .65rem;
}
.up__name { font-weight: 700; font-size: .84rem; }
.up__meta { font-size: .68rem; color: var(--dim); grid-column: 1; }
.up__pips { display: flex; gap: 2px; margin-top: .2rem; grid-column: 1; }
.up__pip { width: 12px; height: 5px; border-radius: 2px; background: #2a3160; }
.up__pip.is-on { background: var(--cyan); }
.up__buy {
  grid-row: 1 / span 3; grid-column: 2;
  min-width: 84px; min-height: 42px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 2px solid var(--line); color: var(--text);
  font: 700 .74rem/1.2 var(--ui); display: grid; place-items: center; padding: .2em .5em;
}
.up__buy.can { border-color: var(--green); color: #bcffe6; }
.up__buy.can:hover { background: #103526; }
.up__buy[disabled] { opacity: .45; cursor: not-allowed; }
.up__buy .c { font-variant-numeric: tabular-nums; }

/* ---- Drone inspector -------------------------------------------------- */
.pbody--drone { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .pbody--drone { grid-template-columns: 260px minmax(0, 1fr); } }
.inspector {
  background: radial-gradient(90% 80% at 50% 40%, #1d2450 0%, #0b0f24 75%);
  border: 1px solid var(--line); border-radius: 12px;
  display: grid; place-items: center; padding: .7rem; position: relative;
  min-height: 190px;
}
#drone-view { image-rendering: pixelated; touch-action: none; cursor: grab; width: 100%; height: auto; max-width: 260px; }
.inspector__hint {
  position: absolute; bottom: .4rem; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}

/* ---- Stat lists ------------------------------------------------------- */
.statlist { display: grid; grid-template-columns: 1fr auto; gap: .28rem .8rem; font-size: .78rem; }
.statlist dt { color: var(--dim); }
.statlist dd { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.statlist--res { font-size: .86rem; margin: .8rem 0; }

/* ---- Missions --------------------------------------------------------- */
.missions { display: flex; flex-direction: column; gap: .5rem; }
.mission {
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: .55rem .7rem;
}
.mission__name { font-weight: 700; font-size: .84rem; }
.mission__bar { height: 7px; background: #0b0f24; border-radius: 4px; overflow: hidden; margin: .35rem 0 .25rem; }
.mission__bar > div { height: 100%; background: linear-gradient(90deg, #6d28d9, var(--purple-l)); }
.mission__meta { display: flex; justify-content: space-between; font-size: .68rem; color: var(--dim); }
.mission__meta b { color: var(--yellow); }
.mission.is-done { border-color: var(--green); }

.xpwrap { margin-bottom: 1rem; }
.xpbar { height: 9px; background: #0b0f24; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.xpbar > div { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple-l)); transition: width .5s ease; }

/* ---- Daily ------------------------------------------------------------ */
.daily { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .4rem; }
.day {
  background: var(--panel); border: 2px solid var(--line); border-radius: 9px;
  padding: .5rem .4rem; text-align: center;
}
.day__n { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.day__r { font-size: .74rem; font-weight: 700; margin-top: .2rem; line-height: 1.3; }
.day.is-next { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(255,230,109,.3) inset; }
.day.is-done { opacity: .5; }
.day.is-done .day__n::after { content: " ✓"; color: var(--green); }

/* ---- Dialogs ---------------------------------------------------------- */
.dialog {
  background: var(--panel); border: 2px solid var(--line); border-radius: 14px;
  padding: 1.2rem; width: min(92vw, 24rem);
  display: flex; flex-direction: column; gap: .5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.dialog h2 {
  font-size: clamp(1.1rem, 4vh, 1.5rem); text-align: center;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .4rem;
}

/* ---- Sector intermission ----------------------------------------------
   Continue is the button a player reaching for anything is reaching for, so
   it takes the full width and the whole row; the two that lead away from the
   run share the one below. It is also first in the DOM, which is what makes
   it the focused control and the one Enter presses. */
.pfoot--sector { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pfoot--sector .btn--wide { grid-column: 1 / -1; }
.sec-kill {
  text-align: center; font: 800 clamp(1.1rem, 4.4vh, 1.7rem)/1.2 var(--ui);
  color: #fff; margin: .3rem 0 .1rem; letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(139,92,246,.7);
}
.sec-kill small {
  display: block; font: 700 .62rem/1.6 var(--ui); letter-spacing: .22em; color: var(--dim);
  text-transform: uppercase; text-shadow: none;
}
/* Short lines, so they wrap into columns on a wide screen rather than each
   taking a full 1280px row. The shield keeps a row of its own: it is the one
   line that describes what happens next rather than what just happened. */
.sec-supply {
  display: grid; gap: .3rem; margin: .1rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.sec-supply li {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .78rem; background: rgba(46,230,166,.08);
  border: 1px solid rgba(46,230,166,.32); border-radius: 8px; padding: .34rem .6rem;
}
.sec-supply li::before { content: '+'; color: var(--green); font-weight: 800; }
.sec-supply li b { color: var(--green); font-weight: 700; }
.sec-supply .is-shield {
  grid-column: 1 / -1;
  background: rgba(53,208,255,.09); border-color: rgba(53,208,255,.36);
}
.sec-supply .is-shield::before { content: '\25C6'; color: var(--cyan); }
.sec-supply .is-shield b { color: var(--cyan); }

/* A landscape phone is about 390px tall and the panel has a fixed header and
   footer, which leaves roughly 240px for the body. Everything here is
   readable at these sizes; the point is to fit the whole resupply rather
   than slice the second row in half at the footer edge, which reads as
   broken rather than as "there is more below". */
@media (max-height: 470px) {
  #screen-sector .pbody { padding: .45rem .8rem; }
  .sec-kill { font-size: 1.02rem; margin: .05rem 0 0; }
  .sec-kill small { font-size: .55rem; line-height: 1.5; letter-spacing: .18em; }
  #screen-sector .statlist--res { font-size: .74rem; margin: .45rem 0; }
  #screen-sector .grouphead { margin: .5rem 0 .3rem; }
  .sec-supply { gap: .26rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .sec-supply li { padding: .26rem .5rem; font-size: .72rem; }
  #screen-sector .note { margin-top: .4rem; font-size: .68rem; }
  .pfoot--sector { padding: .45rem .8rem; gap: .4rem; }
}

/* ---- Results ---------------------------------------------------------- */
.res-score { text-align: center; margin: .4rem 0 .2rem; }
.res-score span {
  display: block; font: 800 clamp(2.2rem, 9vh, 3.4rem)/1 var(--ui); color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(139,92,246,.7);
}
.res-score small {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}
.res-xp { margin-top: .8rem; }
.res-mission {
  background: #10331f; border: 1px solid var(--green); border-radius: 8px;
  padding: .45rem .6rem; font-size: .78rem; margin-bottom: .35rem;
}
.res-mission b { color: var(--green); }

/* ---- Settings --------------------------------------------------------- */
.setrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.setrow--col { flex-direction: column; align-items: stretch; gap: .4rem; }
.setrow--stack { align-items: flex-start; }
.setrow__text { display: flex; flex-direction: column; gap: .2rem; }
.setrow__hint { font-size: .74rem; color: var(--dim); line-height: 1.45; max-width: 34rem; }
.setrow label, .setrow__label { font-size: .86rem; font-weight: 600; }
.toggle {
  width: 54px; height: 30px; flex: none; border-radius: 999px; cursor: pointer;
  background: #232a55; border: 2px solid var(--line); position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.toggle span {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--dim); transition: transform .15s ease, background .15s ease;
}
.toggle[aria-checked="true"] { background: #1d3f5c; border-color: var(--cyan); }
.toggle[aria-checked="true"] span { transform: translateX(24px); background: var(--cyan); }
.toggle:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
select, input[type="range"] {
  width: 100%; min-height: 44px; font: 600 .86rem var(--ui);
  background: var(--panel); color: var(--text);
  border: 2px solid var(--line); border-radius: 8px; padding: 0 .6em;
}
input[type="range"] { padding: 0; accent-color: var(--cyan); }

/* ---- Debug ----------------------------------------------------------- */
.debugpanel { background: #0d0b18; }
.debugpanel .pbody { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-content: start; }
.debugpanel .btn { font-size: .74rem; min-height: 42px; }
.debugpanel .dbg-note { grid-column: 1 / -1; }
.debugpanel pre {
  grid-column: 1 / -1; font: 600 .68rem/1.5 ui-monospace, Menlo, Consolas, monospace;
  background: #06050c; border: 1px solid #2a2340; border-radius: 8px; padding: .6rem;
  white-space: pre-wrap; color: #bda6ff; max-height: 34vh; overflow: auto;
}

/* ---- Rotate hint ----------------------------------------------------- */
.rotate {
  position: absolute; inset: 0; z-index: 60;
  background: #080a12; display: grid; place-items: center; text-align: center; padding: 2rem;
}
.rotate svg { fill: none; stroke: var(--cyan); stroke-width: 1.6; margin: 0 auto 1rem; animation: tip 2.4s ease-in-out infinite; }
.rotate p { font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; }
.rotate small { color: var(--dim); font-size: .78rem; }
@keyframes tip { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-88deg); } }
@media (prefers-reduced-motion: reduce) { .rotate svg { animation: none; transform: rotate(-88deg); } }

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .bar__fill, .toggle, .toggle span, .xpbar > div { transition: none; }
}