/*
 * Letterlijn — schermen en speelvlak. Alleen tokens uit tokens.css.
 *
 * Regel voor het speelvlak: niets mag van formaat veranderen doordat je speelt (Felix-journaal
 * 2026-08-28). Rij met letters, woordbouw, som-regel, meters en ketel hebben daarom vaste maten; alles
 * wat beweegt (vliegende letters, puntenpop, vonken) staat in een eigen laag erboven.
 */

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-block-size: 100dvh;
  max-inline-size: var(--breedte-max);
  margin: 0 auto;
  padding: var(--ruimte-3) var(--ruimte-5);
  gap: var(--ruimte-3);
}

/* Tijdens een rit heeft de schil een vaste hoogte, zodat het woordenbord de hoogte kan nemen
   die er is (een procenthoogte onder een min-height-schil is "auto", Felix-journaal). */
.app[data-scherm="spel"] {
  block-size: 100dvh;
}

.app[data-scherm="spel"] .voet {
  display: none;
}

.hoofd {
  min-block-size: 0;
}

.paneel {
  background: var(--paneel);
  border: 1px solid var(--paneel-rand);
  border-radius: var(--hoek-l);
  box-shadow: var(--schaduw-paneel);
  backdrop-filter: blur(14px) saturate(1.2);
}

.zacht {
  color: var(--kleur-tekst-zacht);
}

.klein {
  font-size: var(--tekst-s);
}

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}

/* ------------------------------------------------------------------ kop */

.kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2) var(--ruimte-4);
}

.logo {
  margin: 0;
  font-family: var(--font-spel);
  font-size: var(--tekst-logo);
  font-weight: 900;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--kleur-jij), var(--vuur-1) 50%, var(--kleur-jij));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--loc-romp-donker));
}

.kop__stand {
  margin: 0;
  display: flex;
  gap: var(--ruimte-2);
}

.pil {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ruimte-2);
  padding: var(--ruimte-1) var(--ruimte-4);
  border-radius: var(--hoek-rond);
  background: var(--paneel);
  border: 1px solid var(--paneel-rand);
  font-family: var(--font-spel);
  font-variant-numeric: tabular-nums;
}

.pil strong {
  font-size: var(--tekst-l);
  font-weight: 900;
}

.kop__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  margin-inline-start: auto;
}

.voet {
  font-size: var(--tekst-s);
  color: var(--kleur-tekst-zacht);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}

/* ------------------------------------------------------------------ start */

.scherm--start {
  display: grid;
  gap: var(--ruimte-5);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  padding-block: var(--ruimte-4);
}

.start__held {
  display: grid;
  gap: var(--ruimte-4);
  justify-items: start;
}

.start__titel {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  margin: 0;
}

.inleiding {
  font-size: var(--tekst-l);
  max-inline-size: 34rem;
  text-shadow: 0 2px 10px var(--kleur-achtergrond);
}

.startkeuze {
  display: grid;
  gap: var(--ruimte-4);
  padding: var(--ruimte-5);
  inline-size: min(100%, 34rem);
}

.startkeuze fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--ruimte-2);
}

.startkeuze legend {
  font-family: var(--font-spel);
  font-weight: 800;
  margin-block-end: var(--ruimte-2);
  padding: 0;
}

.segment {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}

.segment label {
  position: relative;
  cursor: pointer;
}

.segment input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.segment span {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: var(--ruimte-2) var(--ruimte-4);
  border-radius: var(--hoek-rond);
  border: 1px solid var(--kleur-rand);
  background: var(--kleur-vlak);
  font-family: var(--font-spel);
  font-weight: 700;
  transition: background var(--duur-kort), transform var(--duur-kort) var(--veer);
}

.segment input:checked + span {
  background: linear-gradient(135deg, var(--kleur-jij), var(--kleur-jij-2));
  color: var(--kleur-tekst-op-licht);
  border-color: transparent;
  box-shadow: var(--gloed-jij);
}

.segment input:focus-visible + span {
  outline: var(--focus-dik) solid var(--kleur-focus);
  outline-offset: 3px;
}

.start__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  align-items: center;
}

