/* ==================================================================
   Voxel Foosball — UI shell
   ------------------------------------------------------------------
   Plain CSS, custom properties only. No preprocessor, no build step,
   no @import, no external font, no external image. Link it directly:

     <link rel="stylesheet" href="./src/ui/shell.css">

   Runtime hooks the game may set (on :root or on .vf-root):
     --team-a, --team-b            team colours
     --team-a-ink, --team-b-ink    readable ink on those colours

   Layout rule that must never be broken: containers are
   pointer-events:none so a drag aimed at the WebGL table always gets
   through. Only real controls opt back in.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */

.vf-root {
  /* Palette — bright, warm, family friendly. */
  --vf-ink: #2a1d12;
  --vf-ink-2: #7a6250;
  --vf-paper: #fff6e3;
  --vf-paper-2: #ffe7bd;
  --vf-paper-3: #f7d497;
  --vf-sun: #ffc23d;
  --vf-sun-2: #ffd76e;
  --vf-grass: #56b04a;
  --vf-sky: #59b4ec;

  /* Icon internals. */
  --vf-cut: #fff6e3;
  --vf-rod: #8a7360;
  --vf-pitch: #3f8f45;

  /* Team colours — the game overwrites these at runtime. */
  --team-a: #3f7fe0;
  --team-b: #e04a3f;
  --team-a-ink: #fff8ea;
  --team-b-ink: #fff8ea;

  /* One unit drives every size. Blends viewport width and small-viewport
     height so phone landscape shrinks the whole UI instead of clipping it. */
  --u: clamp(9px, min(1.05vw, 2.5svh, 2.5dvh), 19px);

  --vf-edge: max(3px, calc(var(--u) * 0.24));
  --vf-lift: max(3px, calc(var(--u) * 0.26));
  --vf-r: max(3px, calc(var(--u) * 0.2));
  /* 46, not 44: leaves headroom so sub-pixel layout can never land a control
     under the 44px touch-target floor. */
  --vf-tap: 46px;

  /* Type. Floors keep every label at 12px or larger at any viewport. */
  --fs-xs: max(12px, calc(var(--u) * 0.98));
  --fs-sm: max(13px, calc(var(--u) * 1.15));
  --fs-md: max(15px, calc(var(--u) * 1.4));
  --fs-lg: max(19px, calc(var(--u) * 2));
  --fs-xl: max(26px, calc(var(--u) * 3));
  --fs-title: max(32px, calc(var(--u) * 4.4));
  --fs-huge: max(40px, calc(var(--u) * 5.6));

  --vf-font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Safe areas + gutter. */
  --gutter: calc(var(--u) * 0.9);
  --pad-t: calc(var(--gutter) + env(safe-area-inset-top, 0px));
  --pad-r: calc(var(--gutter) + env(safe-area-inset-right, 0px));
  --pad-b: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  --pad-l: calc(var(--gutter) + env(safe-area-inset-left, 0px));

  --shadow-hard: 0 var(--vf-lift) 0 var(--vf-ink);
  --shadow-card: 0 calc(var(--vf-lift) * 2) 0 var(--vf-ink),
    0 calc(var(--vf-lift) * 2 + 10px) 26px rgba(20, 12, 4, 0.32);
}

/* ------------------------------------------------------------------
   2. Root + layers
   ------------------------------------------------------------------ */

.vf-root {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--vf-font);
  color: var(--vf-ink);
  font-size: var(--fs-md);
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vf-root *,
.vf-root *::before,
.vf-root *::after { box-sizing: border-box; }

.vf-root button,
.vf-root input,
.vf-root kbd,
.vf-root output { font-family: inherit; }

.vf-root h1,
.vf-root h2,
.vf-root p { margin: 0; }

.vf-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vf-screen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.vf-screen.is-in { opacity: 1; }

/* Scrims are painted as the screen's own background, never as a pseudo-element:
   an absolutely positioned ::before would paint on top of the static content. */

/* Soft scrim lets the player keep orbiting the table behind a menu. */
.vf-screen[data-scrim="soft"] {
  background:
    radial-gradient(130% 90% at 50% 48%, rgba(30, 20, 10, 0.46), rgba(30, 20, 10, 0.1) 72%),
    linear-gradient(180deg, rgba(30, 20, 10, 0.12), rgba(30, 20, 10, 0.42));
}

/* Hard scrim belongs to true modals; it does block the table on purpose. */
.vf-screen[data-scrim="hard"] {
  background: rgba(28, 18, 8, 0.66);
  pointer-events: auto;
}

/* Flex, not grid: a flex item's `max-height: 100%` resolves against the
   container, so a tall panel scrolls internally instead of spilling off-screen. */
.vf-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
}

/* Match-point vignette. */
.vf-root::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  box-shadow: inset 0 0 calc(var(--u) * 9) calc(var(--u) * 2.4) rgba(224, 74, 63, 0.42);
}

