/* Word Rails Daily — the HTML shell (design handoff Run A: welcome, dare,
   How to play, below the fold, desktop frame). Values are the handoff's,
   in CSS px at 1x. Montserrat only. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/montserrat-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/montserrat-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #2B2841;
  --bg-deep: #211E33;
  --surface: #35324E;
  --board: #413D5E;
  --surface-2: #4D496B;
  --text: #FFFFFF;
  --text-soft: #D4D5EA;
  --text-mute: #C7C9E5;
  --text-faint: #807CA0;
  --cyan: #3CD9F4;
  --mint: #69E9D6;
  --yellow: #FAD961;
  --gold: #F8B81C;
  --cream: #FFFBEE;
  --play-start: #EA66A6;
  --play-end: #F2616B;
  --go: #70DB81; /* the brand's "go" green (WrTokens: PLAY / promotion) */
  --font: Montserrat, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg-deep); color: var(--text); font-family: var(--font); }
body { min-height: 100vh; -webkit-text-size-adjust: 100%; }
a { color: var(--cyan); }
a:hover { color: var(--mint); }
button { font-family: var(--font); }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 3px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* --- Page frame ------------------------------------------------------- */
.page {
  background: radial-gradient(120% 80% at 50% 0%, #322E4C 0%, #2B2841 55%, #211E33 100%);
}
.frame { display: block; }
.gutter { display: none; }
.col {
  position: relative;
  width: 100%;
  /* Wide enough for the board at its game size (it is 91% of a phone's width). */
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 16px 32px;
}
/* The fold fills the screen (less the cookie banner while it's up); when
   it's short, the board window gives up height (never width) so PLAY stays
   on screen. */
.fold { height: max(calc(100svh - 72px - var(--consent-h, 0px)), 560px); display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
.fold > .top, .fold > .cta { flex: none; }

/* --- Lockup + tags ------------------------------------------------------ */
.lockup { display: flex; align-items: center; justify-content: center; gap: 12px; }
.lockup img { height: 56px; width: auto; display: block; }
.tag {
  position: relative; display: inline-flex; align-items: center; flex: none;
  height: 30px; padding: 0 12px 0 15px; background: var(--cream); border-radius: 6px;
  color: var(--bg); font-weight: 900; font-size: 14px; letter-spacing: 0.2em;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.tag::before, .tag::after {
  content: ''; position: absolute; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #2E2B46;
}
.tag::before { left: -5px; }
.tag::after { right: -5px; }
.headline { margin: 0; text-align: center; font-size: 26px; font-weight: 900; line-height: 1.15; text-wrap: balance; }
.top { display: flex; flex-direction: column; gap: 22px; }

/* Ticket number ("No. 12"), md */
.ticket {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  background: var(--bg-deep); border-radius: 8px; color: var(--yellow);
  font-variant-numeric: tabular-nums; flex: none; white-space: nowrap;
}
.ticket .hole { width: 7px; height: 7px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); }
.ticket .no { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
.ticket .n { font-size: 18px; font-weight: 900; letter-spacing: 0.02em; }

/* Streak chip */
.streak {
  align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 40px;
  padding: 0 16px 0 8px; background: var(--surface); border-radius: 999px;
}
.streak img { width: 30px; height: auto; }
.streak .days { font-size: 15px; font-weight: 800; color: var(--yellow); }
.streak .label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-mute); }
/* How yesterday finished: one quiet line under the headline and streak. */
.yesterday { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--text-soft); }
.yesterday strong { color: var(--text); font-weight: 800; }
.yesterday .stamp { width: 30px; height: 30px; }

/* --- Board window ---------------------------------------------------------- */
/* Exactly the game's board: 340 x the match screen's scale (daily.js sets
   --board from the same formula Flutter uses), its #413D5E fill and 4 x scale
   corners. At PLAY it lands on the real board and fades into it. */
.shutter {
  position: relative; width: min(var(--board, 340px), 100%); height: var(--board, 340px);
  min-height: 160px; flex: 0 1 auto; align-self: center; overflow: hidden;
  border-radius: var(--board-r, 4px); background: #413d5e;
}
/* The forest run (design B2) fills the window, cropped at the sides. The
   scene is drawn at 390x340 and scaled to the window's height. */