.start__zijkant {
  display: grid;
  gap: var(--ruimte-4);
}

.start__plaat {
  position: relative;
  block-size: clamp(160px, 26vh, 240px);
  /* De lichtbundel van de loc loopt rechts door; zonder knippen schoof de pagina op een telefoon
     zijwaarts (Vera B1: 390 → 497 px). Alleen zijwaarts knippen: de stoom stijgt boven de plaat uit. */
  overflow-x: clip;
}

.start__plaat .trein {
  --trein-breedte: min(100%, 360px);
  inset-inline-start: 50%;
  translate: -50% 0;
  inset-block-end: 16px;
}

.start__plaat .scene__rails {
  inset-inline: 0;
  inset-block-end: 10px;
}

.stoom {
  position: absolute;
  /* Uit de schoorsteen: die staat vooraan, op 78% van de breedte van de loc. */
  inset-inline-start: calc(var(--mond-x, 0.78) * 100% - 1.5rem);
  inset-block-start: calc(var(--mond-y, 0) * 100% - 1.5rem);
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rook), transparent 70%);
  opacity: 0;
  animation: stoom 3.6s ease-out infinite;
}
.stoom:nth-child(2) { animation-delay: 1.2s; }
.stoom:nth-child(3) { animation-delay: 2.4s; }
@keyframes stoom {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-70px, -90px) scale(2.2); }
}

.records {
  padding: var(--ruimte-4) var(--ruimte-5);
}

.records h2 {
  font-size: var(--tekst-l);
}

.records table {
  border-collapse: collapse;
  inline-size: 100%;
  font-variant-numeric: tabular-nums;
}

.records th,
.records td {
  text-align: start;
  padding: var(--ruimte-1) var(--ruimte-2);
  border-block-end: 1px solid var(--paneel-rand);
}

.records th {
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
  font-size: var(--tekst-s);
}

.records tbody th {
  color: var(--kleur-tekst);
}

.records__groepen {
  display: grid;
  gap: var(--ruimte-3);
  margin-block-end: var(--ruimte-3);
}

.records__groep h3 {
  font-size: var(--tekst-m);
  color: var(--kleur-jij);
  margin-block-end: var(--ruimte-1);
}

/* ------------------------------------------------------------------ spel */

.scherm--spel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--ruimte-3);
  block-size: 100%;
  min-block-size: 0;
}

/* Afstelronde 2: woordenbord boven, de rij met letters eronder, de ketel groot rechts. */
.spel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ketel-breedte);
  gap: var(--ruimte-3);
  min-block-size: 0;
}

.spel__links {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-3);
  min-block-size: 0;
  min-inline-size: 0;
}

.speelpaneel {
  flex: none;
  display: grid;
  gap: var(--ruimte-2);
  padding: var(--ruimte-3) var(--ruimte-4);
  justify-items: stretch;
}

.speelpaneel > .rek {
  justify-self: start;
}

.speelpaneel__regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-3);
}

.ketelpaneel {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3);
  min-block-size: 0;
}

/* De ketel is zo groot als het vak toelaat, in beide richtingen: container-eenheden, want met
   alleen aspect-ratio en een procenthoogte stak hij op 1920×1080 zijwaarts uit zijn paneel. */
.ketelpaneel__kist {
  flex: 1 1 auto;
  min-block-size: 0;
  display: grid;
  place-items: center;
  container-type: size;
}

.ketelpaneel .vuurkist {
  inline-size: min(100cqi, 100cqb * 300 / 380);
  block-size: auto;
}

.rek {
  display: flex;
  gap: var(--ruimte-2);
  /* De tegel is een render met zijn voorkant eronder (tools/blender/ASSETS.md §5): hoger dan breed. */
  block-size: calc(var(--tegel) / var(--tegel-verhouding, 0.909) + var(--ruimte-1));
}

/* Lege gerenderde tegel (styles/beeld.css) met de letter als echte tekst, in het midden van het
   bovenvlak: de ruimte eronder (--tegel-onder) komt uit het manifest. */