.vf-root[data-tension="on"]::after {
  opacity: 1;
  animation: vf-tension 2.6s ease-in-out infinite;
}

/* ------------------------------------------------------------------
   3. Focus
   ------------------------------------------------------------------ */

.vf-root :focus-visible {
  outline: max(3px, calc(var(--u) * 0.26)) solid var(--vf-sun);
  outline-offset: max(2px, calc(var(--u) * 0.18));
  box-shadow: 0 0 0 max(7px, calc(var(--u) * 0.58)) rgba(30, 20, 10, 0.72);
  z-index: 2;
}

.vf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   4. Icons
   ------------------------------------------------------------------ */

.vf-ic {
  display: block;
  fill: currentColor;
  width: calc(var(--u) * 1.5);
  height: auto;
  flex: none;
}

.vf-diagram {
  display: block;
  height: max(38px, calc(var(--u) * 3.4));
  width: auto;
  color: var(--vf-ink);
  flex: none;
}

.vf-jersey {
  display: block;
  width: calc(var(--u) * 1.8);
  height: auto;
  flex: none;
  filter: drop-shadow(0 1px 0 rgba(30, 20, 10, 0.35));
}

.vf-pitchmark {
  display: block;
  width: calc(var(--u) * 8);
  height: auto;
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-hard);
}

/* ------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------ */

.vf-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.5);
  min-height: max(var(--vf-tap), calc(var(--u) * 3.1));
  min-width: var(--vf-tap);
  padding: calc(var(--u) * 0.45) calc(var(--u) * 1.05);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.015em;
  color: var(--vf-ink);
  background: var(--vf-paper-2);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform 0.09s ease, box-shadow 0.09s ease, background 0.14s ease;
}

.vf-btn:hover { background: var(--vf-paper-3); }
.vf-btn:active { transform: translateY(var(--vf-lift)); box-shadow: 0 0 0 var(--vf-ink); }
.vf-btn[disabled] { opacity: 0.45; cursor: default; }

.vf-btn-glyph .vf-ic { width: calc(var(--u) * 1.5); }
.vf-btn-text { display: flex; flex-direction: column; align-items: flex-start; }
.vf-btn-label { white-space: nowrap; }
.vf-btn-sub { font-size: var(--fs-xs); font-weight: 700; color: var(--vf-ink-2); }

.vf-btn--primary {
  background: var(--vf-sun);
  font-size: var(--fs-lg);
  padding: calc(var(--u) * 0.55) calc(var(--u) * 1.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vf-btn--primary:hover { background: var(--vf-sun-2); }
.vf-btn--primary .vf-btn-glyph .vf-ic { width: calc(var(--u) * 1.8); }

.vf-btn--ghost { background: transparent; box-shadow: none; }
.vf-btn--ghost:hover { background: rgba(255, 246, 227, 0.5); }
.vf-btn--wide { width: 100%; }

.vf-btn--chip {
  background: var(--vf-paper);
  font-size: var(--fs-sm);
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.75);
  gap: calc(var(--u) * 0.4);
}

.vf-chip-art .vf-jersey { width: calc(var(--u) * 1.4); }

.vf-iconbtn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(var(--vf-tap), calc(var(--u) * 3));
  height: max(var(--vf-tap), calc(var(--u) * 3));
  padding: 0;
  color: var(--vf-ink);
  background: var(--vf-paper);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform 0.09s ease, box-shadow 0.09s ease, background 0.14s ease;
}

.vf-iconbtn:hover { background: var(--vf-paper-2); }
.vf-iconbtn:active { transform: translateY(var(--vf-lift)); box-shadow: 0 0 0 var(--vf-ink); }
.vf-iconbtn .vf-ic { width: 52%; }
.vf-iconbtn.is-off { background: var(--vf-paper-3); color: var(--vf-ink-2); }

/* ------------------------------------------------------------------
   6. Panels
   ------------------------------------------------------------------ */

.vf-panel {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.75);
  width: min(100%, 700px);
  max-height: 100%;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.2) calc(var(--u) * 0.9);
  background: var(--vf-paper);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-card);
  transform: translateY(calc(var(--u) * 0.7));
  transition: transform 0.22s cubic-bezier(0.2, 1.3, 0.5, 1);
}

.vf-screen.is-in .vf-panel { transform: none; }
.vf-panel--wide { width: min(100%, 980px); }
.vf-panel--tall { width: min(100%, 760px); }
.vf-panel--final { width: min(100%, 720px); gap: calc(var(--u) * 0.9); }

.vf-panel-title {
  font-size: var(--fs-lg);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-align: center;
}

.vf-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vf-ink-2);
  text-align: center;
}

.vf-panel-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
  /* Classic CSS scroll shadows: the inner shadows only show when there is
     actually more content above or below. */
  background:
    linear-gradient(var(--vf-paper) 30%, rgba(255, 246, 227, 0)) top / 100% 22px no-repeat local,
    linear-gradient(rgba(255, 246, 227, 0), var(--vf-paper) 70%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(42, 29, 18, 0.26), rgba(42, 29, 18, 0)) top / 100% 11px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(42, 29, 18, 0.26), rgba(42, 29, 18, 0)) bottom / 100% 11px no-repeat scroll;
}

