/* design system: pages (merged into css/ui-kit.css before release)
   Every page that is not the home page, a lesson, the plans page or the personal area: games and their play screens,
   videos, coach, league, the study plan, the dictionary, tips, friends, the library (stories, grammar, dialogues), the
   legal pages, public profiles and empty states. One page header (a card with Polly's portrait, or a photo cover for
   games), one card, one list row and one set of filters, so these pages read as one product.
   Rules hang off each page's own root (.games, .coach, .st-lib …), so the home page, lessons and the cat pages keep
   their own looks. Looks (colour, background, border, shadow, radius) are wrapped in :where(html:not(.a11y-contrast));
   layout is not. Text on a photo keeps its own high contrast rules. Gradients that run sideways use --pg-to-end and
   --pg-end, which flip in right-to-left pages.
   Shared parts for new pages: .ds-page (page root), .ds-hero > .ds-hero-text + img.ds-hero-art (header card with a
   portrait), .ds-hero.cover > img.ds-hero-img + .ds-hero-text (photo cover). */

/* Heading weight, every language: css/style.css sets h1 and h2 to weight 400, and only Hebrew got 600/700 back (ui-kit), so
   English and Russian page titles without their own rule (finish card, ear lab, word review, Polly's page, commute mode…)
   looked thin next to the bold ones. Zero specificity: any page rule that sets its own weight still wins. */
:where(html) h1 { font-weight: 700; }
:where(html) h2 { font-weight: 600; }

/* =====================================================================
   0. Page tints: a page carries its menu colour (--pg) on small accents only
   ===================================================================== */
html { --pg-end: 100%; --pg-to-end: 90deg; }
html[dir="rtl"] { --pg-end: 0%; --pg-to-end: 270deg; }
:is(.games, .play) { --pg: #7b4ff0; }
:is(.videos, .vplay) { --pg: #e0443d; }
.coach { --pg: #0f93b8; }
.league { --pg: #c98f00; }
.plan-builder { --pg: #d9820b; }
.st-lib { --pg: #a8612f; }
.so-hero { --pg: #2f6fe0; }
:is(.gr-lib, .dl-lib, .dict, .tips, .legal, .pf, .ds-page) { --pg: var(--accent); }

/* =====================================================================
   1. Page roots: one rhythm (24px between blocks); narrow reading pages sit in a centred column
   ===================================================================== */
:is(.games, .videos, .coach, .league, .dict, .st-lib, .gr-lib, .dl-lib, .pf, .ds-page) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-content: start; min-width: 0; padding-block: 0;
}
:is(.league, .dict, .tips) { width: 100%; max-width: 820px; margin-inline: auto; }
.pf { width: 100%; max-width: 980px; margin-inline: auto; }
/* the friends page has no root of its own: its blocks sit straight in #view */
#view:has(> .so-hero) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-content: start; }
#view > .so-hero { margin: 0; }

/* =====================================================================
   2. Page headers. Three forms with one type scale: eyebrow, h1, one line in --muted.
      a) a plain title block (tips, study plan, league, legal pages)
      b) a header card with Polly's portrait at the end (library, videos, coach, friends, dictionary, .ds-hero)
      c) a photo cover with the title on a dark scrim (games, .ds-hero.cover)
   ===================================================================== */
/* ---------- 2a. title block ---------- */
:is(.tips, .plan-builder, .legal, .league-head) h1 { margin: 0; font: 700 var(--fs-h1)/1.15 var(--font-ui); letter-spacing: -.02em; }
:is(.plan-builder, .legal) > .eyebrow { margin: 0 0 var(--sp-2); }
:is(.tips > .lead, .plan-builder > .lead, .legal > .lead, .league-head > div:first-child > p) { margin: var(--sp-2) 0 0; max-width: 62ch; font-size: var(--fs-lg); line-height: 1.55; }
:where(html:not(.a11y-contrast)) :is(.tips > .lead, .plan-builder > .lead, .legal > .lead, .league-head > div:first-child > p) { color: var(--muted); }
:where(html:not(.a11y-contrast)) :is(.plan-builder, .legal) > .eyebrow { color: color-mix(in srgb, var(--pg) 70%, var(--ink)); }

/* ---------- 2b. header card: the text on the start side, Polly's portrait on a white plate at the end ---------- */
:is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--sp-8);
  min-width: 0; margin: 0; padding: var(--sp-8) clamp(var(--sp-6), 3vw, var(--sp-10)); overflow: hidden; text-align: start;
}
:where(html:not(.a11y-contrast)) :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) {
  color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--e2);
  background: radial-gradient(70% 150% at var(--pg-end) 0%, color-mix(in srgb, var(--pg, var(--accent)) 10%, transparent), transparent 64%), var(--surface);
}
:where(html.pref-easy:not(.a11y-contrast)) :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) { background: var(--surface); }
.dict > .dict-head.dict-head, .ds-hero.ds-hero:not(:has(> .ds-hero-art)) { grid-template-columns: minmax(0, 1fr); }
:is(.st-hero > div, .vid-hero > div, .coach-hero > div, .so-hero > div, .gr-hero-txt, .dl-hero-text, .ds-hero-text) { grid-column: 1; grid-row: 1; display: block; min-width: 0; }
:is(.st-hero-art, .gr-hero-art, .dl-hero-art, .vid-cat, .coach-cat, .so-hero > img, .ds-hero-art) {
  grid-column: 2; grid-row: 1; align-self: center; flex: none; order: 0; width: 136px; height: 136px; margin: 0;
  object-fit: contain; object-position: 50% 50%; transform: none; mix-blend-mode: normal;
}
/* Polly's photos have a white studio backdrop, so the portrait keeps a white plate in both themes */
:where(html:not(.a11y-contrast)) :is(.st-hero-art, .gr-hero-art, .dl-hero-art, .vid-cat, .coach-cat, .so-hero > img, .ds-hero-art) {
  border: 0; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--hairline), var(--e2);
}
:root[data-theme="dark"] :is(.st-hero-art, .gr-hero-art, .dl-hero-art, .vid-cat, .coach-cat, .so-hero > img, .ds-hero-art) { filter: brightness(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.st-hero-art, .gr-hero-art, .dl-hero-art, .vid-cat, .coach-cat, .so-hero > img, .ds-hero-art) { filter: brightness(.92); } }

/* the type inside a header card */
:is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero) h1 {
  margin: 0; max-width: 28ch; font: 700 var(--fs-h1)/1.15 var(--font-ui); letter-spacing: -.02em; color: inherit;
}
:is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) :is(.eyebrow, .gr-kicker) { margin: 0 0 var(--sp-2); }
.gr-kicker { font: 600 var(--fs-xs)/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
:lang(he) .gr-kicker { font-size: .82rem; letter-spacing: .01em; }
:where(html:not(.a11y-contrast)) :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) :is(.eyebrow, .gr-kicker) {
  color: color-mix(in srgb, var(--pg, var(--accent)) 70%, var(--ink)); opacity: 1;
}
:is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .ds-hero:not(.cover)) :is(.lead, h1 + p) {
  margin: var(--sp-2) 0 0; max-width: 60ch; font-size: var(--fs-lg); line-height: 1.55;
}
:where(html:not(.a11y-contrast)) :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .ds-hero:not(.cover)) :is(.lead, h1 + p) { color: var(--muted); opacity: 1; }
/* what follows the line: progress, the next step, a sign-in button */
:is(.gr-prog, .dl-meter) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); width: auto; margin: var(--sp-5) 0 0; font-size: var(--fs-sm); }
:where(html:not(.a11y-contrast)) :is(.gr-prog, .dl-meter) { color: var(--muted); }
:is(.gr-prog, .dl-meter) .small { font-size: var(--fs-sm); }
/* the same bar as .ds-progress */
:is(.gr-meter, .dl-meter-bar) { display: block; flex: 0 1 220px; min-width: 96px; max-width: 220px; height: 8px; overflow: hidden; }
:where(html:not(.a11y-contrast)) :is(.gr-meter, .dl-meter-bar) { border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 8%, transparent); }
:is(.gr-meter, .dl-meter-bar) > span { min-width: 0; }
:where(html:not(.a11y-contrast)) :is(.gr-meter, .dl-meter-bar) > span { border-radius: inherit; background: var(--accent); }
.gr-hero .gr-cta { margin-top: var(--sp-4); padding: .7em 1.25em; }
:where(html:not(.a11y-contrast)) .gr-hero .gr-cta { border-radius: 14px; }
.gr-hero .gr-all-done { margin: var(--sp-4) 0 0; }
.so-hero > div > p.muted.small { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
:where(html:not(.a11y-contrast)) .so-hero > div > p.muted.small { color: var(--muted); opacity: 1; }
.so-hero > div > .btn { margin-top: var(--sp-5); }
/* ui-kit draws white keys on the old colourful friends banner; on the neutral card the key is a normal primary one */
html:root:not(.a11y-contrast) section.so-hero.so-hero .btn.primary {
  color: #fff; text-shadow: 0 1px 1px rgb(20 10 80 / .2); background: var(--grad);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -2px 0 rgb(10 10 60 / .18), 0 1px 2px rgb(30 30 100 / .22), 0 8px 18px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
html:root[data-theme="dark"]:not(.a11y-contrast) section.so-hero.so-hero .btn.primary { color: #0a0e1a; text-shadow: none; }
@media (prefers-color-scheme: dark) { html:root:not([data-theme="light"]):not(.a11y-contrast) section.so-hero.so-hero .btn.primary { color: #0a0e1a; text-shadow: none; } }

/* the dictionary's header card holds a big search field */
:where(html:not(.a11y-contrast)) #dict-q {
  display: block; width: 100%; min-height: 52px; margin: var(--sp-5) 0 0; padding: 0 var(--sp-4); padding-inline-start: 48px;
  font: 400 1.0625rem/1.3 var(--font-ui); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: 14px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a92a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E") no-repeat left 16px center / 20px 20px;
  box-shadow: inset 0 1px 2px rgb(15 20 40 / .04), var(--e1); transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
:where(html[dir="rtl"]:not(.a11y-contrast)) #dict-q { background-position: right 16px center; }
:where(html:not(.a11y-contrast)) #dict-q:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
:where(html:not(.a11y-contrast)) #dict-q::placeholder { color: var(--faint); }
html.a11y-contrast #dict-q { margin-top: var(--sp-4); }

/* ---------- 2c. photo cover (games): the picture fills the card, a scrim darkens the reading corner ---------- */
:is(.games > .games-hero, .ds-hero.cover) {
  --on-photo: #fff; --on-photo-2: rgb(255 255 255 / .86); --scrim: 8 11 24;
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--sp-2);
  min-height: clamp(220px, 24vw, 296px); margin: 0; padding: var(--sp-10) clamp(var(--sp-6), 3vw, var(--sp-10)) var(--sp-6); overflow: hidden; text-align: start; color: var(--on-photo);
}
:where(html:not(.a11y-contrast)) :is(.games > .games-hero, .ds-hero.cover) { border: 0; border-radius: var(--r-xl); background: rgb(var(--scrim)); box-shadow: var(--e2); }
:is(.games > .games-hero > .hero-art, .ds-hero.cover > .ds-hero-img) {
  position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  aspect-ratio: auto; object-fit: cover; object-position: 50% 42%; -webkit-mask-image: none; mask-image: none; border-radius: 0;
}
:is(.games > .games-hero, .ds-hero.cover)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, rgb(var(--scrim) / .86) 0%, rgb(var(--scrim) / .6) 34%, rgb(var(--scrim) / .12) 70%, rgb(var(--scrim) / 0) 88%),
    linear-gradient(var(--pg-to-end), rgb(var(--scrim) / .34), rgb(var(--scrim) / 0) 60%);
}
.ds-hero.cover > .ds-hero-text { display: grid; gap: var(--sp-2); min-width: 0; }
:is(.games > .games-hero, .ds-hero.cover) h1 { margin: 0; max-width: 24ch; font: 700 var(--fs-h1)/1.12 var(--font-ui); letter-spacing: -.02em; color: var(--on-photo); text-shadow: 0 1px 2px rgb(var(--scrim) / .35); }
:is(.games > .games-hero > p, .ds-hero.cover :is(.lead, h1 + p)) { margin: 0; max-width: 60ch; font-size: var(--fs-lg); line-height: 1.5; color: var(--on-photo-2); text-shadow: 0 1px 2px rgb(var(--scrim) / .3); }
:root[data-theme="dark"] :is(.games > .games-hero > .hero-art, .ds-hero.cover > .ds-hero-img) { filter: brightness(.9) saturate(1.04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.games > .games-hero > .hero-art, .ds-hero.cover > .ds-hero-img) { filter: brightness(.9) saturate(1.04); } }
/* high contrast: a solid scrim and white text on the picture */
html.a11y-contrast :is(.games > .games-hero, .ds-hero.cover)::after { background: rgb(0 0 0 / .78); }
html.a11y-contrast :is(.games > .games-hero, .ds-hero.cover) :is(h1, p) { color: #fff !important; text-shadow: none; }

/* ---------- 2d. phones: the portrait shrinks next to the title, the line runs under both ---------- */
@media (max-width: 640px) {
  :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) {
    grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 var(--sp-4); padding: var(--sp-5);
  }
  :where(html:not(.a11y-contrast)) :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) { border-radius: var(--r-lg); }
  :is(.st-hero > div, .vid-hero > div, .coach-hero > div, .so-hero > div, .gr-hero-txt, .dl-hero-text, .ds-hero:not(.cover) > .ds-hero-text) { display: contents; }
  :is(.st-hero > div, .vid-hero > div, .coach-hero > div, .so-hero > div, .gr-hero-txt, .dl-hero-text, .ds-hero:not(.cover) > .ds-hero-text) > * { grid-column: 1 / -1; }
  :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) h1 { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) :is(.eyebrow, .gr-kicker) { grid-column: 1; grid-row: 1; align-self: end; margin: 0 0 var(--sp-1); }
  :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) :is(.eyebrow, .gr-kicker) + h1 { grid-row: 2; align-self: start; }
  :is(.st-hero-art, .gr-hero-art, .dl-hero-art, .vid-cat, .coach-cat, .so-hero > img, .ds-hero-art) { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 72px; height: 72px; }
  :where(html:not(.a11y-contrast)) :is(.st-hero-art, .gr-hero-art, .dl-hero-art, .vid-cat, .coach-cat, .so-hero > img, .ds-hero-art) { border-radius: var(--r); }
  :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .ds-hero:not(.cover)) :is(.lead, h1 + p) { margin-top: var(--sp-3); font-size: 1rem; }
  :is(.gr-prog, .dl-meter) { margin-top: var(--sp-4); }
  :is(.games > .games-hero, .ds-hero.cover) { min-height: 200px; padding: var(--sp-8) var(--sp-5) var(--sp-5); }
  :where(html:not(.a11y-contrast)) :is(.games > .games-hero, .ds-hero.cover) { border-radius: var(--r-lg); }
  :is(.games > .games-hero > p, .ds-hero.cover :is(.lead, h1 + p)) { font-size: 1rem; }
  :where(html:not(.a11y-contrast)) #dict-q { margin-top: var(--sp-4); }
}

