/* =====================================================================
   STAY CHESSY V3: "Playful + Bold + Clever"
   Hand-drawn chess characters on a clean, structured editorial interface.
   One stylesheet for every page in src/v3/ (system: DESIGN.md).

   Self-contained: the pages load only /fonts/fonts-v3.css and this file. Class names that come from
   shared markup (booking wizard, waitlist and trial modals, pricing cards, Knight's Tour) are restyled here.
   Rules:
   - one Warm Nude background everywhere (nav included); Deep Navy only for the footer; no coloured panels,
     gradients, hatching, clouds or blobs; colour lives in the artwork, small accents, buttons and states
   - headings Bricolage Grotesque, everything else Plus Jakarta Sans
   - hand-drawn figures (src/images/chess-handdrawn/) are used unmodified, never on a tile or circle
   - cards are transparent with a thin outline; shadows only as the small offset on hover
   ===================================================================== */

/* ── tokens ── */
:root { --nav-h: 68px; }
@media (min-width: 768px) { :root { --nav-h: 80px; } }
body.v3 {
  /* palette (approved for V3) */
  --bg: #FAF0CA;        /* Warm Nude: the one page background */
  --ink: #0D3B66;       /* Deep Navy: text, outlines, footer */
  --yellow: #F4D35E;    /* Sunny Yellow: primary CTA */
  --coral: #F95738;
  --teal: #2A9D8F;
  --lav: #B59BFF;
  --white: #FFFFFF;
  /* derived from the palette */
  --ink-2: rgba(13, 59, 102, .8);   /* secondary text, about 5.9:1 on --bg */
  --line: rgba(13, 59, 102, .34);   /* card and field outlines */
  --rule: rgba(13, 59, 102, .18);   /* hairlines */
  --yellow-hover: #F0C63A;
  --err: #B3261E;
  /* type */
  --display: 'Bricolage Grotesque', 'Plus Jakarta Sans', 'Onest', 'Heebo', system-ui, sans-serif;
  --sans: 'Plus Jakarta Sans', 'Onest', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* layout: content max 1360px; side padding 20 / 32 / 48-64px; sections 64-96px; card gaps 16-24px */
  --max: 1280px;
  --pad: 16px;
  --section: 64px;
  --gap: 16px;
  --radius: 14px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
@media (min-width: 768px) { body.v3 { --pad: 32px; --gap: 20px; --section: 80px; } }
@media (min-width: 1024px) { body.v3 { --pad: clamp(48px, 4.4vw, 64px); --gap: 24px; --section: 96px; } }

/* ── design-system tokens: spacing / radii / elevation / motion / illustration palette
   (Claude Design export, 20 Oct 2026 — DESIGN.md §0/§9). Additive: nothing above is removed,
   these are the fuller scale + proposals the owner approved for build-out. ── */
body.v3 {
  /* spacing scale (4px base, 2px micro-step) */
  --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px;
  --max-detail: 1080px;
  --max-prose: 760px;
  --card-pad: 24px;
  --footer-pad: 48px;
  --tap-min: 44px;
  --button-min-h: 48px;
  --field-min-h: 56px;

  /* radii scale */
  --radius-0: 0; --radius-4: 4px; --radius-8: 8px; --radius-14: 14px;
  --radius-20: 20px; --radius-32: 32px; --radius-full: 9999px;
  --radius-button: 8px; --radius-field: 8px; --radius-card: 14px;
  --radius-tile: 14px; --radius-media: 20px; --radius-board: 20px;
  --radius-dialog: 32px; --radius-pill: 9999px;
  --outline-hair: 1.5px; --outline-strong: 2px; --outline-board: 3px;
  --focus-width: 3px; --focus-offset: 3px;

  /* elevation (flat baseline; navy offset shadow kept only on dialogs / game result card) */
  --shadow-none: none;
  --shadow-hover: rgba(0, 0, 0, .02) 0 0 0 1px, rgba(0, 0, 0, .04) 0 2px 6px, rgba(0, 0, 0, .1) 0 4px 8px;
  --shadow-dialog: 6px 6px 0 var(--ink);
  --shadow-popover: 4px 4px 0 var(--ink);
  --shadow-media: 0 24px 60px rgba(0, 0, 0, .3);

  /* motion: easing + durations (owner-approved 20 Oct 2026) */
  --ease-knight: cubic-bezier(.3, .8, .3, 1);
  --ease-knight-games: cubic-bezier(.4, 0, .2, 1);
  --ease-flip: cubic-bezier(.4, .15, .2, 1);
  --ease-fall: cubic-bezier(.22, .8, .35, 1);
  --ease-ambient: cubic-bezier(.45, 0, .55, 1);
  --dur-controls: 180ms; --dur-fade: 200ms; --dur-toggle: 240ms; --dur-menu: 250ms;
  --dur-leave: 260ms; --dur-expand: 280ms; --dur-dialog: 300ms; --dur-knight: 320ms;
  --dur-pop: 350ms; --dur-shake: 400ms; --dur-enter: 450ms; --dur-flip: 550ms;
  --dur-bounce: 600ms; --dur-reveal: 700ms; --dur-fall: 900ms;
  --dur-hint-loop: 1.1s; --dur-start-loop: 1.6s; --dur-toast-visible: 2600ms;
  --reveal-distance: 18px;
  /* M01 ambient (approved default) */
  --amb-sway-dur: 6.4s; --amb-sway-amp: 2.5deg;
  --amb-bob-dur: 5.2s; --amb-bob-amp: 3px;
  --amb-twinkle-dur: 3.6s; --amb-twinkle-amp: 1.08;
  --amb-hop-dur: 9s; --amb-hop-amp: 4px;
  /* M02 Games logo -> hero transfer (approved default, endState: stay) */
  --transfer-dur: 900ms; --transfer-stagger: 70ms; --transfer-lift: 28px;
  --transfer-ease: var(--ease-fall); --transfer-return-dur: 520ms;

  /* illustration palette — inside hand-drawn SVGs/board only, never UI text */
  --art-navy: #091d35; --art-cream: #ffebc5; --art-cream-hi: #fff6e6;
  --art-pink: #ff6584; --art-pink-deep: #f5376c; --art-yellow: #ffcc05; --art-yellow-hi: #ffda5c;
  --art-lavender: #c092f4; --art-lavender-hi: #dfbdff; --art-tan: #eec28b;
  --art-mint: #81d4b5; --art-sky: #76c9e4;

  /* game board state colours (readme.md proposals P01-P04, approved) */
  --board-light: var(--art-cream); --board-dark: var(--art-navy); --board-line: var(--art-navy);
  --board-outline: var(--art-navy); --board-visited: var(--yellow); --board-visited-line: var(--art-navy);
  --board-marker: var(--coral); --board-marker-ring: var(--art-navy); --board-hint: var(--coral);
  --board-focus-on-light: var(--ink); --board-focus-on-dark: var(--yellow);
  --path-1: #F95738; --path-2: #F4D35E; --path-3: #2A9D8F; --path-4: #B59BFF;
  --path-dead: rgba(13, 59, 102, .35);

  /* level / format accents */
  --accent-beginner: var(--coral); --accent-intermediate: var(--teal); --accent-advanced: var(--lav);
  --accent-individual: var(--yellow); --accent-group: var(--teal); --accent-series: var(--lav);
}
@media (prefers-reduced-motion: reduce), html[data-motion="reduced"] {
  body.v3 * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ── base ── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:where(body.v3) *, :where(body.v3) *::before, :where(body.v3) *::after { box-sizing: border-box; }
body.v3 {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
  animation: v3-in .45s var(--ease) backwards;   /* soft page entrance; backwards fill so the leaving fade below still applies */
  transition: opacity .26s ease;
}
body.v3.v3-leaving { opacity: 0; }
@keyframes v3-in { from { opacity: 0; } }
:where(body.v3) main { flex: 1 0 auto; }
body.v3 main:focus, body.v3 .v3-anchor-target:focus { outline: none; }
:where(body.v3) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
:where(body.v3) :where(img, svg, video) { display: block; max-width: 100%; }
:where(body.v3) :where(img) { height: auto; } /* width/height attributes give the ratio; CSS sets one side */
:where(body.v3) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.v3) a { color: inherit; }
body.v3 [id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
body.v3 :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.v3-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }

/* ── typography: one responsive scale ── */
body.v3 :where(h1, h2, h3) { font-family: var(--display); font-weight: 700; color: var(--ink); text-wrap: balance; font-optical-sizing: auto; }
/* Russian and Ukrainian pages: long words in large headings ("конфиденциальности") hyphenate on phones instead of running off the screen */
html:is([lang="ru"], [lang="uk"]) body.v3 :where(h1, h2, h3) { overflow-wrap: break-word; }
@media (max-width: 767px) { html:is([lang="ru"], [lang="uk"]) body.v3 :where(h1, h2, h3) { hyphens: auto; } }
body.v3 h1 { font-size: clamp(42px, 6vw, 80px); line-height: 1; letter-spacing: -.035em; }
body.v3 h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.03em; }
body.v3 h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; letter-spacing: -.02em; }
body.v3 h4 { font: inherit; }
body.v3 p { text-wrap: pretty; }
.v3-lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); }
.v3-eyebrow { display: inline-block; font: 700 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.v3-link, .v3-prose a, .bk-faq-desc a, .bk-consent a, .v3-consent a {
  font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: var(--coral); transition: text-decoration-color .18s; overflow-wrap: anywhere;
}
@media (hover: hover) { :is(.v3-link, .v3-prose a, .bk-faq-desc a, .bk-consent a, .v3-consent a):hover { text-decoration-color: var(--ink); } }

/* ── layout ── */
.v3-wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }

/* ── primary button (design system Button/md: 48px min-height, 12x22 inset, 8px radius, yellow, navy outline;
   hover = one composite shadow, no lift — owner decision 20 Oct 2026) ── */
body.v3 :is(.v3-btn, .bk-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--button-min-h); padding: 12px 22px; border: 2px solid var(--ink); border-radius: var(--radius-button);
  background: var(--yellow); color: var(--ink); font: 700 16px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: box-shadow var(--dur-controls) var(--ease), background-color var(--dur-controls), border-color var(--dur-controls);
}
body.v3 :is(.v3-btn, .bk-btn) svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-controls) var(--ease); }
@media (hover: hover) {
  body.v3 :is(.v3-btn, .bk-btn):hover:not(:disabled) { box-shadow: var(--shadow-hover); }
  body.v3 :is(.v3-btn, .bk-btn):hover svg { transform: translateX(3px); }
}
body.v3 :is(.v3-btn, .bk-btn):active:not(:disabled) { box-shadow: none; background: var(--yellow-hover); }
body.v3 .bk-btn { min-height: var(--tap-min); padding: 8px 14px; font-size: 15px; }
body.v3 .bk-btn-alt { background: transparent; }
body.v3 .bk-btn:disabled { opacity: .55; cursor: default; }
body.v3 .bk-btn[hidden] { display: none; }