.forest {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(180deg, #2b2841 0%, #35324e 55%, #35324e 100%);
  --k: 1; /* cover: max(width / 390, height / 340), set by daily.js */
}
.forest .scene {
  position: absolute; left: 50%; top: 50%; width: 390px; height: 340px; overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--k));
  background: linear-gradient(180deg, #2b2841 0%, #35324e 55%, #35324e 100%);
}
/* Behind a fully closed blind nothing moves. */
.shutter.closed .forest * { animation-play-state: paused; }
.window-ticket, .window-status { position: absolute; top: 12px; left: 12px; box-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.window-status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; background: var(--bg-deep);
  border-radius: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--yellow); white-space: nowrap;
}
.window-status small { font-size: 10px; letter-spacing: 0.12em; color: var(--text-mute); }
/* PLAY: the window lands on the board, then fades into the real one. */
.shutter.handoff { position: fixed; z-index: 12; margin: 0; visibility: visible; transform-origin: 0 0; }
.shutter.handoff.moving { transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
.shutter.handoff.fading { transition: opacity 260ms ease; opacity: 0; }
body.handoff .top, body.handoff .cta, body.handoff .appcard, body.handoff .below {
  opacity: 0; transition: opacity 200ms ease;
}
@keyframes pb-scroll { from { transform: translateX(0); } to { transform: translateX(-390px); } }
@keyframes pb-ties { from { background-position: 0 0; } to { background-position: -120px 0; } }
@keyframes pb-chug { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes pb-puff { 0% { transform: translate(0, 0) scale(.35); opacity: 0; } 12% { opacity: .9; } 100% { transform: translate(-110px, -70px) scale(1.7); opacity: 0; } }
@keyframes pb-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
.pb-far { animation: pb-scroll 6.5s linear infinite; }
.pb-mid { animation: pb-scroll 4.33s linear infinite; }
.pb-near { animation: pb-scroll 2.6s linear infinite; }
.pb-cloud { animation: pb-scroll 2.17s linear infinite; }
.pb-ties { animation: pb-ties 1s linear infinite; }
.pb-chug { animation: pb-chug .34s ease-in-out infinite; }
.pb-puff { animation: pb-puff 1.6s ease-out infinite; }
.pb-p2 { animation-delay: .4s; } .pb-p3 { animation-delay: .8s; } .pb-p4 { animation-delay: 1.2s; }
.pb-tw { animation: pb-twinkle 2.4s ease-in-out infinite; }
.pb-tw2 { animation-delay: .8s; } .pb-tw3 { animation-delay: 1.6s; }
.blind {
  position: absolute; left: 0; right: 0; top: 0; height: 52%;
  border-radius: inherit;
  background: repeating-linear-gradient(180deg, #4D496B 0px, #4D496B 11px, #413D5E 11px, #413D5E 13px, #35324E 13px, #35324E 14px);
  box-shadow: 0 8px 14px rgba(0,0,0,0.35);
  transition: height 400ms ease;
}
.blind.up { display: none; }
.blind.low { height: calc(30% - 6px); }
.blind.closed { height: 100%; }
.blind .rail { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--bg-deep); border-radius: 3px; }
.blind .pull { position: absolute; left: 50%; bottom: -12px; width: 30px; height: 12px; margin-left: -15px; background: var(--bg-deep); border-radius: 0 0 8px 8px; }
.blind.closed .pull { display: none; }
.blind .hang { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; flex-direction: column; align-items: center; }
.blind.closed .hang { bottom: auto; top: 50%; transform: translateY(-50%); }
.blind .cord { width: 2px; height: 14px; background: var(--bg-deep); }
.blind .status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; background: var(--bg-deep);
  border-radius: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--yellow); white-space: nowrap;
}
.blind .status small { font-size: 10px; letter-spacing: 0.12em; color: var(--text-mute); }

/* --- Play button (B1) ------------------------------------------------------ */
.cta { display: flex; flex-direction: column; gap: 6px; }
.play {
  position: relative; overflow: hidden; width: 100%; height: 58px; border: none; border-radius: 999px;
  padding: 0 20px; font-weight: 800; font-size: 19px; color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #35324E;
  transition: transform 120ms ease, box-shadow 320ms ease;
}
.play .fill {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(270deg, var(--play-start) 3.62%, var(--play-end) 100%);
  background-size: 358px 100%; background-repeat: no-repeat;
  transition: width 400ms ease;
}
.play .label { position: relative; letter-spacing: 0.1em; }
.play.ready { background: linear-gradient(270deg, var(--play-start) 3.62%, var(--play-end) 100%); box-shadow: 0 0 22px rgba(255,124,124,0.55); }
.play.ready .fill { display: none; }
.play.ready .label { letter-spacing: 0.14em; }
.play.ready.pulse { animation: pulse 320ms cubic-bezier(.34,1.56,.64,1); }
.play.ready:active { transform: scale(0.96); }
.play[aria-disabled="true"] { cursor: progress; }
@keyframes pulse { 50% { transform: scale(1.04); box-shadow: 0 0 36px rgba(255,124,124,0.8); } }
.slow { margin: 4px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-mute); }

.links { display: flex; align-items: center; justify-content: center; gap: 4px; }
.links button {
  height: 44px; padding: 0 12px; background: none; border: none; font-weight: 700; font-size: 15px;
  color: var(--text-soft); cursor: pointer;
}
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
.meta { margin: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-mute); text-wrap: balance; }
.next { margin: 6px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-soft); }
.next img { width: 22px; height: auto; }

/* --- Cards --------------------------------------------------------------- */
.card { background: var(--surface); border-radius: 16px; box-shadow: 0 2px 14px rgba(0,0,0,0.23); }
.result { display: flex; align-items: center; gap: 18px; padding: 18px 20px; }
.result .stamp { width: 96px; height: 96px; flex: none; }
.result .label { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--text-mute); }
.result .score { display: block; font-size: 40px; font-weight: 900; color: var(--gold); line-height: 1.1; }
.result .klass { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-soft); }

