/* RETRO KICK — the match is proudly pixelated; the shell around it is a
   modern football UI: stadium-night palette, floodlit menu backdrop,
   layered panels, icon rows and a VS match intro. */

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

:root {
  /* Which menu composition is in force, published for ui/menus.js to read.
     The threshold used to be written twice — here and as a matchMedia string
     in the JS — and the two drifted: the JS copy decided whether the panel got
     the `.desk` class while this decided the layout, so a wrong number meant
     the class and the grid disagreed. One definition now, in the media query
     below, and JS asks the document for the answer. */
  --desk: 0;
  --bg0: #0c2f1c;
  --panel: #131f33;
  --panel-edge: #0a1220;
  --ink: #13263e;
  --muted: #64788f;
  --green: #23c161;
  --green-hot: #2edd74;
  --green-deep: #149a4a;
  --cyan: #1fa7e8;
  --navy: #14304f;
  --gold: #f5a623;
  --red: #e8425f;
  --line: rgba(20, 48, 79, 0.14);
  --accent: #ffc94d;
  --accent2: #3fc6ff;
  --focusbg: #1d2c47;
  --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

#stage {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* fit WITHOUT stretching: the limiting axis decides, the other follows
     the aspect ratio (height:100vh + max-width together distorted on
     narrow phones — both constraints bound and aspect-ratio lost) */
  height: min(100vh, calc(100vw * 560 / 416));
  height: min(100dvh, calc(100vw * 560 / 416));
  aspect-ratio: 416 / 560;
  background: #222;
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hud-top {
  margin-top: calc(6px + env(safe-area-inset-top, 0px));
  display: flex;
  gap: 5px;
  align-items: stretch;
  font-weight: bold;
  font-size: clamp(11px, 2.2vh, 18px);
  letter-spacing: 1px;
  max-width: calc(100vw - 12px);
  background: linear-gradient(180deg, #23252b, #131519);
  border: 2px solid #060708;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.hud-pause-btn {
  flex: 0 0 auto;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 3px 9px;
  background: linear-gradient(180deg, #3a3d45, #24262c);
  color: #f2f2f2;
  border: 1px solid #08090b;
  border-radius: 6px;
  font-size: 0.8em;
}
.hud-pause-btn:active { background: #17181c; }
/* same chip as pause, one step quieter: it is there when wanted, not shouting */
.hud-help-btn {
  flex: 0 0 auto;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 3px 8px;
  background: linear-gradient(180deg, #34373f, #202228);
  color: #cfd3da;
  border: 1px solid #08090b;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 900;
}
.hud-help-btn:active { background: #17181c; }
/* Only on screen during the tutorial, and only because "skippable" that you
   cannot see is not skippable. Quieter than the other two — it is a way out,
   not a control you are meant to reach for. */
.hud-skip-btn {
  flex: 0 0 auto;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 3px 8px;
  background: linear-gradient(180deg, #2c2f36, #1b1d22);
  color: #9aa1ab;
  border: 1px solid #08090b;
  border-radius: 6px;
  font-size: 0.62em;
  letter-spacing: 0.08em;
}
.hud-skip-btn:active { background: #17181c; }
@media (hover: hover) and (pointer: fine) {
  .hud-skip-btn:hover { color: #e6e9ee; background: linear-gradient(180deg, #3a3d45, #24262c); }
}
.hud-team {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;          /* a three-letter code never gets shortened */
  padding: 3px 9px 6px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.hud-team::after {
  /* scoreboard LED strip under the plate */
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 2px;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(230, 60, 60, 0.95) 0 3px, transparent 3px 8px,
    rgba(70, 220, 90, 0.95) 8px 11px, transparent 11px 16px);
}
.hud-flag { font-size: 0.85em; flex: 0 0 auto; }
.hud-team b { white-space: nowrap; }
.hud-score {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px 10px;
  background: linear-gradient(180deg, #ffffff, #dfe3e8);
  color: #101216;
  border: 1px solid #08090b;
  border-radius: 6px;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 900;
  letter-spacing: 1px;
  white-space: nowrap;
}
.hud-clock {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px 9px;
  white-space: nowrap;
  background: #0b0c0f;
  color: var(--accent);
  border: 1px solid #08090b;
  border-radius: 6px;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 201, 77, 0.55);
}

/* ---------- controls panel ---------- */
.ctrl-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
  text-align: left;
}
.ctrl-sec {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 0.78em;
  letter-spacing: 2px;
  color: var(--accent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 3px;
}
.ctrl-sec:first-child { margin-top: 0; }
.ctrl-k {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 900;
  letter-spacing: 1px;
  color: #f2f2f2;
  white-space: nowrap;
}
.ctrl-v { color: #c3c8d2; }

/* ---------- the keys themselves ----------
   A one-button game's best argument is the picture of its controls: four
   keys and a spacebar, shown before the table of what they do. */
.key-map {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 10px 20px;
  padding: 2px 0 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.km-g {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.km-g > b {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.kc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 1px;
  color: #10161f;
  background: linear-gradient(180deg, #ffffff 0%, #ccd3dd 72%, #aeb7c4 100%);
  border: 1px solid #0a0f18;
  border-radius: 6px;
  box-shadow: 0 3px 0 #63707f, 0 5px 9px rgba(0, 0, 0, 0.45);
}
.kc-sm { font-size: 11px; height: 26px; min-width: 26px; }
.kc-bar { min-width: 132px; letter-spacing: 3px; }
/* W over A S D, the shape every hand already knows */
.km-wasd {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px;
  justify-content: center;
}
/* explicit cells: auto-placement walks forward only, so pinning W to the
   middle of row 1 would push A into the cell beside it, not under it */
.km-wasd .kc:nth-child(1) { grid-area: 1 / 2; }
.km-wasd .kc:nth-child(2) { grid-area: 2 / 1; }
.km-wasd .kc:nth-child(3) { grid-area: 2 / 2; }
.km-wasd .kc:nth-child(4) { grid-area: 2 / 3; }
/* TOUCH: the card shows the controls themselves, at 0.73 of the size they are
   in a match. It used to draw its own `.km-stick` / `.km-action` mock, which
   drifted until the card's action button was an empty GOLD disc and the real
   one a RED disc with a gold ring, a ball on it and the word ACTION. Nothing
   below sets a colour, a ring or a shadow: those come from `.touch-btn`,
   `.touch-stick` and `.hud-pause-btn` unchanged, which is what makes the
   picture the thing. All that is overridden here is placement and scale. */
.key-map .km-live {
  /* relative, NOT static: `inset: auto` is what drops it out of the corner it
     is pinned to in a match, but the stick still has to be a containing block
     or its absolutely positioned knob escapes and lands in the middle of the
     panel — which is exactly what static did. */
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
}
.key-map .touch-stick.km-live { width: 64px; height: 64px; }
/* the knob keeps its 38/88 share of the ring */
.key-map .touch-stick.km-live .touch-knob {
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
}
.key-map .touch-btn.km-live { width: 64px; height: 64px; }
.key-map .touch-btn.km-live svg { width: 25px; height: 25px; }
.key-map .touch-btn.km-live span { font-size: 8px; letter-spacing: 1.1px; }
/* the pause chip is the HUD's, not a keyboard cap: on a phone that is what
   the player is looking for, in the scoreboard */
.key-map .touch-sw.km-live { width: 46px; height: 46px; font-size: 8px; }
.key-map .hud-pause-btn.km-live {
  padding: 7px 12px;
  font-size: 15px;
  font-weight: 900;
}
@media (max-width: 460px) {
  .key-map { gap: 8px 14px; }
  .kc-bar { min-width: 96px; letter-spacing: 2px; }
}

@media (max-width: 460px) {
  .hud-top { gap: 3px; padding: 4px; letter-spacing: 0; }
  .hud-pause-btn, .hud-help-btn { padding: 3px 6px; }
  .hud-team { gap: 3px; padding: 3px 5px 6px; }
  .hud-score { padding: 3px 6px; letter-spacing: 0; }
  .hud-clock { padding: 3px 5px; }
}

.hud-banner {
  /* OUT OF THE FLOW, and low. #hud is a column flex holding the scoreboard,
     this, and the coach — in that order — so while a banner was up it shoved
     the coach down by its own height plus a 12vh margin, and hiding it 1.7s
     later dropped him straight back. He teleported twice every time a tutorial
     step was scored. Nothing animates that: it is pure layout, so the cure is
     to stop being part of it. Taking the BANNER out rather than pinning the
     coach is the smaller change — the coach keeps the in-flow position he
     already looks right in, and `.low`/`.high` below keep working untouched.

     Anchored by left AND right, not shrink-to-fit: an absolutely positioned
     shrink-to-fit box centred with a transform can be wider than the screen
     and spill off both edges at once, which is the bug `max-width` below was
     added for. Same fix the coach's own docking uses. */
  position: absolute;
  left: 10px;
  right: 10px;
  top: 46%;
  margin-inline: auto;
  /* CAPPED. It is not only the tutorial that goes through here — PENALTIES,
     EXTRA TIME and PLAY ON do too. */
  max-width: calc(100vw - 20px);
  text-align: center;
  text-wrap: balance;
  /* The game's own face. This was inheriting body's Courier New, so the big
     shout over a pixelated pitch was rendered in a terminal font. RKPixel is
     Press Start 2P, already embedded as a data URI (this is an offline PWA —
     nothing may be fetched) and already worn by the title and the menu
     buttons. It is the first RKPixel element inside #hud, which is the point:
     the banner is the arcade shout, the scoreboard and the coach's bubble
     around it are readouts and stay monospace.

     Press Start 2P is far wider per glyph than Courier and carries its own
     spacing, so the size and the letter-spacing both come down hard — at the
     old clamp the longest shout wrapped to three lines. Never faux-bold a
     pixel face: the @font-face declares 400 and anything else smears it. */
  font-family: 'RKPixel', var(--font-ui);
  font-weight: 400;
  font-size: clamp(12px, 3.2vh, 32px);
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 3px 3px 0 #10131e, -1px -1px 0 #10131e, 1px -1px 0 #10131e, -1px 1px 0 #10131e;
  animation: pop 0.18s ease-out;
}
.hud-banner.goal { color: var(--gold); }
.hud-banner.off { color: #ff9a4a; }
.hud-banner.replay { color: var(--cyan); font-size: clamp(11px, 2.6vh, 18px); animation: blink 0.7s step-start infinite; }

.hud-sub {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 8px 10px 0;
  animation: pop 0.16s ease-out;
}
/* Docked clear of the action, at whichever end the goal ISN'T. Spanning the
   full width and centring the row, rather than left:50% + translateX: an
   absolutely positioned shrink-to-fit box anchored at the half-way mark can
   only ever be half the screen wide, which is what turned a two-line hint
   into a nine-line column of two words each. */
.hud-sub.low, .hud-sub.high {
  position: absolute;
  left: 8px;
  right: 8px;
  justify-content: center;
  margin: 0;
}
.hud-sub.low { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.hud-sub.high { top: calc(64px + env(safe-area-inset-top, 0px)); }
@media (hover: none) and (pointer: coarse) {
  /* clear the touch stick and action button */
  .hud-sub.low { bottom: 124px; }
}
.hud-coach {
  flex: 0 0 auto;
  width: clamp(36px, 6.4vh, 52px);
  height: clamp(36px, 6.4vh, 52px);
  background: linear-gradient(180deg, #2c2f38, #191b21);
  border: 2px solid #0b0c10;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.hud-coach svg { width: 82%; height: 82%; image-rendering: pixelated; }
.hud-bubble {
  position: relative;
  margin-left: 9px;
  background: #f6f1e3;
  color: #1c1f26;
  border: 2px solid #0b0c10;
  border-radius: 10px;
  padding: 6px 12px;
  max-width: min(64vw, 340px);
  text-wrap: balance;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(11px, 2vh, 15px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.hud-sub.wide .hud-bubble {
  /* a full explainer is a paragraph, not a label: give it a line length a
     person can actually read across */
  max-width: min(86vw, 560px);
  padding: 8px 14px;
  line-height: 1.45;
}
/* The gesture, inside the bubble and ahead of the words, sized to the line so
   it reads as part of the sentence rather than a badge stuck on it. */
.hud-glyph {
  display: none;
  float: left;
  width: 1.5em;
  height: 1.5em;
  margin: -1px 7px 0 0;
  color: #1c1f26;
  opacity: 0.85;
}
.hud-glyph svg { width: 100%; height: 100%; display: block; }

.hud-bubble::before {
  content: '';
  position: absolute;
  left: -8px; top: 12px;
  border: 6px solid transparent;
  border-right-color: #0b0c10;
  border-left-width: 0;
}
.hud-bubble::after {
  content: '';
  position: absolute;
  left: -5px; top: 14px;
  border: 4px solid transparent;
  border-right-color: #f6f1e3;
  border-left-width: 0;
}

/* ---------- the HUD's three buttons, over the chips the canvas draws --------
   Pause, help and SKIP are PAINTED inside the game canvas with the rest of the
   HUD, because a portal's playtest recording captures the canvas and nothing
   else. These are the tap targets for them: real elements, invisible, parked
   every frame on a rect derived from the canvas layout (see hud.js `place`).
   Not a second copy that can drift out of line -- the same rect, projected.

   position: fixed because `place` writes client coordinates straight from the
   canvas's own getBoundingClientRect(), and opacity rather than visibility or
   display so the element still hit-tests, still focuses, and still reports a
   real `display` to the harnesses that navigate through it. */
.hud-hit {
  position: fixed;
  left: 0; top: 0;
  width: 0; height: 0;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  /* ABOVE THE FULL-STAGE OVERLAYS. The canvas paints the top plate over the
     lesson card on purpose, so PAUSE/?/SKIP stay visible while a card is up --
     but painting is not hit-testing, and .lc-root (43), .brk-root (42) and
     .vs-root (40) all beat 7 in the root stacking context. The result was a
     SKIP chip you could see, press, and get nothing from, on the very first
     screen of the tutorial. `place` zero-sizes these while a menu is open, so
     sitting this high cannot steal a menu row's click. */
  z-index: 46;
  -webkit-tap-highlight-color: transparent;
}
/* the canvas draws the pressed state, so nothing here may flash */
.hud-hit:active, .hud-hit:hover { background: none; opacity: 0; }

/* ---------- the control the tutorial is waiting for ----------
   Every instruction in the tutorial was an English sentence. This makes the
   REAL button beat, so somebody who cannot read the line still knows where to
   put their thumb.

   A ::after ring, NOT a change of width or box-shadow on the control itself.
   The elements must keep their exact size: lessonphone asserts the stick, the
   action button and SWITCH never overlap, and at 375px they sit about 47px
   apart — a pulse that grew the element would eat that and fail. A pseudo
   element with a transform does not touch its parent's bounding rect, and
   .touch-btn already carries a box-shadow that a shadow animation would have
   had to re-declare and would then drift from. */

/* THE OTHER TWO, while a lesson card is asking for one. The controls are DOM
   and paint above the canvas, so the card's scrim does not touch them: without
   this the hole lights the stick and ACTION and SWITCH go on shouting beside
   it at full brightness -- three bright buttons and one ring, which says
   "these three" rather than "this one". Opacity only: they are still there,
   still where they will be a second later, just not the subject. */
.touch-btn.lc-dim, .touch-sw.lc-dim, .touch-stick.lc-dim {
  opacity: 0.22;
  transition: opacity 0.18s ease;
}

.touch-btn.ask::after, .touch-sw.ask::after, .touch-stick.ask::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 3px solid rgba(255, 244, 176, 0.95);
  pointer-events: none;
  animation: ask-ring 1.15s ease-out infinite;
}
/* holding is a different gesture from tapping and the beat should not lie
   about which is wanted: this one swells slowly and lingers at full */
.touch-btn.ask.ask-hold::after { animation: ask-hold 1.7s ease-in-out infinite; }
/* ...and a double tap beats twice, then waits */
.touch-btn.ask.ask-twice::after { animation: ask-twice 1.5s ease-out infinite; }

@keyframes ask-ring {
  0%   { transform: scale(0.9);  opacity: 0.95; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
@keyframes ask-hold {
  0%   { transform: scale(0.9);  opacity: 0.35; }
  45%  { transform: scale(1.22); opacity: 0.95; }
  80%  { transform: scale(1.22); opacity: 0.95; }
  100% { transform: scale(0.9);  opacity: 0.35; }
}
@keyframes ask-twice {
  0%   { transform: scale(0.9);  opacity: 0.95; }
  22%  { transform: scale(1.24); opacity: 0; }
  26%  { transform: scale(0.9);  opacity: 0.95; }
  48%  { transform: scale(1.24); opacity: 0; }
  100% { transform: scale(1.24); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .touch-btn.ask::after, .touch-sw.ask::after, .touch-stick.ask::after {
    animation: none; opacity: 0.85; transform: scale(1.1);
  }
}

@keyframes pop { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes blink { 50% { opacity: 0.25; } }

/* Press Start 2P (OFL) embedded for offline + preview use */
@font-face {
  font-family: 'RKPixel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
}

/* ---------- menus: night-stadium art shell ---------- */
.menu-root {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  background: #0a1322 url('../assets/menu-bg-portrait.jpg') center / cover no-repeat;
}
@media (orientation: landscape) {
  .menu-root { background-image: url('../assets/menu-bg-landscape.jpg'); }
  /* scale the menu logo with available HEIGHT: big on tall desktop
     windows, compact only when the landscape screen is actually short */
  .menu-root .logo-img.logo-menu { width: clamp(240px, 38vh, 420px); margin-bottom: max(8px, 1.6vh); }
  .menu-panel.bare .menu-row { margin: 3px 0; }
}
/* The grass the menu stands on.
   The art is 1672x941 with the grass in the bottom 171px and transparency
   above it — so rather than cropping the file, the strip IS the window: the
   image is scaled to the full width (`100% auto`), anchored to the bottom, and
   the element is only as tall as the grass band at that width (171/1672 =
   10.23vw). The transparent part of the image simply falls outside the box.
   Clamped at both ends: on a phone 10vw would be a 38px sliver, and on an
   ultrawide window it would be a hedge. When the clamp bites the anchor keeps
   the blade tips on the bottom edge either way. */
.menu-root::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(46px, 10.23vw, 190px);
  background: bottom center / 100% auto no-repeat url('../assets/menu-grass.png');
  image-rendering: pixelated;
  pointer-events: none;
}

/* readability veil over the artwork */
.menu-root::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 8, 16, 0.30), rgba(4, 8, 16, 0.06) 32%, rgba(2, 6, 12, 0.38) 100%);
}

.menu-panel {
  position: relative;
  z-index: 1;
  min-width: min(430px, 92vw);
  max-width: 94vw;
  /* 95vh, not 92: the career hub, the rename screen and the backup screen all
     measured exactly 10px over the old cap on a 600px-tall window — scrolling
     a whole panel for ten pixels. The margin this keeps from the window edge
     is still comfortable. */
  max-height: 95vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(9, 14, 24, 0.72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: #eef3f8;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  padding: 16px 18px 14px;
}
/* signature top accent: a green→cyan speed bar */
.menu-panel::before {
  content: '';
  position: sticky;
  top: 0;
  display: block;
  height: 4px;
  margin: -16px -18px 20px;
  background: linear-gradient(90deg, var(--green-hot), var(--cyan) 55%, transparent 92%);
  border-radius: 16px 16px 0 0;
}
.menu-panel.wide { min-width: min(600px, 94vw); }
/* bare screens (title, main): buttons float straight on the artwork */
.menu-panel.bare {
  background: none;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* frameless screens keep a phone-width column even on wide screens —
     a PRESS START spanning the whole desktop reads as a banner ad */
  width: min(92vw, 440px);
  min-width: 0;
}
/* frameless mode buttons: compact, text centred (chevron stays right) */
.menu-panel.bare .menu-row.candy { justify-content: center; padding: 10px 34px; }
.menu-panel.bare .menu-row.candy .menu-label { justify-content: center; }
.menu-panel.bare .menu-row.cta { padding: 11px 12px; }
.menu-panel.bare::before { display: none; }
.menu-panel.bare .menu-footer {
  border-top: none;
  text-align: center;
  color: #d5e0ec;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.menu-panel.enter { animation: panel-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.08); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px) scale(0.975); }
}

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.menu-close {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #dfe9f5;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  cursor: pointer;
}
.menu-close:active { background: var(--red); border-color: #fff; color: #fff; }

.menu-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'RKPixel', var(--font-ui);
  font-size: clamp(12px, 2.6vmin, 18px);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.5;
  transform: skewX(-6deg);
  color: #ffffff;
  padding-top: 2px;
}
.menu-title::before {
  content: '';
  width: 9px; height: 20px;
  background: linear-gradient(180deg, var(--green), var(--green-deep));
  transform: skewX(-14deg);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(53, 224, 124, 0.55);
}

.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  margin: 4px 0;
  font-size: clamp(12px, 2.6vmin, 16px);
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #eef3f8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.menu-row.focus {
  background: linear-gradient(92deg, var(--green) 0%, var(--green-deep) 100%);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 6px 18px rgba(20, 154, 74, 0.35);
}
.menu-row.disabled { opacity: 0.38; cursor: default; }

/* mode buttons: candy gradients with a glossy top light and bold white
   italic type — settings rows keep the plain white card look */
.menu-row.candy {
  position: relative;
  overflow: hidden;
  border: 3px solid #10141c;
  border-radius: 9px;
  color: #fff;
  font-family: 'RKPixel', var(--font-ui);
  font-weight: 400;
  font-size: clamp(10px, 2.1vmin, 12px);
  letter-spacing: 0.5px;
  text-shadow:
    -1px -1px 0 rgba(12, 16, 24, 0.75), 1px -1px 0 rgba(12, 16, 24, 0.75),
    -1px 1px 0 rgba(12, 16, 24, 0.75), 1px 1px 0 rgba(12, 16, 24, 0.75),
    0 2px 0 rgba(12, 16, 24, 0.6);
  padding: 11px 34px 11px 12px;
  box-shadow: 0 5px 0 rgba(6, 10, 16, 0.6), 0 8px 16px rgba(0, 0, 0, 0.35);
}
.menu-row.candy::before {
  content: '\203A';
  position: absolute;
  right: 13px; top: 50%;
  transform: translateY(-54%);
  font-size: 1.5em;
  font-weight: 900;
  z-index: 1;
  text-shadow:
    -1px -1px 0 rgba(12, 16, 24, 0.75), 1px -1px 0 rgba(12, 16, 24, 0.75),
    -1px 1px 0 rgba(12, 16, 24, 0.75), 1px 1px 0 rgba(12, 16, 24, 0.75);
}
.menu-row.candy .menu-label > span { transform: skewX(-6deg); display: inline-block; }
.menu-row.candy .menu-label .mi {
  width: 27px; height: 27px;
  padding: 4px;
  background: rgba(10, 14, 22, 0.35);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.menu-row.candy::after {
  content: '';
  position: absolute;
  inset: 0 0 52% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.05));
  pointer-events: none;
}
.menu-row.candy .mi { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.menu-row.candy.focus {
  transform: translateX(0) scale(1.03);
  box-shadow: 0 0 0 3px #fff, 0 5px 0 rgba(6, 10, 16, 0.6), 0 10px 22px rgba(0, 0, 0, 0.45);
  filter: saturate(1.15) brightness(1.08);
}
.menu-row.candy.focus .mi { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.candy.c-orange { background: linear-gradient(180deg, #ffc531, #ff8d1a); }
.candy.c-blue   { background: linear-gradient(180deg, #6ec9ff, #2f7ff2); }
.candy.c-red    { background: linear-gradient(180deg, #ff7076, #e6273e); }
.candy.c-green  { background: linear-gradient(180deg, #7ede54, #2fae3d); }
.candy.c-purple { background: linear-gradient(180deg, #c07bff, #7d3ff2); }
.candy.c-teal   { background: linear-gradient(180deg, #4fe3c1, #17a58a); }
.menu-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  min-width: 0;
}
.menu-label .mi {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  color: #8fe6b0;
}
.menu-row.focus .mi { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.menu-value { color: #4fc7ff; white-space: nowrap; font-weight: 800; }
.menu-value b { color: var(--green-hot); font-weight: 800; padding: 0 2px; }
.menu-row.focus .menu-value { color: #fff; }
.menu-row.focus .menu-value b { color: #d9ffe8; }

/* primary call-to-action rows (KICK OFF / START / RESUME) */
.menu-row.cta {
  justify-content: center;
  margin-top: 12px;
  padding: 13px 12px;
  background: linear-gradient(180deg, #ffc531, #ff8d1a);
  color: #fff;
  text-shadow:
    -1px -1px 0 rgba(96, 52, 4, 0.9), 1px -1px 0 rgba(96, 52, 4, 0.9),
    -1px 1px 0 rgba(96, 52, 4, 0.9), 1px 1px 0 rgba(96, 52, 4, 0.9),
    0 2px 0 rgba(96, 52, 4, 0.8);
  border: 3px solid #10141c;
  box-shadow: 0 5px 0 rgba(6, 10, 16, 0.6), 0 8px 16px rgba(0, 0, 0, 0.35);
  font-family: 'RKPixel', var(--font-ui);
  font-weight: 400;
  letter-spacing: 1px;
  font-size: clamp(11px, 2.5vmin, 15px);
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(255, 141, 26, 0.4);
}
.menu-row.cta .mi { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.menu-row.cta .menu-label > span { transform: skewX(-6deg); display: inline-block; }
.menu-row.cta.focus {
  transform: translateX(0) scale(1.025);
  box-shadow: 0 0 0 3px #fff, 0 8px 26px rgba(255, 141, 26, 0.5);
  color: #fff;
}
.menu-row.cta.focus .mi { color: #fff; }
.menu-row.danger.focus {
  background: linear-gradient(92deg, var(--red), #c73450);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 18px rgba(200, 40, 70, 0.35);
}
.menu-row.danger .mi { color: var(--red); }
.menu-row.danger.focus .mi { color: #fff; }

.menu-swatch { display: inline-flex; gap: 3px; }
.menu-swatch i {
  width: 14px; height: 14px;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid rgba(20, 48, 79, 0.35);
  box-shadow: 0 1px 2px rgba(20, 48, 79, 0.15);
}

.menu-footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: clamp(9px, 1.7vmin, 12px);
  font-weight: 600;
  color: #9fb2c8;
  letter-spacing: 0.5px;
}

.menu-html { margin-bottom: 8px; }

/* ---------- title hero ---------- */
.logo-img {
  display: block;
  width: min(96%, 540px);
  margin: 8px auto 2px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}
.logo-img.logo-menu {
  width: min(92%, 430px);
  margin: 0 auto 16px;
}

.logo {
  font-size: clamp(30px, 10vmin, 70px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 2px;
  text-align: center;
  margin: 14px 0 0;
  color: var(--navy);
  background: linear-gradient(92deg, var(--navy) 30%, var(--green-deep) 50%, var(--cyan) 66%, var(--navy) 85%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(20, 48, 79, 0.18));
  animation: logo-sheen 5s linear infinite;
}
.logo span { -webkit-text-fill-color: transparent; }
@keyframes logo-sheen {
  from { background-position: 0% 0; }
  to { background-position: 220% 0; }
}
.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  letter-spacing: 4px;
  font-family: 'RKPixel', var(--font-ui);
  font-weight: 400;
  color: #d7e4f2;
  margin: 10px 0 16px;
  /* the sub-title under the logo carries the brand — give it real size, and
     keep it on one line so it never stacks over the busy ad boards */
  font-size: clamp(12px, 3vmin, 20px);
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 rgba(10, 16, 24, 0.85), 1px -1px 0 rgba(10, 16, 24, 0.85),
    -1px 1px 0 rgba(10, 16, 24, 0.85), 1px 1px 0 rgba(10, 16, 24, 0.85),
    0 3px 10px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.7);
}
/* the version line under it stays a quiet footnote */
.tagline.tag-small {
  font-size: clamp(8px, 1.7vmin, 12px);
  letter-spacing: 3px;
  margin: 0 0 14px;
}
.tagline::before, .tagline::after {
  content: '';
  height: 1px;
  width: clamp(18px, 8vmin, 60px);
  background: linear-gradient(90deg, transparent, var(--line));
}
.tagline::after { background: linear-gradient(90deg, var(--line), transparent); }

/* ---------- stats + competition tables ---------- */
table.stats, table.bracket, table.league {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(11px, 1.9vh, 15px);
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}
.stats-heads {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 8px 2px 0;
  font-weight: 800;
  letter-spacing: 1px;
}
.stats-heads .you-tag { color: var(--green-hot); font-weight: 600; font-size: 0.85em; }
table.stats td { width: 20%; text-align: center; font-weight: 800; color: #dfe9f5; padding: 2px 0; }
table.stats th { text-align: center; font-weight: 600; color: var(--muted); letter-spacing: 1px; padding: 3px 0; }
table.stats tr:nth-child(even) { background: rgba(255, 255, 255, 0.05); }
table.bracket td { width: 42%; text-align: center; padding: 3px 4px; }
table.bracket th { color: var(--muted); font-weight: 600; }
table.bracket tr.you td { color: var(--green-hot); font-weight: 800; }
table.bracket.small { font-size: clamp(9px, 1.6vh, 12px); color: var(--muted); }
table.league th { color: var(--muted); font-weight: 600; text-align: right; padding: 3px 5px; }
table.league td { text-align: right; padding: 3px 5px; }
table.league tr:nth-child(even) { background: rgba(255, 255, 255, 0.05); }
table.league td:nth-child(2), table.league th:nth-child(2) { text-align: left; }
table.league tr.you td { color: var(--green-hot); font-weight: 800; }
.comp-round { color: var(--muted); letter-spacing: 2px; font-weight: 700; margin: 8px 0 4px; font-size: clamp(10px, 1.8vh, 13px); }
.champion {
  text-align: center;
  font-size: clamp(18px, 4vh, 30px);
  color: var(--gold);
  -webkit-text-stroke: 0.5px rgba(20, 48, 79, 0.3);
  font-weight: 900;
  font-style: italic;
  margin: 12px 0;
  letter-spacing: 2px;
  text-shadow: 0 0 24px rgba(255, 201, 77, 0.45);
}
.scorer { font-size: clamp(11px, 1.9vh, 14px); color: #b8c6da; }

/* ---------- VS match intro ---------- */
.vs-root {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  font-family: var(--font-ui);
  background: radial-gradient(130% 90% at 50% -20%, #2b4a6d, #101f31 72%);
}
.vs-side {
  position: absolute;
  top: 0; bottom: 0;
  width: 64%;
  display: flex;
  align-items: center;
}
.vs-a {
  left: 0;
  /* seam runs 58% (top) -> 42% (bottom) of the SCREEN; in this 64%-wide
     element that is 90.6% -> 65.6% of local width. The glow line's angle
     is computed at runtime to lie exactly on this edge at any aspect. */
  clip-path: polygon(0 0, 90.6% 0, 65.6% 100%, 0 100%);
  background: linear-gradient(115deg, var(--kit) -8%, rgba(16, 28, 46, 0.94) 78%);
  justify-content: flex-start;
  padding-left: 7vw;
  animation: vs-in-a 0.5s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}
.vs-b {
  right: 0;
  clip-path: polygon(34.4% 0, 100% 0, 100% 100%, 9.4% 100%);
  background: linear-gradient(-115deg, var(--kit) -8%, rgba(16, 28, 46, 0.94) 78%);
  justify-content: flex-end;
  padding-right: 7vw;
  animation: vs-in-b 0.5s cubic-bezier(0.16, 0.9, 0.3, 1) 0.08s both;
}
@keyframes vs-in-a { from { transform: translateX(-104%); } }
@keyframes vs-in-b { from { transform: translateX(104%); } }
.vs-line {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px;
  height: 160vmax;
  background: linear-gradient(180deg, var(--green-hot), var(--cyan));
  box-shadow: 0 0 18px rgba(46, 221, 116, 0.7);
  transform: translate(-50%, -50%); /* rotation added at runtime */
}

.vs-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  animation: vs-card-in 0.45s ease-out 0.28s both;
}
@keyframes vs-card-in { from { opacity: 0; transform: translateY(16px); } }
.vs-jersey svg { width: clamp(64px, 17vmin, 120px); height: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); }
.vs-flag { font-size: clamp(22px, 5.5vmin, 38px); line-height: 1.1; }
.vs-name {
  font-size: clamp(15px, 4vmin, 30px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.vs-stars { color: var(--gold); letter-spacing: 3px; font-size: clamp(11px, 2.4vmin, 16px); text-shadow: 0 0 10px rgba(255, 201, 77, 0.5); }

.vs-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(74px, 17vmin, 120px);
  height: clamp(74px, 17vmin, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #223650, #0a1220 78%);
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 6px rgba(46, 221, 116, 0.35), 0 14px 40px rgba(0, 0, 0, 0.6);
  animation: vs-slam 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) 0.42s both;
}
.vs-badge span {
  font-size: clamp(28px, 7vmin, 50px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes vs-slam {
  from { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(0.92); opacity: 1; }
}
.vs-badge::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.8);
  animation: vs-ring 0.7s ease-out 0.52s both;
}
@keyframes vs-ring {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(2.3); opacity: 0; }
}
.vs-meta {
  position: absolute;
  left: 50%; bottom: 7vh;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(10, 18, 32, 0.75);
  border: 1px solid var(--line);
  font-size: clamp(10px, 2.2vmin, 14px);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--muted);
  white-space: nowrap;
  animation: vs-card-in 0.4s ease-out 0.5s both;
}
/* PORTRAIT: the names collided, and not because any one of them was long.
   `.vs-card` had no width limit here at all — the landscape block below owns
   the only max-width — so the name set the card's width and kept going across
   the seam, under the badge and into the other card. Measured with the longest
   name the game can make ("Deportivo Puerto Grande", 23 characters; the
   founding screen caps a typed one at 22): 25px into the badge and 10px into
   the other name on a 393px phone.

   Two rules, and the second is the interesting one. The cap stops a name
   running off the screen. The STAGGER is what makes them miss each other: once
   one card is up and the other down, they clear the badge on the Y axis and
   never have to fight it for horizontal room, so the names stay full size. It
   also follows the art — the seam runs 58% of the width at the top to 42% at
   the bottom, so the left wedge is widest at the top and the right wedge at the
   bottom, and each card moves toward the roomy end of its own.

   `top`, not `transform`: .vs-card's entry animation already owns transform and
   a second one would simply replace it. */
@media (max-aspect-ratio: 1/1) {
  .vs-card { max-width: 45vw; position: relative; }
  .vs-a .vs-card { top: -16vh; }
  .vs-b .vs-card { top: 16vh; }
}

/* Landscape: the two 64%-wide panels pin their cards to opposite edges, so on
   a wide screen the names end up a third of the display apart with nothing
   between them. Bring both in to a fixed clearance either side of the badge —
   14vw + 13vmin lands the inner edge just outside it at any aspect, from a
   4:3 tablet to an ultrawide — and spend the room on bigger type. */
@media (min-aspect-ratio: 1/1) {
  .vs-a { justify-content: flex-end; padding-left: 0; padding-right: calc(14vw + 13vmin); }
  .vs-b { justify-content: flex-start; padding-right: 0; padding-left: calc(14vw + 13vmin); }
  /* and the stagger is undone explicitly: `.vs-a .vs-card` outranks a bare
     `.vs-card`, so leaving it to source order would keep the offset here */
  .vs-card { max-width: 32vw; gap: 6px; }
  .vs-a .vs-card, .vs-b .vs-card { top: 0; }
  .vs-jersey svg { width: clamp(76px, 20vmin, 148px); }
  .vs-flag { font-size: clamp(26px, 6.6vmin, 48px); }
  .vs-name { font-size: clamp(20px, 5.2vmin, 46px); letter-spacing: 2px; }
  .vs-stars { font-size: clamp(13px, 3vmin, 21px); }
}
.vs-root.vs-out { animation: vs-out 0.38s ease-in both; }
@keyframes vs-out { to { opacity: 0; transform: scale(1.06); } }


/* The daily's premise: a whole sentence, so it sizes down from the GOAL!
   treatment and is allowed to wrap on a narrow screen. */
.hud-banner.brief {
  /* The one caller that is a SENTENCE and not a shout — main.js pushes the
     daily brief through the same element. A paragraph in a pixel face is
     unreadable and enormous, so this keeps the UI font while everything else
     goes pixel. margin-inline: auto is inherited from the base rule and does
     the centring now that the parent anchors both edges. */
  font-family: var(--font-ui);
  font-size: clamp(13px, 3.2vmin, 22px);
  letter-spacing: 1px;
  max-width: 92vw;
  white-space: normal;
  text-wrap: balance;
}

/* ---------- half-time break ----------
   A full-screen beat between the whistle and the team talk. Nothing behind it
   is reachable while it is up, which is the point: the press you were already
   making cannot spend itself on a menu row that has just appeared. The ad
   frame is a real slot — #rk-break-ad is where a network's creative mounts. */
.brk-root {
  position: absolute;
  inset: 0;
  z-index: 42;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--font-ui);
  background: rgba(5, 10, 18, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: brk-in 0.26s ease-out both;
  touch-action: none;
}
@keyframes brk-in { from { opacity: 0; } }
.brk-root.brk-out { animation: brk-fade 0.26s ease-in both; }
@keyframes brk-fade { to { opacity: 0; } }
.brk-card {
  position: relative;
  width: min(420px, 100%);
  max-height: 100%;
  overflow: hidden auto;
  padding: 18px 18px 0;
  border-radius: 16px;
  background: rgba(9, 14, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  color: #eef3f8;
  text-align: center;
  animation: brk-card-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.06) both;
}
@keyframes brk-card-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.brk-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green-hot), var(--cyan) 55%, transparent 92%);
}
.brk-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 5px;
  color: var(--accent);
  text-transform: uppercase;
}
.brk-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 14px;
}
.brk-team {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(13px, 3.6vmin, 17px);
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
}
.brk-team:first-child { justify-content: flex-end; }
.brk-team:last-child { justify-content: flex-start; }
/* the kit, in three stripes — the same colours that are on the grass */
.brk-kit {
  flex: 0 0 auto;
  width: 14px; height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, var(--k1) 0 55%, var(--k2) 55% 82%, var(--k3) 82%);
}
.brk-goals {
  flex: 0 0 auto;
  font-size: clamp(30px, 8vmin, 42px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.brk-goals i { font-style: normal; opacity: 0.45; padding: 0 6px; }
.brk-poss {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #d6dde6;
}
.brk-poss i { flex: 1 1 auto; display: flex; height: 7px; border-radius: 4px; overflow: hidden; }
.brk-poss i b { display: block; height: 100%; }
.brk-possl {
  margin: 5px 0 12px;
  font-size: 9.5px;
  letter-spacing: 3px;
  color: var(--muted);
}
.brk-line {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: #aeb9c7;
}
.brk-line b { color: #fff; font-variant-numeric: tabular-nums; }
.brk-adlabel {
  margin: 16px 0 6px;
  font-size: 9px;
  letter-spacing: 3.5px;
  color: rgba(255, 255, 255, 0.4);
}
.brk-ad {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  overflow: hidden;
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brk-house {
  width: 100%;
  padding: 18px 14px;
  background:
    radial-gradient(120% 130% at 18% 0%, rgba(46, 221, 116, 0.28), transparent 62%),
    linear-gradient(135deg, #16294a, #0d1728);
}
.brk-house-mark {
  font-size: clamp(20px, 6vmin, 27px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 3px;
  background: linear-gradient(180deg, #fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brk-house-line { margin-top: 3px; font-size: 11.5px; color: #b9c6d6; letter-spacing: 0.4px; }
.brk-house-cta {
  display: inline-block;
  margin-top: 11px;
  padding: 6px 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #10161f;
  background: linear-gradient(180deg, #ffd777, var(--gold));
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.brk-foot {
  position: relative;
  margin: 14px -18px 0;
  padding: 11px 18px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.brk-cta {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--green-hot);
  font-variant-numeric: tabular-nums;
}
.brk-skip {
  height: 13px;
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.35);
}
/* the dwell, drawn: you can see the break ending, so it never feels stuck */
.brk-meter {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
}
.brk-meter i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--green-hot), var(--cyan));
}

/* ---------- full time: the party ----------
   The result gets the screen before the ad does, and how much noise it makes
   depends on what happened. A win is gold, confetti and a headline that slams
   in; a defeat is the same card with the lights down and no paper falling. */
.brk-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.brk-root .brk-card { position: relative; z-index: 1; }
.brk-ft .brk-card { width: min(460px, 100%); }
.brk-win { background: radial-gradient(120% 80% at 50% 0%, rgba(245, 166, 35, 0.22), rgba(5, 10, 18, 0.88) 62%); }
.brk-loss { background: rgba(4, 7, 13, 0.9); }
.brk-score.brk-big { margin: 12px 0 10px; }
.brk-score.brk-big .brk-goals { font-size: clamp(38px, 11vmin, 58px); }
.brk-score.brk-big .brk-team { font-size: clamp(13px, 3.8vmin, 18px); }
.brk-verdict {
  font-size: clamp(19px, 5.6vmin, 30px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1.5px;
  line-height: 1.12;
  text-wrap: balance;
  animation: brk-slam 0.42s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
@keyframes brk-slam {
  from { transform: scale(2.1); opacity: 0; }
  62% { transform: scale(0.95); opacity: 1; }
}
.brk-win .brk-verdict {
  background: linear-gradient(180deg, #fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 14px rgba(245, 166, 35, 0.45));
}
.brk-loss .brk-verdict { color: #8b97a7; animation: brk-card-in 0.4s ease-out both; }
.brk-draw .brk-verdict, .brk-neutral .brk-verdict { color: #dfe6ef; }
.brk-said {
  margin-top: 7px;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  color: #a8b4c3;
  font-style: italic;
}
.brk-loss .brk-said { color: #77828f; }
.brk-scorers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 12px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11.5px;
  color: #d3dbe4;
}
.brk-scorers i { font-style: normal; color: var(--accent); font-variant-numeric: tabular-nums; }
.brk-scorers em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--muted);
}
.brk-scorers .brk-more, .brk-scorers.brk-none { color: var(--muted); font-style: italic; }
.brk-ft .brk-eyebrow { color: var(--accent); }
.brk-loss .brk-eyebrow { color: #7d8896; }
.brk-loss .brk-card::before { background: linear-gradient(90deg, #4a5765, transparent 92%); }
@media (prefers-reduced-motion: reduce) {
  .brk-verdict, .brk-card, .brk-root { animation: none !important; }
}

/* ---------- the lesson card: one transparent element -----------------------
   The card itself -- scrim, panel, step counter, the looping diagram and the
   control it is waiting for -- is PAINTED IN THE GAME CANVAS, with the rest of
   the HUD, because a portal's playtest recording captures the backing store
   and nothing else. A DOM card is a few seconds of frozen pitch with no
   explanation in the only footage anybody reviews.

   What is left here is the thing that catches a press. It keeps the .lc-root
   class so "is a card up" is still answerable from the page, and it needs no
   hit-testing: while a card is up there is exactly ONE control on screen, so
   any press on it is that control's press. The whole card is the button. */
.lc-root {
  position: absolute;
  inset: 0;
  z-index: 43;
  background: none;
  touch-action: none;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Playzooka splash ---------- */
#splash {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #4e4957;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease;
}
#splash.out { opacity: 0; pointer-events: none; }
#splash svg {
  width: min(68vmin, 400px);
  animation: splash-in 0.55s ease-out;
}
@keyframes splash-in {
  from { opacity: 0; transform: scale(0.93); }
}

/* ---------- touch controls ---------- */
.touch-stick {
  position: absolute;
  left: calc(24px + env(safe-area-inset-left, 0px));
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width: 88px; height: 88px;
  border: 2px solid rgba(255,255,255,0.45);
  background: rgba(20,24,36,0.25);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}
.touch-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 2px solid rgba(255,255,255,0.55);
}
.touch-btn {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 88px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ff6a58, #cf1024 58%, #8c0a18 100%);
  border: 3px solid #f0b23c;
  box-shadow:
    0 0 0 3px rgba(60, 12, 12, 0.65),
    0 8px 18px rgba(0, 0, 0, 0.5),
    inset 0 3px 8px rgba(255, 255, 255, 0.28);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  z-index: 5;
}
.touch-btn svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)); }
.touch-btn span {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.touch-btn:active { filter: brightness(1.12); }
/* SWITCH: between the stick and the action button, in the gap neither of them
   uses. Deliberately small and quiet — auto-switch hands you whoever will
   reach the ball, so this is a refinement you reach for, not a control you
   hold. Kept off the bottom-centre strip the coach's bubble docks into. */
.touch-sw {
  position: absolute;
  right: calc(112px + env(safe-area-inset-right, 0px));
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #6f7c93, #36405a 60%, #202839 100%);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(10, 14, 22, 0.6), 0 6px 14px rgba(0, 0, 0, 0.45);
  color: #eef3f8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  user-select: none;
  z-index: 5;
}
.touch-sw:active { filter: brightness(1.25); }
.touch-fs {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  width: 42px; height: 42px;
  border-radius: 8px;
  background: rgba(20,24,36,0.5);
  border: 2px solid rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.8);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}
@media (hover: hover) and (pointer: fine) {
  /* :not(.km-live) — a hybrid laptop reports both a fine pointer and a
     touchscreen, and without this the controls card would show an empty band
     where the controls should be */
  .touch-btn:not(.km-live), .touch-fs, .touch-stick:not(.km-live) { display: none; }
}

/* ---------- main-menu mode cards (per the illustrated mockups) ----------
   The main screen renders as a 2-column grid of art cards on every device:
   CONTINUE / TRAINING / INSTALL span the full width, OPTIONS becomes the
   gear button in the top-right corner. Art lives in assets/card-*.png so
   the illustrations can be swapped without touching markup. */
.menu-sub {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.82em;
  letter-spacing: 0.5px;
  margin-top: 6px;
  color: #fff;
  opacity: 0.95;
}
.row-art { display: none; }

/* The pre-JS fallback only. The real width is measured and set inline by
   fitPanel() in ui/menus.js — see the comment there for why the stylesheet no
   longer tries to guess how tall the column will be. */
.menu-panel.bare.cards { width: min(94vw, 470px); }
.menu-panel.cards .menu-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
/* Each row is its own type-scale reference: a label sized in cqw tracks the
   width of the card it sits on, so the same ratio holds whether the grid is
   two-up on a phone or four-across on a laptop — no per-breakpoint retuning.
   The cqw values are calibrated from the portrait layout (178px card, 368px
   full-width row), so phones render exactly as before. */
.menu-panel.cards .menu-row { container-type: inline-size; }
/* the sizes go on .menu-label, never on the row itself: an element cannot
   query its own container, so cqw written on the row would silently resolve
   against the viewport instead */
.menu-panel.cards .menu-row.candy .menu-label { font-size: clamp(9px, 2.72cqw, 22px); }
.menu-panel.cards .menu-row.candy .menu-label .mi {
  width: clamp(24px, 7.34cqw, 44px);
  height: clamp(24px, 7.34cqw, 44px);
}
/* the four illustrated cards are half- (or quarter-) width, so they carry a
   larger ratio against their own narrower box */
.menu-panel.cards .menu-row.m-friendly .menu-label, .menu-panel.cards .menu-row.m-league .menu-label,
.menu-panel.cards .menu-row.m-cup .menu-label, .menu-panel.cards .menu-row.m-penalty .menu-label {
  font-size: clamp(9px, 5.62cqw, 26px);
}
.menu-panel.cards .menu-row.m-friendly .menu-label .mi, .menu-panel.cards .menu-row.m-league .menu-label .mi,
.menu-panel.cards .menu-row.m-cup .menu-label .mi, .menu-panel.cards .menu-row.m-penalty .menu-label .mi {
  width: clamp(22px, 15.2cqw, 46px);
  height: clamp(22px, 15.2cqw, 46px);
}
.menu-panel.cards .menu-rows .menu-row { margin: 0; }
.menu-panel.cards .m-continue, .menu-panel.cards .m-training, .menu-panel.cards .m-install,
.menu-panel.cards .m-options, .menu-panel.cards .m-daily,
.menu-panel.cards .m-stats { grid-column: 1 / -1; }

/* The career and the daily are full-width rows carrying a line of live state —
   a club name and division, or today's scoreline. That text has to WRAP: the
   label is nowrap by default, which quietly clipped both of them off the right
   edge of the panel on a phone. */
.menu-panel.cards .m-career .menu-label,
.menu-panel.cards .m-daily .menu-label { white-space: normal; align-items: flex-start; }
.menu-panel.cards .m-career .menu-label > span,
.menu-panel.cards .m-daily .menu-label > span { min-width: 0; }
.menu-panel.cards .m-career .menu-sub,
.menu-panel.cards .m-daily .menu-sub {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  font-size: clamp(9px, 2.1cqw, 15px);
}
.menu-panel.cards .m-career .menu-label { font-size: clamp(11px, 2.99cqw, 26px); }
.menu-panel.cards .m-daily .menu-label { font-size: clamp(10px, 2.5cqw, 22px); }
.menu-panel.cards .m-daily.disabled { opacity: .62; }
/* its own colour, whatever the candy cycle would have handed it: the daily
   sat in the same green as QUICK MATCH and read as another way to play one */
.menu-panel.cards .m-daily.candy {
  background: linear-gradient(180deg, rgba(143, 107, 255, 0.24), rgba(91, 50, 201, 0.34));
  border: 1px solid rgba(160, 130, 255, 0.55);
  padding: 7px 12px;
  box-shadow: none;
}
.menu-panel.cards .m-daily .menu-label { font-size: clamp(9px, 2.1cqw, 15px); }
.menu-panel.cards .m-daily.focus { background: linear-gradient(180deg, #8f6bff, #5b32c9); }
/* the daily gets its own mark so it reads as a different kind of thing from
   the career it sits under */
.menu-panel.cards .m-daily .menu-label::before {
  content: '\1F5D3';
  flex: 0 0 auto;
  width: clamp(34px, 9cqw, 60px);
  height: clamp(34px, 9cqw, 60px);
  display: grid;
  place-items: center;
  font-size: clamp(16px, 4.4cqw, 30px);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}
.menu-panel.cards .m-daily.disabled .menu-label::before { opacity: .5; }
.menu-panel.cards .menu-row.candy::after { display: none; }
.menu-panel.cards .menu-row.candy::before { display: none; }
.menu-panel.cards .menu-row.m-install::before { display: block; }

/* The three doors. CAREER takes the whole top row because it is the game; the
   other two share the one below it. The art is borrowed from the modes they
   absorbed until each has its own. */
.menu-panel.doors .m-career { grid-column: 1 / -1; }
.menu-panel.cards .menu-row.m-career .row-art { aspect-ratio: 2.58; }
.menu-panel.cards .menu-row.m-career   { background: #4a2408; border-color: #f2a01e; --dash: #f2a01e; }
.menu-panel.cards .menu-row.m-quick    { background: #1e4a22; border-color: #58c25c; --dash: #58c25c; }
.menu-panel.cards .menu-row.m-practice { background: #2a1a4a; border-color: #9b6bff; --dash: #b07bff; }
/* the sub-line on a door is live state (a club, a half-played cup), so it has
   to wrap rather than run off the side of the card */
.menu-panel.cards .m-career .menu-sub, .menu-panel.cards .m-quick .menu-sub,
.menu-panel.cards .m-practice .menu-sub {
  font-size: 0.72em; letter-spacing: .04em; opacity: .85; margin-top: 4px;
}

/* the illustrated mode cards */
.menu-panel.cards .menu-row.m-career, .menu-panel.cards .menu-row.m-quick,
.menu-panel.cards .menu-row.m-practice,
.menu-panel.cards .menu-row.m-friendly, .menu-panel.cards .menu-row.m-league,
.menu-panel.cards .menu-row.m-cup, .menu-panel.cards .menu-row.m-penalty {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-width: 3px;
  border-radius: 14px;
}
.menu-panel.cards .m-career .row-art, .menu-panel.cards .m-quick .row-art,
.menu-panel.cards .m-practice .row-art,
.menu-panel.cards .m-friendly .row-art, .menu-panel.cards .m-league .row-art,
.menu-panel.cards .m-cup .row-art, .menu-panel.cards .m-penalty .row-art {
  display: block;
  width: 100%;
  aspect-ratio: 1.45;
  background: center / cover no-repeat;
  image-rendering: pixelated;
  border-bottom: 2px solid rgba(6, 10, 16, 0.55);
}
.menu-panel.cards .m-career .row-art   { background-image: url('../assets/card-cup-w.png'); }
.menu-panel.cards .m-quick .row-art    { background-image: url('../assets/card-friendly.png'); }
.menu-panel.cards .m-practice .row-art { background-image: url('../assets/card-training-l.png'); }
.menu-panel.cards .m-friendly .row-art { background-image: url('../assets/card-friendly.png'); }
.menu-panel.cards .m-league .row-art   { background-image: url('../assets/card-league.png'); }
.menu-panel.cards .m-cup .row-art      { background-image: url('../assets/card-cup.png'); }
.menu-panel.cards .m-penalty .row-art  { background-image: url('../assets/card-penalty.png'); }
.menu-panel.cards .m-friendly, .menu-panel.cards .m-league, .menu-panel.cards .m-cup, .menu-panel.cards .m-penalty,
.menu-panel.cards .m-training { box-shadow: 0 4px 0 rgba(6, 10, 16, 0.55), 0 10px 20px rgba(0, 0, 0, 0.4); }
.menu-panel.cards .menu-row.m-career .menu-label, .menu-panel.cards .menu-row.m-quick .menu-label,
.menu-panel.cards .menu-row.m-practice .menu-label,
.menu-panel.cards .menu-row.m-friendly .menu-label, .menu-panel.cards .menu-row.m-league .menu-label,
.menu-panel.cards .menu-row.m-cup .menu-label, .menu-panel.cards .menu-row.m-penalty .menu-label {
  justify-content: center;
  padding: 10px 8px 12px;
  min-height: 46px;
  white-space: normal;
  text-align: center;
  line-height: 1.5;
}
/* card colour identities: bright frame + deep body (band under the art) */
.menu-panel.cards .menu-row.m-friendly { background: #1e4a22; border-color: #58c25c; }
.menu-panel.cards .menu-row.m-league   { background: #132a52; border-color: #3f7fe0; }
.menu-panel.cards .menu-row.m-cup      { background: #5c1420; border-color: #d8354f; }
.menu-panel.cards .menu-row.m-penalty  { background: #3c2a10; border-color: #e07f20; }
/* dashed accent under each card label, in the frame colour */
.menu-panel.cards .m-career .menu-label > span::after, .menu-panel.cards .m-quick .menu-label > span::after,
.menu-panel.cards .m-practice .menu-label > span::after,
.menu-panel.cards .m-friendly .menu-label > span::after, .menu-panel.cards .m-league .menu-label > span::after,
.menu-panel.cards .m-cup .menu-label > span::after, .menu-panel.cards .m-penalty .menu-label > span::after,
.menu-panel.cards .m-training .menu-label > span::after {
  content: '';
  display: block;
  height: 3px;
  margin-top: 6px;
  background: repeating-linear-gradient(90deg, var(--dash, #58c25c) 0 6px, transparent 6px 11px);
}
.menu-panel.cards .m-friendly { --dash: #58c25c; }
.menu-panel.cards .m-league   { --dash: #3f7fe0; }
.menu-panel.cards .m-cup      { --dash: #ff5b74; }
.menu-panel.cards .m-penalty  { --dash: #e07f20; }
.menu-panel.cards .m-training { --dash: #b07bff; }

/* CONTINUE: dark stadium panel with play chip, live progress and trophy */
.menu-panel.cards .menu-row.cta.m-continue {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 14px;
  margin-top: 0;
  padding: 12px 16px;
  background: rgba(8, 18, 11, 0.82);
  border: 2px solid #37b34a;
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(6, 10, 16, 0.55), 0 10px 20px rgba(0, 0, 0, 0.4);
  text-shadow:
    -1px -1px 0 rgba(4, 10, 6, 0.8), 1px -1px 0 rgba(4, 10, 6, 0.8),
    -1px 1px 0 rgba(4, 10, 6, 0.8), 1px 1px 0 rgba(4, 10, 6, 0.8);
}
.menu-panel.cards .m-continue .menu-label { flex: 1 1 auto; }
.menu-panel.cards .m-continue .menu-label > span { color: #6fdc57; }
.menu-panel.cards .m-continue .menu-sub { color: #fff; }
.menu-panel.cards .menu-row.cta.m-continue .menu-label { font-size: clamp(11px, 2.99cqw, 28px); }
.menu-panel.cards .m-continue .menu-label::before {
  content: '\25B6';
  flex: 0 0 auto;
  width: clamp(42px, 11.4cqw, 76px);
  height: clamp(42px, 11.4cqw, 76px);
  display: grid;
  place-items: center;
  padding-left: 3px;
  box-sizing: border-box;
  background: #0c1810;
  border: 2px solid #37b34a;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  text-shadow: none;
}
.menu-panel.cards .m-continue::after {
  content: '';
  flex: 0 0 auto;
  width: clamp(38px, 10.3cqw, 68px);
  height: clamp(44px, 12cqw, 78px);
  background: url('../assets/trophy.png') center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.menu-panel.cards .m-continue .mi { display: none; }
.menu-panel.cards .m-continue.focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(0, 0, 0, 0.5);
}

/* TRAINING: wide banner with kit art on both wings */
.menu-panel.cards .menu-row.m-training {
  position: relative;
  justify-content: center;
  min-height: 62px;
  overflow: hidden;
}
.menu-panel.cards .m-training .row-art {
  display: block;
  position: absolute;
  inset: 0;
  background:
    url('../assets/card-training-l.png') left 12px center / auto 78% no-repeat,
    url('../assets/card-training-r.png') right 12px center / auto 78% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.menu-panel.cards .m-training .menu-label { position: relative; z-index: 1; }
.menu-panel.cards .m-training .menu-label .mi { display: none; }

/* INSTALL: quiet dark bar with a green pixel label */
.menu-panel.cards .menu-row.m-install {
  background: rgba(14, 18, 24, 0.88);
  border: 2px solid #444d5a;
  border-radius: 14px;
  justify-content: flex-start;
  text-align: left;
  padding: 12px 34px 12px 16px;
}
.menu-panel.cards .m-install .menu-label > span { color: #6fdc57; }
.menu-panel.cards .m-install .menu-sub {
  color: #e8eef4;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.3px;
}
.menu-panel.cards .m-install .menu-label .mi { color: #f5c84a; width: 24px; height: 24px; }
.menu-panel.cards .m-install::before { color: #6fdc57; }

/* OPTIONS: the gear in the corner */
.menu-panel.cards .menu-row.m-options {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  justify-content: center;
  border-radius: 12px;
  background: rgba(10, 16, 24, 0.82);
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 3px 0 rgba(6, 10, 16, 0.55), 0 8px 16px rgba(0, 0, 0, 0.4);
}
.menu-panel.cards .m-options .menu-label { justify-content: center; }
.menu-panel.cards .m-options .menu-label > span { display: none; }
.menu-panel.cards .m-options .menu-label .mi {
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  box-shadow: none;
  color: #e8eef4;
}
.menu-panel.cards .m-options.focus { box-shadow: 0 0 0 3px #fff, 0 8px 16px rgba(0, 0, 0, 0.4); }
/* build stamp under the cards: readable over the pitch, never load-bearing */
.menu-panel.cards .menu-footer {
  margin-top: 8px;
  padding-top: 0;
  font-family: 'RKPixel', var(--font-ui);
  font-weight: 400;
  font-size: clamp(8px, 1.5vmin, 11px);
  letter-spacing: 2px;
  color: #cfe0f0;
  opacity: 0.62;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* wide screens: broader panel, bigger logo, cinema-ratio card art drawn at
   its own ratio so nothing gets crop-cut */
@media (min-width: 900px) and (orientation: landscape) {
  .menu-panel.cards .menu-rows { gap: 14px; }
  /* the logo rides the panel, not the viewport, so the two never fight over
     the same vertical budget */
  .menu-root .cards .logo-img.logo-menu { width: clamp(150px, 46%, 440px); }
  .menu-panel.cards .m-friendly .row-art, .menu-panel.cards .m-league .row-art,
  .menu-panel.cards .m-cup .row-art, .menu-panel.cards .m-penalty .row-art { aspect-ratio: 2.58; }
  .menu-panel.cards .m-friendly .row-art { background-image: url('../assets/card-friendly-w.png'); }
  .menu-panel.cards .m-league .row-art   { background-image: url('../assets/card-league-w.png'); }
  .menu-panel.cards .m-cup .row-art      { background-image: url('../assets/card-cup-w.png'); }
  .menu-panel.cards .m-penalty .row-art  { background-image: url('../assets/card-penalty-w.png'); }
  /* TRAINING keeps its portrait height on every screen — it is a banner,
     not a card, so it should not grow with the panel */
  .menu-panel.cards .m-training .row-art {
    background-position: left 27% center, right 27% center;
  }
}

/* Portrait: the hero spans nearly the whole panel, so the gear would land on
   the artwork. Reserve a line for it above the logo instead — there is spare
   height in portrait, and it matches the layout of the reference art.
   Short phones are excluded: their logo is already small enough to clear the
   gear on its own, and they have no height to spare. */
@media (orientation: portrait) and (min-height: 761px) {
  .menu-panel.cards { padding-top: 58px; }
}

/* short portrait (small phones): the column is taller than the screen, so the
   hero shrinks and the card art takes a squarer crop to claw back the height */
@media (orientation: portrait) and (max-height: 760px) {
  .menu-root .cards .logo-img.logo-menu { width: min(64%, 250px); margin-bottom: 8px; }
  .menu-panel.cards .m-friendly .row-art, .menu-panel.cards .m-league .row-art,
  .menu-panel.cards .m-cup .row-art, .menu-panel.cards .m-penalty .row-art { aspect-ratio: 1.85; }
  /* the doors take a squarer crop too on a short phone, to claw back height */
  .menu-panel.cards .menu-row.m-career .row-art { aspect-ratio: 3.4; }
  .menu-panel.cards .m-quick .row-art,
  .menu-panel.cards .m-practice .row-art { aspect-ratio: 1.85; }
  .menu-panel.cards .menu-rows { gap: 9px; }
  .menu-panel.cards .menu-row.m-training { min-height: 52px; }
  /* The door BLURBS go, for the reason they go on a short landscape window
     (see the note on the 620px rule below): at this width they wrap to three
     and four lines, which makes the column TALLER, which makes fitPanel narrow
     it, which wraps them further. With the stats row added the column no
     longer fits at all and the panel bisected down to 263px — cards half the
     size they were, to keep a line of text that was itself unreadable by then.
     The door names carry the meaning on their own here. */
  .menu-panel.doors .m-career .menu-sub,
  .menu-panel.doors .m-quick .menu-sub,
  .menu-panel.doors .m-practice .menu-sub { display: none; }
}

/* short landscape (phones on their side): four stacked rows cannot fit under
   ~560px of height, so the modes go four-across in one band and the logo
   shrinks to whatever the remaining space allows */
@media (orientation: landscape) and (max-height: 780px) {
  .menu-panel.cards .menu-rows { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .menu-panel.cards .m-continue,
  .menu-panel.cards .m-training,
  .menu-panel.cards .m-install { grid-column: 1 / -1; }
  .menu-root .cards .logo-img.logo-menu {
    width: clamp(150px, min(30vh, 26%), 340px);
    margin-bottom: max(4px, 0.8vh);
  }
  .menu-panel.cards .m-quick .row-art, .menu-panel.cards .m-practice .row-art,
  .menu-panel.cards .m-friendly .row-art, .menu-panel.cards .m-league .row-art,
  .menu-panel.cards .m-cup .row-art, .menu-panel.cards .m-penalty .row-art { aspect-ratio: 1.45; }
  /* the career door is a wide banner in a short window, not a tall card */
  .menu-panel.cards .menu-row.m-career .row-art { aspect-ratio: 4.2; }
  .menu-panel.cards .m-quick .row-art    { background-image: url('../assets/card-friendly-w.png'); }
  .menu-panel.cards .m-friendly .row-art { background-image: url('../assets/card-friendly.png'); }
  .menu-panel.cards .m-league .row-art   { background-image: url('../assets/card-league.png'); }
  .menu-panel.cards .m-cup .row-art      { background-image: url('../assets/card-cup.png'); }
  .menu-panel.cards .m-penalty .row-art  { background-image: url('../assets/card-penalty.png'); }
  .menu-panel.cards .menu-row.m-training { min-height: 46px; }
  .menu-panel.cards .m-training .row-art { background-size: auto 66%, auto 66%; }
  .menu-panel.cards .m-continue .menu-label::before { width: 34px; height: 34px; font-size: 12px; }
  .menu-panel.cards .m-continue::after { width: 30px; height: 34px; }
  .menu-panel.bare.cards .menu-row.cta.m-continue { padding: 8px 14px; }
}
/* the shortest landscape of all (phones held sideways): squeeze the last
   vertical slack out of the hero and the banner */
@media (orientation: landscape) and (max-height: 470px) {
  .menu-root .cards .logo-img.logo-menu { width: clamp(110px, 24vh, 200px); margin-bottom: 3px; }
  .menu-panel.cards .m-friendly .row-art, .menu-panel.cards .m-league .row-art,
  .menu-panel.cards .m-cup .row-art, .menu-panel.cards .m-penalty .row-art { aspect-ratio: 1.9; }
  .menu-panel.cards .menu-row.m-training { min-height: 38px; }
  .menu-panel.cards .menu-rows { gap: 8px; }
  .menu-panel.bare.cards .menu-row.cta.m-continue { padding: 6px 12px; }
  .menu-panel.cards .m-continue .menu-label::before { width: 28px; height: 28px; font-size: 10px; }
  .menu-panel.cards .m-continue::after { width: 24px; height: 28px; }
}

/* Wide and short — a phone on its side, or a browser window dragged flat.
   Below about 620px of height no WIDTH makes a stacked column fit, so the
   doors stop stacking and stand side by side instead. This is a different
   layout, not a smaller one, which is why it is a media query and not
   something fitPanel() could have solved by shrinking. */
@media (orientation: landscape) and (max-height: 620px) {
  .menu-panel.doors .menu-rows { grid-template-columns: repeat(3, 1fr); }
  .menu-panel.doors .m-career { grid-column: auto; }
  .menu-panel.cards .menu-row.m-career .row-art,
  .menu-panel.cards .m-quick .row-art,
  .menu-panel.cards .m-practice .row-art { aspect-ratio: 1.6; }
  .menu-panel.cards .m-career .row-art { background-image: url('../assets/card-cup.png'); }
  .menu-panel.cards .m-quick .row-art  { background-image: url('../assets/card-friendly.png'); }
  .menu-root .cards .logo-img.logo-menu { width: clamp(120px, 26vh, 260px); margin-bottom: 4px; }
  .menu-panel.cards { padding-top: 12px; }
  .menu-panel.cards .menu-rows { gap: 8px; }
  /* The door BLURBS are what break the fit here: as the three cards narrow,
     their text wraps onto more lines and the column gets TALLER, so narrowing
     the panel chases a width that does not exist. With this little height the
     door names carry the meaning on their own. CONTINUE and TODAY keep theirs —
     those sub-lines are the row's actual content, and being full width they do
     not wrap. */
  .menu-panel.doors .m-career .menu-sub,
  .menu-panel.doors .m-quick .menu-sub,
  .menu-panel.doors .m-practice .menu-sub { display: none; }
}

/* ===========================================================================
   The desktop composition.
   ===========================================================================
   Everything above this line lays out ONE column and varies how tightly. That
   is the right answer on a phone and the wrong one on a 1920×1080 monitor,
   where it is a phone screenshot with a stadium either side of it.

   Past this much room in BOTH directions the doors become a landscape
   composition instead: the logo across the top, the daily as a real card, the
   three doors side by side beneath it, and the lifetime numbers in a rail down
   the right. Three constraints, all load-bearing:
     - min-aspect-ratio 5/4 — a window taller than it is wide has no rail to
       put anything in.
     - min-width 1000px    — below this the three cards are narrower than the
       art they carry and it reads as mush.
     - min-height 620px    — this is exactly where the short-landscape rule
       above hands over, so the two never both apply to a window that can only
       satisfy one of them.
   It must stay AFTER every other landscape block in this file: they are all
   equal-specificity, so source order is what decides.

   fitPanel() in ui/menus.js stands down when `.desk` is present — see the note
   there. A measured width and a grid cannot both size this panel. */
@media (min-aspect-ratio: 5/4) and (min-width: 620px) and (min-height: 340px) {
  :root { --desk: 1; }

  .menu-panel.doors.desk {
    /* 1020px is not a round number picked by eye: it is the width at which the
       three cards land on 306px, which is what they measure today. Losing the
       rail freed a third of the panel and the cards must not quietly spend it
       — they were already once too big. Under 1160px the 88vw cap takes over
       and they shrink from there, so the size is monotonic in window width and
       never exceeds the one that was signed off. */
    width: min(1020px, 88vw);
    max-width: 88vw;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head"
      "rows"
      "foot";
    row-gap: clamp(4px, 1vh, 14px);
    padding: clamp(6px, 2.2vh, 28px) clamp(12px, 2vw, 30px);
  }
  .menu-panel.doors.desk > .menu-html   { grid-area: head; margin: 0; }
  .menu-panel.doors.desk > .menu-rows   { grid-area: rows; }
  .menu-panel.doors.desk > .menu-footer { grid-area: foot; }

  /* The title is the title: centred over the whole composition and given the
     room to be one. The gear is absolutely positioned in the panel's corner,
     so a centred logo passes under it rather than into it — the max-width
     keeps that true on the narrowest window this layout runs on. */
  .menu-root .doors.desk .logo-img.logo-menu {
    /* The 260px floor was 46% of the panel in a 640x360 frame — 98px of a
       331px height budget spent on the title. The vh term does the work; the
       floor is only there to stop it vanishing. */
    width: clamp(130px, 42vh, 560px);
    max-width: calc(100% - 140px);
    margin: 0 auto clamp(6px, 1.4vh, 16px);
    display: block;
  }

  /* the daily above, the three doors below, install (when there is one) under
     both. Naming every area keeps a row that is absent from collapsing the
     grid into something else. */
  .menu-panel.doors.desk .menu-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "daily  daily    daily"
      "quick  practice career"
      "instal instal   instal";
    gap: clamp(6px, 1.4vw, 20px);
    align-content: start;
  }
  .menu-panel.doors.desk .m-daily    { grid-area: daily; }
  .menu-panel.doors.desk .m-career   { grid-area: career; }
  .menu-panel.doors.desk .m-quick    { grid-area: quick; }
  .menu-panel.doors.desk .m-practice { grid-area: practice; }
  .menu-panel.doors.desk .m-install  { grid-area: instal; }

  /* Three across, so the career takes the same square crop as its neighbours
     rather than the banner it wears when it spans the row on its own. The art
     is also capped against the WINDOW: on a wide-but-short desktop window the
     three cards are broad enough that a 1.45 box would push the footer off the
     bottom, and a cover-cropped picture loses nothing that matters. */
  .menu-panel.cards.doors.desk .menu-row.m-career .row-art,
  .menu-panel.cards.doors.desk .m-quick .row-art,
  .menu-panel.cards.doors.desk .m-practice .row-art {
    aspect-ratio: 1.72;
    max-height: 22vh;
  }

  /* THE TYPE ON THE CARDS.
     Every label in this menu is sized in cqw against its own card, which is
     what lets one ratio serve a 178px phone card and a four-across laptop row
     without per-breakpoint retuning. But those ratios were calibrated from the
     portrait column: 2.72cqw of a 178px card lands on the 9px floor, and on a
     280px desktop card it lands on... 9.5px. The card quadrupled in area and
     the writing on it did not move. That is the "hardly readable" — not a
     small font, a ratio fitted to a different card.
     So the three doors get a ratio of their own here, near the 5.62cqw the
     half-width illustrated cards already use, and a floor that means something
     at this size. */
  .menu-panel.cards.doors.desk .menu-row.m-quick .menu-label,
  .menu-panel.cards.doors.desk .menu-row.m-practice .menu-label,
  .menu-panel.cards.doors.desk .menu-row.m-career .menu-label {
    font-size: clamp(13px, 6.6cqw, 24px);
    padding: clamp(6px, 1.6vh, 12px) 10px clamp(7px, 1.9vh, 14px);
  }
  .menu-panel.cards.doors.desk .m-quick .menu-label .mi,
  .menu-panel.cards.doors.desk .m-practice .menu-label .mi,
  .menu-panel.cards.doors.desk .m-career .menu-label .mi {
    width: clamp(20px, 7.4cqw, 34px);
    height: clamp(20px, 7.4cqw, 34px);
  }
  .menu-panel.doors.desk .m-career .menu-sub,
  .menu-panel.doors.desk .m-quick .menu-sub,
  .menu-panel.doors.desk .m-practice .menu-sub {
    font-size: clamp(10px, 3.1cqw, 14px);
    line-height: 1.4;
    margin-top: 5px;
    opacity: 0.9;
  }
  /* the daily is a full-width row, so its own ratio resolves against a box
     three times as wide — it needs a smaller one to land in the same place */
  .menu-panel.cards.doors.desk .m-daily .menu-label { font-size: clamp(12px, 2.2cqw, 20px); }
  .menu-panel.cards.doors.desk .m-daily .menu-sub { font-size: clamp(10px, 1.8cqw, 16px); }
  .menu-panel.cards.doors.desk .m-daily .menu-label::before {
    width: clamp(24px, 9cqw, 60px);
    height: clamp(24px, 9cqw, 60px);
    font-size: clamp(13px, 4.4cqw, 30px);
  }
  .menu-panel.cards.doors.desk .m-daily.candy { padding: clamp(4px, 1vh, 7px) 12px; }
  .menu-panel.cards.doors.desk .m-career .row-art { background-image: url('../assets/card-cup.png'); }
  .menu-panel.cards.doors.desk .m-quick .row-art  { background-image: url('../assets/card-friendly.png'); }
  /* THE BLURBS ARE THE HEIGHT. Measured in a 640x360 frame: the card's label
     block came to 127px against 86px of art, because at a 170px card the blurb
     wraps to four lines. That is the same trap the short-landscape and
     short-portrait rules already dodge by hiding them, and the same one that
     made fitPanel bisect the phone column down to 263px. Off by default here;
     the rule below puts them back wherever there is height for them. */
  .menu-panel.doors.desk .m-career .menu-sub,
  .menu-panel.doors.desk .m-quick .menu-sub,
  .menu-panel.doors.desk .m-practice .menu-sub { display: none; }

  /* INSTALL loses its blurb here — the corner of a desktop menu is not where a
     two-line explanation belongs, and the label already says it */
  .menu-panel.cards.doors.desk .m-install { padding: 9px 30px 9px 14px; }
  .menu-panel.cards.doors.desk .m-install .menu-sub { display: none; }

  .menu-panel.doors.desk .menu-footer { text-align: left; margin-top: clamp(4px, 1vh, 10px); }
}

/* Tall enough for the door blurbs. Poki's own frames are shorter than this —
   640x360, 836x470 — and there the door NAMES carry the meaning on their own,
   which is the same call the short-landscape rule makes. A desktop window, and
   Poki's largest scale-test size at 580, clear it comfortably. */
@media (min-aspect-ratio: 5/4) and (min-width: 620px) and (min-height: 560px) {
  .menu-panel.doors.desk .m-career .menu-sub,
  .menu-panel.doors.desk .m-quick .menu-sub,
  .menu-panel.doors.desk .m-practice .menu-sub { display: block; }
}

/* ROWS ACROSS THE WIDTH, when a list is too long to go down the page.
   The panel is capped at 92vh and scrolls inside itself past that, so a long
   list does not overflow the window — it just hides half of itself behind a
   scrollbar, which is worse because nothing on screen says so. auto-fit means
   the column count follows the room available with no breakpoint deciding:
   three columns on a desktop, two on a laptop, one on a phone. */
/* DESKTOP ONLY — 900px, because width is what decides whether a second column
   can exist at all. Below it the grid buys nothing and the floor is actively
   harmful: minmax()'s first argument is a HARD minimum, so a 400px track in a
   315px box does not shrink, it overhangs, and the panel's overflow-x: hidden
   swallows the right-hand end of every row rather than scrolling to it. That
   shipped in v1.88.0 and clipped 70px off every row on a 375px phone — while
   the document reported no sideways scroll at all, which is exactly why the
   portrait check passed. On a phone the single scrolling column is the right
   answer and always was.
   The min() inside minmax is the second lock: whatever the gate, a track can
   never be wider than the box holding it. */
@media (min-width: 900px) {
  .menu-panel .menu-rows.cols {
    display: grid;
    /* The floor belongs to the SCREEN, not to the grid. A value row is a nowrap
       label and a nowrap value at opposite ends of a flex box: squeeze the column
       and the label does not wrap or ellipsis, it prints its glyphs straight over
       the value — measured at 327px, HOME spilt 74px past its box, and "HOME
       England *****" with a flag and a kit swatch is simply a wide thing. So the
       default holds the widest pair on a value screen.
       The squad wants the opposite: its rows carry a WRAPPING sub line and no
       value at all, so they can never collide, but eighteen of them need four
       columns to fit a 600px-tall window and 400px only buys three. It sets its
       own --cols-min. */
    grid-template-columns: repeat(auto-fit, minmax(min(var(--cols-min, 400px), 100%), 1fr));
    gap: 4px 12px;
    align-items: start;
  }
  .menu-panel .menu-rows.cols .menu-row { margin: 0; }
  /* the call to action is not one of the list — it spans, so it reads as the way
     out rather than as another entry */
  .menu-panel .menu-rows.cols .menu-row.cta,
  .menu-panel .menu-rows.cols .menu-row.danger { grid-column: 1 / -1; }
  /* A gridded panel takes the width its columns need. NOT scoped to `.wide`:
     the quick-game screen does not set it, so that rule never applied and the
     panel sat at 439px — one column, and the grid bought nothing. Asking for
     columns IS asking for the width to put them in. */
  .menu-panel.has-cols { min-width: min(1080px, 94vw); }

  /* THE CONTROLS CARD is all html and one row, so the rows grid does nothing
     for it — it was 96px over on a 600px-tall window. The key map is a band
     sitting ON TOP of the table of what the button does; stood beside it, the
     panel is as tall as the taller of the two instead of the sum. The keys
     stack into a column of their own because they no longer have the width to
     run across. */
  .menu-panel.controls .menu-html {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 22px;
    align-items: start;
  }
  .menu-panel.controls .key-map {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 18px 0 0;
    margin: 0;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    align-self: stretch;
  }

  /* THE PAUSE CARD, same idea. Its height is the scoreline, the two sides and
     a ten-row stats table stacked down the page, which left the rows beneath
     them off the bottom of a 600px window. The match on the left, the numbers
     on the right: the card is as tall as the taller half. */
  .menu-panel.paused .menu-html {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 24px;
    align-items: start;
  }
  .menu-panel.paused .pause-score { grid-area: 1 / 1; }
  .menu-panel.paused .pause-clock { grid-area: 2 / 1; }
  .menu-panel.paused .sides       { grid-area: 3 / 1; }
  .menu-panel.paused .stats-heads { grid-area: 1 / 2; }
  .menu-panel.paused table.stats  { grid-area: 2 / 2 / 4 / 3; }

  /* THE SHAPE, ON THE CARD. The left column was the scoreline and two small
     text cards against a ten-row stats table, so half of it was empty. The
     pitch that fills it is formationPitch(), the same drawing the formation
     picker uses — and it is sized ONLY here, so a phone renders nothing. */
  .menu-panel.paused .sides { align-items: stretch; }
  .menu-panel.paused .sides-one { padding-bottom: 10px; }
  /* `.sides` in the selector is not decoration: the rule that hides this on a
     phone lives further down the file with the rest of the pause styling, so
     at equal specificity it would win here too. */
  .menu-panel.paused .sides .fm-pitch {
    display: block;
    width: clamp(62px, 9vmin, 96px);
    margin: 8px auto 0;
    border-radius: 4px;
  }

  /* the scoreline, which was the plainest thing on the card */
  .menu-panel.paused .pause-score { align-items: center; gap: 12px; }
  .menu-panel.paused .ps-f { display: inline; margin-right: .3em; }
  .menu-panel.paused .ps-f2 { margin: 0 0 0 .3em; }
  .menu-panel.paused .ps-plates { align-items: center; gap: 2px; }
  .menu-panel.paused .ps-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5em; padding: 2px .18em 4px;
    background: linear-gradient(180deg, #ffffff, #dfe3e8);
    color: #101216;
    border-radius: 9px;
    box-shadow: 0 2px 0 rgba(6, 10, 16, .45), 0 4px 12px rgba(0, 0, 0, .35);
  }
  .menu-panel.paused .ps-d { opacity: .4; margin: 0 .1em; }

  /* QUIT sits BESIDE controls. `.danger` takes the full width of the cols grid
     everywhere else, which on this card put it alone on a line of its own
     under a half-empty row. It is a button here like the rest of them. */
  .menu-panel.paused .menu-rows.cols .menu-row.danger { grid-column: auto; }
}

/* ---------- RESET EVERYTHING ----------
   Spelled out rather than shouted: a list of what actually goes, because
   "reset" reads as "reset my settings" and this takes the club with it. */
.menu-panel.reset { width: min(520px, 94vw); }
.reset-warn { font-size: clamp(11px, 2vmin, 14px); line-height: 1.5; color: #dfe9f5; }
.reset-warn b { display: block; margin-bottom: 6px; letter-spacing: .04em; }
.reset-warn ul { margin: 0 0 10px; padding-left: 20px; }
.reset-warn li { margin: 2px 0; color: #b9c6d6; }
.reset-warn em {
  display: block;
  font-style: normal;
  padding: 8px 10px;
  border-radius: 8px;
  color: #ffd2da;
  background: rgba(232, 66, 95, .14);
  border: 1px solid rgba(232, 66, 95, .45);
}

/* ---------- YOUR PROGRESS ----------
   The lifetime numbers, which were a rail down the side of the desktop menu
   for one version and are now a panel behind a button. Three groups laid out
   with auto-fit, so it is three columns on a desktop and one on a phone
   without a breakpoint deciding which. */
/* wide enough for the three groups to stand side by side; `wide` alone gives
   600px, which is two columns and an orphan */
.menu-panel.progress { width: min(760px, 94vw); }
.menu-panel.progress .pg-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 26px;
}
.menu-panel.progress .pg-title {
  font-family: 'RKPixel', var(--font-ui);
  font-size: 11px;
  line-height: 1.5;
  color: var(--green-hot);
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-shadow: 0 2px 0 rgba(6, 10, 16, 0.6);
}
.menu-panel.progress .pg-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}
.menu-panel.progress .pg-line:last-child { border-bottom: none; }
.menu-panel.progress .pg-line span { color: #9fb2c8; font-weight: 600; letter-spacing: 0.3px; }
.menu-panel.progress .pg-line b {
  color: #eef3f8;
  font-weight: 900;
  font-size: 1.2em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(6, 10, 16, 0.55);
}
/* one column on a phone is one column of twelve lines, which is taller than
   the panel is allowed to be — so the lines tighten rather than the list
   scrolling out from under the BACK row */
@media (max-width: 480px) {
  /* the teaser is 20 characters and the panel is 333px wide here — a size that
     fits it whole, rather than an ellipsis eating the number it exists to show */
  .menu-panel.cards .menu-row.m-stats .menu-label { font-size: 12px; letter-spacing: 0.2px; }
  .menu-panel.cards .menu-row.m-stats .menu-sub { font-size: 10.5px; margin-left: 8px; }
  .menu-panel.cards .menu-row.m-stats .menu-label .mi { width: 17px; height: 17px; }
  .menu-panel.progress .pg-line { padding: 3px 0; font-size: 13px; }
  .menu-panel.progress .pg-title { font-size: 10px; margin-bottom: 5px; }
  .menu-panel.progress .pg-body { gap: 8px 26px; }
}
.menu-panel.progress .pg-empty {
  color: #9fb2c8;
  font-size: 14px;
  line-height: 1.6;
  padding: 6px 0 2px;
}

/* THE STATS BUTTON, in two presentations of one row.
   It goes in the corner beside the gear wherever there is a corner to go in:
   above 620px wide, and on a TALL portrait window, where `.menu-panel.cards`
   already reserves a 58px band at the top (see the portrait rule above) that
   holds the gear and nothing else — the logo starts below it, so a chip can
   sit there without meeting anything.
   What is left is the small phone: narrow AND short. There the gear takes the
   last 52px of a 335px panel and a centred 250px logo leaves a 7px gap beside
   it, so the button becomes an ordinary row instead — on ONE line, because a
   two-line row costs 47px and that column is already at its 92vh cap with
   nothing to give. Same row object, same keyboard stop, two shapes. */
.menu-panel.cards .menu-row.m-stats {
  /* `.menu-panel.cards .menu-row` sets `container-type: inline-size` so labels
     can size in cqw. That is INLINE-SIZE CONTAINMENT: the box's intrinsic
     inline size is computed as if it had no contents. Harmless for a row the
     grid measures, fatal for one that shrink-to-fits in the corner — the chip
     came out 36px wide, which was its left and right padding and nothing else.
     Nothing in here is sized in cqw, so it simply opts out. */
  container-type: normal;
  background: rgba(10, 16, 24, 0.82);
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(6, 10, 16, 0.55), 0 8px 16px rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  justify-content: flex-start;
  text-align: left;
}
.menu-panel.cards .menu-row.m-stats .menu-label {
  /* Five classes, to match `.menu-row.candy .menu-label`, which is the same
     weight and would otherwise win on source order — and its size is in cqw,
     which with containment off resolves against the VIEWPORT (2.72vw ≈ 39px
     on a laptop). Every size on this row is therefore stated in px. */
  font-size: 13px;
  letter-spacing: 0.6px;
}
.menu-panel.cards .menu-row.m-stats .menu-label > span {
  color: var(--green-hot);
  /* one line, and if the window is too narrow for it the numbers trail off
     rather than running out past the edge of the panel */
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-panel.cards .menu-row.m-stats { overflow: hidden; }
.menu-panel.cards .menu-row.m-stats .menu-sub {
  color: #e8eef4;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.3px;
  font-size: 12px;
  /* on one line with the label, not under it — see the note above */
  display: inline;
  margin: 0 0 0 10px;
}
.menu-panel.cards .menu-row.m-stats .menu-label .mi { color: var(--green-hot); width: 20px; height: 20px; }
.menu-panel.cards .m-stats.focus { box-shadow: 0 0 0 3px #fff, 0 8px 16px rgba(0, 0, 0, 0.4); }

/* The corner cluster: the stats button, then the gear.
   They share a height so the pair reads as one bar rather than two controls
   that missed each other, and `right` is the gear's own geometry — 56px wide
   at a 2px inset, plus a 10px gap — so they stay locked together if either is
   resized. `width: max-content` is load-bearing: an absolutely positioned flex
   box with only `right` set shrink-to-fits, and `.menu-label`'s `min-width: 0`
   lets that collapse the label to zero. The chip measured 36px — its padding,
   and nothing else — until this said what width it actually wants. */
@media (min-width: 620px), (orientation: portrait) and (min-height: 761px) {
  .menu-panel.cards .menu-row.m-options { width: 56px; height: 56px; }
  .menu-panel.cards .menu-row.m-stats {
    position: absolute;
    top: 2px;
    right: 68px;
    z-index: 2;
    width: max-content;
    height: 56px;
    margin: 0;
    padding: 0 16px;
  }
  .menu-panel.cards .menu-row.m-stats .menu-label { flex: 0 0 auto; }
  .menu-panel.cards .menu-row.m-stats .menu-label .mi { width: 22px; height: 22px; }
  /* in the corner it stacks: the word, then the numbers under it */
  .menu-panel.cards .menu-row.m-stats .menu-sub { display: block; margin: 3px 0 0; }
}

/* The resume prompt: where you were, and a way to say not now. */
.menu-panel.resume { min-width: min(460px, 92vw); }
.menu-panel.resume .resume-where {
  font-family: 'RKPixel', var(--font-ui);
  font-size: clamp(11px, 2.4vmin, 16px);
  line-height: 1.6;
  color: #eef3f8;
  text-shadow: 0 2px 0 rgba(6, 10, 16, 0.6);
}
.menu-panel.resume .resume-where em {
  display: block;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.4px;
  color: #9fb2c8;
}

/* ---------- option picker: the full list of a setting's values ----------
   Opened by clicking a setting rather than clicking through it. The value
   currently in force carries a tick so the list says where you already are. */
.menu-panel .menu-row.current {
  border-color: rgba(111, 220, 87, 0.55);
  background: rgba(35, 193, 97, 0.14);
}
.menu-panel .menu-row.current .menu-label > span::after {
  content: ' ✓';
  color: var(--green-hot);
  font-weight: 900;
}

/* ---------- formation board ----------
   A row can carry a picture of what it is choosing. For formations that is
   the pitch itself, so the shape is read rather than decoded. */
.menu-art { flex: 0 0 auto; display: flex; line-height: 0; }
.fm-pitch {
  width: 22px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
/* the picker is a board of seven pitches, not a list of seven strings */
.menu-panel.formations .menu-rows {
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 10px;
}
.menu-panel.formations .menu-row {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 7px;
  margin: 0;
  padding: 11px 9px 12px;
}
.menu-panel.formations .menu-row.focus { transform: none; }
/* the card is the label's container: rows elsewhere never wrap, these must */
.menu-panel.formations .menu-label {
  display: block;
  width: 100%;
  white-space: normal;
}
.menu-panel.formations .fm-pitch { width: clamp(58px, 15vmin, 84px); }
.menu-panel.formations .menu-sub {
  font-size: 0.74em;
  line-height: 1.3;
  letter-spacing: 0;
  margin-top: 5px;
  opacity: 0.72;
}
.menu-panel.formations .menu-row.focus .menu-sub { opacity: 1; }
/* the picker's tick belongs in the corner of a card, not after the blurb */
.menu-panel.formations .menu-row.current .menu-label > span::after { content: none; }
.menu-panel.formations .menu-row.current::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 9px;
  font-size: 13px;
  font-weight: 900;
  color: var(--green-hot);
}

/* ---------------------------------------------------------------------------
   Career. The club, the squad and the market. Sits inside the existing menu
   panel rather than inventing a second visual language for the metagame. */
.car-head { text-align: center; padding: 2px 0 10px; }
.car-club { font-size: 26px; font-weight: 800; letter-spacing: .02em; color: var(--ink, #f4f6f8); }
.car-line { font-size: 12px; letter-spacing: .16em; opacity: .6; margin-top: 3px; }
.car-stats { display: flex; justify-content: center; gap: 26px; margin-top: 12px; }
.car-stats span { display: flex; flex-direction: column; align-items: center; }
.car-stats b { font-size: 19px; font-weight: 800; }
.car-stats i { font-size: 9px; letter-spacing: .14em; opacity: .55; font-style: normal; margin-top: 2px; }

.devbar { display: inline-block; width: 46px; height: 5px; border-radius: 3px;
          background: rgba(255,255,255,.16); vertical-align: middle; overflow: hidden; }
.devbar i { display: block; height: 100%; background: #5bd08a; }
.pot-hi { color: #5bd08a; font-size: 11px; }
.pot-max { color: #f2c14e; font-size: 9px; letter-spacing: .1em; }
.starts { font-size: 9px; letter-spacing: .12em; color: #f2c14e; margin-left: 6px; }

.car-table { width: 100%; border-collapse: collapse; font-size: 13px;
             font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.car-table th { font-size: 9px; letter-spacing: .12em; opacity: .5; font-weight: 600;
                text-align: right; padding: 4px 6px; }
.car-table td { text-align: right; padding: 5px 6px; border-top: 1px solid rgba(255,255,255,.07); }
.car-table td.nm, .car-table th:nth-child(2) { text-align: left; }
.car-table tr.me td { background: rgba(91,208,138,.14); font-weight: 700; }
.car-table tr.up td:first-child { box-shadow: inset 3px 0 0 #5bd08a; }
.car-table tr.down td:first-child { box-shadow: inset 3px 0 0 #e0603f; }

.car-player .pl-top { display: flex; align-items: center; gap: 14px; }
.pl-ovr { font-size: 40px; font-weight: 800; line-height: 1; color: #f2c14e; }
.pl-id b { display: block; font-size: 18px; }
.pl-id i { font-size: 11px; letter-spacing: .1em; opacity: .6; font-style: normal; }
.pl-rec { font-size: 12px; opacity: .7; margin: 8px 0 10px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.pl-grid span { display: flex; justify-content: space-between; background: rgba(255,255,255,.05);
                padding: 4px 8px; border-radius: 4px; }
.pl-grid i { font-size: 9px; letter-spacing: .1em; opacity: .55; font-style: normal; align-self: center; }
.pl-grid b { font-size: 14px; font-variant-numeric: tabular-nums; }

.car-scout, .car-offer { background: rgba(255,255,255,.05); border-radius: 6px;
                         padding: 10px 14px; margin-bottom: 8px; font-size: 14px; }
.car-offer { border-left: 3px solid #f2c14e; }
.car-scout { border-left: 3px solid #5bd08a; }
.car-scout i, .car-offer i { display: block; font-size: 9px; letter-spacing: .14em;
                             opacity: .6; font-style: normal; margin-bottom: 3px; }
.car-scout .ovr { color: #f2c14e; font-weight: 800; }
.car-scout .fee, .car-offer .fee { float: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.car-empty { opacity: .6; font-size: 14px; padding: 8px 2px 12px; }
.car-club-info { display: flex; gap: 26px; margin-bottom: 10px; }
.car-club-info i { display: block; font-size: 9px; letter-spacing: .14em; opacity: .55; font-style: normal; }
.car-club-info b { font-size: 15px; }

.car-ft { text-align: center; }
.ft-score { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.ft-score span { opacity: .4; margin: 0 8px; }
.ft-opp { font-size: 11px; letter-spacing: .14em; opacity: .6; margin-top: 4px; }
.ft-obj { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 10px; font-size: 13px; }
.ft-obj .hit { color: #5bd08a; }
.ft-obj .miss { opacity: .45; }
.ft-coin { font-size: 22px; font-weight: 800; color: #f2c14e; font-variant-numeric: tabular-nums; }
.ft-dev { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ft-dev i { font-size: 9px; letter-spacing: .14em; opacity: .55; font-style: normal; margin-bottom: 2px; }
.ft-dev b { color: #5bd08a; }
.ft-dev em { font-size: 10px; opacity: .55; font-style: normal; letter-spacing: .08em; }

.car-season { text-align: center; }
.ss-verdict { font-size: 34px; font-weight: 800; letter-spacing: .04em; }
.ss-verdict.good { color: #5bd08a; }
.ss-verdict.bad { color: #e0603f; }
.ss-line { font-size: 12px; opacity: .7; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ss-note { font-size: 13px; opacity: .8; margin-top: 8px; }
.ss-note.bad { color: #e0603f; }
.ss-next { font-size: 11px; letter-spacing: .14em; opacity: .55; margin-top: 14px; }

/* naming the club — offered after the first match, never before it */
.car-name { text-align: center; }
.nm-kicker { font-size: 10px; letter-spacing: .18em; opacity: .6; margin-bottom: 6px; }
.nm-head { font-size: 21px; font-weight: 800; margin-bottom: 12px; }
.nm-input {
  width: 100%; max-width: 340px; padding: 10px 14px; text-align: center;
  font: inherit; font-size: 19px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.22);
  border-radius: 10px; outline: none;
}
.nm-input:focus { border-color: #5bd08a; }
.nm-sw, .cl-sw, .cl-cr {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
}
.nm-sw .sw, .cl-sw .sw {
  width: 26px; height: 26px; border-radius: 7px;
  border: 2px solid transparent; cursor: pointer;
}
.nm-sw .sw.on, .cl-sw .sw.on { outline: 2px solid #5bd08a; outline-offset: 2px; }

/* ---------- founding a club ----------
   The club exists on screen before it exists in the save: the crest carries the
   chosen colours and the three-letter tag, and repaints as the name is typed. */
.cl-badge { margin: 4px 0 10px; }
.cl-badge .crest {
  width: clamp(76px, 22vmin, 112px); height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}
.cl-label {
  margin: 14px 0 6px;
  font-size: 9.5px; letter-spacing: .22em;
  color: var(--accent); opacity: .85;
}
.cl-cr .cr {
  display: inline-flex; padding: 3px; border-radius: 9px; cursor: pointer;
  border: 2px solid transparent; line-height: 0;
}
.cl-cr .cr .crest { width: 34px; height: 34px; }
.cl-cr .cr.on { outline: 2px solid #5bd08a; outline-offset: 1px; }
.menu-panel.founding .menu-html { margin-bottom: 4px; }

/* backup code + honours cabinet */
.car-backup p { font-size: 13px; opacity: .8; margin: 0 0 8px; }
.bk-code { width: 100%; font: 11px/1.4 ui-monospace, Menlo, monospace; color: #cfe9d8;
           background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.16);
           border-radius: 8px; padding: 8px 10px; resize: vertical; word-break: break-all; }
.bk-note { font-size: 11px; opacity: .55; margin-top: 6px; }
.bk-in { margin-top: 12px; }
.bk-msg { font-size: 12px; min-height: 16px; margin-top: 6px; }
.bk-msg.ok { color: #5bd08a; }
.bk-msg.bad { color: #e0603f; }
.car-hon { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.car-hon span { background: rgba(255,255,255,.06); border-radius: 8px; padding: 7px 12px;
                border-left: 3px solid #6b7570; }
.car-hon span.title { border-left-color: #f2c14e; }
.car-hon span.promo { border-left-color: #5bd08a; }
.car-hon b { display: block; font-size: 12px; letter-spacing: .06em; }
.car-hon i { font-size: 10px; opacity: .6; font-style: normal; letter-spacing: .06em; }

/* ---- pause: the score, who you are playing, and the match so far ---------- */
.pause-score { display: flex; align-items: baseline; justify-content: center;
  gap: 14px; font-weight: 800; letter-spacing: .04em; }
.pause-score span { font-size: .82rem; opacity: .72; white-space: nowrap; }
.pause-score b { font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
/* `.pause-score b i` used to dim and space the dash, back when the dash was
   the only <i> in there. It now matches the score plates too and outranks the
   class that styles them, so each part owns itself instead. */
/* The scoreline gained three wrappers and a flag so the DESKTOP card can put
   each score on a plate. This block is the phone's, and its whole job is that
   the phone is left exactly as it was: the digits back to full opacity, the
   dash keeping the margin the old markup gave it, and the flags not rendered
   at all. The plates themselves live in the 900px block. */
.ps-plates { display: inline-flex; align-items: baseline; }
.ps-n { font-style: normal; opacity: 1; margin: 0; }
.ps-d { font-style: normal; opacity: .45; margin: 0 .18em; }
.ps-f { display: none; }
/* the mini pitch is desktop-only too, and .fm-pitch has a 22px base rule of
   its own — left alone it drew a stamp on every phone pause card */
.menu-panel.paused .fm-pitch { display: none; }

/* ---------- THE PAUSE CARD ON A PHONE ----------
   A scoreline, two team cards, an eleven-row stats table and then FIVE
   full-width buttons is more than a 667px phone has, so the card scrolled —
   and RESUME, the one button anybody actually wants, was as often as not
   below the fold.

   RESUME keeps the whole width, because it is the way back to the game and
   it should be the biggest thing here. The other four are errands, so they
   pair up two to a line: half the width, and between them four rows become
   two. Everything that was tuned for a full-width row — the icon, the
   chevron, the right-hand padding — comes in to match, or the label runs
   under the chevron the way SUBSTITUTIONS used to. */
@media (max-width: 899px) and (orientation: portrait) {
  .menu-panel.paused .menu-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .menu-panel.paused .menu-rows .menu-row { margin: 0; min-width: 0; }
  .menu-panel.paused .menu-rows .menu-row.m-resume { grid-column: 1 / -1; }
  /* RESUME is child 1 and spans both columns, so the rest pair off as 2|3,
     4|5, 6|7 — an ODD total always pairs perfectly. Only an EVEN total leaves
     somebody on their own, and he takes the full width rather than sitting
     next to a gap. Keyed on :nth-child(odd) this fired on QUIT in the ordinary
     five-row card and stranded CONTROLS beside an empty half. */
  .menu-panel.paused .menu-rows .menu-row:last-child:nth-child(even) { grid-column: 1 / -1; }
  .menu-panel.paused .menu-rows .menu-row.candy {
    padding: 8px 25px 8px 8px;
    gap: 6px;
    box-shadow: 0 3px 0 rgba(6, 10, 16, 0.6), 0 5px 12px rgba(0, 0, 0, 0.35);
  }
  .menu-panel.paused .menu-rows .menu-row.candy::before { right: 8px; font-size: 1.25em; }
  /* half a card is half the room for a label, so the type comes in with it.
     QUIT MATCH is the longest of them and sets the size: at 0.92em on a 375px
     phone its last letter printed under the chevron. */
  .menu-panel.paused .menu-rows .menu-row.candy .menu-label {
    min-width: 0; font-size: 0.84em;
  }
  .menu-panel.paused .menu-rows .menu-row.m-resume.candy .menu-label { font-size: 1em; }
  .menu-panel.paused .menu-rows .menu-row.candy .menu-label .mi {
    width: 20px; height: 20px; padding: 3px; border-radius: 5px; flex: none;
  }
  /* RESUME has a full line to itself, so it keeps the bigger type */
  .menu-panel.paused .menu-rows .menu-row.m-resume.candy { padding: 10px 30px 10px 11px; }
  .menu-panel.paused .menu-rows .menu-row.m-resume.candy::before { right: 13px; font-size: 1.5em; }
  .menu-panel.paused .menu-rows .menu-row.m-resume.candy .menu-label .mi {
    width: 26px; height: 26px; padding: 4px;
  }
  /* and the table above them gives back the rest: eleven rows at 2px a side
     is a third of a phone screen spent on padding */
  .menu-panel.paused table.stats td { padding: 1px 0; }
  .menu-panel.paused table.stats th { padding: 2px 0; }
  .menu-panel.paused .sides { margin: 9px 0 5px; }
}

/* A 667px phone is still 14px over after that, and the shortest thing it can
   afford to lose is padding rather than a row. Nothing here changes what is
   ON the card — only how tightly it is packed — so the taller phones keep the
   roomier version above. */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 720px) {
  .menu-panel.paused .menu-rows { gap: 5px; }
  .menu-panel.paused .menu-rows .menu-row.candy { padding: 6px 24px 6px 7px; }
  .menu-panel.paused .menu-rows .menu-row.m-resume.candy { padding: 8px 28px 8px 10px; }
  .menu-panel.paused table.stats td { padding: 0 0; }
  .menu-panel.paused table.stats th { padding: 1px 0; }
  .menu-panel.paused .sides { margin: 6px 0 4px; }
  .menu-panel.paused .pause-clock { margin-top: 2px; }
}
.pause-clock { text-align: center; font-size: .68rem; letter-spacing: .12em;
  opacity: .6; margin-top: 4px; text-transform: uppercase; }
.sides { display: flex; align-items: stretch; gap: 10px; margin: 14px 0 6px; }
.sides-one { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  gap: 3px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.sides-one.you { border-color: rgba(120,200,255,.45); background: rgba(120,200,255,.09); }
.sides-one b { font-size: .74rem; letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sides-lvl { font-size: .82rem; font-weight: 800; letter-spacing: .05em; color: #ffd166; }
.sides-one.you .sides-lvl { color: #7ec8ff; }
.sides-one em { font-style: normal; font-size: .6rem; letter-spacing: .06em;
  opacity: .55; text-transform: uppercase; }
.sides-v { align-self: center; font-size: .7rem; opacity: .4; letter-spacing: .1em; }

/* ---------- PORTRAIT ON PHONES ----------
   A phone held sideways gets a layout meant for a short desktop window, so it
   is asked to turn back instead. Every clause in the query earns its place:
     max-height: 500px  separates a phone in landscape (an iPhone 15 Pro Max is
                        430px tall, an SE 375px) from a tablet (an iPad is 768)
                        — a tablet keeps the landscape layout, it has the room
     hover: none +      keeps it away from desktop windows, INCLUDING Poki's
     pointer: coarse    own 640x360 and 704x396 frames, which are landscape and
                        short and must keep the layout they have
   The existing (orientation: landscape) and (max-height: 470px/620px/780px)
   blocks are NOT dead and are not removed: they carry no touch clause, so they
   are what styles those Poki frames. */
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px)
   and (hover: none) and (pointer: coarse) {
  /* published for main.js, the way --desk already publishes the desktop-menu
     threshold, so the script cannot drift from the stylesheet */
  :root { --portraitlock: 1; }
  #rotate {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    text-align: center;
    background: #0a1322;
    color: #e8eef4;
    font-family: var(--font-ui);
  }
  #rotate svg { width: clamp(110px, 32vh, 200px); height: auto; color: var(--green-hot); }
  #rotate b {
    font-family: "Courier New", ui-monospace, monospace;
    font-size: clamp(14px, 4.2vh, 22px);
    font-weight: 900;
    letter-spacing: 2px;
  }
  #rotate span { font-size: clamp(11px, 3vh, 15px); opacity: 0.72; letter-spacing: 0.4px; }
}

/* THE CONTROL PICKER. Its two rows are call-to-action rows, and .menu-row.cta
   centres its content — which is invisible on a row whose text fills the width
   and obvious on one whose does not, so the two options sat at different left
   edges and stopped reading as a pair. They are a choice, not a call to
   action: line them up. */
.menu-panel.scheme .menu-row.cta { justify-content: flex-start; }
.menu-panel.scheme .menu-row.cta .menu-label { text-align: left; }
.menu-panel.scheme .menu-row.cta .menu-sub { text-transform: none; }

/* THE MOUSE IN THE CONTROLS CARD.
   This had NO rules at all, so the inline SVG had no intrinsic size and
   collapsed to nothing: the card captioned empty space with "aim & everything
   else" and a player who picked the mouse was shown no mouse. Sized like the
   keycaps beside it, and the left button is lit because "which one do I press"
   is the only question the picture is there to answer. */
.km-mouse { display: inline-flex; flex: 0 0 auto; }
.km-mouse svg {
  width: 30px;
  height: auto;
  filter: drop-shadow(0 3px 0 #63707f) drop-shadow(0 5px 9px rgba(0, 0, 0, 0.45));
}
.km-mouse .mb-body {
  fill: none;
  stroke: #10161f;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.km-mouse rect.mb-body { fill: #e6ebf2; }
.km-mouse .mb-lit { fill: var(--green-hot); }
.key-map .km-mouse svg { width: clamp(26px, 7vh, 38px); }

/* A POINTER GETS HOVER, NOT FOCUS.
   The stylesheet had no :hover rule at all, so the focus ring was the only
   feedback a mouse ever got and was doing two jobs: "you are over this" and
   "this is where the keyboard is". Now that the ring waits for a key (see
   navMode in ui/menus.js) the pointer needs its own, quieter answer. Gated on
   a real hover device so a phone never paints it from a tap. */
@media (hover: hover) and (pointer: fine) {
  .menu-row:not(.disabled):not(.focus):hover {
    border-color: rgba(255, 255, 255, 0.45);
    filter: brightness(1.08);
    cursor: pointer;
  }
  .menu-panel.cards .menu-row:not(.disabled):not(.focus):hover {
    transform: translateY(-2px);
  }
}