/* =====================================================================
   3. Cards: games, videos, books, stories, grammar topics and dialogues share one card.
      Surface, hairline, r-lg, e2; they lift to e3 under a mouse. Title, a line or two, then a footer row with the meta
      on one side and the action on the other. Card actions are quiet (one main action per screen).
   ===================================================================== */
:is(.game-grid, .vid-grid, .st-grid, .gr-grid, .dl-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); gap: var(--sp-5); margin: 0; }
.bk-shelf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--sp-5); }
:is(.game-card, .st-card, .gr-card, .dl-card) { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--sp-5); overflow: visible; text-align: start; }
:where(html:not(.a11y-contrast)) :is(.game-card, .vid-card, .st-card, .gr-card, .dl-card, .bk-card) {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--e2);
  transition: border-color var(--dur-2), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
:where(html:not(.a11y-contrast)) .gr-card.is-done { background: var(--surface); }
:is(.st-card, .gr-card, .dl-card)::before { content: none; }
:is(.game-card, .vid-card, .st-card, .gr-card, .dl-card):hover { transform: none; }
@media (hover: hover) {
  :where(html:not(.a11y-contrast)) :is(.game-card, .vid-card, .st-card, .gr-card, .dl-card):hover { border-color: var(--accent-line); box-shadow: var(--e3); transform: translateY(-2px); }
  :where(html:not(.a11y-contrast)) .bk-card:hover { border-color: var(--accent-line); box-shadow: var(--e3); }
}
@media (prefers-reduced-motion: reduce) { :is(.game-card, .vid-card, .st-card, .gr-card, .dl-card):hover { transform: none !important; } }
html:is(.pref-calm, .pref-easy) :is(.game-card, .vid-card, .st-card, .gr-card, .dl-card):hover { transform: none !important; }

/* title, the translation of an English title, one or two lines */
:is(.game-card > h2, .st-card h2, .gr-card h3, .dl-card h3, .bk-info h2) { margin: 0; font: 600 var(--fs-h3)/1.3 var(--font-ui); letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; }
:is(.st-card h2, .gr-card h3, .dl-card h3, .bk-info h2)[lang="en"] { font-family: var(--font-target); letter-spacing: 0; }
/* an English title lines up with the rest of its card in a right-to-left page */
:where(html[dir="rtl"]) :is(.st-card h2, .gr-card h3, .dl-card h3, .bk-info h2, .vid-body strong)[dir="ltr"] { text-align: right; }
.game-card > p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
:is(.st-card .st-tr, .gr-card .gr-tr, .dl-card .dl-card-tr, .bk-info .st-tr) { margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.4; }
:where(html:not(.a11y-contrast)) :is(.st-card .st-tr, .gr-card .gr-tr, .dl-card .dl-card-tr, .bk-info .st-tr) { color: var(--ink-2); }
.gr-card .gr-card-lead { margin: 0; font-size: var(--fs-sm); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* a talk card's scene is read in full: the sound guides open with a four-line promise that must not stop mid-sentence */
.dl-card .dl-card-scene { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
:where(html:not(.a11y-contrast)) :is(.game-card > p, .dl-card .dl-card-scene, .gr-card .gr-card-lead) { color: var(--muted); }
:is(.st-card, .bk-info) > p.muted.small { margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
/* the top row: a tinted icon or number, and the level */
:is(.st-card-top, .gr-card-top, .dl-card-top) { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
/* the topic emoji in the corner is decoration: the card leads with its level badge instead */
:is(.st-card .st-ico, .dl-card .dl-ico) { display: none; }
.gr-card .gr-num { font: 700 1.375rem/1 var(--font-target); letter-spacing: -.02em; }
:where(html:not(.a11y-contrast)) .gr-card .gr-num { color: color-mix(in srgb, var(--lv, var(--accent)) 70%, var(--ink)); }
/* the footer row: meta on one side, the action on the other */
:is(.game-foot, .st-foot, .gr-foot, .dl-foot) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: auto; padding-top: var(--sp-4); }
:where(html:not(.a11y-contrast)) :is(.game-foot, .st-foot, .gr-foot, .dl-foot) { border-top: 1px solid var(--hairline); }
:is(.game-foot, .st-foot, .gr-foot, .dl-foot) > .muted.small { min-width: 0; font-size: var(--fs-sm); line-height: 1.4; }
:is(.game-foot, .st-foot, .gr-foot, .dl-foot) .num { font-family: var(--font-target); font-weight: 600; }
:where(html:not(.a11y-contrast)) :is(.game-foot, .st-foot, .gr-foot, .dl-foot) .num { color: var(--ink-2); }
:is(.game-foot, .st-foot, .gr-foot, .dl-foot) .btn { min-height: 40px; padding: 0 var(--sp-4); font-size: .9rem; }
:where(html:not(.a11y-contrast)) :is(.game-foot, .st-foot, .gr-foot, .dl-foot) .btn { border-radius: 12px; }
/* a card's action is quiet: soft accent, filled under the pointer */
:where(html:not(.a11y-contrast)) :is(.game-foot, .st-foot, .gr-foot, .dl-foot) .btn.primary { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); text-shadow: none; box-shadow: none; filter: none; }
:where(html:not(.a11y-contrast)) :is(.game-foot, .st-foot, .gr-foot, .dl-foot) .btn.primary:hover:not(:disabled) { color: var(--accent-ink); background: var(--accent); border-color: transparent; box-shadow: var(--e1); filter: none; }
:where(html:not(.a11y-contrast)) :is(.game-foot, .st-foot, .gr-foot, .dl-foot) .btn.primary:focus-visible { box-shadow: var(--ring); }
/* dark mode gives filled primary keys dark text for the bright gradient; these quiet ones keep accent text on the soft tint */
:root[data-theme="dark"]:not(.a11y-contrast) :is(.game-foot, .st-foot, .gr-foot, .dl-foot, .so-list, .so-codes) .btn.primary:not(:hover) { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.a11y-contrast) :is(.game-foot, .st-foot, .gr-foot, .dl-foot, .so-list, .so-codes) .btn.primary:not(:hover) { color: var(--accent); } }
@media (max-width: 760px), (pointer: coarse) { :is(.game-foot, .st-foot, .gr-foot, .dl-foot) .btn { min-height: 44px; } }

/* ---------- the game card: a picture frame tinted with the game's colour ---------- */
.game-card { --gt: var(--accent); isolation: isolate; }
.g-match { --gt: var(--a2); } .g-sprint { --gt: var(--b2); } .g-memory { --gt: var(--c1); } .g-spell { --gt: var(--a1); }
.g-stories { --gt: var(--b1); } .g-dialogues { --gt: var(--c2); } .g-grammar { --gt: var(--a2); } .g-cafe { --gt: var(--b2); }
.game-card > :is(img, svg, .sp-card-art, [class*="-art"]):first-child {
  display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 9; margin: 0 0 var(--sp-1); padding: 0; box-sizing: border-box;
  object-fit: contain; object-position: 50% 50%; transform: none;
}
:where(html:not(.a11y-contrast)) .game-card > :is(img, svg, .sp-card-art, [class*="-art"]):first-child { border-radius: var(--r-sm); background: none; }
.game-card > svg:first-child { padding: 12% 15%; }
/* the frame is drawn behind the picture, so the white backdrop of Polly's studio photos melts into it (multiply) */
.game-card:has(> :is(img, svg, .sp-card-art, [class*="-art"]):first-child)::before {
  content: ""; position: absolute; z-index: -1; inset-block-start: var(--sp-5); inset-inline: var(--sp-5); aspect-ratio: 16 / 9; pointer-events: none;
}
:where(html:not(.a11y-contrast)) .game-card:has(> :is(img, svg, .sp-card-art, [class*="-art"]):first-child)::before { border-radius: var(--r-sm); background: color-mix(in srgb, var(--gt) 10%, var(--surface)); }
:where(html:not(.a11y-contrast)) .game-card > img:first-child { mix-blend-mode: multiply; }
:root[data-theme="dark"]:not(.a11y-contrast) .game-card:has(> img:first-child)::before { background: color-mix(in srgb, var(--ink) 86%, var(--gt)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.a11y-contrast) .game-card:has(> img:first-child)::before { background: color-mix(in srgb, var(--ink) 86%, var(--gt)); } }
/* dark theme: the photo is not dimmed, so its white backdrop still melts into the light frame */
:root[data-theme="dark"]:not(.a11y-contrast) .game-card > img:first-child { filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.a11y-contrast) .game-card > img:first-child { filter: none; } }
:where(html:not(.a11y-contrast)) .game-card .game-art .dim { fill: var(--surface); }
:root[data-theme="dark"]:not(.a11y-contrast) .game-card .game-art .dim { fill: color-mix(in srgb, var(--gt) 24%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.a11y-contrast) .game-card .game-art .dim { fill: color-mix(in srgb, var(--gt) 24%, var(--surface)); } }
/* "Say it": the microphone sits on a round key in the middle of the frame; the emoji before the title goes */
.game-card > .sp-card-art:first-child { display: grid; place-items: center; color: #fff; }
.game-card > .sp-card-art:first-child svg { width: 72px; height: 72px; padding: 18px; box-sizing: border-box; }
:where(html:not(.a11y-contrast)) .game-card > .sp-card-art:first-child svg { border-radius: 50%; background: var(--grad); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 85%, transparent); }
:root[data-theme="dark"] .game-card > .sp-card-art:first-child { color: #0a0e1a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-card > .sp-card-art:first-child { color: #0a0e1a; } }
.game-card > h2 > span[aria-hidden="true"]:first-child { display: none; }
/* phones: a game is a compact row, the picture beside the title */
@media (max-width: 560px) {
  .game-grid { gap: var(--sp-3); }
  .game-card:has(> :is(img, svg, .sp-card-art, [class*="-art"]):first-child) { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-content: start; gap: var(--sp-1) var(--sp-4); padding: var(--sp-4); }
  .game-card > * { grid-column: 2; }
  .game-card > :is(img, svg, .sp-card-art, [class*="-art"]):first-child { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 88px; height: 88px; aspect-ratio: 1; margin: 0; }
  .game-card > svg:first-child { padding: 22px 10px; }
  .game-card > .sp-card-art:first-child svg { width: 52px; height: 52px; padding: 13px; }
  .game-card:has(> :is(img, svg, .sp-card-art, [class*="-art"]):first-child)::before { inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4); inset-inline-end: auto; width: 88px; aspect-ratio: 1; }
  .game-card > h2 { align-self: end; }
  .game-card > p { align-self: start; -webkit-line-clamp: 2; line-clamp: 2; }
  .game-card > .game-foot { grid-column: 1 / -1; margin-top: var(--sp-3); padding-top: var(--sp-3); }
}