.tegel {
  inline-size: var(--tegel);
  block-size: auto;
  aspect-ratio: var(--tegel-verhouding, 0.909);
  display: grid;
  place-items: center;
  padding: 0 0 calc(var(--tegel) * var(--tegel-onder, 0.155));
  font-family: var(--font-letters);
  font-size: calc(var(--tegel) * 0.52);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tegel-letter);
  background-color: transparent;
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0;
  border-radius: var(--tegel-hoek);
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.4));
  transition: transform var(--duur-kort) var(--veer), filter var(--duur-kort);
}

.tegel:hover {
  transform: translateY(-3px);
}

.tegel[data-gebruikt="ja"] {
  color: var(--kleur-tekst);
  filter: none;
  transform: translateY(calc(var(--tegel) * var(--tegel-zak, 0.1)));
}

.tegel.tik {
  animation: tik 220ms var(--veer);
}

@keyframes tik {
  50% { transform: scale(0.9); }
}

/* Het woord dat je bouwt: vakjes met kleine tegels; het echte invoerveld ligt eroverheen. */
.woordbouw {
  position: relative;
  inline-size: calc(7 * (var(--tegel) * 0.78) + 6 * var(--ruimte-1) + 2 * var(--ruimte-3));
  max-inline-size: 100%;
  block-size: calc(var(--tegel) * 0.78 + 2 * var(--ruimte-3));
  padding: var(--ruimte-3);
  border-radius: var(--hoek-m);
  background: var(--kleur-sluier);
  border: 1px solid var(--paneel-rand);
}

.woordbouw__vakken {
  display: flex;
  gap: var(--ruimte-1);
  block-size: 100%;
}

.woordbouw__vak {
  inline-size: calc(var(--tegel) * 0.78);
  block-size: 100%;
  border-radius: calc(var(--tegel-hoek) * 0.8);
  border: 2px dashed var(--kleur-vakje-rand);
  display: grid;
  place-items: center;
  font-family: var(--font-letters);
  font-size: calc(var(--tegel) * 0.42);
  font-weight: 900;
  text-transform: uppercase;
}

.woordbouw__vak[data-vol="ja"] {
  border: 0;
  color: var(--tegel-letter);
  /* Het tegelbeeld (styles/beeld.css), passend in het vierkante vakje. */
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  padding-block-end: calc(var(--tegel) * 0.78 * var(--tegel-onder, 0.155) * var(--tegel-verhouding, 0.909));
  animation: plop 200ms var(--veer);
}

@keyframes plop {
  from { transform: scale(0.6); }
}


.woordbouw[data-toon="goed"] {
  border-color: var(--kleur-goed);
}

.woordbouw[data-toon="fout"] {
  border-color: var(--kleur-fout);
}

.invoer {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: 0 var(--ruimte-3);
  border: 0;
  border-radius: var(--hoek-m);
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: var(--tekst-l);
}

.invoer::selection {
  background: transparent;
}

.schud {
  animation: schud var(--duur-schud) ease-in-out;
}

@keyframes schud {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-0.5rem); }
  40% { transform: translateX(0.5rem); }
  60% { transform: translateX(-0.3rem); }
  80% { transform: translateX(0.3rem); }
}

.knoppenrij .knop {
  font-size: var(--tekst-s);
  padding-inline: var(--ruimte-3);
}

.som {
  block-size: calc(var(--tekst-l) * var(--regel));
  flex: 1 1 22rem;
  min-inline-size: 0;
  margin: 0;
  font-family: var(--font-spel);
  font-size: var(--tekst-l);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.som[data-toon="goed"] { color: var(--kleur-goed); }
.som[data-toon="bonus"] { color: var(--kleur-bonus); }
.som[data-toon="fout"] { color: var(--kleur-fout); }

.meters {
  display: grid;
  gap: var(--ruimte-2);
  inline-size: 100%;
}

.doel {
  margin: 0;
  font-variant-numeric: tabular-nums;
  /* Altijd ruimte voor twee regels: "Nog 9 punten" en "Nog 274 punten" breken in een smalle
     ketelkolom verschillend af, en dan schoof de ketel 11 px (e2e "speelvlak verandert niet"). */
  min-block-size: calc(2 * var(--tekst-l) * var(--regel));
}

.doel strong {
  font-family: var(--font-spel);
  font-size: var(--tekst-l);
  color: var(--kleur-jij);
}

.combo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--ruimte-3);
}

