/* Sridu website – same design system as the app (css/style.css there):
   neutral dark surfaces, ONE accent colour, hairline borders, no gradients or
   glows. Numbers and headlines in a condensed face, like a scoreboard.
   Motion is slow and flat and always respects prefers-reduced-motion. */

:root {
	/* three sizes for running text, nothing in between: body, small (cards, tables), extra small (captions, meta) */
	--fs-body: 16px;
	--fs-sm: 14px;
	--fs-xs: 12.5px;
	--bg: #0e0f11;
	--surface: #15171a;
	--surface-2: #1c1f23;
	--surface-3: #262a2f;
	--line: #2a2e34;
	--line-strong: #3a3f47;
	--text: #ecebe6;
	--muted: #8d939c;
	--faint: #5d636c;
	--accent: #3ddc84;
	--accent-ink: #052312;
	--accent-soft: rgba(61, 220, 132, 0.1);
	--cream: #f1e9d6;
	--warn: #f0b64a;
	--font: var(--wp--preset--font-family--body);
	--font-num: var(--wp--preset--font-family--num);
	--r-s: 6px;
	--r-m: 10px;
	--r-l: 14px;
	--out: cubic-bezier(0.22, 1, 0.36, 1);
	--header: 60px;
	color-scheme: dark;
}

[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow, p.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.eyebrow.is-accent, p.eyebrow.is-accent { color: var(--accent); }
.muted { color: var(--muted); }
.num { font-family: var(--font-num); font-weight: 700; letter-spacing: 0.01em; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: var(--r-s); font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--fs-body); text-decoration: none; border: 1px solid var(--accent); transition: background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; }
.btn:hover { background: #5be69a; border-color: #5be69a; color: var(--accent-ink); }
.btn-sm { height: 34px; padding: 0 14px; font-size: var(--fs-sm); }
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--text); color: var(--text); background: transparent; }
.wp-block-button__link { transition: background 0.2s, border-color 0.2s; }

/* ---------- header ---------- */
.site-header-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .site-header-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header-part { top: 46px; } }
.site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .bar { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: var(--header); display: flex; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: var(--fs-body); letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand .ico { width: 22px; height: 22px; color: var(--accent); }
.nav { margin-left: 28px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav-list a { display: block; padding: 8px 12px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); border-radius: var(--r-s); transition: color 0.15s; }
.nav-list a:hover, .nav-list a[aria-current="page"], .nav-list .current-menu-item > a { color: var(--text); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.langs { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; }
.langs a { display: block; padding: 6px 7px; color: var(--faint); text-decoration: none; border-radius: var(--r-s); }
.langs a:hover { color: var(--text); }
.langs a[aria-current="true"] { color: var(--text); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--text); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--line-strong); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 8px; }
.menu-panel .nav-list { flex-direction: column; }
.menu-panel .nav-list a { padding: 12px; font-size: var(--fs-body); color: var(--text); }
/* language dropdown – stays in the bar on every width */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; height: 34px; padding: 0 8px 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; transition: color 0.15s, border-color 0.15s; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--text); border-color: var(--line-strong); }
.lang-menu summary .ico { width: 15px; height: 15px; }
.lang-menu summary .ico:last-child { width: 13px; height: 13px; transition: transform 0.2s var(--out); }
.lang-menu[open] summary .ico:last-child { transform: rotate(180deg); }
.lang-list { list-style: none; margin: 0; padding: 6px; position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); z-index: 60; }
.lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: var(--r-s); color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.lang-list a:hover { background: var(--surface-2); }
.lang-list b { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--faint); }
.lang-list a[aria-current="true"] { color: var(--accent); }
.lang-list a[aria-current="true"] b { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .lang-menu summary .ico:last-child { transition: none; } }

@media (max-width: 960px) {
	.nav { display: none; }
	.menu { display: block; }
}
@media (max-width: 420px) {
	.site-header .bar { padding: 0 14px; gap: 8px; }
	.bar-end { gap: 8px; }
	.lang-menu summary > .ico:first-child { display: none; }
	.lang-menu summary { padding: 0 7px 0 10px; }
}
@media (max-width: 380px) { .bar-end .btn-sm { padding: 0 11px; } }

/* ---------- page frame ---------- */
.site-main { padding-bottom: var(--wp--preset--spacing--60); }
.site-main.is-landing { padding-bottom: 0; }
.page-head { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--40); }
.page-head .eyebrow { margin-bottom: 14px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.is-404 h1 { margin-top: 8px; }

/* A section = a full-width band with a hairline on top */
.section { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; border-top: 1px solid var(--line); }
.section.is-first { border-top: 0; }
.section-head { margin-bottom: var(--wp--preset--spacing--50) !important; }
.section > .section-head { max-width: 1200px !important; }
.section-head > * { max-width: 720px; }
.section-head > * + * { margin-top: 14px !important; }
.section-head h2 { margin-top: 10px !important; }
.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: color-mix(in srgb, var(--text) 80%, var(--muted)); }
.on-surface { background: var(--surface); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(40px, 7vw, 88px) !important; padding-bottom: clamp(48px, 7vw, 96px) !important; }
.hero-grid { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-text > * + * { margin-top: 22px !important; }
.hero-text h1 { font-size: clamp(44px, 5.4vw, 74px); line-height: 0.94; margin-top: 16px !important; }
.hero-text h1 em { font-style: normal; color: var(--accent); }
.hero-text .lead { max-width: 30em; }
.hero-text .wp-block-buttons { margin-top: 30px !important; }
.hero-facts { list-style: none; padding: 0; margin: 28px 0 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px 28px; font-size: var(--fs-body); line-height: 1.4; color: color-mix(in srgb, var(--text) 82%, var(--muted)); }   /* the key facts: body size, a tidy grid */
.hero-facts li { display: flex; align-items: baseline; gap: 10px; }
.hero-facts li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }
@media (max-width: 960px) {
	.hero-grid { grid-template-columns: 1fr; }
}