/* ---------- the video card: the thumbnail in the same frame ---------- */
.vid-card { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); overflow: hidden; text-align: start; font: inherit; color: var(--ink); cursor: pointer; }
.vid-thumb { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
:where(html:not(.a11y-contrast)) .vid-thumb { border-radius: var(--r-sm); background: var(--surface-2); }
.vid-play { width: 48px; height: 48px; }
.vid-play svg { width: 22px; height: 22px; }
@media (hover: hover) { .vid-card:hover .vid-play { transform: scale(1.06); } }
html:is(.pref-calm, .pref-easy) .vid-card:hover .vid-play { transform: none; }
@media (prefers-reduced-motion: reduce) { .vid-card:hover .vid-play { transform: none; } }
:where(html:not(.a11y-contrast)) .vid-len { padding: 3px 7px; border-radius: 6px; font: 600 .75rem/1.2 var(--font-ui); background: rgb(8 11 24 / .78); }
.vid-body { display: grid; align-content: start; gap: var(--sp-2); flex: 1; min-width: 0; padding: 0 var(--sp-1) var(--sp-1); }
.vid-body strong { font: 600 1.0625rem/1.35 var(--font-target); letter-spacing: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
:where(html:not(.a11y-contrast)) .vid-body strong { color: var(--ink); }
.vid-tags { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.vid-tags .muted.small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.vid-body > .muted.small { font-size: var(--fs-sm); }
@media (max-width: 560px) {
  .vid-grid { gap: var(--sp-3); }
  .vid-card { flex-direction: row; align-items: flex-start; padding: var(--sp-3); }
  .vid-thumb { width: 132px; }
  .vid-body { gap: 6px; padding: 2px 0 0; }
  .vid-body strong { font-size: .95rem; }
  .vid-play { width: 34px; height: 34px; }
  .vid-play svg { width: 16px; height: 16px; }
}

/* ---------- the book card (the cover keeps its own tilt under the pointer) ---------- */
.bk-card { gap: var(--sp-4); padding: var(--sp-4); align-items: stretch; min-width: 0; }
.bk-info { gap: 6px; }
.bk-info h2 { margin-top: var(--sp-1); }
.bk-row { gap: 6px; }
.bk-card .bk-bar { flex: none; height: 6px; margin-top: auto; overflow: hidden; }
:where(html:not(.a11y-contrast)) .bk-card .bk-bar { border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* =====================================================================
   4. Filters and switches: chips, tabs, the segmented switch, the sort menu
   ===================================================================== */
:is(.videos, .st-lib, .dl-lib, .plan-builder, .so-duel) .chips { gap: var(--sp-2); }
:is(.videos, .st-lib, .dl-lib, .plan-builder, .so-duel) .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-4); font-size: .9rem; line-height: 1.2; }
:is(.videos, .st-lib, .dl-lib, .plan-builder, .so-duel) .chip .num { font-family: var(--font-target); font-size: .82em; font-weight: 500; opacity: 1; }
/* a chosen level chip: the level colour darkened like .lv-chip (css/a11y.css), so its light text reads */
:where(html:not(.a11y-contrast)) :is(.plan-builder .chip.lv[aria-checked="true"], .st-lib .chip.lvf[aria-pressed="true"]) {
  color: var(--bg); background: color-mix(in srgb, var(--lv, var(--accent)) var(--chip-dim, 74%), #000); border-color: transparent;
}
@media (pointer: coarse) { :is(.videos, .st-lib, .dl-lib, .plan-builder, .so-duel) .chip { min-height: 44px; } }
/* phones: one row of chips that scrolls sideways and fades out at its end */
@media (max-width: 760px) {
  .videos > .topic-chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 2px var(--sp-2); padding-inline-end: var(--sp-8);
    -webkit-mask-image: linear-gradient(var(--pg-to-end), #000 calc(100% - 32px), transparent); mask-image: linear-gradient(var(--pg-to-end), #000 calc(100% - 32px), transparent);
  }
  .videos > .topic-chips::-webkit-scrollbar { display: none; }
  .videos > .topic-chips > .chip { flex: none; }
  .st-lib .bk-frow > .chips {
    flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 2px; padding-inline-end: var(--sp-8);
    -webkit-mask-image: linear-gradient(var(--pg-to-end), #000 calc(100% - 32px), transparent); mask-image: linear-gradient(var(--pg-to-end), #000 calc(100% - 32px), transparent);
  }
  .st-lib .bk-frow > .chips::-webkit-scrollbar { display: none; }
  .st-lib .bk-frow > .chips > .chip { flex: none; }
}
/* the library's filter panel */
.st-lib .bk-filters { gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
:where(html:not(.a11y-contrast)) .st-lib .bk-filters { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--e1); }
.st-lib .bk-filters { grid-template-columns: minmax(0, 1fr); }
.st-lib .bk-frow { gap: var(--sp-2) var(--sp-3); min-width: 0; }
.st-lib .bk-flbl { min-width: 4.5em; font-size: var(--fs-sm); font-weight: 600; }
:where(html:not(.a11y-contrast)) .st-lib .bk-flbl { color: var(--muted); }
.st-lib .bk-sort { min-height: 40px; padding-block: 0; padding-inline: .95em 2.4em; font: 500 .9rem/1.2 var(--font-ui); }
:where(html:not(.a11y-contrast)) .st-lib .bk-sort {
  color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: 12px; box-shadow: var(--e1); background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23808aa6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 10px 7px; background-position: right .9em center;
}
:where(html[dir="rtl"]:not(.a11y-contrast)) .st-lib .bk-sort { background-position: left .9em center; }
.st-lib .bk-intbtn { margin-inline-start: auto; }
/* books or short stories: the same switch as .seg */
.st-lib .bk-tabs { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; }
:where(html:not(.a11y-contrast)) .st-lib .bk-tabs { border-radius: 12px; background: var(--surface-2); border: 1px solid var(--hairline); box-shadow: none; }
.st-lib .bk-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-4); font: 600 .9rem/1.2 var(--font-ui); }
:where(html:not(.a11y-contrast)) .st-lib .bk-tabs button { border-radius: 9px; color: var(--muted); transition: background-color var(--dur-1), color var(--dur-1); }
:where(html:not(.a11y-contrast)) .st-lib .bk-tabs button:hover { color: var(--ink); }
:where(html:not(.a11y-contrast)) .st-lib .bk-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--e1), 0 2px 6px -3px rgb(15 20 40 / .18); }
.st-lib .bk-tabs button .num { margin: 0; font: 600 .82rem/1 var(--font-target); opacity: 1; }
/* the league's day / week / all time switch */
.league .seg { display: inline-flex; flex: none; }
.league .seg button { min-height: 40px; padding: 0 var(--sp-4); font: 600 .875rem/1.2 var(--font-ui); }
@media (pointer: coarse) { :is(.st-lib .bk-tabs, .league .seg) button { min-height: 44px; } }

/* =====================================================================
   5. Section headings inside a page (library groups, book shelves)
   ===================================================================== */
:is(.gr-group, .dl-group, .bk-sec) { display: grid; gap: var(--sp-4); }
:is(.gr-group-h, .dl-group-h) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0 0; font: 600 var(--fs-h2)/1.25 var(--font-ui); letter-spacing: -.01em; }
.gr-group-h .gr-group-n { margin-inline-start: auto; font: 500 var(--fs-sm)/1.3 var(--font-ui); letter-spacing: 0; }
.bk-sech { margin: var(--sp-2) 0 0; font: 600 var(--fs-h2)/1.25 var(--font-ui); letter-spacing: -.01em; }
.bk-secsub { margin: calc(-1 * var(--sp-2)) 0 0; font-size: var(--fs-sm); }
.bk-fyh { align-items: flex-end; }

/* =====================================================================
   6. Panels on these pages: one padding, titles in the h3 size
   ===================================================================== */