.vf-panel-actions {
  display: flex;
  gap: calc(var(--u) * 0.5);
  justify-content: center;
  flex-wrap: wrap;
  padding-top: calc(var(--u) * 0.2);
}

.vf-panel-actions .vf-btn--primary { flex: 1 1 auto; max-width: 340px; }

.vf-subhead {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.35);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vf-ink-2);
  margin-bottom: calc(var(--u) * 0.35);
}

.vf-subhead-glyph .vf-ic { width: calc(var(--u) * 1.1); }

.vf-setup-body { display: grid; gap: calc(var(--u) * 0.9); }

/* ------------------------------------------------------------------
   7. Choice groups
   ------------------------------------------------------------------ */

.vf-choices {
  display: grid;
  grid-template-columns: var(--vf-cols, repeat(auto-fit, minmax(min(140px, 100%), 1fr)));
  gap: calc(var(--u) * 0.55);
}

.vf-choices--dense {
  grid-template-columns: var(--vf-cols, repeat(auto-fit, minmax(min(104px, 100%), 1fr)));
}

.vf-choice {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(var(--vf-tap), calc(var(--u) * 4.2));
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.5);
  font-size: var(--fs-sm);
  color: var(--vf-ink);
  background: var(--vf-paper-2);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.14s ease, box-shadow 0.1s ease;
}

.vf-choice:hover { background: var(--vf-paper-3); }

.vf-choice[aria-checked="true"] {
  background: var(--vf-sun);
  transform: translateY(calc(var(--vf-lift) * -1));
  box-shadow: 0 calc(var(--vf-lift) * 2) 0 var(--vf-ink),
    inset 0 0 0 max(3px, calc(var(--u) * 0.2)) var(--vf-paper);
}

.vf-choice-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.28);
  width: 100%;
}

.vf-choice-label { font-size: var(--fs-sm); font-weight: 900; text-align: center; }
.vf-choice-sub { font-size: var(--fs-xs); font-weight: 700; color: var(--vf-ink-2); text-align: center; }
.vf-choice[aria-checked="true"] .vf-choice-sub { color: #6d4f13; }

/* Dense rows stay flush; only the big cards get the raised "picked" pop. */
.vf-choices--dense .vf-choice[aria-checked="true"] {
  transform: none;
  box-shadow: var(--shadow-hard),
    inset 0 0 0 max(3px, calc(var(--u) * 0.2)) var(--vf-paper);
}

.vf-choice-inner--team {
  flex-direction: row;
  justify-content: space-between;
  gap: calc(var(--u) * 0.5);
  padding: 0 calc(var(--u) * 0.3);
}

.vf-teamcard-jersey .vf-jersey { width: calc(var(--u) * 2.9); }
.vf-teamcard-name { font-size: var(--fs-lg); font-weight: 900; }
.vf-teamcard-side .vf-ic { width: calc(var(--u) * 1.4); opacity: 0.45; }

.vf-choice-inner--palette { gap: calc(var(--u) * 0.24); }
.vf-swatchpair { display: flex; gap: calc(var(--u) * 0.18); }
.vf-swatchpair .vf-jersey { width: calc(var(--u) * 1.7); }
.vf-badge .vf-ic { width: calc(var(--u) * 1.1); opacity: 0.6; }

.vf-meter { display: flex; align-items: flex-end; gap: 2px; height: max(20px, calc(var(--u) * 1.7)); }
.vf-meter i {
  display: block;
  width: max(9px, calc(var(--u) * 0.6));
  background: var(--vf-paper);
  border: 2px solid var(--vf-ink);
  border-radius: 1px;
}
.vf-meter i:nth-child(1) { height: 34%; }
.vf-meter i:nth-child(2) { height: 50%; }
.vf-meter i:nth-child(3) { height: 66%; }
.vf-meter i:nth-child(4) { height: 82%; }
.vf-meter i:nth-child(5) { height: 100%; }
.vf-meter i.is-on { background: var(--vf-grass); }

.vf-players-glyph .vf-ic { width: calc(var(--u) * 2.4); }
.vf-choice-inner--players { gap: calc(var(--u) * 0.4); }

/* ------------------------------------------------------------------
   8. Fields, toggles, sliders
   ------------------------------------------------------------------ */

.vf-settings { display: grid; gap: calc(var(--u) * 0.4) calc(var(--u) * 1.4); }

/* Two columns whenever there is room: keeps every row reachable without
   scrolling on a 740x360 phone held sideways. */
@media (min-width: 620px) {
  .vf-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The two picker rows always span: five 46px-wide options will not fit in
     half a phone-landscape panel, and touch targets win over row count. */
  .vf-settings > .vf-field:nth-last-child(-n + 2) { grid-column: 1 / -1; }
}

.vf-field {
  display: grid;
  grid-template-columns: minmax(0, max(118px, calc(var(--u) * 7.6))) minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.35);
  border-bottom: 2px solid rgba(122, 98, 80, 0.22);
}

