/* ── Homepage preview: layered on top of the Play page's own styles ─────────
   Light and dark both follow the device, like the rest of the site. */
:root {
  /* The board, before and during play. As big as the screen allows (Oct 5 2026):
     the hero, rainbow line and intro fill the first screen, buttons below it. */
  --hbw: clamp(340px, min(48vw, calc(100vh - 232px)), 900px);
  --hh-side: calc((100vw - var(--hbw) - 2 * clamp(16px, 4vw, 56px) - 2 * var(--hh-gap)) / 2);
  --hh-gap: clamp(24px, 3vw, 44px);
  --g-cell: #D8D8D8; --g-block: #555555; --g-frame: #222222; --g-bg: #FFFFFF;
  --g-bub: #E2DFD8; --g-rim: #BFB9AE;
  --hb-ghost: #E3E3E6;
  --ink: #0E0E10; --ink-fg: #FFFFFF; --ink-line: #0E0E10;
}
@media (prefers-color-scheme: dark) {
  :root {
    --g-cell: #323232; --g-block: #A2A2A2; --g-frame: #DCDCDC; --g-bg: #181818;
    --g-bub: #2F2C27; --g-rim: #4D483E;
    --hb-ghost: #343437;
    --ink-line: #3A3A3D;
  }
  html.home-preview, html.home-preview body { background: #1D1D1D; }
}

/* ── Header: logo and one Menu button ── */
.home-bar { justify-content: space-between; }
.hb-menu {
  display: inline-flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 18px 0 14px;
  border-radius: 999px; background: transparent; border: 1.5px solid var(--hb-ghost); color: var(--text);
  font: 800 15px "Plus Jakarta Sans", sans-serif; cursor: pointer;
}
.hb-menu:hover { border-color: var(--muted); }
.hb-dots { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; }
.hb-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ── The hero: three columns around one board ── */
html.home-preview .play-wrap.home-wrap { max-width: none; padding: 14px clamp(16px, 4vw, 56px) 0; min-height: 0; }
html.home-preview .home-hero,
html.home-preview #game.home-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto;
  grid-template-areas: none; column-gap: var(--hh-gap); align-items: stretch;
  max-width: 1300px; margin: 0 auto; padding: 0; text-align: left;
  /* One row exactly as tall as the board, before and during play, so pressing
     Play adds the controls without moving anything on the page. */
  grid-template-rows: var(--hbw);
}
html.home-preview .home-hero.hidden,
html.home-preview #game.home-hero.hidden { display: none; }
.hh-left { grid-column: 1; grid-row: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; text-align: right; min-width: 0; }
.hh-right { grid-column: 3; grid-row: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-width: 0; }
.hh-center { grid-column: 2; grid-row: 1; width: var(--hbw); position: relative; }
.hh-word {
  margin: 0; font: 800 min(clamp(48px, 6.6vw, 96px), calc(var(--hbw) * 0.165), calc(var(--hh-side) / 3.5))/0.9 "Plus Jakarta Sans", sans-serif; letter-spacing: -0.045em; color: var(--text);
}
.hh-lbl { display: block; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.hh-date { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hh-dateval { font-size: min(22px, calc(var(--hh-side) / 9.4)); font-weight: 800; color: var(--text); white-space: nowrap; }
.hh-pill { margin-top: 6px; border: 2px solid var(--dc, #3D8AFF); color: var(--dc, #3D8AFF); border-radius: 999px; padding: 5px 14px; font-size: 14px; font-weight: 800; }
.hh-count { display: flex; flex-direction: column; gap: 4px; }
.hh-countval { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; color: var(--text); }

/* The masked board shown before Play (today's real layout, colors withheld). */
.ghost-board {
  position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr));
  width: 100%; aspect-ratio: 1; background: var(--g-bg); border: 2px solid var(--g-frame); box-sizing: border-box;
}
.ghost-board .gcell { display: flex; align-items: center; justify-content: center; border: 0.5px solid var(--g-cell); container-type: inline-size; }
.ghost-board .gbub { width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--g-bub); border: max(1px, calc(72cqw * .07)) solid var(--g-rim); box-sizing: border-box; animation: hhtwinkle 4s ease-in-out infinite; }
/* Twinkle: each bubble rests, then briefly dims, shrinks a touch and flares back. */
@keyframes hhtwinkle { 0%, 70%, 100% { opacity: 1; transform: scale(1); } 82% { opacity: calc(1 - .38 * var(--tw)); transform: scale(calc(1 - .07 * var(--tw))); } }
/* The twinkle eases in: the board sits still, then --tw rises from 0 to 1 over
   about twelve seconds while the bubbles join one by one (menu.js staggers
   their first start), so it arrives at full brightness and pace gradually. */
@property --tw { syntax: '<number>'; inherits: true; initial-value: 0; }
.ghost-board { --tw: 0; transition: --tw 6s cubic-bezier(.5, 0, .6, 1); }
.ghost-board.tw-on { --tw: 1; }
.ghost-board .gl { position: absolute; background: var(--g-block); }
.ghost-board .gl.v1 { top: 0; bottom: 0; left: calc(33.333% - 0.75px); width: 1.5px; }
.ghost-board .gl.v2 { top: 0; bottom: 0; left: calc(66.667% - 0.75px); width: 1.5px; }
.ghost-board .gl.h1 { left: 0; right: 0; top: calc(33.333% - 0.75px); height: 1.5px; }
.ghost-board .gl.h2 { left: 0; right: 0; top: calc(66.667% - 0.75px); height: 1.5px; }
.hh-cover {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
/* The start control: just the play triangle with the words under it.
   No circle, no fill. It reads as part of the board, not a button on top. */
.hh-play {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 22px;
  background: none; border: 0; cursor: pointer; color: var(--text); font: 800 18px "Plus Jakarta Sans", sans-serif;
  border-radius: 20px;
}
.hh-disc { display: grid; place-items: center; transition: transform .18s cubic-bezier(.2,.7,.2,1); }
.hh-disc svg { width: clamp(64px, 6vw, 84px); height: auto; margin-left: 8%; }
.hh-play:hover .hh-disc { transform: scale(1.08); }
.hh-play:active .hh-disc { transform: scale(.97); }
.hh-play:focus-visible { outline: 3px solid #3D8AFF; outline-offset: 4px; }
.hh-play-label { letter-spacing: -.2px; }
.hh-play.is-done .hh-play-label { color: var(--muted); }
/* Glass: a small frosted plate that just hugs the triangle and the words;
   the board's bubbles show through it, softened. */
.hh-play {
  gap: 6px; padding: 12px 18px 10px; border-radius: 18px; font-size: 16px;
  background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(6px) saturate(170%); backdrop-filter: blur(6px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 .5px rgba(0, 0, 0, .07), 0 6px 18px rgba(0, 0, 0, .09);
  transition: background .2s ease;
}
.hh-play .hh-disc svg { width: clamp(38px, 3.4vw, 50px); }
.hh-play:hover { background: rgba(255, 255, 255, .6); }
@media (prefers-color-scheme: dark) {
  .hh-play {
    background: rgba(38, 38, 40, .5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 .5px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .45);
  }
  .hh-play:hover { background: rgba(48, 48, 50, .6); }
}
.hh-note { font-size: 14px; font-weight: 500; color: var(--muted); }
.hh-loading { font-size: 16px; font-weight: 800; color: var(--text); }

/* ── Playing: the Play page's controls, moved beside the board ── */
html.home-preview #game .board-shell { width: var(--hbw) !important; grid-area: auto; }
.hh-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
html.home-preview #game .score-center { position: static; transform: none; text-align: right; pointer-events: auto; }
html.home-preview #game .score-center .score { font-size: min(60px, calc(var(--hbw) * 0.1)); line-height: .9; }
html.home-preview #game .score-line { justify-content: flex-end; }
html.home-preview #game .stats-row { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 0; }
html.home-preview #game .stats-row .stat,
html.home-preview #game .stats-row .stat.mid { position: static; transform: none; display: block; text-align: right !important; }
html.home-preview #game .stat .lbl { font-size: 12px; letter-spacing: 2px; }
html.home-preview #game .stat .val { font-size: 20px; margin-top: 2px; }
html.home-preview #game .hearts { font-size: 20px; margin-top: 2px; }
.hh-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: min(var(--pw, 237px), calc(var(--hbw) * 0.4 / var(--hh-k, 1)), calc(var(--hh-sidew, 9999px) / var(--hh-k, 1))); }
/* Narrower windows (Oct 5 2026): everything beside the board shrinks together,
   icons, labels, palette and all, in step with the space the columns have
   (menu.js sets --hh-k from the column width, 1 down to .6). Under 720px wide
   the page stacks instead, the phone layout. The big words already scale on their own. */
.hh-left > :not(.hh-word), .hh-right > :not(.hh-word) { zoom: var(--hh-k, 1); }
html.home-preview #game .hh-controls .palette { width: 100%; }
html.home-preview #game .hud-right { display: flex; gap: 8px; }
html.home-preview #game .actions { margin: 0; width: 100%; grid-area: auto; }
html.home-preview #game .palette { margin: 0; grid-area: auto; }
html.home-preview #game .palette-label { margin: 0; grid-area: auto; }
html.home-preview #game .palette-label:empty { display: none; }
html.home-preview #game .hint-card { grid-area: auto; margin: 0; width: calc(var(--pane, 237px) + 24px); justify-self: auto; }
/* While a hint lesson is open, "in color." steps aside so the card has room. */
#game .hh-right:has(.hint-card:not(.hidden)) .hh-color { display: none; }
.hh-color { transition: opacity .25s ease; }
/* "in color." stays in the flow under the controls. On a short screen the
   hero grows taller rather than letting the palette run into the words. */
.hh-right > .hh-color { margin-top: 14px; }

/* The transition into play: controls fade in, the colors bloom. */
#game.entering .hh-enter { animation: hhIn .55s .12s cubic-bezier(.2, .7, .2, 1) both; }
#game.entering .board { animation: hhBloom .9s ease-out both; }
@keyframes hhIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes hhBloom { from { filter: saturate(0) brightness(.75); } }
@media (prefers-reduced-motion: reduce) {
  #game.entering .hh-enter, #game.entering .board { animation: none; }
  .ghost-board .gbub { animation: none; }
}

/* ── Below the first screen ── */
.home-below { padding: 0 clamp(16px, 4vw, 56px); }
.hb-spectrum { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); height: 8px; margin: clamp(28px, 4vh, 44px) calc(-1 * clamp(16px, 4vw, 56px)) 0; }
.hb-lede { margin: 26px auto 0; max-width: 600px; text-align: center; font-size: clamp(16px, 1.2vw, 18px); font-weight: 500; line-height: 1.5; color: var(--muted); }
.hb-cta { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hb-btn { display: inline-flex; align-items: center; min-height: 56px; padding: 0 26px; border-radius: 14px; font-weight: 800; font-size: 17px; text-decoration: none; }
.hb-primary, .home-bands .hx-btn-primary, .home-bands .btn-primary { background: var(--ink); border: 1.5px solid var(--ink-line); color: var(--ink-fg); }
.hb-primary:hover, .home-bands .hx-btn-primary:hover, .home-bands .btn-primary:hover { background: #26262A; color: var(--ink-fg); border-color: var(--ink-line); }
.hb-ghost { border: 1.5px solid var(--hb-ghost); color: var(--text); }
.hb-meta { margin: 16px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.hb-meta b { color: var(--text); }
.hb-facts { max-width: 1040px; margin: 44px auto 0; padding: 32px 0 52px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.hb-facts h3 { margin: 0; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 10px; color: var(--text); }
.hb-facts p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.hb-fdot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid; box-sizing: border-box; flex-shrink: 0; }
.c1 { background: #F02309; border-color: #B51A07; } .c2 { background: #FF7900; border-color: #C25C00; } .c3 { background: #F5CE1B; border-color: #BA9A08; }
.c4 { background: #7FE637; border-color: #56B21F; } .c5 { background: #2C9414; border-color: #1E6B0F; } .c6 { background: #1CC9DB; border-color: #1291A6; }
.c7 { background: #3D8AFF; border-color: #2563C9; } .c8 { background: #A9ACF8; border-color: #7A7EDF; } .c9 { background: #8662E2; border-color: #6248A5; }

/* ── Menu: the index, with search on top ── */
.home-menu { position: fixed; inset: 0; z-index: 400; background: var(--bg); overflow-y: auto; animation: hmIn .22s ease-out; }
.home-menu[hidden] { display: none; }
@keyframes hmIn { from { opacity: 0; } }
body.menu-open { overflow: hidden; }
.hm-inner { max-width: 1100px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 56px) 32px; }
.hm-top { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.hm-top .logomark { width: 32px; height: 32px; display: block; }
.hm-top .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.hm-top .wordmark { font-size: 27px; }
.hm-close {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
  background: var(--text); color: var(--bg); border: 0; font: 800 15px "Plus Jakarta Sans", sans-serif; cursor: pointer;
}
.hm-search {
  margin-top: 16px; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; border-radius: 18px;
  background: var(--paper-2); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--hb-ghost);
}
.hm-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 500 18px "Plus Jakarta Sans", sans-serif; color: var(--text); }
.hm-search:focus-within { box-shadow: inset 0 0 0 2px #8662E2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hm-list { margin-top: 0; display: flex; flex-direction: column; }
.hm-row { display: flex; align-items: center; gap: 16px; padding: clamp(9px, calc((100vh - 560px) / 18), 17px) 4px; border-top: 1px solid var(--hair); text-decoration: none; color: var(--muted); transition: color .12s ease; }
.hm-list { border-bottom: 1px solid var(--hair); }
.hm-hit { order: -1; }
.hm-hit .hm-num::before { content: "\2192"; font-size: 14px; }
.hm-row[hidden] { display: none; }
.hm-row:hover, .hm-row:focus-visible { color: var(--text); }
.hm-num { width: 28px; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--quiet); }
.hm-dot { width: 16px; height: 16px; border-radius: 50%; border-width: 1.12px; border-style: solid; box-sizing: border-box; flex-shrink: 0; transition: transform .15s ease; }
.hm-body.pointing .hm-row.is-on .hm-dot { transform: scale(1.25); }
.hm-row { color: var(--text); }
.hm-title { font-size: clamp(22px, min(2.5vw, 4.3vh), 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.hm-desc { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--quiet); text-align: right; }
.hm-empty { margin: 20px 4px 0; color: var(--muted); }
.hm-list.filtering .hm-row { color: var(--text); }

/* Two columns on wide screens: the list, and a preview of whichever entry you point at. */
.hm-body { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 380px); gap: clamp(32px, 4vw, 64px); align-items: start; }
.hm-preview { position: sticky; top: 0; min-height: 380px; border-radius: 22px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--hb-ghost); padding: 26px; box-sizing: border-box; }
.hm-pv { display: none; }
.hm-pv.is-on { display: block; animation: hmPv .2s ease-out; }
@keyframes hmPv { from { opacity: 0; transform: translateY(4px); } }
/* One slot for every preview: the same square, the same place, then one line
   under it for a key (row / column / block, the color strip, the label). */
.hm-preview { --pvs: min(320px, calc(100vh - 440px)); padding-top: 34px !important; }
.hm-pv-vis { width: min(100%, var(--pvs)); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.hm-pv-sub { height: 26px; margin-top: 24px; display: flex; align-items: center; justify-content: center; }
.hm-pv-k { margin: 14px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.hm-pv-t { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.hm-pv-t b { color: var(--text); font-variant-numeric: tabular-nums; }
.hm-pv-board { width: 100%; }

/* Preview boards: the site's mini board, drawn at panel size. */
.pvb {
  position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr));
  width: 100%; aspect-ratio: 1; background: var(--g-bg); border: 2px solid var(--g-frame); box-sizing: border-box; flex-shrink: 0;
}
.pvb > span { position: relative; display: flex; align-items: center; justify-content: center; border: 0.5px solid var(--g-cell); container-type: inline-size; }
.pvb .gl { position: absolute; z-index: 1; background: var(--g-block); }
.pvb .gl.v1 { top: 0; bottom: 0; left: calc(33.333% - 0.75px); width: 1.5px; }
.pvb .gl.v2 { top: 0; bottom: 0; left: calc(66.667% - 0.75px); width: 1.5px; }
.pvb .gl.h1 { left: 0; right: 0; top: calc(33.333% - 0.75px); height: 1.5px; }
.pvb .gl.h2 { left: 0; right: 0; top: calc(66.667% - 0.75px); height: 1.5px; }
.pvb i.b { position: relative; z-index: 2; width: 72%; aspect-ratio: 1; border-radius: 50%; border-width: max(1px, calc(72cqw * .07)); border-style: solid; box-sizing: border-box; }
.pvb .ov { position: absolute; pointer-events: none; animation: pvSpring .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.pvb .ov.t { z-index: 0; }
.pvb .ov.o { z-index: 3; box-sizing: border-box; border: 2.5px solid var(--oc); border-radius: 3px; }
.pvb .ov.ring { border-radius: 50%; border-width: 2px; animation: pvRing .9s ease-out both; }
.t-row { background: rgba(255, 140, 0, .36); } .t-col { background: rgba(255, 0, 0, .20); } .t-box { background: rgba(0, 210, 80, .22); }
.t-gray { background: rgba(148, 140, 132, .2); } .t-sel { background: rgba(148, 140, 132, .5); } .t-yel { background: rgba(245, 206, 27, .3); }
@media (prefers-color-scheme: dark) {
  .t-row { background: rgba(255, 140, 0, .16); } .t-col { background: rgba(255, 0, 0, .30); } .t-box { background: rgba(0, 210, 80, .16); }
  .t-gray { background: rgba(255, 255, 255, .07); } .t-sel { background: rgba(255, 255, 255, .18); } .t-yel { background: rgba(245, 206, 27, .16); }
}
.pvb .pop, .pv-mark .pop { animation: pvPop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
/* The game's own placement: a bubble springs from the centre of its cell
   (play.html .wgrow: scale from .1, cubic-bezier(.2, 1.3, .5, 1)). */
.pvb .place { animation: pvPlace .9s linear both; }
/* Sampled from the app's PopBubble spring (Animated.spring from 0.1, friction 4,
   tension 80): it overshoots to about 1.29 at 0.18s, then settles. */
@keyframes pvPlace {
  0.0% { transform: scale(0.100); opacity: 0; } 0.1% { opacity: 1; }
  2.2% { transform: scale(0.165); }
  4.4% { transform: scale(0.324); }
  6.7% { transform: scale(0.535); }
  8.9% { transform: scale(0.759); }
  11.1% { transform: scale(0.963); }
  13.3% { transform: scale(1.124); }
  15.6% { transform: scale(1.233); }
  17.8% { transform: scale(1.285); }
  20.0% { transform: scale(1.289); }
  22.2% { transform: scale(1.253); }
  24.4% { transform: scale(1.193); }
  26.7% { transform: scale(1.121); }
  28.9% { transform: scale(1.050); }
  31.1% { transform: scale(0.988); }
  33.3% { transform: scale(0.943); }
  35.6% { transform: scale(0.915); }
  37.8% { transform: scale(0.905); }
  40.0% { transform: scale(0.910); }
  42.2% { transform: scale(0.925); }
  44.4% { transform: scale(0.947); }
  46.7% { transform: scale(0.970); }
  48.9% { transform: scale(0.993); }
  51.1% { transform: scale(1.011); }
  53.3% { transform: scale(1.023); }
  55.6% { transform: scale(1.030); }
  57.8% { transform: scale(1.031); }
  60.0% { transform: scale(1.028); }
  62.2% { transform: scale(1.022); }
  64.4% { transform: scale(1.014); }
  66.7% { transform: scale(1.007); }
  68.9% { transform: scale(1.000); }
  71.1% { transform: scale(0.995); }
  73.3% { transform: scale(0.991); }
  75.6% { transform: scale(0.990); }
  77.8% { transform: scale(0.990); }
  80.0% { transform: scale(0.992); }
  82.2% { transform: scale(0.994); }
  84.4% { transform: scale(0.996); }
  86.7% { transform: scale(0.999); }
  88.9% { transform: scale(1.001); }
  91.1% { transform: scale(1.002); }
  93.3% { transform: scale(1.003); }
  95.6% { transform: scale(1.003); }
  97.8% { transform: scale(1.003); }
  100% { transform: scale(1); }
}
/* The ripple: one rolling wave. Every bubble swells and settles on an even
   ease (no spring), and empty cells grow in on the same curve, so placed and
   new bubbles move as one motion. */
.pvb .bump { animation: pvBump .9s both; }
.zw .pop { animation: pvGrow .9s both; }
@keyframes pvBump {
  0%   { transform: scale(1, 1);       animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  28%  { transform: scale(1.2, 1.17);  animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  52%  { transform: scale(.95, .97);   animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  74%  { transform: scale(1.03, 1.02); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: scale(1, 1); }
}
@keyframes pvGrow {
  0%   { transform: scale(.2); opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  30%  { transform: scale(1.2, 1.17); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  54%  { transform: scale(.95, .97); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  76%  { transform: scale(1.03, 1.02); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: scale(1); opacity: 1; }
}
.pvb .dim { animation: pvDim .5s ease both; }
.pvb .x { position: relative; z-index: 2; width: 46%; aspect-ratio: 1; animation: pvPop .35s ease-out both; }
.pvb .x::before, .pvb .x::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; border-radius: 2px; background: var(--quiet); transform: rotate(45deg); }
.pvb .x::after { transform: rotate(-45deg); }
.pvb .n { position: absolute; z-index: 2; font-size: 56cqw; line-height: 1; font-weight: 800; color: var(--text); animation: pvOut .4s ease both; }
.pvb .grow { animation: pvPop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pvSpring { from { opacity: 0; transform: scale(.8); } }
@keyframes pvPop { from { opacity: 0; transform: scale(0); } }
@keyframes pvDim { to { opacity: .22; } }
@keyframes pvOut { to { opacity: 0; transform: scale(.6); } }
@keyframes pvRing { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.5); } }

.pv-legend { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.pv-legend b { font-weight: 800; animation: pvInk .3s ease both; }
@keyframes pvInk { from { color: var(--muted); } to { color: var(--text); } }
/* The launch video's zoom: a unit lifts off the board as a white card. */
.pvb .soft { animation: pvSoft .3s ease both; }
@keyframes pvSoft { to { filter: blur(1.3px); opacity: .5; } }
.pvb .zw { position: absolute; transform: scale(1.12); animation: pvLift .42s cubic-bezier(.34, 1.32, .64, 1) both; }
@keyframes pvLift { from { opacity: 0; transform: scale(1); } }
.pvb .zc { position: absolute; inset: 0; display: grid; box-sizing: border-box; overflow: hidden; background: var(--g-bg);
  border: 2px solid var(--zb, #2b2b2b); border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, .26); }
.pvb .zc > span { display: flex; align-items: center; justify-content: center; container-type: inline-size; }
.pvb .ztab { position: absolute; top: -8px; left: 6px; z-index: 2; padding: 3px 7px 3px 8px; border-radius: 99px; background: var(--zt, #2b2b2b); color: var(--zf, #fff);
  font: 900 8.5px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; animation: pvPop .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.pvb .ztab.mid { left: 50%; translate: -50% 0; }
@media (prefers-color-scheme: dark) { .pvb { --zb: #DCDCDC; --zt: #E7E7E7; --zf: #181818; } .pvb .zc { box-shadow: 0 6px 16px rgba(0, 0, 0, .6); } }
.pv-tech { width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: flex-start; }
.pv-tech .board-fit { transform-origin: 0 0; }
.pv-chips { display: flex; gap: 5px; }
.pv-chips i.b { width: 18px; height: 18px; border-radius: 50%; border-width: 1.26px; border-style: solid; box-sizing: border-box; }
.pv-chips .out { animation: pvDim .35s ease both; }
.pv-chips .keep { animation: pvKeep .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pvKeep { to { transform: scale(1.35); } }
.pv-tag { margin: 0; position: relative; height: 16px; width: 100%; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--quiet); }
.pv-tag span { position: absolute; inset: 0; }
.pv-tag .a { animation: pvOut .3s 1.2s ease both; }
.pv-tag .z { animation: pvIn .3s 1.35s ease both; }
@keyframes pvIn { from { opacity: 0; } }
.pv-mark { display: grid; grid-template-columns: repeat(3, 52px); gap: 8px; }
.pv-mark i.b { width: 52px; height: 52px; border-radius: 50%; border-width: 3.64px; border-style: solid; box-sizing: border-box; }
.pv-mark .hole { background: var(--g-bg); border-color: var(--g-cell); border-width: 3px; }

.hm-pv-lvls { display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; width: 100%; height: 100%; }
.hm-pv-lvl { display: grid; grid-template-columns: 14px 68px minmax(0, 1fr); column-gap: 10px; align-items: baseline; align-content: center; padding: 0 16px; border-radius: 14px; background: var(--bg); animation: pvSlide .45s cubic-bezier(.2, .7, .2, 1) both; }
.hm-pv-lvl::before { content: ""; align-self: start; margin-top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--dc); }
.hm-pv-lvl b { font-size: 16px; font-weight: 800; line-height: 20px; color: var(--text); }
.hm-pv-lvl em { font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
@keyframes pvSlide { from { opacity: 0; transform: translateX(-12px); } }
.hm-pv-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-rows: repeat(5, 1fr); gap: 8px; width: 100%; height: 100%; }
.hm-pv-steps li { counter-increment: s; display: flex; gap: 12px; align-items: center; padding: 0 14px; border-radius: 14px; background: var(--bg); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); animation: pvSlide .45s cubic-bezier(.2, .7, .2, 1) both; }
.hm-pv-steps li::before { content: counter(s); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .hm-preview *, .hm-preview *::before { animation-duration: .01ms !important; animation-delay: 0s !important; }
  .pvb .ov.ring { display: none; }
}

/* Pointing at an entry: it grows a little and the rest soften, so the eye
   lands on one line and its preview. */
.hm-title { display: inline-block; transform-origin: left center; transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.hm-row { transition: color .15s ease, filter .22s ease, opacity .22s ease; }
/* At rest every entry is the same size; the one you're on grows only once
   you point. Moving across to its preview keeps the others frosted. */
.hm-body.pointing .hm-row.is-on .hm-title { transform: scale(1.1); }
.hm-body.pointing .hm-row:not(.is-on) { filter: blur(1.2px); opacity: .55; }
.hm-list.filtering .hm-row { filter: none; opacity: 1; }
@media (max-width: 899px) { .hm-body { grid-template-columns: 1fr; } .hm-preview { display: none; } }

/* ── Phones and narrow windows: everything stacks around the board ── */
@media (max-width: 879px) and (max-aspect-ratio: 999/1000), (max-width: 719px) {
  .hh-left > :not(.hh-word), .hh-right > :not(.hh-word) { zoom: 1; }
  /* Stacked: the palette is one row of nine, as on a phone, even in a short
     wide window where the game itself is still in its desktop mode. */
  html.home-preview #game .palette { display: flex; justify-content: space-between; gap: 6px; width: 100% !important; }
  html.home-preview #game .pbtn { flex: 1; width: auto; max-width: 56px; }
  :root { --hbw: min(100%, 600px); }
  html.home-preview .home-hero, html.home-preview #game.home-hero { display: flex; flex-direction: column; align-items: stretch; }
  .hh-center { width: 100%; }
  html.home-preview #game .board-shell { width: 100% !important; }
  .hh-left { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; margin-bottom: 14px; gap: 12px; }
  .hh-word { font-size: clamp(44px, 14vw, 64px); }
  .hh-dateval { font-size: 22px; white-space: normal; }
  .is-rest .hh-left .hh-date { align-items: flex-end; text-align: right; }
  .hh-right { flex-direction: row; justify-content: space-between; align-items: flex-start; margin-top: 14px; gap: 12px; }
  .hh-count .hh-countval { font-size: 20px; }
  .hh-right > .hh-color { margin-top: 0; }
  .hh-color { text-align: right; }
  /* Playing on a phone: the Play page's own phone layout, stats above, tools and palette below. */
  #game .hh-left .hh-word, #game .hh-left .hh-date, #game .hh-right .hh-color { display: none; }
  #game .hh-left { flex-direction: column; align-items: stretch; margin-bottom: 6px; }
  .hh-stats { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  html.home-preview #game .score-center { text-align: center; }
  html.home-preview #game .score-center .score { font-size: 30px; }
  html.home-preview #game .stats-row { flex-direction: row; gap: 18px; align-items: flex-end; }
  html.home-preview #game .stat .val, html.home-preview #game .hearts { font-size: 16px; }
  html.home-preview #game .stat .lbl { font-size: 10px; letter-spacing: 1px; }
  #game .hh-right { flex-direction: column; align-items: stretch; margin-top: 4px; }
  .hh-controls { width: 100%; gap: 6px; align-items: stretch; }
  html.home-preview #game .hud-right { align-self: flex-end; }
  .hb-spectrum { margin-top: 28px; }
  .hb-cta { margin-top: 30px; flex-direction: column; }
  .hb-btn { justify-content: center; }
  .hm-desc { display: none; }
}

/* Get the app: the logo (center bubble dashed), then the store codes. */
.hm-pv-vis .pv-logo { width: 31%; margin: 0 auto; display: block; overflow: visible; }
.pv-logo .pop { transform-box: fill-box; transform-origin: center; animation: pvPop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.pv-qrs { margin: 10% 0 0; display: grid; grid-template-columns: repeat(2, 37%); justify-content: center; gap: 14px; }
.pv-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 15px; border-radius: 14px; background: var(--bg); text-decoration: none; color: var(--text);
  animation: pvSlide .45s .5s cubic-bezier(.2, .7, .2, 1) both; }
.pv-qr.soon { animation-delay: .6s; }
.pv-qr svg.qr { width: 78%; height: auto; display: block; border-radius: 6px; }
.pv-qr span { display: flex; flex-direction: column; align-items: center; font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.pv-qr span b { font-size: 13px; font-weight: 800; color: var(--text); }
.pv-qr:hover { box-shadow: inset 0 0 0 1.5px var(--hb-ghost); }
.qr-soon { width: 64%; aspect-ratio: 1; border-radius: 6px; border: 1.5px dashed var(--hb-ghost); box-sizing: border-box; display: grid; place-items: center; color: var(--quiet); }
.qr-soon svg { width: 40%; }

/* ══ Play page (/play/): the level picker in the homepage's style ══════════
   Only the start screen changes; the game keeps the Play page's own styles. */
.play-wrap:has(> #start.ps:not(.hidden)) { max-width: 1160px; padding: 0 clamp(16px, 4vw, 56px) 0; }
.start.ps { text-align: left; padding-top: clamp(10px, 2vh, 22px); }
.ps-head { max-width: 1040px; margin: 0 auto; }
.start.ps .ps-title { margin: 0; font: 800 clamp(28px, 2.8vw, 38px)/1.1 "Plus Jakarta Sans", sans-serif; letter-spacing: -0.035em; color: var(--text); }
.start.ps p.ps-sub { margin: 12px 0 0; max-width: 760px; font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--muted); }
.ps-lbl { display: block; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.ps-grid { margin: 26px auto 0; max-width: 1040px; display: grid; grid-template-columns: minmax(280px, 344px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

/* Today's daily: the masked board, date, level and one black Play button. */
.ps .daily-card.ps-daily {
  display: flex; flex-direction: column; align-items: stretch; gap: 16px; width: 100%; margin: 0; padding: 22px;
  border: 0; border-radius: 22px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--hb-ghost); text-align: left; cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.ps .daily-card.ps-daily:hover { box-shadow: inset 0 0 0 1.5px var(--muted); }
.ps-dhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ps-count { font-size: 13px; font-weight: 600; color: var(--muted); }
.ps-count .js-count { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ps-board { display: grid; width: 100%; }
.ps-dfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ps .daily-card .dc-line { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.ps .daily-card .dc-date { font-size: inherit; }
.ps .daily-card .dc-sub { margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--muted); }
.ps .daily-card .dc-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; min-height: 48px; border-radius: 14px;
  background: var(--ink); border: 1.5px solid var(--ink-line); color: var(--ink-fg); font-size: 16px; font-weight: 800;
}
.ps .daily-card .dc-pill::before { content: ""; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.ps .daily-card:hover .dc-pill { background: #26262A; }
.ps .daily-card.done .dc-pill { background: transparent; border-color: var(--hb-ghost); color: var(--text); padding: 0 18px; font-size: 15px; }
.ps .daily-card.done .dc-pill::before { display: none; }

/* Levels: rows like the menu's, a bubble, the name, what it takes. */
.ps-levels { padding-top: 22px; }
.ps-list { margin-top: 14px; display: flex; flex-direction: column; }
.ps .diff-row.ps-row {
  display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 6px; margin: 0;
  border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: transparent; text-align: left; cursor: pointer;
  transition: filter .22s ease, opacity .22s ease;
}
.ps .diff-row.ps-row:last-child { border-bottom: 1px solid var(--hair); }
.ps .diff-row.ps-row:hover { background: transparent; }
.ps-dot { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: var(--f); border: 1.26px solid var(--r); box-sizing: border-box; transition: transform .2s ease; }
.ps-rtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ps .diff-row .d-name { display: inline-block; transform-origin: left center; font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: var(--text) !important; transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.ps .diff-row .d-desc { margin: 0; font-size: 14px; font-weight: 500; color: var(--muted); text-wrap: pretty; }
.ps-go { flex-shrink: 0; width: 22px; height: 22px; color: var(--quiet); opacity: 0; transform: translateX(-6px); transition: opacity .18s ease, transform .18s ease; }
.ps-go svg { width: 100%; height: 100%; display: block; }
.ps-row:hover .ps-go, .ps-row:focus-visible .ps-go { opacity: 1; transform: none; color: var(--text); }
.ps-row:hover .d-name, .ps-row:focus-visible .d-name { transform: scale(1.06); }
.ps-row:hover .ps-dot, .ps-row:focus-visible .ps-dot { transform: scale(1.2); }
.ps-list:hover .ps-row:not(:hover) { filter: blur(1.2px); opacity: .55; }
.start.ps p.ps-nudge { margin: 18px 6px 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.ps-nudge a { color: var(--text); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hb-ghost); }
.ps-nudge a:hover { text-decoration-color: var(--text); }

/* The rainbow line, then the about section as four short facts. */
.ps-spectrum { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); height: 8px; margin: clamp(56px, 8vh, 88px) calc(50% - 50vw) 0; }
.ps .play-about.ps-about { max-width: 1040px; margin: 0 auto; padding: 44px 0 72px; border: 0; text-align: left; }
.ps-about h2 { margin: 0; font: 800 clamp(26px, 2.6vw, 34px)/1.1 "Plus Jakarta Sans", sans-serif !important; letter-spacing: -0.03em; color: var(--text); }
.ps-intro { margin-bottom: 36px; }
.start.ps .ps-about p.ps-lede { margin: 12px 0 0; max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.ps-facts { margin-top: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 32px; }
.ps-facts h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--text); }
.start.ps .ps-facts p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ps-facts a { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hb-ghost); }
.ps-fdot { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--f); border: 1px solid var(--r); box-sizing: border-box; }

@media (max-width: 820px) {
  .ps-grid { grid-template-columns: 1fr; max-width: 460px; }
  .ps-title { font-size: clamp(40px, 12vw, 60px); }
  .ps-list:hover .ps-row:not(:hover) { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ps-row .d-name, .ps-dot, .ps-go { transition: none; } }

/* ══ Site-wide headings (Oct 3 2026) ═══════════════════════════════════════
   Page titles and section headings in Plus Jakarta Sans 800, the homepage's
   type, on every page. Nunito stays for the wordmark and inside the game. */
:is(.site-v2, .home-bands, .start.ps) :is(h1, h2) { font-family: "Plus Jakarta Sans", sans-serif !important; font-weight: 800 !important; letter-spacing: -0.035em; }
:is(.site-v2, .home-bands, .start.ps) h3 { font-family: "Plus Jakarta Sans", sans-serif !important; font-weight: 800 !important; letter-spacing: -0.015em; }
.site-v2 .home-menu :is(h1, h2, h3) { letter-spacing: normal; }

/* Dark mode bubbles follow the game (assets/theme-dark.js): the fill deepens
   and the rim becomes the bright colour, which keeps them crisp on dark. */
@media (prefers-color-scheme: dark) {
  .c1 { background: #B70C00; border-color: #F02309; } .c2 { background: #CA5F01; border-color: #FF7900; } .c3 { background: #CCAB02; border-color: #F5CE1B; } .c4 { background: #5AC101; border-color: #7FE637; } .c5 { background: #157001; border-color: #2C9414; } .c6 { background: #06A3B2; border-color: #1CC9DB; } .c7 { background: #026AD1; border-color: #3D8AFF; } .c8 { background: #858AD3; border-color: #A9ACF8; } .c9 { background: #6349A4; border-color: #8662E2; }
  .ps-dot, .ps-fdot { background: color-mix(in srgb, var(--f) 76%, #000); border-color: var(--f); }
  .hm-pv-lvl::before { background: color-mix(in srgb, var(--dc) 76%, #000); box-shadow: inset 0 0 0 2px var(--dc); }
}

/* ══ THE ONE RIM LAW (Oct 3 2026) ═══════════════════════════════════════════
   Every bubble's rim is 7% of its diameter, the app's RIM_RATIO. These bring
   the older pages' fixed-size bubbles in line (this sheet loads last). */
.guide-cta .cta-bubbles span { border-width: 1.12px; }
.sv-cta .cta-bubbles span { border-width: 1.05px; }
.swatches .dot { border-width: 1.68px; }
@media (max-width: 440px) { .swatches .dot { border-width: 1.4px; } }
.g-right .swatches .dot { border-width: 1.4px; }
.morph-grid .mb { border-width: max(1px, calc(var(--c) * 0.74 * 0.07)); }
.nf-icon .bub { border-width: 1.96px; }
.home-bands .diff-dot { border-width: 1px; }

/* ══ The rest of the homepage, drawn in toward the middle (Oct 5 2026) ═════ */
.home-bands [class$="band-inner"] { max-width: 1040px; }
.home-bands [class$="site-footer"] { padding-left: max(clamp(16px, 5vw, 48px), calc((100% - 1040px) / 2)); padding-right: max(clamp(16px, 5vw, 48px), calc((100% - 1040px) / 2)); }

/* ══ Search results (Oct 5 2026) ══════════════════════════════════════════
   A match inside a menu entry sits indented under it; pages outside the nine
   entries (Privacy, Terms, Home) list after them the same way. */
.hm-row.hm-sub { position: relative; padding-top: 10px; padding-bottom: 10px; padding-left: 80px; border-top-style: dashed; }
.hm-row.hm-sub .hm-num { display: none; }
/* The elbow: drops from the parent's dot (its center sits 56px in) and turns
   toward the result, in the parent's own color, so the tree reads at a glance.
   Results under one parent share one continuous line. */
.hm-row.hm-sub::before { content: ""; position: absolute; left: 55px; top: -1px; width: 16px; height: calc(50% + 1px);
  border-left: 2.5px solid var(--ec, #8662E2); border-bottom: 2.5px solid var(--ec, #8662E2); border-bottom-left-radius: 8px; box-sizing: border-box; }
/* The first result under an entry reaches up to that entry's dot. */
.hm-row.hm-sub.hm-first::before { top: -17px; height: calc(50% + 17px); }
.hm-row.hm-sub.hm-more::after { content: ""; position: absolute; left: 55px; top: 50%; bottom: -1px; border-left: 2.5px solid var(--ec, #8662E2); }
.hm-row.hm-sub .hm-title { font-size: clamp(18px, min(1.7vw, 3vh), 24px); letter-spacing: -0.03em; }
/* A page outside the nine entries: a page icon where the colored dot sits. */
.hm-row.hm-loose { padding-left: 4px; border-top-style: solid; }
.hm-row.hm-loose::before, .hm-row.hm-loose::after { display: none; }
.hm-row.hm-loose .hm-num { display: block; }
.hm-ico { width: 16px; height: 20px; flex-shrink: 0; color: #8662E2; display: flex; }
.hm-ico svg { width: 100%; height: 100%; }
.hm-body.pointing .hm-row.is-on .hm-ico { transform: scale(1.15); }
.hm-pv-gen { padding-top: 6px; }
.hm-pv-crumb { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--quiet); }
.hm-pv-gen .hm-pv-k { margin-top: 10px; font-size: 26px; line-height: 1.15; }
.hm-pv-gen .hm-pv-t { margin-top: 14px; font-size: 15.5px; line-height: 1.6; }
.hm-pv-gen mark { background: rgba(245, 206, 27, .38); color: var(--text); border-radius: 3px; padding: 0 1px; }
.hm-pv-go { margin: 18px 0 0; font-size: 13px; color: var(--quiet); }
.hm-pv-go b { color: var(--text); }
@media (prefers-color-scheme: dark) { .hm-pv-gen mark { background: rgba(245, 206, 27, .28); } }

/* How to play preview (Oct 5 2026): the Row / Column / Block tabs sit higher,
   overlapping their cards less. The Column card lifts above the board's top
   edge, so the board is a touch smaller and lower to make room for its tab. */
/* The pill's bottom edge lands halfway between the card's rim and the tops of
   the bubbles inside (Kasey, Oct 5 2026). */
.pvb .ztab { top: -11.5px; height: 15px; line-height: 15px; padding: 0 8px 0 9px; border-radius: 99px; }
.hm-pv-vis .pvb.pv-htp { width: var(--htp-w, 95%); margin: calc(100% - var(--htp-w, 95%)) auto 0; }
/* While searching, the selected result (what Enter opens) is marked. */
.hm-list.filtering .hm-row.is-on { background: var(--paper-2); box-shadow: inset 3px 0 0 #8662E2; }

/* Is Sudoku Math? board (Oct 5 2026): the block lines were each cell's own
   thick border, so every thin row line met them in a mitred corner and showed
   through on a phone. The block lines are now drawn once, on top. */
.digit-grid { position: relative; --dg-line: #555; }
.digit-grid span:nth-child(9n+3), .digit-grid span:nth-child(9n+6) { border-right: 0.5px solid #D8D8D8; }
.digit-grid span:nth-child(n+19):nth-child(-n+27), .digit-grid span:nth-child(n+46):nth-child(-n+54) { border-bottom: 0.5px solid #D8D8D8; }
.digit-grid span:nth-child(9n) { border-right: 0; }
.digit-grid span:nth-child(n+73) { border-bottom: 0; }
.digit-grid::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.333% - 1px), var(--dg-line) calc(33.333% - 1px), var(--dg-line) calc(33.333% + 1px), transparent calc(33.333% + 1px),
                              transparent calc(66.667% - 1px), var(--dg-line) calc(66.667% - 1px), var(--dg-line) calc(66.667% + 1px), transparent calc(66.667% + 1px)),
    linear-gradient(to bottom, transparent calc(33.333% - 1px), var(--dg-line) calc(33.333% - 1px), var(--dg-line) calc(33.333% + 1px), transparent calc(33.333% + 1px),
                              transparent calc(66.667% - 1px), var(--dg-line) calc(66.667% - 1px), var(--dg-line) calc(66.667% + 1px), transparent calc(66.667% + 1px)); }
@media (prefers-color-scheme: dark) {
  .digit-grid { --dg-line: #A2A2A2; }
  .digit-grid span:nth-child(9n+3), .digit-grid span:nth-child(9n+6) { border-right-color: #323232; }
  .digit-grid span:nth-child(n+19):nth-child(-n+27), .digit-grid span:nth-child(n+46):nth-child(-n+54) { border-bottom-color: #323232; }
}

/* ══ Phones (Oct 5 2026, Kasey's first Safari run-through) ═════════════════ */
@media (max-width: 879px) and (max-aspect-ratio: 999/1000), (max-width: 719px) {
  /* The first screen holds the whole hero, "in color." included: the date
     packs into three short lines beside "Sudoku", and "in color." is one line
     beside the countdown. */
  .hh-left { align-items: center; margin-bottom: 10px; }
  .hh-date { gap: 1px; }
  .hh-lbl { font-size: 9.5px; letter-spacing: 1.5px; }
  .hh-dateval { font-size: 14px; white-space: nowrap; }
  .hh-pill { margin-top: 4px; padding: 1px 9px; font-size: 11.5px; border-width: 1.5px; }
  .hh-right { align-items: center; margin-top: 10px; gap: 10px; }
  /* "in color." the same size as "Sudoku": the two words frame the board. */
  .hh-right .hh-color { font-size: clamp(44px, 14vw, 64px); white-space: nowrap; line-height: .9; }
  .hh-color br { display: none; }
  .hh-count { gap: 5px; }
  .hh-count .hh-countval { font-size: 21px; letter-spacing: -0.3px; }
  .hh-count .hh-lbl { font-size: 9.5px; letter-spacing: 1.5px; line-height: 1.35; width: 9.4em; }
  /* The Menu button, a size down. */
  .hb-menu { min-height: 38px; padding: 0 14px 0 12px; gap: 8px; font-size: 14px; }
  .hb-dots { grid-template-columns: repeat(3, 4px); gap: 2.5px; }
  .hb-dots i { width: 4px; height: 4px; }
}
@media (max-width: 899px) {
  /* Menu rows tall enough to tap comfortably (about 48px). */
  .hm-row { padding-top: 12px; padding-bottom: 12px; }
  .hm-search input { font-size: 16px; }
  /* While searching, the selected result's preview shows under the list. */
  .hm-body.searching .hm-preview { display: block; position: static; margin-top: 18px; min-height: 0; --pvs: min(250px, 70vw); padding: 22px !important; }
  .hm-body.searching .hm-preview .hm-pv-sub:empty { display: none; }
}
/* Play page on a phone: the levels first, today's daily under them. */
@media (max-width: 820px) {
  .ps-grid .ps-levels { order: -1; padding-top: 4px; }
  .ps-grid { margin-top: 6px; row-gap: 36px; }
}
/* Phones: one reading size for the homepage's body copy (15px), the intro a
   step up, and small print a step down, instead of five near-identical sizes. */
@media (max-width: 719px) {
  /* (attribute selectors: a class named here would be renamed in the bands) */
  .hb-facts p, .home-bands [class$="band-sub"], .home-bands [class$="faq-item"] p, .hb-meta { font-size: 15px !important; line-height: 1.55; }
  .home-bands [class$="faq-item"] h3, .hb-facts h3 { font-size: 16px; }
}

/* Menu icon: a hamburger whose last line ends in a bubble. */
.hb-ico { width: 18px; height: 14px; display: block; flex-shrink: 0; overflow: visible; }
@media (prefers-color-scheme: dark) { .hb-ico circle { fill: #6349A4; stroke: #8662E2; stroke-width: .7; } }
@media (max-width: 879px) and (max-aspect-ratio: 999/1000), (max-width: 719px) {
  .hb-ico { width: 17px; height: 13.2px; }
}
/* Phones: the header's rule sits under the Menu button, not across it. */
@media (max-width: 899px) { .nav.home-bar { padding-bottom: 10px; } }

/* Stuck page, step 3: Red pops into its one cell on the game's placement
   spring (scale from .1, overshoot to about 1.29), holds, fades, repeats. */
.mg-place { opacity: 0; animation: mgPlace 3.6s infinite; }
@keyframes mgPlace {
  0%, 30%  { opacity: 0; transform: scale(.1); }
  30.1%    { opacity: 1; transform: scale(.1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  35%      { transform: scale(1.29); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40%      { transform: scale(.93); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  45%      { transform: scale(1.04); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  50%      { transform: scale(1); }
  86%      { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.mg-ring { animation: mgRing 3.6s infinite; }
@keyframes mgRing { 0%, 30% { opacity: .9; } 31%, 90% { opacity: 0; } 97%, 100% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .mg-place { animation: none; opacity: 1; } .mg-ring { animation: none; opacity: 0; } }
/* Phones, round two (Oct 5 2026): a fuller header, a little more air around
   the hero, so the first screen ends at the rainbow line rather than midway
   into the intro paragraph. Labels 10px caps, date 15px, timer 22px: one
   step apart each, so they read as a set. */
@media (max-width: 879px) and (max-aspect-ratio: 999/1000), (max-width: 719px) {
  .nav.home-bar { padding-top: 12px; padding-bottom: 12px; }
  .nav.home-bar .brand .logomark { width: 32px; height: 32px; }
  .nav.home-bar .brand .wordmark { font-size: 27px; }
  .hb-menu { min-height: 42px; padding: 0 17px 0 14px; gap: 10px; font-size: 15px; }
  .hb-ico { width: 18px; height: 14px; }
  html.home-preview .play-wrap.home-wrap { padding-top: 18px; }
  .hh-left { margin-bottom: 12px; }
  .hh-right { margin-top: 14px; }
  .hh-lbl, .hh-count .hh-lbl { font-size: 10px; letter-spacing: 1.6px; }
  .hh-dateval { font-size: 15px; }
  .hh-count .hh-countval { font-size: 22px; }
  .hb-spectrum { margin-top: 44px; }
  .hb-lede { margin-top: 30px; }
}
/* Play page on a phone (Oct 5 2026): shorter level rows, so all four and the
   top of today's daily fit the first screen; a chevron says each row is a tap. */
@media (max-width: 820px) {
  .ps .diff-row.ps-row { padding: 11px 4px; gap: 14px; }
  .ps .diff-row .d-name { font-size: 23px; line-height: 1.1; }
  .ps .diff-row .d-desc { font-size: 13px; line-height: 1.35; }
  .ps-dot { width: 16px; height: 16px; border-width: 1.12px; }
  .ps-rtext { gap: 2px; }
  .ps-go { opacity: 1; transform: none; width: 18px; height: 18px; color: #B9B9BE; }
  .ps-list { margin-top: 12px; }
  .start.ps p.ps-nudge { margin-top: 14px; font-size: 13.5px; }
  .ps-grid { row-gap: 22px; }
}

/* ══ End screens in the site's style (Oct 5 2026) ═════════════════════════
   Win, game over and pause: Plus Jakarta Sans, black score, one quiet stats
   strip, a plain receipt for the breakdown, black / outline buttons. The
   layout and its fitting steps (compact, tight) are the game's own. */
#ovWin, #ovLose, #ovPause { font-family: "Plus Jakarta Sans", sans-serif; }
#ovWin h2, #ovLose h2, #ovPause .pause-title { font-family: "Plus Jakarta Sans", sans-serif !important; font-weight: 800; letter-spacing: -0.045em; }
#ovWin h2 { font-size: 30px; line-height: 1.05; color: var(--text); }
#ovWin #winTag { font-size: 14px; font-weight: 500; color: var(--muted); opacity: 1; }
#ovWin .win-score { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -0.05em; color: var(--text); font-variant-numeric: tabular-nums; }
#ovWin .win-score-lbl { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
#ovWin .win-newbest { order: 0; display: inline-block; padding: 3px 11px; border-radius: 99px; background: #FFF4CC; color: #8A6A00; font-size: 12px; letter-spacing: .2px; }
#ovWin .win-newbest.hidden { display: none; }
#ovWin .win-pills { gap: 0; border: 1.5px solid var(--hb-ghost); border-radius: 14px; overflow: hidden; background: var(--bg); }
#ovWin .win-pills .pill { border: 0; border-radius: 0; background: transparent; padding: 9px 4px; }
#ovWin .win-pills .pill + .pill { border-left: 1.5px solid var(--hb-ghost); }
#ovWin .win-pills .pill.hidden { display: none; }
#ovWin .pill .pv { font-size: 16px; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
#ovWin .pill .pk { font-size: 9px; letter-spacing: 1.4px; margin-top: 2px; }
#ovWin .win-beat { display: none; }
#ovWin .win-panel .panel-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 10.5px; letter-spacing: 1.8px; color: var(--muted); }
#ovWin .break-row .blabel { color: var(--text) !important; font-weight: 700; font-size: 14px; }
#ovWin .break-row .bnote { color: var(--quiet); font-weight: 500; }
#ovWin .break-row .bval, #ovWin .best-row .kval { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
#ovWin .break-total { border-top: 2px solid var(--text) !important; }
#ovWin .break-total .tl { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 15px; text-transform: none; }
#ovWin .break-total .tv { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 17px; color: var(--text); }
#ovWin .best-row .klabel { font-weight: 600; text-transform: none; }
/* Buttons: the homepage's black and outline. On a daily, Share takes the
   full width with Play another and Menu side by side under it. */
#ovWin .btn, #ovLose .btn { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; border-radius: 14px; }
#ovWin .btn-post { background: var(--ink); color: var(--ink-fg); border: 1.5px solid var(--ink-line); box-shadow: none; }
#ovWin .btn-ghost { background: var(--bg); color: var(--text); border: 1.5px solid var(--hb-ghost); box-shadow: none; }
#ovWin.is-daily .row { flex-wrap: wrap; }
#ovWin.is-daily #btnAgain { flex: 1 1 100%; }
#ovWin .row .btn.hidden { display: none; }
/* Game over: white card like the win, a red rule instead of a pink flood. */
.overlay.lose#ovLose { background: var(--bg); color: var(--text); border: 2px solid var(--g-frame); }
#ovLose h2 { font-size: 30px; color: var(--text); }
#ovLose h2::after { content: ""; display: block; width: 54px; height: 3px; border-radius: 2px; background: #F02309; margin: 12px auto 0; }
#ovLose p { font-weight: 500; color: var(--muted); max-width: 280px; }
#ovLose .btn-white { background: var(--ink); color: var(--ink-fg); border: 1.5px solid var(--ink-line); }
#ovLose .btn-outline { color: var(--text); border: 1.5px solid var(--hb-ghost); }
.overlay.lose#ovLose .win-app, .overlay.lose#ovLose .win-app a, .overlay.lose#ovLose .lose-help a { color: var(--text); }
.overlay.lose#ovLose .win-app { color: var(--muted); }
/* Pause: the same type. */
#ovPause .pause-title { font-size: 30px; }
#ovPause .btn-resume { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; border-radius: 14px; background: var(--ink); color: var(--ink-fg); border: 1.5px solid var(--ink-line); }
#ovWin .win-pills { flex-shrink: 0; }

/* ══ Content pages: the new style, keeping the site's character (Oct 5 2026)
   Kasey: keep the dashed frames, the purple and the level colours where they
   complement; take the new style's clean rounded cards and quiet labels. */
.site-v2 { --card-line: var(--hb-ghost); }
/* Cards: rounded, on the soft outline. Lesson cards keep their own frame colour. */
.site-v2 .tech-card { border-radius: 16px; overflow: hidden; }
.site-v2 .insight, .site-v2 .connect { border: 1.5px solid var(--card-line) !important; border-radius: 16px; box-shadow: none; }
/* Key insight keeps its purple bar and label, on a soft card */
.site-v2 .insight { background: var(--paper-2); }
.site-v2 .insight .bar { border-radius: 0; }
/* Related keeps purple; the pager and chips get the soft outline */
.site-v2 .tech-pager a { border-color: var(--card-line); border-radius: 14px; }
.site-v2 .tech-related a, .site-v2 .guide-more a { border-color: var(--card-line); }
.site-v2 .tech-pager a:hover, .site-v2 .tech-related a:hover, .site-v2 .guide-more a:hover { border-color: var(--muted); }
.site-v2 .guide-more h2, .site-v2 .tech-related h2 { letter-spacing: 1.8px !important; }
/* The guides' play card and "short version": the soft rounded card from the
   homepage, with the dashed inner frame kept as the signature. */
.site-v2 .guide-cta, .site-v2 .answer { border: 0; border-radius: 22px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--card-line); }
.site-v2 .guide-cta::after, .site-v2 .answer::after { border-radius: 15px; border-color: var(--dash); opacity: .9; }
.site-v2 .btn-ghost, .site-v2 .btn.btn-ghost { border: 1.5px solid var(--card-line); background: var(--bg); color: var(--text); border-radius: 14px; }
.site-v2 .btn-primary, .site-v2 .btn.btn-primary { border-radius: 14px; }
/* A phone has no rail, so the rail's own title has nothing to label */
@media (max-width: 1179px) { .site-v2 .rail-slot .rail-t { display: none; } }
/* The lifted Row card on How to Play reaches a few px past a phone edge. */
html:has(body.site-v2), body.site-v2 { overflow-x: clip; }
@media (max-width: 879px) and (max-aspect-ratio: 999/1000), (max-width: 719px) { .hb-spectrum { margin-top: 26px; } }