:is(.coach, .pf, .videos, .vplay) .panel, #view:has(> .so-hero) > .panel { gap: var(--sp-3); padding: var(--sp-6); align-content: start; }
:is(.coach, .pf, .videos, .vplay) .panel > h2, #view:has(> .so-hero) > .panel > h2 { margin: 0; font: 600 var(--fs-h3)/1.3 var(--font-ui); letter-spacing: -.005em; }
@media (max-width: 560px) { :is(.coach, .pf, .videos, .vplay) .panel, #view:has(> .so-hero) > .panel { padding: var(--sp-5) var(--sp-4); } }
/* a list row inside a panel: a quiet well */
:where(html:not(.a11y-contrast)) :is(.coach .hard-words li, #view:has(> .so-hero) .so-list li) { border-radius: var(--r-sm); background: var(--surface-2); }

/* =====================================================================
   7. Videos: the course panels and the player page
   ===================================================================== */
.videos > .vcourse { margin: 0; }
.vcourse-head { gap: var(--sp-3); }
.vcourse-head h2 { font: 600 var(--fs-h3)/1.3 var(--font-ui); }
.vcourse-list { gap: var(--sp-2); }
.vc-item { min-height: 56px; padding: var(--sp-2) 14px; gap: var(--sp-3); font: inherit; text-align: start; }
:where(html:not(.a11y-contrast)) .vc-item { color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: none; transition: border-color var(--dur-1), box-shadow var(--dur-2) var(--ease); }
:where(html:not(.a11y-contrast)) .vc-item:hover { border-color: var(--accent-line); box-shadow: var(--e1); }
:where(html:not(.a11y-contrast)) .vc-item.next { border-color: var(--accent); box-shadow: var(--ring); }
.vc-num { width: 32px; height: 32px; font: 600 .9rem/1 var(--font-target); }
:where(html:not(.a11y-contrast)) .vc-num { background: var(--surface-2); color: var(--ink-2); }
:where(html:not(.a11y-contrast)) .vc-item.done .vc-num { background: var(--ok); color: #fff; }
.vc-body strong { font-weight: 600; font-size: .95rem; }
.vc-credit { padding: var(--sp-3) var(--sp-4); }
:where(html:not(.a11y-contrast)) .vc-credit { border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface-2); }
.vplay { gap: var(--sp-4); }
:where(html:not(.a11y-contrast)) .vplay .vframe { border-radius: var(--r-lg); box-shadow: var(--e3); }
:where(html:not(.a11y-contrast)) .vplay .vc-bar { border-radius: var(--r); background: var(--surface-2); }
:where(html:not(.a11y-contrast)) .vplay .vq-card { border-radius: var(--r-lg); box-shadow: var(--e4); }

/* =====================================================================
   8. Coach: four key numbers, skill bars, words to fix
   ===================================================================== */
.coach > .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); width: auto; max-width: none; margin: 0; }
.coach > .stat-grid > div { display: grid; align-content: start; gap: 6px; padding: var(--sp-4) var(--sp-5); }
:where(html:not(.a11y-contrast)) .coach > .stat-grid > div { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--e1); }
.coach > .stat-grid dt { font: 500 var(--fs-sm)/1.35 var(--font-ui); }
.coach > .stat-grid dd { margin: 0; font: 700 1.875rem/1.1 var(--font-target); letter-spacing: -.01em; }
:where(html:not(.a11y-contrast)) .coach > .stat-grid dd { color: var(--ink); }
:where(html:not(.a11y-contrast)) .coach > .stat-grid dd.up { color: var(--ok); }
:where(html:not(.a11y-contrast)) .coach > .stat-grid dd.down { color: var(--bad); }
.coach-grid { gap: var(--sp-5); }
.coach .skill-bars { gap: var(--sp-3); margin: var(--sp-1) 0 0; }
.coach .skill-bars li { grid-template-columns: 9em minmax(0, 1fr) 3.2em; gap: var(--sp-3); font-size: .9375rem; }
:where(html:not(.a11y-contrast)) .coach .skill-bars li { color: var(--ink-2); }
.coach .skill-bars li > .num { text-align: end; font: 600 .9375rem/1 var(--font-target); }
:where(html:not(.a11y-contrast)) .coach .skill-bars li > .num { color: var(--ink); }
.coach .skill-bars .sb { height: 8px; }
:where(html:not(.a11y-contrast)) .coach .skill-bars .sb { border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 8%, transparent); }
:where(html:not(.a11y-contrast)) .coach .skill-bars .sb span { background: var(--accent); }
:where(html:not(.a11y-contrast)) .coach .skill-bars li.weak .sb span { background: var(--warn); }
.coach .coach-tip { align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; }
:where(html:not(.a11y-contrast)) .coach .coach-tip { border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); }
.coach .coach-tip p { margin: 0; }
:where(html:not(.a11y-contrast)) .coach .coach-tip strong { color: var(--ink); }
.coach .coach-tip img { width: 44px; height: 44px; object-fit: cover; }
:where(html:not(.a11y-contrast)) .coach .coach-tip img { border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.coach .hard-words { gap: var(--sp-2); margin: var(--sp-1) 0 0; }
.coach .hard-words li { gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.coach .hard-words .tr { font-size: var(--fs-sm); }
:where(html[dir="rtl"]) .coach .hard-words .tgt { text-align: right; }
:where(html:not(.a11y-contrast)) .coach .bad-pill { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 24%, transparent); }
.coach .personal-head h2 { margin: 0; font: 600 var(--fs-h3)/1.3 var(--font-ui); }
@media (max-width: 760px) {
  .coach > .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .coach > .stat-grid > div { padding: var(--sp-3) var(--sp-4); }
  .coach > .stat-grid dd { font-size: 1.5rem; }
}
@media (max-width: 400px) { .coach .skill-bars li { grid-template-columns: 6.5em minmax(0, 1fr) 2.8em; gap: var(--sp-2); font-size: .875rem; } }

/* the week chart (personal area): the same bars and lines as the rest */
:where(html:not(.a11y-contrast)) .week-goal { border-top: 1.5px dashed color-mix(in srgb, var(--ok) 55%, transparent); }
:where(html:not(.a11y-contrast)) .wk-bar { border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); }
:where(html:not(.a11y-contrast)) .wk-col.hit .wk-bar { background: var(--ok); }
:where(html:not(.a11y-contrast)) .wk-col.today .wk-bar { outline: 0; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.wk-val { font: 600 .75rem/1.2 var(--font-target); }
.wk-day { font-size: var(--fs-xs); }

/* =====================================================================
   9. League: one card of rows, the competition card, medals
   ===================================================================== */
.league { gap: var(--sp-5); }
.league-head { align-items: flex-end; gap: var(--sp-4); }
.league .lb-body { gap: var(--sp-4); }
.league .lb-list { gap: 0; padding: 0; overflow: hidden; }
:where(html:not(.a11y-contrast)) .league .lb-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--e2); }
.league .lb-row { position: relative; min-height: 60px; gap: var(--sp-3); padding: 10px var(--sp-4); }
:where(html:not(.a11y-contrast)) .league .lb-row { background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0; }
:where(html:not(.a11y-contrast)) .league .lb-row + .lb-row { border-top: 1px solid var(--hairline); }
:where(html:not(.a11y-contrast)) .league .lb-row.ar-top { background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
.league .lb-row.me { container-type: normal; max-width: none; width: auto; margin: 0; }
:where(html:not(.a11y-contrast)) .league .lb-row.me { background: var(--accent-soft); }
.league .lb-row.me::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; }
:where(html:not(.a11y-contrast)) .league .lb-row.me::before { background: var(--accent); }
.league .lb-rank { font: 700 .95rem/1 var(--font-target); }
.league .lb-row .avatar { width: 36px; height: 36px; }
.league .lb-name { font-weight: 500; }
:where(html:not(.a11y-contrast)) .league .lb-name .pf-link { border-bottom-color: transparent; }
:where(html:not(.a11y-contrast)) .league .lb-name .pf-link:hover { color: var(--accent); border-bottom-color: currentColor; }
:where(html:not(.a11y-contrast)) .league .lb-name .pill { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.league .lb-xp { min-width: 3ch; text-align: end; font: 700 1rem/1 var(--font-target); }
/* medals: the same metal as the home page's competition card */
.league .medal { width: 30px; height: 30px; font: 700 .85rem/1 var(--font-target); color: #3b2a00; }
:where(html:not(.a11y-contrast)) .league .medal { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35), 0 2px 6px -2px rgb(120 80 0 / .5); background: radial-gradient(circle at 35% 30%, #fff3c4 0 16%, #f2b02a 55%, #b9780a 100%); }
.league .medal.m2 { color: #262c38; }
:where(html:not(.a11y-contrast)) .league .medal.m2 { background: radial-gradient(circle at 35% 30%, #fff 0 16%, #c9d1de 55%, #8a94a6 100%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35), 0 2px 6px -2px rgb(60 70 90 / .5); }
.league .medal.m3 { color: #3a1d08; }
:where(html:not(.a11y-contrast)) .league .medal.m3 { background: radial-gradient(circle at 35% 30%, #ffe2c8 0 16%, #d98b4f 55%, #9a5524 100%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .3), 0 2px 6px -2px rgb(110 50 10 / .5); }
/* the competition: time left and the prizes */
.league .ar-card { gap: var(--sp-4) var(--sp-6); padding: var(--sp-5) var(--sp-6); }
:where(html:not(.a11y-contrast)) .league .ar-card { border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); border-radius: var(--r-lg); background: var(--gold-soft); box-shadow: var(--e1); }
.league .ar-clock { gap: 4px; }
.league .ar-clock strong { font: 600 var(--fs-sm)/1.3 var(--font-ui); }
:where(html:not(.a11y-contrast)) .league .ar-clock strong { color: var(--gold-ink); }
.league .ar-clock .num { font: 700 1.625rem/1.15 var(--font-target); }
:where(html:not(.a11y-contrast)) .league .ar-clock .num { color: var(--ink); }
.league .ar-prizes li { gap: 6px; padding-block: 4px; padding-inline: 4px 12px; }
:where(html:not(.a11y-contrast)) .league .ar-prizes li { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); }
.league .ar-prizes .medal { width: 26px; height: 26px; font-size: .78rem; }
.league .ar-last { gap: 6px var(--sp-4); padding: var(--sp-3) var(--sp-4); }
:where(html:not(.a11y-contrast)) .league .ar-last { border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface-2); }
.league :is(.lb-me, .lb-cta) { gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.league .lb-me .num { font-family: var(--font-target); font-weight: 600; }
:where(html:not(.a11y-contrast)) .league .lb-skel { height: 60px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--hairline); opacity: .7; }
.league .lb-skel { position: relative; overflow: hidden; } /* room for the ui-kit loading sweep */
.league .lb-body > .empty { margin: 0 auto; }
@media (max-width: 640px) {
  .league-head .seg { display: flex; width: 100%; }
  .league-head .seg button { flex: 1 1 0; padding-inline: var(--sp-2); }
  .league .ar-card { padding: var(--sp-4); }
  .league .lb-row { gap: 10px; padding-inline: var(--sp-3); }
}

/* =====================================================================
   10. The study plan: the questions in one card, the plan in a card that stays in view
   ===================================================================== */
.plan-builder { padding-block: 0; }
.plan-builder > h1 { margin: 0; }
.plan-builder .pb-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-6); align-items: start; }
.plan-builder .pb-form { gap: var(--sp-3); padding: var(--sp-6); }
:where(html:not(.a11y-contrast)) .plan-builder .pb-form { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--e2); }
.plan-builder .pb-form h2 { margin: var(--sp-3) 0 0; padding-top: var(--sp-5); font: 600 1rem/1.35 var(--font-ui); letter-spacing: 0; }
:where(html:not(.a11y-contrast)) .plan-builder .pb-form h2 { border-top: 1px solid var(--hairline); color: var(--ink); }
.plan-builder .pb-form h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.plan-builder .pace-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--sp-3); }
.plan-builder .pace-card { gap: 6px; min-height: 44px; padding: 14px var(--sp-4); font: inherit; }
:where(html:not(.a11y-contrast)) .plan-builder .pace-card { color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r); box-shadow: var(--e1); transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1); }
:where(html:not(.a11y-contrast)) .plan-builder .pace-card:hover { border-color: var(--accent-line); }
:where(html:not(.a11y-contrast)) .plan-builder .pace-card[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ring); }
.plan-builder .pace-card strong { font-size: 1rem; font-weight: 600; }
.plan-builder .pace-card .muted.small { font-size: var(--fs-xs); line-height: 1.4; }
.plan-builder .pace-meter { direction: inherit; }
.plan-builder .pace-meter i { width: 16px; height: 6px; }
:where(html:not(.a11y-contrast)) .plan-builder .pace-meter i { border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
:where(html:not(.a11y-contrast)) .plan-builder .pace-meter i.on { background: var(--accent); }
.plan-builder .chips.days .chip { min-width: 44px; padding-inline: var(--sp-2); }
.plan-builder .chip.lv { font-family: var(--font-target); font-weight: 700; }
.plan-builder .pb-result { top: var(--sp-6); grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-6); }
:where(html:not(.a11y-contrast)) .plan-builder .pb-result { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--e2); }
.plan-builder .pb-result h2 { margin: 0; font: 600 var(--fs-h3)/1.3 var(--font-ui); }
.plan-builder .pb-sum { margin: 0; }
:where(html:not(.a11y-contrast)) .plan-builder .pb-sum { color: var(--ink-2); }
.plan-builder .pb-week { gap: 6px; }
.plan-builder .pb-week li { padding: var(--sp-2) 2px; }
.plan-builder .pb-week li small { font-size: .6875rem; line-height: 1.25; }
:where(html:not(.a11y-contrast)) .plan-builder .pb-week li { border-radius: 10px; background: var(--surface-2); }
:where(html:not(.a11y-contrast)) .plan-builder .pb-week li.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
:where(html:not(.a11y-contrast)) .plan-builder .pb-week li.on span { color: var(--accent); }
:where(html:not(.a11y-contrast)) .plan-builder .pb-week li.today { outline: 2px solid var(--accent); outline-offset: 1px; }
/* phones: one strip of seven days; the colour says lesson or rest, the words stay for screen readers */
@media (max-width: 460px) {
  .plan-builder .pb-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .plan-builder .pb-week li { min-height: 44px; align-content: center; padding: 6px 0; }
  .plan-builder .pb-week li small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* the level name wraps and the date keeps its line: Spanish level names are long ("Начальный уровень — первый этап"),
   and a name that cannot wrap widened the whole card past a phone screen */
.plan-builder .pb-timeline li { grid-template-columns: auto minmax(0, 1fr) max-content; padding: 10px 0; }
.plan-builder .pb-result :is(h2, .pb-sum, .pb-timeline li > span) { overflow-wrap: break-word; }
:where(html:not(.a11y-contrast)) .plan-builder .pb-timeline li { border-bottom: 1px solid var(--hairline); }
.plan-builder .pb-timeline li:last-child { border-bottom: 0; }
/* phones: the date goes under the level name, so the name keeps whole words */
@media (max-width: 460px) {
  .plan-builder .pb-timeline li { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .plan-builder .pb-timeline li > :last-child { grid-column: 2; text-align: start; }
}
/* the tablet header stays on top, so the plan card waits below it */
@media (min-width: 761px) and (max-width: 1179.98px) { .plan-builder .pb-result { top: 132px; } }
@media (max-width: 760px) {
  .plan-builder .pb-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
  .plan-builder :is(.pb-form, .pb-result) { padding: var(--sp-5) var(--sp-4); }
}

/* =====================================================================
   11. The dictionary: results as cards with the word in the English face
   ===================================================================== */
.dict { gap: var(--sp-5); }
.dict .dict-list { gap: var(--sp-3); }
.dict .dict-item { padding: 18px var(--sp-5); }
:where(html:not(.a11y-contrast)) .dict .dict-item { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--e1); }
.dict .di-top { gap: var(--sp-3); }
.dict .di-word { gap: 10px; font: 700 1.375rem/1.2 var(--font-target); }
.dict .di-tr { margin: 6px 0 0; font-size: 1.0625rem; font-weight: 500; }
:where(html:not(.a11y-contrast)) .dict .di-tr { color: var(--ink-2); }
.dict .di-img { width: 88px; height: 88px; }
:where(html:not(.a11y-contrast)) .dict .di-img { border-radius: var(--r); }
.dict .word-detail p { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); line-height: 1.55; }
.dict .di-acts { gap: var(--sp-2) var(--sp-4); margin-top: 14px; padding-top: var(--sp-3); }
:where(html:not(.a11y-contrast)) .dict .di-acts { border-top: 1px solid var(--hairline); }
.dict .linkish { display: inline-flex; align-items: center; min-height: 40px; padding-block: 0; }
#dict-res > p.muted { margin: var(--sp-2) 0 0; text-align: center; }
@media (max-width: 560px) { .dict .dict-item { padding: var(--sp-4); } .dict .di-img { width: 72px; height: 72px; } }