.dare { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; }
.dare .avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--cyan); color: var(--bg-deep); font-weight: 900; font-size: 20px;
}
.dare .who { flex: 1; min-width: 0; }
.dare p { margin: 0; }
.dare .line { font-size: 16px; font-weight: 600; color: var(--text-soft); line-height: 1.3; }
.dare .line strong { color: var(--text); font-weight: 800; }
.dare .line strong.score { color: var(--yellow); }
.dare .sub { margin-top: 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.dare .stamp { width: 72px; height: 72px; flex: none; }
.dare.old .stamp { width: 64px; height: 64px; opacity: 0.55; }

.appcard { margin-top: 52px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.appcard .pitch { display: flex; align-items: center; gap: 14px; }
.appcard .pitch img { width: 52px; height: auto; flex: none; }
.appcard .pitch p { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; text-wrap: balance; }
/* The stores' official badges (Apple Marketing Tools SVG, Google Play's
   PNG), unmodified, at the same visible height. Google's PNG carries 41/250
   of transparent padding on every side; the negative margin trims it. */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.badges a { display: inline-flex; height: 48px; border-radius: 8px; line-height: 0; }
.badges a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.badges img { display: block; height: 48px; width: auto; }
.badges img.gp { height: 71.43px; margin: -11.71px; }

/* --- Sheets ------------------------------------------------------------------ */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(20,18,33,0.62); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 430px; max-height: 92vh; overflow-y: auto; background: var(--surface);
  border-radius: 24px 24px 0 0; padding: 20px 20px 24px; position: relative;
}
.sheet h2 { margin: 4px 0 18px; font-size: 22px; font-weight: 900; }
.sheet .close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--board); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sheet .close img { width: 20px; height: 20px; }
.rule { margin: 18px 0; padding: 12px 14px; background: var(--bg-deep); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--text-soft); }
.got-it {
  width: 100%; height: 56px; border: none; border-radius: 999px; background: var(--surface-2); color: var(--text);
  font-size: 17px; font-weight: 800; cursor: pointer;
}

/* --- How to play: the visual tutorial (design Run D) ----------------------
   The handoff's loop (design_handoff_daily_tutorial, 7000 ms): keyframes as
   generated from its timing table, transform + opacity only. The stage is
   300x276 native, scaled by --s (daily.js, the handoff's fit rule). It runs
   only while the dialog is open (.tut-play) and pauses with the tab. */