.combo__tekst {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.combo__tekst strong {
  display: inline-block;
  min-inline-size: 3.2rem;
  font-family: var(--font-spel);
  font-size: var(--tekst-l);
  font-weight: 900;
  color: var(--vuur-2);
}

.combo__meter {
  block-size: var(--meter-hoogte);
  background: var(--kleur-vakje-leeg);
  border-radius: var(--hoek-rond);
  overflow: hidden;
}

.combo__vulling {
  --rest: 0;
  block-size: 100%;
  inline-size: 100%;
  border-radius: var(--hoek-rond);
  background: linear-gradient(to right, var(--vuur-4), var(--vuur-3), var(--vuur-2), var(--vuur-1));
  transform-origin: left center;
  transform: scaleX(var(--rest));
}

/* Pauze: letters en bord zijn weg, zodat pauze geen bedenktijd wordt. */
.scherm--spel[data-pauze="ja"] .rek,
.scherm--spel[data-pauze="ja"] .bord__rijen,
.scherm--spel[data-pauze="ja"] .bord__bonus {
  visibility: hidden;
}

/* ------------------------------------------------------------------ woordenbord */

.bord {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--ruimte-3) var(--ruimte-5);
  min-block-size: 0;
  overflow-y: auto;
}

.bord__titel {
  font-size: var(--tekst-l);
  display: flex;
  gap: var(--ruimte-2);
  align-items: baseline;
}

.bord__rij {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--ruimte-2);
  margin-block-end: var(--ruimte-2);
}

.bord__rijkop {
  font-family: var(--font-tekst);
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
  margin: 0;
  padding-block-start: 0.35em;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bord__vakjes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vakje {
  --lengte: 3;
  inline-size: calc(var(--lengte) * 0.74em + var(--ruimte-4));
  block-size: 1.85em;
  display: grid;
  place-items: center;
  font-family: var(--font-letters);
  font-weight: 800;
  font-size: var(--tekst-m);
  letter-spacing: 0.04em;
  background: var(--kleur-vakje-leeg);
  border: 1px solid var(--kleur-vakje-rand);
  border-radius: var(--hoek-s);
  color: var(--kleur-tekst-op-licht);
}

.vakje[data-gevonden="ja"] {
  background: linear-gradient(to bottom, var(--tegel-licht), var(--tegel-donker));
  border-color: var(--tegel-rand);
}

.vakje[data-nieuw="ja"] {
  box-shadow: 0 0 0 2px var(--kleur-jij), var(--gloed-jij);
  animation: plop 320ms var(--veer);
}

.bord__bonus {
  font-size: var(--tekst-s);
  color: var(--kleur-bonus);
  margin: auto 0 0;
  padding-block-start: var(--ruimte-2);
}

/* ------------------------------------------------------------------ verslagen */

.scherm--verslag {
  display: grid;
  place-items: start center;
  padding-block: var(--ruimte-4);
}

.kaart {
  inline-size: min(100%, 48rem);
  display: grid;
  gap: var(--ruimte-4);
  justify-items: start;
  padding: var(--ruimte-6);
}

.kaart__titel {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 0;
}

.cijfers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  margin: 0;
}

.cijfer {
  display: grid;
  gap: 0;
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--hoek-m);
  background: var(--kleur-sluier);
  border: 1px solid var(--paneel-rand);
  min-inline-size: 8rem;
}