/* =====================================================================
   12. Tips: numbered cards
   ===================================================================== */
.tips { display: block; }
.tips > h1 { margin: 0; }
.tips .tip-list { gap: var(--sp-4); margin: var(--sp-6) 0 0; }
.tips .tip { gap: var(--sp-2); padding: 22px var(--sp-6); padding-inline-start: 76px; }
.tips .tip::before { inset-inline-start: 22px; top: 16px; width: 36px; height: 36px; font: 700 .9375rem/1 var(--font-target); }
:where(html:not(.a11y-contrast)) .tips .tip::before { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tips .tip h2 { margin: 0; font: 600 var(--fs-h3)/1.35 var(--font-ui); letter-spacing: -.005em; }
.tips .tip p { margin: 0; max-width: 68ch; line-height: 1.65; }
:where(html:not(.a11y-contrast)) .tips .tip > p:not(.tip-site) { color: var(--ink-2); }
.tips .tip-site { max-width: none; margin-top: var(--sp-1); padding: 10px 14px; font-size: var(--fs-sm); line-height: 1.55; }
:where(html:not(.a11y-contrast)) .tips .tip-site { border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); }
.tips .tip-site .tag { margin-inline-end: 6px; }
@media (max-width: 560px) {
  .tips .tip { padding: 18px var(--sp-4); padding-inline-start: 60px; }
  .tips .tip::before { inset-inline-start: 16px; top: 14px; width: 32px; height: 32px; font-size: .875rem; }
}

/* =====================================================================
   13. Legal pages: a reading column of about 72 characters
   ===================================================================== */
.legal { display: block; width: 100%; max-width: 72ch; margin-inline: auto; padding-block: 0 var(--sp-6); }
.legal > h1 { margin: 0; }
.legal > h1 + .muted { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.legal section { padding-block: var(--sp-6); }
.legal > section:first-of-type, .legal > .lead + * { margin-top: var(--sp-4); }
:where(html:not(.a11y-contrast)) .legal section { border-bottom: 1px solid var(--hairline); }
:where(html:not(.a11y-contrast)) .legal > section:last-of-type { border-bottom: 0; }
.legal h2 { margin: 0 0 var(--sp-3); font: 600 var(--fs-h3)/1.35 var(--font-ui); letter-spacing: -.005em; }
.legal :is(p, li) { font-size: 1rem; line-height: 1.75; }
:where(html:not(.a11y-contrast)) .legal section :is(p, li) { color: var(--ink-2); }
.legal section p { margin: 0 0 var(--sp-3); }
.legal section p:last-child { margin-bottom: 0; }
.legal ul { display: grid; gap: 6px; margin: 0 0 var(--sp-3); padding-inline-start: 1.25em; }
.legal li::marker { color: var(--faint); }
.legal .legal-en { margin-top: var(--sp-4); }
:where(html:not(.a11y-contrast)) .legal .legal-en { border-top: 1px solid var(--hairline-strong); }
.legal .legal-links { gap: var(--sp-2); margin: var(--sp-6) 0 0; }
/* the contact form */
.legal .ct-form { gap: 6px; margin: var(--sp-6) 0; padding: var(--sp-6); }
.legal .ct-form label { margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; }
:where(html:not(.a11y-contrast)) .legal .ct-form label { color: var(--ink-2); }
.legal .ct-form label:first-child { margin-top: 0; }
.legal .ct-form :is(input, select, textarea) { min-height: 46px; padding: .6em .9em; font: 400 1rem/1.4 var(--font-ui); }
.legal .ct-form select { padding-inline: .9em 2.4em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23808aa6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 10px 7px; background-position: right .95em center; }
[dir="rtl"] .legal .ct-form select { background-position: left .95em center; }
.legal .ct-form textarea { min-height: 140px; }
:where(html:not(.a11y-contrast)) .legal .ct-form :is(input, select, textarea) { color: var(--ink); background-color: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 12px; box-shadow: inset 0 1px 2px rgb(15 20 40 / .04); }
:where(html:not(.a11y-contrast)) .legal .ct-form :is(input, select, textarea):focus-visible { border-color: var(--accent); box-shadow: var(--ring); }
.legal .ct-form .btn { margin-top: var(--sp-3); }
@media (max-width: 560px) { .legal .ct-form { padding: var(--sp-5) var(--sp-4); } }

/* =====================================================================
   14. Public profiles: a soft league wash instead of the stripe, quiet number and medal tiles
   ===================================================================== */
.pf { gap: var(--sp-5); }
.pf .pf-card { gap: var(--sp-6); padding: var(--sp-6); }
.pf .pf-card::before { content: none; }
:where(html:not(.a11y-contrast)) .pf .pf-card { background: linear-gradient(180deg, color-mix(in srgb, var(--lg, var(--accent)) 12%, var(--surface)), var(--surface) 72%); }
:where(html:not(.a11y-contrast)) .pf .avatar.pf-av { box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--hairline-strong), var(--e2); }
.pf .pf-id h1 { font: 700 var(--fs-h1)/1.15 var(--font-ui); letter-spacing: -.02em; }
.pf .pf-level { padding: 6px var(--sp-3); }
:where(html:not(.a11y-contrast)) .pf .pf-level { border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
:where(html:not(.a11y-contrast)) .pf .pf-level small { color: var(--muted); }
.pf .stat-grid { gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); }
.pf .stat-grid > div { display: grid; gap: 4px; padding: var(--sp-3) 14px; }
:where(html:not(.a11y-contrast)) .pf .stat-grid > div { border-radius: var(--r); background: var(--surface-2); }
.pf .stat-grid dt { font-size: var(--fs-xs); font-weight: 500; }
.pf .stat-grid dd { margin: 0; font: 700 1.5rem/1.15 var(--font-target); }
.pf .md-grid { gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.pf .md-card { gap: 4px; padding: var(--sp-4) 10px var(--sp-3); }
:where(html:not(.a11y-contrast)) .pf .md-card { border: 1px solid transparent; border-radius: var(--r); background: var(--surface-2); }
:where(html:not(.a11y-contrast)) .pf .md-card:is(.t-gold, .t-platinum) { background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)); }
.pf .md-bar { height: 6px; }
:where(html:not(.a11y-contrast)) .pf .md-bar { border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 8%, transparent); }
:where(html:not(.a11y-contrast)) .pf .md-bar i { background: var(--accent); }
@media (max-width: 560px) { .pf .pf-card { gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); } .pf .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   15. Empty states: Polly, one title, one line, one action
   ===================================================================== */