/* ---------- the scan panel (the app's game view) ---------- */
.scan { margin: 0; }
.scan-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.scan-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.scan-title { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; }
.scan-state { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 26px; padding: 0 11px; border: 1px solid rgba(61, 220, 132, 0.4); border-radius: 13px; color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.scan-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.scan-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.scan-score { border-right: 1px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; gap: 18px; }
.scan-rest { text-align: center; }
.scan-rest b { display: block; font: 700 clamp(64px, 7vw, 96px)/1 var(--font-num); color: var(--cream); margin-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.scan-rest b.is-shot { color: var(--accent); }
.scan-hint { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--accent); border: 1px solid rgba(61, 220, 132, 0.4); border-radius: 12px; padding: 3px 10px; }
.scan-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.scan-chips li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 4px 8px; text-align: center; transition: border-color 0.4s; }
.scan-chips li.is-next { border-color: rgba(61, 220, 132, 0.45); border-style: dashed; }
.scan-chips b { display: block; font: 700 24px/1 var(--font-num); color: var(--cream); min-height: 24px; }
.scan-chips li:not(.is-set) b { color: var(--faint); }
.scan-chips small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 5px; white-space: nowrap; }
.scan-board { padding: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.board-svg { width: 100%; max-width: 480px; height: auto; display: block; overflow: visible; }
.b-wires { fill: none; stroke: rgba(200, 205, 215, 0.55); stroke-width: 0.9; }
.b-nums text { font: 600 27px var(--font-num); fill: #e8e8ea; text-anchor: middle; dominant-baseline: central; }
.b-flash path, .b-flash circle { fill: #fff; opacity: 0; }
.b-beams line { stroke-width: 2; stroke-linecap: round; opacity: 0.95; }
.b-hits circle { fill: #ffd83d; stroke: #111; stroke-width: 2; }
.b-cross { fill: none; stroke: #fff; stroke-width: 2; }
.scan figcaption { margin-top: 14px; }
@media (max-width: 640px) {
	.scan-body { grid-template-columns: 1fr; }
	.scan-score { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: center; padding: 14px; gap: 14px; }
	.scan-rest { flex: none; min-width: 96px; }
	.scan-rest b { font-size: 58px; margin-top: 4px; }
	.scan-chips { flex: 1; }
	.scan-chips b { font-size: 20px; min-height: 20px; }
	.scan-head { padding: 10px 12px; }
	.scan-state { font-size: 11px; }
	.scan-board { padding: 8px; }
}

/* ---------- facts strip (scoreboard numbers) ---------- */
.facts { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 1200px; }
.facts li { padding: 26px 22px; border-left: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.facts li:first-child { border-left: 0; }
.facts strong { display: block; margin-bottom: 10px; font: 700 clamp(40px, 4.4vw, 56px)/1 var(--font-num); color: var(--cream); letter-spacing: 0.01em; }
.facts-band { padding-top: 0 !important; padding-bottom: 0 !important; }
@media (max-width: 860px) {
	.facts { grid-template-columns: 1fr 1fr; }
	.facts li:nth-child(3) { border-left: 0; }
	.facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
	.facts li { padding: 20px 14px; font-size: var(--fs-sm); }
	.facts strong { font-size: 36px; white-space: nowrap; }
	.scan-head { gap: 8px; }
	.scan-title { font-size: 13px; }
}

/* ---------- steps ---------- */
.steps-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font: 700 34px/1 var(--font-num); color: var(--accent); }
.steps li { color: var(--muted); }
.steps strong { display: block; color: var(--text); font-weight: 600; font-size: var(--fs-body); margin-bottom: 2px; }
.setup-fig { width: 100%; max-width: 480px; margin: 0 auto; }
.setup-svg { width: 100%; height: auto; display: block; }
.setup-svg .art-wire { fill: none; stroke: var(--line-strong); stroke-width: 0.8; }
.setup-cone { fill: var(--accent); fill-opacity: 0.05; stroke: var(--accent); stroke-opacity: 0.35; stroke-width: 0.8; }
.setup-svg .art-lit path { opacity: 0.9; }
.setup-note { font: 600 12px var(--font-num); fill: var(--faint); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.06em; }
.setup-cam rect { fill: var(--surface-2); stroke: var(--accent); stroke-width: 1.2; }
.setup-cam circle { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.setup-label { font: 600 13px var(--font-num); letter-spacing: 0.08em; fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } .setup-fig { max-width: 320px; } }

/* ---------- list with hairlines (instead of a wall of cards) ---------- */
.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 64px); }
.rows li { padding: 22px 0; border-top: 1px solid var(--line); }
.rows li { color: var(--muted); }
.rows strong { display: block; color: var(--text); font-weight: 600; font-size: var(--fs-body); margin-bottom: 6px; }
@media (max-width: 760px) { .rows { grid-template-columns: 1fr; } }

/* ---------- game modes ---------- */
.modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mode { position: relative; isolation: isolate; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; transition: border-color 0.3s; }
.mode:hover { border-color: var(--line-strong); }
.mode h3 { margin: 0; font-size: var(--fs-body); }
.mode p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; max-width: 26ch; }
.mode-art { position: absolute; z-index: -1; right: -34px; top: -34px; width: 150px; height: 150px; }
.mode-art svg { display: block; width: 100%; height: 100%; transform-origin: center; animation: artDrift 90s linear infinite; }
.mode:nth-child(even) .mode-art svg { animation-direction: reverse; }
.mode.is-feature { grid-column: span 2; grid-row: span 2; min-height: 290px; padding: 24px; }
.mode.is-feature h3 { font: 700 clamp(64px, 7vw, 96px)/0.9 var(--font-num); color: var(--cream); letter-spacing: 0.01em; }
.mode.is-feature p { font-size: var(--fs-body); max-width: 30ch; margin-top: 10px; }
.mode.is-feature .mode-art { right: -80px; top: -80px; width: 380px; height: 380px; }
.mode-chips { display: flex; gap: 6px; margin-top: 16px; }
.mode-chips span { font: 700 16px/1 var(--font-num); padding: 7px 12px 6px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); }
.modes-more { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mode.is-wide { min-height: 210px; justify-content: flex-start; padding: 22px; }
.mode.is-wide h3 { font: 700 34px/1 var(--font-num); color: var(--cream); letter-spacing: 0.01em; text-transform: uppercase; margin-top: 64px; }
.mode.is-wide p { max-width: 34ch; margin-top: 8px; }
.mode.is-wide .mode-art { width: 170px; height: 170px; right: -40px; top: -40px; }
.mode-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.mode-tags span { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); }
@media (max-width: 960px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .modes-more { grid-template-columns: 1fr; } .mode.is-wide { min-height: 0; } .mode.is-wide h3 { margin-top: 40px; } }
@media (max-width: 520px) {
	.mode { min-height: 120px; padding: 14px; }
	.mode-art { width: 110px; height: 110px; right: -28px; top: -28px; }
	.mode.is-feature { min-height: 250px; }
	.mode.is-feature .mode-art { width: 280px; height: 280px; right: -70px; top: -70px; }
}
.art-wire { fill: none; stroke: var(--line-strong); stroke-width: 0.5; }
.art-lit { fill: var(--accent); }
.art-lit > * { opacity: var(--o); }
.art .art-lit > * { animation: artBeat var(--p) linear infinite; animation-delay: calc(var(--k) * var(--s) - var(--p)); }
.art.soft .art-lit > * { animation-name: artSwap; animation-timing-function: ease-in-out; }
@keyframes artBeat { 0% { opacity: var(--o); } 3% { opacity: var(--hi); } 26% { opacity: var(--o); } 100% { opacity: var(--o); } }
@keyframes artSwap { 0%, 40% { opacity: var(--hi); } 50%, 90% { opacity: 0.04; } 100% { opacity: var(--hi); } }
@keyframes artDrift { to { transform: rotate(360deg); } }
.art-block { max-width: 320px; }
.also { margin-top: 28px !important; color: var(--muted); font-size: var(--fs-body); }
.also b { color: var(--text); font-weight: 600; }

/* ---------- ways to run it ---------- */
.ways { list-style: none; margin: 0; padding: 0; counter-reset: way; }
.ways li { counter-increment: way; position: relative; padding: 22px 0 22px 56px; border-top: 1px solid var(--line); color: var(--muted); }
.ways li:last-child { border-bottom: 1px solid var(--line); }
.ways li::before { content: counter(way); position: absolute; left: 0; top: 20px; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; font: 700 17px/1 var(--font-num); color: var(--accent); }
.ways strong { display: block; color: var(--text); font-size: var(--fs-body); font-weight: 600; margin-bottom: 4px; }
.ways code { font: 500 13px var(--wp--preset--font-family--mono); color: var(--cream); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.ways em { display: block; margin-top: 8px; font-style: normal; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- statistics showcase (styles of the app's statistics page) ---------- */
.stx { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.stx-top { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.stx-main { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 4px; }
.stx-main > b { font: 700 clamp(72px, 9vw, 120px)/0.9 var(--font-num); color: var(--cream); letter-spacing: 0.01em; }
.stx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.stx-card { border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; min-width: 0; background: var(--bg); }
.on-surface .stx-card { background: var(--bg); }
.stx-card > .eyebrow { margin-bottom: 12px; }
.heat { display: block; width: 100%; max-width: 380px; height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: #101014; opacity: 0; transition: opacity 0.8s ease; }
.heat.is-drawn { opacity: 1; }
.st-delta { align-self: flex-start; display: inline-flex; align-items: baseline; gap: 7px; height: 26px; padding: 0 10px; border-radius: 13px; font: 700 16px/26px var(--font-num); letter-spacing: 0.03em; }
.st-delta small { font: 500 11.5px var(--font); letter-spacing: 0; opacity: 0.8; }
.st-delta.up { color: var(--accent); background: var(--accent-soft); }
.st-delta.down { color: var(--warn); background: rgba(240, 182, 74, 0.1); }
.st-trend { display: block; width: 100%; height: auto; overflow: visible; }
.st-grid { stroke: var(--line); stroke-width: 1; }
.st-axis { fill: var(--faint); font: 500 11px var(--font); font-variant-numeric: tabular-nums; }
.st-mean { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.7; }
.st-area { fill: rgba(61, 220, 132, 0.09); }
.st-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.st-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 1.8; }
.st-dot.won { fill: var(--accent); }
.st-dot.last { stroke-width: 2.4; }
.st-last { fill: var(--cream); font: 700 20px var(--font-num); }
.st-wheel { display: block; width: 100%; max-width: 320px; margin: 0 auto; height: auto; }
.st-track { fill: none; stroke: var(--line); stroke-width: 0.7; }
.st-wedge { fill: var(--accent); opacity: var(--o); }
.st-num { fill: var(--faint); font: 700 13px var(--font-num); text-anchor: middle; dominant-baseline: central; }
.st-num.top { fill: var(--cream); }
.st-top { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.st-top span { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12.5px; }
.st-top b { font: 700 16px/1 var(--font-num); color: var(--cream); }
.st-split { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; }
.st-split i { display: block; width: var(--w); min-width: 3px; }
.k-T { background: var(--accent); } .k-D { background: rgba(61, 220, 132, 0.55); } .k-S { background: rgba(61, 220, 132, 0.24); } .k-B { background: var(--cream); } .k-M { background: var(--line-strong); }
.st-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.st-legend span { display: flex; align-items: center; gap: 7px; }
.st-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.st-legend b { margin-left: auto; font: 700 15px/1 var(--font-num); color: var(--text); }
.st-gauges { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-gauge { display: flex; align-items: center; gap: 14px; }
.st-gauge svg { width: 84px; height: 84px; flex: none; transform: rotate(-90deg); }
.st-gauge svg text { transform: rotate(90deg); transform-origin: 64px 64px; text-anchor: middle; dominant-baseline: central; }
.st-gtrack { fill: none; stroke: var(--line); stroke-width: 9; }
.st-gfill { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.st-gnum { fill: var(--cream); font: 700 34px var(--font-num); }
.st-gunit { fill: var(--muted); font: 600 11px var(--font); }
.st-gauge b { display: block; font-weight: 600; }
.st-gauge small { color: var(--muted); font-size: 12.5px; }
.st-bars { display: flex; flex-direction: column; gap: 9px; }
.st-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.st-bar span { font: 700 14px/1 var(--font-num); letter-spacing: 0.04em; color: var(--muted); }
.st-bar > i { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.st-bar em { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--accent); }
.st-bar b { font: 700 16px/1 var(--font-num); text-align: right; color: var(--text); }
.vc-bar { fill: var(--accent); }
.vc-bar.low { fill: rgba(61, 220, 132, 0.22); } .vc-bar.mid { fill: rgba(61, 220, 132, 0.45); } .vc-bar.ton { fill: rgba(61, 220, 132, 0.72); } .vc-bar.hi { fill: var(--accent); } .vc-bar.max { fill: var(--cream); }
.vc-mean { fill: var(--muted); font: 700 13px var(--font-num); }
@media (max-width: 1000px) { .stx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stx-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 700px) { .stx-top, .stx-grid { grid-template-columns: 1fr; } .stx-grid > :last-child { grid-column: auto; } }

/* ---------- this hour (challenges) ---------- */
.hour { margin: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); overflow: hidden; }
.hour-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.hour-head small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.hour-clock { text-align: right; }
.hour-clock b { display: block; font: 700 34px/1 var(--font-num); color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.hour-clock small { margin-top: 2px; }
.hour-rows { list-style: none; margin: 0; padding: 0; }
.hour-rows li { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); }
.hour-rows li:first-child { border-top: 0; }
.hour-rows li::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: linear-gradient(to right, rgba(61, 220, 132, 0.5) var(--p), transparent var(--p)); }
.hour-lvl { font: 700 13px/1 var(--font-num); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hour-rows li:last-child .hour-lvl { color: var(--warn); }
.hour-task { font-weight: 600; }
.hour-task small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.hour-pts { font: 700 30px/1 var(--font-num); color: var(--cream); text-align: right; }
.hour-pts small { font: 600 11px var(--font); color: var(--muted); margin-left: 3px; }
.hour figcaption { padding: 12px 18px; border-top: 1px solid var(--line); }
@media (max-width: 520px) { .hour-rows li { grid-template-columns: 1fr auto; } .hour-lvl { grid-column: 1 / -1; } }

/* ---------- comparison table ---------- */
.compare table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.compare .wp-block-table table, .compare .wp-block-table thead, .compare .wp-block-table tfoot { border: 0; }
.compare th, .compare td, .compare .wp-block-table th, .compare .wp-block-table td { text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 700 13px/1.2 var(--font-num); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-strong); }
.compare tbody th, .compare tbody td:first-child { color: var(--text); font-weight: 600; }
.compare td { color: var(--muted); }
.compare mark { background: none; color: var(--accent); font-weight: 600; }
.compare .wp-block-table { overflow-x: auto; margin: 0; }
.compare figcaption, .compare .wp-element-caption { margin-top: 12px; text-align: left; }

/* ---------- split (text + something) ---------- */
.split { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.split > * { margin-top: 0 !important; }
.page-hero { padding-bottom: var(--wp--preset--spacing--50) !important; }
.page-hero .section-head { margin-bottom: 0 !important; }
@media (min-width: 861px) { .split > .section-head { position: sticky; top: calc(var(--header) + 32px); } }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line); color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.checks strong, .checks b { color: var(--text); font-weight: 600; }
.checks + .wp-block-code { margin-top: 28px !important; }

/* terminal-ish block */
.wp-block-code { margin: 0; overflow-x: auto; line-height: 1.7; }
.wp-block-code code { white-space: pre; }
.term-note { margin-top: 10px !important; }

/* ---------- guides: self-hosting and game modes ---------- */
/* inline code everywhere in running text */
.prose code, .section p code, .section li code, .ref code, .callout code, .rows code, .kv code { font: 500 0.86em var(--wp--preset--font-family--mono); color: var(--cream); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.wp-block-code { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; font-size: var(--fs-sm); color: var(--cream); }
.wp-block-code + .term-note, .wp-block-code + p { margin-top: 12px !important; }
.flow > * + * { margin-top: 18px !important; }
.flow > h3 { margin-top: 36px !important; font-size: 20px; }
.flow > h3:first-child { margin-top: 0 !important; }

/* choose your way: four cards that jump down the page */
.paths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.paths li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 18px 18px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; transition: border-color 0.3s; display: flex; flex-direction: column; }
.paths li:hover { border-color: var(--line-strong); }
.paths strong { display: block; color: var(--text); font-size: var(--fs-body); font-weight: 600; margin: 0 0 6px; }
.paths em { display: block; order: -1; margin-bottom: 26px; font-style: normal; font: 700 13px/1 var(--font-num); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.paths a { color: inherit; text-decoration: none; }
.paths a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.paths a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.paths small { display: block; margin-top: auto; padding-top: 16px; font-size: var(--fs-xs); color: var(--faint); }
@media (max-width: 960px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .paths { grid-template-columns: 1fr; } .paths em { margin-bottom: 14px; } }

/* the download card */
.download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 22px; }
.download-file { display: flex; align-items: center; gap: 16px; min-width: 0; }
.download-file b { display: block; font-weight: 600; font-size: var(--fs-body); word-break: break-all; }
.download-file small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 3px; }
.download-icon { flex: none; width: 48px; height: 56px; display: grid; place-items: end center; padding-bottom: 9px; border: 1px solid var(--line-strong); border-radius: 6px 14px 6px 6px; font: 700 13px/1 var(--font-num); letter-spacing: 0.08em; color: var(--accent); background: var(--bg); }
.btn.is-disabled { background: transparent; color: var(--muted); border-color: var(--line-strong); cursor: default; }
.btn.is-disabled:hover { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.btn .ico { transform: rotate(90deg); }

/* a note that must not be missed */
.callout { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-s); background: var(--surface); padding: 14px 18px !important; color: color-mix(in srgb, var(--text) 86%, var(--muted)); font-size: var(--fs-body); }
.callout.is-warn { border-left-color: var(--warn); }
.callout strong { color: var(--text); }

/* settings reference: variable · default · meaning */
.ref .wp-block-table { overflow-x: auto; margin: 0; }
.ref table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ref .wp-block-table table, .ref .wp-block-table thead { border: 0; }
.ref th, .ref td { text-align: left; padding: 12px 14px 12px 0; border: 0 !important; border-bottom: 1px solid var(--line) !important; vertical-align: top; color: var(--muted); }
.ref thead th { font: 700 13px/1.2 var(--font-num); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-strong) !important; }
.ref td:first-child { width: 1%; white-space: nowrap; }
.ref td:nth-child(2) { width: 1%; white-space: nowrap; color: var(--text); }
.ref td:first-child code { color: var(--accent); }
.ref h3 { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 44px 0 6px !important; font-family: var(--font-num); }
.ref h3:first-child { margin-top: 0 !important; }
.ref mark, .section-head mark { background: none; color: var(--accent); font-weight: 600; font-size: 0.86em; white-space: nowrap; }
.also a { color: var(--accent); font-weight: 600; }
.ref figcaption, .ref .wp-element-caption { margin-top: 10px; text-align: left; }

/* the mode tiles link to the mode's page: the whole tile is the target */
.mode-link { color: inherit; text-decoration: none; }
.mode-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mode-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode:has(.mode-link):hover { border-color: var(--accent); }
.mode-tags a { position: relative; z-index: 2; font-size: var(--fs-xs); font-weight: 500; color: var(--text); padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); text-decoration: none; transition: border-color 0.2s; }
.mode-tags a:hover { border-color: var(--accent); }
.mode.is-wide h3 a { color: inherit; text-decoration: none; }
.mode.is-wide h3 a:hover { color: var(--accent); }

/* on-page navigation (game modes) */
.toc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.toc li a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; transition: border-color 0.2s; }
.toc li a:hover { border-color: var(--accent); }
.toc li a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mode-nav .toc-label:first-child { margin-top: 0 !important; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--text); }
.toc-label { margin-top: 28px !important; }
.toc-label + .toc { margin-top: 10px !important; }

/* option list: name – what it does */
.kv { list-style: none; margin: 0; padding: 0; }
.kv li { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); }
.kv li:last-child { border-bottom: 1px solid var(--line); }
.kv strong { color: var(--text); font-weight: 600; }
@media (max-width: 600px) { .kv li { grid-template-columns: 1fr; } }

/* one game mode */
.mode-doc .section-head .mode-sub { font: 700 15px/1.2 var(--font-num); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.mode-doc h1 { font-size: clamp(56px, 7vw, 96px); line-height: 0.92; }
.mode-doc .flow > h2 { font-size: clamp(26px, 2.6vw, 32px); margin-top: 44px !important; }
.mode-doc .flow > h2:first-child { margin-top: 0 !important; }
.mode-doc .section-head .wp-block-buttons { margin-top: 22px !important; }
.mode-doc .section-head .art-block { margin-top: 28px !important; max-width: 260px; }
.tag-soon { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 10px; border: 1px dashed var(--line-strong); border-radius: 999px; font: 600 11px/1.4 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.placeholder { color: var(--faint) !important; font-style: italic; }
.example { border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.example table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.example th, .example td { text-align: left; padding: 10px 14px; border: 0 !important; border-bottom: 1px solid var(--line) !important; color: var(--muted); }
.example thead th { font: 700 12px/1.2 var(--font-num); letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface); }
.example tbody tr:last-child td { border-bottom: 0 !important; }
.example td:first-child, .example td:nth-child(2) { font: 700 17px/1.2 var(--font-num); color: var(--cream); white-space: nowrap; letter-spacing: 0.02em; }
.example td:last-child { color: var(--text); }
.example figcaption { padding: 10px 14px; margin: 0; text-align: left; }
.example .wp-block-table { margin: 0; overflow-x: auto; }

/* ---------- FAQ ---------- */
.faq .wp-block-details { border-top: 1px solid var(--line); padding: 0; margin: 0 !important; }
.faq .wp-block-details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 600; font-size: var(--fs-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform 0.35s var(--out); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover::after { border-color: var(--text); }
.faq .wp-block-details > :not(summary) { color: var(--muted); margin: 0 0 20px; max-width: 64ch; }

/* ---------- closing call ---------- */
.cta { text-align: left; }
.cta-box { border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(28px, 5vw, 56px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; position: relative; overflow: hidden; isolation: isolate; background: var(--surface); }
.cta-box > * { margin: 0 !important; }
.cta-box h2 { font-size: clamp(36px, 4.4vw, 56px); }
.cta-box p { color: var(--muted); margin-top: 12px !important; max-width: 48ch; }
.cta-box .art-block { position: absolute; z-index: -1; right: -120px; top: -120px; width: 420px; max-width: none; opacity: 0.55; }
.cta-box .art-block svg { animation: artDrift 120s linear infinite; }
@media (max-width: 760px) { .cta-box { grid-template-columns: 1fr; } .cta-box .art-block { width: 300px; right: -120px; top: -120px; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); max-width: 1200px; margin: 0 auto; padding: 48px 20px 32px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.foot-brand p { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-sm); max-width: 34ch; }
.foot-nav ul, .foot-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-nav a, .foot-legal a { color: var(--muted); text-decoration: none; font-size: var(--fs-sm); }
.foot-nav a:hover, .foot-legal a:hover { color: var(--text); }
.foot-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: var(--fs-xs); color: var(--faint); }
.foot-bottom p { margin: 0; }
.foot-bottom .langs { margin-left: auto; }

/* ---------- blog list ---------- */
.post-list { list-style: none; padding: 0; }
.post-list > li { padding: 24px 0; border-top: 1px solid var(--line); }
.post-list h2 { font-size: 32px; margin: 6px 0 8px; }
.post-list h2 a { text-decoration: none; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.art .art-lit > *, .mode-art svg, .cta-box .art-block svg { animation: none !important; }
	.faq summary::after { transition: none; }
}

/* ---------- Tic-Tac-Toe (the grid as the app draws it: css .ttt/.gc/.gm there) ---------- */
.tttg { --gc: 76px; display: grid; grid-template-columns: repeat(3, var(--gc)); gap: 6px; }
.tttg.is-s { --gc: 46px; gap: 4px; }
.tttg.is-one { --gc: 64px; grid-template-columns: var(--gc); }
.tttg .gc { position: relative; height: var(--gc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); color: var(--cream); transition: border-color 0.4s, background 0.4s; }
.tttg .gc span { font: 700 calc(var(--gc) * 0.32)/1 var(--font-num); letter-spacing: 0.01em; transition: opacity 0.4s; }
.tttg .gc small { font: 600 9px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: opacity 0.4s; }
.tttg.is-s .gc { border-radius: 7px; }
.tttg.is-s .gc small { display: none; }
.tttg .gc.taken span, .tttg .gc.taken small { opacity: 0.22; }
.tttg .gc.line { border-color: var(--accent); background: var(--accent-soft); }
.gm { position: absolute; inset: 14%; display: flex; }
.gm svg { width: 100%; height: 100%; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.gm.x svg { stroke: var(--accent); }
.gm.o svg { stroke: var(--cream); }
.gc.fresh .gm { animation: gmIn 0.45s var(--out) backwards; }
@keyframes gmIn { from { transform: scale(0.4); opacity: 0; } }
.xo { display: inline-flex; width: 0.8em; height: 0.8em; vertical-align: -0.05em; }
.xo svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; }
.xo.x svg { stroke: var(--accent); }
.xo.o svg { stroke: var(--cream); }

.ttt-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ttt-chips li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-m); padding: 9px 4px 7px; text-align: center; transition: border-color 0.3s, opacity 0.3s; }
.ttt-chips b { display: block; font: 700 20px/1 var(--font-num); color: var(--cream); min-height: 20px; }
.ttt-chips small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.ttt-chips .is-empty b { color: var(--faint); }
.ttt-chips .is-hit { border-color: rgba(61, 220, 132, 0.55); }
.ttt-chips .is-hit b { color: var(--accent); }
.ttt-chips .is-off { opacity: 0.45; border-style: dashed; }
.ttt-chips .is-off b { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 2px; }

/* the hero */
.ttt-demo { margin: 0; }
.ttt-demo-body { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.ttt-demo-side { padding: 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.ttt-turn { display: flex; align-items: center; justify-content: space-between; }
.ttt-turn b { font-size: 40px; line-height: 1; display: inline-flex; }
.ttt-demo-board { padding: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.ttt-board { width: 100%; max-width: 360px; height: auto; display: block; overflow: visible; }
.ttt-board .tb-rim { fill: #111214; }
.ttt-board .tb-dark { fill: #1c1c1e; } .ttt-board .tb-light { fill: #d9ccab; } .ttt-board .tb-red { fill: #b3262a; } .ttt-board .tb-green { fill: #1a8a47; }
.ttt-board > path, .ttt-board > circle:not(.tb-rim) { opacity: 0.26; }   /* dimmed, so the free fields stand out */
.ttt-board .tb-num { font: 600 21px var(--font-num); fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.tb-lamps > * { fill: var(--accent); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; opacity: 0.9; filter: drop-shadow(0 0 5px rgba(61, 220, 132, 0.85)); transition: opacity 0.5s; animation: lampGlow 2.4s ease-in-out infinite; }
.tb-lamps > .off { opacity: 0; animation: none; }
@keyframes lampGlow { 50% { opacity: 0.6; } }
.tb-darts circle { fill: #ffd83d; stroke: #111; stroke-width: 2; animation: gmIn 0.3s var(--out) backwards; }
.tb-darts circle.dead { fill: var(--faint); }
.ttt-demo figcaption { margin-top: 14px; }
.ttt-demo.is-won .scan-state { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 640px) {
	.ttt-demo-body { grid-template-columns: 1fr; }
	.ttt-demo-side { border-right: 0; border-bottom: 1px solid var(--line); align-items: center; }
	.ttt-demo-side .ttt-turn, .ttt-demo-side .ttt-chips { width: 100%; max-width: 252px; }
	.tttg { --gc: 78px; }
	.ttt-board { max-width: 280px; }
}

/* what a cell can be */
.ttt-cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.ttt-cells li { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-body); }
.ttt-cells strong { display: block; color: var(--text); font-weight: 600; font-size: var(--fs-body); margin-bottom: 2px; }

/* the four levels */
.ttt-levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ttt-levels > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; }
.ttt-levels h3 { margin: 0; font: 700 28px/1 var(--font-num); text-transform: uppercase; color: var(--cream); letter-spacing: 0.02em; }
.ttt-levels ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.ttt-levels ul li { display: flex; gap: 8px; align-items: baseline; }
.ttt-levels ul li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }
.ttt-auto { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 32px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 22px; color: var(--muted); font-size: var(--fs-body); }
.ttt-auto strong { display: block; color: var(--text); font-size: var(--fs-body); margin-bottom: 4px; }
.ttt-scale { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; }
.ttt-scale li { flex: var(--w) 1 0; min-width: 0; border-top: 6px solid var(--accent); padding-top: 8px; }
.ttt-scale li:nth-child(1) { border-top-color: rgba(61, 220, 132, 0.3); }
.ttt-scale li:nth-child(2) { border-top-color: rgba(61, 220, 132, 0.6); }
.ttt-scale b { display: block; color: var(--text); font-size: var(--fs-sm); }
.ttt-scale small { color: var(--faint); font-size: var(--fs-xs); }
@media (max-width: 1000px) { .ttt-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ttt-auto { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ttt-levels { grid-template-columns: 1fr; } .ttt-levels .tttg { max-width: 300px; } }

/* moves per visit */
.ttt-hits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ttt-hits > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; }
.ttt-hits-n { display: flex; align-items: baseline; gap: 10px; }
.ttt-hits-n b { font: 700 56px/0.9 var(--font-num); color: var(--accent); }
.ttt-hits-n small { color: var(--muted); font-size: 14px; }
.ttt-hits p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 860px) { .ttt-hits { grid-template-columns: 1fr; } .ttt-hits > li { max-width: 420px; } }

/* what the screen shows */
.ttt-states { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ttt-states > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px 16px; color: var(--muted); font-size: var(--fs-sm); }
.ttt-states-fig { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 176px; justify-content: center; margin-bottom: 14px; }
.ttt-states .tttg { --gc: 44px; }
.ttt-states .ttt-chips { width: 100%; max-width: 150px; gap: 4px; }
.ttt-states .ttt-chips li { padding: 6px 2px 5px; }
.ttt-states .ttt-chips b { font-size: 15px; min-height: 15px; }
.ttt-states .ttt-chips small { display: none; }
.ttt-states strong { display: block; color: var(--text); font-size: var(--fs-body); margin-bottom: 4px; }
.ttt-states p { margin: 0; }
@media (max-width: 1100px) { .ttt-states { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ttt-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .ttt-states { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.gc.fresh .gm, .tb-darts circle { animation: none; }
	.tb-lamps > * { animation: none; }
}

/* Tic-Tac-Toe hero: dart flight, the hit field, the big mark over the board */
.ttt-board .tb-dart > circle:last-child { fill: #ffd83d; stroke: #111; stroke-width: 2; }
.ttt-board .tb-dart.fly { animation: dartIn 0.26s cubic-bezier(0.5, 0, 0.75, 0) both; transform-box: fill-box; }
.ttt-board .tb-dart.fly > circle:last-child { animation: dartLand 0.26s cubic-bezier(0.5, 0, 0.75, 0) both; transform-box: fill-box; transform-origin: center; }
@keyframes dartLand { from { transform: scale(2.6); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); } }
@keyframes dartIn { from { opacity: 0.4; } to { opacity: 1; } }
.ttt-board .tb-ring { fill: none; stroke: #ffd83d; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ringOut 0.7s 0.24s var(--out) both; }
@keyframes ringOut { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(4.2); opacity: 0; } }
.tb-lamps > .hit { fill: var(--cream); opacity: 1; animation: none; transition: opacity 0.2s; }
.tb-big { opacity: 0; pointer-events: none; transition: opacity 0.35s var(--out); }
.tb-big.show { opacity: 1; }
.tb-big-veil { fill: rgba(13, 15, 17, 0.72); }
.tb-big-mark { display: none; transform-box: fill-box; transform-origin: center; }
.tb-big.is-x .tb-big-mark.is-x, .tb-big.is-o .tb-big-mark.is-o { display: inline; }
.tb-big-mark path { stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.tb-big-mark.is-x path { stroke: var(--accent); fill: var(--accent); filter: drop-shadow(0 0 7px rgba(61, 220, 132, 0.75)); }
.tb-big-mark.is-o path { stroke: var(--cream); fill: var(--cream); filter: drop-shadow(0 0 7px rgba(241, 233, 214, 0.6)); }
.tb-big.show .tb-big-mark { animation: bigIn 0.5s var(--out) both; }
.tb-big.show .tb-big-mark path { stroke-dashoffset: 0; fill-opacity: 0.16; transition: stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1), fill-opacity 0.4s 0.35s; }
@keyframes bigIn { from { transform: scale(0.72) rotate(-8deg); } to { transform: scale(1) rotate(0deg); } }
.ttt-demo .tb-darts { transition: opacity 0.3s; }
.ttt-demo.is-pulling .tb-darts { opacity: 0; }
.ttt-demo [data-grid], .ttt-demo .ttt-chips { transition: opacity 0.4s; }
.ttt-demo.is-fading [data-grid], .ttt-demo.is-fading .ttt-chips, .ttt-demo.is-fading .tb-darts { opacity: 0.25; }
.ttt-chips .is-next { border-style: dashed; border-color: rgba(61, 220, 132, 0.45); }
.ttt-chips .is-miss b { color: var(--muted); }
.ttt-demo [data-grid] .gc.line { transition: border-color 0.35s var(--d, 0ms), background 0.35s var(--d, 0ms); }
.ttt-demo [data-grid] .gc.line .gm svg { animation: lineGlow 0.6s var(--out) both; animation-delay: var(--d, 0ms); }
@keyframes lineGlow { 40% { transform: scale(1.18); } }
.ttt-demo [data-mark] .xo { animation: gmIn 0.35s var(--out); }
@media (prefers-reduced-motion: reduce) {
	.ttt-board .tb-dart.fly, .ttt-board .tb-dart.fly > circle, .ttt-board .tb-ring, .ttt-demo [data-grid] .gc.line .gm svg, .ttt-demo [data-mark] .xo { animation: none; }
	.tb-big, .tb-big-mark, .tb-big-mark path { transition: none; animation: none; }
}

/* the app's board lock after a visit the rules ended: violet rim, crossed-out dart */
.ttt-void { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 15, 17, 0.86); border: 2px solid rgba(167, 139, 250, 0.85); box-shadow: 0 0 14px rgba(167, 139, 250, 0.55), inset 0 0 0 7px rgba(13, 15, 17, 0.86), inset 0 0 0 8px rgba(167, 139, 250, 0.3); }
.ttt-void svg { width: 44px; height: 44px; overflow: visible; }
.ttt-void .v-fill { fill: rgba(167, 139, 250, 0.1); }
.ttt-void .v-line { fill: none; stroke: rgba(167, 139, 250, 0.95); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.8)); }
.ttt-states-fig { min-height: 186px; }   /* the tallest figure: grid + dart chips */
/* the lock lies on the grid and covers it, as it covers the board in the app */
.ttt-void-wrap { position: relative; }
.ttt-void-wrap .tttg { filter: blur(1px); opacity: 0.45; }
.ttt-void-wrap .ttt-void { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; transform: translate(-50%, -50%); }
.ttt-void-wrap .ttt-void svg { width: 76px; height: 76px; }

/* a grid that fills its card: square cells, the type grows with them */
.tttg.is-fluid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; container-type: inline-size; width: 100%; align-self: stretch; }
.tttg.is-fluid .gc { height: auto; aspect-ratio: 1; border-radius: var(--r-m); }
.tttg.is-fluid .gc span { font-size: clamp(15px, 10cqw, 34px); }
.tttg.is-fluid .gc small { font-size: clamp(7px, 3cqw, 10px); }
/* boxes with padding inside the page's width stay within it */
.ttt-auto, .callout, .download, .ttt-levels > li, .ttt-hits > li, .ttt-states > li { box-sizing: border-box; }
/* the list under the five states keeps its distance from the cards */
.ttt-states + .checks { margin-top: 36px !important; }

/* ---------- coming in (assets/js/reveal.js marks what it animates) ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--out), transform 0.9s var(--out), border-color 0.3s; transition-delay: calc(var(--rv-i, 0) * 80ms), calc(var(--rv-i, 0) * 80ms), 0s; }
.rv.rv-in { opacity: 1; transform: none; }
.rv.cta-box, .rv.scan, .rv.ttt-demo, .rv.stx, .rv.hour { transform: translateY(32px) scale(0.985); }
.rv.cta-box.rv-in, .rv.scan.rv-in, .rv.ttt-demo.rv-in, .rv.stx.rv-in, .rv.hour.rv-in { transform: none; }

/* the Tic-Tac-Toe figures come alive once they are in view */
@keyframes cellIn { from { opacity: 0; transform: scale(0.82); } }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes markIn { from { opacity: 0; transform: scale(0.3) rotate(-25deg); } }
.rv:not(.ttt-demo) .tttg .gc, .rv:not(.ttt-demo) .ttt-chips li { opacity: 0; }
.rv.rv-in:not(.ttt-demo) .tttg .gc { opacity: 1; animation: cellIn 0.45s var(--out) both; animation-delay: calc(250ms + var(--i, 0) * 45ms); }
.rv.rv-in:not(.ttt-demo) .ttt-chips li { opacity: 1; animation: chipIn 0.4s var(--out) both; animation-delay: calc(200ms + var(--i, 0) * 180ms); }
.rv.rv-in:not(.ttt-demo) .tttg .gm { animation: markIn 0.5s var(--out) both; animation-delay: calc(750ms + var(--i, 0) * 60ms); }
.ttt-cells .rv.rv-in .gc, .ttt-cells > li.rv-in .gc { animation-delay: calc(150ms + var(--rv-i, 0) * 60ms); }
/* three in a row keeps glowing, the lock breathes as it does in the app */
@keyframes rowGlow { 50% { background: rgba(61, 220, 132, 0.22); border-color: rgba(120, 240, 175, 0.9); } }
.ttt-states .gc.line { animation: rowGlow 2.6s ease-in-out infinite; }
.rv.rv-in .ttt-states-fig .gc.line, .ttt-states > li.rv-in .gc.line { animation: cellIn 0.45s var(--out) both, rowGlow 2.6s 1.4s ease-in-out infinite; }
@keyframes voidBreathe { 50% { box-shadow: 0 0 26px rgba(167, 139, 250, 0.75), inset 0 0 0 7px rgba(13, 15, 17, 0.86), inset 0 0 0 8px rgba(167, 139, 250, 0.45); } }
.ttt-void { animation: voidBreathe 3.2s ease-in-out infinite; }
.ttt-states > li.rv .ttt-void { opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity 0.5s 0.9s, transform 0.6s 0.9s var(--out); }
.ttt-states > li.rv-in .ttt-void { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* the mode tiles: their board turns a bit faster while pointed at */
.mode:hover .mode-art svg { animation-duration: 30s; }

@media (prefers-reduced-motion: reduce) {
	.rv { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ttt-states .gc.line, .ttt-void { animation: none !important; }
}

/* captions and notes under figures, tables and code: one size (that of card text), a grey one can read */
.scan figcaption, .stx figcaption, .hour figcaption, .ttt-demo figcaption, .beat-demo figcaption, .compare figcaption, .compare .wp-element-caption,
.ref figcaption, .ref .wp-element-caption, .example figcaption, .term-note { font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); max-width: 68ch; }

/* ---------- Connect Four (the board as the app draws it: css .c4/.cd there) ---------- */
.c4g { --cd: 30px; --gap: 6px; display: grid; grid-template-columns: repeat(7, var(--cd)); gap: var(--gap); }
.c4g .ch { font: 700 calc(var(--cd) * 0.46)/1 var(--font-num); color: var(--muted); text-align: center; padding-bottom: 2px; letter-spacing: 0.01em; }
.c4g .cd { position: relative; width: var(--cd); height: var(--cd); border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); box-sizing: border-box; transition: box-shadow 0.35s var(--d, 0ms); }
.c4g .st { position: absolute; inset: -1px; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); }
.c4g .st.x { background: var(--accent); }
.c4g .st.o { background: var(--cream); }
.c4g .cd.line { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.c4g .cd.fresh .st.x { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 0 12px rgba(61, 220, 132, 0.75); }
.c4g .cd.fresh .st.o { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 0 12px rgba(241, 233, 214, 0.6); }
.c4g .cd.cap .st { outline: 2px dashed var(--cream); outline-offset: 3px; }
.c4g.is-s { --cd: 19px; --gap: 3px; }
.c4g.is-s .ch { font-size: 10px; }
.c4g.is-fluid { grid-template-columns: repeat(7, minmax(0, 1fr)); --gap: 5px; width: 100%; max-width: 300px; container-type: inline-size; }
.c4g.is-fluid .cd { width: auto; height: auto; aspect-ratio: 1; }
.c4g.is-fluid .ch { font-size: clamp(10px, 5.4cqw, 17px); }
.xo.disc svg { stroke: none; }
.xo.disc.x svg { fill: var(--accent); }
.xo.disc.o svg { fill: var(--cream); }

/* a stone falls into its column and settles with a small bounce */
@keyframes c4Drop {
	from { transform: translateY(calc(var(--fall) * -1 * (100% + var(--gap)))); opacity: 0; }
	15% { opacity: 1; }
	68% { transform: translateY(0); }
	82% { transform: translateY(-14%); }
	to { transform: translateY(0); }
}
@keyframes c4Flip { 0% { transform: rotateY(0); background: var(--cream); } 49% { background: var(--cream); } 50% { transform: rotateY(90deg); background: var(--accent); } to { transform: rotateY(0); background: var(--accent); } }
@keyframes stoneGlow { 50% { filter: brightness(1.25) drop-shadow(0 0 6px rgba(61, 220, 132, 0.8)); } }
.ttt-demo .c4g .cd.fresh .st { animation: c4Drop 0.62s cubic-bezier(0.45, 0, 0.6, 1) backwards; }
.ttt-demo .c4g .cd.line .st { animation: lineGlow 0.6s var(--out) both; animation-delay: var(--d, 0ms); }
.ttt-demo [data-grid].c4g { transition: opacity 0.4s; }
.ttt-demo.is-fading [data-grid].c4g { opacity: 0.25; }

/* the board: the column numbers bright, the big stone over the board */
.c4-board .tb-num.is-col { fill: var(--cream); font-weight: 700; }
.c4-board .tb-big-mark path.groove { fill: none; stroke-width: 3; opacity: 0.7; }
.c4-demo .ttt-demo-side { justify-content: center; }

/* the four levels: a board and its seven columns */
.c4-level-fig { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.c4-level-fig .c4-board { max-width: 210px; }
.c4-colrow { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.c4-colrow li { font: 700 15px/1 var(--font-num); text-align: center; color: var(--cream); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 0 5px; }

/* the bonuses: one position, three outcomes */
.c4-bonus-base { display: flex; align-items: center; gap: 22px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px 22px; color: var(--muted); font-size: var(--fs-body); box-sizing: border-box; }
.c4-bonus-base p { margin: 0; max-width: 60ch; }
.c4-bonus-base strong { color: var(--text); }
.c4-bonus-start { flex: none; }
.c4-bonus .ttt-hits-n { align-items: center; justify-content: space-between; gap: 12px; }
.c4-bonus .ttt-hits-n b { font-size: clamp(30px, 3vw, 38px); line-height: 1; }
.c4-did { font-size: 12px; font-weight: 600; color: var(--accent); border: 1px solid rgba(61, 220, 132, 0.4); border-radius: 12px; padding: 3px 10px; white-space: nowrap; }
.c4-bonus .c4g { align-self: center; }
@media (max-width: 560px) { .c4-bonus-base { flex-direction: column; align-items: flex-start; } }

/* the five states */
.c4-states-board .c4-board { width: 150px; max-width: 100%; }
.ttt-states .c4g .cd.line .st { animation: stoneGlow 2.6s 1.2s ease-in-out infinite; }

/* coming in: the stones appear, the new ones fall, the captured one turns */
.rv:not(.ttt-demo) .c4g .st { opacity: 0; }
.rv.rv-in:not(.ttt-demo) .c4g .st { opacity: 1; animation: markIn 0.4s var(--out) both; animation-delay: calc(250ms + var(--i, 0) * 12ms); }
.rv.rv-in:not(.ttt-demo) .c4g .cd.fresh .st { animation: c4Drop 0.62s cubic-bezier(0.45, 0, 0.6, 1) both; animation-delay: calc(1000ms + var(--i, 0) * 4ms); }
.rv.rv-in:not(.ttt-demo) .c4g .cd.cap .st { animation: markIn 0.4s var(--out) both, c4Flip 0.7s 1.1s ease-in-out both; }
.rv.rv-in .ttt-states .c4g .cd.line .st, .ttt-states > li.rv-in .c4g .cd.line .st { animation: markIn 0.4s var(--out) both, stoneGlow 2.6s 1.4s ease-in-out infinite; animation-delay: calc(250ms + var(--i, 0) * 12ms), 1.4s; }
@media (max-width: 860px) { .c4-bonus .c4g.is-fluid { max-width: 280px; } }
@media (prefers-reduced-motion: reduce) {
	.c4g .st, .c4g .cd { animation: none !important; transition: none !important; }
}

/* ---------- Connect Four: fields on every hole ---------- */
/* the head of a column: the field its next hole takes; a hole: its field, "?" while hidden, or its ring */
.c4g .ch { font-size: calc(var(--cd) * 0.42); color: var(--cream); white-space: nowrap; letter-spacing: -0.01em; }
.c4g.is-ring .ch, .c4g.is-same .ch { color: var(--muted); }
.c4g .ch.nw { color: var(--accent); animation: headIn 0.5s var(--out) both; }
@keyframes headIn { from { opacity: 0; transform: translateY(6px) scale(0.7); } }
.c4g .cd { display: grid; place-items: center; }
.c4g .cd small { font: 700 calc(var(--cd) * 0.3)/1 var(--font-num); color: var(--faint); letter-spacing: 0; white-space: nowrap; }
.c4g.is-open .cd small, .c4g.is-ring .cd small { color: var(--muted); }
.c4g .cd.nx { border: 1px dashed rgba(61, 220, 132, 0.6); }
.c4g .cd.nx small { color: var(--accent); }
.c4g.is-big { --cd: 46px; --gap: 7px; }
.c4g.is-s .cd small { font-size: 7px; }
.c4g.is-fluid .cd small { font-size: clamp(7px, 3.6cqw, 12px); }
.c4g.is-fluid .ch { font-size: clamp(9px, 5cqw, 16px); }

/* the whole board with every field, and what the rows take */
.c4-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.c4-fields-fig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; }
.c4-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c4-rows li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-body); }
.c4-rows li:first-child { border-top: 0; }
.c4-rows b { font: 700 20px/1.2 var(--font-num); color: var(--accent); letter-spacing: 0.01em; }
.c4-rows strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
@media (max-width: 860px) { .c4-fields { grid-template-columns: 1fr; } .c4-fields-fig { justify-self: center; } }
@media (max-width: 440px) { .c4g.is-big { --cd: 34px; --gap: 5px; } .c4-fields-fig { padding: 14px; } .c4-rows li { grid-template-columns: 1fr; gap: 4px; } }

/* a level: its board, and one column of it bottom up */
.c4-level-fig { flex-direction: row; align-items: stretch; gap: 12px; }
.c4-level-board { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.c4-level-board .c4-board { max-width: 190px; }
.c4-ladder-wrap { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c4-ladder-wrap small { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.c4-ladder { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.c4-ladder li { width: 50px; height: 26px; display: grid; place-items: center; border-radius: 13px; font: 700 13px/1 var(--font-num); color: var(--cream); border: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.c4-ladder .is-w { color: var(--text); }
.c4-ladder .is-s { border-color: rgba(61, 220, 132, 0.25); }
.c4-ladder .is-dt, .c4-ladder .is-d { border-color: rgba(61, 220, 132, 0.5); color: var(--accent); }
.c4-ladder .is-t, .c4-ladder .is-b, .c4-ladder .is-db { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.rv .c4-ladder li { opacity: 0; }
.rv.rv-in .c4-ladder li { opacity: 1; animation: chipIn 0.4s var(--out) both; animation-delay: calc(350ms + (5 - var(--i, 0)) * 90ms); }

/* the four ways to build the board */
.c4-variants { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c4-variants .ttt-hits-n b { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.05; }
.c4-variants .ttt-hits-n { align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 58px; }
@media (max-width: 1100px) { .c4-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c4-variants > li { max-width: none; } }
@media (max-width: 560px) { .c4-variants { grid-template-columns: 1fr; } }

/* the end of a leg: the rest dims, the row lights up cell by cell, a line runs through it (as in the app) */
.c4g.win-show { position: relative; }
.c4g.win-show > .cd:not(.line), .c4g.win-show > .ch { opacity: 0.28; transition: opacity 0.5s; }
.c4g.win-show > .cd.line { animation: winPop 0.55s var(--out) both; animation-delay: calc(250ms + var(--k, 0) * 170ms); }
@keyframes winPop { 45% { transform: scale(1.3); filter: brightness(1.3) drop-shadow(0 0 10px rgba(61, 220, 132, 0.9)); } }
.win-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.win-line line { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.92; filter: drop-shadow(0 0 6px rgba(61, 220, 132, 0.9)); animation: winDraw 0.7s 1.05s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes winDraw { to { stroke-dashoffset: 0; } }
.win-show-wrap .c4g > .cd:not(.line), .win-show-wrap .c4g > .ch { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) {
	.c4g .ch.nw, .c4g.win-show > .cd.line { animation: none; }
	.win-line line { animation: none; stroke-dashoffset: 0; }
}

/* Connect Four: the big stone over the board (as the app draws it): solid, its groove, the field in the middle, falling in */
.c4-board .tb-big-mark .sd { fill: var(--accent); filter: drop-shadow(0 0 14px rgba(61, 220, 132, 0.55)); }
.c4-board .tb-big-mark.is-o .sd { fill: var(--cream); filter: drop-shadow(0 0 14px rgba(241, 233, 214, 0.5)); }
.c4-board .tb-big-mark .sg { fill: none; stroke: rgba(9, 38, 22, 0.22); stroke-width: 5; }
.c4-board .tb-big-mark .sr { fill: none; stroke: rgba(160, 245, 200, 0.8); stroke-width: 3; stroke-linecap: round; }
.c4-board .tb-big-mark.is-o .sr { stroke: rgba(255, 250, 238, 0.85); }
.c4-board .tb-big-mark.is-o .sg { stroke: rgba(13, 15, 17, 0.2); }
.c4-board .tb-big-mark .sl { font: 800 60px var(--font-num); text-anchor: middle; dominant-baseline: central; fill: rgba(9, 38, 22, 0.92); letter-spacing: 0.01em; }
.c4-board .tb-big-mark.is-o .sl { fill: rgba(13, 15, 17, 0.9); }
.c4-board .tb-big.show .tb-big-mark { animation: stoneDrop 0.5s cubic-bezier(0.45, 0, 0.6, 1) both; }
.c4-board .tb-big.show .tb-big-mark .sl { animation: labelIn 0.3s 0.3s both; }
@keyframes stoneDrop { from { transform: translateY(-150px) scale(0.9); } 70% { transform: translateY(0) scale(1); } 85% { transform: translateY(-9px); } to { transform: none; } }
@keyframes labelIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .c4-board .tb-big.show .tb-big-mark, .c4-board .tb-big.show .tb-big-mark .sl { animation: none; } }

/* ---------- Beat It (the scoreboard as the app draws it: css .sb-player/.hearts/.sb-pips there) ---------- */
.bt-hearts { display: inline-flex; align-items: center; gap: 4px; height: 30px; }
.bt-hearts i { display: block; width: 26px; height: 26px; flex: 0 1 26px; min-width: 0; }
.bt-hearts.is-many { gap: 1px; }
.bt-hearts.is-many i { width: 17px; height: 17px; flex-basis: 17px; }
.bt-hearts svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linejoin: round; transition: fill 0.3s, stroke 0.3s; }
.bt-hearts i.on svg { fill: var(--accent); stroke: var(--accent); }
.bt-hearts i.broke { animation: btBreak 0.7s var(--out); }
.bt-hearts i.gain { animation: btGain 0.6s cubic-bezier(0.3, 1.45, 0.45, 1); }
@keyframes btBreak { 0% { transform: scale(1.4); } 30% { transform: scale(0.8) rotate(-14deg); } 60% { transform: rotate(9deg); } }
@keyframes btGain { 0% { transform: scale(0.2); } }

.bt-pips { position: absolute; right: 12px; bottom: 11px; display: flex; gap: 5px; opacity: 0; transition: opacity 0.3s; }
.bt-card.is-current .bt-pips { opacity: 1; }
.bt-pips i { display: block; width: 7px; height: 22px; color: var(--accent); transition: color 0.3s; }
.bt-pips i.used { color: var(--surface-3); }
.bt-pips svg { display: block; width: 100%; height: 100%; fill: currentColor; }

.bt-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); transition: border-color 0.35s, background 0.35s, opacity 0.35s; }
.bt-card.is-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.bt-card.is-out { opacity: 0.4; }
.bt-name { font-size: 14px; font-weight: 700; color: var(--text); }
.bt-card:not(.is-current) .bt-name { color: var(--muted); }
.bt-sub { font-size: 12px; color: var(--muted); min-height: 1.3em; }
.bt-outcap { font: 700 26px/30px var(--font-num); color: var(--muted); letter-spacing: 0.04em; }

/* the hero: the cards on the left, the bar in the middle */
.beat-demo { margin: 0; }
.beat-demo-body { display: grid; grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1.2fr); }
.bt-cards { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-right: 1px solid var(--line); }
.bt-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 18px; text-align: center; background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.bt-bar { font: 700 clamp(84px, 9vw, 128px)/0.95 var(--font-num); color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.bt-center.is-down .bt-bar { color: var(--accent); }
.bt-who { font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 10px; }
.bt-visit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; max-width: 330px; }
.bt-total { text-align: center; min-width: 56px; }
.bt-total b { display: block; font: 700 34px/1 var(--font-num); color: var(--cream); margin-top: 4px; font-variant-numeric: tabular-nums; }
.bt-chips .is-set b { color: var(--cream); }
.bt-hint { display: inline-block; margin-top: 12px; min-height: 26px; box-sizing: border-box; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 13px; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: color 0.3s, border-color 0.3s, background 0.3s; }
.bt-hint.is-beaten { color: var(--accent); border-color: rgba(61, 220, 132, 0.45); }
.bt-hint.is-bonus { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.bt-hint.is-lost { color: var(--cream); border-color: var(--cream); }
.beat-demo .bt-cards, .beat-demo .bt-visit { transition: opacity 0.4s; }
.beat-demo.is-fading .bt-cards, .beat-demo.is-fading .bt-visit { opacity: 0.3; }
.beat-demo figcaption { margin-top: 14px; }
@media (max-width: 640px) {
	.beat-demo-body { grid-template-columns: 1fr; }
	.bt-cards { border-right: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; }
	.bt-cards .bt-card { padding: 10px 10px 30px; gap: 6px; }
	.bt-cards .bt-hearts { height: 22px; gap: 2px; }
	.bt-cards .bt-hearts i { width: 19px; height: 19px; flex-basis: 19px; }
	.bt-cards .bt-sub { display: none; }
	.bt-cards .bt-pips { right: auto; left: 10px; bottom: 8px; }
	.bt-cards .bt-pips i { width: 6px; height: 16px; }
	.bt-bar { font-size: 76px; }
}

/* one round, visit by visit */
.bt-round { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.bt-round > li { position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--muted); font-size: var(--fs-sm); }
.bt-round > li.is-beat { border-color: rgba(61, 220, 132, 0.35); }
.bt-round-bar { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bt-round-bar small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bt-round-bar b { font: 700 20px/1 var(--font-num); color: var(--muted); }
.bt-round-who { margin-top: 6px; font-weight: 700; color: var(--text); }
.bt-round-darts { font: 600 15px/1.2 var(--font-num); letter-spacing: 0.03em; color: var(--muted); }
.bt-round-score { font: 700 52px/1 var(--font-num); color: var(--cream); font-variant-numeric: tabular-nums; }
.bt-round > li.is-beat .bt-round-score { color: var(--accent); }
.bt-round-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); }
.bt-round > li.is-lost .bt-round-tag { color: var(--cream); }
.bt-round-tag i { display: inline-flex; width: 15px; height: 15px; }
.bt-round-tag svg { width: 100%; height: 100%; fill: none; stroke: var(--cream); stroke-width: 2.2; stroke-linejoin: round; }
.bt-round-next { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 12px; }
/* the arrow to the next visit */
.bt-round > li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); z-index: 1; background: none; }
@media (max-width: 1100px) { .bt-round { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bt-round > li:nth-child(3n)::after { display: none; } }
@media (max-width: 560px) { .bt-round { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bt-round > li::after { display: none; } .bt-round-score { font-size: 42px; } }

/* lives as hearts */
.bt-lives { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bt-lives > li { box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; color: var(--muted); font-size: var(--fs-sm); }
.bt-lives-fig { min-height: 118px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 14px; }
.bt-lives-fig .bt-card { padding-bottom: 14px; }
.bt-lives strong { display: block; color: var(--text); font-size: var(--fs-body); margin-bottom: 4px; }
.bt-lives p { margin: 0; }
@media (max-width: 860px) { .bt-lives { grid-template-columns: 1fr; } }

/* the three extra rules */
.bt-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bt-opts > li { box-sizing: border-box; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 18px; color: var(--muted); font-size: var(--fs-sm); scroll-margin-top: calc(var(--header) + 16px); }
.bt-opts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.bt-opts-head strong { color: var(--text); font-size: var(--fs-body); }
.bt-opts-head small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.bt-opt-fig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 230px; padding: 16px; border-radius: var(--r-m); background: color-mix(in srgb, var(--bg) 55%, var(--surface)); margin-bottom: 16px; }
.bt-opt-fig .bt-chips { width: 100%; max-width: 240px; }
.bt-opt-line { display: flex; align-items: center; gap: 12px; }
.bt-opt-line .num { font-size: 34px; line-height: 1; color: var(--cream); }
.bt-opt-line .bt-hint { margin-top: 0; }
.bt-opt-vs { display: flex; align-items: center; gap: 16px; }
.bt-opt-vs span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bt-opt-vs small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bt-opt-vs b { font-size: 46px; line-height: 1; color: var(--cream); }
.bt-opt-vs i { font: 700 30px/1 var(--font-num); font-style: normal; color: var(--accent); }
.bt-opts p { margin: 0; }
.bt-flip { gap: 8px; }
.bt-flip-step { display: grid; grid-template-columns: auto auto; grid-template-areas: "l n" "s s"; align-items: center; column-gap: 12px; width: 100%; max-width: 240px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-m); }
.bt-flip-step .eyebrow { grid-area: l; }
.bt-flip-step b { grid-area: n; justify-self: end; font-size: 30px; line-height: 1; color: var(--cream); }
.bt-flip-step small { grid-area: s; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.bt-flip-step.is-down { border-color: rgba(61, 220, 132, 0.45); }
.bt-flip-step.is-down .eyebrow, .bt-flip-step.is-down b { color: var(--accent); }
@media (max-width: 1000px) { .bt-opts { grid-template-columns: 1fr; } .bt-opt-fig { min-height: 0; } }

/* coming in: the cards rise one by one, the hearts fill, the verdicts arrive */
.bt-round > li.rv { transition-delay: calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), 0s; }
.bt-lives > li.rv .bt-hearts i.on svg, .bt-opts > li.rv .bt-hearts i.on svg { fill: none; stroke: var(--faint); }
.bt-lives > li.rv-in .bt-hearts i.on svg, .bt-opts > li.rv-in .bt-hearts i.on svg { fill: var(--accent); stroke: var(--accent); transition: fill 0.3s calc(350ms + var(--i, 0) * 90ms), stroke 0.3s calc(350ms + var(--i, 0) * 90ms); }
.bt-lives > li.rv-in .bt-hearts i.broke { animation: btBreak 0.7s 1.1s var(--out) both; }
.bt-opts > li.rv-in .bt-hearts i.gain { animation: btGain 0.6s 1.1s cubic-bezier(0.3, 1.45, 0.45, 1) both; }
.bt-opts > li.rv .ttt-chips li { opacity: 0; }
.bt-opts > li.rv-in .ttt-chips li { opacity: 1; animation: chipIn 0.4s var(--out) both; animation-delay: calc(250ms + var(--i, 0) * 160ms); }
@media (prefers-reduced-motion: reduce) {
	.bt-hearts i.broke, .bt-hearts i.gain, .bt-lives > li .bt-hearts i, .bt-opts > li .bt-hearts i { animation: none !important; }
}
.rv.beat-demo { transform: translateY(32px) scale(0.985); }
.rv.beat-demo.rv-in { transform: none; }

/* ---------- Golf (the turn panel and the board as the app draws them) ---------- */
/* one colour per result, as on a golf scorecard: hole in one, birdie, par, bogey, double bogey */
.golf-demo, .golf-strokes, .golf-courses, .golf-counting, .golf-card-fig, .golf-states { --g1: #ffd83d; --g2: var(--accent); --g3: var(--cream); --g4: #f0b64a; --g5: #f06a6a; }
.golf-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.golf-legend li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 16px; font-size: 11.5px; color: var(--muted); transition: border-color 0.25s, background 0.25s, color 0.25s; }
.golf-legend b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 800 12px/1 var(--font-num); color: #0d0f11; background: var(--c); }
.golf-s1 { --c: var(--g1); } .golf-s2 { --c: var(--g2); } .golf-s3 { --c: var(--g3); } .golf-s4 { --c: var(--g4); } .golf-s5 { --c: var(--g5); }
.golf-legend li.on { color: var(--text); border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
/* the scorecard */
.golf-sc { overflow-x: auto; display: flex; justify-content: safe center; }
.golf-sc table { border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; }
.golf-sc th, .golf-sc td { min-width: 28px; height: 28px; padding: 0 4px; text-align: center; border-radius: 7px; font: 700 14px/1 var(--font-num); }
.golf-sc tr:first-child th { color: var(--muted); font-size: 13px; }
.golf-sc tr:first-child th.at { color: #0d0f11; background: var(--accent); }
.golf-sc tr > th:first-child { text-align: left; font: 600 12px var(--font); color: var(--muted); padding-right: 8px; }
.golf-sc tr.cur > th:first-child { color: var(--accent); }
.golf-sc td { background: var(--surface-2); color: var(--text); transition: background 0.3s, color 0.3s; }
.golf-sc td.golf-s1 { background: var(--g1); color: #0d0f11; }
.golf-sc td.golf-s2 { background: color-mix(in srgb, var(--g2) 26%, transparent); color: var(--g2); box-shadow: inset 0 0 0 1px var(--g2); }
.golf-sc td.golf-s3 { color: var(--g3); }
.golf-sc td.golf-s4 { background: color-mix(in srgb, var(--g4) 16%, transparent); color: var(--g4); }
.golf-sc td.golf-s5 { background: color-mix(in srgb, var(--g5) 16%, transparent); color: var(--g5); }
.golf-sc td.now { box-shadow: inset 0 0 0 1.5px var(--accent); }
.golf-sc td.tot { background: none; color: var(--cream); font-size: 16px; padding-left: 8px; }
.golf-sc td.par { background: none; color: var(--muted); }
.golf-sc td.par.under { color: var(--accent); }
.golf-sc td.par.over { color: var(--g4); }
/* the dart chips: strokes in golf words, the dart that counts framed */
.golf-chips li.is-hit { border-color: var(--line); }
.golf-chips li.is-hit b { color: var(--cream); }
.golf-chips li.is-hit small { color: var(--c); font-weight: 600; }
.golf-chips li.counts { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.golf-chips li.counts b { color: var(--accent); }
/* the board: the lit number of the hole, a value on every ring */
.golf-spot circle { fill: rgba(13, 15, 17, 0.9); stroke: rgba(61, 220, 132, 0.75); stroke-width: 1.5; transition: fill 0.25s; }
.golf-spot text { font: 800 16px var(--font-num); fill: #bff5d6; text-anchor: middle; dominant-baseline: central; }
.golf-spot.on circle { fill: var(--accent); stroke: #a0f5c8; }
.golf-spot.on text { fill: #052312; }
.golf-board .tb-num.is-col { fill: var(--cream); font-weight: 700; }
.golf-board .tb-lamps > path[style] { opacity: var(--o); animation: none; }
.golf-order circle { fill: var(--accent); stroke: #0d0f11; stroke-width: 2; }
.golf-order text { font: 800 17px var(--font-num); fill: #052312; text-anchor: middle; dominant-baseline: central; }
.rv .golf-order g { opacity: 0; }
.rv.rv-in .golf-order g { opacity: 1; animation: markIn 0.4s var(--out) both; animation-delay: calc(400ms + var(--k, 0) * 120ms); }

/* the hero: hole number, chips and legend beside the board, the scorecard below */
.golf-side { justify-content: center; gap: 16px; }
.golf-hole { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.golf-hole b { font: 700 clamp(64px, 7vw, 88px)/1 var(--font-num); color: var(--accent); }
.golf-who { font-weight: 600; color: var(--text); }
.golf-side .golf-chips { width: 100%; max-width: 280px; }
.golf-side .golf-legend { max-width: 300px; }
.golf-demo-board { position: relative; }
.golf-lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6); opacity: 0; transition: opacity 0.35s, transform 0.45s var(--out); pointer-events: none; }
.golf-lock .ttt-void { width: 120px; height: 120px; }
.golf-lock .ttt-void svg { width: 80px; height: 80px; }
.golf-demo.is-locked .golf-lock { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.golf-demo.is-locked .golf-board { filter: brightness(0.45); transition: filter 0.35s; }
.golf-demo-card { border-top: 1px solid var(--line); padding: 14px; }
.golf-demo.is-fading .golf-demo-card, .golf-demo.is-fading .golf-chips { opacity: 0.3; transition: opacity 0.4s; }
.golf-demo .tb-darts { transition: opacity 0.3s; }
.golf-demo.is-pulling .tb-darts { opacity: 0; }
.golf-demo:not(.is-won) .scan-state { color: var(--accent); }

/* what a dart is worth: the board and the five values */
.golf-strokes { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.golf-strokes-fig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; display: grid; place-items: center; }
.golf-strokes-fig .golf-board { max-width: 380px; }
.golf-rows { list-style: none; margin: 0; padding: 0; }
.golf-rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-body); }
.golf-rows li:first-child { border-top: 0; }
.golf-rows b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 800 22px/1 var(--font-num); color: #0d0f11; background: var(--c); }
.golf-rows strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.golf-rows em { font-style: normal; font-weight: 600; color: var(--c); margin-left: 6px; }
@media (max-width: 860px) { .golf-strokes { grid-template-columns: 1fr; } }

/* courses and counting: cards */
.golf-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.golf-courses .ttt-hits-n, .golf-counting .ttt-hits-n { align-items: center; justify-content: space-between; gap: 10px; }
.golf-courses .ttt-hits-n b, .golf-counting .ttt-hits-n b { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; }
.golf-course-fig { display: grid; place-items: center; }
.golf-course-fig .golf-board { max-width: 240px; }
.golf-path { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.golf-path li { font-size: 13px; }
.golf-counting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.golf-result { display: flex; align-items: center; gap: 12px; }
.golf-result b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 800 26px/1 var(--font-num); color: #0d0f11; background: var(--c); }
.golf-result span { font: 700 24px var(--font-num); color: var(--c); text-transform: uppercase; letter-spacing: 0.02em; }
@media (max-width: 860px) { .golf-courses, .golf-counting { grid-template-columns: 1fr; } .golf-courses > li, .golf-counting > li { max-width: 460px; } }

/* the scorecard section and the states */
.golf-card-fig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.golf-card-fig .golf-sc th, .golf-card-fig .golf-sc td { min-width: 34px; height: 34px; font-size: 16px; }
.golf-state-board .golf-board, .golf-void .golf-board { width: 160px; max-width: 100%; }
.golf-void { position: relative; }
.golf-void .golf-board { filter: brightness(0.45); }
.golf-states .golf-chips { width: 100%; max-width: 190px; gap: 4px; }
.golf-states .golf-chips li { padding: 6px 2px 5px; }
.golf-states .golf-chips b { font-size: 15px; min-height: 15px; }
.golf-states .golf-chips small { font-size: 9px; }
.golf-states .golf-legend li { font-size: 10px; padding: 2px 7px 2px 2px; }
.golf-states .golf-legend b { width: 16px; height: 16px; font-size: 10px; }
.golf-states { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .golf-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
	.golf-states { grid-template-columns: 1fr; }
	.golf-sc table { border-spacing: 2px; }
	.golf-sc th, .golf-sc td, .golf-card-fig .golf-sc th, .golf-card-fig .golf-sc td { min-width: 22px; height: 26px; padding: 0 2px; font-size: 13px; }
	.golf-card-fig, .golf-demo-card { padding: 12px 8px; }
}
@media (prefers-reduced-motion: reduce) { .golf-lock, .golf-demo.is-locked .golf-board { transition: none; } }

/* ---------- Last One Standing (hearts and cards as the app draws them) ---------- */
.hearts { display: inline-flex; align-items: center; gap: 4px; }
.hearts i { display: block; width: 22px; height: 22px; }
.hearts svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linejoin: round; transition: fill 0.3s, stroke 0.3s; }
.hearts i.on svg { fill: var(--accent); stroke: var(--accent); }
.hearts i.extra svg { stroke: #ffd83d; }
.hearts i.extra.on svg, .hearts i.on.extra svg { fill: #ffd83d; stroke: #ffd83d; }
@keyframes heartBreak { 30% { transform: scale(1.35) rotate(-12deg); } 60% { transform: scale(0.8) rotate(8deg); } }
@keyframes heartGain { from { transform: scale(0.3); } 60% { transform: scale(1.3); } }
.hearts i.broke { animation: heartBreak 0.6s var(--out); }
.hearts i.broke svg { stroke: var(--danger, #f06a6a); }
.hearts i.new { animation: heartGain 0.5s var(--out); }
.surv-cards { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid var(--line); }
.surv-cards li { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); min-height: 64px; transition: opacity 0.4s, border-color 0.3s, filter 0.4s; }
.surv-cards li b { font-weight: 600; font-size: 14px; color: var(--text); }
.surv-cards li.up { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.surv-cards li.out { opacity: 0.5; filter: grayscale(1); }
.surv-out { font: 700 20px/1 var(--font-num); text-transform: uppercase; letter-spacing: 0.04em; color: var(--danger, #f06a6a); }
.surv-cards li.out small { font-size: 11px; color: var(--muted); }
.surv-side { justify-content: center; gap: 12px; }
.surv-target { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.surv-target b { font: 700 clamp(60px, 7vw, 84px)/1 var(--font-num); color: var(--cream); }
.surv-who { font-weight: 600; color: var(--text); }
.surv-hint { margin: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--accent); min-height: 20px; }
.surv-side .ttt-chips { width: 100%; max-width: 280px; }
.surv-demo-board { position: relative; }
.surv-demo.is-locked .golf-lock { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.surv-demo.is-locked .c4-board { filter: brightness(0.45); transition: filter 0.35s; }
.surv-demo .tb-darts { transition: opacity 0.3s; }
.surv-demo.is-pulling .tb-darts { opacity: 0; }
.surv-demo.is-fading .surv-cards, .surv-demo.is-fading .ttt-chips { opacity: 0.3; transition: opacity 0.4s; }
.surv-demo .scan-state { color: var(--accent); }
.surv-demo .ttt-chips .is-miss b { color: var(--muted); }
/* the rule: what 0, 1, 2 hits do */
.surv-rule { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.surv-rule > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
.surv-rule-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.surv-rule-head b { font: 700 clamp(22px, 2.2vw, 28px)/1.1 var(--font-num); color: var(--accent); }
.surv-rule ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.surv-rule ol li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); text-align: center; }
.surv-rule ol li > small { font-size: 12px; font-weight: 600; }
.surv-rule .d0 > small { color: var(--danger, #f06a6a); } .surv-rule .d1 > small { color: var(--muted); } .surv-rule .d2 > small { color: var(--accent); }
.surv-hits { display: flex; align-items: baseline; gap: 4px; }
.surv-hits b { font: 700 26px/1 var(--font-num); color: var(--cream); }
.surv-hits small { font-size: 11px; color: var(--muted); }
.surv-rule .hearts i { width: 18px; height: 18px; }
/* levels, lives back */
.surv-levels, .surv-gain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.surv-levels .ttt-hits-n b, .surv-gain .ttt-hits-n b { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; }
.surv-gain .ttt-hits-n { align-items: center; justify-content: space-between; gap: 10px; }
.surv-level-board { display: grid; place-items: center; }
.surv-level-board .c4-board { max-width: 220px; }
.surv-chiprow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.surv-chiprow li { font-size: 14px; }
.surv-gain-fig { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; }
.surv-arrow { color: var(--muted); font-size: 20px; }
/* states */
.surv-state-fig { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.surv-state-fig:has(.surv-arrow) { flex-direction: row; }
.surv-demo-target b { font: 700 56px/1 var(--font-num); color: var(--cream); }
.surv-states .surv-cards { grid-template-columns: 1fr; padding: 0; border: 0; width: 100%; max-width: 190px; }
.surv-states .hearts i { width: 18px; height: 18px; }
.surv-states .surv-state-fig .hearts i { width: 34px; height: 34px; }
@media (max-width: 860px) { .surv-rule { grid-template-columns: 1fr; } .surv-levels, .surv-gain { grid-template-columns: 1fr; } .surv-levels > li, .surv-gain > li { max-width: 460px; } }
@media (max-width: 520px) { .surv-cards { padding: 10px 8px; gap: 5px; } .surv-cards li { padding: 8px; } .hearts i { width: 18px; height: 18px; } }
@media (prefers-reduced-motion: reduce) { .hearts i.broke, .hearts i.new { animation: none; } }
.surv-hint[data-tone=bad] { color: var(--danger, #f06a6a); }