/* ── skip link ── */
body.v3 .skip-link { position: absolute; left: 12px; top: -80px; z-index: 1000; padding: 12px 20px; border-radius: 12px; background: var(--ink); color: var(--white); font: 600 15px/1.2 var(--sans); text-decoration: none; }
body.v3 .skip-link:is(:focus, :focus-visible) { top: 12px; outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ── logo: wordmark + all six hand-drawn pieces, at their natural relative heights (king = --lh) ── */
.v3-logo { display: inline-flex; align-items: flex-end; gap: 10px; color: var(--ink); text-decoration: none; --lh: 34px; }
/* owner polish (21 Oct 2026): wordmark moved from the display face at synthesized 800 to Fredoka 700 (its real
   registered weight — see fonts-v3.css). Fredoka runs narrower than Bricolage Grotesque at the same size, so the
   size/tracking are nudged up slightly to keep the same visual footprint next to the six pieces. */
.v3-logo-text { font: 700 20px/1 'Fredoka', var(--display); letter-spacing: .01em; white-space: nowrap; padding-bottom: 3px; }
.v3-logo-pieces { display: inline-flex; align-items: flex-end; gap: 1px; }
/* fix (21 Oct 2026): the entrance used to be opacity:0 + animation:…both, which holds opacity:1 only as long as
   THAT SAME animation keeps running. The hover rule below swaps in a different animation (v3-hop), so the fall's
   held end-state was dropped and the base opacity:0 showed through — pieces vanished on hover. Fix: opacity is
   1 by default (not animation-held), and the fall only needs to fill *backwards* (hold its 0% state during the
   delay before it starts) — once it's done playing, the element's own opacity:1 already matches the 100% frame,
   so swapping to a different hover animation afterwards no longer resets anything. */
.v3-logo-pieces img { height: calc(var(--lh) * var(--h) / 738); width: auto; transform-origin: 50% 100%; opacity: 1; animation: v3-fall .7s cubic-bezier(.22, .8, .35, 1) backwards; }
.v3-logo-pieces img:nth-child(1) { animation-delay: .1s; } .v3-logo-pieces img:nth-child(2) { animation-delay: .18s; } .v3-logo-pieces img:nth-child(3) { animation-delay: .26s; }
.v3-logo-pieces img:nth-child(4) { animation-delay: .34s; } .v3-logo-pieces img:nth-child(5) { animation-delay: .42s; } .v3-logo-pieces img:nth-child(6) { animation-delay: .5s; }
/* logo "breathes" (owner decision 21 Oct 2026, site-wide nav + footer, every page except Games — see below):
   4s after the entrance settles, v3.js adds .collapsed and the five non-king pieces slide behind the king and
   fade; hovering the logo (or the king) brings them all back. */
.v3-logo-pieces img:not(:first-child) { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.v3-logo.collapsed .v3-logo-pieces img:not(:first-child) { opacity: 0; transform: translateX(-10px) scale(.6); pointer-events: none; }
.v3-logo.collapsed:hover .v3-logo-pieces img:not(:first-child), .v3-logo.collapsed:focus-within .v3-logo-pieces img:not(:first-child) { opacity: 1; transform: none; }
/* Games (owner decision 21 Oct 2026, redesigned same day): the NAV logo loads already-static (no fall-in of
   its own — it doesn't need one, the hand-off below IS its appearance signal) and never collapses to the king.
   One piece at a time peels off the nav and lands in the hero row beneath; the hero row's own fall-in (further
   down this file) is timed to receive each piece just as it leaves here, so it reads as one continuous flight
   rather than two unrelated entrances. `:not(.v3-logo-foot)` (22 Oct 2026 fix) keeps this to the nav logo only
   — the footer logo isn't part of the hand-off and was wrongly flying/fading away too; it now just keeps its
   normal entrance from .v3-logo-pieces img above and stays visible, same as on every other page. */
.v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img, .v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:not(:first-child) { opacity: 1; animation: v3-fly-to-hero .4s ease-in both; transition: none; pointer-events: none; }
@keyframes v3-fly-to-hero { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(16px) scale(.8); } }
.v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(1) { animation-delay: .3s; } .v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(2) { animation-delay: .65s; }
.v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(3) { animation-delay: 1s; } .v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(4) { animation-delay: 1.35s; }
.v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(5) { animation-delay: 1.7s; } .v3-playground .v3-logo:not(.v3-logo-foot) .v3-logo-pieces img:nth-child(6) { animation-delay: 2.05s; }
@media (min-width: 768px) { .v3-logo { --lh: 40px; gap: 12px; } .v3-logo-text { font-size: 23px; } }
/* removed (owner decision 21 Oct 2026): a hover hop used to swap the `animation` property on these pieces. Two
   problems — (1) it fired on every hover, including while collapsed, stacking an unwanted jump on top of the
   plain reveal below; (2) reassigning `animation` restarts it from scratch, re-entering v3-fall's own delay —
   so on mouse-*leave*, when the swap reverted to v3-fall, the king (never collapsed, so never caught by the
   .collapsed rules above) would replay its ENTRANCE: vanish, wait out its delay, then fall in again. The
   .collapsed reveal above is transition-based (not a keyframe `animation`), so it doesn't have this problem —
   hovering the logo now only ever does that, nothing layered on top. */

/* ── header (same background as the page; a hairline appears once the page scrolls) ── */
.v3-nav { position: fixed; inset: 0 0 auto; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 10px var(--pad); background: var(--bg); border-bottom: 1.5px solid transparent; transition: border-color .25s; }
.v3-nav.scrolled { border-bottom-color: var(--rule); }
.v3-nav-links { display: none; margin: 0; padding: 0; list-style: none; align-items: center; gap: clamp(14px, 2.2vw, 32px); }
.v3-nav-links a { display: inline-block; padding-block: 12px; font: 600 15px/1.2 var(--sans); color: var(--ink); text-decoration: none; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--coral); white-space: nowrap; }
@media (hover: hover) { .v3-nav-links a:not(.v3-nav-cta):hover { text-decoration-line: underline; } }
.v3-nav-links a.v3-nav-cta { padding: 11px 20px; border: 2px solid var(--ink); border-radius: 100px; background: var(--yellow); font-weight: 700; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
@media (hover: hover) { .v3-nav-links a.v3-nav-cta:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); } }
.nav-hamburger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-end: -10px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.nav-hamburger svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nav-hamburger .icon-close, .nav-hamburger.open .icon-menu { display: none; }
.nav-hamburger.open .icon-close { display: block; }
.mobile-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 199; flex-direction: column; padding: 8px var(--pad) 32px; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu.open { display: flex; animation: v3-menu .25s var(--ease); }
@keyframes v3-menu { from { opacity: 0; transform: translateY(-6px); } }
.mobile-menu a { padding: 18px 0; border-bottom: 1.5px solid var(--rule); font: 600 20px/1.2 var(--sans); color: var(--ink); text-decoration: none; }
.mobile-menu a.v3-nav-cta { margin-top: 28px; padding: 16px; border: 2px solid var(--ink); border-radius: 100px; background: var(--yellow); text-align: center; font-size: 17px; font-weight: 700; }
@media (min-width: 768px) {
  .v3-nav { min-height: 80px; }
  .v3-nav-links { display: flex; }
  .nav-hamburger, .mobile-menu, .mobile-menu.open { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) { .v3-nav-links { gap: 16px; } .v3-nav-links a { font-size: 14px; } .v3-nav-links a.v3-nav-cta { padding: 10px 16px; } .v3-logo { --lh: 36px; gap: 10px; } .v3-logo-text { font-size: 19px; } }
/* Language menu (build.js langSwitch): an outline globe in the nav colour opens a compact list En, РУ (full names for screen readers).
   Desktop: last item of the header links; phones (hamburger visible): in the header, left of the hamburger */
.v3-lang { position: relative; }
.v3-lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.v3-lang-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
@media (hover: hover) { .v3-lang-btn:hover svg { transform: rotate(-12deg); } }
.v3-lang-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 210; min-width: 72px; margin: 0; padding: 4px; list-style: none; border: 2px solid var(--ink); border-radius: 14px; background: var(--bg); box-shadow: 3px 3px 0 var(--ink); }
.v3-lang-list[hidden] { display: none; }
.v3-nav-links .v3-lang-list a.v3-lang-opt, .v3-lang-opt { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; font: 600 14px/1.2 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.v3-lang-opt[aria-current="true"] { font-weight: 800; background: var(--yellow); }
@media (hover: hover) { .v3-lang-opt:not([aria-current="true"]):hover { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 5px; } }
.v3-nav-links .v3-lang { margin-inline: -6px -10px; }
.v3-lang-m { margin-inline-start: auto; margin-inline-end: -14px; }
.v3-lang-m .v3-lang-opt { min-height: 44px; font-size: 16px; padding: 0 14px; }
@media (min-width: 768px) { .v3-lang-m { display: none; } }
/* Russian and Ukrainian pages: the main navigation is longer, so the header menu opens only from 1024px (hamburger below) */
@media (min-width: 768px) and (max-width: 1023px) {
  html:is([lang="ru"], [lang="uk"]) .v3-nav-links { display: none; }
  html:is([lang="ru"], [lang="uk"]) .nav-hamburger { display: flex; }
  html:is([lang="ru"], [lang="uk"]) .mobile-menu.open { display: flex; }
  html:is([lang="ru"], [lang="uk"]) .v3-lang-m { display: block; }
}

/* ── footer (Deep Navy) ── */
.v3-foot { background: var(--ink); color: var(--bg); padding: clamp(56px, 6vw, 80px) var(--pad) 32px; }
.v3-foot-in { max-width: var(--max); margin: 0 auto; }
.v3-foot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(250, 240, 202, .18); }
.v3-logo-foot { flex: none; color: var(--bg); --lh: 44px; }
.v3-foot-nav { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; flex: 1 1 auto; max-width: 720px; column-gap: 32px; }
.v3-foot-nav ul { display: grid; gap: 12px; align-content: start; margin: 0; padding: 0; list-style: none; }
.v3-foot-nav a { color: rgba(250, 240, 202, .88); font-size: 15px; font-weight: 500; text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: var(--yellow); }
.v3-foot-nav a:hover { color: var(--bg); text-decoration-line: underline; }
.v3-foot :focus-visible { outline-color: var(--yellow); outline-offset: 4px; border-radius: 4px; }
.v3-foot-copy { margin: 24px 0 0; font-size: 13px; color: rgba(250, 240, 202, .7); }
.v3-foot-contact a { display: inline-flex; align-items: center; gap: 10px; }
.v3-foot-contact svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v3-foot-contact .v3-foot-go { width: 17px; height: 17px; }
@media (max-width: 1023px) { .v3-foot-top { flex-direction: column; gap: 28px; } .v3-foot-nav { width: 100%; max-width: none; } }
@media (max-width: 767px) {
  .v3-foot { padding-top: 44px; padding-bottom: calc(max(28px, env(safe-area-inset-bottom)) + 68px); }
  .v3-foot-top { gap: 20px; padding-bottom: 0; border-bottom: 0; }
  .v3-logo-foot { --lh: 38px; }
  .v3-foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: stretch; column-gap: 24px; }
  .v3-foot-nav ul { gap: 0; }
  .v3-foot-nav ul:nth-child(-n+3) { display: contents; }
  .v3-foot-mail { display: none; }
  .v3-foot-contact { grid-column: 1 / -1; grid-row: 4; margin-top: 10px; padding-top: 6px; border-top: 1px solid rgba(250, 240, 202, .18); }
  .v3-foot-nav ul:nth-child(4) { grid-column: 1 / -1; grid-row: 5; display: flex; flex-wrap: wrap; column-gap: 22px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(250, 240, 202, .18); }
  .v3-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; overflow-wrap: anywhere; }
  .v3-foot-nav ul:nth-child(4) a { font-size: 14px; color: rgba(250, 240, 202, .76); }
  .v3-foot-copy { margin-top: 4px; }
}
@media (max-width: 359px) { .v3-foot-nav ul:nth-child(4) { column-gap: 14px; } }

/* ── hand-drawn artwork ── */
.v3-fig { width: auto; max-width: none; user-select: none; pointer-events: none; }
.v3-doodle { user-select: none; pointer-events: none; }
/* page-head figure group: figures stand on one baseline at their natural relative heights (king = --fh) */
.v3-head-art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 0 0 20px; --fh: clamp(104px, 10vw, 132px); }
/* entrance (22 Oct 2026): this figure is also a plain .v3-fig, so the unified entrance+idle system below
   (`.js :is(.v3-fig, ...)`, see v3.js) owns its opacity/reveal — it's above the fold here, so the
   IntersectionObserver fires it almost immediately rather than waiting on a scroll. */
.v3-head-art .v3-fig { height: calc(var(--fh) * var(--h) / 738); }
.v3-head-art .v3-doodle { position: absolute; width: clamp(34px, 3.4vw, 44px); height: auto; }
.v3-head-spark { left: calc(50% + 34px); top: 2px; transform: rotate(12deg); }
.v3-head-bubble { left: calc(var(--fh) * .5); top: -6px; transform: rotate(8deg); }

/* ── outlined cards and pills ── */
.v3-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 100px; color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; }
.v3-badge-soft { border-color: var(--lav); border-width: 2px; }