.cijfer dt {
  font-size: var(--tekst-xs);
  font-weight: 700;
  color: var(--kleur-tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cijfer dd {
  margin: 0;
  font-family: var(--font-spel);
  font-size: var(--tekst-xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.verslag__score {
  font-family: var(--font-spel);
  font-size: var(--tekst-xxl);
  font-weight: 900;
  margin: 0;
  color: var(--kleur-jij);
  font-variant-numeric: tabular-nums;
}

.verslag__kern {
  font-size: var(--tekst-l);
  margin: 0;
}

.verslag__record {
  color: var(--kleur-jij);
  font-weight: 700;
  margin: 0;
}

.verslag__record:empty {
  display: none;
}

.verslag__lijsten {
  display: grid;
  gap: var(--ruimte-4);
  inline-size: 100%;
}

.verslag__lijsten h2 {
  font-size: var(--tekst-l);
  margin-block-end: var(--ruimte-2);
}

.woordenlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}

.woordenlijst li {
  padding: 0.1rem 0.6rem;
  border-radius: var(--hoek-rond);
  background: var(--kleur-vakje-leeg);
  font-family: var(--font-letters);
  font-weight: 700;
}

.woordenlijst li[data-lang="ja"] {
  background: linear-gradient(135deg, var(--kleur-jij), var(--kleur-jij-2));
  color: var(--kleur-tekst-op-licht);
}

.woordenlijst li[data-bonus="ja"] {
  color: var(--kleur-bonus);
}

/* ------------------------------------------------------------------ dialogen */

.dialoog {
  color: var(--kleur-tekst);
  background: var(--kleur-vlak-hoog);
  border: 1px solid var(--paneel-rand);
  border-radius: var(--hoek-l);
  box-shadow: var(--schaduw-paneel);
  padding: var(--ruimte-6);
  max-inline-size: min(92vw, 30rem);
}

.dialoog::backdrop {
  background: var(--kleur-sluier);
  backdrop-filter: blur(6px);
}

.dialoog h2 {
  font-size: var(--tekst-xl);
}

.dialoog .knoppenrij {
  margin-block-start: var(--ruimte-4);
}

.dialoog__opties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  margin-block-start: var(--ruimte-3);
}

.spelregels {
  max-inline-size: min(94vw, 44rem);
  max-block-size: 88dvh;
  overflow-y: auto;
}

.spelregels h3 {
  font-size: var(--tekst-l);
  margin-block: var(--ruimte-4) var(--ruimte-2);
  color: var(--kleur-jij);
}

.spelregels p,
.spelregels li {
  max-inline-size: 38rem;
}

.spelregels table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--ruimte-3);
}

.spelregels th,
.spelregels td {
  text-align: start;
  padding: var(--ruimte-1) var(--ruimte-3);
  border-block-end: 1px solid var(--paneel-rand);
}

.voorbeeld {
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--hoek-m);
  background: var(--kleur-sluier);
  font-family: var(--font-spel);
  font-weight: 700;
}

.geen-script {
  padding: var(--ruimte-5);
}

/* Ondergrens: een tablet staand (besluit Arjen: "Dit spel hoeft niet speelbaar te zijn op een
   telefoon. Alleen op computer en tablet."; tools/blender/ASSETS.md §10.7). Alleen op een
   aanraakscherm smaller dan 600 px (37,5rem), dus een telefoon, staat er een melding in plaats van
   het spel. Tablets staand zijn 600 px (7–8 inch Android) tot 820 px (iPad mini 744, iPad 820) en
   spelen; telefoons staand zijn hooguit ±440 px (Vera N2, ronde 2b). Een laptop of computer met een
   muis houdt het spel op elke breedte, ook als hij naar 200% zoomt (1280 → 640, 1440 → 720;
   WCAG 2.2 SC 1.4.4, Vera M2, teamkeuze optie 2). */
.te-smal {
  display: none;
}

/* Alleen een .app die op de melding volgt, verdwijnt: dat is de spelpagina. De bronnenpagina en de
   404-pagina laden dezelfde spel.css, maar hebben geen melding, en houden op een telefoon dus hun
   inhoud (Vera M1, live-QA 2026-11-06: de bronnenpagina was daar leeg). */
@media (pointer: coarse) and (max-width: 37.49rem) {
  .te-smal ~ .app {
    display: none;
  }

  .te-smal {
    display: grid;
    place-content: center;
    gap: var(--ruimte-3);
    min-block-size: 100dvh;
    padding: var(--ruimte-5);
    text-align: center;
    font-size: var(--tekst-l);
    color: var(--kleur-tekst);
  }

  .te-smal__logo {
    font-size: var(--tekst-xxl);
  }
}