.vf-field:last-child { border-bottom: 0; }

.vf-field-head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.35);
  min-width: 0;
}

.vf-field--noted {
  grid-template-areas: "label control" "note note";
  row-gap: 2px;
}

.vf-field--noted .vf-field-head { grid-area: label; }
.vf-field--noted .vf-field-control { grid-area: control; }
.vf-field--noted .vf-field-label { white-space: normal; }

.vf-field-note {
  grid-area: note;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.25;
  color: var(--vf-ink-2);
}

.vf-field-glyph .vf-ic { width: calc(var(--u) * 1.25); color: var(--vf-ink-2); }
.vf-field-label { font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; }
.vf-field-control { min-width: 0; display: flex; justify-content: flex-end; }
.vf-field-control > * { max-width: 100%; }
.vf-field-control .vf-choices { flex: 1; }

.vf-toggle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  min-width: var(--vf-tap);
  min-height: var(--vf-tap);
  padding: calc(var(--u) * 0.3);
  background: none;
  border: 0;
  cursor: pointer;
}

.vf-toggle-track {
  display: block;
  position: relative;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 1.9);
  background: var(--vf-paper-3);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  transition: background 0.16s ease;
}

.vf-toggle-knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--vf-paper);
  border-right: var(--vf-edge) solid var(--vf-ink);
  transition: transform 0.16s ease, background 0.16s ease;
}

.vf-toggle[aria-checked="true"] .vf-toggle-track { background: var(--vf-grass); }
.vf-toggle[aria-checked="true"] .vf-toggle-knob {
  transform: translateX(100%);
  border-right: 0;
  border-left: var(--vf-edge) solid var(--vf-ink);
}

.vf-slider { display: flex; align-items: center; gap: calc(var(--u) * 0.5); width: 100%; }

.vf-range {
  pointer-events: auto;
  flex: 1 1 auto;
  min-width: max(88px, calc(var(--u) * 6));
  height: var(--vf-tap);
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.vf-range::-webkit-slider-runnable-track {
  height: calc(var(--u) * 1.1);
  background: var(--vf-paper-3);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
}

.vf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 2);
  margin-top: calc(var(--u) * -0.55);
  background: var(--vf-sun);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
}

.vf-range::-moz-range-track {
  height: calc(var(--u) * 1.1);
  background: var(--vf-paper-3);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
}

.vf-range::-moz-range-thumb {
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 2);
  background: var(--vf-sun);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
}

.vf-range-out {
  font-size: var(--fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 3.4em;
  text-align: right;
  color: var(--vf-ink-2);
}

/* ------------------------------------------------------------------
   9. Control hints
   ------------------------------------------------------------------ */

.vf-hints {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 0.7);
  justify-content: center;
  align-items: stretch;
}

/* One group per player. A single untagged group renders identically to the
   one-player hint that came before seats existed. */
.vf-hintgroups {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.1);
  justify-content: center;
  align-items: flex-start;
}

.vf-hintgroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.3);
}

.vf-hintgroup-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.3);
  padding: max(2px, calc(var(--u) * 0.12)) calc(var(--u) * 0.5);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--vf-paper);
  background: var(--vf-ink);
  border-radius: var(--vf-r);
  border-bottom: max(3px, calc(var(--u) * 0.22)) solid var(--seat-team, var(--team-a));
}

.vf-hintgroup-tag .vf-jersey { width: calc(var(--u) * 1.15); }

.vf-hintgroups--mini .vf-diagram { height: max(30px, calc(var(--u) * 2.4)); }
.vf-hintgroups--mini .vf-hint { padding: calc(var(--u) * 0.3) calc(var(--u) * 0.5); }
.vf-hintgroups--mini { gap: calc(var(--u) * 0.8); }

.vf-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 0.3);
  padding: calc(var(--u) * 0.45) calc(var(--u) * 0.7);
  background: var(--vf-paper);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-hard);
}

.vf-hint-art {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.45);
}

.vf-hint-cap {
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vf-ink-2);
}

.vf-hints--mini .vf-diagram { height: calc(var(--u) * 2.4); }
.vf-hints--mini .vf-hint { padding: calc(var(--u) * 0.3) calc(var(--u) * 0.5); }

.vf-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u) * 1.75);
  height: calc(var(--u) * 1.75);
  padding: 0 calc(var(--u) * 0.2);
  font-size: var(--fs-xs);
  font-weight: 900;
  background: var(--vf-paper-2);
  border: max(2px, calc(var(--u) * 0.16)) solid var(--vf-ink);
  border-radius: max(2px, calc(var(--u) * 0.13));
  box-shadow: 0 max(2px, calc(var(--u) * 0.16)) 0 var(--vf-ink);
}