.tut-scrim { z-index: 30; padding-bottom: var(--consent-h, 0px); }
.tut { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 20px; box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
.tut-head { display: flex; align-items: center; justify-content: space-between; }
.tut-head h2 { margin: 0; font-size: 22px; font-weight: 900; }
.tut-x {
  width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--bg); padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tut-x img { width: 16px; height: 16px; }
.tut-anim { display: flex; justify-content: center; background: var(--bg); border-radius: 16px; padding: 12px 0; }
.tut-fit { width: calc(300px * var(--s, 1)); height: calc(276px * var(--s, 1)); }
.tut-fit > .tut-stage { transform: scale(var(--s, 1)); transform-origin: 0 0; }
.tut-stage { position: relative; width: 300px; height: 276px; }
.tut-stage > * { position: absolute; }
.tut-field { left: 46px; top: 0; width: 208px; height: 204px; border-radius: 8px; background: #413D5E url(art/gameboard.svg) 0 0 / 340px 340px; }
.tut-car { width: 52px; height: 52px; border-radius: 4px; background: var(--bg); }
.tut-car::after { content: ''; position: absolute; left: 4px; top: 4px; width: 42px; height: 42px; box-sizing: border-box; border-radius: 4px; border: 1px solid #413D5F; }
.tut-tile {
  width: 44px; height: 44px; border-radius: 4px; background: var(--cream); color: #404250; z-index: 3;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;
}
.tut-tile.x2 { background: linear-gradient(90deg, #34F4E0, #64ABFA); color: #FFFFFF; z-index: 1; }
.tut-tile.x2 small { position: absolute; right: 3px; top: 1px; font-size: 11px; font-weight: 700; }
.tut-tile.new { z-index: 1; opacity: 0; }
.tut-ring { position: absolute; inset: -3px; border-radius: 6px; box-shadow: inset 0 0 0 3px #1565D8; opacity: 0; }
.tut-tray { left: 20px; top: 218px; width: 260px; height: 58px; border-radius: 4px; background: var(--surface); box-shadow: 0 2px 14px rgba(0,0,0,0.23); overflow: hidden; }
.tut-tray i { position: absolute; inset: 0; background: linear-gradient(90deg, #3DCABB, #70DB81); opacity: 0; }
.tut-check { left: 232px; top: 227px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.tut-check > * { position: absolute; }
.tut-glow { inset: 0; border-radius: 50%; background: rgba(255,255,255,0.13); box-shadow: 0 0 12px 1px rgba(255,255,255,0.4); opacity: 0; }
.tut-check img { width: 18.24px; height: 13.327px; opacity: 0; }
.tut-pop { left: 110px; top: 226px; width: 80px; text-align: center; font-size: 30px; font-weight: 700; color: #FFFFFF; text-shadow: 0 2px 0 rgba(0,0,0,0.35); z-index: 5; opacity: 0; }
.tut-rip { width: 72px; height: 72px; border-radius: 50%; box-shadow: inset 0 0 0 3px #70DB81; opacity: 0; z-index: 6; }
.tut-hand { left: -25.6px; top: -9.1px; width: 59.5px; height: auto; transform-origin: 25.6px 9.1px; opacity: 0; z-index: 7; }
/* Static frames (reduced motion): the end states, shown at once. */
.tut-stage .on { opacity: 1; }
.tut-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.tut-lines li { display: flex; align-items: flex-start; gap: 12px; opacity: 0.55; }
.tut-lines li.a-line0 { opacity: 1; }
.tut-num {
  position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2);
  font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.tut-num span {
  position: absolute; inset: 0; border-radius: 50%; background: var(--cyan); color: var(--bg-deep);
  display: flex; align-items: center; justify-content: center; opacity: 0;
}
.tut-lines .a-disc0 { opacity: 1; }
.tut-text { font-size: 15px; font-weight: 700; line-height: 1.35; padding-top: 2px; }
.tut-mini { display: none; }
.tut-foot { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text-mute); }
/* The Caboose line: not one of the animated steps, so it sits apart, with the car. */
.tut-caboose {
  margin: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--bg); border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-soft);
}
.tut-caboose img { width: 36px; height: 36px; flex: none; }
.tut-caboose strong { color: var(--text); font-weight: 800; }
/* GOT IT only closes: a dark pill, so PLAY keeps the only gradient. */
.tut-ok {
  width: 100%; height: 52px; flex: none; border: none; border-radius: 999px; background: var(--bg); color: var(--text);
  box-shadow: 0 2px 14px rgba(0,0,0,0.23); font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.14em; cursor: pointer;
}
.tut-x:focus-visible, .tut-ok:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
@keyframes d-stage{0.000%{opacity:0;animation-timing-function:linear;}2.857%{opacity:1;}95.714%{opacity:1;animation-timing-function:linear;}99.286%{opacity:0;}100.000%{opacity:0;}}
@keyframes d-hand{0.000%{transform:translate(150.0px,52.0px) rotate(-0.0deg) scale(1.000);opacity:0;}2.857%{transform:translate(150.0px,52.0px) rotate(-0.0deg) scale(1.000);opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.58, 1);}5.714%{transform:translate(150.0px,38.0px) rotate(-0.0deg) scale(1.000);opacity:1;}10.714%{transform:translate(150.0px,38.0px) rotate(-0.0deg) scale(1.000);opacity:1;animation-timing-function:cubic-bezier(0.42, 0, 1, 1);}12.429%{transform:translate(150.0px,38.0px) rotate(-7.0deg) scale(0.930);opacity:1;animation-timing-function:cubic-bezier(0, 0, 0.58, 1);}15.000%{transform:translate(150.0px,38.0px) rotate(-0.0deg) scale(1.000);opacity:1;}22.857%{transform:translate(150.0px,38.0px) rotate(-0.0deg) scale(1.000);opacity:1;animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);}27.857%{transform:translate(84.0px,102.0px) rotate(-0.0deg) scale(1.000);opacity:1;animation-timing-function:cubic-bezier(0.42, 0, 1, 1);}29.571%{transform:translate(84.0px,102.0px) rotate(-7.0deg) scale(0.930);opacity:1;animation-timing-function:cubic-bezier(0, 0, 0.58, 1);}32.143%{transform:translate(84.0px,102.0px) rotate(-0.0deg) scale(1.000);opacity:1;}40.000%{transform:translate(84.0px,102.0px) rotate(-0.0deg) scale(1.000);opacity:1;animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);}45.000%{transform:translate(216.0px,102.0px) rotate(-0.0deg) scale(1.000);opacity:1;animation-timing-function:cubic-bezier(0.42, 0, 1, 1);}46.714%{transform:translate(216.0px,102.0px) rotate(-7.0deg) scale(0.930);opacity:1;animation-timing-function:cubic-bezier(0, 0, 0.58, 1);}49.286%{transform:translate(216.0px,102.0px) rotate(-0.0deg) scale(1.000);opacity:1;}57.143%{transform:translate(216.0px,102.0px) rotate(-0.0deg) scale(1.000);opacity:1;animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);}62.143%{transform:translate(252.0px,247.0px) rotate(-0.0deg) scale(1.000);opacity:1;animation-timing-function:cubic-bezier(0.42, 0, 1, 1);}63.857%{transform:translate(252.0px,247.0px) rotate(-7.0deg) scale(0.930);opacity:1;animation-timing-function:cubic-bezier(0, 0, 0.58, 1);}66.429%{transform:translate(252.0px,247.0px) rotate(-0.0deg) scale(1.000);opacity:1;}68.571%{transform:translate(252.0px,247.0px) rotate(-0.0deg) scale(1.000);opacity:1;animation-timing-function:cubic-bezier(0.42, 0, 1, 1);}71.429%{transform:translate(252.0px,261.0px) rotate(-0.0deg) scale(1.000);opacity:0;}100.000%{transform:translate(252.0px,261.0px) rotate(-0.0deg) scale(1.000);opacity:0;}}
@keyframes d-rip0{0.000%{transform:scale(.36);opacity:0;}12.414%{transform:scale(.36);opacity:0;}12.429%{transform:scale(.36);opacity:1;animation-timing-function:cubic-bezier(0, 0, 0.58, 1);}16.714%{transform:scale(1);opacity:0;}100.000%{transform:scale(1);opacity:0;}}
@keyframes d-rip1{0.000%{transform:scale(.36);opacity:0;}29.557%{transform:scale(.36);opacity:0;}29.571%{transform:scale(.36);opacity:1;animation-timing-function:cubic-bezier(0, 0, 0.58, 1);}33.857%{transform:scale(1);opacity:0;}100.000%{transform:scale(1);opacity:0;}}
@keyframes d-rip2{0.000%{transform:scale(.36);opacity:0;}46.700%{transform:scale(.36);opacity:0;}46.714%{transform:scale(.36);opacity:1;animation-timing-function:cubic-bezier(0, 0, 0.58, 1);}51.000%{transform:scale(1);opacity:0;}100.000%{transform:scale(1);opacity:0;}}
@keyframes d-rip3{0.000%{transform:scale(.36);opacity:0;}63.843%{transform:scale(.36);opacity:0;}63.857%{transform:scale(.36);opacity:1;animation-timing-function:cubic-bezier(0, 0, 0.58, 1);}68.143%{transform:scale(1);opacity:0;}100.000%{transform:scale(1);opacity:0;}}
@keyframes d-tile0{0.000%{transform:translate(0,0) scale(1);opacity:1;}12.429%{transform:translate(0,0) scale(1);opacity:1;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1);}17.000%{transform:translate(-100px,209px) scale(1);opacity:1;}63.857%{transform:translate(-100px,209px) scale(1);opacity:1;animation-timing-function:cubic-bezier(0.42, 0, 1, 1);}67.429%{transform:translate(-100px,209px) scale(.7);opacity:0;}99.286%{transform:translate(-100px,209px) scale(.7);opacity:0;}99.300%{transform:translate(0,0) scale(1);opacity:1;}100.000%{transform:translate(0,0) scale(1);opacity:1;}}
@keyframes d-ring0{0.000%{opacity:0;}2.857%{opacity:0;animation-timing-function:linear;}5.714%{opacity:1;}12.414%{opacity:1;}12.429%{opacity:0;}100.000%{opacity:0;}}
@keyframes d-tile1{0.000%{transform:translate(0,0) scale(1);opacity:1;}29.571%{transform:translate(0,0) scale(1);opacity:1;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1);}34.143%{transform:translate(12px,145px) scale(1);opacity:1;}63.857%{transform:translate(12px,145px) scale(1);opacity:1;animation-timing-function:cubic-bezier(0.42, 0, 1, 1);}67.429%{transform:translate(12px,145px) scale(.7);opacity:0;}99.286%{transform:translate(12px,145px) scale(.7);opacity:0;}99.300%{transform:translate(0,0) scale(1);opacity:1;}100.000%{transform:translate(0,0) scale(1);opacity:1;}}
@keyframes d-ring1{0.000%{opacity:0;}2.857%{opacity:0;animation-timing-function:linear;}5.714%{opacity:1;}29.557%{opacity:1;}29.571%{opacity:0;}100.000%{opacity:0;}}
@keyframes d-tile2{0.000%{transform:translate(0,0) scale(1);opacity:1;}46.714%{transform:translate(0,0) scale(1);opacity:1;animation-timing-function:cubic-bezier(0.2, 0.8, 0.2, 1);}51.286%{transform:translate(-74px,145px) scale(1);opacity:1;}63.857%{transform:translate(-74px,145px) scale(1);opacity:1;animation-timing-function:cubic-bezier(0.42, 0, 1, 1);}67.429%{transform:translate(-74px,145px) scale(.7);opacity:0;}99.286%{transform:translate(-74px,145px) scale(.7);opacity:0;}99.300%{transform:translate(0,0) scale(1);opacity:1;}100.000%{transform:translate(0,0) scale(1);opacity:1;}}
@keyframes d-ring2{0.000%{opacity:0;}2.857%{opacity:0;animation-timing-function:linear;}5.714%{opacity:1;}46.700%{opacity:1;}46.714%{opacity:0;}100.000%{opacity:0;}}
@keyframes d-new0{0.000%{transform:translateX(66px);opacity:0;}70.000%{transform:translateX(66px);opacity:0;animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);}76.000%{transform:translateX(0);opacity:1;}100.000%{transform:translateX(0);opacity:1;}}
@keyframes d-new1{0.000%{transform:translateX(66px);opacity:0;}71.429%{transform:translateX(66px);opacity:0;animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);}77.429%{transform:translateX(0);opacity:1;}100.000%{transform:translateX(0);opacity:1;}}
@keyframes d-new2{0.000%{transform:translateX(66px);opacity:0;}72.857%{transform:translateX(66px);opacity:0;animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);}78.857%{transform:translateX(0);opacity:1;}100.000%{transform:translateX(0);opacity:1;}}
@keyframes d-valid{0.000%{opacity:0;}51.286%{opacity:0;animation-timing-function:linear;}54.143%{opacity:1;}65.714%{opacity:1;animation-timing-function:linear;}68.571%{opacity:0;}100.000%{opacity:0;}}
@keyframes d-glow{0.000%{transform:scale(.85);opacity:0;}51.286%{transform:scale(.6);opacity:0;animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);}55.571%{transform:scale(1.05);opacity:1;animation-timing-function:ease-in-out;}60.571%{transform:scale(.9);opacity:.7;animation-timing-function:ease-in-out;}62.143%{transform:scale(1.05);opacity:1;}65.714%{transform:scale(1);opacity:1;animation-timing-function:linear;}68.571%{transform:scale(.85);opacity:0;}100.000%{transform:scale(.85);opacity:0;}}
@keyframes d-pop{0.000%{transform:translateY(0) scale(.6);opacity:0;}64.286%{transform:translateY(0) scale(.6);opacity:0;animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);}68.571%{transform:translateY(-12px) scale(1);opacity:1;}75.714%{transform:translateY(-16px) scale(1);opacity:1;animation-timing-function:cubic-bezier(0.42, 0, 1, 1);}79.286%{transform:translateY(-26px) scale(1);opacity:0;}100.000%{transform:translateY(-26px) scale(1);opacity:0;}}
@keyframes d-line0{0.000%{opacity:1;}51.271%{opacity:1;animation-timing-function:linear;}53.429%{opacity:.55;}97.857%{opacity:.55;animation-timing-function:linear;}100.000%{opacity:1;}}
@keyframes d-disc0{0.000%{opacity:1;}51.271%{opacity:1;animation-timing-function:linear;}53.429%{opacity:0;}97.857%{opacity:0;animation-timing-function:linear;}100.000%{opacity:1;}}
@keyframes d-line1{0.000%{opacity:.55;}51.286%{opacity:.55;animation-timing-function:linear;}53.429%{opacity:1;}68.571%{opacity:1;animation-timing-function:linear;}70.714%{opacity:.55;}100.000%{opacity:.55;}}
@keyframes d-disc1{0.000%{opacity:0;}51.286%{opacity:0;animation-timing-function:linear;}53.429%{opacity:1;}68.571%{opacity:1;animation-timing-function:linear;}70.714%{opacity:0;}100.000%{opacity:0;}}
@keyframes d-line2{0.000%{opacity:.55;}68.571%{opacity:.55;animation-timing-function:linear;}70.714%{opacity:1;}97.857%{opacity:1;animation-timing-function:linear;}100.000%{opacity:.55;}}
@keyframes d-disc2{0.000%{opacity:0;}68.571%{opacity:0;animation-timing-function:linear;}70.714%{opacity:1;}97.857%{opacity:1;animation-timing-function:linear;}100.000%{opacity:0;}}
.tut.tut-play .a-stage { animation: d-stage 7000ms linear infinite; }
.tut.tut-play .a-hand { animation: d-hand 7000ms linear infinite; }
.tut.tut-play .a-rip0 { animation: d-rip0 7000ms linear infinite; }
.tut.tut-play .a-rip1 { animation: d-rip1 7000ms linear infinite; }
.tut.tut-play .a-rip2 { animation: d-rip2 7000ms linear infinite; }
.tut.tut-play .a-rip3 { animation: d-rip3 7000ms linear infinite; }
.tut.tut-play .a-tile0 { animation: d-tile0 7000ms linear infinite; }
.tut.tut-play .a-ring0 { animation: d-ring0 7000ms linear infinite; }
.tut.tut-play .a-tile1 { animation: d-tile1 7000ms linear infinite; }
.tut.tut-play .a-ring1 { animation: d-ring1 7000ms linear infinite; }
.tut.tut-play .a-tile2 { animation: d-tile2 7000ms linear infinite; }
.tut.tut-play .a-ring2 { animation: d-ring2 7000ms linear infinite; }
.tut.tut-play .a-new0 { animation: d-new0 7000ms linear infinite; }
.tut.tut-play .a-new1 { animation: d-new1 7000ms linear infinite; }
.tut.tut-play .a-new2 { animation: d-new2 7000ms linear infinite; }
.tut.tut-play .a-valid { animation: d-valid 7000ms linear infinite; }
.tut.tut-play .a-glow { animation: d-glow 7000ms linear infinite; }
.tut.tut-play .a-pop { animation: d-pop 7000ms linear infinite; }
.tut.tut-play .a-line0 { animation: d-line0 7000ms linear infinite; }
.tut.tut-play .a-disc0 { animation: d-disc0 7000ms linear infinite; }
.tut.tut-play .a-line1 { animation: d-line1 7000ms linear infinite; }
.tut.tut-play .a-disc1 { animation: d-disc1 7000ms linear infinite; }
.tut.tut-play .a-line2 { animation: d-line2 7000ms linear infinite; }
.tut.tut-play .a-disc2 { animation: d-disc2 7000ms linear infinite; }
.tut.tut-paused * { animation-play-state: paused !important; }
@media (min-width: 900px) {
  .tut-scrim { align-items: center; }
  .tut { max-width: 440px; border-radius: 24px; padding: 20px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No loop: each line gets its still frame beside it, fully lit. */
  .tut-anim { display: none; }
  .tut .tut-lines li { opacity: 1; align-items: center; animation: none !important; }
  .tut .tut-num span { opacity: 1; animation: none !important; }
  .tut-mini { display: block; flex: none; width: 132px; height: 122px; padding: 6px; box-sizing: border-box; background: var(--bg); border-radius: 12px; }
  .tut-mini .tut-stage { transform: scale(0.4); transform-origin: 0 0; }
}

/* --- Below the fold (D2) -------------------------------------------------- */
.below { background: var(--bg-deep); padding: 28px 16px 24px; }
.below .inner { max-width: 640px; margin: 0 auto; }
/* A short run of track: two rails and the ties between them. */
.below .track {
  height: 14px; margin-bottom: 8px; border-radius: 2px;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) top / 100% 2px no-repeat,
    linear-gradient(var(--surface-2), var(--surface-2)) bottom / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--surface) 0 6px, transparent 6px 20px);
}
.below h2 { margin: 28px 0 10px; font-size: 20px; font-weight: 900; color: var(--cyan); }
.below p { margin: 0 0 12px; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--text-soft); }
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ladder li { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; color: var(--text-soft); }
.ladder svg { width: 48px; height: 48px; flex: none; }
.ladder strong { color: var(--text); font-weight: 800; }
details { background: var(--surface); border-radius: 12px; margin: 0 0 10px; }
summary { min-height: 52px; padding: 14px 16px; font-size: 16px; font-weight: 800; cursor: pointer; list-style: none; display: flex; align-items: center; }
summary::-webkit-details-marker { display: none; }
details p { padding: 0 16px 14px; }
footer { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: center; }
footer a, footer span { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--text-mute); text-decoration: none; }

