/* css/landing.css
   LANDING - the front page at /projects/apps/gaffer-iq/ ("Matchnight
   Scoreboard", ported from the design export's FINAL - Landing page.html).
   Behaviour lives in js/modules/landing.js; markup in index.html.

   Every rule is nested under `.landing`, so nothing here can reach a module
   view, and the design's short class names (.top, .board, .chip, .btn …) stay
   local to this section. The colour, radius and band tokens are base.css's
   own - the design export copied them verbatim - so only the values the
   landing alone needs are declared below, on the section itself. Two
   scope-level re-points (CONVENTIONS.md §5.2): Tough reads orange here. */

@property --v { syntax: '<number>'; inherits: true; initial-value: 0; }

@keyframes landing-tick { to { transform: translateX(-50%); } }

/* Failsafe for the intro pre-state below: if the intro never claims the page
   (script failed, GSAP blocked), everything shows after 4s regardless. */
@keyframes landing-unhide { to { visibility: visible; } }

/* The landing is a full-viewport, non-scrolling composition. */
body:has(.landing.is-active) {
  overflow: hidden;
  background: #0a0d12;
}

.landing {
  /* landing-only values */
  --pad: var(--landing-pad);
  --col: min(1240px, calc(100vw - 2 * var(--pad)));
  --light: 244, 248, 253;               /* --band-silver as an rgb triple, for alpha */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --landing-floor: #121820;
  --landing-line: rgba(230, 237, 243, .10);
  --landing-press: #c9d1d9;
  --landing-ink-muted: #57606a;          /* muted text on the light ticker */
  --band-tough: var(--band-orange);
  --band-tough-bg: var(--band-orange-bg);

  /* scoreboard depth/feel - tune here and in CFG (landing.js) */
  --sb-depth: clamp(16px, 2.6vw, 38px);
  --sb-recess: 14px;
  --sb-lift: 10px;
  --sb-hover: 5px;
  --sb-persp: clamp(900px, 160vw, 2400px);

  line-height: normal;

  /* Intro pre-state: hidden until the timeline owns them, so nothing paints
     and then snaps back. landing.js adds .is-live once it takes over. */
  @media (prefers-reduced-motion: no-preference) {
    &:not(.is-live) :is(.top, .ticker, #rig, #cast, .headline .ln > span, .intro > *, .modules, .foot, .bank, .beam, #lit) {
      visibility: hidden;
      animation: landing-unhide 0s 4s forwards;
    }
  }

  [data-band=excellent] { --b: var(--band-excellent); --bb: var(--band-excellent-bg); }
  [data-band=great]     { --b: var(--band-great);     --bb: var(--band-great-bg); }
  [data-band=good]      { --b: var(--band-good);      --bb: var(--band-good-bg); }
  [data-band=neutral]   { --b: var(--band-neutral);   --bb: var(--band-neutral-bg); }
  [data-band=tough]     { --b: var(--band-tough);     --bb: var(--band-tough-bg); }
  [data-band=brutal]    { --b: var(--band-brutal);    --bb: var(--band-brutal-bg); }

  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  a { color: var(--color-accent); }
  a:hover { color: var(--color-text); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nowrap { white-space: nowrap; }

  .page { position: relative; isolation: isolate; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; --chrome: clamp(88px, 12dvh, 120px); }

  /* floodlights */
  .lights { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .bank { position: absolute; top: calc(var(--chrome) + clamp(4px, 1dvh, 12px)); display: grid; grid-template-columns: repeat(5, var(--l)); gap: 3px; padding: 4px; background: var(--band-black); border: 1px solid var(--color-border-subtle); --l: clamp(5px, .5vw, 10px); z-index: 2; }
  .bank--l { left: 19%; transform: translateX(-50%) rotate(12deg); }
  .bank--r { right: 19%; transform: translateX(50%) rotate(-12deg); }
  .lamp { width: var(--l); height: var(--l); border-radius: 1px; background: var(--band-silver); box-shadow: 0 0 6px rgba(var(--light), .9), 0 0 16px rgba(var(--light), .35); }
  .beam { position: absolute; top: calc(var(--chrome) + clamp(10px, 2dvh, 22px)); width: 170vmax; height: 150vmax; transform-origin: 50% 0; mix-blend-mode: screen;
    background: conic-gradient(from 165deg at 50% 0%, transparent 0deg, rgba(var(--light), .07) 9deg, rgba(var(--light), .15) 15deg, rgba(var(--light), .07) 21deg, transparent 30deg, transparent 360deg);
    /* mask luminance, not painted colour */
    -webkit-mask-image: radial-gradient(70% 62% at 50% 0%, #000 8%, rgba(0, 0, 0, .5) 42%, transparent 78%); mask-image: radial-gradient(70% 62% at 50% 0%, #000 8%, rgba(0, 0, 0, .5) 42%, transparent 78%); }
  .beam--l1 { left: 19%; transform: translateX(-50%) rotate(-24deg); }
  .beam--l2 { left: 19%; transform: translateX(-50%) rotate(-40deg); opacity: .6; }
  .beam--r1 { right: 19%; transform: translateX(50%) rotate(24deg); }
  .beam--r2 { right: 19%; transform: translateX(50%) rotate(40deg); opacity: .6; }
  .floor { position: absolute; left: 50%; bottom: -14dvh; width: max(140vw, 900px); height: 62dvh; transform: translateX(-50%);
    background: radial-gradient(46% 52% at 50% 46%, rgba(var(--light), .06), transparent 70%), radial-gradient(60% 70% at 50% 50%, var(--landing-floor), transparent 72%); }
  .floor svg { position: absolute; left: 50%; top: 6%; width: min(1500px, 120vw); transform: translateX(-50%) perspective(900px) rotateX(68deg); transform-origin: 50% 0; }
  .floor svg * { fill: none; stroke: var(--landing-line); stroke-width: 2; }
  .vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 30%, transparent 50%, rgba(0, 0, 0, .55) 100%); }

  /* chrome */
  .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--landing-top-pad) var(--pad); position: relative; z-index: 3; }
  .wordmark { font-weight: 800; font-size: 16px; letter-spacing: -.01em; color: var(--color-text); text-decoration: none; }
  .wordmark:hover { color: var(--color-text); }
  .wordmark:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; }
  .top__meta { font-size: 12px; font-weight: 600; color: var(--color-muted); }

  .main { padding: 0 max(var(--pad), calc((100vw - 1240px) / 2)); min-height: 0; min-width: 0; display: grid; align-content: center; gap: clamp(14px, 3.2dvh, 44px); }

  /* scoreboard - a hanging, floodlit split-flap object */
  .rigwrap { position: relative; }
  .cast { position: absolute; left: 4%; right: 4%; top: calc(100% - 10px); height: clamp(40px, 8dvh, 96px); z-index: -1; pointer-events: none; }
  .cast i { position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 30%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .26) 45%, transparent 75%); will-change: transform; }
  .rig { position: relative; perspective: var(--sb-persp); perspective-origin: 50% 220%; }
  .hang, .obj, .tilt { transform-style: preserve-3d; }
  .obj { transform-origin: 50% calc(-1 * var(--cable, 40px)); }
  .tilt { will-change: transform; }
  .cable { position: absolute; bottom: 100%; width: 2px; height: var(--cable, 40px); background: linear-gradient(90deg, var(--color-bg), var(--color-border) 55%, var(--color-bg)); transform: translateZ(calc(var(--sb-depth) * -.5)); }
  .cable--l { left: 17%; }
  .cable--r { right: 17%; }
  .cable::after { content: ""; position: absolute; left: -5px; bottom: -1px; width: 12px; height: 5px; background: var(--color-border-subtle); border-top: 1px solid var(--color-border); border-radius: 1px 1px 0 0; }
  .board { position: relative; display: block; transform-style: preserve-3d; padding: var(--bz) var(--bz) var(--bzb); border-radius: var(--radius-sm); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; --bz: clamp(5px, .55vw, 9px); --bzb: clamp(12px, 1.6dvh, 16px); --pv: clamp(10px, 1.9dvh, 22px); --ph: clamp(12px, 2vw, 30px); }
  .board:focus-visible .bezel { outline: 2px solid var(--color-accent); outline-offset: 3px; }
  .side, .back { position: absolute; pointer-events: none; }
  .side--t { left: 0; right: 0; top: 0; height: var(--sb-depth); transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(90deg, var(--color-border-subtle), var(--color-border) 18%, var(--color-surface-raised) 50%, var(--color-border) 82%, var(--color-border-subtle)); }
  .side--b { left: 0; right: 0; bottom: 0; height: var(--sb-depth); transform-origin: 50% 100%; transform: rotateX(90deg); background: linear-gradient(0deg, var(--color-surface), var(--band-black) 55%); }
  .side--l { top: 0; bottom: 0; left: 0; width: var(--sb-depth); transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, var(--color-surface), var(--color-bg)); }
  .side--r { top: 0; bottom: 0; right: 0; width: var(--sb-depth); transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, var(--color-surface), var(--color-bg)); }
  .back { inset: 0; transform: translateZ(calc(var(--sb-depth) * -1)); background: var(--color-bg); border-radius: var(--radius-sm); }
  .screen { position: relative; display: grid; gap: clamp(8px, 1.7dvh, 18px); padding: max(2px, calc(var(--pv) - var(--bz) - 4px)) calc(var(--ph) - var(--bz)) max(2px, calc(var(--pv) - var(--bzb))); background: var(--band-black); box-shadow: 0 0 0 8px var(--band-black); transform: translateZ(calc(var(--sb-recess) * -1)); transform-style: preserve-3d; }
  .lit { position: absolute; inset: 0; pointer-events: none; transform: translateZ(calc(var(--sb-recess) * -1 + .5px)); background: radial-gradient(42% 90% at 14% -6%, rgba(var(--light), .07), transparent 70%), radial-gradient(42% 90% at 86% -6%, rgba(var(--light), .07), transparent 70%), linear-gradient(180deg, rgba(var(--light), .035), transparent 40%); }
  .bezel { position: absolute; inset: 0; border-style: solid; border-width: var(--bz) var(--bz) var(--bzb); border-color: var(--color-surface-raised) var(--color-surface) var(--color-bg); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--color-border-subtle), inset 0 0 0 1px var(--band-black), inset 0 3px 4px rgba(0, 0, 0, .6); pointer-events: none; }
  .bezel::before { content: ""; position: absolute; top: calc(-1 * var(--bz)); left: 6px; right: 6px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--light), .22) 16%, rgba(var(--light), .07) 50%, rgba(var(--light), .22) 84%, transparent); }
  .edge { position: absolute; top: calc(-1 * var(--bz)); left: 0; width: 28%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--light), .38), transparent); opacity: 0; }
  .bezel__row { position: absolute; left: calc(-1 * var(--bz)); right: calc(-1 * var(--bz)); bottom: calc(-1 * var(--bzb)); height: var(--bzb); display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 max(3px, calc(var(--bz) - 2px)); }
  .fix { width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--band-black) 45%, var(--color-border) 82%); box-shadow: 0 1px 0 rgba(var(--light), .06); }
  .plate { display: flex; align-items: center; height: calc(var(--bzb) - 5px); padding: 0 8px; background: var(--color-bg); border-radius: 1px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8), 0 1px 0 rgba(var(--light), .05); font: 700 8px/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); }
  .vent { justify-self: end; width: clamp(36px, 7%, 84px); height: max(3px, calc(var(--bzb) - 8px)); background: repeating-linear-gradient(90deg, var(--band-black) 0 2px, transparent 2px 4px); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .6); }
  .glass { position: absolute; inset: var(--bz) var(--bz) var(--bzb); overflow: hidden; pointer-events: none; transform: translateZ(1px); background: linear-gradient(180deg, rgba(var(--light), .025), transparent 26%); }
  .sheen { position: absolute; top: -20%; bottom: -20%; left: 34%; width: 22%; background: linear-gradient(100deg, transparent, rgba(var(--light), .03) 40%, rgba(var(--light), .045) 50%, transparent 62%); }
  .spec { position: absolute; left: 0; top: 0; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--light), .055), transparent); opacity: 0; }
  .board__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
  .board__meta .l0 { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .board__meta .r { display: flex; align-items: center; gap: 10px; }
  .board__meta b { color: var(--color-text); letter-spacing: .06em; }
  .lampi { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); }
  .lampi i { width: 7px; height: 7px; border-radius: 1px; background: var(--band-silver); box-shadow: 0 0 0 1px var(--band-black), 0 0 6px rgba(var(--light), .55); transition: opacity .3s; }
  .lampi.is-off i { opacity: .25; }
  .bbtn { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border: 1px solid var(--color-border); border-radius: 3px; background: var(--color-bg); color: var(--color-muted); font: 700 10px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .15s, border-color .15s; }
  .bbtn::before { content: ""; position: absolute; inset: -7px -4px; }
  .bbtn:hover { color: var(--color-text); border-color: var(--color-muted); }
  .bbtn[aria-pressed=true] { color: var(--color-text); border-color: var(--color-accent); }
  .bbtn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .board__main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 2.4vw, 40px); transform-style: preserve-3d; }
  .team { display: grid; grid-auto-flow: column; align-items: center; justify-content: end; gap: clamp(10px, 1.6vw, 26px); transform-style: preserve-3d; }
  .team--away { justify-content: start; }
  #hcode, #acode, .team__score { transform: translateZ(var(--sb-lift)); }
  .team__score { display: grid; justify-items: center; gap: clamp(6px, 1dvh, 10px); }
  .board__v { font: 600 clamp(14px, 2.2dvh, 22px)/1 var(--font-head); color: var(--color-muted); letter-spacing: .05em; text-transform: uppercase; }
  .flaps { display: inline-flex; gap: .06em; }
  .f-lg { font-size: clamp(2.6rem, min(6vw, 10dvh), 6.8rem); }
  .f-md { font-size: clamp(1.5rem, min(3.4vw, 5.6dvh), 3.8rem); }
  .f-sm { font-size: clamp(1.05rem, min(1.9vw, 3.1dvh), 2rem); }
  .f-xs { font-size: 15px; }
  .team__score .flaps { color: var(--b); }
  .flap { position: relative; display: inline-block; width: .86em; height: 1.06em; font-family: var(--font-score); letter-spacing: 0; font-weight: 700; line-height: 1; perspective: 3.2em; }
  .flap .h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .flap .t { top: 0; background: var(--color-surface-raised); border-radius: .06em .06em 0 0; }
  .flap .b { bottom: 0; background: var(--color-surface); border-radius: 0 0 .06em .06em; }
  .flap .h i { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 1.3em; line-height: 1; }
  .flap .t i { top: 0; }
  .flap .b i { bottom: 0; }
  .flap s { position: absolute; inset: 0; background: var(--band-black); opacity: 0; text-decoration: none; pointer-events: none; }
  .flap .b s { background: linear-gradient(var(--band-black), transparent 90%); }
  .flap .leaf { position: absolute; left: 0; right: 0; top: 0; height: 50%; transform-style: preserve-3d; transform-origin: 50% 100%; z-index: 2; }
  .flap .leaf .h { height: 100%; }
  .flap .leaf .bk { background: var(--color-surface); transform: rotateX(180deg); }
  .flap .leaf .bk i { top: auto; bottom: 0; }
  .flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: max(1px, .03em); background: var(--band-black); z-index: 3; }
  .flap::before { content: ""; position: absolute; left: -.035em; right: -.035em; top: calc(50% - .05em); height: .1em; background: linear-gradient(90deg, var(--color-border) 0 .05em, transparent .05em calc(100% - .05em), var(--color-border) calc(100% - .05em)); z-index: 4; }
  .chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 700; color: var(--b); background: var(--bb); box-shadow: inset 0 0 0 1px var(--b); }
  .chip.is-off { opacity: 0; }
  .board__metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1.2vw, 18px); padding-top: clamp(8px, 1.6dvh, 16px); border-top: 1px solid var(--color-border-subtle); list-style: none; padding-left: 0; transform-style: preserve-3d; }
  .cell { display: grid; justify-items: start; gap: 6px; min-width: 0; transform: translateZ(var(--sb-lift)); transition: transform .3s var(--ease); }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cell:hover { transform: translateZ(calc(var(--sb-lift) + var(--sb-hover))); }
  }
  .cell__l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cell__l .s { display: none; }
  .cell__bar { display: block; width: 100%; height: 3px; background: var(--color-surface-raised); overflow: hidden; }
  .cell__bar i { display: block; height: 100%; background: var(--b); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform .6s var(--ease); }
  .board__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--color-muted); }
  .board__foot b { display: inline-flex; align-items: center; vertical-align: middle; height: 22px; padding: 0 3px; margin-left: 6px; border-radius: var(--radius-sm); background: var(--color-surface-raised); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text); }

  .headline { font: 400 clamp(2.52rem, min(calc(var(--col) / 11.2), 12.72dvh), 8.88rem)/.94 var(--font-team); text-transform: uppercase; letter-spacing: .04em; }
  .headline .ln { display: block; overflow: hidden; padding: .02em 0 .04em; }
  .headline .ln > span { display: inline-block; }
  .headline .l1 { color: var(--color-muted); }
  .strike { position: relative; display: inline-block; white-space: nowrap; }
  .strike__bar { position: absolute; left: -6%; right: -8%; top: 47%; height: .11em; transform: rotate(-14deg); pointer-events: none; }
  .strike__bar i { display: block; height: 100%; background: var(--band-red); transform-origin: left center; }

  .lower { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 56px); align-items: end; }
  .intro { display: grid; gap: clamp(12px, 2.2dvh, 24px); }
  .sub { max-width: 44ch; font-size: clamp(15px, calc(.35vw + .5dvh + 8px), 19px); line-height: 1.5; color: var(--color-muted); text-wrap: pretty; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
  .magnet { display: inline-block; transition: transform .35s var(--ease); }
  .btn { display: inline-flex; align-items: center; justify-content: center; height: clamp(50px, 6.6dvh, 64px); padding: 0 clamp(24px, 2.4vw, 40px); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, box-shadow .25s, transform .1s; }
  .btn--primary { background: var(--color-accent); color: var(--color-bg); font: 600 clamp(18px, 2.4dvh, 24px)/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
  .btn--primary:hover { background: var(--band-silver); color: var(--color-bg); box-shadow: 0 0 0 6px rgba(88, 166, 255, .22); }
  .btn--primary:active { transform: translateY(2px); background: var(--landing-press); box-shadow: none; }
  .btn:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
  .btn--ghost { height: clamp(46px, 5.8dvh, 56px); background: none; border: 1px solid var(--color-border); color: var(--color-text); font: 600 15px/1 var(--font-sans); }
  .btn--ghost:hover { border-color: var(--color-muted); background: var(--color-surface); color: var(--color-text); }
  .btn--ghost:active { transform: translateY(1px); }

  .modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-border-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); overflow: hidden; perspective: 900px; }
  .mod { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: clamp(10px, 1.7dvh, 18px) clamp(12px, 1.4vw, 20px); background: var(--band-black); color: var(--color-text); text-decoration: none; transition: background-color .15s; }
  .mod:hover { background: var(--color-surface); color: var(--color-text); }
  .mod:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .mod__read { grid-row: span 2; display: grid; place-items: center; min-width: 3.4em; height: 2.3em; padding: 0 .4em; background: var(--color-surface-raised); border-radius: 3px; font: 700 clamp(18px, 2.38dvh, 23px)/1 var(--font-score); letter-spacing: 0; color: var(--color-text); font-variant-numeric: tabular-nums; transition: color .15s, background-color .15s; }
  .mod:hover .mod__read, .mod:focus-visible .mod__read { background: var(--color-accent); color: var(--color-bg); }
  .mod__name { font: 600 clamp(16px, 2.2dvh, 22px)/1 var(--font-head); text-transform: uppercase; letter-spacing: .05em; }
  .mod__hint { font-size: 12.5px; line-height: 1.35; color: var(--color-muted); }

  .foot { display: flex; justify-content: space-between; gap: 16px; padding: clamp(8px, 1.4dvh, 16px) max(var(--pad), calc((100vw - 1240px) / 2)); font-size: 11.5px; color: var(--color-muted); }

  /* fixture ticker - doubles as the scoreboard's fixture picker */
  .ticker { position: relative; z-index: 3; display: flex; align-items: stretch; height: clamp(32px, 4.4dvh, 48px); background: var(--color-text); color: var(--color-bg); overflow: hidden; }
  .ticker__tag { flex: none; display: flex; align-items: center; padding: 0 26px 0 var(--pad); background: var(--color-bg); color: var(--color-text); font: 600 clamp(13px, 1.7dvh, 18px)/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); position: relative; z-index: 2; }
  .ticker__view { flex: 1; min-width: 0; overflow: hidden; margin-left: -16px; }
  .ticker__track { display: flex; width: max-content; height: 100%; align-items: center; animation: landing-tick 70s linear infinite; }
  .ticker:hover .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; }
  .tk { position: relative; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 20px; border: 0; background: none; color: inherit; cursor: pointer; font: 400 clamp(17px, 2.28dvh, 24px)/1 var(--font-team); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  .tk::after { content: "/"; margin-left: 20px; color: var(--color-muted); font-size: 1.2em; }
  .tk:hover { background: rgba(13, 17, 23, .06); }
  .tk:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
  .tk__v { color: var(--landing-ink-muted); font-size: .8em; }
  .price { display: inline-flex; align-items: center; height: 1.35em; padding: 0 .55em 0 .4em; background: var(--b); color: var(--color-bg); font-variant-numeric: tabular-nums; clip-path: polygon(0 0, calc(100% - .32em) 0, 100% 50%, calc(100% - .32em) 100%, 0 100%); }
  .price[data-band=neutral] { color: var(--band-silver); }
  .ticker__pause { flex: none; position: relative; z-index: 2; display: flex; align-items: center; padding: 0 var(--pad) 0 30px; background: var(--color-bg); color: var(--color-muted); border: 0; font: 700 11px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); }
  .ticker__pause:hover { color: var(--color-text); }
  .ticker__pause:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }

  .main { padding-top: clamp(6px, 1.6dvh, 24px); padding-bottom: clamp(4px, 1dvh, 12px); }

  /* "How the score works" dialog */
  /* margin: auto restores the UA centring the `* { margin: 0 }` reset strips
     (the design export's dialog opened top-left because of it). */
  dialog { margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--band-black); color: var(--color-text); }
  dialog::backdrop { background: rgba(10, 13, 18, .85); }
  .dlg { padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; }
  .dlg h2 { font: 600 clamp(24px, 3vw, 30px)/1 var(--font-head); text-transform: uppercase; letter-spacing: .05em; }
  .dlg p, .dlg ol { font-size: 14px; line-height: 1.5; color: var(--color-muted); }
  .dlg ol { display: grid; gap: 10px; padding-left: 1.4em; }
  .dlg ol b { color: var(--color-text); }
  .dlg__close { justify-self: start; height: 40px; padding: 0 18px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: none; color: var(--color-text); font: 600 14px var(--font-sans); cursor: pointer; }
  .dlg__close:hover { border-color: var(--color-muted); background: var(--color-surface); }
  .dlg__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  /* ─── Responsive - order matters, later blocks override earlier ones ──── */
  @media (min-aspect-ratio: 1/1) and (max-height: 860px) {
    .mod__hint { display: none; }
    .board__foot span:last-child { display: none; }
  }
  @media (min-aspect-ratio: 1/1) and (max-height: 720px) {
    .board__foot { display: none; }
    .headline { font-size: min(calc(var(--col) / 12.5), 9.6dvh); }
    .main { gap: clamp(8px, 2dvh, 18px); }
  }
  @media (max-width: 640px) {
    .main { padding-top: 16px; }
    .bank--l { left: 30%; }
    .bank--r { right: 30%; }
    .beam--l1, .beam--l2 { left: 30%; }
    .beam--r1, .beam--r2 { right: 30%; }
  }
  @media (max-aspect-ratio: 1/1) {
    .mod__hint { display: none; }
    .board__foot { display: none; }
    .mod { padding: 10px 14px; }
    .main { align-content: start; padding-top: clamp(12px, 2.4dvh, 32px); }
    .headline { font-size: clamp(2.16rem, min(8.88vw, 5.52dvh), 4.32rem); }
  }
  @media (max-width: 640px) {
    .ticker { height: 34px; }
    .main { gap: 12px; }
  }
  @media (max-width: 640px) and (max-height: 700px) {
    .sub { display: none; }
    .screen { gap: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
  }
  @media (min-aspect-ratio: 1/1) and (max-height: 760px) {
    .mod__hint { display: none; }
    .board__foot span:last-child { display: none; }
  }
  @media (min-aspect-ratio: 1/1) and (max-height: 620px) {
    .sub { font-size: 13.5px; line-height: 1.4; max-width: none; }
    .main { gap: clamp(8px, 2dvh, 14px); }
    .board { --pv: 10px; --ph: 16px; }
    .screen { gap: 8px; }
    .board__foot { display: none; }
    .board__metrics { padding-top: 8px; }
    .f-lg { font-size: max(2.2rem, 8dvh); }
    .f-md { font-size: max(1.3rem, 4.6dvh); }
    .headline { font-size: max(2.28rem, 10.8dvh); }
    .lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .btn { height: 46px; }
  }
  @media (max-width: 900px), (max-aspect-ratio: 1/1) {
    .lower { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .headline { font-size: clamp(2.52rem, min(10.32vw, 7.44dvh), 6rem); }
  }
  @media (max-width: 640px) {
    .top__meta { display: none; }
    .bank--l { left: 34%; }
    .bank--r { right: 34%; }
    .beam--l1, .beam--l2 { left: 34%; }
    .beam--r1, .beam--r2 { right: 34%; }
    .main { gap: clamp(10px, 1.8dvh, 20px); }
    .top { padding: 10px var(--pad); }
    .intro { gap: 10px; }
    .lower { gap: 12px; }
    .board { --pv: 10px; --ph: 12px; --bz: 4px; --bzb: 9px; }
    .screen { gap: 8px; }
    .board__meta .l { display: none; }
    .board__meta { justify-content: flex-end; }
    .board__meta .r { width: 100%; justify-content: space-between; }
    .f-lg { font-size: clamp(2rem, min(10.5vw, 6dvh), 3.2rem); }
    .f-md { font-size: clamp(1.1rem, 6vw, 1.6rem); }
    .f-sm { font-size: 1.05rem; }
    .team { grid-auto-flow: row; justify-items: end; gap: 6px; }
    .team--away { justify-items: start; }
    .chip { height: 20px; font-size: 11px; padding: 0 6px; }
    .board__metrics { gap: 6px; padding-top: 8px; }
    .cell__l { font-size: 10px; letter-spacing: .04em; }
    .cell__l .l { display: none; }
    .cell__l .s { display: inline; }
    .board__foot { display: none; }
    .headline { font-size: clamp(2.16rem, min(10.56vw, 5.88dvh), 3.36rem); }
    .sub { font-size: 14px; line-height: 1.4; }
    .btn--ghost { height: auto; padding: 6px 0; border: 0; text-decoration: underline; text-decoration-color: var(--color-border); text-decoration-thickness: 2px; text-underline-offset: 6px; }
    .btn--ghost:hover { background: none; text-decoration-color: var(--color-accent); }
    .mod { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; gap: 6px; }
    .mod__read { grid-row: auto; justify-self: start; height: 1.9em; font-size: 13px; }
    .mod__name { font-size: 15px; }
    .mod__hint { display: none; }
    .foot__aux { display: none; }
  }
  @media (max-width: 640px) and (max-height: 700px) {
    .mod { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    .mod__read { min-width: 2.8em; }
  }
  @media (max-width: 640px) and (max-height: 600px) {
    .sub { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .magnet, .cell__bar i { transition: none; }
    .cell { transition: none; }
  }
  /* board on phones: one compact score row + metrics as a 3×2 grid, inside the old footprint */
  @media (max-width: 640px) {
    .plate { display: none; }
    .board__meta { justify-content: space-between; }
    .board__meta .r { width: auto; gap: 8px; justify-content: flex-end; }
    .bbtn::before { inset: -13px -3px; }
    .board__main { gap: 8px; }
    .team, .team--away { grid-auto-flow: row; grid-template-columns: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; justify-items: center; }
    .team { grid-template-areas: "code score" "chip score"; justify-content: end; }
    .team--away { grid-template-areas: "score code" "score chip"; justify-content: start; }
    .team__score { display: contents; }
    #hcode, #acode { grid-area: code; }
    #hscore, #ascore { grid-area: score; transform: translateZ(var(--sb-lift)); }
    .chip { grid-area: chip; height: 18px; font-size: 10.5px; }
    .f-lg { font-size: clamp(2rem, min(9.8vw, 6dvh), 2.6rem); }
    .f-md { font-size: 17px; }
    .screen { gap: 6px; }
    .board__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; padding-top: 5px; }
    .cell { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 6px; }
    .cell__bar { grid-column: 1 / -1; height: 2px; }
    .f-sm { font-size: 13px; }
  }
}