.vf-key:empty { visibility: hidden; }
.vf-key--wide { padding: 0 calc(var(--u) * 0.45); letter-spacing: 0.02em; }

.vf-keypad { display: inline-flex; flex-direction: column; align-items: center; gap: max(2px, calc(var(--u) * 0.14)); }
.vf-keypad-row,
.vf-keyrow { display: inline-flex; gap: max(2px, calc(var(--u) * 0.14)); }

.vf-split { display: flex; gap: calc(var(--u) * 0.9); justify-content: center; }
.vf-splitside { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.2); }
.vf-splitside-team .vf-jersey { width: calc(var(--u) * 1.5); }
.vf-splitside-cap {
  font-size: var(--fs-xs);
  font-weight: 900;
  color: var(--vf-ink-2);
}

/* ------------------------------------------------------------------
   10. Title
   ------------------------------------------------------------------ */

.vf-title {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--pad-t) + var(--u) * 2.6) var(--pad-r) var(--pad-b) var(--pad-l);
}

.vf-title-left,
.vf-title-right {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.8);
  min-width: 0;
  max-width: 100%;
}

.vf-title-emblem .vf-pitchmark { width: calc(var(--u) * 7.5); }

.vf-wordmark {
  display: grid;
  justify-items: center;
  line-height: 0.9;
  text-align: center;
}

.vf-wordmark-a {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--vf-paper);
  text-shadow: 0 max(2px, calc(var(--u) * 0.16)) 0 var(--vf-ink);
}

.vf-wordmark-b {
  font-size: var(--fs-huge);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--vf-sun);
  -webkit-text-stroke: max(4px, calc(var(--u) * 0.32)) var(--vf-ink);
  paint-order: stroke fill;
  text-shadow: 0 max(4px, calc(var(--u) * 0.34)) 0 var(--vf-ink);
}

.vf-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 0.45);
  justify-content: center;
}

.vf-title-left .vf-btn--primary { min-width: calc(var(--u) * 16); }

.vf-microcopy {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-paper);
  text-shadow: 0 2px 0 rgba(30, 20, 10, 0.8);
  text-align: center;
}

.vf-title-corner {
  position: absolute;
  top: var(--pad-t);
  right: var(--pad-r);
  display: flex;
  gap: calc(var(--u) * 0.4);
}

/* Phone landscape: split into two columns so nothing is clipped. */
@media (min-width: 640px) and (max-height: 560px) {
  .vf-title {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: calc(var(--u) * 1.4);
    padding-top: var(--pad-t);
  }
  .vf-title-emblem { display: none; }
}

/* ------------------------------------------------------------------
   11. HUD
   ------------------------------------------------------------------ */

.vf-hud {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: calc(var(--u) * 0.4);
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.vf-hud.is-in { opacity: 1; }
.vf-hud[hidden] { display: none; }

.vf-hud-top,
.vf-hud-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: calc(var(--u) * 0.5);
}

/* Pinned explicitly: without the row assignment the bottom bar lands in the
   1fr filler row and drifts up the screen in portrait. */
.vf-hud-top { grid-row: 1; align-items: start; }
.vf-hud-bottom { grid-row: 3; align-items: end; }
.vf-hud-tools { display: flex; gap: calc(var(--u) * 0.4); justify-self: end; }

.vf-scoreboard {
  display: flex;
  align-items: stretch;
  justify-self: center;
  background: var(--vf-paper);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-hard), 0 calc(var(--vf-lift) + 6px) 16px rgba(20, 12, 4, 0.28);
  overflow: hidden;
}

.vf-sb-side {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.4);
  padding: calc(var(--u) * 0.42) calc(var(--u) * 0.7) calc(var(--u) * 0.32);
  perspective: 400px;
}

.vf-sb-side::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: max(4px, calc(var(--u) * 0.3));
  background: var(--sb-team);
}

.vf-sb-side[data-team="1"] { flex-direction: row-reverse; }
.vf-sb-jersey .vf-jersey { width: calc(var(--u) * 1.55); }
.vf-sb-name {
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-2);
}

.vf-sb-num {
  font-size: var(--fs-xl);
  font-weight: 900;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  min-width: 0.85em;
  text-align: center;
}

.vf-sb-side.is-flip .vf-sb-num { animation: vf-flip 0.42s ease-in-out; }

.vf-sb-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.1);
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.75);
  background: var(--vf-paper-2);
  border-left: var(--vf-edge) solid var(--vf-ink);
  border-right: var(--vf-edge) solid var(--vf-ink);
}

.vf-sb-clock {
  font-size: var(--fs-sm);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.vf-sb-phase { display: flex; height: calc(var(--u) * 1.1); }
.vf-sb-phase .vf-ic { width: calc(var(--u) * 1.05); color: var(--vf-ink-2); }

.vf-rodwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(3px, calc(var(--u) * 0.24));
  transition: opacity 0.25s ease;
}