/* ------------------------------------------------------------------ lage en smalle schermen */

@media (max-height: 760px) {
  :root {
    --scene-hoogte: clamp(170px, 31vh, 250px);
    /* Nooit breder dan zeven tegels op het scherm passen: zonder de min() won deze regel op een
       smalle, lage telefoon (320×568) van de telefoonregel in tokens.css, en stak de rij met
       letters uit tot 357 px (Vera M5; zat ook in het origineel). */
    --tegel: min(clamp(2.5rem, 3.2vw, 3.1rem), calc((100vw - 6.5rem) / 7));
  }

  .vakje {
    block-size: 1.75em;
  }

  .bord__rij {
    margin-block-end: var(--ruimte-2);
  }

  .bord__titel {
    margin-block-end: var(--ruimte-2);
  }
}

/* Een compacter woordenbord op een laptopscherm (tot 1000 px hoog, bord naast de ketel). De grotere
   scène van ronde 2 kost het bord hoogte (1440×900: 217 px, was 262), en met de oude maten schoof
   het bij een rij van 7 letters vrijwel altijd (Vera, mag-punt ronde 2). Lagere vakjes en kleinere
   marges geven vijf rijen ruimte; alleen een rij die over twee regels loopt, schuift nog. */
@media (min-width: 56rem) and (max-height: 62.5rem) {
  .bord {
    padding-block: var(--ruimte-2);
  }

  .bord__titel {
    margin-block-end: var(--ruimte-1);
  }

  .bord__rij {
    margin-block-end: var(--ruimte-1);
  }

  .bord__rijkop {
    padding-block-start: 0.2em;
  }

  .vakje {
    block-size: 1.5em;
  }

  .bord__bonus {
    padding-block-start: var(--ruimte-1);
  }
}

/* Onder de 75rem passen de sneltoetsen niet meer naast elke knop; ze staan in de spelregels
   en op het beginscherm. De knoppen zelf blijven, met naam. */
@media (max-width: 75rem) {
  .speelpaneel .knop kbd,
  .kop__knoppen .knop kbd {
    display: none;
  }

  .knoppenrij .knop {
    padding-inline: var(--ruimte-3);
    gap: var(--ruimte-1);
  }
}

@media (max-width: 56rem) {
  .scherm--start,
  .spel {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Smal: eerst typen, dan het bord. Anders staat de invoer onder de vouw. */
  .speelpaneel {
    order: -1;
  }

  .ketelpaneel {
    flex-direction: row;
    align-items: center;
  }

  .ketelpaneel__kist {
    flex: 0 0 11rem;
    block-size: 14rem;
  }

  .app[data-scherm="spel"] {
    block-size: auto;
  }

  .bord {
    overflow-y: visible;
  }
}

@media (max-width: 40rem) {
  .app {
    padding-inline: var(--ruimte-3);
  }

  .speelpaneel {
    grid-template-columns: minmax(0, 1fr);
  }

  .ketelpaneel {
    flex-direction: row;
    align-items: center;
  }

  .ketelpaneel__kist {
    flex: 0 0 8rem;
    block-size: 10rem;
  }

  .bord__rij {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ruimte-1);
  }

  .kop__knoppen {
    margin-inline-start: 0;
  }

  /* Op een telefoon alleen het icoon; de naam blijft voor schermlezers. */
  .kop__knoppen .knop__tekst {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .schud,
  .tegel.tik,
  .woordbouw__vak[data-vol="ja"],
  .vakje[data-nieuw="ja"],
  .stoom {
    animation: none;
  }
}

/* De knoppen van de spelregels blijven in beeld, ook als je naar beneden leest. */
.spelregels > .knoppenrij {
  position: sticky;
  inset-block-end: calc(var(--ruimte-6) * -1);
  margin-block-end: calc(var(--ruimte-6) * -1);
  padding-block: var(--ruimte-3) var(--ruimte-6);
  background: var(--kleur-vlak-hoog);
  box-shadow: 0 -16px 16px -8px var(--kleur-vlak-hoog);
}