/* ── FAQ accordion (one component everywhere; no divider lines; behaviour in v3.js) ── */
.v3-faq h2 { margin: 0 0 clamp(14px, 2vw, 24px); font-size: clamp(34px, 4vw, 52px); }
.v3-faq-item + .v3-faq-item { margin-top: 24px; }
.v3-faq-item :is(h3, h4) { margin: 0; font: inherit; letter-spacing: 0; }
.v3-faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--ink); font: 700 clamp(17px, 1.5vw, 19px)/1.35 var(--sans); text-align: start; text-wrap: pretty; cursor: pointer; }
@media (hover: hover) { .v3-faq-q:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--coral); } }
.v3-faq-pm { flex: none; position: relative; width: 24px; height: 24px; }
.v3-faq-pm::before, .v3-faq-pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; border-radius: 2px; background: var(--ink); }
.v3-faq-pm::after { transform: rotate(90deg); transition: transform .24s var(--ease); }
.v3-faq-item.open .v3-faq-pm::after { transform: rotate(0); }
.v3-faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s var(--ease), visibility 0s linear .28s; }
.v3-faq-item.open .v3-faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .28s var(--ease), visibility 0s; }
.v3-faq-a-in { overflow: hidden; min-height: 0; }
.v3-faq-a p { margin: 0 0 14px; max-width: 44em; padding-inline-end: 42px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.v3-faq-a p:first-child { margin-top: 6px; }
.v3-faq-a p:last-child { margin-bottom: 4px; }

/* ── form fields (Contact, trial wizard, waitlist) ── */
body.v3 :is(.bk-field, .v3-field) { display: flex; flex-direction: column; gap: 8px; }
body.v3 :is(.bk-field, .v3-field) label { font: 700 12.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
body.v3 :is(.bk-field, .v3-field) :is(input, textarea, select), body.v3 .tw-tz select {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--white); color: var(--ink); font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; transition: border-color .18s;
}
body.v3 :is(.bk-field, .v3-field) textarea { min-height: 128px; resize: vertical; }
body.v3 :is(.bk-field, .v3-field) :is(input, textarea, select)::placeholder { color: rgba(13, 59, 102, .52); }
body.v3 :is(.bk-field, .v3-field, .tw-tz) :is(input, textarea, select):hover { border-color: rgba(13, 59, 102, .62); }
body.v3 :is(.bk-field, .v3-field, .tw-tz) :is(input, textarea, select):focus { border-color: var(--ink); }
body.v3 :is(.bk-field, .v3-field) select, body.v3 .tw-tz select {
  -webkit-appearance: none; appearance: none; padding-inline-end: 46px; text-overflow: ellipsis; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230D3B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 14px 8px;
}
body.v3 :is(.bk-consent, .v3-consent) { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
body.v3 :is(.bk-consent, .v3-consent) input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
body.v3 :is(.bk-err, .v3-err) { margin: 12px 0 0; font-size: 14.5px; font-weight: 600; color: var(--err); }
body.v3 :is(.bk-err, .v3-err):empty { margin: 0; }
body.v3 .bk-form { display: flex; flex-direction: column; gap: 16px; }
body.v3 .bk-row { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { body.v3 .bk-row { display: grid; grid-template-columns: 1fr 1fr; } }
body.v3 .bk-form button[type="submit"] { align-self: flex-start; }
@media (max-width: 767px) { body.v3 .bk-form button[type="submit"] { width: 100%; } }
body.v3 .bk-wl-foot { display: flex; flex-direction: column; gap: 14px; }

/* ── inner pages: head under the fixed header ── */
.v3-main { padding: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) 0 var(--section); }
.v3-head { text-align: center; }
.v3-head h1 { margin: 0 0 14px; }
.v3-head .v3-eyebrow { margin-bottom: 12px; }
.v3-head .v3-lead { max-width: 36em; margin: 0 auto; text-wrap: balance; }

/* ── modals (trial wizard and waitlist, <dialog>; behaviour in booking.js) ── */
html.bk-lock { overflow: hidden; scrollbar-gutter: stable; }
body.v3 .bk-modal { width: min(560px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--radius-dialog); background: var(--bg); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
body.v3 .bk-modal[open] { display: flex; flex-direction: column; animation: v3-pop-in .3s var(--ease); }
@keyframes v3-pop-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
body.v3 .bk-modal::backdrop { background: rgba(13, 59, 102, .55); }
body.v3 .bk-modal [hidden] { display: none; }
.bk-modal-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 16px 6px 28px; }
.bk-modal-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding-top: 4px; }
.bk-modal-tag { font: 700 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
body.v3 .bk-modal-title { margin: 0; font: 700 34px/1.08 var(--display); letter-spacing: -.025em; color: var(--ink); }
.bk-modal-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 100px; background: var(--white); color: var(--ink); cursor: pointer; transition: background-color .18s; }
@media (hover: hover) { .bk-modal-x:hover { background: var(--yellow); } }
.bk-modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px; scroll-padding-bottom: 110px; }
body.v3 .bk-modal .bk-wl-sub { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
body.v3 .bk-modal .bk-wl-form { flex: 1 0 auto; }
body.v3 .bk-modal .bk-wl-foot { position: sticky; bottom: 0; margin-top: auto; gap: 0; padding: 12px 0 calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
body.v3 .bk-modal .bk-form button[type="submit"] { width: 100%; }
.bk-wl-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.v3 .bk-modal-wide { width: min(780px, calc(100% - 32px)); } }
@media (max-width: 767px) {
  body.v3 .bk-modal { position: fixed; left: 0; right: 0; bottom: auto; top: calc(var(--vvt, 0px) + max(12px, env(safe-area-inset-top))); width: 100%; max-width: 100%; height: calc(var(--vvh, 100dvh) - max(12px, env(safe-area-inset-top))); max-height: none; margin: 0; border-width: 2px 0 0; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; box-shadow: none; }
  .bk-modal-head { padding: 16px 12px 4px 22px; }
  body.v3 .bk-modal-title { font-size: 30px; }
  .bk-modal-body { padding: 0 22px; }
}

/* ── trial wizard (markup _partials/trial-wizard.html, logic booking-trial.js): an outlined card on /trial-lesson, plain inside the modal ── */
body.v3 .tw { max-width: 720px; margin: clamp(28px, 3.4vw, 44px) auto 0; padding: clamp(24px, 3.4vw, 40px); text-align: start; border: 1.5px solid var(--line); border-radius: var(--radius-dialog); }
body.v3 .tw h2 { margin: 0 0 8px; font-size: clamp(30px, 3vw, 38px); }
.tw-sub { margin: 0 0 18px; font-size: 16px; color: var(--ink-2); }
.tw-steps { display: flex; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.tw-steps li { flex: 1; padding-top: 10px; border-top: 4px solid var(--rule); border-radius: 2px; font: 700 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tw-steps li:is(.active, .done) { border-top-color: var(--teal); color: var(--ink); }
.tw-step { display: none; }
.tw-step.active { display: block; }
.tw-day, .tw-slot { border: 2px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.tw-day { min-width: 76px; min-height: 62px; padding: 8px 14px; border-radius: 16px; font: 700 15px/1.25 var(--sans); text-align: center; }
.tw-day small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tw-slot { min-width: 80px; min-height: 52px; padding: 0 18px; border-radius: 16px; font: 700 16px/1 var(--sans); }
.tw-slot sup { margin-inline-start: 2px; font-size: 10px; }
@media (hover: hover) { :is(.tw-day, .tw-slot):hover { border-color: var(--ink); } }
:is(.tw-day[aria-pressed="true"], .tw-slot[aria-pressed="true"]) { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.tw-day[aria-pressed="true"] small { color: rgba(250, 240, 202, .82); }
.tw-tz { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tw-status { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); }
.tw-days, .tw-slots { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 767px) { .tw-days { display: grid; grid-template-columns: repeat(3, 1fr); } }
.tw-times { margin-top: 20px; padding-top: 18px; border-top: 1.5px solid var(--rule); }
.tw-day-label { margin: 0 0 12px; font: 700 15px/1.3 var(--sans); color: var(--ink); }
.tw-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.tw-back { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 10px 0 6px; border: none; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--sans); cursor: pointer; transition: color .18s; }
@media (hover: hover) { .tw-back:hover { color: var(--ink); } }
.tw-sum { display: inline-block; margin: 0 0 18px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.tw-note { margin: 0 0 18px; padding-inline-start: 14px; border-inline-start: 4px solid var(--teal); font-size: 14.5px; color: var(--ink-2); }
.tw-none { margin-bottom: 4px; }
.tw-none .tw-sub { margin-bottom: 14px; }
.tw-done-close { display: none; }
@media (max-width: 399px) { .tw-steps li { font-size: 11px; letter-spacing: .06em; } }
@media (max-width: 767px) { .tw-nav .bk-btn { flex: 1 1 auto; } }
/* inside the trial modal: no card; each step's buttons stay reachable at the bottom */
body.v3 .bk-modal .tw { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; }
body.v3 .bk-modal .tw-nav { position: sticky; bottom: 0; margin-top: 18px; padding: 12px 0 calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
body.v3 .bk-modal :is(.bk-form .tw-nav button[type="submit"], .tw-nav .bk-btn) { flex: 1 1 auto; width: auto; }
body.v3 .bk-modal .tw-done-close { display: flex; }

/* ── Trial lesson page ── */
.v3-trial .v3-head-art { --fh: clamp(150px, 14vw, 190px); }
.bk-price-link { margin: 16px 0 0; font-size: 16px; }

/* ── Contact page ── */
.ct-panel { max-width: 720px; margin: 0 auto; }
/* heading and lead start at the outer (border) edge of the form below (owner, 2026-11-02) */
.ct-in h1 { margin: 0 0 12px; text-align: start; }
.ct-in .v3-head-art { justify-content: center; --fh: clamp(150px, 14vw, 180px); }
.ct-in .v3-lead { margin: 0 0 clamp(28px, 3.4vw, 40px); text-align: start; }
.ct-side-art { display: none; }
@media (min-width: 768px) {
  .ct-panel { max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 18vw, 220px); gap: clamp(24px, 5vw, 64px); align-items: start; }
  .ct-mobile-art { display: none; }
  .ct-side-art { display: flex; justify-content: center; padding-top: clamp(48px, 7vw, 88px); }
  .ct-side-art .v3-head-art { --fh: clamp(150px, 13vw, 190px); margin: 0; }
}
.ct-form { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3.4vw, 40px); border: 1.5px solid var(--line); border-radius: var(--radius-dialog); }
.ct-row { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .ct-row { display: grid; grid-template-columns: 1fr 1fr; } }
.ct-form .v3-consent { margin: 2px 0 4px; }
.ct-form .v3-btn { align-self: flex-start; }
@media (max-width: 767px) { .ct-form .v3-btn { align-self: stretch; } }

/* ── Pricing (DECISIONS 64-68: one toggle, three cards, text CTAs; no figures inside the cards) ── */
.pv3 { --t-sub: 12px; --sub-tog: 24px; --tog-cards: 32px; --cpad: 24px; --cards-faq: 72px; --title-desc: 12px; --desc-price: 32px; --price-feat: 24px; --feat-row: 12px; --feat-cta: 32px; --cta-bottom: 24px; }
@media (min-width: 768px) { .pv3 { --tog-cards: 40px; --cpad: 28px; --cards-faq: 80px; } }
@media (min-width: 1280px) { .pv3 { --t-sub: 16px; --sub-tog: 32px; --tog-cards: 48px; --cpad: 36px; --cards-faq: 112px; } }
.pv3 .v3-head h1 { margin: 0 0 var(--t-sub); }
.pv3 .v3-head-art { --fh: clamp(112px, 10vw, 136px); gap: 10px; }
.bk-pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: min(100%, 380px); margin: var(--sub-tog) auto 0; padding: 4px; border: 1.5px solid var(--line); border-radius: 100px; }
@media (min-width: 1280px) { .bk-pkgs { width: 420px; } }
.bk-pkg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; padding: 5px 10px; border: 0; border-radius: 100px; background: transparent; color: var(--ink); font: 700 15px/1.2 var(--sans); cursor: pointer; transition: background-color .18s, color .18s; }
.bk-pkg-s { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
@media (hover: hover) { .bk-pkg[aria-pressed="false"]:hover { background: rgba(255, 255, 255, .6); } }
.bk-pkg[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.bk-pkg[aria-pressed="true"] .bk-pkg-s { color: rgba(250, 240, 202, .85); }
.bk-cards { display: grid; gap: 24px; margin-top: var(--tog-cards); }
.bk-card { --acc: var(--yellow); --check: url(/images/chess-handdrawn/elements/check/check-butter.svg); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding: var(--cpad) var(--cpad) var(--cta-bottom); border: 1.5px solid var(--line); border-radius: var(--radius-card); color: var(--ink); }  /* P07: cards 24->14 */
.bk-card#offer-group { --acc: var(--teal); --check: url(/images/chess-handdrawn/elements/check/check-mint.svg); }
.bk-card[data-status="soon"] { --acc: var(--lav); --check: url(/images/chess-handdrawn/elements/check/check-lavender.svg); }
.bk-card > * { grid-column: 1; }
body.v3 .bk-card h3 { font-size: clamp(28px, 2.6vw, 36px); }
.bk-blurb { margin: var(--title-desc) 0 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.bk-prices { display: grid; margin-top: var(--desc-price); }
.bk-pkg-price { grid-area: 1 / 1; margin: 0; }
.bk-pkg-price[hidden] { display: block; visibility: hidden; }
.bk-price-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; line-height: 1.05; }
.bk-amount { font: 800 clamp(46px, 4.4vw, 60px)/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: -.035em; white-space: nowrap; }
.bk-sym { margin-inline-end: .06em; font-family: var(--sans); font-size: .58em; font-weight: 700; letter-spacing: 0; }
.bk-sym.bk-sym-after { margin-inline-end: 0; } /* Russian price format, 1 080 ₪ (build.js) */
.bk-per { font-size: 16px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
/* Chess Series only: the per-instalment price restated as "N monthly payments · total" underneath, so it still reads as one fixed program. */
.bk-price-sub { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.bk-price-sub .bk-amount { font: inherit; font-weight: 600; letter-spacing: normal; }
.bk-price-sub .bk-sym { font-weight: 600; }
.bk-feats { display: grid; align-content: start; row-gap: var(--feat-row); margin: var(--price-feat) 0 0; padding: 0; list-style: none; }
.bk-feats li[hidden] { display: none; }
.bk-feats li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
/* the check is the hand-drawn element in the card accent (no circle behind it) */
.bk-check { flex: none; width: 22px; height: 22px; margin-top: -1px; background: var(--check) center / contain no-repeat; }
.bk-check svg { display: none; }
/* approved Pricing CTA treatment: text, small arrow, underline in the card accent */
.bk-cta { margin-top: var(--feat-cta); justify-self: start; }
.bk-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 2px 7px; border: 0; border-bottom: 3px solid var(--acc); border-radius: 0; background: none; color: var(--ink); font: 700 18px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: border-color .18s; }
.bk-arrow { flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
@media (hover: hover) { .bk-link:hover { border-bottom-color: var(--ink); } .bk-link:hover .bk-arrow { transform: translateX(4px); } }
@media (min-width: 768px) and (max-width: 1023px) {
  .bk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
  .bk-card { display: flex; flex-direction: column; align-items: flex-start; }
  .bk-card > * { align-self: stretch; }
  .bk-card[data-status="soon"] { grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
  .bk-cta { align-self: flex-start; margin-top: auto; padding-top: var(--feat-cta); }
}
@media (min-width: 1024px) {
  .bk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); }
  .bk-card { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  body.v3 .bk-card h3 { align-self: end; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .bk-cards { gap: 20px; } }
.pv3 { --faq-h-desc: 16px; --faq-desc-q: 32px; }
@media (min-width: 1280px) { .pv3 { --faq-h-desc: 24px; } }
.bk-faq { padding-top: var(--cards-faq); }
.bk-faq .v3-faq { display: grid; }
.bk-faq .v3-faq h2 { margin: 0; text-align: start; }
.bk-faq-desc { margin: var(--faq-h-desc) 0 0; max-width: 30em; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.bk-faq-list { margin-top: var(--faq-desc-q); }
@media (min-width: 1024px) { .bk-faq .v3-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; } .bk-faq-list { margin-top: 0; } }

/* ── text pages (Privacy, Terms, Accessibility) ── */
.v3-page { padding: calc(var(--nav-h) + clamp(32px, 5vw, 72px)) var(--pad) var(--section); }
.v3-prose { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.v3-prose .v3-head-art { justify-content: flex-start; --fh: 150px; margin-bottom: 16px; }
.v3-prose h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 40px); }
.v3-prose .v3-date { margin: 0 0 clamp(28px, 4vw, 44px); font-size: 15px; }
.v3-prose h2 { margin: clamp(28px, 3.5vw, 40px) 0 10px; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.02em; }
.v3-prose :is(p, ul) { margin: 0 0 14px; }
.v3-prose ul { padding-inline-start: 22px; }
.v3-prose li { margin-bottom: 6px; padding-inline-start: 2px; }
.v3-prose li::marker { color: var(--coral); }
@media (max-width: 767px) { .v3-prose { font-size: 16px; } }
/* Credits, Russian page: translation shown under each paragraph of the original English licence text */
.v3-prose .v3-lic-tr { display: block; margin-top: .6em; padding-inline-start: 14px; border-inline-start: 2px solid var(--rule); }
@media (max-width: 767px) { .ct-in .v3-head-art .v3-head-bubble { left: calc(50% + 15px); } }

/* ── 404 ── */
.v3-nf { max-width: 560px; margin: 0 auto; text-align: center; }
.v3-nf-art { position: relative; display: block; width: max-content; margin: 0 auto 8px; }
.v3-nf-art .v3-fig { height: clamp(120px, 12vw, 150px); transform: rotate(-8deg); }
.v3-nf-spark { position: absolute; right: -30px; top: 0; width: 36px; transform: rotate(14deg); }
/* the numeral only: --coral darkened (same hue) to 3.18:1 on --bg, above the 3:1 large-text minimum (U-8) */
.v3-nf-code { font: 800 clamp(72px, 10vw, 120px)/1 var(--display); letter-spacing: -.04em; color: #F8421F; }
.v3-nf h1 { margin: 12px 0 14px; font-size: clamp(36px, 4.4vw, 56px); }
.v3-nf p { margin: 0 0 32px; }

/* =====================================================================
   HOME (src/v3/index.html).
   ===================================================================== */
.hm-hero { padding: calc(var(--nav-h) + clamp(24px, 4vw, 64px)) 0 calc(var(--section) / 2); }
.hm-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hm-hero-copy { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "p" "a" "s"; justify-items: center; align-items: start; text-align: center; }
.hm-hero h1 { grid-area: h; position: relative; width: fit-content; max-width: 100%; margin: 0 0 20px; font-size: clamp(40px, 11vw, 52px); }
.hm-hero h1 .hm-l { display: block; }
.hm-hero h1 .hm-l:first-of-type { font-weight: 800; }
.hm-hero h1 em { font-style: normal; font-weight: 400; letter-spacing: -.03em; }
.hm-hero-stage { grid-area: s; position: relative; width: 150px; height: 190px; margin-top: 32px; }
.hm-hero-queen { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%) rotate(-3deg); transform-origin: 50% 100%; opacity: 1; animation: hm-queen-fall .8s .3s cubic-bezier(.22, .8, .35, 1) backwards; }
@keyframes hm-queen-fall { 0% { opacity: 0; transform: translateX(-50%) translateY(-60px) rotate(-3deg) scale(.85); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(-50%) rotate(-3deg); } }
.hm-hero-heart { position: absolute; right: -26px; top: 4px; width: 58px; transform: rotate(14deg); }
.hm-hero-spark { position: absolute; left: -16px; top: 46px; width: 34px; transform: rotate(-10deg); }
.hm-lead-d, .hm-h-d { display: none; }
.hm-hero .v3-lead { grid-area: p; max-width: 30em; margin: 0 0 28px; text-wrap: balance; }
.hm-actions { grid-area: a; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Knight's Tour: the board holds only squares and the knight; on phones a compact card opens the same game as a fullscreen dialog */
.hm-hero { --sq-light: #FFEBC5; --sq-dark: #091D35; }  /* chess-board.svg illustration palette (P03: one board look for every size) */
.kt { width: 100%; max-width: 360px; justify-self: center; }
.kt-head { display: flex; align-items: center; }
body.v3 .kt-title { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.kt-status { min-height: 1.4em; margin: 6px 0 14px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink-2); transition: color .2s; }
/* owner decision 21 Oct 2026: "Visit every square once." is the actual instruction once play starts (the knight
   just landed, this is the one line telling the player what to do next) — it used to read exactly like the
   idle "Choose a highlighted square" line before it, easy to miss. .playing is toggled in render() below. */
.kt-status.playing { display: inline-block; padding: 3px 12px; border-radius: 100px; background: var(--teal); color: var(--white); animation: v3-pop .4s var(--ease) backwards; }
.kt-frame {
  position: relative; aspect-ratio: 1; box-sizing: border-box;
  padding: 10%; /* chess-board.svg: 64 named squares sit in an 800x800 window at 10% inset of the 1000x1000 art */
  background: url(/images/chess-handdrawn/board/chess-board.svg) center / contain no-repeat;
  /* the drawn frame spans x 45.5–955.5 of the 1000-unit art: widen the box so the visible frame lines up with the
     title, status, counter and buttons of the column on both sides (owner, 2026-11-02) */
  width: calc(100% / .91); margin-inline: -5% -4.89%; padding: calc(10% / .91); /* % of the column, = 10% of the box */
}
/* frame now comes from chess-board.svg on .kt-frame (readme.md Option B); the grid just fills its window */
.kt-board { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; height: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
/* P04 (owner decision): no hover lift on the mini board, it stays still */
.kt-sq { position: relative; display: flex; align-items: center; justify-content: center; background: var(--sq-light); cursor: pointer; }
.kt-sq.dark { background: var(--sq-dark); }
.kt-sq.visited { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.kt-sq.valid-start::before { content: ''; width: 20%; height: 20%; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(249, 87, 56, .25); pointer-events: none; animation: v3-glow 1.6s ease-in-out infinite; }
@keyframes v3-glow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .72; } }
.kt-board.flash-start .kt-sq.valid-start::before { animation: v3-flash .45s ease-in-out 4; }
@keyframes v3-flash { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.7); } }
.kt-sq.hint::after { content: ''; position: absolute; inset: 10%; border: 3px solid var(--coral); border-radius: 50%; pointer-events: none; animation: v3-hint 1.1s ease-in-out infinite; }
@keyframes v3-hint { 0%, 100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } }
.kt-sq.invalid { animation: v3-shake .4s ease; }
@keyframes v3-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.kt-sq:focus-visible { outline: 3px solid var(--ink); outline-offset: -5px; }
.kt-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.kt-path.show { opacity: 1; }
.kt-pieces { position: absolute; inset: 0; pointer-events: none; }
.kt-piece { position: absolute; left: 0; top: 0; width: 20%; height: 20%; transition: transform .3s cubic-bezier(.3, .8, .3, 1); will-change: transform; }
.kt-piece img { position: absolute; inset: 6% 8%; width: 84%; height: 88%; max-width: none; object-fit: contain; } /* hand-drawn knight, uncropped and unstretched */
.kt-piece.bounce { animation: v3-win-bounce .6s ease; }
@keyframes v3-win-bounce { 0%, 100% { translate: 0 0; } 35% { translate: 0 -14%; } 65% { translate: 0 0; } 82% { translate: 0 -5%; } }
.kt-under { width: 100%; margin-top: 16px; }
.kt-prog { display: flex; align-items: center; gap: .45em; height: 30px; margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt-prog [hidden] { display: none; }
.kt-done { font: 700 22px/1 var(--display); }
.kt-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kt-under.is-done .kt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kt-tools[hidden] { display: none; }
/* Russian labels are longer ("Начать заново"): columns follow the labels, slightly smaller type */
/* Russian and Ukrainian labels are longer: buttons sized by their label, wrapping to a second row in a narrow column (768px) */
html:is([lang="ru"], [lang="uk"]) .kt-tools:not([hidden]) { display: flex; flex-wrap: wrap; }
html:is([lang="ru"], [lang="uk"]) .kt-tools .kt-btn { flex: 1 1 auto; }
html:is([lang="ru"], [lang="uk"]) .kt-btn { padding: 0 9px; font-size: 13px; }
.kt-btn { min-height: 42px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font: 700 14px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .kt-btn:hover:not(:disabled) { background: var(--white); } }
.kt-btn:active:not(:disabled) { background: var(--white); }
.kt-btn:disabled { opacity: .4; cursor: default; }
.kt-btn-primary { background: var(--yellow); }
@media (hover: hover) { .kt-btn-primary:hover:not(:disabled) { background: var(--yellow-hover); } }
#ktEndTools:not([hidden]), #ktDone:not([hidden]) { animation: v3-fade .2s ease-out both; }
@keyframes v3-fade { from { opacity: 0; } }
body.v3 .kt-explore { display: inline-block; margin-top: 14px; font-size: 14px; }
.kt-overlay { position: absolute; inset: 0; z-index: 6; display: none; align-items: center; justify-content: center; pointer-events: none; }
.kt-overlay.show { display: flex; }
/* owner decision 22 Oct 2026: shrunk from 79% width/24-34px type — it was reading as "cover the whole board"
   on this small widget. Sized down to roughly the same board-to-card ratio as the Games page overlay. */
.kt-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62%; max-height: 100%; min-height: 104px; padding: 20px 14px 14px; border: 2px solid var(--ink); border-radius: 16px; background: var(--bg); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); text-align: center; pointer-events: auto; }
.kt-x { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.kt-x::before { content: ''; position: absolute; inset: -7px; }
@media (hover: hover) { .kt-x:hover { background: var(--white); } }
.kt-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.kt-dead, .kt-win { display: none; flex-direction: column; align-items: center; width: 100%; }
.kt-dead.show, .kt-win.show { display: flex; }
.kt-msg { margin: 0; font: 700 16px/1.25 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.kt-solved { margin: 0; font: 800 23px/1.1 var(--display); letter-spacing: -.03em; }
.kt-dead .kt-btn { margin-top: 10px; padding: 0 16px; font-size: 13px; }
.kt-toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 100px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; }
@media (max-width: 767px) { .kt-toast { bottom: calc(24px + 68px + env(safe-area-inset-bottom)); } }
.kt-toast.show { opacity: 1; transform: translate(-50%, 0); }
.kt-teaser, .kt-shut { display: none; }

/* 02 lesson videos */
.hm-videos, .hm-skills, .hm-approach, .hm-lvl, .hm-programs, .hm-teacher, .hm-quotes, .hm-faq { padding-block: calc(var(--section) / 2); }
.hm-videos-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* owner decision (21 Oct 2026): the queen/heart/sparkle composition reserved for this section is removed —
   heading + lead only, no decorative figure or reserved space above the clips. */
.hm-videos-head h2 { margin: 0 0 14px; }
.clips { display: flex; align-items: flex-end; gap: 14px; width: 100%; }
.clip { position: relative; flex: 1 1 0; min-width: 0; margin: 0; }
.clip-btn, .clip video { display: block; width: 100%; overflow: hidden; border-radius: 20px; background: var(--ink); }
.clip-btn { position: relative; aspect-ratio: 9 / 16; padding: 0; border: 2px solid var(--ink); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.clip video { aspect-ratio: var(--ar); object-fit: contain; }
.clip-btn img { width: 100%; height: 100%; object-fit: cover; }
.clip-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); transition: transform .18s var(--ease); }
.clip-play svg { width: 16px; height: 16px; margin-inline-start: 2px; fill: var(--ink); }
@media (hover: hover) { .clip-btn:hover { box-shadow: var(--shadow-hover); } .clip-btn:hover .clip-play { transform: scale(1.08); } }
.clip-btn:active .clip-play { transform: scale(.94); }
.clip-dots { display: none; }
/* video modal: custom controls, the clip's own ratio kept */
.vm[hidden] { display: none; }
.vm { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; overscroll-behavior: contain; }
.vm-backdrop { position: absolute; inset: 0; background: rgba(13, 59, 102, .86); }
.vm-box { position: relative; width: min(100%, calc(min(84dvh, 760px) * var(--vm-r, .5625))); aspect-ratio: var(--vm-r, .5625); overflow: hidden; border-radius: 20px; background: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.vm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ink); cursor: pointer; }
.vm-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); cursor: pointer; }
.vm-close svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.vm-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 100px; background: var(--bg); }
.vm-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
@media (hover: hover) { .vm-btn:hover { background: var(--white); } }
.vm-btn svg { width: 20px; height: 20px; fill: var(--ink); }
.vm-btn .i-on { display: none; } .vm-btn.is-on .i-on { display: inline; } .vm-btn.is-on .i-off { display: none; }
.vm-seek { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.vm-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--ink) var(--p), var(--rule) var(--p)); }
.vm-seek::-moz-range-track { height: 6px; border-radius: 6px; background: var(--rule); }
.vm-seek::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--ink); }
.vm-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.vm-seek::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.vm-close:focus-visible { outline-color: var(--bg); box-shadow: 0 0 0 5px var(--ink); }