.vf-rodstrip { display: flex; gap: calc(var(--u) * 0.3); }

.vf-pip {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vf-tap);
  min-height: var(--vf-tap);
  padding: calc(var(--u) * 0.25) calc(var(--u) * 0.3);
  color: var(--vf-ink-2);
  background: rgba(255, 246, 227, 0.86);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.14s ease, box-shadow 0.12s ease;
}

.vf-pip .vf-pip-glyph { width: max(36px, calc(var(--u) * 2.6)); height: auto; fill: currentColor; }

.vf-pip.is-active {
  background: var(--vf-sun);
  color: var(--vf-ink);
  transform: translateY(calc(var(--vf-lift) * -1));
  box-shadow: 0 calc(var(--vf-lift) * 2) 0 var(--vf-ink);
}

.vf-rodlabel {
  padding: max(2px, calc(var(--u) * 0.14)) calc(var(--u) * 0.55);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vf-paper);
  background: var(--vf-ink);
  border-radius: var(--vf-r);
}

.vf-rodlabel:empty { display: none; }

.vf-hudhint { justify-self: start; transition: opacity 0.8s ease; }
.vf-hudhint--right { justify-self: end; }
.vf-hudhint:empty { display: none; }
.vf-hudhint.is-faded { opacity: 0.34; }
.vf-hudhint .vf-hints { gap: calc(var(--u) * 0.35); flex-wrap: nowrap; }
.vf-hudhint .vf-hintgroup { gap: max(2px, calc(var(--u) * 0.16)); }
.vf-hudhint .vf-hintgroup-tag { padding: 1px calc(var(--u) * 0.4); }
.vf-hudhint .vf-hint {
  padding: calc(var(--u) * 0.28) calc(var(--u) * 0.42);
  background: rgba(255, 246, 227, 0.9);
  gap: calc(var(--u) * 0.15);
}
.vf-hudhint .vf-diagram { height: calc(var(--u) * 2.1); }
.vf-hudhint .vf-key { min-width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }

/* Get the bottom furniture out of the way while a replay plays. */
.vf-hud[data-phase="replay"] .vf-rodwrap,
.vf-hud[data-phase="replay"] .vf-hudhint,
.vf-hud[data-phase="over"] .vf-rodwrap { opacity: 0; }

.vf-root[data-tension="on"] .vf-scoreboard { animation: vf-throb 2.2s ease-in-out infinite; }

/* ------------------------------------------------------------------
   12. Pause
   ------------------------------------------------------------------ */

.vf-pausegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: calc(var(--u) * 0.5);
  margin-bottom: calc(var(--u) * 0.7);
}

.vf-pausegrid .vf-btn--primary { grid-column: 1 / -1; }

/* ------------------------------------------------------------------
   13. Goal
   ------------------------------------------------------------------ */

.vf-goal {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  pointer-events: none;
}

.vf-goal-banner {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.25);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2);
  text-align: center;
  background: var(--vf-paper);
  border: max(5px, calc(var(--u) * 0.36)) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-card);
  animation: vf-pop 0.34s cubic-bezier(0.16, 1.5, 0.4, 1) both;
}

.vf-goal-word {
  font-size: var(--fs-huge);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--goal-team, var(--team-a));
  -webkit-text-stroke: max(4px, calc(var(--u) * 0.3)) var(--vf-ink);
  paint-order: stroke fill;
}

.vf-goal-line {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.7);
}

.vf-goal-team {
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vf-ink-2);
}

.vf-goal-score {
  font-size: var(--fs-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.vf-goal-score i { font-style: normal; padding: 0 0.14em; color: var(--vf-ink-2); }

.vf-goal-scorer {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.3);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--vf-ink-2);
}

.vf-goal-scorer .vf-ic { width: calc(var(--u) * 1.2); color: var(--vf-sun); }

.vf-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.vf-confetti i {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: var(--sz);
  height: var(--sz);
  background: var(--c);
  border: 2px solid rgba(30, 20, 10, 0.45);
  transform: rotate(var(--r));
  animation: vf-fall 2.1s linear var(--d) forwards;
}

/* ------------------------------------------------------------------
   14. Replay
   ------------------------------------------------------------------ */

.vf-replay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  justify-items: center;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  pointer-events: none;
}

.vf-replay-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  width: min(100%, 660px);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 0.5);
  background: var(--vf-paper);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-hard);
}

.vf-replay-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.3);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vf-replay-tag .vf-ic { width: calc(var(--u) * 1.2); color: var(--vf-ink-2); }

.vf-replay-track {
  flex: 1;
  min-width: 0;
  height: max(12px, calc(var(--u) * 0.9));
  background: var(--vf-paper-3);
  border: max(2px, calc(var(--u) * 0.16)) solid var(--vf-ink);
  border-radius: 2px;
  overflow: hidden;
}