/* --- The game host --------------------------------------------------------- */
#game { position: fixed; inset: 0; z-index: 10; visibility: hidden; background: var(--bg); }
body.playing #game { visibility: visible; }
body.playing .page { display: none; }
/* Mid-handoff the window still shows over the game. */
body.playing.handoff .page { display: block; visibility: hidden; }
/* Playing, the page is the game: nothing scrolls under it. The About
   content stays in the welcome page (crawlable) and opens as a sheet. */
html.playing, body.playing { overflow: hidden; height: 100svh; }
body.playing .below { display: none; }
.about-link, .about-bar { display: none; }
body.about-open .below {
  display: block; position: fixed; inset: 0; z-index: 25; overflow-y: auto; overscroll-behavior: contain;
  padding-top: 0;
}
/* The sheet's header: the logo and the close, on the sheet's own colour, so
   nothing scrolls over the close. */
body.about-open .about-bar {
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1;
  padding: 16px 0 14px; background: var(--bg-deep);
}
.about-logo { height: 40px; width: auto; display: block; }
.about-close {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; flex: none;
}
.about-close img { width: 28px; height: 28px; }
.about-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 50%; }

/* --- Desktop frame (D3, >= 900px) ------------------------------------------- */
/* The pre-game ad frame (spec §8). */
.adframe { align-items: center; z-index: 30; }
.adframe .ad-label { margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--text-mute); text-align: center; }
.adframe .ad-wait { width: 36px; height: 36px; margin: 8px auto 20px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--cyan); animation: adspin 0.9s linear infinite; }
@keyframes adspin { to { transform: rotate(360deg); } }