/* 03 skills: figures stand beside the text, no tiles */
.hm-skills-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hm-skills-head { max-width: 640px; margin-inline: auto; text-align: center; }
.hm-skills-head h2 { margin: 0 0 14px; }
.hm-skills-head .v3-lead { max-width: 32em; margin-inline: auto; }
.hm-skill-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 20px; margin: 0; padding: 0; list-style: none; max-width: 420px; margin-inline: auto; }
.hm-skill { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hm-skill-art { display: flex; align-items: flex-end; justify-content: center; height: 96px; margin-bottom: 16px; }
.hm-skill-art .v3-fig { height: 100%; }
.hm-skill h3 { margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 24px); }
.hm-skill p { max-width: 22em; margin-inline: auto; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* 04 my approach: an editorial pull-quote between two navy rules */
.hm-approach-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; max-width: 920px; margin-inline: auto; padding-block: clamp(20px, 2.4vw, 36px); }
.hm-approach-mark { grid-column: 1 / -1; width: clamp(56px, 5vw, 72px); height: auto; margin-bottom: 18px; transform: rotate(-6deg); }
body.v3 .hm-approach-q { grid-column: 1 / -1; margin: 0 0 clamp(22px, 3vw, 36px); font-size: clamp(36px, 5vw, 64px); line-height: 1.02; }
.hm-approach-a { grid-column: 1 / -1; max-width: 36em; margin-bottom: clamp(26px, 3vw, 36px); }
.hm-approach-a p { font-size: clamp(18px, 1.65vw, 22px); line-height: 1.6; color: var(--ink-2); }
.hm-approach-a .hm-approach-first { font-weight: 700; color: var(--ink); }
.hm-approach-a p + p { margin-top: 14px; }
.hm-approach-portrait { grid-column: 1; width: 120px; height: 120px; object-fit: cover; object-position: 58% 40%; border: 2px solid var(--ink); border-radius: 24px; }
.hm-approach-by { display: none; }