.vf-replay-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--vf-sun);
  transition: width 0.1s linear;
}

/* ------------------------------------------------------------------
   15. Match point
   ------------------------------------------------------------------ */

.vf-matchpoint {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: calc(var(--pad-t) + var(--u) * 5.2) var(--pad-r) 0 var(--pad-l);
  pointer-events: none;
}

.vf-mp-banner {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 0.9);
  color: var(--vf-paper);
  background: var(--vf-ink);
  border-radius: var(--vf-r);
  border-left: max(8px, calc(var(--u) * 0.6)) solid var(--mp-team, var(--team-a));
  box-shadow: 0 var(--vf-lift) 0 rgba(0, 0, 0, 0.45);
  transform-origin: top center;
  animation: vf-pop 0.36s cubic-bezier(0.16, 1.5, 0.4, 1) both;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.vf-mp-glyph .vf-ic { width: calc(var(--u) * 1.4); color: var(--vf-sun); }
.vf-mp-word { font-size: var(--fs-lg); font-weight: 900; letter-spacing: 0.12em; }
.vf-mp-team {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

.vf-matchpoint.is-compact .vf-mp-banner { transform: scale(0.66); opacity: 0.88; }

/* ------------------------------------------------------------------
   16. Final
   ------------------------------------------------------------------ */

.vf-final {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.55);
}

.vf-final-trophy .vf-ic {
  width: max(56px, calc(var(--u) * 5));
  color: var(--vf-sun);
  filter: drop-shadow(0 max(3px, calc(var(--u) * 0.2)) 0 var(--vf-ink));
}

.vf-screen[data-screen="final"] .vf-panel-title {
  font-size: var(--fs-xl);
  color: var(--vf-ink);
}

.vf-final-score { display: flex; align-items: center; gap: calc(var(--u) * 0.8); }

.vf-final-side {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.15);
  min-width: max(84px, calc(var(--u) * 6));
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.9);
  background: var(--vf-paper-2);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
}

.vf-final-side[data-winner="true"] {
  background: var(--vf-sun);
  box-shadow: var(--shadow-hard);
}

.vf-final-jersey .vf-jersey { width: max(28px, calc(var(--u) * 2.2)); }
.vf-final-num { font-size: var(--fs-title); font-weight: 900; line-height: 1; }
.vf-final-name {
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-2);
}
.vf-final-colon { font-size: var(--fs-lg); font-weight: 900; color: var(--vf-ink-2); }
.vf-final-note { font-size: var(--fs-sm); color: var(--vf-ink-2); text-align: center; }

/* ------------------------------------------------------------------
   17. Attract
   ------------------------------------------------------------------ */

.vf-attract { position: absolute; inset: 0; pointer-events: none; }

.vf-attract-mark {
  position: absolute;
  top: var(--pad-t);
  left: var(--pad-l);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  padding: calc(var(--u) * 0.28) calc(var(--u) * 0.6);
  color: var(--vf-paper);
  background: rgba(30, 20, 10, 0.62);
  border-radius: var(--vf-r);
}

.vf-attract-emblem .vf-pitchmark {
  width: calc(var(--u) * 3);
  border-width: max(2px, calc(var(--u) * 0.14));
  box-shadow: none;
}

.vf-attract-word {
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vf-attract-score {
  position: absolute;
  top: var(--pad-t);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  padding: calc(var(--u) * 0.28) calc(var(--u) * 0.8);
  color: var(--vf-paper);
  background: rgba(30, 20, 10, 0.62);
  border-radius: var(--vf-r);
}

.vf-attract-num { font-size: var(--fs-md); font-weight: 900; font-variant-numeric: tabular-nums; }
.vf-attract-score .vf-jersey { width: calc(var(--u) * 1.3); }

.vf-attract-cta {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pad-b) + var(--u) * 0.5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.5);
}

.vf-attract-cta .vf-btn--primary { animation: vf-breathe 2.4s ease-in-out infinite; }

.vf-attract-inputs {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8);
  color: var(--vf-paper);
  background: rgba(30, 20, 10, 0.7);
  border-radius: var(--vf-r);
}

.vf-attract-inputs .vf-ic { width: max(26px, calc(var(--u) * 2)); height: auto; }

.vf-attract-cap {
  position: absolute;
  right: var(--pad-r);
  bottom: var(--pad-b);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--vf-paper);
  text-shadow: 0 2px 0 rgba(30, 20, 10, 0.8);
}

/* ------------------------------------------------------------------
   18. Toast + rotate
   ------------------------------------------------------------------ */

.vf-toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pad-b) + var(--u) * 5.4);
  transform: translate(-50%, calc(var(--u) * 0.7));
  max-width: min(88%, 520px);
  padding: calc(var(--u) * 0.4) calc(var(--u) * 0.9);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-align: center;
  color: var(--vf-paper);
  background: var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: 0 var(--vf-lift) 0 rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.vf-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.vf-toast:empty { display: none; }

