/* plainchess.com — "App Store, alive": one cobalt canvas, a two-line hook per section (white, then gold),
   one real frameless capture and one hero object popping off it. Brand tokens: docs/BRIEF.md §5.
   Badges are never inside anything that animates, fades, moves or transforms (BRIEF rule 7/10). */

:root {
  --c1: #3461F0;
  --c2: #2245D2;
  --c3: #1934B0;
  --c4: #10237A;
  --navy: #0B1A5E;
  --head: #0E1E6A;
  /* Brand hook gold (#FFE7A0 → #FFC94D 45%) with a lighter last stop than the brand's #F2A12C, so the bottoms
     of the letters keep ≥ 3:1 against the brightest cobalt (measured on renders, see the build report). */
  --gold-grad: linear-gradient(180deg, #FFE7A0 0%, #FFC94D 45%, #FBBC48 100%);
  --chip-grad: linear-gradient(180deg, #FFE7A0, #FFC24A);
  --btn-grad: linear-gradient(180deg, #FFE091, #F5C46B 55%, #EBAD3D);
  --ring: #FFC94D;
  --label-gold: #FFD27A;
  --eyebrow: #FFE6AE;
  --gold: #F5C46B;
  --gold-light: #FFE091;
  --on-gold: #331F08;
  --ivory: #F7F2E8;
  --muted: rgba(255, 255, 255, .88);
  --faint: rgba(255, 255, 255, .84);
  --shadow: rgba(4, 10, 50, .55);
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --gutter: 16px;
  /* The side margin, never under a landscape iPhone's notch or rounded corners (viewport-fit=cover). */
  --edge: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  --sec-pad: 48px;
  --head-h: 60px;
  --screen-w: 56vw;
  /* One hook scale for every section (h2) and one step up for the hero (h1). */
  --hook: min(14.6vw, 64px);
  --hook-xl: min(17.4vw, 72px);
  color-scheme: dark;
}
@media (min-width: 700px) {
  :root { --gutter: 32px; --sec-pad: 64px; --screen-w: 300px; --hook: 84px; --hook-xl: min(112px, 15vw); }
}
/* Phones held sideways (e.g. 667 × 375, 844 × 390): hooks scale with the height so the hero's sentence and badge stay
   on screen. */
@media (min-width: 480px) and (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  :root { --hook: min(84px, 17vh); --hook-xl: min(112px, 15vh); }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 48px; --head-h: 72px;
    --sec-pad: clamp(44px, 6vh, 60px);
    --screen-w: clamp(280px, 35vh, 320px);
    --hook: clamp(64px, 6.2vw, 88px);
    --hook-xl: clamp(88px, min(8.6vw, 15.5vh), 124px);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--navy);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  color: #fff;
  background: var(--navy);
  font: 400 17px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
button { font: inherit; }
.sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 18px; border-radius: 999px;
  background: #fff; color: var(--c4); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------------ header */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: background-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
.head-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(1240px, 100% - 2 * var(--edge)); margin-inline: auto;
  height: var(--head-h);
  transition: height .35s ease;
}
.site-head.is-compact {
  background: rgba(14, 30, 106, .8);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 14px 32px -18px rgba(4, 10, 50, .7);
}
.site-head.is-compact .head-in { height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 700 18px/1 var(--display); letter-spacing: -.01em; }
.brand img { width: 34px; height: 34px; border-radius: 22.5%; box-shadow: 0 6px 16px -6px rgba(4, 10, 50, .8), 0 0 0 1px rgba(255, 255, 255, .12); }
.get-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: 700 15px/1 var(--text); letter-spacing: -.005em; color: var(--on-gold); text-decoration: none; white-space: nowrap;
  background: var(--btn-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 22px -10px rgba(235, 173, 61, .8);
}
@media (hover: hover) { .get-pill:hover { filter: brightness(1.05); } }

/* ------------------------------------------------------------------ canvas + sections */
.canvas { display: block; overflow-x: clip; }
@supports not (overflow: clip) { .canvas { overflow-x: hidden; } }

/* Sections are deliberately not positioned: every glow (z 0) paints above every section background and below
   every section's content (z 1), so glows cross section edges without seams. */
.sec {
  padding-block: var(--sec-pad);
  background: linear-gradient(180deg, var(--a), var(--b));
  --glow: rgba(255, 196, 80, .5);
  --gx: 50%; --gy: 72%; --gs: 760px;
}
/* The cobalt ramp (#3461F0 → #2245D2 → #1934B0 → #10237A) rises and falls, so the canvas never goes flat;
   each section's bottom colour is the next one's top colour. */
.s-hero   { --a: #3461F0; --b: #2F5FEA; --glow: rgba(255, 196, 80, .62); }
.s-puzzle { --a: #1A37B8; --b: #1E3EC4; --glow: rgba(255, 170, 70, .45); }
.s-review { --a: #1E3EC4; --b: #2650DE; --glow: rgba(170, 125, 255, .5); }
.s-hint   { --a: #2650DE; --b: #1F40C8; --glow: rgba(255, 196, 80, .45); }
.s-rivals { --a: #1F40C8; --b: #16309F; --glow: rgba(40, 210, 255, .38); }
.s-coach  { --a: #16309F; --b: #1E3EC4; --glow: rgba(170, 125, 255, .5); }
.s-undo   { --a: #1E3EC4; --b: #2852E2; --glow: rgba(255, 120, 90, .42); }
.s-two    { --a: #2852E2; --b: #1F40C8; --glow: rgba(40, 210, 255, .38); }
.s-noads  { --a: #1F40C8; --b: #2245D2; --glow: rgba(40, 210, 255, .22); --gx: 22%; --gy: 34%; --gs: 560px; }
.s-faq    { --a: #2245D2; --b: #142A8F; --glow: rgba(170, 125, 255, .28); }
.s-cta    { --a: #142A8F; --b: #0E1E6A; --glow: rgba(64, 112, 255, .5); --gy: 30%; }

/* Decorative layers are never scroll anchors: they sit at a percentage of their section's height, so when a puzzle
   card or a FAQ answer grows, Chrome would otherwise scroll the page by half the growth (overflow-anchor). */
.glow, .rays, .pz-rays, .s-hero .copy::before, .stage-cta::before, .pz-card .pc-puzzle-board::before { overflow-anchor: none; }
.glow, .rays {
  position: absolute; z-index: 0; pointer-events: none;
  left: var(--gx); top: var(--gy);
  width: var(--gs); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
}
.glow { background: radial-gradient(circle, var(--glow) 0%, rgba(0, 0, 0, 0) 68%); }
.rays {
  width: calc(var(--gs) * 1.05);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .09) 0deg 6deg, rgba(255, 255, 255, 0) 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 68%);
  mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 68%);
}

.wrap { position: relative; width: min(1240px, 100% - 2 * var(--edge)); margin-inline: auto; }
.copy, .stage, .riv-top, .faceoff, .fine, .faq, .duo, .noads-facts, .piece-king { position: relative; z-index: 1; }

/* Stacked on phones: copy, then the stage. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
.copy { min-width: 0; }
.stage { display: grid; place-items: center; min-width: 0; }

@media (min-width: 1024px) {
  .sec { --gx: 75%; --gy: 50%; --gs: 980px; }
  .sec.flip { --gx: 25%; }
  /* The closing glow fades out above the footer (a radial "circle" reaches 0.68 × half its diagonal, 0.48 × --gs),
     so the footer never cuts it off in a straight line. */
  .sec.s-cta { --gy: 34%; --gs: 800px; }
  /* Rivals: the cyan glow sits low, behind the face-off card, not under the picker's small level/Elo labels. */
  .sec.s-rivals { --gy: 74%; --glow: rgba(40, 210, 255, .32); }
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: center; }
  .flip .copy { order: 2; }
  .flip .stage { order: 1; }
}

/* ------------------------------------------------------------------ type */
.hook {
  margin: 0;
  font: 900 var(--hook)/.98 var(--display);
  letter-spacing: -.035em;
  text-shadow: 0 10px 40px rgba(5, 12, 60, .35);
}
.hook-xl { font-size: var(--hook-xl); }
.hook .l1, .hook .l2 { display: block; white-space: nowrap; }
/* Phones: each hook line is sized to fit on one line; if a reader's own text spacing makes it longer, it wraps
   (balanced) instead of being clipped by the canvas. */
@media (max-width: 699px) { .hook .l1, .hook .l2 { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; } }
.hook .l2 {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
  /* A tight navy halo under the gold keeps the letter edges crisp on bright cobalt. */
  filter: drop-shadow(0 3px 7px rgba(8, 18, 80, .45)) drop-shadow(0 12px 30px rgba(5, 12, 60, .35));
  padding-bottom: .12em; margin-bottom: -.12em;
}
/* The closing line is long. Phones: line 1 wraps to two balanced lines instead of shrinking. From 700 px it stays
   one line (two-line hook, white then gold): the hook is sized to its column, at most the shared hook size
   ("Your next great move" is 9.4 em wide). */
.s-cta .hook .l1 { white-space: normal; text-wrap: balance; }
@media (min-width: 700px) {
  .s-cta .copy { container-type: inline-size; }
  .s-cta .hook { font-size: min(var(--hook), 10.2cqi); }
  .s-cta .hook .l1 { white-space: nowrap; }
}

.eyebrow {
  margin: 0 0 14px;
  font: 800 13px/1.2 var(--rounded); letter-spacing: .14em; text-transform: uppercase;
  color: var(--eyebrow);
}
/* Apple product names keep their own capitals ("iPhone Duo", never "IPHONE DUO"). */
.eyebrow-name { font-size: 15px; letter-spacing: .01em; text-transform: none; }

.lede { margin: 20px 0 0; max-width: 31ch; font-size: clamp(17px, 1.2vw + 11px, 21px); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.s-hero .lede { max-width: 34ch; color: rgba(255, 255, 255, .95); }
.s-hero .micro { color: rgba(255, 255, 255, .95); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px;
  font: 700 16px/1 var(--text); letter-spacing: -.01em; white-space: nowrap;
  color: var(--c4); background: var(--chip-grad);
  box-shadow: 0 12px 28px -10px rgba(5, 12, 60, .55), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.chip svg { width: 17px; height: 17px; flex: none; }
.chip.ghost { color: #fff; background: rgba(8, 16, 70, .28); box-shadow: inset 0 0 0 2px rgba(255, 214, 120, .85); }
.chip.ghost svg { color: var(--gold); }
.chip-sm { height: 34px; padding: 0 14px; font-size: 14.5px; }

.micro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 20px 0 0; font: 600 14px/1.3 var(--text); color: var(--faint); }
.micro span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 3px; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.micro-search { display: block; }
@media (max-width: 359px) { .micro { font-size: 12.5px; } .micro span + span::before { margin: 0 7px 3px; } }

.howto { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font: 600 15px/1.3 var(--text); color: var(--faint); }
.howto-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(245, 196, 107, .18); }
.on-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .on-mouse { display: inline; } .on-touch { display: none; } }

.note, .fine { margin: 18px 0 0; font-size: 14px; line-height: 1.45; color: var(--faint); max-width: 44ch; text-wrap: pretty; }
.micro-search { text-wrap: pretty; }

/* ------------------------------------------------------------------ get (badge + QR): static, never animated */
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 28px; }
.badge { display: inline-block; padding: 0; border-radius: 10px; line-height: 0; }
.badge img { height: 50px; width: auto; }
.qr { display: none; }
@media (min-width: 900px) { .badge img { height: 54px; } }
/* The QR card is for a computer: a phone or tablet (even one held sideways, 900 px+ wide) never sees "Scan with
   your iPhone camera". */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .qr {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 18px 10px 10px; border-radius: 26px;
    background: rgba(8, 16, 70, .34);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 40px -24px rgba(4, 10, 50, .7);
  }
  .qr img { width: 132px; height: 132px; border-radius: 16px; background: #fff; }
  .qr p { margin: 0; width: 7.4em; font: 600 16px/1.3 var(--text); color: rgba(255, 255, 255, .92); }
  /* "Get the app" on a desktop points here: a gold ring pulses on the card itself (not on the badge). */
  .qr.is-flash { box-shadow: inset 0 0 0 2.5px #FFC94D, 0 0 0 7px rgba(255, 201, 77, .26), 0 20px 40px -24px rgba(4, 10, 50, .7); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .qr.is-flash { animation: qr-flash 1.1s ease-out 2; }
}
@keyframes qr-flash {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 40px -24px rgba(4, 10, 50, .7); }
  30% { box-shadow: inset 0 0 0 2.5px #FFC94D, 0 0 0 9px rgba(255, 201, 77, .3), 0 0 60px rgba(255, 201, 77, .45); }
}

/* ------------------------------------------------------------------ screens, cards, pieces */
.screen {
  position: relative; z-index: 2;
  width: var(--screen-w);
  aspect-ratio: 1320 / 2868;
  border-radius: 11% / 5.06%;
  overflow: hidden;
  background: #0D0A0D;
  rotate: var(--tilt, -4deg);
  box-shadow: 0 60px 100px -36px rgba(4, 10, 50, .75), 0 24px 46px -18px rgba(4, 10, 50, .5);
}
.screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); pointer-events: none; }
.screen img { width: 100%; height: 100%; }

.pop { position: absolute; z-index: 3; }

/* A CSS crop of a real capture (coordinates in the 1320×2868 original) with a gold rim. */
.crop {
  overflow: hidden;
  aspect-ratio: var(--nw) / var(--nh);
  border-radius: var(--cr, 6%) / calc(var(--cr, 6%) * var(--nw) / var(--nh));
  background: #0D0A0D;
  box-shadow: 0 0 0 2.5px rgba(255, 214, 120, .92), 0 50px 90px -24px rgba(4, 10, 50, .75), 0 18px 36px -14px rgba(4, 10, 50, .5);
}
.crop img {
  position: absolute; max-width: none; height: auto;
  width: calc(1320 / var(--nw) * 100%);
  left: calc(var(--nx) / var(--nw) * -100%);
  top: calc(var(--ny) / var(--nh) * -100%);
}

.piece { width: 180px; height: auto; aspect-ratio: 1; filter: drop-shadow(0 30px 30px rgba(4, 10, 50, .55)) drop-shadow(0 0 40px rgba(255, 200, 90, .25)); }

/* Hero: the board after checkmating Nova; the VICTORY card pops off it. */
.stage-hero { --tilt: -4deg; padding: 4px 0 18px; }
.stage-hero .screen { width: min(56vw, 250px); margin-left: 18%; }
/* Phones and tablets: the card sits over the capture's top bar (status, title, rival row), so the whole
   VICTORY / You won card is on the first screen together with the board, never sliced by the fold. */
/* The crop starts 24 source px above the crown tile's tab, so the tile has a top margin inside the gold rim; the
   card is 6% narrower than the old, shorter crop (and starts that much further right), so its height and its right
   edge over the capture's title pill are unchanged. */
.crop-victory { --nx: 330; --ny: 652; --nw: 660; --nh: 438; --cr: 9%; width: min(47vw, 211px); left: max(0px, calc(50% - min(56vw, 250px) * .5 - 34px + min(3vw, 13px))); top: 2.5%; rotate: 5deg; }

/* Review: the "Missed mate in 2" card, centred on the same card in the capture (its centre is 76.9% down the
   capture, i.e. 0.584 × the capture width below the capture's centre), so it covers it completely: no second copy
   of the card peeks out from behind it. */
.stage-review { --tilt: -3deg; padding-bottom: 44px; } /* the pop hangs ~40 px below the shortened capture */
/* The capture ends just under the card (its empty bottom would show as a dark slab below the pop): the screen box
   is 88% of the capture's height with the same corner radius, and the image is cut at its bottom. */
.stage-review .screen { aspect-ratio: 1320 / 2524; border-radius: calc(var(--screen-w) * .11); }
.stage-review .screen img { height: auto; }
.crop-review {
  --nx: 40; --ny: 1840; --nw: 1240; --nh: 730; --cr: 5%; --pw: min(90vw, 404px);
  /* Centred 12 px above the card it copies (76.9% down the capture = 1.6704 × its width), so the pop also covers
     the game graph's marker and edge just above the card. */
  width: var(--pw); left: 50%; top: calc(var(--screen-w) * 1.6704 - 12px); margin-top: calc(var(--pw) * -.2944);
  translate: -50% 0; rotate: 2deg;
}

/* Coach: one capture. On phones the same image is framed as the answer card, large enough to read. From 700 px
   the whole capture shows and the answer card pops off it (gold rim), centred on the card it copies. */
.stage-coach { --tilt: 3deg; }
.crop-coach { display: none; }
@media (min-width: 700px) {
  .crop-coach {
    display: block;
    /* 12 source px inside the app's own card on every side, so its border never shows inside the gold rim. */
    --nx: 62; --ny: 1168; --nw: 1194; --nh: 962; --cr: 6%; --pw: min(440px, 100%);
    width: var(--pw); left: 50%; top: calc(50% + var(--screen-w) * .1629); margin-top: calc(var(--pw) * -.4028);
    translate: -50% 0; rotate: -2deg;
  }
  /* Under the pop's lower edge the capture's "How to play it" and "Watch out" lines would show cut in half: the
     card's own navy covers them (source rows 2100–2524, inside the card's border), so the pop ends over empty
     card, above the complete "Ask why…" field. */
  .screen-coach::before {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    left: 4.1%; right: 4.3%; top: 73.2%; height: 14.8%;
    background: linear-gradient(90deg, rgb(20, 28, 52), rgb(18, 27, 50) 25%, rgb(13, 23, 46) 60%, rgb(15, 17, 40));
    -webkit-mask: linear-gradient(180deg, #000 94%, transparent);
    mask: linear-gradient(180deg, #000 94%, transparent);
  }
}
@media (max-width: 699px) {
  .screen-coach {
    --nx: 62; --ny: 1168; --nw: 1194; --nh: 962; --cr: 6%;
    width: 100%; aspect-ratio: var(--nw) / var(--nh); rotate: -1.5deg;
    border-radius: var(--cr) / calc(var(--cr) * var(--nw) / var(--nh));
    box-shadow: 0 0 0 2.5px rgba(255, 214, 120, .92), 0 50px 90px -24px rgba(4, 10, 50, .75), 0 18px 36px -14px rgba(4, 10, 50, .5);
  }
  .screen-coach::after { display: none; }
  .screen-coach img {
    position: absolute; max-width: none; height: auto;
    width: calc(1320 / var(--nw) * 100%);
    left: calc(var(--nx) / var(--nw) * -100%);
    top: calc(var(--ny) / var(--nh) * -100%);
  }
}

.stage-two { --tilt: -4deg; padding-bottom: 16px; }
.stage-two .screen { margin-left: 16%; }
.piece-pawn { width: min(30vw, 118px); left: 0; bottom: -4px; rotate: -8deg; }

/* Board coordinates (site only; the shared chess.css keeps the app's colours): ≥ 4.5:1 on both square colours and
   never under 10 px. */
.pc-board { --pc-coord-on-light: #7A5C2E; --pc-coord-on-dark: #2A1A0A; }
.pc-coord { font-size: clamp(10px, 1.75cqw, 13.5px); }

/* ------------------------------------------------------------------ puzzle */
.stage-puzzle { width: 100%; }
.pz-card { position: relative; z-index: 0; width: 100%; container-type: inline-size; }
/* Reserved height = the mounted puzzle (head 52 + progress 18 + feedback 72 + tools 64 + four 12 px gaps, measured
   253.5 px at every width) + the board, so mounting it never moves the page. */
.pz-mount { min-height: calc(100cqi + 254px); }
.pz-card .pc-puzzle { gap: 12px; }
.pz-card .pc-puzzle-title { font-size: 20px; }
.pz-card .pc-puzzle-board .pc-board { box-shadow: 0 30px 60px -20px rgba(4, 10, 50, .75), 0 0 0 1px rgba(255, 255, 255, .1); }
@media (max-width: 359px) {
  /* Board ≥ 304 px at 320: the puzzle gets 8 px gutters instead of 16. Only the board bleeds: the title row,
     progress, feedback, tools and the finished card keep the page's 16 px column. */
  .pz-card { width: calc(100% + 16px); margin-inline: -8px; }
  .pz-card .pc-puzzle-head, .pz-card .pc-puzzle-progress { padding-inline: 8px; }
  .pz-card .pc-puzzle-feedback, .pz-card .pc-puzzle-tools, .pz-card .pc-puzzle-done { margin-inline: 8px; }
  .pz-card .pz-nudge { padding-inline: 8px; }
}
@media (max-width: 599px) {
  /* Phones: no navy card behind the puzzle, so its surfaces get a navy tint of their own and its small text is
     brighter (≥ 4.5:1 on the brightest cobalt); the section glow sits behind the board, not the tools. */
  .s-puzzle { --gy: 64%; --gs: 560px; }
  .pz-card .pc-puzzle { --pc-p-muted: rgba(255, 255, 255, .9); --pc-p-card: rgba(8, 16, 70, .42); --pc-p-hairline: rgba(255, 255, 255, .16); }
  .pz-card .pc-puzzle-tools { background: rgba(8, 16, 70, .42); }
  .pz-card .pc-puzzle-band { color: #fff; background: rgba(8, 16, 70, .42); }
  .pz-card .pc-puzzle-progress { color: rgba(255, 255, 255, .92); }
  .pz-card .pc-puzzle-msg { color: #fff; }
  .pz-card .pc-puzzle-detail { color: rgba(255, 255, 255, .9); }
  .pz-card .pc-puzzle-tool[data-tool="hint"]:not([aria-disabled="true"]) { color: #FFD98A; }
  /* The toned states (hint, good move, not quite) keep their tint over the same navy base, so their small gold,
     green and red eyebrows stay ≥ 4.5:1 over the bright cobalt and the sun rays. */
  .pz-card .pc-puzzle-feedback[data-tone="hint"] { background: linear-gradient(rgba(245, 196, 107, .12), rgba(245, 196, 107, .12)), rgba(8, 16, 70, .5); }
  .pz-card .pc-puzzle-feedback[data-tone="good"] { background: linear-gradient(rgba(107, 217, 140, .12), rgba(107, 217, 140, .12)), rgba(8, 16, 70, .5); }
  .pz-card .pc-puzzle-feedback[data-tone="wrong"] { background: linear-gradient(rgba(230, 84, 74, .12), rgba(230, 84, 74, .12)), rgba(8, 16, 70, .5); }
  .pz-card .pc-puzzle-eyebrow { color: #FFD98A; }
}
@media (min-width: 600px) {
  .pz-card {
    --bw: 440px;
    width: calc(var(--bw) + 40px); max-width: 100%;
    padding: 18px 20px 20px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(9, 18, 74, .62), rgba(6, 12, 52, .74));
    box-shadow: inset 0 0 0 1px rgba(255, 214, 120, .34), 0 60px 110px -40px rgba(4, 10, 50, .85);
  }
  .pz-mount { min-height: calc(var(--bw) + 254px); }
}
@media (min-width: 1024px) {
  .pz-card { --bw: clamp(340px, calc(100vh - 400px), 440px); }
  /* The puzzle card is the tallest stage: its copy starts beside the board and stays beside it while it scrolls. */
  .s-puzzle .grid { align-items: start; }
  .s-puzzle .copy { position: sticky; top: calc(var(--head-h) + 48px); padding-top: clamp(16px, 4vh, 48px); }
}

/* After a solve (or the answer): the nudge to the app (BRIEF §6.2), under the finished card. Never shown without JS. */
.pz-nudge { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding-inline: 4px; }
.s-puzzle[data-done] .pz-nudge { display: flex; }
/* The copy column's copy of the nudge is for two-column layouts only. */
.s-puzzle[data-done] .pz-nudge.pz-nudge-side { display: none; }
@media (min-width: 1024px) {
  /* Desktop: the finished puzzle's nudge sits in the copy column under the how-to line, on screen beside the board,
     instead of under the card (below the fold). */
  .s-puzzle[data-done] .pz-card .pz-nudge { display: none; }
  .s-puzzle[data-done] .pz-nudge.pz-nudge-side { display: flex; }
  .pz-nudge-side { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; padding: 0; }
  .pz-nudge.pz-nudge-side p { flex: none; font-size: 18px; }
}
/* Finished: the card is as tall as its content (the reserved playing height would leave a gap above the nudge). */
.s-puzzle[data-done] .pz-mount { min-height: 0; }
.pz-nudge p { margin: 0; flex: 1 1 13em; font: 600 16px/1.35 var(--text); color: #fff; text-wrap: balance; }
.pz-get {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: 700 15px/1 var(--text); color: #fff; text-decoration: none; white-space: nowrap;
  background: rgba(8, 16, 70, .4); box-shadow: inset 0 0 0 2px rgba(255, 214, 120, .85);
}
@media (hover: hover) { .pz-get:hover { background: rgba(8, 16, 70, .6); } }
@media (prefers-reduced-motion: no-preference) {
  .s-puzzle[data-done] .pz-nudge { animation: nudge-in .5s cubic-bezier(.2, .8, .2, 1) .5s both; }
}
@keyframes nudge-in { from { opacity: 0; transform: translateY(8px); } }

/* No-JS / slow-load stills: the live board replaces them (site.js removes the still when it mounts). */
.still { width: 100%; height: auto; aspect-ratio: 1; border-radius: 3.4%; }
.pz-still .still { box-shadow: 0 30px 60px -20px rgba(4, 10, 50, .75), 0 0 0 1px rgba(255, 255, 255, .1); }
.demo-board .still { position: absolute; inset: 0; box-shadow: 0 40px 80px -28px rgba(4, 10, 50, .8), 0 0 0 1px rgba(255, 255, 255, .12); }
.still-note { margin: 4px 0 0; font: 600 14px/1.4 var(--text); color: var(--faint); }

/* Solve celebration (graft from concept C): gold rays and a board glow behind the confetti and the cheer card. */
.pz-rays {
  position: absolute; z-index: -1; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; pointer-events: none;
  translate: -50% -50%; scale: .72; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .42) 0deg 5deg, rgba(255, 214, 120, 0) 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, .55) 52%, rgba(0, 0, 0, 0) 76%);
  mask: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, .55) 52%, rgba(0, 0, 0, 0) 76%);
}
.pz-card .pc-puzzle-board::before {
  content: ""; position: absolute; z-index: -1; inset: -14%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .55), rgba(255, 201, 77, .16) 55%, rgba(255, 201, 77, 0));
}
.s-puzzle[data-solved] .pz-rays { opacity: 1; scale: 1; rotate: 14deg; }
.s-puzzle[data-solved] .pc-puzzle-board::before { opacity: 1; }
.s-puzzle[data-solved] .pc-puzzle-board .pc-board { box-shadow: 0 30px 60px -20px rgba(4, 10, 50, .75), 0 0 0 2px rgba(255, 214, 120, .7), 0 0 90px rgba(255, 201, 77, .45); }
@media (prefers-reduced-motion: no-preference) {
  .pz-rays { transition: opacity .9s ease, scale 1.6s cubic-bezier(.2, .8, .2, 1), rotate 6s linear; }
  .pz-card .pc-puzzle-board::before { transition: opacity .8s ease; }
  .s-puzzle[data-solved] .pc-puzzle-board .pc-board { animation: board-glow 1.8s ease-out both; }
}
@keyframes board-glow {
  0% { box-shadow: 0 30px 60px -20px rgba(4, 10, 50, .75), 0 0 0 1px rgba(255, 255, 255, .1); }
  28% { box-shadow: 0 30px 60px -20px rgba(4, 10, 50, .75), 0 0 0 3px rgba(255, 214, 120, .95), 0 0 140px 14px rgba(255, 201, 77, .6); }
  100% { box-shadow: 0 30px 60px -20px rgba(4, 10, 50, .75), 0 0 0 2px rgba(255, 214, 120, .7), 0 0 90px rgba(255, 201, 77, .45); }
}

/* ------------------------------------------------------------------ demos (hint, undo) */
.stage-demo { width: 100%; }
.demo { position: relative; width: 100%; max-width: 460px; }
@media (max-width: 359px) { .demo { width: calc(100% + 16px); margin-inline: -8px; } }
.demo-board { position: relative; aspect-ratio: 1; }
.demo-board .pc-board { box-shadow: 0 40px 80px -28px rgba(4, 10, 50, .8), 0 0 0 1px rgba(255, 255, 255, .12); }
.demo-cap {
  position: relative; z-index: 7;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 72px; margin: 16px 0 0;
  padding: 12px 16px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(40, 33, 24, .97), rgba(26, 23, 26, .98));
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14), 0 30px 50px -20px rgba(4, 10, 50, .8);
  transition: box-shadow .3s ease;
}
.demo-cap[data-tone="hint"], .demo-cap[data-tone="solved"] { box-shadow: 0 0 0 2.5px rgba(255, 214, 120, .92), 0 30px 50px -20px rgba(4, 10, 50, .8); }
.demo-cap[data-tone="threat"] { box-shadow: 0 0 0 2.5px rgba(240, 120, 79, .95), 0 30px 50px -20px rgba(4, 10, 50, .8); }
.demo-cap[data-tone="wrong"] { box-shadow: 0 0 0 2.5px rgba(230, 84, 74, .95), 0 30px 50px -20px rgba(4, 10, 50, .8); }
.cap-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .1) center / 20px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.8)' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a1 1 0 0 1 1-1h11l4 4v11.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E");
}
.demo-cap[data-tone="hint"] .cap-icon {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23331F08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"), var(--btn-grad);
  background-size: 20px, cover; background-position: center;
}
.demo-cap[data-tone="threat"] .cap-icon {
  background-color: rgba(240, 120, 79, .22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0784F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.4-3.4 8-8 9-4.6-1-8-4.6-8-9V6z'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E");
}
.cap-t { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
/* The hint demo's caption keeps one height through the loop: room for two lines in every state (the threat line
   and the opening name take two on phones), so nothing below it moves. */
[data-demo="hint"] .demo-cap { min-height: 82px; }
[data-demo="hint"] .cap-tx { text-wrap: balance; }
.cap-tx b { font-weight: 600; }
.cap-var { color: rgba(255, 255, 255, .76); }
.cap-tx .nw { white-space: nowrap; }
@media (max-width: 374px) { .cap-tx .nw { white-space: normal; } }
@media (max-width: 389px) {
  [data-demo="hint"] .demo-cap { gap: 10px; }
  [data-demo="hint"] .cap-icon { width: 34px; height: 34px; background-size: 18px; }
  [data-demo="hint"] .demo-cap[data-tone="hint"] .cap-icon { background-size: 18px, cover; }
  [data-demo="hint"] .cap-tx { font-size: 15px; }
}
@media (max-width: 359px) {
  /* The undo caption's 320 px size and padding, so the threat line stays on one line. */
  [data-demo="hint"] .demo-cap { padding-inline: 12px 10px; }
  [data-demo="hint"] .cap-tx { font-size: 14px; }
  [data-demo="hint"] .demo-cap[data-tone="threat"] .cap-tx { letter-spacing: -.01em; }
}
/* Phones: the opening's long name keeps one line and ends in an ellipsis (the board's label names it in full). */
@media (max-width: 439px) {
  [data-demo="hint"] .demo-cap.is-opening .cap-tx, [data-demo="hint"] .demo-cap.is-opening .cap-tx .nw { white-space: nowrap; }
  [data-demo="hint"] .demo-cap.is-opening .cap-tx { overflow: hidden; text-overflow: ellipsis; }
}
/* Phones: the round icon becomes a small glyph before the eyebrow, so the threat, nudge and move lines keep one
   line from 375 px up (the opening's long name takes two; the caption's height is set for two either way). */
@media (max-width: 439px) {
  [data-demo="hint"] .cap-icon { display: none; }
  [data-demo="hint"] .cap-eb::before {
    content: ""; display: inline-block; width: 13px; height: 13px; margin: -2px 6px 0 0; vertical-align: middle;
    background: currentColor;
    -webkit-mask: var(--cap-glyph) center / contain no-repeat; mask: var(--cap-glyph) center / contain no-repeat;
  }
  [data-demo="hint"] .demo-cap { --cap-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a1 1 0 0 1 1-1h11l4 4v11.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
  [data-demo="hint"] .demo-cap[data-tone="hint"] { --cap-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
  [data-demo="hint"] .demo-cap[data-tone="threat"] { --cap-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.4-3.4 8-8 9-4.6-1-8-4.6-8-9V6z'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E"); }
}
.cap-eb { font: 800 11px/1.2 var(--rounded); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.demo-cap[data-tone="threat"] .cap-eb { color: #F0784F; }
.demo-cap[data-tone="wrong"] .cap-eb { color: #F28A80; }
.cap-eb:empty { display: none; }
.cap-tx { font: 500 16px/1.3 var(--text); color: #fff; }
.demo-cap-undo { justify-content: space-between; }
.demo-cap-undo .cap-tx { font: 600 17px/1.3 var(--serif); color: #FFE091; word-spacing: .06em; text-wrap: balance; }
.undo-pill {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px;
  font: 700 15px/1 var(--text); color: var(--on-gold); white-space: nowrap;
  background: var(--btn-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -8px rgba(235, 173, 61, .7);
}
.undo-pill svg { width: 17px; height: 17px; }
/* Phones: the longest moves line ("2. Qh5 Nc6 3. Qxe5+ Nxe5") stays on one line beside the Undo pill, with room
   to spare (it only wraps if a reader spaces text out). */
@media (max-width: 429px) {
  .demo-cap-undo { gap: 8px; padding-inline: 14px 12px; }
  .demo-cap-undo .cap-tx { font-size: 16px; word-spacing: 0; }
}
@media (max-width: 374px) { .demo-cap-undo .cap-tx { font-size: 15px; } }
@media (max-width: 359px) {
  .demo-cap-undo { padding-inline: 12px 10px; }
  .demo-cap-undo .cap-tx { font-size: 14px; }
  .undo-pill { height: 36px; padding: 0 12px 0 10px; font-size: 14px; }
}
.undo-pill.cue { animation: pill .7s ease-out; }
@keyframes pill { 0% { scale: 1; } 35% { scale: .9; box-shadow: 0 0 0 8px rgba(245, 196, 107, .25); } 100% { scale: 1; } }

.round-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  color: #fff; background: rgba(8, 16, 70, .5); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 24px -12px rgba(4, 10, 50, .8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.round-btn[hidden] { display: none; }
.round-btn svg { width: 15px; height: 15px; fill: currentColor; }
.round-btn .i-play, .round-btn.is-paused .i-pause { display: none; }
.round-btn.is-paused .i-play { display: block; }
@media (hover: hover) { .round-btn:hover { background: rgba(8, 16, 70, .7); } }
.demo-pause { position: absolute; z-index: 9; right: 0; top: -54px; }
/* Phones and tablets: the hint stage keeps a band above the board for the pause button, clear of the copy. */
@media (max-width: 1023px) { .s-hint .stage-demo { padding-top: 58px; } }
/* 1024–1439: the right gutter is too narrow, so the button sits in the gap between copy and board. */
@media (min-width: 1024px) { .demo-pause { right: auto; left: -62px; top: 0; } }
@media (min-width: 1440px) { .demo-pause { left: auto; right: -62px; } }

/* Undo: the queen that was given away hovers by the board. */
/* Undo: the queen that was given away hovers by the board (anchored to the board's box, never over a square). */
.stage-undo { position: relative; padding-top: 60px; }
.piece-queen { width: 74px; left: -4px; top: -78px; rotate: -12deg; z-index: 8; }
@media (min-width: 700px) { .stage-undo { padding-top: 84px; } .piece-queen { width: 92px; left: -24px; top: -100px; } }
@media (min-width: 1024px) {
  .stage-undo { padding-top: 0; }
  /* 1024–1439: set down beside the Moves caption, in the gap between copy and board (always on screen). */
  .piece-queen { width: 128px; left: -126px; top: auto; bottom: 4px; rotate: -10deg; }
}
@media (min-width: 1440px) {
  /* Wide screens have room in the right gutter. */
  .piece-queen { width: 150px; left: auto; right: -142px; bottom: 70px; rotate: 10deg; }
}

/* ------------------------------------------------------------------ rivals: picker + face-off */
.riv-top { display: grid; gap: 30px; }
.picker {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 6px; align-items: start;
  margin: 0; padding: 0; border: 0; min-width: 0;
}
/* "Choose your opponent." shown as the picker's label (floated, so it is a normal grid item spanning the row,
   not a legend drawn in the fieldset border). */
.pick-legend {
  float: left; grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px; margin: 0 0 -2px; padding: 0;
  font: 600 15px/1.3 var(--text); color: var(--faint);
}
.pick { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px 0 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: center; }
/* The (invisible) radio sits at the ring's centre, so focusing it never needs a scroll while its ring is on screen. */
.pick input { position: absolute; top: 40px; left: 50%; margin: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ring {
  position: relative; display: block; width: 92px; aspect-ratio: 1; border-radius: 50%; padding: 4px; margin-bottom: 8px;
  background: linear-gradient(160deg, #FFE7A0, #FFC94D 45%, #D9973A);
  box-shadow: 0 14px 28px -12px rgba(4, 10, 50, .85);
}
.ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #1A171A; }
.pick-name { font: 700 20px/1.1 var(--serif); color: #fff; }
.pick-meta { font: 600 13px/1.3 var(--text); color: var(--eyebrow); white-space: nowrap; }
.pick-meta .sep { white-space: pre; }
/* Selected: a solid light-gold ring outside a navy gap (≥ 3:1 on cobalt), plus the warm glow. */
.pick input:checked + .ring { box-shadow: 0 0 0 4px #0A1550, 0 0 0 7px #FFE6AE, 0 0 36px 6px rgba(255, 201, 77, .55), 0 14px 28px -12px rgba(4, 10, 50, .85); }
.pick input:checked ~ .pick-name { color: var(--gold-light); }
.pick input:focus-visible + .ring { outline: 3px solid #fff; outline-offset: 11px; }
@media (hover: hover) { .pick:hover .ring { box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 14px 28px -12px rgba(4, 10, 50, .85); } }
@media (max-width: 359px) {
  .ring { width: 76px; }
  .pick-name { font-size: 18px; }
  .pick-meta { font-size: 12px; }
  .pick-meta .sep { display: none; }
  .pick-meta > span:not(.sep) { display: block; }
}
@media (min-width: 700px) { .picker { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ring { width: 96px; } }
@media (min-width: 1024px) {
  /* Desktop: the hook with the sentence beside it, then the six rings in one row (as on tablets) right above the
     face-off, so the picked ring and the whole card fit on one 1366 × 768 or 1280 × 720 screen. */
  .riv-top { gap: 26px; }
  .s-rivals .copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: end; }
  .s-rivals .copy .lede { margin: 0 0 .2em; }
  .picker { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 12px; }
  .ring { width: 96px; }
  .pick-name { font-size: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ring { transition: box-shadow .35s ease, translate .35s cubic-bezier(.2, .8, .2, 1); }
  .pick input:checked + .ring { translate: 0 -4px; }
}

/* The face-off card, modelled on the app's match intro (VirtualOpponentViews.swift), restyled for cobalt:
   navy panels, a gold rim, navy shadows. Phone: stacked like the app. From 760 px: side by side. */
.faceoff {
  --seam-x: 50%; --seam-y: 63%;
  --fo-navy: #0A1550;
  /* Not clipped itself (.fo-art clips the picture layers), so the card can grow to fit its text when a reader
     spaces text out (WCAG 1.4.12) instead of cutting it off. */
  position: relative; isolation: isolate; display: flow-root;
  width: 100%; max-width: 440px; aspect-ratio: 358 / 600; margin: 34px auto 0;
  border-radius: 30px;
  background: linear-gradient(180deg, #0E1E6A, var(--fo-navy));
  box-shadow: inset 0 0 0 1.5px rgba(255, 214, 120, .5), 0 60px 110px -40px rgba(4, 10, 50, .85), 0 0 90px -24px rgba(255, 201, 77, .3);
  color: var(--ivory);
  font-family: var(--serif);
  container-type: inline-size;
}
.fo-art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.fo-panel { position: absolute; inset: 0; }
.fo-rival { clip-path: polygon(0 0, 100% 0, 100% 69%, 0 57%); background: var(--fo-navy); }
.fo-portrait { position: absolute; left: 0; top: -6%; width: 100%; height: 76%; object-fit: cover; object-position: 50% 30%; }
.fo-shade {
  position: absolute; left: 0; top: 0; width: 100%; height: 69.5%;
  background: linear-gradient(180deg, rgba(10, 21, 80, .6) 0%, rgba(10, 21, 80, 0) 16%, rgba(10, 21, 80, 0) 30%, rgba(10, 21, 80, .62) 52%, rgba(10, 21, 80, .9) 76%, #0A1550 100%);
}
.fo-you {
  clip-path: polygon(0 56.2%, 100% 68.2%, 100% 100%, 0 100%);
  background:
    radial-gradient(ellipse 60% 30% at 27% 80%, rgba(245, 196, 107, .32), rgba(245, 196, 107, 0) 100%),
    linear-gradient(180deg, #13247A 40%, var(--fo-navy) 100%);
}
.fo-dust {
  position: absolute; inset: 58% 0 0 0; opacity: .75;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 30%, rgba(255, 224, 145, .8), transparent),
    radial-gradient(1px 1px at 40% 62%, rgba(255, 224, 145, .7), transparent),
    radial-gradient(1.5px 1.5px at 66% 24%, rgba(255, 224, 145, .6), transparent),
    radial-gradient(1px 1px at 82% 70%, rgba(255, 224, 145, .7), transparent),
    radial-gradient(1px 1px at 10% 82%, rgba(255, 224, 145, .6), transparent),
    radial-gradient(1.5px 1.5px at 56% 88%, rgba(255, 224, 145, .5), transparent);
}
.fo-king {
  position: absolute; z-index: 2; width: 27%; height: auto; left: 8%; top: 66%;
  filter: drop-shadow(0 12px 18px rgba(4, 10, 50, .7)) drop-shadow(0 0 24px rgba(245, 196, 107, .4));
}
.fo-seam { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fo-seam line { fill: none; stroke: url(#fo-seam-g); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(245, 196, 107, .8)); }
.fo-seam .seam-land { display: none; }
.fo-vs { position: absolute; z-index: 4; left: var(--seam-x); top: var(--seam-y); width: 0; height: 0; }
.fo-vs-disc {
  position: absolute; left: -42px; top: -42px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 38%, #1B2C86 0%, #0A1550 72%) padding-box,
    linear-gradient(180deg, #FFE6A3, #F5C46B 50%, #B87A33) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 26px rgba(245, 196, 107, .5), 0 12px 24px rgba(4, 10, 50, .6);
}
.fo-vs-disc span {
  font: 900 36px/1 var(--serif); letter-spacing: -.02em; padding-top: 3px;
  background: linear-gradient(135deg, #FFE6A3 10%, #F5C46B 50%, #B87A33 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fo-sparks { position: absolute; left: 0; top: 0; }
.fo-sparks i {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; opacity: 0;
  background: #FFE6A3;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px rgba(255, 214, 120, .9));
}
.fo-sparks i:nth-child(1) { --a: 0deg; --d: 88px; }
.fo-sparks i:nth-child(2) { --a: 36deg; --d: 72px; }
.fo-sparks i:nth-child(3) { --a: 72deg; --d: 96px; }
.fo-sparks i:nth-child(4) { --a: 108deg; --d: 68px; }
.fo-sparks i:nth-child(5) { --a: 144deg; --d: 92px; }
.fo-sparks i:nth-child(6) { --a: 180deg; --d: 78px; }
.fo-sparks i:nth-child(7) { --a: 216deg; --d: 100px; }
.fo-sparks i:nth-child(8) { --a: 252deg; --d: 70px; }
.fo-sparks i:nth-child(9) { --a: 288deg; --d: 90px; }
.fo-sparks i:nth-child(10) { --a: 324deg; --d: 76px; }

.fo-eyebrow {
  position: absolute; z-index: 4; left: 50%; top: 18px; translate: -50% 0; white-space: nowrap;
  padding: 7px 12px 7px 15px; border-radius: 999px;
  font: 600 12px/1 var(--serif); letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
  /* A navy pill, like the level pill, so the gold reads on any portrait (bright water, lamp glow). */
  background: rgba(10, 21, 80, .78); box-shadow: inset 0 0 0 1px rgba(245, 196, 107, .35);
}
.fo-who { position: absolute; z-index: 4; left: 20px; right: 20px; bottom: calc(43% + 18px); display: grid; justify-items: start; gap: 9px; }
.fo-name { font: 700 clamp(36px, 12.5cqi, 52px)/.95 var(--serif); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 2px 4px rgba(4, 10, 50, .6), 0 3px 18px rgba(4, 10, 50, .85); }
.fo-tags { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.fo-level {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  font: 700 11.5px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  box-shadow: inset 0 0 0 1.5px var(--gold); background: rgba(10, 21, 80, .6);
}
.fo-spec { font: 700 11px/1.2 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); text-shadow: 0 1px 2px rgba(4, 10, 50, .9), 0 1px 8px rgba(4, 10, 50, .9); }
.fo-form {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 11px; border-radius: 999px;
  font: 600 14px/1 var(--serif); color: var(--ivory);
  background: rgba(10, 21, 80, .72); box-shadow: inset 0 0 0 1px rgba(190, 205, 240, .7);
}
.fo-form b { font-weight: 700; }
.fo-form svg { width: 18px; height: 12px; color: #fff; }
.fo-me { display: grid; justify-items: end; gap: 7px; margin-right: 2px; text-align: right; }
.fo-you-name { font: 700 clamp(36px, 12.5cqi, 52px)/.95 var(--serif); letter-spacing: .05em; text-transform: uppercase; }
.fo-side { font: 700 11px/1.2 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.fo-summary {
  text-align: center;
  font: italic 500 15px/1.38 var(--serif); color: rgba(255, 230, 163, .96); text-wrap: balance;
}
/* Phone: "YOU / Playing white" from 74% down and the summary at the bottom, in one block in normal flow that is
   at least that tall and makes the card taller (instead of overflowing it) when a reader spaces text out. */
.fo-foot {
  position: relative; z-index: 4; margin: 124cqi 18px 18px; min-height: calc(43.6cqi - 18px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
/* Phone geometry in container units (100cqi = the card's width; at its 358 : 600 ratio it is 167.6cqi tall), so
   the portrait, the seam, the VS medallion and the name stay where they are if the card grows at the bottom. */
@media (max-width: 759px) {
  .faceoff { --seam-y: 105.6cqi; }
  .fo-rival { clip-path: polygon(0 0, 100% 0, 100% 115.6cqi, 0 95.5cqi); }
  .fo-portrait { top: -10.06cqi; height: 127.4cqi; }
  .fo-shade { height: 116.5cqi; }
  .fo-you { clip-path: polygon(0 94.2cqi, 100% 114.3cqi, 100% 100%, 0 100%); }
  .fo-dust { inset: 97.2cqi 0 0 0; }
  .fo-king { top: 110.6cqi; }
  .fo-seam { bottom: auto; height: 167.6cqi; }
  .fo-who { bottom: auto; top: calc(95.5cqi - 18px); translate: 0 -100%; }
}
@media (min-width: 760px) {
  .faceoff {
    --seam-x: 52%; --seam-y: 46%;
    max-width: 1080px; aspect-ratio: 1000 / 470; border-radius: 34px; margin-top: 40px;
  }
}
/* Desktop: the card spans the section's content width (lines up with the hook and the picker) and is a little
   shorter, so the rings and the whole card fit on one 1440 × 900 screen. */
@media (min-width: 1024px) {
  .faceoff { max-width: none; aspect-ratio: 1000 / 420; }
  /* Short desktops: the card is capped so the row of rings (about 160 px), the 40 px gap and the card fit under the
     compact header. */
  .faceoff { max-height: max(400px, calc(100vh - 290px)); }
}
@media (min-width: 760px) {
  .fo-rival { clip-path: polygon(0 0, 58.3% 0, 46.3% 100%, 0 100%); }
  .fo-portrait { top: 0; width: 60%; height: 100%; object-position: 50% 28%; }
  .fo-shade {
    width: 60%; height: 100%;
    /* Left: a soft navy band under the name, level, specialty and form; right: the seam side. */
    background:
      linear-gradient(90deg, rgba(10, 21, 80, .55) 0%, rgba(10, 21, 80, .3) 30%, rgba(10, 21, 80, 0) 55%, rgba(10, 21, 80, .7) 100%),
      linear-gradient(180deg, rgba(10, 21, 80, .5) 0%, rgba(10, 21, 80, 0) 22%, rgba(10, 21, 80, 0) 30%, rgba(10, 21, 80, .55) 50%, rgba(10, 21, 80, .9) 80%, #0A1550 100%);
  }
  .fo-you {
    clip-path: polygon(57.7% 0, 100% 0, 100% 100%, 45.7% 100%);
    background:
      radial-gradient(ellipse 30% 52% at 68% 60%, rgba(245, 196, 107, .32), rgba(245, 196, 107, 0) 100%),
      linear-gradient(180deg, #13247A 0%, var(--fo-navy) 100%);
  }
  .fo-dust { inset: 0 0 0 50%; }
  .fo-king { width: 23%; left: 57%; top: auto; bottom: 7%; }
  .fo-seam .seam-land { display: inline; }
  .fo-seam .seam-port { display: none; }
  .fo-vs-disc { left: -46px; top: -46px; width: 92px; height: 92px; }
  .fo-vs-disc span { font-size: 40px; }
  .fo-eyebrow { left: 40px; top: 30px; translate: none; }
  .fo-who { left: 40px; right: auto; bottom: 120px; max-width: 44%; gap: 10px; }
  .fo-name, .fo-you-name { font-size: clamp(46px, 6.2cqi, 66px); }
  .fo-foot { display: contents; }
  .fo-me { position: absolute; z-index: 4; right: 44px; top: 30%; margin: 0; }
  .fo-summary { position: absolute; z-index: 4; left: 40px; bottom: 34px; width: 38%; text-align: left; font-size: 17px; }
}
/* Tablets (760–1023): a taller card, so the name, level and form sit below the rival's face, not across the eyes. */
@media (min-width: 760px) and (max-width: 1023px) { .faceoff { aspect-ratio: 1000 / 620; } }
/* 1024–1439: the card is a little shorter than wide screens' at the same width ratio: the portrait is lifted so
   the face sits above the name. */
@media (min-width: 1024px) and (max-width: 1439px) { .fo-portrait { object-position: 50% 40%; } }

/* Face-off motion: plays when it is revealed or a new rival is picked. Reduced motion: a plain fade. */
@media (prefers-reduced-motion: no-preference) {
  .faceoff[data-play] .fo-rival, .faceoff[data-play] .fo-portrait { animation: fo-in-r .72s cubic-bezier(.2, .85, .25, 1) both; }
  .faceoff[data-play] .fo-you { animation: fo-in-l .72s cubic-bezier(.2, .85, .25, 1) .16s both; }
  .faceoff[data-play] .fo-seam { animation: fo-seam-h .34s ease-in-out .58s both; }
  .faceoff[data-play] .fo-vs-disc { animation: fo-vs .46s cubic-bezier(.3, 1.55, .5, 1) .8s both; }
  .faceoff[data-play] .fo-sparks i { animation: fo-spark .75s cubic-bezier(.15, .8, .3, 1) .9s both; }
  .faceoff[data-play] { animation: fo-shake .32s linear 1.02s; }
  .faceoff[data-play] .fo-detail { animation: fo-up .6s cubic-bezier(.2, .8, .2, 1) 1.08s both; }
  .faceoff[data-play] .fo-king { animation: fo-in-l .72s cubic-bezier(.2, .85, .25, 1) .16s both, fo-bob 2.3s ease-in-out 1.2s 2 alternate; }
}
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) { .faceoff[data-play] .fo-seam { animation-name: fo-seam-v; } }
@media (prefers-reduced-motion: reduce) {
  .faceoff[data-play] .fo-rival, .faceoff[data-play] .fo-portrait, .faceoff[data-play] .fo-detail, .faceoff[data-play] .fo-king { animation: fo-fade .35s ease-out both; }
  .fo-sparks { display: none; }
}
@keyframes fo-in-r { from { opacity: 0; transform: translateX(7%); } }
@keyframes fo-in-l { from { opacity: 0; transform: translateX(-7%); } }
@keyframes fo-seam-h { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fo-seam-v { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fo-vs { from { opacity: 0; transform: scale(2.3); } to { opacity: 1; transform: none; } }
@keyframes fo-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.2); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); }
}
@keyframes fo-shake { 0%, 100% { transform: none; } 16% { transform: translateX(-6px); } 35% { transform: translateX(5px); } 55% { transform: translateX(-3px); } 75% { transform: translateX(2px); } }
@keyframes fo-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes fo-bob { to { translate: 0 -6px; } }
@keyframes fo-fade { from { opacity: 0; } }

.s-rivals .fine { margin: 20px auto 0; max-width: 62ch; text-align: center; text-wrap: balance; }

/* ------------------------------------------------------------------ review flow chips (graft from concept C) */
.flow { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.flow li { display: grid; justify-items: start; gap: 8px; }
.flow-note { font: 600 13.5px/1.3 var(--text); color: var(--faint); padding-left: 4px; }
.flow-arrow { flex: none; color: rgba(255, 214, 120, .85); padding-top: 12px; }
.flow-arrow svg { flex: none; width: 30px; height: 16px; }
/* Chips grow taller rather than clip when a reader spaces text out. */
.flow { flex-wrap: wrap; }
.flow .chip { height: auto; min-height: 40px; white-space: normal; padding-block: 6px; }
@media (max-width: 479px) {
  .flow { gap: 6px; }
  .flow .chip { min-height: 38px; padding-inline: 12px; font-size: 14.5px; gap: 6px; }
  .flow .chip svg { width: 15px; height: 15px; }
  .flow-arrow { padding-top: 11px; }
  .flow-arrow svg { width: 22px; }
  .flow-note { font-size: 12.5px; padding-left: 2px; }
}
@media (max-width: 389px) {
  /* 320–389 (iPhone SE / mini at 375 included): the row needs ~345 px, so the two steps stack, each chip with its
     note beside it, a small down arrow between them. */
  .flow { flex-direction: column; align-items: flex-start; gap: 2px; }
  .flow li { display: flex; align-items: center; gap: 10px; }
  .flow .chip svg { display: none; }
  .flow .chip { min-width: 150px; justify-content: center; }
  .flow-note { max-width: 9em; }
  .flow-arrow { padding: 0 0 0 54px; }
  .flow-arrow svg { width: 18px; height: 18px; rotate: 90deg; }
}

/* ------------------------------------------------------------------ coach */
.asks { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.asks li {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  font: 600 15px/1.2 var(--text); color: #fff; background: rgba(28, 38, 71, .55);
  box-shadow: inset 0 0 0 1.5px rgba(255, 214, 120, .7);
}

/* ------------------------------------------------------------------ two players + iPhone Duo (subordinate row) */
.s-two .grid { grid-template-areas: "copy" "stage" "duo"; }
.s-two .copy { grid-area: copy; }
.s-two .stage { grid-area: stage; }
.duo {
  grid-area: duo;
  display: grid; gap: 16px;
  max-width: 460px; padding: 14px 14px 20px; border-radius: 26px;
  background: rgba(8, 16, 70, .3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -30px rgba(4, 10, 50, .7);
}
/* The opened Duo, landscape: the board fills one page. Phones and tablets show only that page (source x 0–531,
   y 64–595 of the 900 × 660 capture) at the card's full width, so its board is clearly bigger than the iPhone
   board above it. */
.duo-shot {
  --nx: 0; --ny: 64; --nw: 531; --nh: 531;
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 6%; overflow: hidden; background: #0D0A0D;
  box-shadow: 0 18px 30px -14px rgba(4, 10, 50, .8);
}
.duo-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.duo-shot img {
  position: absolute; max-width: none; height: auto;
  width: calc(900 / var(--nw) * 100%);
  left: calc(var(--nx) / var(--nw) * -100%);
  top: calc(var(--ny) / var(--nh) * -100%);
}
.duo-t { min-width: 0; padding: 0 6px; }
.duo-t .eyebrow { margin-bottom: 8px; }
.duo-hook { margin: 0; font: 800 clamp(21px, 6.4vw, 26px)/1.1 var(--display); letter-spacing: -.02em; }
.duo-hook .l1, .duo-hook .l2 { display: block; }
.duo-hook .l2 { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (min-width: 1024px) {
  .s-two .grid { grid-template-areas: "stage copy" "duo duo"; grid-template-rows: auto auto; row-gap: 56px; }
  .s-two .copy { align-self: center; }
  /* Desktop: the Duo gets its own row under the two-player pair, its capture large enough that its board is
     clearly bigger than the iPhone board above (the claim it sits under). */
  .duo { justify-self: center; display: flex; align-items: center; gap: clamp(28px, 3vw, 48px); width: 100%; max-width: 1040px; padding: 18px 40px 18px 18px; border-radius: 30px; }
  /* Desktop: the whole opened Duo, both pages. */
  .duo-shot { flex: none; width: clamp(480px, 44vw, 600px); aspect-ratio: 900 / 660; border-radius: 4.5% / 6.1%; }
  .duo-shot img { position: static; width: 100%; height: 100%; }
  .duo-t { padding: 0; }
  .duo-t .eyebrow-name { font-size: 17px; margin-bottom: 12px; }
  .duo-hook { font-size: clamp(30px, 3vw, 44px); line-height: 1.04; letter-spacing: -.03em; }
}
@media (min-width: 1280px) {
  /* Wide desktops: the panel spans the content width like the face-off card, in the section's two columns, so the
     Duo's eyebrow and hook start on the same line as the copy above them. */
  .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); max-width: none; padding: 18px; }
  .duo-shot { width: 100%; }
}

/* ------------------------------------------------------------------ no ads (compact trust band) */
/* Hook + the two approved chips, one fine-print line for the one thing that needs internet, and the three board
   themes as small boards (the app's Board Theme setting: Classic, Slate, Parchment). */
.noads-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.s-noads .note { margin-top: 16px; color: rgba(255, 255, 255, .95); }
.styles-l { margin: 0 0 14px; font: 800 12px/1.2 var(--rounded); letter-spacing: .12em; text-transform: uppercase; color: var(--eyebrow); }
/* Three equal columns, each label centred under its swatch, so the boards sit on an even rhythm. */
.styles { display: grid; grid-template-columns: repeat(3, minmax(0, 92px)); gap: 14px 10px; margin: 0; padding: 0; list-style: none; font: 600 15px/1.2 var(--text); color: rgba(255, 255, 255, .95); }
.styles li { display: grid; justify-items: center; gap: 9px; }
/* 4 × 4 squares, dark in the bottom-left corner like a1. */
.sw {
  display: block; width: 60px; height: 60px; border-radius: 10px;
  background: var(--sw) 0 0 / 50% 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .28), 0 14px 26px -12px rgba(4, 10, 50, .85);
}
.sw-classic { --sw: conic-gradient(#A88566 0 25%, #F2E6D1 0 50%, #A88566 0 75%, #F2E6D1 0); }
.sw-slate { --sw: conic-gradient(#6B7D8F 0 25%, #D6DEE3 0 50%, #6B7D8F 0 75%, #D6DEE3 0); }
.sw-parch { --sw: conic-gradient(#B39473 0 25%, #F5EDDB 0 50%, #B39473 0 75%, #F5EDDB 0); }
.piece-king { display: none; }
@media (min-width: 1024px) {
  /* The hook column is sized so "Plain Chess." fits at the shared hook size from 1024 to 1920 px. */
  .noads-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) 200px; column-gap: clamp(32px, 4vw, 56px); align-items: center; }
  /* Desktop: a cool cyan glow behind the gold king (gold over cobalt mixes to a grey haze; cyan stays clean and
     sets the gold off), as on phones and tablets where it sits behind the hook. */
  .s-noads { --glow: rgba(40, 210, 255, .3); --gx: 88%; --gy: 50%; --gs: 600px; }
  .piece-king { display: block; width: 200px; margin: -20px 0; rotate: 6deg; }
}

/* ------------------------------------------------------------------ FAQ */
.faq-wrap { display: grid; gap: 28px; }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; column-gap: 64px; } .faq-wrap .copy { position: sticky; top: 110px; } }
.faq { display: grid; gap: 8px; }
/* Grid items may shrink below their longest word (the support email), so an open answer never widens the column. */
.faq-wrap > *, .faq > details { min-width: 0; }
.faq details {
  border-radius: 18px; background: rgba(8, 16, 70, .3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.faq details[open] { background: rgba(8, 16, 70, .45); box-shadow: inset 0 0 0 1px rgba(255, 214, 120, .45); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 54px; padding: 11px 18px; cursor: pointer; list-style: none;
  font: 650 16.5px/1.3 var(--text); border-radius: 18px;
  text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD27A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.faq details[open] summary::after { rotate: 45deg; }
@media (prefers-reduced-motion: no-preference) {
  .faq details { transition: background-color .25s ease, box-shadow .25s ease; }
  .faq summary::after { transition: rotate .25s ease; }
}
.faq details p { margin: 0; padding: 0 18px 18px; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.faq details a { color: var(--label-gold); text-underline-offset: 3px; }
.faq details a[href^="mailto:"] { overflow-wrap: anywhere; }
.faq .nw { white-space: nowrap; }

/* ------------------------------------------------------------------ closing CTA */
.s-cta .grid { row-gap: 0; }
.cta-icon {
  width: 96px; height: 96px; border-radius: 22.5%; margin-bottom: 24px;
  box-shadow: 0 0 0 2px rgba(255, 214, 120, .85), 0 30px 60px -20px rgba(4, 10, 50, .85), 0 0 50px rgba(255, 200, 90, .35);
}
.s-cta .get { margin-top: 30px; }
.s-cta .micro-search { margin-top: 18px; font-size: 15px; }
.stage-cta { order: -1; margin: calc(-1 * var(--sec-pad)) calc(-1 * var(--gutter)) -64px; }
/* The photo's studio is near-black (#020C1C): a soft pool of that colour sits behind it, so the masked edge
   melts into the cobalt instead of showing a rim, and the gold stays gold (no blend modes). */
.stage-cta::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 48%; width: 100%; aspect-ratio: 1.5; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(2, 12, 28, .9) 0%, rgba(2, 12, 28, .66) 36%, rgba(6, 18, 70, .32) 64%, rgba(6, 18, 70, .1) 84%, rgba(6, 18, 70, 0) 100%);
}
.knight-art {
  width: 140%; max-width: none; height: auto;
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 47%, #000 36%, rgba(0, 0, 0, .62) 54%, rgba(0, 0, 0, .2) 70%, transparent 82%);
  mask: radial-gradient(ellipse 50% 50% at 50% 47%, #000 36%, rgba(0, 0, 0, .62) 54%, rgba(0, 0, 0, .2) 70%, transparent 82%);
}
@media (min-width: 700px) {
  .stage-cta { margin: calc(-1 * var(--sec-pad)) 0 -80px; }
  .knight-art { width: 100%; }
}
@media (min-width: 1024px) {
  /* A wider copy column for the long closing line; the knight reaches into the gutter. */
  .s-cta .grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  /* The knight is sized to its column (which reaches into the gutter, never past the screen edge), so its masked
     floor and the dark pool fade out inside the window instead of being cut off by it. */
  .stage-cta { order: 0; margin: 0 calc(-1 * var(--gutter)) 0 -60px; }
  .knight-art { width: min(760px, 100%); max-width: 100%; margin: 0; }
  .cta-icon { width: 112px; height: 112px; }
}
/* Below 1024 the knight art sits right above the copy: the app icon (the same gold knight) would repeat it, so the
   art is the one hero object there (the header carries the icon). */
@media (max-width: 1023px) { .cta-icon { display: none; } }

/* ------------------------------------------------------------------ footer */
.site-foot { position: relative; z-index: 2; background: linear-gradient(180deg, #0E1E6A, #081548); padding: 40px 0 calc(36px + env(safe-area-inset-bottom)); font-size: 14px; color: var(--faint); }
.foot-in { display: grid; gap: 14px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font: 700 17px/1 var(--display); color: #fff; }
.foot-brand img { width: 30px; height: 30px; border-radius: 22.5%; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 8px; margin-left: -12px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: #fff; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.copyright, .tm { margin: 0; }
.foot-legal { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.tm { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); max-width: 70ch; }
@media (min-width: 1024px) {
  .foot-in { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 32px; }
  .foot-links { justify-content: center; margin-left: 0; }
}

/* ------------------------------------------------------------------ band (approved header loop) */
/* The band overlaps the hero's last --lap px (the hero is that much taller) and its own background fades in over
   them, so the hero's glow and shadows fade out instead of being cut off in a straight line where the band begins. */
.band {
  --lap: 90px;
  position: relative; margin: calc(-1 * var(--lap)) 0 -36px;
  background: linear-gradient(180deg, rgba(47, 95, 234, 0) 0, #2F5FEA var(--lap), #1A37B8 100%);
}
.band-media {
  position: relative; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 9%, #000 70%, transparent 98%);
  mask: linear-gradient(180deg, transparent 0, #000 9%, #000 70%, transparent 98%);
}
/* Phones: the wide poster, scaled so all six portraits and the king stay in frame with room at the edges; the
   blurred side pieces at the far left and right fade out instead of being sliced by the screen edge. */
.band-still { width: 120%; max-width: none; height: auto; margin-left: -10%; }
@media (max-width: 699px) {
  .band-media {
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 9%, #000 70%, transparent 98%), linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(180deg, transparent 0, #000 9%, #000 70%, transparent 98%) intersect, linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}
.band-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; }
.band.is-playing .band-video { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .band-video { transition: opacity .6s ease; } }
/* Bottom right of the band, clear of the six portraits at every width. */
.band-pause { position: absolute; right: max(var(--gutter), env(safe-area-inset-right)); bottom: 14%; z-index: 2; }
@media (min-width: 1024px) {
  /* The poster's light rays reach its top edge: a longer fade, so they never start on a line. */
  .band-media {
    -webkit-mask: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .45) 7%, #000 15%, #000 70%, transparent 98%);
    mask: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .45) 7%, #000 15%, #000 70%, transparent 98%);
  }
}
@media (min-width: 700px) {
  .band { margin-bottom: -56px; }
  .band-media { height: min(38vw, 600px); }
  .band-still { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 50% 0; }
}

/* ------------------------------------------------------------------ hero composition */
.s-hero { padding-top: calc(var(--head-h) + 24px); padding-bottom: calc(20px + 90px); }
/* A soft cobalt shade sits right behind the hook so the gold line keeps ≥ 3:1 on the brightest cobalt. */
.s-hero .copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* The box is larger than the shade, so the ellipse fades out inside it on every side and the box edge never
     shows as a straight line on wide screens (same shade as before: centre 0.36 × the copy width, radii 0.6 W and
     0.31 × the copy height). */
  left: -40%; top: -20%; width: 160%; height: 100%;
  background: radial-gradient(ellipse 37.5% 31% at 47.75% 51.2%, rgba(16, 35, 122, .38), rgba(16, 35, 122, 0) 100%);
}
@media (max-width: 699px) {
  .s-hero .glow, .s-hero .rays { --gy: 74%; --gs: 560px; }
  .s-hero .stage { margin-top: -4px; }
}
/* Short phones (iPhone SE class: 375 × 667, about 548 px visible in Safari with its toolbars): a tighter first
   screen, so the whole VICTORY / You won card is above the fold with the hook, sentence and badge. */
@media (max-width: 699px) and (max-height: 700px) {
  .s-hero .grid { row-gap: 20px; }
  .s-hero .lede { margin-top: 14px; }
  .s-hero .get { margin-top: 20px; }
  .s-hero .micro { margin-top: 14px; }
  .s-hero { padding-top: calc(var(--head-h) + 12px); }
  .s-hero .stage { margin-top: -10px; }
}
/* Phones held sideways: a tighter first screen and a wider sentence (two lines), so the App Store badge is above
   the fold under the browser's own bars. */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .s-hero { padding-top: calc(var(--head-h) + 10px); }
  .s-hero .lede { margin-top: 10px; max-width: 56ch; }
  .s-hero .get { margin-top: 14px; }
  .s-hero .micro { margin-top: 12px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .stage-hero .screen { width: 300px; margin-left: 0; }
  /* Tablets: the card lies over the capture's status bar and title pill (it hides all of their text), nearly
     parallel to the capture, and ends just above the Nova row, so "Nova · ~2050 Elo · Game Finished" stays in view
     as the proof of the win. The geometry is fixed from 700 to 1023 (fixed capture and card sizes). */
  .crop-victory { width: 226px; left: calc(50% - 150px - 27px); top: -21px; rotate: -2deg; }
  /* The card reaches 21 px above the capture: keep it well clear of the micro line. */
  .s-hero .stage { margin-top: 36px; }
}
@media (min-width: 1024px) {
  .s-hero { padding-bottom: calc(32px + 90px); }
  /* The hero fills the first screen, so the band starts at the fold (the band overlaps the hero's last 90 px): up to
     1,320 px of content, which covers 2560 × 1440 and 1920 × 1200 too. */
  .s-hero .grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); min-height: min(calc(100vh - var(--head-h) - 56px), 1320px); }
  .stage-hero { --hw: clamp(290px, 39vh, 340px); padding: 0; }
  .stage-hero .screen { width: var(--hw); margin: 0; }
  /* One rule at every desktop size: the card is placed in the capture's own frame (sized and positioned in units
     of the capture's width, turned with it about its centre), so it lies parallel to the capture and always covers
     the same source rows: from just under the board (source y 1962) over the whole "Philidor Defense" text and the
     "You" row; "Learn" and the captured pawns stay in view to its right. */
  .crop-victory {
    width: calc(var(--hw) * .7);
    left: auto; bottom: auto;
    right: calc(50% + var(--hw) * .05);
    top: calc(50% + var(--hw) * .4);
    rotate: -4deg;
    transform-origin: calc(var(--hw) * .75) calc(var(--hw) * -.4);
  }
}

/* ------------------------------------------------------------------ desktop composition */
@media (min-width: 700px) {
  .stage-hero .screen, .stage-review .screen, .stage-two .screen, .stage-coach .screen { margin-left: 0; }
  .piece-pawn { width: 180px; left: calc(50% - var(--screen-w) * .5 - 130px); }
}
@media (min-width: 1024px) {
  .crop-review { --pw: 410px; translate: -56% 0; }
  .piece-pawn { width: 190px; left: calc(50% - var(--screen-w) * .5 - 150px); bottom: -16px; }
}

/* ------------------------------------------------------------------ tablet (700–1023): centred, like the App Store
   screenshots: hook, sentence and chips centred over a centred capture or board, so every section is symmetric. */
@media (min-width: 700px) and (max-width: 1023px) {
  .copy { text-align: center; }
  .copy .lede, .copy .note, .copy .fine { margin-inline: auto; }
  .chips, .get, .micro, .howto, .flow, .styles, .pick-legend { justify-content: center; }
  .asks { align-items: center; }
  .flow li { justify-items: center; }
  .cta-icon { margin-inline: auto; }
  .s-cta .hook { margin-inline: auto; }
  .duo { margin-inline: auto; text-align: center; }
  .noads-facts { text-align: center; }
}

/* ------------------------------------------------------------------ motion: rise, pop, float, rays */
/* Only content without a badge rises: the hero and closing copy blocks are static (BRIEF rule 7/10). */
.motion [data-rise] { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.motion [data-rise].is-in { opacity: 1; transform: none; }
.motion .stage[data-rise] { --d: 120ms; }
.motion .duo[data-rise], .motion .noads-facts[data-rise] { --d: 200ms; }
.motion .stage[data-rise] .pop { opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .7s ease .45s, transform 1s cubic-bezier(.2, .8, .2, 1) .45s; }
.motion .stage[data-rise].is-in .pop { opacity: 1; transform: none; }
.motion .stage.is-in .float { animation: float 2.4s ease-in-out 1.4s 2; }
@keyframes float { 0%, 100% { translate: var(--tx, 0) 0; } 50% { translate: var(--tx, 0) -12px; } }
.crop-review { --tx: -50%; }
@media (min-width: 1024px) { .crop-review { --tx: -56%; } }
.motion .sec.is-lit .rays { animation: rays 4.8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rays { from { rotate: -8deg; opacity: 0; } to { rotate: 4deg; opacity: 1; } }
.motion .sec:not(.s-hero) .rays { opacity: 0; }
/* The hero's VICTORY card pops in once on load (CSS only, so it never flickers while the module loads). */
@media (prefers-reduced-motion: no-preference) {
  .crop-victory { animation: hero-pop .9s cubic-bezier(.2, .8, .2, 1) .35s both; }
}
@keyframes hero-pop { from { opacity: 0; translate: 0 30px; scale: .94; } }

@media (prefers-reduced-motion: reduce) {
  .site-head, .head-in, .demo-cap { transition: none; }
  .undo-pill.cue { animation: none; }
}
@media print {
  [data-rise], .pop { opacity: 1 !important; transform: none !important; }
  .site-head { position: static; }
}

.head-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 40px; }

/* Forced colours (Windows High Contrast): box-shadows are dropped there, so the picked rival gets a system-colour
   outline and an underlined name; keyboard focus on a ring is a wider Highlight outline. */
@media (forced-colors: active) {
  .pick input:checked + .ring { outline: 3px solid SelectedItem; outline-offset: 3px; }
  .pick input:checked ~ .pick-name { text-decoration: underline 2px; text-underline-offset: 4px; }
  .pick input:focus-visible + .ring { outline: 3px solid Highlight; outline-offset: 9px; }
}