/* --- Cookie choices (D18, our own banner) ---------------------------------
   A bottom bar, not a modal: the welcome scrolls above it (daily.js pads the
   body by its height), and it never sits over the board unless reopened
   from "Cookie settings". Accept and Reject are the same button. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom); background: var(--surface); box-shadow: 0 -8px 24px rgba(20,18,33,0.45);
  border-radius: 20px 20px 0 0;
}
.consent[hidden] { display: none; }
body.playing .consent:not(.reopened) { display: none; }
body.playing { padding-bottom: 0 !important; }
.consent-in { width: 100%; max-width: 430px; padding: 14px 16px 12px; }
.consent-text { margin: 0 0 10px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-soft); }
.consent-text a { color: var(--cyan); }
.consent-manage { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.consent-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
  background: var(--bg-deep); border-radius: 12px; font-size: 13px; line-height: 1.35; color: var(--text-mute);
}
.consent-row strong { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.consent-always { flex: none; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--text-faint); }
.consent-row input {
  flex: none; appearance: none; -webkit-appearance: none; width: 48px; height: 28px; margin: 0; border-radius: 999px;
  background: var(--surface-2); position: relative; cursor: pointer; transition: background 150ms ease;
}
.consent-row input::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text); transition: transform 150ms ease;
}
.consent-row input:checked { background: var(--mint); }
.consent-row input:checked::after { transform: translateX(20px); }
.consent-row input:focus-visible, .consent-btn:focus-visible, .consent-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.consent-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-btn {
  height: 44px; border: none; border-radius: 999px; background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
/* Accept in the brand green (Chad, 10/1). Reject keeps the same size, weight
   and a readable contrast, so refusing stays as easy as accepting. */
