/* polyg — speelveld. Eén blijvende bol met een voortgangsring; alleen de
   inhoud in de bol wisselt, voor elke modus. De klassieke stylesheet
   (app.css) blijft voor /klassiek/, de leer- en privacypagina's. */

/* Geregistreerd, zodat de bol bij de start vloeiend kan inzoomen en de
   taalkleuren bij een taalwissel in elkaar overvloeien. */
@property --d { syntax: "<length>"; inherits: true; initial-value: 600px; }
@property --mot-accent { syntax: "<color>"; inherits: true; initial-value: #ff8a45; }
@property --mot-accent-2 { syntax: "<color>"; inherits: true; initial-value: #6092ff; }
@property --mot-accent-3 { syntax: "<color>"; inherits: true; initial-value: #f2f0ea; }
:root {
  --mot-black: #08080a;
  --mot-accent: #ff8a45;
  --mot-accent-2: #6092ff;
  --mot-accent-3: #f2f0ea;
  --pv-paper: #f7f6f2;
  --pv-ink: #18181d;
  --pv-muted: #a5a4aa;
  --pv-miss: rgba(24, 24, 29, .26);
  --pv-wrong: #ff7b70;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Diameter van de bol: groot op desktop, op smalle schermen bewust breder
     dan het scherm, zodat de bol als een horizon in beeld staat. */
  --d: min(calc(100svh - 190px), 800px, 118vw);
  --pv-text: 1;
  --turn: 0deg;
}
/* Vanaf tabletbreedte moet de hele baan (bol × 1,16) in de breedte passen. */
@media (min-width: 601px) {
  :root { --d: min(calc(100svh - 190px), 800px, calc((100vw - 32px) / 1.16)); }
}
/* Dezelfde tekstgroottes als de game; op smalle schermen geldt altijd normaal. */
html[data-text-size="large"] { --pv-text: 1.12; }
html[data-text-size="xlarge"] { --pv-text: 1.24; }

.pv-body[data-theme="fr"] { --mot-accent: #7599ff; --mot-accent-2: #ff647d; --mot-accent-3: #f3f1eb; }
.pv-body[data-theme="en"] { --mot-accent: #ff667e; --mot-accent-2: #668dff; --mot-accent-3: #f4f2ed; }
.pv-body[data-theme="de"] { --mot-accent: #ffd047; --mot-accent-2: #ff5d58; --mot-accent-3: #282830; }
.pv-body[data-theme="es"] { --mot-accent: #ff665d; --mot-accent-2: #ffd047; --mot-accent-3: #f2b84b; }
.pv-body[data-theme="nl"] { --mot-accent: #ff8a45; --mot-accent-2: #6092ff; --mot-accent-3: #f2f0ea; }
/* Polyglot blijft van begin tot eind wit en kil op een donker vlak. */
.pv-body[data-theme="polyglot"] { --mot-accent: #dcdae6; --mot-accent-2: #8f8da1; --mot-accent-3: #f2f0ea; --mot-black: #0b0b10; --pv-paper: #0b0b10; --pv-ink: #ecebf1; --pv-miss: rgba(236, 235, 241, .22); }

html[data-color-mode="dark"] {
  --pv-paper: #101013;
  --pv-ink: #ecebf1;
  --pv-miss: rgba(236, 235, 241, .24);
}
/* De stipkleur hangt af van het taalpalet en moet dus op de pagina zelf
   worden berekend, niet al op :root. */
.pv-body { --pv-dot: color-mix(in srgb, var(--mot-accent) 55%, rgba(30, 30, 36, .25)); }
html[data-color-mode="dark"] .pv-body,
.pv-body[data-theme="polyglot"] { --pv-dot: color-mix(in srgb, var(--mot-accent) 70%, rgba(236, 235, 241, .2)); }

* { box-sizing: border-box; }
/* Alles wat buiten beeld steekt (de bol op een smal scherm) wordt geknipt;
   anders vergroot een mobiele browser het hele beeld om het te tonen. */
html, body { margin: 0; height: 100%; overflow: hidden; }
.pv-body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--pv-ink);
  font-family: var(--sans);
  background: var(--pv-paper);
  background: radial-gradient(900px 520px at 50% 52%, color-mix(in srgb, var(--mot-accent) 10%, transparent), transparent 72%), var(--pv-paper);
  -webkit-font-smoothing: antialiased;
  transition: --mot-accent .7s ease, --mot-accent-2 .7s ease, --mot-accent-3 .7s ease;
}
button { font-family: inherit; }

/* De kolom blijft schermbreed: een bol die groter is dan het scherm mag het
   raster niet mee oprekken. */
.pv-stage { position: relative; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; }

/* ─── HUD ─── */
.pv-hud { position: relative; transition: min-height .5s ease; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 64px; padding: 0 24px; z-index: 6; }
.pv-home { justify-self: start; color: var(--pv-ink); font: 800 21px/1 var(--sans); letter-spacing: -.05em; text-decoration: none; }
.pv-tabs { min-width: 0; display: flex; gap: 4px; padding: 4px; background: color-mix(in srgb, var(--pv-ink) 6%, transparent); border-radius: 999px; transition: opacity .3s ease; }
.pv-tab { padding: 8px 13px; color: color-mix(in srgb, var(--pv-ink) 62%, transparent); background: none; border: 0; border-radius: 999px; font: 650 13px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background .2s ease, color .2s ease; }
.pv-tab:hover { color: var(--pv-ink); }
.pv-tab[aria-pressed="true"] { color: #111116; background: var(--mot-accent); }
.pv-body.is-playing .pv-tabs, .pv-body.is-playing .pv-langs { opacity: 0; pointer-events: none; }
.pv-hud-right { justify-self: end; display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.pv-count { font: 700 14px/1 var(--sans); letter-spacing: .02em; }
.pv-count:empty { display: none; }
.pv-count small { color: var(--pv-muted); font-weight: 600; }
.pv-streak { color: var(--mot-accent); font: 750 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .25s ease; }
.pv-streak.is-on { opacity: 1; }
.pv-streak.is-pop { animation: pvPop .42s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes pvPop { 40% { transform: scale(1.28); } }
.pv-langs { display: flex; gap: 2px; transition: opacity .3s ease; }
.pv-lang { min-width: 32px; height: 30px; padding: 0 7px; color: color-mix(in srgb, var(--pv-ink) 55%, transparent); background: none; border: 0; border-radius: 999px; font: 750 11px/1 var(--sans); letter-spacing: .06em; cursor: pointer; }
.pv-lang[aria-pressed="true"] { color: #111116; background: var(--mot-accent); }
.pv-body.is-playing .pv-langs { display: none; }
.pv-gear { width: 36px; height: 36px; display: grid; place-items: center; color: var(--pv-ink); background: color-mix(in srgb, var(--pv-ink) 6%, transparent); border: 0; border-radius: 50%; cursor: pointer; }
.pv-gear[aria-expanded="true"] { color: #111116; background: var(--mot-accent); }

/* Instellingen: dezelfde voorkeuren als de game. */
.pv-settings {
  position: absolute;
  top: 58px;
  right: 18px;
  width: min(340px, calc(100vw - 24px));
  padding: 16px;
  color: #f2f1f5;
  background: rgba(16, 16, 22, .94);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
  z-index: 20;
}
.pv-settings[hidden] { display: none; }
.pv-settings h2 { margin: 0 0 12px; font: 750 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mot-accent); }
.pv-setting + .pv-setting { margin-top: 14px; }
.pv-setting > span { display: block; margin-bottom: 7px; color: #b9b8c2; font: 650 12px/1 var(--sans); }
.pv-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; background: rgba(255, 255, 255, .06); border-radius: 11px; }
.pv-segmented button { padding: 9px 6px; color: #d8d7df; background: none; border: 0; border-radius: 8px; font: 650 12.5px/1 var(--sans); cursor: pointer; }
.pv-segmented button[aria-pressed="true"] { color: #111116; background: var(--mot-accent); }
.pv-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; color: #f2f1f5; background: rgba(255, 255, 255, .06); border: 0; border-radius: 11px; font: 650 13px/1.3 var(--sans); text-align: left; cursor: pointer; }
.pv-toggle small { display: block; margin-top: 2px; color: #9d9ca7; font-weight: 500; font-size: 11.5px; }
.pv-toggle i { width: 34px; height: 20px; flex: 0 0 auto; position: relative; background: rgba(255, 255, 255, .18); border-radius: 999px; transition: background .2s ease; }
.pv-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .2s ease; }
.pv-toggle[aria-pressed="true"] i { background: var(--mot-accent); }
.pv-toggle[aria-pressed="true"] i::after { transform: translateX(14px); }
.pv-setting-note { margin: 6px 0 0; color: #8d8c97; font-size: 11.5px; }
.pv-setting-note + .pv-setting { margin-top: 12px; }

/* ─── Arena: ring + bol ─── */
.pv-arena {
  position: relative;
  align-self: center;
  justify-self: start;
  width: calc(var(--d) * 1.16);
  aspect-ratio: 1;
  /* Centreren via de marge: op smalle schermen is de arena breder dan het
     scherm en moet ze aan beide kanten evenveel uitsteken. */
  margin: -24px 0 0 calc(50% - var(--d) * .58);
}
/* Bij de start zoomt de bol in: de footer verdwijnt, de ring schuift tot net
   onder de bovenbalk en de bol neemt de hoogte die het scherm toelaat. */
@media (min-width: 601px) {
  .pv-body { transition: --d .7s cubic-bezier(.65, 0, .25, 1); }
  .pv-arena { align-self: start; margin-top: calc((100svh - 108px - var(--d) * 1.16) / 2); transition: margin-top .7s cubic-bezier(.65, 0, .25, 1); }
  .pv-body.is-playing { --d: min(calc((100svh - 64px) / 1.04), 880px, calc((100vw - 24px) / 1.16)); }
  .pv-body.is-playing .pv-hud { min-height: 50px; }
  /* Bovenaan, of verticaal gecentreerd als de breedte de bol begrenst. */
  .pv-body.is-playing .pv-arena { margin-top: max(calc(4px - var(--d) * .04), calc((100svh - 50px - var(--d) * 1.16) / 2)); }
}
.pv-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pv-ring-turn {
  transform-origin: 500px 500px;
  transition: transform .75s cubic-bezier(.65, 0, .25, 1);
}
.pv-body.is-idle .pv-ring-turn { animation: pvIdleSpin 80s linear infinite; transition: none; }
@keyframes pvIdleSpin { to { transform: rotate(360deg); } }

/* Een segment is één vraag: een spoor van stippen en een vulling erboven.
   Rust: losse stippen. Beantwoord: het spoor wordt één grijze boog en de
   vulling groeit in de taalkleur tot de behaalde score. */
.pv-track, .pv-fill { fill: none; stroke-linecap: round; }
.pv-track {
  stroke: var(--pv-dot);
  stroke-width: 7;
  stroke-dasharray: 0 var(--dot, .1667);
  stroke-dashoffset: calc(var(--dot, .1667) / -2);
  transition: stroke-dasharray .7s cubic-bezier(.3, .7, .2, 1), stroke-dashoffset .7s cubic-bezier(.3, .7, .2, 1), stroke .4s ease, stroke-width .4s ease, opacity .4s ease;
}
.pv-body.is-playing .pv-track { opacity: .55; }
.pv-track.is-active { opacity: 1 !important; stroke: var(--mot-accent); stroke-width: 10; animation: pvBeat 1.6s ease-in-out infinite; }
.pv-track.is-done { opacity: 1 !important; stroke: var(--pv-miss); stroke-width: 9; stroke-dasharray: 1 0; stroke-dashoffset: 0; animation: none; }
.pv-fill { stroke: var(--mot-accent); stroke-width: 9; stroke-dasharray: 0 1; opacity: 0; transition: stroke-dasharray .8s cubic-bezier(.3, .7, .2, 1) .1s, stroke-width .15s ease; }
.pv-fill.is-set { opacity: 1; stroke-dasharray: var(--fill, 0) 1; }
.pv-fill.is-flash { stroke-width: 15; }
@keyframes pvBeat { 50% { stroke-width: 13; } }

.pv-orb {
  position: absolute;
  inset: 6.9%;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  background: #15151b;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mot-accent) 8%, var(--mot-black)) 0%, var(--mot-black) 49%, color-mix(in srgb, var(--mot-accent-2) 8%, var(--mot-black)) 100%);
  box-shadow: 0 26px 70px color-mix(in srgb, var(--mot-accent) 16%, rgba(13, 13, 18, .26)), inset 0 0 0 1px rgba(255, 255, 255, .09);
}
/* Het licht op de bol draait mee met de ring: elke vraag is een stap. */
.pv-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 8% 10%, color-mix(in srgb, var(--mot-accent) 36%, transparent) 0%, transparent 51%),
    radial-gradient(ellipse at 96% 86%, color-mix(in srgb, var(--mot-accent-2) 30%, transparent) 0%, transparent 53%),
    radial-gradient(circle at 78% 4%, color-mix(in srgb, var(--mot-accent-3) 13%, transparent) 0%, transparent 34%);
  transform: rotate(var(--turn));
  transition: transform .75s cubic-bezier(.65, 0, .25, 1);
}
.pv-orb.is-shake { animation: pvShake .38s cubic-bezier(.36, .07, .19, .97); }
@keyframes pvShake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }
.pv-orb.is-glow { box-shadow: 0 26px 90px color-mix(in srgb, var(--mot-accent) 34%, rgba(13, 13, 18, .26)), inset 0 0 0 1px color-mix(in srgb, var(--mot-accent) 45%, transparent); }

/* ─── Scène in de bol ─── */
/* De binnenste laag centreert met automatische marges: past de inhoud niet,
   dan scrolt ze binnen de bol in plaats van boven en onder weg te vallen. */
.pv-scene {
  position: absolute;
  /* De scène zelf is een rechthoek van 67 × 72 % die met een paar pixels
     marge binnen de cirkel valt (√(0,335² + 0,36²) ≈ 0,49). Ook wat erin
     scrolt, raakt zo nooit de ronding. */
  inset: 14% 16.5%;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  text-align: center;
}
.pv-scene::-webkit-scrollbar { display: none; }
/* Past de inhoud echt niet (extra grote tekst, piepklein scherm), dan scrolt
   ze binnen de bol; een zachte vervaging toont dat er meer is. */
.pv-scene.has-overflow { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.pv-scene.has-overflow.is-at-end { -webkit-mask-image: none; mask-image: none; }
.pv-inner { margin: auto 0; display: flex; flex-direction: column; align-items: center; }
.pv-kicker { color: var(--mot-accent); font: 750 calc(11px * var(--pv-text))/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.pv-title { margin: 14px 0 0; font: 650 clamp(28px, calc(var(--d) * .058), 42px)/1.04 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.pv-lead { max-width: 30em; margin: 14px 0 0; color: var(--pv-muted); font-size: calc(14px * var(--pv-text)); line-height: 1.5; text-wrap: balance; }
.pv-play {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px 15px 26px;
  color: #111116;
  background: var(--mot-accent);
  border: 0;
  border-radius: 999px;
  font: 750 16px/1 var(--sans);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pv-play:hover { transform: translateY(-1px); box-shadow: 0 10px 26px color-mix(in srgb, var(--mot-accent) 40%, transparent); }
.pv-play:disabled { opacity: .6; cursor: default; }
.pv-play:focus-visible, .pv-ghost:focus-visible, .pv-option:focus-visible, .pv-pill:focus-visible, .pv-next:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pv-play b { min-width: 30px; height: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, .55); border-radius: 50%; font-size: 12px; }
.pv-ghost { margin-top: 12px; padding: 8px 12px; color: var(--pv-muted); background: none; border: 0; font: 600 13px/1 var(--sans); cursor: pointer; }
.pv-ghost:hover { color: #fff; }

/* Vraag */
.pv-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pv-chip { padding: 6px 11px; color: var(--mot-accent); border: 1px solid color-mix(in srgb, var(--mot-accent) 45%, transparent); border-radius: 999px; font: 750 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.pv-chip.is-lang { color: #111116; background: var(--mot-accent); border-color: transparent; }
.pv-lemma { margin-top: 14px; color: var(--mot-accent); font: 700 calc(clamp(30px, calc(var(--d) * .068), 50px) * var(--pv-text))/1.05 var(--sans); letter-spacing: -.045em; overflow-wrap: anywhere; }
.pv-prompt { margin-top: 12px; color: #c9c8d1; font: 600 calc(13.5px * var(--pv-text))/1.4 var(--sans); }
/* De aanwijzing is een opdracht, geen bijschrift: ze staat vooraan en valt op. */
.pv-cue { max-width: 30em; margin-top: 14px; padding: 10px 14px; background: rgba(255, 255, 255, .06); border-left: 3px solid var(--mot-accent); border-radius: 4px 10px 10px 4px; text-align: left; }
.pv-cue small { display: block; margin-bottom: 4px; color: var(--mot-accent); font: 750 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pv-cue p { margin: 0; font: 600 calc(14.5px * var(--pv-text))/1.4 var(--sans); }
.pv-quote { max-width: 30em; margin: 14px 0 0; font: 650 calc(clamp(18px, calc(var(--d) * .034), 24px) * var(--pv-text))/1.35 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.pv-sentence {
  margin: 22px 0 0;
  font: 650 calc(clamp(21px, calc(var(--d) * .044), 32px) * var(--pv-text))/1.5 var(--sans);
  letter-spacing: -.025em;
  text-wrap: balance;
}
/* Na het antwoord: aanwijzing dicht, zin kleiner, zodat de uitleg past. */
.pv-cue, .pv-sentence, .pv-quote, .pv-lemma, .pv-meta { transition: max-height .4s ease, opacity .3s ease, margin .4s ease, padding .4s ease, font-size .4s ease; }
.pv-cue { max-height: 12em; overflow: hidden; }
.pv-scene.is-resolved .pv-cue { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.pv-scene.is-resolved .pv-sentence { margin-top: 10px; font-size: calc(clamp(17px, calc(var(--d) * .032), 23px) * var(--pv-text)); }
.pv-scene.is-resolved .pv-quote { font-size: calc(clamp(16px, calc(var(--d) * .028), 20px) * var(--pv-text)); }
.pv-scene.is-resolved .pv-lemma { font-size: calc(clamp(24px, calc(var(--d) * .05), 36px) * var(--pv-text)); }
.pv-scene.is-resolved .pv-meta { opacity: .55; }
.pv-scene.is-resolved .pv-pills { margin-top: 12px; }
/* Ruimte rond de inhoud, zodat de focusrand van de knoppen niet wordt
   afgeknipt door het openklappende vak. */
.pv-feedback > div { max-width: calc(30em + 16px); margin: 0 auto; padding: 0 8px 10px; }
.pv-sentence.is-long { font-size: calc(clamp(18px, calc(var(--d) * .036), 26px) * var(--pv-text)); }
.pv-word { display: inline-block; white-space: pre; }
.pv-slot { position: relative; display: inline-block; vertical-align: baseline; }
.pv-blank {
  min-width: 3.4em;
  padding: 0 .12em;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 3px solid color-mix(in srgb, var(--mot-accent) 70%, transparent);
  border-radius: 0;
  outline: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: center;
  caret-color: var(--mot-accent);
}
.pv-blank:focus { border-bottom-color: var(--mot-accent); }
.pv-locked { display: inline-block; padding: 0 .12em; border-bottom: 3px solid transparent; }
.pv-locked.is-hit { color: var(--mot-accent); border-bottom-color: var(--mot-accent); }
.pv-locked.is-fix { color: #fff; border-bottom-color: rgba(255, 255, 255, .35); }
.pv-fallen { position: absolute; left: 50%; top: 0; color: var(--pv-wrong); text-decoration: line-through; text-decoration-thickness: 2px; white-space: pre; pointer-events: none; transform: translateX(-50%); }
/* Nuance: het gekozen woord staat live in de zin. */
.pv-gap { display: inline-block; min-width: 3.2em; padding: 0 .12em; color: var(--mot-accent); border-bottom: 3px solid color-mix(in srgb, var(--mot-accent) 70%, transparent); }
.pv-gap.is-empty { color: rgba(255, 255, 255, .22); }
.pv-hint { min-height: 18px; margin-top: 14px; color: var(--pv-muted); font: 600 12px/1.4 var(--sans); }
.pv-check, .pv-lock { padding: 11px 18px; color: #111116; background: var(--mot-accent); border: 0; border-radius: 999px; font: 750 14px/1 var(--sans); cursor: pointer; }
.pv-check { display: none; }
.pv-lock { margin-top: 16px; }
.pv-lock:disabled { opacity: .35; cursor: default; }
.pv-lock span, .pv-next span { margin-left: 8px; opacity: .55; }
/* Op lage schermen wijkt de toetsenbordhint voor de vraag zelf. */
@media (max-height: 920px) {
  .pv-keys { display: none; }
  .pv-hint { min-height: 0; margin-top: 8px; }
  .pv-cue { margin-top: 10px; }
  .pv-sentence { margin-top: 14px; }
  .pv-pills, .pv-options { margin-top: 12px; }
  .pv-options { gap: 6px; }
  .pv-option { padding: 8px 12px; font-size: calc(13.5px * var(--pv-text)); line-height: 1.3; }
  .pv-lemma { margin-top: 10px; font-size: calc(clamp(28px, calc(var(--d) * .058), 44px) * var(--pv-text)); }
  .pv-prompt { margin-top: 8px; }
  .pv-sentence { font-size: calc(clamp(20px, calc(var(--d) * .04), 30px) * var(--pv-text)); line-height: 1.45; }
  .pv-cue { padding: 8px 12px; }
  .pv-cue p { font-size: calc(14px * var(--pv-text)); }
  .pv-pill { padding: 9px 13px; }
}
/* Touchscreens: een knop in plaats van de toetsenbordhint. */
@media (pointer: coarse) {
  .pv-keys { display: none; }
  .pv-check { display: inline-block; }
}

/* Nuance-opties: vijf woorden; na het vastzetten krijgt elk zijn score. */
.pv-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 34em; margin-top: 20px; }
.pv-pill { position: relative; padding: 10px 15px; color: #eeedf3; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; font: 650 calc(15px * var(--pv-text))/1 var(--sans); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease, opacity .3s ease, border-color .2s ease; }
.pv-pill:hover { background: rgba(255, 255, 255, .13); }
.pv-pill[aria-pressed="true"] { color: #111116; background: var(--mot-accent); border-color: transparent; }
.pv-pill b { display: none; margin-left: 8px; font-variant-numeric: tabular-nums; }
.pv-pills.is-scored .pv-pill { cursor: default; }
.pv-pills.is-scored .pv-pill b { display: inline; }
.pv-pill.is-target { color: #111116; background: var(--mot-accent); border-color: transparent; }
.pv-pill.is-chosen:not(.is-target) { color: #fff; background: transparent; border: 2px solid var(--pv-wrong); }
.pv-pill.is-low { opacity: .45; }

/* Keuzevragen: tik = antwoord. */
.pv-options { width: 100%; max-width: 32em; display: grid; gap: 8px; margin-top: 18px; }
.pv-options.is-grid { grid-template-columns: 1fr 1fr; }
.pv-option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-height: 9em;
  padding: 11px 14px;
  color: #f1f0f5;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  font: 600 calc(14px * var(--pv-text))/1.35 var(--sans);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease, opacity .35s ease, max-height .45s cubic-bezier(.3, .7, .2, 1), padding .45s ease, margin .45s ease, transform .2s ease;
}
.pv-option span { flex: 0 0 auto; color: var(--mot-accent); font: 750 11px/1 var(--sans); }
.pv-option:hover:not(:disabled) { background: rgba(255, 255, 255, .13); transform: translateY(-1px); }
.pv-option:disabled { cursor: default; }
.pv-option.is-correct { color: #111116; background: var(--mot-accent); border-color: transparent; }
.pv-option.is-correct span { color: #111116; }
.pv-option.is-wrong { border: 2px solid var(--pv-wrong); }
.pv-option.is-wrong b { text-decoration: line-through; text-decoration-color: var(--pv-wrong); }
.pv-option.is-gone { max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -8px; border-width: 0; opacity: 0; }
.pv-options.is-grid .pv-option.is-gone { display: none; }
.pv-context { margin: 4px 0 0 6px; padding: 6px 11px; color: #d4d3dc; background: none; border: 1px dashed rgba(255, 255, 255, .25); border-radius: 999px; font: 600 12px/1 var(--sans); cursor: pointer; }
.pv-context small { margin-left: 6px; color: var(--pv-muted); }
.pv-context-text { max-width: 30em; margin: 10px 0 0; color: #dad9e1; font: italic 500 calc(13.5px * var(--pv-text))/1.45 var(--sans); }

/* Feedback: vouwt open onder dezelfde vraag. */
.pv-feedback { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows .45s cubic-bezier(.3, .7, .2, 1); }
.pv-feedback.is-open { grid-template-rows: 1fr; }
.pv-feedback > div { overflow: hidden; min-height: 0; }
.pv-verdict { margin-top: 16px; color: var(--pv-wrong); font: 700 calc(14px * var(--pv-text))/1.35 var(--sans); }
.pv-verdict.is-good { color: var(--mot-accent); }
.pv-verdict b { margin-left: 8px; color: #fff; font-variant-numeric: tabular-nums; }
.pv-explain { max-width: 32em; margin: 8px auto 0; color: var(--pv-muted); font-size: calc(13.5px * var(--pv-text)); line-height: 1.5; text-wrap: pretty; }
.pv-explain b { color: #fff; font-weight: 650; }
.pv-card { max-width: 32em; margin: 12px auto 0; text-align: center; }
.pv-card strong { display: block; color: var(--mot-accent); font: 700 calc(19px * var(--pv-text))/1.25 var(--sans); letter-spacing: -.02em; }
.pv-card p { margin: 6px 0 0; color: #e9e8ee; font-size: calc(14px * var(--pv-text)); line-height: 1.45; }
.pv-card .pv-example { color: var(--pv-muted); font-style: italic; }
.pv-source { display: block; width: max-content; margin: 8px auto 0; color: var(--pv-muted); font-size: 11.5px; }
.pv-next { margin-top: 14px; padding: 11px 16px 11px 20px; color: #111116; background: #fff; border: 0; border-radius: 999px; font: 750 14px/1 var(--sans); cursor: pointer; }

/* Eindscore */
.pv-score { margin-top: 10px; font: 750 clamp(64px, calc(var(--d) * .15), 116px)/1 var(--sans); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.pv-score small { color: var(--pv-muted); font-size: .3em; letter-spacing: -.02em; }
.pv-misses { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 32em; margin-top: 12px; }
.pv-misses span { padding: 6px 10px; color: #e6e5ea; background: rgba(255, 255, 255, .07); border-radius: 8px; font-size: calc(12.5px * var(--pv-text)); }
.pv-misses b { color: var(--mot-accent); font-weight: 700; }

/* ─── Footer en info ─── */
.pv-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 24px 14px; color: color-mix(in srgb, var(--pv-ink) 58%, transparent); font: 600 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: opacity .3s ease; }
.pv-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pv-footer button { padding: 4px 0; color: inherit; background: none; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.pv-footer button:hover { color: var(--pv-ink); }
.pv-body.is-playing .pv-footer { opacity: 0; pointer-events: none; }
/* Drie kolommen met gelijke zijkanten: de zin staat zo op de as van de bol,
   hoe breed de knoppen links of de naam rechts ook zijn. */
@media (min-width: 1200px) {
  .pv-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .pv-footer nav { justify-self: start; }
  .pv-footer [data-site-tagline] { text-align: center; }
  .pv-footer [data-site-credit] { justify-self: end; text-align: right; }
}
/* Daaronder past de zin in niet elke taal naast de knoppen (Frans brak op twee regels). */
@media (max-width: 1199px) {
  .pv-footer [data-site-tagline] { display: none; }
}
.mot-info-view { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--pv-paper) 72%, transparent); backdrop-filter: blur(10px); }
.mot-info-view[hidden] { display: none; }
.mot-info-shell { width: min(560px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; padding: 22px 26px 26px; color: #f2f1f5; background: #121218; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.mot-info-shell header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mot-info-shell header b { font: 800 19px/1 var(--sans); letter-spacing: -.05em; }
.mot-info-back { padding: 8px 12px; color: #111116; background: var(--mot-accent); border: 0; border-radius: 999px; font: 700 13px/1 var(--sans); cursor: pointer; }
.mot-info-kicker { margin: 0; color: var(--mot-accent); font: 750 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.mot-info-shell h2 { margin: 10px 0 0; font: 650 calc(26px * var(--pv-text))/1.12 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.mot-info-shell p { margin: 12px 0 0; color: #c9c8d1; font-size: calc(15px * var(--pv-text)); line-height: 1.55; }
.mot-info-more { display: inline-flex; gap: 8px; margin-top: 16px; color: var(--mot-accent); font: 650 14px/1.3 var(--sans); }

/* ─── Kleine onderdelen in de bol ─── */
.pv-learnrow { margin-top: 14px; }
.pv-learn { color: var(--pv-muted); font: 600 12.5px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.pv-learn:hover { color: #fff; }
.pv-intro-extra { min-height: 0; }
.pv-intro-extra:empty { display: none; }
.pv-due { display: inline-block; margin-top: 12px; color: var(--mot-accent); font: 650 12.5px/1 var(--sans); }
/* Een knop erft de lettergrootte niet: vaste maat, groot genoeg om te tikken. */
.pv-speak { width: 32px; height: 32px; margin-left: 10px; padding: 7px; vertical-align: middle; color: currentColor; background: rgba(255, 255, 255, .1); border: 0; border-radius: 50%; cursor: pointer; }
.pv-speak svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-speak svg path:first-child { fill: currentColor; }
.pv-times { max-width: 36em; }
.pv-times .pv-pill { padding: 8px 12px; font-size: calc(13px * var(--pv-text)); }
.pv-times .pv-pill[aria-pressed="false"] { opacity: .55; }
.pv-pickrow, .pv-endrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; }
.pv-pickrow .pv-lock { margin-top: 0; }
.pv-endrow .pv-ghost { margin-top: 4px; }
.pv-review { margin-top: 18px; color: var(--pv-muted); }

/* Andere speelwijzen onder de hoofdknop: eindeloos, herhalen, tijden. */
.pv-alts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.pv-alt { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 14px; color: #ecebf1; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; font: 650 calc(13px * var(--pv-text))/1.2 var(--sans); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.pv-alt:hover { background: rgba(255, 255, 255, .13); border-color: color-mix(in srgb, var(--mot-accent) 60%, transparent); }
.pv-alt i { color: var(--mot-accent); font-style: normal; font-weight: 800; }
.pv-alt:focus-visible, .pv-stop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pv-stop { margin-left: 10px; padding: 7px 12px; color: var(--pv-ink); background: color-mix(in srgb, var(--pv-ink) 8%, transparent); border: 0; border-radius: 999px; font: 700 12px/1 var(--sans); cursor: pointer; }
.pv-stop:hover { background: color-mix(in srgb, var(--pv-ink) 14%, transparent); }
.pv-pickblock { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 14px; }
.pv-pickhead { color: var(--pv-muted); font: 650 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.pv-regularity { min-width: min(320px, 100%); }
.pv-lock:disabled { opacity: .35; cursor: default; }

/* ─── Werkwoordchips, notities, bewaren ─── */
.pv-chip.is-soft { color: #c9c8d1; border-color: rgba(255, 255, 255, .16); }
.pv-chip.is-agreement { color: #fff; border-color: color-mix(in srgb, var(--mot-accent) 65%, transparent); background: color-mix(in srgb, var(--mot-accent) 16%, transparent); letter-spacing: .04em; text-transform: none; font-size: calc(12px * var(--pv-text)); }
.pv-chip.is-agreement small { color: var(--mot-accent); font-size: .8em; letter-spacing: .12em; text-transform: uppercase; }
.pv-notes { max-width: 32em; margin: 8px auto 0; padding: 0; list-style: none; text-align: left; }
.pv-notes li { margin-top: 6px; color: var(--pv-muted); font-size: calc(13px * var(--pv-text)); line-height: 1.45; }
.pv-notes b { color: #fff; font-weight: 650; }
.pv-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; margin-top: 8px; }
.pv-actions .pv-source { margin: 0; }
.pv-save { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; color: var(--pv-muted); background: none; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; font: 650 12px/1 var(--sans); cursor: pointer; }
.pv-save:hover { color: #fff; }
.pv-save.is-saved { color: #111116; background: var(--mot-accent); border-color: transparent; }

/* ─── Startscherm: voortgang, niveau, hervatten ─── */
.pv-statsblock { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 14px; }
.pv-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; max-width: 32em; margin: 0; color: var(--pv-muted); font: 600 calc(12px * var(--pv-text))/1.3 var(--sans); }
.pv-stats span { padding: 0 8px; white-space: nowrap; }
.pv-stats span + span { border-left: 1px solid rgba(255, 255, 255, .14); }
.pv-stats b { color: #fff; font-variant-numeric: tabular-nums; }
.pv-reset { min-height: 28px; padding: 4px 8px; margin-top: 2px; color: var(--pv-muted); background: none; border: 0; font: 600 calc(12px * var(--pv-text))/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pv-reset:hover { color: #ff9b92; }
.pv-alt.is-resume { color: #111116; background: color-mix(in srgb, var(--mot-accent) 85%, #fff); border-color: transparent; }
.pv-alt.is-resume i { color: #111116; }
.pv-level { position: relative; padding-right: 30px; }
.pv-level select { appearance: none; -webkit-appearance: none; color: inherit; background: none; border: 0; font: inherit; cursor: pointer; }
.pv-level select option { color: #111116; }
.pv-level::after { content: "⌄"; position: absolute; right: 12px; top: 5px; color: var(--mot-accent); pointer-events: none; }
.pv-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
.pv-play.is-done { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mot-accent) 70%, transparent); }
.pv-play.is-done b { color: #111116; background: var(--mot-accent); }
.pv-pickcount { margin-top: 6px; color: var(--pv-muted); font: 600 12px/1.3 var(--sans); }

/* Mijn woorden */
.pv-library { width: 100%; max-width: 32em; margin: 14px 0 0; padding: 0; list-style: none; text-align: left; }
.pv-library li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pv-library li > div { flex: 1; min-width: 0; }
.pv-library b { display: block; color: var(--mot-accent); font: 700 calc(15px * var(--pv-text))/1.25 var(--sans); }
.pv-library span { display: block; margin-top: 2px; color: #d9d8e0; font-size: calc(13px * var(--pv-text)); line-height: 1.4; }
.pv-remove { flex: 0 0 auto; width: 30px; height: 30px; color: var(--pv-muted); background: rgba(255, 255, 255, .06); border: 0; border-radius: 50%; font: 600 18px/1 var(--sans); cursor: pointer; }
.pv-remove:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* Eindscherm */
.pv-verdict-line { max-width: 28em; margin: 10px 0 0; color: #f1f0f5; font: 650 calc(16px * var(--pv-text))/1.35 var(--sans); text-wrap: balance; }
.pv-replay { width: 28px; height: 28px; margin-left: 8px; padding: 6px; }
.pv-best { margin: 8px 0 0; color: var(--pv-muted); font: 600 calc(12.5px * var(--pv-text))/1.3 var(--sans); }
.pv-best b { color: #fff; }
.pv-endrow .pv-play, .pv-endrow .pv-alt { margin-top: 0; min-height: 46px; padding-top: 0; padding-bottom: 0; }
.pv-endrow .pv-alt { padding-left: 20px; padding-right: 20px; font-size: calc(14px * var(--pv-text)); }
.pv-endrow .pv-ghost, .pv-pickrow .pv-ghost { margin-top: 0; min-height: 36px; }
.pv-pickrow .pv-lock { min-height: 36px; padding-top: 0; padding-bottom: 0; }

/* Instellingen: reset en klassieke versie */
.pv-setting-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pv-danger { padding: 9px 12px; color: #ffb0a8; background: rgba(255, 120, 110, .1); border: 0; border-radius: 10px; font: 650 12.5px/1 var(--sans); cursor: pointer; }
.pv-danger:hover { background: rgba(255, 120, 110, .2); }
.pv-setting-links a { color: #b9b8c2; font: 600 12.5px/1 var(--sans); }

/* ─── Polyglot: „Je kunt nog terug.” ─── */
.pv-body[data-theme="polyglot"] .pv-arena::after {
  content: "";
  position: absolute;
  inset: 3.6%;
  border-radius: 50%;
  background: conic-gradient(#ff8a45 0deg, #ffd047 51deg, #7ee8b0 103deg, #4dd6c1 154deg, #7599ff 206deg, #a97cf6 257deg, #ff6d9f 309deg, #ff8a45 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 97.6%, #000 98% 99.4%, transparent 99.8%);
  mask: radial-gradient(circle closest-side, transparent 0 97.6%, #000 98% 99.4%, transparent 99.8%);
  filter: saturate(0) brightness(.42);
  transition: filter .55s cubic-bezier(.32, .02, .44, 1);
  animation: pvIdleSpin 52s linear infinite reverse;
  pointer-events: none;
}
.pv-body.is-daring .pv-arena::after { filter: none; }
.pv-body.is-playing[data-theme="polyglot"] .pv-arena::after { opacity: 0; }
.pv-title-copy { display: inline-block; }
.pv-body.is-daring .pv-title.is-warning .pv-title-copy { animation: pvWarnBuild 2.6s linear 1, pvWarnShake 110ms steps(2, jump-none) 2.6s infinite; }
@keyframes pvWarnBuild { 0% { transform: none; } 25% { transform: translate(-.55px, .16px) rotate(-.06deg); } 50% { transform: translate(1px, -.26px) rotate(.1deg); } 75% { transform: translate(-1.55px, -.36px) rotate(-.15deg); } 100% { transform: translate(2.2px, .46px) rotate(.2deg); } }
@keyframes pvWarnShake { 0%, 100% { transform: none; } 20% { transform: translate(-2.2px, .5px) rotate(-.2deg); } 40% { transform: translate(1.9px, -.55px) rotate(.18deg); } 60% { transform: translate(-1.7px, -.35px) rotate(-.16deg); } 80% { transform: translate(2.1px, .55px) rotate(.19deg); } }

/* ─── Film en inkt ─── */
/* Onder de startfilm: de inhoud van de bol lost op onder de kopie. */
html[data-polyg-intro="out"] .pv-scene > * { transition: opacity .2s ease, filter .2s ease; opacity: 0; filter: blur(3px); }
/* Onder de film springt de bol meteen naar speelgrootte. */
.pv-body.pv-instant, .pv-body.pv-instant .pv-arena, .pv-body.pv-instant .pv-hud, .pv-body.pv-instant .pv-ring-turn, .pv-body.pv-instant .pv-orb::before { transition: none !important; }
.pv-ink { position: fixed; inset: 0; z-index: 70; background: #08080a; pointer-events: none; }
/* Terug van een leerpagina: meteen inkt, die daarna in de bol stroomt. */
html.polyg-ink-cover body::after { content: ""; position: fixed; inset: 0; z-index: 70; background: #08080a; animation: pvInkSafety 0s linear 2.5s forwards; }
@keyframes pvInkSafety { to { visibility: hidden; } }

/* ─── Toegankelijkheid (zelfde voorkeuren als de game) ─── */
html[data-contrast-mode="true"] { --pv-muted: #d6d5de; --pv-wrong: #ff9b92; }
html[data-contrast-mode="true"] .pv-option, html[data-contrast-mode="true"] .pv-pill { border-color: rgba(255, 255, 255, .55); }
html[data-contrast-mode="true"] .pv-tab, html[data-contrast-mode="true"] .pv-lang, html[data-contrast-mode="true"] .pv-footer { color: var(--pv-ink); }
html[data-dyslexia-mode="true"] .pv-body { --sans: Arial, Helvetica, sans-serif; }
html[data-dyslexia-mode="true"] .pv-scene { letter-spacing: .03em; word-spacing: .12em; }
html[data-dyslexia-mode="true"] .pv-title, html[data-dyslexia-mode="true"] .pv-sentence, html[data-dyslexia-mode="true"] .pv-lemma, html[data-dyslexia-mode="true"] .pv-quote { letter-spacing: 0; }
html[data-dyslexia-mode="true"] .pv-in, html[data-dyslexia-mode="true"] .pv-out, html[data-dyslexia-mode="true"] .pv-orb.is-shake, html[data-dyslexia-mode="true"] .pv-track.is-active, html[data-dyslexia-mode="true"] .pv-body.is-idle .pv-ring-turn { animation: none !important; }
/* Focusmodus: geen punten, reeksen of scoreoordelen; de uitleg blijft. */
html[data-focus-mode="true"] .pv-streak, html[data-focus-mode="true"] .pv-points, html[data-focus-mode="true"] .pv-score, html[data-focus-mode="true"] .pv-pill b { display: none !important; }

/* Past een vraag niet, dan krimpt de tekst in stappen (zie fitText). */
.pv-scene { --pv-fit: 1; }
/* Alles krimpt samen, zodat verhoudingen en uitlijning gelijk blijven. */
/* Kleine bedieningen blijven ook na krimpen (tot 72 %) groot genoeg om aan te tikken. */
.pv-reset, .pv-save, .pv-context { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.pv-scene[data-fit] .pv-inner { zoom: var(--pv-fit); }

/* Opbouw en afbouw van de inhoud. */
.pv-in { animation: pvWordIn .5s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes pvWordIn { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
.pv-out { animation: pvWordOut .3s cubic-bezier(.5, 0, .75, 0) both; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes pvWordOut { to { opacity: 0; transform: translateY(-16px); filter: blur(5px); } }

/* Vonk: verbindt het antwoord met zijn segment op de ring. */
.pv-spark {
  position: fixed;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--mot-accent);
  border-radius: 50%;
  box-shadow: 0 0 18px 6px color-mix(in srgb, var(--mot-accent) 60%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

/* ─── Middelgrote schermen: tabs op een eigen rij ─── */
@media (max-width: 1100px) {
  .pv-footer nav { flex-wrap: nowrap; }
  .pv-hud { grid-template-columns: 1fr auto; row-gap: 6px; padding: 10px 20px 0; }
  .pv-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pv-body.is-playing .pv-tabs { display: none; }
}

/* ─── Smalle schermen: de bol wordt een horizon ─── */
@media (max-width: 600px) {
  .pv-hud { padding: 8px 14px 0; gap: 8px; }
  /* De vervaging rechts toont dat er nog modi achter de rand staan. */
  .pv-tabs { justify-self: stretch; --fade: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); -webkit-mask-image: var(--fade); mask-image: var(--fade); }
  .pv-tabs.is-start { --fade: linear-gradient(90deg, #000 84%, transparent); }
  .pv-tabs.is-end { --fade: linear-gradient(90deg, transparent, #000 16%); }
  .pv-tabs.is-start.is-end { -webkit-mask-image: none; mask-image: none; }
  .pv-tab { padding: 8px 10px; font-size: 12.5px; }
  .pv-lang { min-width: 26px; padding: 0 5px; }
  /* Mobiel rijst de bol als een planeet op: de horizon staat bovenaan, het
     speelvlak vult de rest van het scherm. De scène blijft binnen het
     zichtbare deel (zie fitScene). */
  :root { --d: max(118vw, calc(100svh - 70px)); }
  .pv-arena { align-self: start; margin-top: 0; }
  .pv-scene { inset: 0; padding: 64px 4px 8px; }
  .pv-footer { position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; padding: 8px 14px 12px; color: rgba(255, 255, 255, .62); }
  .pv-footer [data-site-tagline], .pv-footer [data-site-credit] { display: none; }
  .pv-footer button:hover { color: #fff; }
  /* Extra speelwijzen als één kolom van gelijke breedte. */
  .pv-alts { flex-direction: column; align-items: stretch; width: min(300px, 100%); margin-left: auto; margin-right: auto; }
  .pv-alt { justify-content: center; }
  .pv-level { padding-right: 14px; }
  .pv-level::after { right: 16px; }
  .pv-endrow .pv-play, .pv-endrow .pv-alt { width: min(300px, 100%); justify-content: center; }
  /* Tijdens het spelen bovenaan, zodat het schermtoetsenbord niets afdekt. */
  .pv-body.is-playing .pv-inner { margin: 8px 0 auto; }
  .pv-lead { font-size: 13px; }
  .pv-sentence { margin-top: 16px; }
  .pv-options.is-grid { grid-template-columns: 1fr; }
  .pv-option { padding: 9px 12px; font-size: 13px; }
  .pv-pill { padding: 9px 12px; font-size: 14px; }
}

/* ─── Minder beweging: alleen rustige overgangen ─── */
@media (prefers-reduced-motion: reduce) {
  .pv-in, .pv-out, .pv-orb.is-shake, .pv-track.is-active, .pv-streak.is-pop, .pv-body.is-idle .pv-ring-turn { animation: none !important; }
  .pv-ring-turn, .pv-orb::before, .pv-fill { transition: none; }
}
html[data-motion-mode="reduce"] .pv-in, html[data-motion-mode="reduce"] .pv-out, html[data-motion-mode="reduce"] .pv-orb.is-shake,
html[data-motion-mode="reduce"] .pv-track.is-active, html[data-motion-mode="reduce"] .pv-streak.is-pop,
html[data-motion-mode="reduce"] .pv-body.is-idle .pv-ring-turn { animation: none !important; }
html[data-motion-mode="reduce"] .pv-ring-turn, html[data-motion-mode="reduce"] .pv-orb::before, html[data-motion-mode="reduce"] .pv-fill { transition: none; }