.vf-rotate {
  position: absolute;
  inset: 0;
  display: none;
  align-content: end;
  justify-items: center;
  padding: var(--pad-t) var(--pad-r) calc(var(--pad-b) + var(--u) * 1.5) var(--pad-l);
  background: linear-gradient(180deg, rgba(30, 20, 10, 0) 45%, rgba(30, 20, 10, 0.6));
  pointer-events: none;
}

.vf-rotate-card {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1);
  background: var(--vf-paper);
  border: var(--vf-edge) solid var(--vf-ink);
  border-radius: var(--vf-r);
  box-shadow: var(--shadow-hard);
  pointer-events: none;
}

.vf-rotate-art .vf-ic {
  width: calc(var(--u) * 3.4);
  height: auto;
  animation: vf-tip 2.6s ease-in-out infinite;
}

.vf-rotate-cap {
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (orientation: portrait) and (max-width: 900px) {
  .vf-root:not([data-rotate="off"]) .vf-rotate { display: grid; }
}

.vf-root[data-rotate="on"] .vf-rotate { display: grid; }

/* ------------------------------------------------------------------
   19. Animation
   ------------------------------------------------------------------ */

@keyframes vf-pop {
  from { transform: scale(0.82); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes vf-flip {
  0% { transform: rotateX(0deg); }
  45% { transform: rotateX(-88deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes vf-fall {
  to { transform: translateY(118vh) rotate(calc(var(--r) + 260deg)); opacity: 0.15; }
}

@keyframes vf-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--u) * -0.28)); }
}

@keyframes vf-throb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes vf-tension {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes vf-tip {
  0%, 60%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-16deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vf-root *,
  .vf-root *::before,
  .vf-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.vf-root[data-reduced-motion="on"] *,
.vf-root[data-reduced-motion="on"] *::before,
.vf-root[data-reduced-motion="on"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ------------------------------------------------------------------
   20. Tight viewports
   ------------------------------------------------------------------ */

/* Phone landscape: 844x390 and 740x360. */
@media (max-height: 460px) {
  .vf-hudhint .vf-hint-cap { display: none; }
  .vf-hint { padding: calc(var(--u) * 0.35) calc(var(--u) * 0.5); }
  .vf-panel { gap: calc(var(--u) * 0.55); padding: calc(var(--u) * 0.7) calc(var(--u) * 0.9); }
  .vf-field { padding: 0 calc(var(--u) * 0.3); }
  .vf-field-note { display: none; }
  .vf-choices--dense .vf-choice { padding: calc(var(--u) * 0.3) calc(var(--u) * 0.25); }
  .vf-goal-banner { padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4); }
  .vf-final-trophy .vf-ic { width: calc(var(--u) * 3.2); }
}

@media (max-width: 780px) and (max-height: 420px) {
  .vf-sb-name { display: none; }
  .vf-attract-word { display: none; }
}

/* Two seats in a short landscape: shed the KICK card first — slide and spin
   are what a newcomer has to find, and two groups of three will not sit in the
   corners of a 360px-tall screen without colliding. */
@media (max-height: 460px) {
  .vf-root[data-seats="2"] .vf-hintgroup .vf-hint:nth-child(n + 3) { display: none; }
}

/* Narrow: drop the left spacer so the scoreboard can never collide with the
   mute/pause cluster. */
@media (max-width: 620px) {
  .vf-sb-name { display: none; }
  .vf-attract-word { display: none; }
  .vf-hud-top { grid-template-columns: minmax(0, 1fr) auto; }
  .vf-hud-spacer { display: none; }
  .vf-scoreboard { justify-self: start; }
}

/* Portrait phone: the game keeps running behind the rotate card. */
@media (orientation: portrait) and (max-width: 900px) {
  .vf-title { grid-template-columns: 1fr; }
  .vf-title-right .vf-hints { flex-direction: column; align-items: stretch; }
  .vf-title-right .vf-hint {
    flex-direction: row;
    justify-content: flex-start;
    gap: calc(var(--u) * 0.9);
  }
  /* Leave room under the HUD for the rotate card. */
  .vf-hud { padding-bottom: calc(var(--pad-b) + var(--u) * 5.4); }
  .vf-hud-bottom { grid-template-columns: 1fr; justify-items: center; gap: calc(var(--u) * 0.4); }
  .vf-hudhint { justify-self: center; }
  .vf-toast { bottom: calc(var(--pad-b) + var(--u) * 10); }
  .vf-attract-cta { bottom: calc(var(--pad-b) + var(--u) * 6.6); }
  .vf-attract-cap { bottom: calc(var(--pad-b) + var(--u) * 6.6); }
  .vf-panel-actions { flex-direction: column; }
  .vf-panel-actions .vf-btn { width: 100%; max-width: none; }
  .vf-field { grid-template-columns: 1fr; gap: calc(var(--u) * 0.25); }
  .vf-field-control { justify-content: flex-start; }
}