#consent-accept { background: var(--go); color: var(--bg-deep); }
.consent-save { width: 100%; margin-top: 10px; }
.consent-link {
  padding: 0; background: none; border: none; color: var(--cyan);
  font: inherit; text-decoration: underline; cursor: pointer;
}

/* --- Press states ----------------------------------------------------------
   Every tappable sinks and darkens while pressed, like the app's WrPressable
   (0.96 over 90 ms + an ink highlight), so a tap always shows it landed (Chad,
   2026-10-02). Pills and round buttons scale; text links dim. Hover lifts only
   where there is a real pointer, so a phone never keeps a stuck hover. */
.play, .links button, .sheet .close, .got-it, .tut-x, .tut-ok, .consent-btn,
.consent-link, .about-close, .about-link, .badges a, footer a, summary {
  -webkit-tap-highlight-color: transparent;
}
.links button, .sheet .close, .got-it, .tut-x, .tut-ok, .consent-btn, .about-close, .badges a {
  transition: transform 90ms ease-out, filter 90ms ease-out;
}
.consent-link, .about-link, footer a, .links button { transition: transform 90ms ease-out, filter 90ms ease-out, color 90ms ease-out, opacity 90ms ease-out; }
summary { transition: background-color 90ms ease-out; border-radius: 12px; }
.play.ready:active { filter: brightness(0.9); }
.sheet .close:active, .got-it:active, .tut-x:active, .tut-ok:active, .consent-btn:active,
.about-close:active, .badges a:active {
  transform: scale(0.96); filter: brightness(0.85);
}
.links button:active, .consent-link:active, .about-link:active, footer a:active {
  transform: scale(0.96); opacity: 0.6;
}
summary:active { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) {
  .play.ready:hover { filter: brightness(1.06); }
  .play.ready:active { filter: brightness(0.9); }
  .sheet .close:hover, .got-it:hover, .tut-x:hover, .tut-ok:hover, .consent-btn:hover,
  .about-close:hover, .badges a:hover { filter: brightness(1.12); }
  .sheet .close:active, .got-it:active, .tut-x:active, .tut-ok:active, .consent-btn:active,
  .about-close:active, .badges a:active { filter: brightness(0.85); }
  .links button:hover, .about-link:hover { color: var(--text); }
  footer a:hover { color: var(--text-soft); }
  summary:hover { background: var(--surface-2); }
}
/* Keyboard focus on everything that lacked a ring. */
.links button:focus-visible, .sheet .close:focus-visible, .got-it:focus-visible,
.about-link:focus-visible, footer a:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 3px;
}
.links button:focus-visible, .about-link:focus-visible, footer a:focus-visible { border-radius: 6px; }
.sheet .close:focus-visible { border-radius: 50%; }