.empty { width: 100%; max-width: 520px; gap: var(--sp-3); margin: var(--sp-10) auto; padding: var(--sp-10) var(--sp-8); }
.empty .mascot-img { width: 112px; height: 112px; margin: 0 0 var(--sp-2); }
.empty :is(h1, h2) { margin: 0; font: 700 var(--fs-h2)/1.25 var(--font-ui); letter-spacing: -.012em; }
.empty > p { margin: 0; max-width: 44ch; font-size: var(--fs-lg); line-height: 1.55; }
.empty .actions { margin-top: var(--sp-2); }
.empty .actions:empty { display: none; }
@media (max-width: 560px) { .empty { margin-block: var(--sp-6); padding: var(--sp-8) var(--sp-5); } .empty .mascot-img { width: 96px; height: 96px; } .empty > p { font-size: 1rem; } }

/* =====================================================================
   16. Play screens: a calm header (close, title, timer) and tidy boards
   ===================================================================== */
.play { width: 100%; max-width: 680px; gap: var(--sp-5); }
.play-head { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; }
.play-head h1 { flex: 1; min-width: 0; margin: 0; font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.2 var(--font-ui); letter-spacing: -.01em; overflow-wrap: anywhere; }
.play-head h1 > span[aria-hidden="true"]:first-child { display: none; }
/* the close key: a drawn cross instead of the × letter */
.play-head > .icon-btn { flex: none; width: 44px; height: 44px; font-size: 0; }
.play-head > .icon-btn::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico-close) center / contain no-repeat; mask: var(--ico-close) center / contain no-repeat; }
:where(html:not(.a11y-contrast)) .play-head > .icon-btn { border-radius: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hairline-strong); box-shadow: var(--e1); }
:where(html:not(.a11y-contrast)) .play-head > .icon-btn:hover { color: var(--ink); border-color: var(--accent-line); background: var(--surface); }
/* the timer, the move count, the round */
.play-head > :is(.timer, .sp-count) { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 60px; min-height: 40px; padding: 0 14px; font: 700 1.0625rem/1 var(--font-target); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(html:not(.a11y-contrast)) .play-head > :is(.timer, .sp-count) { border-radius: var(--r-pill); color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.vplay .play-head > .lv-chip { flex: none; }
/* match */
.play .match-board { gap: var(--sp-3); }
.play .match-board .col { gap: var(--sp-3); }
.play .m-tile { min-height: 60px; padding: 10px 14px; font: 500 1.0625rem/1.3 var(--font-ui); overflow-wrap: anywhere; }
:where(html:not(.a11y-contrast)) .play .m-tile { color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 14px; box-shadow: var(--e1); transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1), opacity .3s ease; }
@media (hover: hover) { :where(html:not(.a11y-contrast)) .play .m-tile:hover:not(:disabled) { border-color: var(--accent-line); box-shadow: var(--e2); } }
:where(html:not(.a11y-contrast)) .play .m-tile.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ring); }
:where(html:not(.a11y-contrast)) .play .m-tile.matched { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); box-shadow: none; opacity: .55; }
/* memory: a quiet card back with Polly's sparkle */
.play .mem-board { gap: var(--sp-3); margin-top: 0; }
.play .mem-back::after { position: absolute; inset: 7px; width: auto; aspect-ratio: auto; border-radius: 10px; }
.play .mem-back::before { content: ""; width: 30%; aspect-ratio: 1; -webkit-mask: var(--ico-def) center / contain no-repeat; mask: var(--ico-def) center / contain no-repeat; }
:where(html:not(.a11y-contrast)) .play .mem-back { border-radius: 14px; background: var(--grad); box-shadow: var(--e2); }
:where(html:not(.a11y-contrast)) .play .mem-back::after { border: 1.5px solid rgb(255 255 255 / .3); }
:where(html:not(.a11y-contrast)) .play .mem-back::before { background: rgb(255 255 255 / .62); }
:root[data-theme="dark"]:not(.a11y-contrast) .play .mem-back::before { background: rgb(10 14 26 / .5); }
:root[data-theme="dark"]:not(.a11y-contrast) .play .mem-back::after { border-color: rgb(10 14 26 / .22); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.a11y-contrast) .play .mem-back::before { background: rgb(10 14 26 / .5); }
  :root:not([data-theme="light"]):not(.a11y-contrast) .play .mem-back::after { border-color: rgb(10 14 26 / .22); }
}
.play .mem-face { padding: var(--sp-2); font-size: 1rem; line-height: 1.3; }
:where(html:not(.a11y-contrast)) .play .mem-face { border-radius: 14px; background: var(--surface); border: 1px solid var(--hairline-strong); box-shadow: var(--e1); }
:where(html:not(.a11y-contrast)) .play .mem.found .mem-face { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
/* spelling: the word card, letter boxes, letter keys */
.play > .prompt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); min-height: 120px; padding: 28px var(--sp-5); font-size: 1.5rem; text-align: center; }
:where(html:not(.a11y-contrast)) .play > .prompt { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--e2); }
.play .spell-slots { gap: 6px; margin: 0; }
.play .slot { width: clamp(24px, 7.6vw, 44px); height: auto; aspect-ratio: 5 / 6; font: 700 clamp(1.1rem, 4.4vw, 1.6rem)/1 var(--font-target); }
:where(html:not(.a11y-contrast)) .play .slot { border: 1.5px solid var(--hairline-strong); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: var(--e1); }
:where(html:not(.a11y-contrast)) .play .slot.ok { border-color: var(--ok); background: var(--ok-soft); }
:where(html:not(.a11y-contrast)) .play .slot.shown { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.play .spell-bank { gap: var(--sp-2); }
.play .spell-bank .tok { min-width: 48px; min-height: 52px; padding: 0 var(--sp-3); font: 700 1.25rem/1 var(--font-target); }
:where(html:not(.a11y-contrast)) .play .spell-bank .tok { border-radius: 12px; border: 1px solid var(--hairline-strong); border-bottom-width: 3px; background: var(--surface); box-shadow: var(--e1); }
.play .spell-bank .tok:disabled { opacity: .3; }
.play > .actions { margin-top: 0; }
@media (max-width: 400px) { .play .spell-slots { gap: 4px; } .play .spell-bank .tok { min-width: 44px; min-height: 48px; } }
/* sprint: the word card and the two big answers (keep their meaning colours) */
.play .sprint-score { font-size: var(--fs-sm); }
.play .sprint-score strong { font: 700 2.25rem/1 var(--font-target); }
:where(html:not(.a11y-contrast)) .play .sprint-score strong { color: var(--ink); }
.play .sprint-card { gap: var(--sp-2); padding: 36px var(--sp-5); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2rem); }
:where(html:not(.a11y-contrast)) .play .sprint-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--e2); }
.play .sprint-card .native { font-size: 1.25rem; font-weight: 500; }
.play .sprint-btns { gap: var(--sp-3); margin-top: 0; }
.play .sprint-btns .btn { flex: 1 1 140px; max-width: 220px; min-width: 0; min-height: 56px; font-size: 1.1rem; }
:where(html:not(.a11y-contrast)) .play .sprint-btns .btn.rate-0 { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
:where(html:not(.a11y-contrast)) .play .sprint-btns .btn.rate-2 { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
:where(html:not(.a11y-contrast)) .play .sprint-btns .btn.rate-0:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
:where(html:not(.a11y-contrast)) .play .sprint-btns .btn.rate-2:hover:not(:disabled) { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
/* the result card */
#game-end:empty { display: none; }
.play .game-end { flex-direction: column; flex-wrap: nowrap; gap: var(--sp-2); padding: 28px var(--sp-6) var(--sp-6); text-align: center; }
:where(html:not(.a11y-contrast)) .play .game-end { border-radius: var(--r-xl); background: linear-gradient(180deg, color-mix(in srgb, var(--pg, var(--accent)) 8%, var(--surface)), var(--surface) 70%); }
:where(html.pref-easy:not(.a11y-contrast)) .play .game-end { background: var(--surface); }
.play .game-end > strong { font: 700 var(--fs-h2)/1.25 var(--font-ui); letter-spacing: -.012em; }
.play .game-end > .num { font: 700 1.75rem/1.2 var(--font-target); }
:where(html:not(.a11y-contrast)) .play .game-end > .num { color: var(--accent); }
.play .game-end > .btn { min-width: 200px; margin-top: var(--sp-3); }

/* =====================================================================
   17. Friends: neutral panels, selectable duel cards, quiet list actions
   ===================================================================== */
:where(html:not(.a11y-contrast)) #view:has(> .so-hero) > .panel:is(.so-duel, .so-invites) { border: 1px solid var(--hairline); }
:where(html:not(.a11y-contrast)) #view:has(> .so-hero) > .so-invites { border-color: var(--accent-line); box-shadow: var(--e2), 0 0 0 3px var(--accent-soft); }
.so-duel-head { gap: var(--sp-3); }
.so-duel-head h2 { font: 600 var(--fs-h3)/1.3 var(--font-ui); }
.so-duel-head p { margin: 2px 0 0; }
/* the lightning tile: a drawn bolt instead of the emoji */
.so-bolt { width: 44px; height: 44px; font-size: 0; }
.so-bolt::before { content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5H11l-1 8 8.5-11H12l1-8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5H11l-1 8 8.5-11H12l1-8z'/%3E%3C/svg%3E") center / contain no-repeat; }
:where(html:not(.a11y-contrast)) .so-bolt { border-radius: 12px; color: var(--gold-ink); background: var(--gold-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.so-step { gap: 10px; margin: var(--sp-5) 0 var(--sp-3); font: 600 1rem/1.35 var(--font-ui); }
.so-step .num { width: 26px; height: 26px; font: 700 .8rem/1 var(--font-target); }
:where(html:not(.a11y-contrast)) .so-step .num { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
/* duel kinds: selectable cards like the plan's pace cards */
.dg-grid { gap: var(--sp-3); }
.dg-card { gap: 10px; padding: 14px; }
:where(html:not(.a11y-contrast)) .dg-card { color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r); box-shadow: var(--e1); transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1); }
.dg-card:hover { transform: none; }
:where(html:not(.a11y-contrast)) .dg-card:hover { border-color: var(--accent-line); }
:where(html:not(.a11y-contrast)) .dg-card[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ring); }
:where(html:not(.a11y-contrast)) .dg-card[aria-checked="true"]::after { background: var(--accent); color: var(--accent-ink); }
.dg-icon { width: 40px; height: 40px; font-size: 1.25rem; }
:where(html:not(.a11y-contrast)) .dg-icon { border-radius: 12px; background: color-mix(in srgb, var(--lv, var(--accent)) 14%, var(--surface)); }
/* the game kinds get line icons in place of the emoji */
.dg-icon { --dgi: none; display: inline-grid; place-items: center; font-size: 0; }
.dg-icon::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--dgi) center / contain no-repeat; mask: var(--dgi) center / contain no-repeat; }
:where(html:not(.a11y-contrast)) .dg-icon { color: var(--accent); }
:is(.dg-card, .duel-game).dg-words .dg-icon { --dgi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V5h16v2M12 5v14M9 19h6'/%3E%3C/svg%3E"); }
:is(.dg-card, .duel-game).dg-listen .dg-icon { --dgi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Cpath d='M4 15h3v5H5.5A1.5 1.5 0 0 1 4 18.5zM20 15h-3v5h1.5a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E"); }
:is(.dg-card, .duel-game).dg-back .dg-icon { --dgi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3.5-3.5M20 16H6l3.5 3.5'/%3E%3C/svg%3E"); }
:is(.dg-card, .duel-game).dg-gap .dg-icon { --dgi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4M17 12h4'/%3E%3Crect x='9' y='8.5' width='6' height='7' rx='1.5'/%3E%3C/svg%3E"); }
:is(.dg-card, .duel-game).dg-spell .dg-icon { --dgi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.2-1L19 8.2 15.8 5 5 15.8z'/%3E%3Cpath d='M13.8 7l3.2 3.2'/%3E%3C/svg%3E"); }
.dg-text strong { font-weight: 600; }
:where(html:not(.a11y-contrast)) .so-box { border-radius: var(--r); background: var(--surface-2); }
.so-box { gap: var(--sp-3); padding: var(--sp-4); }
#view:has(> .so-hero) .so-list { gap: var(--sp-2); }
#view:has(> .so-hero) .so-list li { gap: 10px var(--sp-3); padding: var(--sp-2) var(--sp-3); }
#view:has(> .so-hero) .so-duel h3:not(.so-step) { margin: var(--sp-5) 0 var(--sp-2); font: 600 1rem/1.35 var(--font-ui); }
/* list actions are quiet; the duel's own key stays the main one */
:where(html:not(.a11y-contrast)) #view:has(> .so-hero) :is(.so-list, .so-codes) .btn.primary { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); text-shadow: none; box-shadow: none; }
:where(html:not(.a11y-contrast)) #view:has(> .so-hero) :is(.so-list, .so-codes) .btn.primary:hover:not(:disabled) { color: var(--accent-ink); background: var(--accent); border-color: transparent; filter: none; }
:where(html:not(.a11y-contrast)) #view:has(> .so-hero) :is(.so-list, .so-codes) .btn.primary:focus-visible { box-shadow: var(--ring); }
.so-x { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; }
:where(html:not(.a11y-contrast)) .so-x { border-radius: 10px; }
:where(html:not(.a11y-contrast)) .so-x:hover { background: var(--bad-soft); }

/* =====================================================================
   18. Phones: every key at least 44px high, nothing wider than the screen
   ===================================================================== */
@media (max-width: 760px) {
  :is(.games, .videos, .vplay, .coach, .league, .plan-builder, .dict, .tips, .st-lib, .gr-lib, .dl-lib, .legal, .pf, .play, .ds-page) .btn.small,
  #view:has(> .so-hero) .btn.small { min-height: 44px; }
  :is(.coach, .dict, .play, .gr-lib, .dl-lib) .speak { width: 44px; height: 44px; }
  .so-x { width: 44px; height: 44px; }
  .dict .linkish { min-height: 44px; }
  .st-lib .bk-sort { min-height: 44px; }
  .plan-builder .chips.days .chip { min-height: 44px; }
}

/* =====================================================================
   #fixes: how lessons are made (N14) and what we fixed, newest first
   ===================================================================== */
.fixes { display: grid; gap: var(--sp-6); max-width: 820px; margin: 0 auto; text-align: start; }
.fixes .fx-head h1 { margin: 0 0 var(--sp-2); }
.fixes .fx-head .lead { margin: 0; max-width: 62ch; }
.fixes .panel h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-h3); }
.fixes .fx-how-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.fixes .fx-how-list li { position: relative; padding-inline-start: 40px; line-height: 1.65; }
.fixes .fx-how-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 9px; background: var(--accent);
  -webkit-mask: var(--fx) center / 20px no-repeat; mask: var(--fx) center / 20px no-repeat; }
.fixes .fx-ai { --fx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z'/%3E%3Cpath d='M18.5 15l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E"); }
.fixes .fx-voice { --fx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4'/%3E%3C/svg%3E"); }
.fixes .fx-pic { --fx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.7'/%3E%3Cpath d='m4 17.5 5-4.5 3.8 3.3 2.7-2.3 4.5 3.8'/%3E%3C/svg%3E"); }
.fixes .fx-es { --fx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.1 8.2 7.5 9.5 4.4-1.3 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E"); }
.fixes .fx-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fixes .fx-list li { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); padding: var(--sp-3) 0; }
:where(html:not(.a11y-contrast)) .fixes .fx-list li + li { border-top: 1px solid var(--hairline); }
.fixes .fx-list time { font-size: var(--fs-sm); font-weight: 600; }
:where(html:not(.a11y-contrast)) .fixes .fx-list time { color: var(--muted); }
.fixes .fx-list p { margin: 0; line-height: 1.6; }
.fixes .fx-report { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.fixes .fx-report h2 { margin-bottom: var(--sp-1); }
.fixes .fx-report p { margin: 0; }
html.a11y-contrast .fixes .fx-how-list li::before { background: var(--ink); }
@media (max-width: 560px) {
  .fixes .fx-list li { grid-template-columns: minmax(0, 1fr); }
}
.fixes .fx-safe { margin: calc(var(--sp-2) * -1) 0 var(--sp-3); }
.fixes .fx-kind { display: inline-block; margin-inline-end: 6px; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; vertical-align: 1px; }
:where(html:not(.a11y-contrast)) .fixes .fx-new .fx-kind { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
:where(html:not(.a11y-contrast)) .fixes .fx-fix .fx-kind { color: var(--ok-text, var(--ok)); background: var(--ok-soft); }
html.a11y-contrast .fixes .fx-kind { border: 1.5px solid var(--ink); }

/* ---------- Redesign phase 2: the game stage map (docs/plan/2026-10-04-redesign-bento.md §5.4) ----------
   Looks only, over the games room's css/games.css (that file loads before this one): the game's head becomes a rounded hero
   with the game's picture on the end side, and the level world and tabs take the bento radius. The path and its stages keep
   their shape and colours. Easy learning keeps the plain head; high contrast keeps the games room's borders. */
:where(html:not(.a11y-contrast):not(.pref-easy)) .ax-map-head { justify-content: space-between; padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6, 24px); border-radius: var(--r-2xl, 32px);
  background: color-mix(in srgb, var(--cat-1, var(--accent)) 11%, var(--surface)); box-shadow: var(--e-bento, var(--e2)); }
:where(html:not(.a11y-contrast):not(.pref-easy)) .ax-map-head .ax-ic { order: 2; flex: none; width: 88px; height: 88px; border-radius: 26px; font-size: 44px; }
:where(html:not(.a11y-contrast):not(.pref-easy)) .ax-map-head .ax-ic svg { width: 46px; height: 46px; }
:where(html:not(.a11y-contrast):not(.pref-easy)) .ax-map-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.1; }
:where(html:not(.a11y-contrast)) .ax-world { border-radius: var(--r-2xl, 32px); box-shadow: var(--e-bento, var(--e2)); }
:where(html:not(.a11y-contrast)) .ax-tab, :where(html:not(.a11y-contrast)) .ax-how { border-radius: var(--r-lg); }
@media (max-width: 420px) {
  :where(html:not(.a11y-contrast):not(.pref-easy)) .ax-map-head { padding: var(--sp-4); }
  :where(html:not(.a11y-contrast):not(.pref-easy)) .ax-map-head .ax-ic { width: 64px; height: 64px; border-radius: 20px; font-size: 32px; }
}
/* the exam card (js/first-week.js) on a phone: text takes the row, its button goes underneath at full width */
@media (max-width: 520px) {
  .fw-exam { flex-wrap: wrap; }
  .fw-exam > span:nth-child(2) { flex: 1 1 0; min-width: 0; }
  .fw-exam > .btn { flex: 1 0 100%; justify-content: center; }
}

/* Space cats, part 6 (docs/plan/2026-10-20-space-headers.md): in the night theme the page header cards (2b) join the lesson's
   hologram look: the same cyan-pink-lime rim as the word card, faint scan lines (--hud-scan, off in lite and kids mode) and a
   cyan ring around Polly's portrait plate. Kids keep the rim without the glow. No new motion; the light theme is unchanged. */
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) {
  border: 1.5px solid transparent;
  background:
    var(--hud-scan, none) padding-box,
    radial-gradient(70% 150% at var(--pg-end) 0%, color-mix(in srgb, var(--pg, var(--accent)) 14%, transparent), transparent 64%) padding-box,
    radial-gradient(60% 90% at calc(100% - var(--pg-end)) 100%, rgb(232 121 249 / .08), transparent 70%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(140deg, rgb(125 249 255 / .7), rgb(232 121 249 / .6) 55%, rgb(163 230 53 / .55)) border-box;
  box-shadow: var(--e2), 0 0 44px -24px rgb(34 211 238 / .7);
}
:where(html:not(.a11y-contrast)):root[data-theme="dark"] :is(.st-hero-art, .gr-hero-art, .dl-hero-art, .vid-cat, .coach-cat, .so-hero > img, .ds-hero-art) {
  box-shadow: 0 0 0 2px rgb(125 249 255 / .55), 0 0 0 6px rgb(125 249 255 / .1), 0 0 26px -6px rgb(34 211 238 / .7);
}
html.kids:not(.a11y-contrast):root[data-theme="dark"] :is(.st-lib > .st-hero, .gr-lib > .gr-hero, .dl-lib > .dl-hero, .videos > .vid-hero, .coach > .coach-hero, .so-hero, .dict > .dict-head, .ds-hero:not(.cover)) { box-shadow: var(--e2); }
html.kids:not(.a11y-contrast):root[data-theme="dark"] :is(.st-hero-art, .gr-hero-art, .dl-hero-art, .vid-cat, .coach-cat, .so-hero > img, .ds-hero-art) { box-shadow: 0 0 0 2px rgb(125 249 255 / .4); }

/* The voice-choice tab (js/voices.js, css/voices.css) on phones: its word label stuck out about 70 px from the edge and
   covered the end of titles and boxes (the lesson's finish card, the writing prompt). On phones it becomes a slim
   speaker handle at the page's edge; the word stays in the button for screen readers (font-size 0). The QA click audit
   (4 Nov 2026, item 10) found the 24 px handle with a 14 px icon too small to read as a button: it is now 32 px wide with
   an 18 px speaker in the accent colour, and still takes taps 20 px further in (a 52 px target). */
@media (max-width: 760px) {
  html .pv-tab { display: grid; place-items: center; width: 32px; min-height: 56px; padding: 0; font-size: 0; color: var(--accent); box-shadow: var(--e1); }
  html .pv-tab::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -20px; inset-inline-end: 0; }
  html .pv-tab::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23000'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23000'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* ---------- Phone rhythm, 2026-10-21 (QA shots of the adult hubs) ----------
   Talk: the three practice entries (voice talk, pair cards, job interview) kept their old 16 px bottom margin inside a
   grid that already spaces blocks 24 px apart, so they stood 40 px apart with 24 px padding, three to a screen. They now
   read as one group, 12 px apart, with the compact padding css/dialogues.css meant them to have.
   Progress analysis: a two-word skill name ("reading comprehension") squeezed into a 9em column and broke over two lines
   beside its bar. On phones the name sits on its own line, the bar and the value under it. */
.dl-lib > .dl-vb-entry { margin: 0; padding: var(--sp-4) var(--sp-5); gap: var(--sp-1); }
.dl-lib > .dl-vb-entry + .dl-vb-entry { margin-top: calc(var(--sp-3) - var(--sp-6)); }
@media (max-width: 560px) {
  .coach .skill-bars li { grid-template-columns: minmax(0, 1fr) 3.2em; row-gap: 6px; }
  .coach .skill-bars li > :first-child { grid-column: 1 / -1; }
}

/* ---------- No footer jump while a page loads (2026-10-21) ----------
   Pages that wait for the course or a language file (review, for one) first show a one-line "loading" note, so the footer
   painted near the top and then dropped 380 px when the page arrived: a layout shift of 0.4 to 0.5 on every visit. The page
   area now always holds at least one screen, so the footer starts below the fold and nothing moves. Lessons have no footer. */
html:not(.in-lesson) #view { min-height: 100dvh; }

/* ---------- "Who is learning?" first screen (js/who.js, css/who.css; leo, Nov 2: only Adult or Kid) ----------
   Aurora Glass with real photos instead of emoji: the night-aurora photo under the wash, two glass cards side by side
   (also on a phone), each topped by a photo: children on the grass for Kid, hands on a laptop for Adult. The emoji stay
   in the markup for screen readers' sake (aria-hidden) and are not drawn. The id outranks css/who.css, which loads later. */
#who.who { background: var(--ag-scrim), url("../../media/site-bg/night-aurora.webp") 50% 38% / cover no-repeat, #070b1a; }
#who .who-box { gap: var(--sp-4); }
#who .who-box h1 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.3rem); line-height: 1.15; text-shadow: 0 2px 12px rgb(0 0 0 / .45); }
#who .who-box > p { color: rgb(255 255 255 / .82); font-size: var(--fs-sm); line-height: 1.5; text-wrap: balance; }
#who .who-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
#who .who-card { position: relative; align-content: start; justify-items: stretch; gap: 6px; min-height: 0; padding: 8px 8px 14px; overflow: hidden;
  border: 1px solid var(--ag-edge); border-radius: 22px; color: #fff; text-align: start;
  background: var(--ag-sheen), var(--ag-tint); -webkit-backdrop-filter: var(--ag-blur); backdrop-filter: var(--ag-blur);
  box-shadow: var(--ag-spec), var(--ag-shadow); transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
#who .who-card::before { content: ""; display: block; width: 100%; aspect-ratio: 4 / 3; margin-block-end: 6px; border-radius: 15px; background: #1a2340 center / cover no-repeat; }
#who .who-card[data-who="child"]::before { background-image: url("../../media/en/p/children.webp"); }
#who .who-card[data-who="adult"]::before { background-image: url("../../media/en/p/student.webp"); }
#who .who-ico { display: none; }
#who .who-card b { padding-inline: 8px; font-size: 1.2rem; line-height: 1.2; }
#who .who-card span:last-child { padding-inline: 8px; color: rgb(255 255 255 / .78); font-size: .86rem; line-height: 1.4; }
#who .who-card:hover { border-color: var(--ag-edge-strong); transform: translateY(-2px); }
#who .who-card:focus-visible { outline: 3px solid var(--ag-lime); outline-offset: 3px; border-color: var(--ag-edge-strong); }
#who .who-card[data-who="child"]:hover { box-shadow: var(--ag-spec), var(--ag-shadow), 0 0 0 1px rgb(232 121 249 / .5), 0 10px 40px -12px rgb(232 121 249 / .55); }
#who .who-card[data-who="adult"]:hover { box-shadow: var(--ag-spec), var(--ag-shadow), 0 0 0 1px rgb(34 211 238 / .5), 0 10px 40px -12px rgb(34 211 238 / .55); }
#who .who-later { min-height: 44px; color: rgb(255 255 255 / .78); text-underline-offset: 3px; }
#who .who-later:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { #who .who-card { transition: none; } #who .who-card:hover { transform: none; } }
/* high contrast: solid cards with a frame, no photo wash behind the text */
html.a11y-contrast #who.who { background: #000; }
html.a11y-contrast #who .who-card { background: #000; border: 2px solid #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Pick your background (js/ui-shell.js PolyLook; docs/plan/2026-11-03-look-chooser.md) ----------
   A sheet over the landing page on the first visit, and the same picture cards in the quick settings sheet. The sheet
   takes the page's own tokens, so it turns light or dark with the card that was tapped: the choice answers at once.
   No blur behind it (a blur over the sky is a full repaint on a phone); one fade in, none in calm mode. */
.lk-wrap { position: fixed; inset: 0; z-index: 1200; display: grid; align-items: end; justify-items: center; }
.lk-shade { position: absolute; inset: 0; background: rgb(3 6 16 / .58); }
.lk { position: relative; width: 100%; max-width: 560px; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; color: var(--ink);
  background: var(--ag-sheen), color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: var(--ag-spec), 0 -20px 50px -20px rgb(0 0 0 / .7); }
.lk:focus { outline: none; }
.lk h2 { margin: 0 44px 4px; text-align: center; font: 800 clamp(1.3rem, 1.1rem + 1vw, 1.6rem)/1.2 var(--font-display, var(--font-ui)); }
.lk-line { margin: 0 0 16px; text-align: center; font-size: var(--fs-sm); color: var(--ink-2); }
.lk-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); cursor: pointer; }
.lk-x::before, .lk-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.lk-x::after { transform: rotate(-45deg); }
.lk-x:focus-visible { outline: 3px solid var(--ag-lime); outline-offset: 2px; }
.lk-go { display: flex; justify-content: center; width: 100%; margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html:not(.pref-calm) .lk { animation: ds-sheet-in var(--dur-3) var(--ease); } }

.lk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.lk-card { display: grid; grid-template-rows: auto 1fr auto; align-items: start; gap: 7px; justify-items: center; min-width: 0; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lk-pic { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: #0b1424; box-shadow: 0 12px 24px -14px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .14); }
.lk-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a little page drawn on the photo: a glass card with two text lines and the green button (white glass on the bright day) */
.lk-mock { position: absolute; inset: auto 14% 12% 14%; display: grid; gap: 5px; padding: 9px 9px 8px; border-radius: 10px;
  background: linear-gradient(150deg, rgb(255 255 255 / .22), rgb(255 255 255 / .08)), rgb(9 17 38 / .5); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 6px 14px -8px rgb(0 0 0 / .7); }
.lk-mock i { display: block; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .85); }
.lk-mock i + i { width: 62%; background: rgb(255 255 255 / .5); }
.lk-mock b { display: block; width: 58%; height: 11px; margin-top: 2px; border-radius: 6px; background: var(--ag-cta); }
.lk-light .lk-mock { background: rgb(255 255 255 / .9); }
.lk-light .lk-mock i { background: #1b2140; } .lk-light .lk-mock i + i { background: #8b93b4; } .lk-light .lk-mock b { background: #6c4cf0; }
.lk-play { position: absolute; top: 9px; inset-inline-end: 9px; width: 28px; height: 28px; border-radius: 50%; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .7); }
.lk-play::after { content: ""; position: absolute; top: 8px; left: 11px; border: 6px solid transparent; border-inline: 0; border-left: 9px solid #fff; }
.lk-name { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.lk-card[aria-pressed="true"] .lk-pic { outline: 3px solid var(--ag-lime); outline-offset: 3px; }
.lk-card[aria-pressed="true"] .lk-pic::after { content: ""; position: absolute; top: 9px; inset-inline-start: 9px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ag-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230a1a02' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.lk-card:focus-visible { outline: none; }
.lk-card:focus-visible .lk-pic { outline: 3px solid var(--ag-cy); outline-offset: 3px; }
@media (hover: hover) { .lk-card:hover .lk-pic { box-shadow: 0 14px 28px -12px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(255 255 255 / .4); } }
/* in the quick settings sheet: one row of small cards */
.lk-grid.lk-small { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.lk-small .lk-pic { aspect-ratio: 3 / 4; border-radius: 12px; }
.lk-small .lk-mock { inset: auto 10% 9% 10%; gap: 3px; padding: 5px; border-radius: 6px; }
.lk-small .lk-mock i { height: 3px; } .lk-small .lk-mock b { height: 6px; }
.lk-small .lk-play { width: 20px; height: 20px; top: 6px; inset-inline-end: 6px; } .lk-small .lk-play::after { top: 5px; left: 8px; border-width: 5px; border-left-width: 7px; }
.lk-small .lk-name { font-size: .74rem; font-weight: 600; }
.lk-small .lk-card[aria-pressed="true"] .lk-pic::after { width: 20px; height: 20px; top: 5px; inset-inline-start: 5px; background-size: 12px; }
html.a11y-contrast .lk { background: var(--bg); }
html.a11y-contrast .lk-card[aria-pressed="true"] .lk-pic { outline-color: currentColor; }
/* the "Choose" pill under each big card (leo's reference: a picture, then a choose button); "Chosen" with a tick once picked */
.lk-pick { display: inline-flex; align-items: center; justify-content: center; min-width: 74%; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .92rem; color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--hairline-strong); }
.lk-pick-b { display: none; }
.lk-card[aria-pressed="true"] .lk-pick { color: var(--ag-cta-ink); background: var(--ag-cta); box-shadow: inset 0 -2px 0 var(--ag-cta-edge); }
.lk-card[aria-pressed="true"] .lk-pick-a { display: none; }
.lk-card[aria-pressed="true"] .lk-pick-b { display: inline; }
.lk-card[aria-pressed="true"] .lk-pick-b::before { content: "✓ "; }
@media (hover: hover) { .lk-card:hover .lk-pick { box-shadow: inset 0 0 0 1.5px var(--ag-cy); } }
/* Four deliberate layouts (leo, 3 Nov: phones, tablets in each direction, and the computer each get their own fit).
   Phone (< 600 px): a bottom sheet, 2 × 2 tall cards. Short phones (≤ 720 px high) get square pictures, very short ones
   (≤ 640 px) wider pictures and no subtitle, so all four cards, their buttons and Continue fit on one screen.
   Tablet upright (600 px and wider, portrait): a centred card up to 640 px, 2 × 2 square pictures.
   Tablet on its side and computer (900 px and wider, landscape): a centred card up to 980 px, four tall cards in one
   row, and Continue at its natural width. The kids' two cards stay side by side at every size. */
@media (max-height: 720px) { .lk-grid:not(.lk-small) .lk-pic { aspect-ratio: 1; } }
@media (max-height: 640px) { .lk-grid:not(.lk-small) .lk-pic { aspect-ratio: 4 / 3; } .lk-line { display: none; } .lk h2 { margin-bottom: 12px; } .lk-pick { min-height: 36px; } }
@media (min-width: 600px) {
  .lk-wrap { align-items: center; padding: 24px; }
  .lk { max-width: 640px; max-height: calc(100dvh - 48px); border-radius: 28px; padding: 28px 28px 24px; }
  .lk-grid:not(.lk-small) { gap: 20px 18px; }
  .lk-grid:not(.lk-small) .lk-pic { aspect-ratio: 1; border-radius: 22px; }
  .lk-name { font-size: 1.02rem; }
}
@media (min-width: 900px) and (orientation: landscape) {
  .lk { max-width: 980px; padding: 32px 32px 28px; }
  .lk-grid:not(.lk-small) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lk-grid:not(.lk-small) .lk-pic { aspect-ratio: 3 / 4; }
  .lk-grid:not(.lk-small):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
  .lk-go { width: auto; min-width: 280px; margin-inline: auto; }
}
@media (min-width: 900px) and (orientation: landscape) and (max-height: 760px) { .lk-grid:not(.lk-small) .lk-pic { aspect-ratio: 1; } }
/* Story word list (D21): with the 44 px listen key a short word such as "morning" was cut mid-word on phones; whole
   words wrap only between words now, and the row still fits at 360 px (checked in Hebrew and Russian). */
.st-words li :is(b, .st-w span) { overflow-wrap: break-word; }
/* The speaking portfolio page (#portfolio) is a <section class="speak pf">: the round listen-key rules (.speak) squashed the
   whole page into a 44 px pill with the content spilling out of it. The page keeps its own layout; only buttons are keys. */
section.speak.pf { display: grid; width: auto; height: auto; place-items: normal; border: 0; border-radius: 0; padding: 0;
  background: none; color: inherit; box-shadow: none; cursor: auto; transform: none; transition: none; }