/* 05 learning levels: rows on phones and tablets, outlined cards from 1024px; the figures grow from pawn to queen */
.hm-lvl-head { max-width: 680px; margin-bottom: clamp(20px, 3vw, 40px); }
.hm-lvl-head h2, .hm-programs-head h2 { margin: 0 0 14px; }
.hm-lvl-list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.hm-lvl-item a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; grid-template-areas: "art name arrow" "desc desc desc"; column-gap: 16px; align-items: center; height: 100%; padding: 20px 0; color: var(--ink); text-decoration: none; }
.hm-lvl-art { grid-area: art; display: flex; align-items: flex-end; justify-content: center; height: 76px; }
.hm-lvl-art .v3-fig { height: 100%; transform-origin: 50% 100%; }
.hm-lvl-item:nth-child(1) .v3-fig { height: 68%; } .hm-lvl-item:nth-child(2) .v3-fig { height: 84%; }
.hm-lvl-item h3 { grid-area: name; align-self: end; margin: 0 0 4px; font-size: clamp(26px, 3vw, 36px); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: transparent; transition: text-decoration-color .18s; }
.hm-lvl-item p { grid-area: desc; align-self: start; margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hm-lvl-more { display: none; }
.hm-lvl-arrow { grid-area: arrow; display: grid; place-items: center; }
.hm-lvl-arrow svg, .hm-prog-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.hm-lvl-item a:focus-visible { outline-offset: 2px; border-radius: 8px; }
@media (hover: hover) {
  .hm-lvl-item a:hover h3 { text-decoration-color: var(--coral); }
  .hm-lvl-item a:hover .hm-lvl-arrow svg { transform: translateX(4px); }
}

/* 06 ways to learn: outlined cards, the whole card is the link */
.hm-programs-head { max-width: 760px; margin-inline: auto; margin-bottom: clamp(22px, 3vw, 40px); text-align: center; }
.hm-prog-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.hm-prog-note { max-width: 36em; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.hm-prog a { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "art ." "art title" "art badges" "art ." "desc desc" "meta meta"; grid-template-rows: 1fr auto auto 1fr auto auto; column-gap: 16px; align-content: start; height: 100%; padding: 20px; border: 1.5px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: transform .22s var(--ease), border-color .22s, box-shadow .22s var(--ease); }
.hm-prog-art { grid-area: art; display: flex; align-items: flex-end; justify-content: center; height: 84px; }
.hm-prog-art .v3-fig { height: 100%; transform-origin: 50% 100%; }
/* sized per icon (not per position), since Ways to learn is reordered Group / Chess Series / Individual to match Pricing */
.hm-prog-group .hm-prog-art .v3-fig { height: 72%; } .hm-prog-series .hm-prog-art .v3-fig { height: 78%; }
.hm-prog h3 { grid-area: title; margin: 0; }
.hm-prog-badges { grid-area: badges; align-self: start; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-prog-badges .v3-badge:not(.v3-badge-soft) { display: none; }
.hm-prog-badges .v3-badge-soft { margin-top: 8px; }
.hm-prog .hm-prog-d { grid-area: desc; margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.hm-prog-meta { grid-area: meta; display: block; margin-top: 12px; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.hm-prog-time { display: flex; align-items: flex-start; gap: 7px; }
.hm-prog-meta svg { flex: none; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-prog-mt { min-width: 0; line-height: 1.3; text-wrap: pretty; }
.hm-prog-age::before, .hm-prog-soon::before { content: '·'; margin: 0 5px; }
.hm-prog-soon { display: none; }
.hm-prog-arrow { display: none; }
.hm-prog a:focus-visible { outline-offset: 3px; }
@media (hover: hover) { .hm-prog a:hover { border-color: var(--ink); box-shadow: var(--shadow-hover); } }
.hm-prog a:active { transform: none; border-color: var(--ink); }

/* 07 about */
.hm-teacher-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hm-portrait { position: relative; max-width: 300px; margin-inline: auto; }
.hm-portrait img:first-child { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); border-radius: var(--radius-dialog); }
.hm-portrait-heart { position: absolute; right: -20px; top: -22px; width: 68px; height: auto; transform: rotate(14deg); }
.hm-teacher h2 { margin: 0 0 18px; }
.hm-teacher p { max-width: 36em; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.hm-teacher p + p { margin-top: 14px; }
.hm-teacher p.hm-big { margin-bottom: 18px; font: 600 clamp(23px, 2.6vw, 34px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.hm-teacher p.hm-about-end { margin-top: 26px; padding-inline-start: 18px; border-inline-start: 4px solid var(--coral); font: 600 clamp(22px, 2.3vw, 30px)/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
/* owner polish (21 Oct 2026): Try a lesson sat right under the last paragraph with no breathing room — local gap, not a global .hm-actions change */
.hm-teacher .hm-actions { margin-top: 28px; justify-content: center; }

/* 08 testimonials: open quotes with a coloured rule, one visible on phones, two from tablet */
.hm-quotes { --qg: 28px; text-align: center; }
.hm-quotes h2 { margin: 0 0 clamp(28px, 3.6vw, 48px); }
.hm-q-carousel { max-width: 640px; margin-inline: auto; }
.hm-q-track { display: flex; gap: var(--qg); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hm-q-track::-webkit-scrollbar { display: none; }
.hm-q { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin: 0; padding: clamp(32px, 4vw, 44px) clamp(24px, 4vw, 40px); border: 2px solid var(--ink); border-radius: var(--radius-dialog); background: var(--white); scroll-snap-align: start; }
.hm-q-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--qc, var(--coral)); border: 2px solid var(--ink); font: 700 26px/1 var(--display); color: var(--ink); }
.hm-q:nth-child(2) { --qc: var(--teal); } .hm-q:nth-child(3) { --qc: var(--lav); } .hm-q:nth-child(4) { --qc: var(--yellow); }
.hm-q blockquote { font: 600 clamp(22px, 2.3vw, 28px)/1.34 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; max-width: 26em; }
.hm-q figcaption { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.hm-q-nav { display: none; align-items: center; justify-content: center; gap: 4px; margin-top: 24px; }
.js .hm-q-nav { display: flex; }
.hm-q-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.hm-q-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
@media (hover: hover) { #hvQPrev:hover:not(:disabled) svg { transform: translateX(-3px); } #hvQNext:hover:not(:disabled) svg { transform: translateX(3px); } }
.hm-q-arrow:disabled { opacity: .3; cursor: default; }
.hm-q-dots { display: flex; align-items: center; }
.hm-q-dots button { display: grid; place-items: center; width: 30px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hm-q-dots button::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 8px; background: var(--ink); opacity: .25; transition: width .25s var(--ease), opacity .25s; }
.hm-q-dots button[aria-current="true"]::before { width: 22px; opacity: .9; }

/* 09 FAQ (shared accordion) with categories and "View all questions" */
.hm-faq-in { max-width: 880px; }
.hm-faq-cat { margin: clamp(32px, 4vw, 48px) 0 12px; font-size: clamp(22px, 2.2vw, 28px); }
.hm-faq-cat::after { content: ''; display: block; width: 40px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--teal); }
.hm-faq-in > h2 + .hm-faq-cat { margin-top: 18px; }
.hm-faq-more { display: none; align-items: center; gap: 10px; min-height: 48px; margin-top: 26px; padding: 0 24px; border: 2px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font: 700 16px/1 var(--sans); cursor: pointer; transition: background-color .15s; }
.js .hm-faq-more { display: inline-flex; }
@media (hover: hover) { .hm-faq-more:hover { background: var(--white); } }
.hm-faq-more svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .24s var(--ease); }
.hm-faq.faq-all .hm-faq-more svg { transform: rotate(180deg); }
.js .hm-faq:not(.faq-all) [data-extra] { display: none; }

/* 10 final CTA: big type, the pawn with celebration rays */
.hm-cta { padding: calc(var(--section) / 2) 0 var(--section); }
.hm-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) 88px; grid-template-areas: "h h" "p art" "b art"; column-gap: 12px; align-items: start; padding-top: clamp(56px, 7vw, 104px); }
.hm-cta-grid > h2 { grid-area: h; max-width: 11em; margin: 0 0 16px; font-size: clamp(40px, 7vw, 104px); line-height: .98; letter-spacing: -.04em; }
.hm-cta-grid > p { grid-area: p; max-width: 24em; margin: 0 0 24px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--ink); }
.hm-cta-grid > .v3-btn { grid-area: b; justify-self: start; }
.hm-cta-art { grid-area: art; position: relative; align-self: end; justify-self: end; display: block; height: 96px; }
.hm-cta-piece { position: relative; height: 100%; width: auto; max-width: none; transform: rotate(4deg); transform-origin: 50% 100%; }
/* centred by `left` alone (width 120% → left -10%), not translateX(-50%): the reduced-motion rule below sets
   `transform: none` on doodles until they are revealed, which pushed the rays 24px past the edge (DEF-R-01) */
.hm-cta-rays { position: absolute; left: -10%; top: -34%; width: 120%; max-width: none; height: auto; }

/* ── home, phones only (max-width 767px) ── */
@media (max-width: 767px) {
  .hm-hero .v3-lead { font-size: 17px; }
  .hm-portrait-heart { right: -8px; top: -20px; width: 60px; }
  .js .kt-teaser { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 2px solid var(--ink); border-radius: 22px; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
  .kt-teaser:active { background: var(--white); }
  .kt-teaser-art { position: relative; flex: none; width: 68px; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--ink); border-radius: 14px; background: repeating-conic-gradient(var(--sq-dark) 0 25%, var(--sq-light) 0 50%) 0 0 / 40% 40%; }
  .kt-teaser-art img { position: absolute; left: 24%; top: 18%; width: 52%; height: 64%; object-fit: contain; max-width: none; }
  .kt-teaser-text { flex: 1 1 auto; min-width: 0; }
  .kt-teaser-title { display: block; font: 700 24px/1.1 var(--display); letter-spacing: -.02em; }
  .kt-teaser-sub { display: block; margin-top: 4px; font-size: 15px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
  .kt-teaser-go { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 100px; background: var(--lav); font-size: 15px; font-weight: 700; line-height: 1; }
  .js .kt { display: none; }
  .js .kt.is-modal { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; max-width: none; padding: max(14px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; overscroll-behavior: contain; --kt-w: min(100%, 420px, max(240px, calc(100dvh - 300px))); }
  .kt.is-modal > :is(.kt-head, .kt-status, .kt-frame, .kt-under, .kt-explore) { width: var(--kt-w); }
  .kt.is-modal .kt-head { justify-content: space-between; min-height: 44px; }
  .kt.is-modal .kt-shut { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); cursor: pointer; }
  .kt-shut svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
  .kt.is-modal .kt-explore { text-align: center; }
  body.v3 .kt-title { font-size: 24px; }
  .kt-btn { min-height: 44px; padding-inline: clamp(8px, 3vw, 12px); }
  body.v3 .kt-explore { padding-block: 10px; margin-top: 4px; }

  .clips { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; align-items: flex-start; gap: 12px; width: auto; margin-inline: calc(-1 * var(--pad)); padding: 4px var(--pad) 6px; scroll-padding-inline: var(--pad); }
  .clips::-webkit-scrollbar { display: none; }
  .clip { flex: 0 0 min(78%, 280px); scroll-snap-align: start; scroll-snap-stop: always; }
  .clip-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px; }
  .clip-dots i { display: block; width: 8px; height: 8px; border-radius: 8px; background: var(--ink); opacity: .25; transition: width .25s var(--ease), opacity .25s; }
  .clip-dots i.on { width: 24px; opacity: 1; }

  .hm-prog .hm-prog-d { text-wrap: pretty; }
}
@media (max-width: 359px) {
  .js .kt-teaser { gap: 10px; padding: 12px; }
  .kt-teaser-art { width: 52px; }
  .kt-teaser-go { padding: 0 14px; }
  .kt-teaser-title { font-size: 22px; }
  .hm-skill-list { column-gap: 14px; }
  .hm-lvl-item a { column-gap: 12px; }
}

/* ── home, tablet and up (768px+) ── */
@media (min-width: 768px) {
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; }
  .hm-hero-copy { justify-items: start; text-align: start; }
  .hm-hero h1 { font-size: clamp(42px, 5.4vw, 80px); }
  .hm-hero-stage { display: none; }
  .kt { max-width: 300px; }
  .hm-skill-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .hm-skill-art { height: 104px; }
  .hm-teacher-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 44px; align-items: start; }
  .hm-approach-a { grid-column: 2; grid-row: 3; margin-bottom: 0; }
  .hm-approach-portrait { grid-row: 3; align-self: start; width: 132px; height: 132px; margin-inline-end: 18px; }
  .hm-lvl-art { height: 84px; }
  .hm-lvl-item a { grid-template-columns: 64px minmax(0, 1fr) 28px; column-gap: 22px; padding: 22px 0; }
  /* ways to learn (tablet): the age and "Dates coming soon" move into the bottom line, the badge row goes */
  .hm-prog-badges { display: none; }
  .hm-prog-soon { display: inline; color: #4F3A9E; } /* dark lavender text, about 7:1 on --bg */
  .hm-prog-soon::before { color: var(--ink); }
  .hm-prog a { grid-template-columns: 72px minmax(0, 1fr) 28px; grid-template-areas: "art title arrow" "art desc arrow" "art meta arrow"; padding: 22px 22px 22px 18px; column-gap: 18px; }
  .hm-prog-art { height: 100px; align-self: center; }
  .hm-prog .hm-prog-d { margin-top: 8px; }
  .hm-prog-arrow { display: grid; grid-area: arrow; align-self: center; place-items: center; }
  @media (hover: hover) { .hm-prog a:hover .hm-prog-arrow svg { transform: translateX(4px); } }
  .hm-cta-grid { grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 280px); grid-template-areas: "h art" "p art" "b art"; column-gap: clamp(32px, 6vw, 96px); }
  .hm-cta-art { align-self: end; justify-self: center; height: clamp(150px, 16vw, 220px); }
}

/* ── home, desktop (1024px+) ── */
@media (min-width: 1024px) {
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(48px, 6vw, 112px); }
  .hm-hero-copy { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h h" "p s" "a s"; grid-template-rows: auto auto 1fr; column-gap: 32px; }
  .kt { max-width: 360px; }
  .hm-videos-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
  .clips { max-width: 620px; justify-self: end; }
  .hm-approach-grid { grid-template-columns: auto minmax(0, 1fr); }
  .hm-approach-a { grid-column: 1 / -1; grid-row: auto; margin-bottom: clamp(26px, 3vw, 36px); }
  .hm-approach-portrait { grid-row: auto; width: 64px; height: 64px; margin: 0; object-position: 64% 28%; border-radius: 50%; }
  .hm-approach-by { display: grid; gap: 2px; }
  .hm-approach-by strong { font-size: 18px; font-weight: 700; line-height: 1.2; }
  .hm-approach-by span { font-size: 15px; line-height: 1.3; color: var(--ink-2); }
  .hm-lvl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .hm-lvl-item a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "name" "desc" "more"; grid-template-rows: auto auto auto 1fr; align-items: start; padding: 28px 28px 30px; border-radius: var(--radius); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
  .hm-lvl-art { justify-content: flex-start; height: 116px; margin-bottom: 18px; }
  .hm-lvl-arrow { display: none; }
  .hm-lvl-item h3 { margin-bottom: 8px; }
  .hm-lvl-item .hm-lvl-more { grid-area: more; display: block; align-self: stretch; margin-top: 18px; font-size: 15px; }
  .hm-lvl-item a:focus-visible { border-radius: var(--radius); }
  @media (hover: hover) { .hm-lvl-item a:hover { box-shadow: var(--shadow-hover); } }
  .hm-prog-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-prog a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "badges" "art" "title" "desc" "meta"; grid-template-rows: auto auto auto 1fr auto; padding: 24px 28px 28px; }
  .hm-prog-badges { display: flex; min-height: 30px; }
  .hm-prog-badges .v3-badge:not(.v3-badge-soft) { display: inline-flex; }
  .hm-prog-badges .v3-badge-soft { margin-top: 0; }
  .hm-prog-art { justify-content: flex-start; height: 150px; margin: 22px 0 20px; }
  .hm-prog h3 { margin-bottom: 8px; }
  .hm-prog .hm-prog-d { margin: 0; }
  .hm-prog-meta { margin-top: 16px; }
  .hm-prog-age, .hm-prog-soon, .hm-prog-arrow { display: none; }
  .hm-teacher-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
  .hm-portrait { max-width: 420px; margin-inline: 0; }
  .hm-portrait-heart { width: 84px; right: -26px; top: -28px; }
  .hm-teacher p { font-size: 18px; }
  .hm-teacher .hm-actions { justify-content: flex-start; }
}
@media (min-width: 1024px) { .hm-skill-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); max-width: none; } .hm-skill-art { height: 112px; } }

/* current page in the header and menu (set by v3.js) */
.v3-nav-links a[aria-current="page"] { text-decoration-line: underline; }
.mobile-menu a[aria-current="page"] { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--coral); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =====================================================================
   LEARN CHESS (src/v3/courses-preview.html). One page: a short intro, three expandable levels (owner decision
   21 Oct 2026, replacing the earlier tab interface), then the shared lesson/practical/CTA sections once.
   Each level keeps an accent: Beginner coral, Intermediate teal, Advanced lavender (underline, accent bar).
   ===================================================================== */