@media (min-width: 900px) {
  /* The middle column is the game's: 430 wide, so the board window and the board line up.
     The side columns take what's left, up to 300 each: fixed at 300 they forced the grid
     past the window below ~1140 px, so the left one ran under the board and the right one
     off screen (Chad, 2026-10-02). The frame keeps its sides symmetric because the board
     (#game) is centred on the window, not on the grid. */
  .frame {
    display: grid; grid-template-columns: minmax(0, 1fr) 430px minmax(0, 1fr);
    column-gap: clamp(24px, calc(4vw - 8px), 56px);
    padding-inline: clamp(16px, 2.5vw, 40px);
    align-items: start;
  }
  .gutter { display: flex; flex-direction: column; gap: 18px; padding-top: 120px; min-width: 0; }
  .gutter.left { justify-self: end; width: 100%; max-width: 300px; }
  .gutter.right { justify-self: start; width: 100%; max-width: 300px; }
  .col { padding-top: 48px; }
  .appcard.phone-only { display: none; }
  .gutter h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--text-mute); }
  .gutter p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--text-soft); }
  .keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; font-size: 14px; font-weight: 600; color: var(--text-soft); }
  .key { min-width: 36px; height: 32px; padding: 0 10px; border-radius: 8px; background: var(--surface); box-shadow: 0 2px 0 var(--bg-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--text); }
  .qr { width: min(132px, 100%); height: auto; aspect-ratio: 1; border-radius: 12px; background: var(--cream); display: block; overflow: hidden; }
  .qr svg { display: block; width: 100%; height: 100%; }
  #qr-caption strong { color: var(--yellow); white-space: nowrap; }
  .riders { font-size: 15px; font-weight: 700; color: var(--text-soft); }
  .riders strong { color: var(--yellow); }
  .adslot { width: 300px; height: 250px; border-radius: 12px; }
  /* Nothing in it (ads are dark): no empty frame. */
  .adslot:empty { display: none; }
  /* The lockup above How to play, only while playing (the welcome has its own). */
  .gutter.left { position: relative; }
  .gutter-logo { position: absolute; top: 40px; left: 0; height: 56px; width: auto; }
  body:not(.playing) .gutter-logo { visibility: hidden; }
  /* The board plays in the middle column; the gutters stay up. */
  body.playing .page { display: block; }
  body.playing .col > * { visibility: hidden; }
  #game { left: 50%; right: auto; width: 430px; transform: translateX(-50%); }
  body.playing .about-link {
    display: inline-flex; align-self: flex-start; min-height: 44px; align-items: center; padding: 0;
    background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--cyan); cursor: pointer;
  }
  /* The 300x250 unit needs a full-width column (daily.js arms it from 1220 px too). */
  @media (max-width: 1219px) { .adslot { display: none; } }
  /* Narrow desktop windows (side columns ~185-270 px): tighter type and keys. */
  @media (max-width: 1099px) {
    .gutter { gap: 14px; padding-top: 112px; }
    .gutter h3 { font-size: 12px; letter-spacing: 0.12em; }
    .gutter p, .riders { font-size: 14px; line-height: 1.45; }
    .keys { gap: 8px 10px; font-size: 13px; }
    .key { min-width: 32px; height: 28px; padding: 0 8px; font-size: 11px; }
    .qr { width: min(112px, 100%); }
    .gutter-logo { top: 36px; height: 48px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .play, .blind, .play .fill { transition: opacity 150ms ease; }
  /* The forest run slows to 30 s layers and stops the chug (design §B). */
  .pb-far, .pb-mid, .pb-near, .pb-cloud, .pb-ties, .pb-puff { animation-duration: 30s; }
  .pb-chug { animation: none; }
  /* Presses still darken, without the sink. */
  .play.ready:active, .sheet .close:active, .got-it:active, .tut-x:active, .tut-ok:active, .consent-btn:active,
  .about-close:active, .badges a:active, .links button:active, .consent-link:active, .about-link:active, footer a:active { transform: none; }
  .play.ready.pulse { animation: none; }
  .adframe .ad-wait { animation: none; }
  .consent-row input, .consent-row input::after { transition: none; }
}