.cs-intro { padding: calc(var(--nav-h) + clamp(64px, 9vw, 112px)) 0 clamp(20px, 2.6vw, 32px); text-align: center; }
.cs-intro h1 { margin: 0 0 14px; }
.cs-intro .v3-lead { max-width: 34em; margin: 0 auto; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
#levels { padding-block: clamp(20px, 2.6vw, 32px); }
.level-list { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-inline: auto; }
.level { --acc: var(--coral); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.level[data-level="intermediate"] { --acc: var(--teal); }
.level[data-level="advanced"] { --acc: var(--lav); }
.level-summary { display: flex; align-items: center; gap: 16px; padding: 18px clamp(16px, 2.4vw, 28px); list-style: none; cursor: pointer; }
.level-summary::-webkit-details-marker { display: none; }
.level-summary:focus-visible { outline-offset: -4px; }
.level-fig { flex: none; display: flex; align-items: flex-end; justify-content: center; height: 56px; }
.level-fig .cs-fig { height: calc(52px * var(--h) / 634); width: auto; }
.level-head { flex: 1 1 auto; min-width: 0; }
.level-name { display: block; margin-bottom: 2px; font: 800 clamp(19px, 1.9vw, 23px) var(--display); color: var(--ink); }
.level-line { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.level-chevron { flex: none; display: flex; }
.level-chevron svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.level[open] .level-chevron svg { transform: rotate(180deg); }
.level::before { content: ''; display: block; height: 4px; background: var(--acc); }
.level-body { padding: 4px clamp(16px, 2.4vw, 28px) clamp(24px, 3vw, 36px); border-top: 1.5px solid var(--line); }
.level-body-h { margin: 20px 0 0; font-size: clamp(19px, 1.7vw, 22px); text-align: center; }
#method, #practical { padding-block: 28px; }
@media (min-width: 768px) { #method, #practical { padding-block: calc(var(--section) / 2); } }
.cs-art { width: 60px; height: auto; max-width: none; }
.cs-fig { width: auto; }
/* section heads: centred title and intro */
.v3-courses :is(.who-inner, .details-inner, .structure-header, .lesson-header, .format-header) { text-align: center; }
.v3-courses :is(.who-inner, .details-inner) > h2, .v3-courses .structure-title, .v3-courses :is(.lesson-header, .format-header) h2 { margin: 0 0 12px; }
.v3-courses :is(.who-intro, .details-intro, .structure-intro, .lesson-intro) { max-width: 36em; margin: 0 auto; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
/* Learn Chess "How we learn": stacked intro paragraphs + one smaller note line (Coming soon) */
.lesson-header .lesson-intro + .lesson-intro { margin-top: 14px; }
.lesson-header .lesson-intro.lesson-note { margin-top: 22px; font-size: 15px; color: var(--ink-2); font-style: italic; }
.v3-courses :is(.who-grid, .details-grid, .area-grid, .lesson-timeline, .format-cards) { margin-top: clamp(28px, 3.4vw, 44px); }
/* hero: the level's figure (pawn, bishop, queen: the same growth as the Home levels), title, subtitle, CTAs */
.v3-courses [id$="-hero"] { padding-top: clamp(36px, 5vw, 72px); }
.hero-grid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-icon { display: flex; align-items: flex-end; justify-content: center; margin-bottom: 20px; --fh: clamp(150px, 14vw, 190px); }
.hero-icon .cs-fig { height: calc(var(--fh) * var(--h) / 634); }
.hero-text h1 { margin: 0 0 14px; }
.hero-text p.hero-sub { max-width: 24em; margin: 0 auto 14px; font: 600 clamp(22px, 2.4vw, 30px)/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.hero-text p.hero-desc { max-width: 34em; margin: 0 auto; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
.hero-cta, .cta-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 32px; }
/* who it is for, what children will develop, how learning works: outlined cards */
.who-grid, .details-grid, .format-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.who-card, .detail-card, .format-card { padding: clamp(24px, 2.6vw, 32px); border-radius: var(--radius); }
.detail-card, .format-card { border: 1.5px solid var(--line); }
.who-card, .format-card { text-align: center; }
.who-icon, .format-card-icon { display: flex; align-items: flex-end; justify-content: center; height: 72px; margin-bottom: 18px; }
.format-card-icon .cs-fig { height: calc(76px * var(--h) / 634); }
.v3-courses :is(.who-card, .detail-card, .format-card) h3 { margin: 0 0 10px; font-size: clamp(21px, 1.8vw, 25px); }
.v3-courses :is(.who-card, .detail-card, .format-card) p { font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
.format-card .format-compare { display: inline-block; margin-top: 12px; }
.detail-card { text-align: start; }
.detail-card h3::before { content: ''; display: block; width: 32px; height: 4px; margin-bottom: 16px; border-radius: 4px; background: var(--acc); }
@media (min-width: 768px) { .who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .details-grid, .format-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .details-grid, .format-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* "Learning that fits your child": stays a 2x2 grid even on wide desktop (owner decision 21 Oct 2026), unlike the 4-up "What we work on" grid */
.format-cards.format-cards-fit { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .format-cards.format-cards-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .format-cards.format-cards-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Chess Matters quote: editorial quote with the level accent; like and share keep their behaviour */
.quote-box { --q: #F95738; max-width: 820px; margin: 0 auto; padding-inline-start: clamp(20px, 3vw, 32px); border-inline-start: 4px solid var(--acc); }
#panel-intermediate .quote-box { --q: #2A9D8F; } #panel-advanced .quote-box { --q: #B59BFF; } /* also the colour of the shared quote image */
.quote-box blockquote { margin: 0 0 18px; font: 600 clamp(26px, 3vw, 40px)/1.22 var(--display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.quote-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.quote-author { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.quote-actions { display: flex; align-items: center; gap: 8px; }
.quote-like, .quote-share { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 100px; background: transparent; color: var(--ink); font: 700 14px/1 var(--sans); cursor: pointer; transition: border-color .18s, color .18s; }
@media (hover: hover) { :is(.quote-like, .quote-share):hover { border-color: var(--ink); } }
:is(.quote-like, .quote-share) svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quote-like.liked { border-color: var(--ink); }
.quote-like.liked svg { fill: var(--coral); stroke: var(--coral); }
.quote-like.pop svg { animation: v3-like .35s var(--ease); }
@keyframes v3-like { 45% { transform: scale(1.3); } }
.quote-like-count:empty { display: none; }
.quote-share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quote-share-row[hidden] { display: none; }
.qs-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line); border-radius: 14px; background: transparent; color: var(--ink); cursor: pointer; transition: border-color .18s; }
@media (hover: hover) { .qs-btn:hover { border-color: var(--ink); } }
.qs-btn svg { width: 18px; height: 18px; fill: currentColor; }
.qs-btn[data-copy] svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.qs-btn[data-save] svg, .qs-file svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qs-file svg .dot { fill: currentColor; stroke: none; }
.qs-btn.qs-file { width: auto; gap: 6px; padding: 0 14px; border-radius: 100px; font: 700 13px/1 var(--sans); }
.qs-note { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.qs-note[hidden] { display: none; }
@media (min-width: 768px) { .quote-share-row { justify-content: flex-end; } .qs-note { text-align: end; } }
/* learning areas: flip cards (one flipped at a time); the turn button is a plain icon, no circle */
.area-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--gap); max-width: 960px; margin-inline: auto; text-align: start; }
@media (min-width: 768px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-card { position: relative; perspective: 1400px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.flip-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4, .15, .2, 1); }
.area-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.face { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 28px 64px 28px 28px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: border-color .2s, background-color .2s; }
.face-back { transform: rotateY(180deg); background: color-mix(in srgb, var(--acc) 15%, var(--bg, #FAF0CA)); }
@media (hover: hover) { .area-card:hover .face { border-color: var(--ink); } }
.area-card:has(.flip-btn:focus-visible) .face { border-color: var(--ink); }
.v3-courses .face h3 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 26px); }
.area-desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.area-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.area-list li { position: relative; padding-inline-start: 20px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.area-list li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.flip-btn { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--yellow); color: var(--ink); cursor: pointer; transition: transform .4s cubic-bezier(.4, .15, .2, 1); }
.flip-btn svg { width: 15px; height: 15px; transition: transform .4s cubic-bezier(.4, .15, .2, 1); }
.area-card.is-flipped .flip-btn svg { transform: rotate(180deg); }
.flip-tip { display: none; }
@media (hover: hover) { .flip-btn:hover { background: var(--art-yellow-hi, var(--yellow)); } }
@media (max-width: 767px) { .face { padding: 24px 58px 24px 22px; } }
/* no-JS fallback for Learn Chess "What we work on" (owner decision 21 Oct 2026): without JS the flip button
   does nothing, so don't rely on the 3D flip to reveal the back text — stack both faces in normal flow instead. */
html:not(.js) .flip-btn { display: none; }
html:not(.js) .flip-inner { display: block; }
html:not(.js) .face { position: static; padding-inline-end: 28px; }
html:not(.js) .face-back { transform: none; -webkit-backface-visibility: visible; backface-visibility: visible; margin-top: 10px; }
/* how a lesson looks: four steps joined by a hairline (row from 768px, column on phones); icons stand on the page background */
.lesson-timeline { display: flex; flex-direction: column; max-width: 440px; margin-inline: auto; text-align: start; }
.timeline-step { position: relative; display: flex; align-items: flex-start; gap: 18px; padding-bottom: 26px; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 27px; top: 60px; width: 1.5px; height: calc(100% - 64px); background: var(--line); }
.timeline-circle { flex: none; display: grid; place-items: center; width: 56px; height: 56px; background: var(--bg); }
.timeline-circle .cs-art { width: 52px; }
/* "A lesson in four moves": each badge is a cropped close-up of a hand-drawn piece (owner decision 21 Oct
   2026, replacing the plain numbered badge) — pawn, knight, bishop, rook, in that order. The circle is an
   outlined medallion rather than a solid fill, so the piece's own colours stay legible on it. */
.timeline-num { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 2px solid var(--teal); overflow: hidden; }
.timeline-num img { position: absolute; left: 50%; top: -8%; height: 175%; width: auto; max-width: none; transform: translateX(-50%); }
.timeline-num img[src*="rook.svg"] { top: 2%; height: 160%; } /* rook's crenellated top sits lower on the art than the other pieces' heads */
.timeline-num img[src*="pawn.svg"] { top: 0%; height: 250%; } /* pawn's own art is shorter overall (viewBox 427 vs 517-738 for the others), so its round head is a bigger share of the full height — the shared -8%/175% crop zoomed out too far and caught the collar/body instead of just the face */
/* stepped reveal (owner decision 21 Oct 2026): the four steps pop in one after another as the block scrolls
   into view, cascading off the shared .v3-rv reveal already on .lesson-timeline. */
.js .timeline-step { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.lesson-timeline.in .timeline-step { opacity: 1; transform: none; }
.lesson-timeline.in .timeline-step:nth-child(1) { transition-delay: .05s; }
.lesson-timeline.in .timeline-step:nth-child(2) { transition-delay: .22s; }
.lesson-timeline.in .timeline-step:nth-child(3) { transition-delay: .39s; }
.lesson-timeline.in .timeline-step:nth-child(4) { transition-delay: .56s; }
.timeline-content { padding-top: 6px; }
.v3-courses .timeline-content h3 { margin: 0 0 4px; font-size: 21px; }
.timeline-content p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 768px) {
  .lesson-timeline { position: relative; flex-direction: row; max-width: none; text-align: center; }
  .lesson-timeline::before { content: ''; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 1.5px; background: var(--line); }
  .timeline-step { flex: 1; flex-direction: column; align-items: center; gap: 16px; padding: 0 12px; }
  .timeline-step::after { display: none; }
  .timeline-circle { position: relative; z-index: 1; width: 72px; height: 64px; }
  .timeline-circle .cs-art { width: 58px; }
  .timeline-num { width: 48px; height: 48px; font-size: 20px; }
  .timeline-content { padding-top: 0; }
  .timeline-content p { text-wrap: balance; }
}
/* closing CTA: centred, under a navy rule like the Home CTA */
.cta-inner { padding-top: clamp(48px, 6vw, 88px); text-align: center; }
.v3-courses [id$="-cta"] { padding-bottom: var(--section); }
/* owner polish (21 Oct 2026): a quiet figure above the heading so the closing CTA isn't bare text + button, same visual language as the Home CTA's figure; smaller than a hero icon and no new animation */
.cs-cta-icon { --fh: clamp(96px, 9vw, 130px); margin-bottom: 18px; }
.cta-inner h2 { margin: 0 0 14px; }
.cta-text { max-width: 30em; margin: 0 auto; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: balance; }

/* =====================================================================
   GAMES (src/v3/playground.html). Knight's Tour, all game logic unchanged. Breakpoint 860px as in the game script
   (fullscreen play mode on portrait phones). Board colours per size come from the script (V3 palette).
   ===================================================================== */
.v3-playground { --board-light: #FFFFFF; --board-dark: #2A9D8F; --board-outline: #0D3B66; --visited-fill: #F4D35E; --dot-fill: #0D3B66; }
.v3-playground .container { max-width: 1320px; margin: 0 auto; }
.v3-playground .section-pad { padding: clamp(24px, 3vw, 48px) var(--pad) var(--section); }
/* hero: the six hand-drawn pieces drop in once onto the page background */
#kt-piece-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) var(--pad) clamp(32px, 5vw, 64px); overflow: hidden; --ph: clamp(78px, 9vw, 120px); } /* bottom padding added (owner decision 21 Oct 2026) — the hero row sat flush against the game section below it */
.kt-hero-logo-pieces { display: inline-flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 16px); }
.kt-hero-logo-pieces span { display: inline-flex; align-items: flex-end; opacity: 1; animation: v3-fall .5s cubic-bezier(.22, .8, .35, 1) backwards; }
.kt-hero-logo-pieces span img { height: calc(var(--ph) * var(--h) / 738); width: auto; max-width: none; }
/* one piece lands here right as its twin leaves the nav above (.v3-playground .v3-logo-pieces img:nth-child(N),
   delay .3s + .35s*N, .4s flight) — same order (king, queen, rook, bishop, knight, pawn), so nth-child pairs up;
   each lands ~.2s into its departure, so it's caught mid-flight rather than popping in after an empty gap. */
.kt-hero-logo-pieces span:nth-child(1) { animation-delay: .5s; } .kt-hero-logo-pieces span:nth-child(2) { animation-delay: .85s; } .kt-hero-logo-pieces span:nth-child(3) { animation-delay: 1.2s; }
.kt-hero-logo-pieces span:nth-child(4) { animation-delay: 1.55s; } .kt-hero-logo-pieces span:nth-child(5) { animation-delay: 1.9s; } .kt-hero-logo-pieces span:nth-child(6) { animation-delay: 2.25s; }
@keyframes v3-fall { 0% { opacity: 0; transform: translateY(-80px) scale(.8); } 60% { opacity: 1; } 80% { transform: translateY(4px) scale(1.03); } 100% { opacity: 1; transform: none; } }
.kt-hero-playground { font: 700 12.5px/1.2 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); animation: v3-fade .6s 1.1s both; }
@media (max-width: 760px) { #kt-piece-hero { --ph: 56px; gap: 10px; } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.anim-in { opacity: 0; animation: fadeSlideUp .55s var(--ease) forwards; }

.game-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 580px); justify-content: center; align-items: center; gap: clamp(48px, 7.5vw, 116px); }
.board-col { display: flex; flex-direction: column; align-items: stretch; }
.board-frame {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; box-sizing: border-box;
  padding: 10%; /* chess-board.svg: 64 named squares sit in an 800x800 window at 10% inset of the 1000x1000 art */
  background: url(/images/chess-handdrawn/board/chess-board.svg) center / contain no-repeat;
}
.board-wrap { position: relative; width: 100%; }
/* frame now comes from chess-board.svg on .board-frame (readme.md Option B); the grid sits in its window, no separate outline */
.board { display: grid; width: 100%; overflow: visible; }
.sq { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; cursor: pointer; user-select: none; transition: background-color .25s ease, box-shadow .25s ease; }
/* keyboard focus ring (22 Oct 2026 fix): the generic sitewide :focus-visible rule (outline-offset: 3px,
   outward) mostly vanished here — squares sit edge to edge with no gap, so an outward ring on one square
   paints mostly underneath its neighbour and .board's overflow:hidden clips the rest. There was an orphaned
   `.kt-sq:focus-visible` rule with the right idea (inset) but the wrong, no-longer-used class name — this
   replaces it, correctly scoped to `.sq`, so Shift+arrow keyboard navigation between squares is actually
   visible, not just functional for a screen reader. */
body.v3 .sq:focus-visible { outline: var(--outline-strong) solid var(--yellow); outline-offset: -4px; z-index: 2; }
.sq.light { background: var(--board-light); }
.sq.dark { background: var(--board-dark); }
.sq.visited { background: var(--visited-fill); box-shadow: inset 0 0 0 2px var(--ink); }
.sq .dot { width: 14%; height: 14%; border-radius: 50%; pointer-events: none; }
.sq.light .dot { background: var(--board-dark); }
.sq.dark .dot { background: var(--board-light); }
.sq.hint::after { content: ''; position: absolute; inset: 10%; border: 3px solid var(--dot-fill); border-radius: 50%; pointer-events: none; animation: v3-hint 1.1s ease-in-out infinite; }
.sq.dark.hint::after { border-color: #fff; }
.sq.valid-start::before { content: ''; width: 12%; height: 12%; border-radius: 50%; background: var(--dot-fill); box-shadow: 0 0 0 5px var(--dot-glow, rgba(13, 59, 102, .32)); pointer-events: none; animation: v3-glow 1.6s ease-in-out infinite; }
.board.flash-start .sq.valid-start::before { animation: v3-flash .45s ease-in-out 4; }
.sq.invalid { animation: v3-shake .4s ease; }
.knight-piece { position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: left .32s cubic-bezier(.4, 0, .2, 1), top .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; }
.knight-piece.show { opacity: 1; }
.knight-piece img { width: 86%; height: 88%; max-width: none; object-fit: contain; -webkit-user-drag: none; user-select: none; } /* hand-drawn knight, uncropped and unstretched */
.knight-piece.win-bounce { animation: v3-win-bounce .6s ease; }

.sq-tooltip { position: absolute; z-index: 30; max-width: 190px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--white); font-size: 12.5px; font-weight: 600; line-height: 1.45; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.sq-tooltip.show { opacity: 1; }
.path-line { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.path-line.show { opacity: 1; }
/* result pop-up (win / dead end), the V3 card */
.board-overlay { position: absolute; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; padding: 16px; }
.board-overlay.show { display: flex; }
.overlay-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 340px; max-width: 100%; min-height: 236px; padding: 44px 32px 32px; border: 2px solid var(--ink); border-radius: 22px; background: var(--bg); box-shadow: 4px 4px 0 var(--ink); text-align: center; }
.overlay-close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.overlay-close::before { content: ''; position: absolute; inset: -4px; }
@media (hover: hover) { .overlay-close:hover { background: var(--white); } }
.overlay-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.overlay-dead-wrap, .overlay-solved-wrap { display: none; flex-direction: column; align-items: center; width: 100%; }
.overlay-dead-wrap.show, .overlay-solved-wrap.show { display: flex; }
.overlay-msg { margin: 0; font: 700 22px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.overlay-solved { font: 800 clamp(32px, 5vw, 40px)/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); }
.pop-actions { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.pop-count { margin: 10px 0 -8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.pop-count b { color: var(--ink); font-weight: 800; }
.pop-count[hidden] { display: none; }
.pop-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font: 700 14px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .pop-btn:hover { background: var(--white); } }
.pop-btn[aria-expanded="true"] { background: var(--yellow); }
.pop-btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pop-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.pop-sub[hidden] { display: none; }
.pop-chip { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 100px; background: transparent; color: var(--ink); font: 700 13px/1 var(--sans); cursor: pointer; }
@media (hover: hover) { .pop-chip:hover { border-color: var(--ink); } }
.pop-chip[disabled] { opacity: .5; cursor: progress; }
@media (max-width: 380px) { .board-overlay { padding: 10px; } .overlay-card { min-height: 164px; padding: 38px 16px 24px; } .pop-actions { margin-top: 20px; } .pop-btn { padding: 0 16px; } }
/* win: "You did it!" alone over the board, no card or buttons; navy letters, cream outline, offset pink accent.
   Sized from the board (cqw) so it fits inside it at every size, including the peak of the pump.
   Loop: 3s pump-up (grow, small hop, settle) then 3s still, one 6s animation; paused while the tab is hidden. */
.board-overlay.is-win { padding: 0; pointer-events: none; container-type: inline-size; }
.board-overlay.is-win .overlay-card { width: 100%; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.board-overlay.is-win :is(.overlay-close, .pop-count, .pop-actions, .pop-sub) { display: none; }
.board-overlay.is-win .overlay-solved {
  position: relative; font-size: clamp(30px, 8vw, 62px); font-size: 13cqw; line-height: 1; letter-spacing: -.035em; white-space: nowrap; rotate: -6deg;
  text-shadow: .035em 0 0 var(--bg), -.035em 0 0 var(--bg), 0 .035em 0 var(--bg), 0 -.035em 0 var(--bg), .025em .025em 0 var(--bg), -.025em .025em 0 var(--bg), .025em -.025em 0 var(--bg), -.025em -.025em 0 var(--bg), .075em .07em 0 var(--art-pink);
  animation: kt-win-pump 6s ease-in-out infinite;
}
.board-overlay.is-win .overlay-solved::after { content: ''; position: absolute; left: 6%; right: 0; bottom: -.16em; height: .06em; border-radius: 1em; background: var(--art-pink); rotate: -1.5deg; }
.board-overlay.is-win.is-paused .overlay-solved { animation-play-state: paused; }
@keyframes kt-win-pump {
  0% { scale: 1; translate: 0 0; }
  12% { scale: 1.14; translate: 0 -5%; }
  22% { scale: 1.08; translate: 0 1%; }
  31% { scale: 1.11; translate: 0 -2%; }
  50%, 100% { scale: 1; translate: 0 0; }
}
/* dead end: "No moves left" in the middle of the board, same lettering as the win (navy, cream outline, offset pink);
   a text Try Again under it (navy + pink underline) and the small × above on the right. Sized from the board (cqw).
   Only the icon and the words move: a .8s nudge, then 4s still; none while hovered/focused/pressed, hidden tab or reduced motion. */
.board-overlay.is-dead { padding: 0; container-type: inline-size; }
.board-overlay.is-dead .overlay-card { width: auto; max-width: 92%; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.board-overlay.is-dead .overlay-close { top: auto; bottom: calc(100% + max(5cqw, 16px)); right: -4cqw; width: 40px; height: 40px; filter: drop-shadow(1px 0 0 var(--bg)) drop-shadow(-1px 0 0 var(--bg)) drop-shadow(0 1px 0 var(--bg)) drop-shadow(0 -1px 0 var(--bg)); }
.board-overlay.is-dead .overlay-close svg { width: 18px; height: 18px; stroke-width: 2.6; }
.board-overlay.is-dead .overlay-msg {
  font: 800 11cqw/1 var(--display); letter-spacing: -.035em; white-space: nowrap; rotate: -6deg;
  text-shadow: .035em 0 0 var(--bg), -.035em 0 0 var(--bg), 0 .035em 0 var(--bg), 0 -.035em 0 var(--bg), .025em .025em 0 var(--bg), -.025em .025em 0 var(--bg), .025em -.025em 0 var(--bg), -.025em -.025em 0 var(--bg), .075em .07em 0 var(--art-pink);
}
.board-overlay.is-dead .pop-actions { margin-top: max(6.5cqw, 20px); }
.board-overlay.is-dead .pop-btn { gap: 8px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: none; font: 800 clamp(15px, 4.8cqw, 22px)/1 var(--sans); }
.board-overlay.is-dead .pop-btn svg { width: 1.1em; height: 1.1em; stroke-width: 2.4; filter: drop-shadow(1px 0 0 var(--bg)) drop-shadow(-1px 0 0 var(--bg)) drop-shadow(0 1px 0 var(--bg)) drop-shadow(0 -1px 0 var(--bg)); animation: kt-retry-icon 4.8s ease-in-out infinite; }
.board-overlay.is-dead .pop-btn span { display: inline-block; padding-bottom: 7px; text-shadow: 1.5px 0 0 var(--bg), -1.5px 0 0 var(--bg), 0 1.5px 0 var(--bg), 0 -1.5px 0 var(--bg); background: linear-gradient(var(--ink), var(--ink)) 0 calc(100% - 4px) / 100% 2.5px no-repeat, linear-gradient(var(--art-pink), var(--art-pink)) 0 100% / 100% 4px no-repeat; animation: kt-retry-word 4.8s ease-in-out infinite; }
.board-overlay.is-dead .pop-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.board-overlay.is-dead .pop-btn:is(:hover, :focus-visible, :active) :is(svg, span) { animation: none; }
.board-overlay.is-dead.is-paused .pop-btn :is(svg, span) { animation-play-state: paused; }
@keyframes kt-retry-icon { 0% { rotate: 0deg; } 8.5% { rotate: -40deg; } 16.7%, 100% { rotate: 0deg; } }
@keyframes kt-retry-word { 0% { scale: 1; translate: 0 0; } 8.5% { scale: 1.04; translate: 0 -2.5px; } 16.7%, 100% { scale: 1; translate: 0 0; } }
/* share buttons: plain outlined squares (network icons), share panel slides open beside the controls */
.share-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; transition: border-color .15s; }
@media (hover: hover) { .share-btn:hover { border-color: var(--ink); } }
.share-btn svg { width: 17px; height: 17px; fill: currentColor; }
.share-btn[data-copy] svg, #copyLinkBtn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-btn.share-file { width: auto; gap: 6px; padding: 0 12px; border-radius: 100px; font: 700 12px/1 var(--sans); }
.share-btn.share-file svg { fill: none; stroke: currentColor; stroke-width: 2; }
.share-btn.share-file svg .dot { fill: currentColor; stroke: none; }
.pop-sub .share-btn { width: 40px; height: 40px; }
.pop-sub .share-btn.share-file { width: auto; }
.v3-playground .toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; padding: 11px 18px; border-radius: 100px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); transition: opacity .2s ease, transform .2s ease; }
@media (max-width: 767px) { .v3-playground .toast { bottom: calc(24px + 68px + env(safe-area-inset-bottom)); } }
.v3-playground .toast.show { opacity: 1; transform: translateX(-50%); }
.share-anchor { position: relative; display: inline-flex; }
.share-panel { position: absolute; top: 50%; left: calc(100% + 10px); z-index: 20; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: 0; padding: 6px; overflow: hidden; border: 1.5px solid transparent; border-radius: 100px; background: var(--bg); opacity: 0; pointer-events: none; transform: translateY(-50%); transition: max-width .3s ease, opacity .2s ease, padding .3s ease; }
.share-panel.show { max-width: 380px; padding: 6px 8px; border-color: var(--line); opacity: 1; pointer-events: auto; }
/* 861-1279px: not enough room to the right of the controls, so the panel opens above them, right-aligned */
@media (min-width: 861px) and (max-width: 1279px) { .share-panel { top: auto; bottom: calc(100% + 10px); left: auto; right: 0; transform: none; } }
/* info column */
.info-col { display: flex; flex-direction: column; }
.v3-playground .info-col h1 { margin: 0 0 14px; font-size: clamp(44px, 6vw, 80px); }
.kt-rules { margin: 0 0 16px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.5; color: var(--ink-2); }
/* the knight's speech bubble: white bubble with a thin outline; the outline takes the stage colour (focus, close, win) */
.size-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 11px; }
.size-pill { min-height: 48px; padding: 0 22px; border: 2px solid var(--line); border-radius: 100px; background: transparent; color: var(--ink); font: 700 16px/1 var(--sans); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
@media (hover: hover) { .size-pill:hover { border-color: var(--ink); } }
.size-pill.selected { border-color: transparent; color: var(--bg); } /* the script fills it with the board outline colour (navy) */
/* Drawn / Plain board-style toggle (BoardStylePicker, owner decision 21 Oct 2026 — finally built; was
   deferred since the P03 "one board look" note in readme.md). Same pill language as the size picker, two
   options instead of four. */
/* Games settings panel (22 Oct 2026 revision): plain words instead of pill buttons, selected option
   underlined (not the unselected one — a reversal from the first pass, closer to how underline usually
   signals "this is the current state"), 44px tap targets per WCAG even though the text is small. */
.text-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: 20px; font: 600 14px/1.3 var(--sans); color: var(--ink-2); }
.toggle-word { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border: none; background: none; padding: 0 3px; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; font-weight: 500; transition: color .2s; }
@media (hover: hover) { .toggle-word:hover { color: var(--ink); } }
.toggle-word.selected { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: default; }
.toggle-word:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
/* the Plain frame: no hand-drawn illustration, just a neat line directly around the grid (22 Oct 2026
   revision — owner felt the first pass's white mat band was too wide/clunky). Padding on .board-frame stays
   the same 10% as the drawn frame above, so the grid itself is still the same size either way; this ring now
   sits on .board-wrap (the grid's own box, no white fill around it) instead of padding out .board-frame with a
   filled gutter, and uses an inset box-shadow rather than a real `border` so it costs no box-model space and
   can't nudge the grid size either way. */
.board-frame.style-plain { background: none; }
.board-frame.style-plain .board-wrap { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 var(--outline-strong) var(--board-outline, var(--ink)); }
.kt-odd-note { display: flex; align-items: center; gap: 7px; min-height: 24px; margin-bottom: 40px; font-size: 14px; line-height: 1.4; color: var(--ink-2); visibility: hidden; opacity: 0; transition: opacity .15s ease; }
.kt-odd-note.show { visibility: visible; opacity: 1; }
.kt-odd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-fill); }
.odd-info-wrap { position: relative; display: inline-flex; }
.odd-info { position: relative; width: 20px; height: 20px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font: 700 12px/17px var(--display); text-align: center; cursor: pointer; }
.odd-info::before { content: ''; position: absolute; inset: -12px; }
.odd-tip { position: absolute; bottom: calc(100% + 8px); right: -10px; z-index: 40; width: max-content; max-width: 220px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: var(--white); font: 600 12.5px/1.45 var(--sans); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.odd-info-wrap:hover .odd-tip, .odd-info:focus-visible + .odd-tip, .odd-info-wrap.open .odd-tip { opacity: 1; }
.v3-playground .status { min-height: 0; margin: 10px 0; font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.v3-playground .status:empty { margin: 0; }
.v3-playground .status.win { color: #006C54; }
.v3-playground .status.dead { color: #A1402D; }
.stat-block { max-width: 500px; }
.stat-row { display: flex; align-items: flex-start; gap: 28px; margin-bottom: 18px; }
.stat-item { display: flex; flex-direction: column; }
.stat-num { display: inline-block; font: 800 32px/1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.v3-playground .pop { display: inline-block; animation: v3-stat .35s var(--ease); }
@keyframes v3-stat { 45% { transform: scale(1.25); } }
.stat-label { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.stat-divider { align-self: stretch; width: 1.5px; background: var(--rule); }
.progress-track { position: relative; width: 100%; height: 10px; overflow: hidden; border-radius: 100px; background: var(--rule); }
.progress-fill { position: absolute; inset: 0; width: 0%; border-radius: 100px; background: var(--board-outline); transition: width .45s cubic-bezier(.4, 0, .2, 1), background-color .3s ease; }
/* Save PNG / Save GIF + Completed Tour picker: only after a completed tour, right under the progress bar; text actions with a navy + pink underline.
   One block in every layout: above the board on phones, in the bottom zone over the game buttons in fullscreen play (body.kt-play). */
.kt-save { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; max-width: 500px; margin-top: 14px; }
.kt-save-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.kt-tour-pick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 16px/1 var(--sans); color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.kt-tour-pick select { min-height: 44px; margin: 0; padding: 0 26px 0 4px; border: 0; border-radius: 8px; -webkit-appearance: none; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D3B66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 L12 15 L18 9.5'/%3E%3C/svg%3E") right 4px center / 16px no-repeat; color: var(--ink); font: 800 16px/1 var(--sans); cursor: pointer; }
.kt-tour-pick select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kt-save[hidden] { display: none; }
.kt-save-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 800 18px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.kt-save-btn svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kt-save-btn span { padding-bottom: 7px; background: linear-gradient(var(--ink), var(--ink)) 0 calc(100% - 4px) / 100% 2.5px no-repeat, linear-gradient(var(--art-pink), var(--art-pink)) 0 100% / 100% 4px no-repeat; }
@media (hover: hover) { .kt-save-btn:hover span { background-size: 100% 2.5px, 100% 5px; } }
.kt-save-btn:disabled { opacity: .5; cursor: progress; }
/* game controls: outlined icon buttons (no coloured circles); Hint is the yellow one */
.board-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 500px; margin: 28px 0 0; }
.board-controls .share-anchor { margin-inline-start: 14px; }
.board-controls .settings-anchor { margin-inline-start: 8px; }
/* Settings popover (22 Oct 2026): Board style + Legal moves, previously two always-visible text rows above
   the board, now live here behind one icon button so the top of the info column goes straight from board
   size to "choose a square to start" / stats. Opens upward off the controls row so it has room in both the
   normal layout and mobile fullscreen play, where vertical space is tight. */
.settings-anchor { position: relative; display: inline-flex; }
.settings-panel { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 20; display: flex; flex-direction: column; gap: 10px; min-width: 240px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: var(--shadow-hover); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.settings-panel.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.settings-panel .text-toggle { margin-bottom: 0; flex-wrap: nowrap; }
@media (max-width: 860px) { .settings-panel { left: auto; right: 0; transform: translateY(6px); } .settings-panel.show { transform: translateY(0); } }
.kt-key-hint { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); }
.kt-hint-shift { display: none; }
/* desktop: no "Play fullscreen" button or arrow-key hint under the controls (arrow keys still work) */
@media (min-width: 861px) { .kt-key-hint, .kt-reopen-btn { display: none; } }
.ctrl-icon-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--ink); border-radius: var(--radius-tile); background: transparent; color: var(--ink); cursor: pointer; transition: box-shadow .18s var(--ease), background-color .18s; }
.ctrl-icon-btn.chip-gold { background: var(--yellow); }
@media (hover: hover) { .ctrl-icon-btn:hover:not(:disabled) { box-shadow: var(--shadow-hover); } }
.ctrl-icon-btn:active:not(:disabled) { box-shadow: none; }
.ctrl-icon-btn:disabled { opacity: .35; cursor: default; }
.ctrl-icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pin-share-btn.active { background: var(--ink); color: var(--bg); }
.kt-exit { display: none; }
.kt-moves-toggle { display: none; }

@media (max-width: 860px) {
  .v3-playground .section-pad { padding-top: 20px; }
  .game-grid { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; margin: 0 auto; }
  .v3-playground .info-col h1 { margin-bottom: 8px; font-size: 40px; }
  .kt-rules { margin-bottom: 12px; font-size: 17px; }
  /* phone flow: intro -> board -> stats -> controls, as one outlined game card */
  .game-grid .board-col, .game-grid .info-col { display: contents; }
  .info-col h1 { order: 1; } .info-col .kt-rules { order: 2; } .info-col .size-picker { order: 4; } .info-col .kt-odd-note { order: 5; } .info-col #status { order: 6; }
  .info-col .size-picker { justify-content: center; margin-bottom: 8px; }
  .info-col .kt-odd-note { justify-content: center; margin-bottom: 14px; text-align: center; }
  /* phones: intro, stats, Save and the board share the board's centre line */
  .info-col :is(h1, .kt-rules, #status) { text-align: center; }
  .stat-row { justify-content: center; }
  .info-col .stat-item { align-items: center; text-align: center; }
  .info-col .stat-block { order: 8; max-width: none; margin: 0; padding: 14px 16px 12px; }
  .info-col .stat-row { gap: 18px; margin-bottom: 10px; }
  .info-col .stat-num { font-size: 22px; }
  .info-col .stat-label { margin-top: 3px; font-size: 10px; }
  .info-col .progress-track { height: 6px; }
  .info-col .kt-save { order: 8; justify-content: center; gap: 0; max-width: none; margin: 0; padding: 2px 16px 6px; }
  .info-col .kt-save-links { justify-content: center; gap: 0 24px; }
  .kt-tour-pick { flex-basis: 100%; justify-content: center; min-height: 40px; font-size: 14px; }
  .kt-tour-pick select { min-height: 40px; font-size: 15px; }
  .kt-save-btn { gap: 8px; font-size: 16px; }
  .kt-save-btn svg { width: 20px; height: 20px; }
  /* art's own hand-drawn edge replaces the card border-inline here; padding stays 10% (unset) so the window keeps aligning to the square SVG on all sides */
  .board-col .board-frame { order: 9; max-width: none; margin: 0 auto; }
  .info-col .board-controls { order: 11; justify-content: space-around; max-width: none; margin: 0 0 20px; padding: 12px 12px 16px; }
  .info-col .kt-key-hint { display: none; }
  .kt-reopen-btn { display: none; }
  .board-controls .share-anchor { margin-inline-start: 0; }
  .board-controls .settings-anchor { margin-inline-start: 0; }
  .size-pill { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .ctrl-icon-btn { width: 44px; height: 44px; }
  .info-col .share-panel { top: auto; bottom: calc(100% + 10px); left: auto; right: 0; }
  .share-panel { top: calc(100% + 10px); left: auto; right: 0; flex-wrap: wrap; max-width: 220px; max-height: 0; border-radius: 16px; transform: none; }
  .share-panel.show { max-width: 220px; max-height: 120px; }
}
/* portrait phones after the first move: fixed fullscreen play mode (stats bar, the biggest board that fits, the bubble, controls) */
@media (max-width: 860px) and (orientation: portrait) {
  body.v3.kt-play { overflow: hidden; }
  body.kt-play #kt-hero { position: fixed; inset: 0; z-index: 1000; height: 100vh; height: 100dvh; padding: env(safe-area-inset-top) 0 0; overflow: hidden; background: var(--bg); }
  body.kt-play #kt-hero > .container { height: 100%; }
  body.kt-play .game-grid { display: flex; flex-direction: column; height: 100%; max-width: 560px; padding: 10px 12px 0; }
  body.kt-play .info-col :is(h1, .kt-rules, .size-picker, .kt-odd-note, #status, .kt-key-hint) { display: none; }
  body.kt-play .anim-in { opacity: 1; animation: none; }
  body.kt-play .info-col .stat-block { position: relative; order: 1; flex: none; padding: 10px 60px; border-bottom: 1.5px solid var(--line); border-radius: 16px; }
  body.kt-play .info-col .stat-row { justify-content: center; gap: 14px; margin-bottom: 7px; }
  body.kt-play .info-col .stat-num { font-size: 18px; }
  body.kt-play .info-col .stat-label { margin-top: 2px; font-size: 9px; }
  body.kt-play .info-col .progress-track { height: 5px; }
  body.kt-play .info-col .kt-save { order: 3; flex: none; align-self: stretch; margin: 0 -12px; padding: 6px 12px 0; border-top: 1.5px solid var(--line); background: var(--bg); }
  body.kt-play .info-col .kt-save:not([hidden]) + .board-controls { border-top: 0; } /* Save and the buttons read as one bottom zone */
  body.kt-play .kt-save-btn { font-size: 15px; }
  body.kt-play .kt-exit { position: absolute; top: 50%; right: 8px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 2px solid var(--ink); border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; transform: translateY(-50%); }
  body.kt-play .kt-exit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  /* compact Legal-moves toggle, fullscreen only — Drawn/Plain and the full Legal-moves control hide above
     with the rest of .text-toggle, so this is the only way to reach it once the game is full screen. */
  body.kt-play .kt-moves-toggle { display: flex; position: absolute; top: 50%; right: 54px; transform: translateY(-50%); align-items: center; height: 36px; min-width: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font: 700 12px var(--sans); cursor: pointer; }
  body.kt-play .kt-moves-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  body.kt-play .info-col :is(.stat-block, .board-controls) { align-self: stretch; width: auto; }
  body.kt-play .board-col .board-frame { order: 2; flex: none; width: var(--kt-board, 100%); margin: auto 0; border: 0; }
  body.kt-play .info-col .board-controls { order: 4; flex: none; justify-content: space-around; gap: 4px; margin: 0 -12px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border: 0; border-top: 1.5px solid var(--line); border-radius: 0; background: var(--bg); }
  body.kt-play .ctrl-icon-btn { width: 46px; height: 46px; }
  body.kt-play .share-panel { top: auto; bottom: calc(100% + 14px); left: auto; right: 0; flex-wrap: nowrap; max-width: 0; max-height: none; }
  body.kt-play .share-panel.show { max-width: calc(100vw - 32px); }
  body.kt-play .toast { z-index: 1100; bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* reopen button: shown outside kt-play, hidden inside */
  .kt-reopen-btn { display: inline-flex; order: 10; align-self: center; align-items: center; gap: 6px; margin: 8px auto 4px; padding: 0 18px; height: 40px; border: 2px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
  .kt-reopen-btn::before { content: "▶"; font-size: 10px; }
  body.kt-play .kt-reopen-btn { display: none; }
}
@media (max-width: 380px) {
  .size-picker { gap: 7px; }
  .size-pill { padding: 0 11px; font-size: 14px; }
  .stat-row { justify-content: space-between; gap: 8px; }
  .stat-divider { display: none; }
  .stat-num, .info-col .stat-num { font-size: 20px; white-space: nowrap; }
  .stat-label { font-size: 11px; letter-spacing: .05em; }
  .info-col .stat-block { padding: 14px 12px 10px; }
  .info-col .board-controls { gap: 6px; padding: 12px 8px 14px; }
  .ctrl-icon-btn { width: 44px; height: 44px; }
  /* fullscreen: the centred stat row keeps one line between equal side paddings (the right one clears the exit button) */
  body.kt-play .info-col .stat-block { padding-inline: 56px; }
  body.kt-play .info-col .stat-row { gap: 8px; }
}

/* ── motion: scroll reveal and a single "pop" of the hand-drawn doodles; nothing loops except the game's start hints ── */
.js .v3-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .v3-rv.in { opacity: 1; transform: none; }
.js .v3-doodle:not(.in) { opacity: 0; }
/* ambient-motion entrance (22 Oct 2026): default-hidden behind `.js`, same convention as .v3-rv above, so a
   no-JS visit still sees the art fully drawn. v3.js plays a one-time 650ms fade+rise the first time each
   element is in view, then hands off to a looping idle drift — see the ambient-motion IIFE there. */
.js :is(.v3-fig, .cs-fig, .cs-art, .hm-cta-piece) { opacity: 0; translate: 0 14px; }
.v3-doodle.in { animation: v3-pop .7s var(--ease) .15s backwards; }
@keyframes v3-pop { from { opacity: 0; scale: .5; rotate: -14deg; } }
/* motion revision (22 Oct 2026): animation-swap-on-hover replaced with a transform transition, same fix
   already applied to the header figures below — swapping `animation` restarts it on mouse-leave (a snap back
   instead of a smooth return); a `transition` on `transform` doesn't have that problem, and composes cleanly
   with the idle WAAPI drift in v3.js, which drives individual rotate/scale/translate properties instead of
   the `transform` shorthand. .motion-character (added by v3.js to every figure/icon it animates) carries the
   transition; the selectors below just supply the hover target position. */
.motion-character { transition: transform 320ms cubic-bezier(.22, .8, .24, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.hm-lvl-item a, .hm-prog a):hover .v3-fig { transform: rotate(-3deg) translateY(-4px); }
  .hm-skill:hover .v3-fig { transform: translateY(-5px); }
  :is(.who-card, .format-card):hover :is(.v3-fig, .cs-fig, .cs-art) { transform: scale(1.06) rotate(3deg); }
  .level-summary:hover .cs-fig { transform: rotate(3deg) translateY(-4px); }
  .area-card:hover .flip-btn { animation: v3-bounce .5s var(--ease); }
  .cs-cta-icon:hover .cs-fig, .hero-icon:hover .cs-fig { transform: scale(1.06) rotate(-3deg); }
}
@keyframes v3-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 70% { transform: translateY(1px); } }
/* fix (21 Oct 2026): same restart bug as the nav logo above, on three more spots that each have their OWN
   load-in `animation` directly on the element (.v3-head-art .v3-fig, its .v3-doodle, .hm-hero-queen) — a hover
   rule swapping `animation` on top of that replays the entrance on mouse-leave (vanish, then fall in again).
   These three get motion from a `transition` on `transform` instead: transitions don't restart an unrelated
   `animation` property, so the one-time entrance plays once, ever, and hover just eases in and back out. */
.v3-head-art .v3-fig, .v3-head-art .v3-doodle.in { transition: transform .35s var(--ease); }
.hm-hero-queen { transition: transform .35s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .v3-head-art:hover .v3-fig { transform: rotate(-4deg) translateY(-3px); }
  .v3-head-art:hover .v3-fig:nth-child(2) { transform: rotate(3deg) translateY(-3px); }
  .v3-head-art:hover .v3-fig:nth-child(3) { transform: rotate(-3deg) translateY(-3px); }
  .v3-head-art:hover .v3-doodle.in { transform: scale(1.12) rotate(6deg); }
  .hm-hero-stage:hover .hm-hero-queen { transform: translateX(-50%) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.v3 { animation: none; transition: none; }
  .js .v3-rv, .js .v3-doodle:not(.in), .js :is(.v3-fig, .cs-fig, .cs-art, .hm-cta-piece) { opacity: 1; transform: none; translate: none; transition: none; }
  .motion-character { transition: none; }
  .v3-doodle.in, .mobile-menu.open, body.v3 .bk-modal[open] { animation: none; }
  body.v3 :is(.v3-btn, .bk-btn, .v3-nav-cta, .hm-prog a, .hm-lvl-item a, .clip-btn, .kt-board, .bk-link, .bk-arrow, .v3-faq-a, .v3-faq-pm::after, .hm-faq-more svg, .hm-q-dots button::before, .clip-dots i) { transition: none; }
  body.v3 :is(.v3-btn, .bk-btn, .v3-nav-cta, .hm-prog a, .hm-lvl-item a, .clip-btn, .kt-board):hover { transform: none; }
  .kt-piece { transition: none; }
  .kt-piece.bounce, .kt-sq.valid-start::before, .kt-board.flash-start .kt-sq.valid-start::before, .kt-sq.hint::after, .kt-sq.invalid, #ktEndTools:not([hidden]), #ktDone:not([hidden]) { animation: none; }
  .kt-toast { transition: none; }
  .hm-q-track { scroll-behavior: auto; }
  /* Learn Chess and Games */
  .kt-hero-logo-pieces span, .kt-hero-playground, .anim-in { opacity: 1; animation: none; }
  .flip-inner, .flip-btn svg, .flip-tip, .face, .knight-piece, .sq, .share-panel, .progress-fill, .ctrl-icon-btn, .v3-playground .toast { transition: none; }
  .sq.hint::after, .sq.valid-start::before, .board.flash-start .sq.valid-start::before, .sq.invalid, .knight-piece.win-bounce, .quote-like.pop svg, .v3-playground .pop, .board-overlay.is-win .overlay-solved, .board-overlay.is-dead .pop-btn :is(svg, span) { animation: none; }
  .ctrl-icon-btn:hover:not(:disabled) { transform: none; }
}

/* ── Right-to-left (Hebrew, /he/ prototype). Logical properties above cover most of it; only what cannot be logical is here. ── */
html[dir="rtl"] .v3-logo { direction: ltr; }                       /* the Latin wordmark and the six figures keep their order */
html[dir="rtl"] .kt-board, html[dir="rtl"] .board { direction: ltr; } /* chess boards keep a-h left to right: columns, clicks and the knight's position */
html[dir="rtl"] .skip-link { left: auto; right: 12px; }
html[dir="rtl"] .v3-lang-list { right: auto; left: 0; }
html[dir="rtl"] .kt-x, html[dir="rtl"] .overlay-close, html[dir="rtl"] .vm-close, html[dir="rtl"] .flip-btn { right: auto; left: 10px; }
html[dir="rtl"] .odd-tip { right: auto; left: -10px; }
html[dir="rtl"] .share-panel { left: auto; right: calc(100% + 10px); }
@media (max-width: 860px) { html[dir="rtl"] .settings-panel { left: 0; right: auto; } }
/* arrows that point along the reading direction */
html[dir="rtl"] body.v3 :is(.v3-btn, .bk-btn) svg, html[dir="rtl"] .bk-arrow, html[dir="rtl"] .hm-lvl-arrow svg, html[dir="rtl"] .hm-prog-arrow svg, html[dir="rtl"] #hvQPrev svg, html[dir="rtl"] #hvQNext svg { transform: scaleX(-1); }
@media (hover: hover) {
  html[dir="rtl"] body.v3 :is(.v3-btn, .bk-btn):hover svg, html[dir="rtl"] .hm-lvl-item a:hover .hm-lvl-arrow svg, html[dir="rtl"] .hm-prog a:hover .hm-prog-arrow svg { transform: scaleX(-1) translateX(3px); }
  html[dir="rtl"] #hvQPrev:hover:not(:disabled) svg { transform: scaleX(-1) translateX(-3px); }
  html[dir="rtl"] #hvQNext:hover:not(:disabled) svg { transform: scaleX(-1) translateX(3px); }
}
html[dir="rtl"] .tw-back svg { transform: scaleX(-1); }
html[dir="rtl"] body.v3 :is(.bk-field, .v3-field) select, html[dir="rtl"] body.v3 .tw-tz select { background-position: left 18px center; }
html[dir="rtl"] input[name="_gotcha"] { left: auto !important; right: -9999px; } /* bot trap parked off-screen on the side that cannot scroll */
html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; } /* numbers and addresses stay left-to-right, aligned to the start edge */
html[lang="he"] body.v3 *:not(.v3-logo-text):not(.v3-logo-text *) { letter-spacing: 0 !important; } /* tracking is a Latin habit; Hebrew letters are not spaced out */
html[dir="rtl"] .stat-num, html[dir="rtl"] .kt-count { direction: ltr; unicode-bidi: isolate; } /* "4 / 25" keeps its left-to-right order, like a fraction */
/* Undo on the right, Redo on the left (owner, 2026-11-08): both icons mirrored; the Redo icon is mirrored inline in the page, so it is reset here */
html[dir="rtl"] #undoBtn svg { transform: scaleX(-1); }
html[dir="rtl"] #redoBtn svg { transform: none !important; }
html[dir="rtl"] .bk-amount { direction: ltr; unicode-bidi: isolate; } /* 1,080 ₪ reads left to right */
/* the English original of a licence stays English: left to right, aligned left, even on a right-to-left page */
html[dir="rtl"] .v3-prose span[lang="en"] { display: block; direction: ltr; text-align: left; unicode-bidi: isolate; }
html[dir="rtl"] .v3-prose span[lang="en"] a { unicode-bidi: isolate; }