/*
 * game.css — Alles past op één telefoonscherm.
 *
 * Het bord is tien kolommen breed op een scherm dat er misschien 360 is. Dat
 * is krap en dat is geaccepteerd (zie GameDesignDocument.md). Wat het krap
 * mág zijn maar niet mag worden, is onleesbaar: daarom staat de celgrootte in
 * één variabele die meeschaalt met de schermbreedte, en niet in vaste pixels.
 */

:root {
  --achtergrond: #0b1020;
  --paneel: #151c33;
  --lijn: #263050;
  --tekst: #e8eef5;
  --gedempt: #8ea0c0;
  --waarschuwing: #f59e0b;
  --gevaar: #ef4444;
  --goed: #34d399;

  /* De oliestaaf staat rechts van het bord en eet dus breedte. Die trekken we
     er hier af, zodat tien kolommen plus de staaf samen op het scherm passen. */
  --zijkolom: 26px;
  --kolomgat: 6px;
  /* Startwaarde; render.js rekent hem meteen na op de échte beschikbare
     breedte. 100vw telt de schuifbalk mee en clientWidth niet, en het verschil
     sneed precies de oliestaaf eraf — die staat het meest rechts. */
  --cel: min(calc((100vw - 20px - var(--zijkolom) - var(--kolomgat) - 24px) / 10), 38px);
  --gat: 2px;
  --bord: calc(var(--cel) * 10 + var(--gat) * 9);
  --totaal: calc(var(--bord) + var(--kolomgat) + var(--zijkolom));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: env(safe-area-inset-top) 10px calc(10px + env(safe-area-inset-bottom));
  background: var(--achtergrond);
  color: var(--tekst);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 100vh;
  /* Dubbeltikken om te draaien mag niet als zoomgebaar worden opgevat. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Kop ─────────────────────────────────────────────────────────────────── */

.kop {
  width: 100%;
  max-width: var(--totaal);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
}


/* De titel is het enige in de kop dat mag wijken. Op 320px passen de score, de
   geluidsknop en "Cascadia Numerica" niet samen, en van die drie is de titel het
   minst nodig — hij staat ook in het tabblad. Zonder deze drie regels duwt hij
   de score buiten beeld in plaats van zelf in te korten. */
h1 {
  font-size: 15px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 0;
}

.stand { display: flex; gap: 14px; margin: 0; flex: none; }
.stand div { display: flex; align-items: baseline; gap: 5px; }
.stand dt { color: var(--gedempt); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.stand dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
/* De teller stuitert als er goud landt. Zonder dat heeft de vlucht geen slot.
   De klasse landt op #goud zelf, want dat is het element dat animeerOogst als
   doelwit krijgt. */
#goud.raak {
  display: inline-block; animation: raak var(--tempo-landing, 260ms) cubic-bezier(.3, 1.6, .5, 1); }

@keyframes raak {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); color: #ffd54a; text-shadow: 0 0 12px #ffd54a; }
  100% { transform: scale(1); }
}

/* De geluidsknop staat in de kop en niet in een menu: een spel dat in een
   klaslokaal kan draaien moet met één tik stil te krijgen zijn. Klein maar met
   een tikvlak van 44px eromheen — de rand valt buiten de knop. */
.geluidknop {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -8px -10px 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.geluidknop[aria-pressed="true"] { opacity: 0.4; }

#onderweg { color: #ffd54a; opacity: 0.75; }
.stand small { color: var(--gedempt); font-weight: 400; white-space: nowrap; }

/* ── Levelbalk en wachtrij ───────────────────────────────────────────────── */

/* De zijkolom: alles wat geen bord is. Wat eraan komt stroomt naar beneden —
   net als het bord — en de olie eronder is het enige dat stijgt. Dat mag, want
   een peil is geen stroom maar een hoeveelheid. */
.zijkolom {
  display: flex;
  flex-direction: column;
  gap: var(--kolomgat);
  width: var(--zijkolom);
  flex: none;
}

.wachtrij {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  flex: none;
}
.wachtrij[hidden] { display: none; }

/* De verste toekomst bovenaan, de huidige operatie onderaan tegen het bord aan.
   Die laatste is ook de knop: hij toont wat er gebeurt én voert het uit, zodat
   er geen aparte knoppenrij nodig is. */
.operatie {
  display: grid;
  place-items: center;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--lijn);
  background: #0f1526;
  color: var(--kleur);
  font: 13px/1 system-ui, sans-serif;
  opacity: 0.55;
  padding: 0;
}
button.operatie.nu {
  height: 44px;                 /* duimformaat: dit is een knop */
  font-size: 20px;
  font-weight: 700;
  opacity: 1;
  color: var(--kleur);
  border-color: var(--kleur);
  background: #0f1526;
  box-shadow: 0 0 8px color-mix(in srgb, var(--kleur) 45%, transparent);
  cursor: pointer;
}
body[data-bezig] button.operatie.nu { opacity: 0.5; }

/* ── Melding ─────────────────────────────────────────────────────────────── */

.melding {
  margin: 0;
  min-height: 1.4em;                 /* geen sprong als de tekst leeg is */
  font-size: 13px;
  color: var(--gedempt);
  text-align: center;
}
.melding.goed { color: var(--goed); }
.melding.waarschuwing { color: var(--waarschuwing); }
.melding.verloren { color: var(--gevaar); font-weight: 600; }
.melding.gewonnen { color: var(--goed); font-weight: 600; }

/* ── Bord en oliestaaf ───────────────────────────────────────────────────── */

.speelveld {
  display: flex;
  align-items: stretch;
  gap: var(--kolomgat);
  position: relative;                /* het eindscherm hangt hieraan */
}

/* De olievoorraad als staaf en niet als getal: je hoeft hem niet te lezen, je
   ziet hem. Zwart, want het is olie.

   De bruine kop bovenaan is wat je eerstvolgende zet verstookt. Dat is de hele
   truc van deze weergave: je ziet niet een prijs maar hoeveel er van jóuw
   voorraad afgaat — en of dat je laatste zet is. */
.oliestaaf {
  position: relative;
  flex: 1;
  /* De lége buis is licht. Zonder dat contrast leest zwarte olie tegen een
     zwarte achtergrond als niets — en dan is de staaf geen informatie. */
  background: #223052;
  border: 1px solid var(--lijn);
  border-radius: calc(var(--zijkolom) / 2);
  overflow: hidden;
}

.oliestaaf .peil {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #10131c, #04060a);
  /* Een lichte rand op het oppervlak: dat maakt het peil afleesbaar tot op de
     millimeter, ook als de staaf bijna vol is. */
  box-shadow: inset 0 2px 0 #8fa6c9;
  transition: height 320ms cubic-bezier(.3, .8, .3, 1);
}

.oliestaaf .kop {
  position: absolute;
  left: 0; right: 0;
  background: linear-gradient(180deg, #b4703a, #7c4a12);
  transition: height 320ms cubic-bezier(.3, .8, .3, 1),
              bottom 320ms cubic-bezier(.3, .8, .3, 1);
}

/* Vol is een eigen toestand: vroeg in een potje verdien je meer dan je
   verstookt en loopt de tank over. Zonder dit merkteken lijkt een volle staaf op
   een staaf die toevallig hoog staat. */
.oliestaaf.vol { box-shadow: inset 0 0 0 1px #8fa6c9aa, 0 0 6px #8fa6c955; }

/* Kost de volgende zet meer dan er nog in zit, dan is de hele staaf bruin: dit
   is je laatste zet. */
.oliestaaf.laatste { border-color: var(--gevaar); }
.oliestaaf.laatste .kop { background: linear-gradient(180deg, #e06a4a, #a3341a); }

/* Een druppel die van een match naar de staaf vliegt. Zelfde truc als de
   goudvliegers: position fixed, los van het bord, want het bord snijdt af. */
.druppel {
  position: fixed;
  z-index: 50;
  width: 7px; height: 7px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  background: linear-gradient(180deg, #6b7386, #2a2f3d);
  box-shadow: 0 0 4px #0008;
  pointer-events: none;
  transition: transform var(--tempo-druppel, 460ms) cubic-bezier(.4, -0.1, .3, 1),
              opacity var(--tempo-druppel, 460ms) ease-in;
}

/* ── Bord ────────────────────────────────────────────────────────────────── */

.bord {
  position: relative;         /* het combogetal hangt hierin */
  display: grid;
  grid-template-columns: repeat(var(--kolommen), var(--cel));
  grid-auto-rows: var(--cel);
  gap: var(--gat);
  padding: var(--gat);
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  /* Vallende cellen komen van buiten het bord; zonder dit zweven ze erboven. */
  overflow: hidden;
}

/* De kleur zit in het cijfer, niet in de vulling.
   Dat is geen smaak maar noodzaak: de cursor is een lichte rand, en een cel met
   een lichte vulling slikt die op. Met een donkere cel valt de selectie altijd
   op, wat er ook onder ligt. De vulling houdt een vleugje van de kleur zodat je
   hoog en laag ook uit een ooghoek uit elkaar houdt. */
.cel {
  background: #0f1526;
  background: color-mix(in srgb, var(--kleur, transparent) 15%, #0f1526);
  border-radius: 3px;
  display: grid;
  place-items: center;
  font: 700 calc(var(--cel) * 0.5)/1 ui-rounded, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--kleur, transparent);
  position: relative;
}

.cel.leeg { background: #0d132400; }

.cel.goud {
  background: color-mix(in srgb, var(--kleur) 24%, #0f1526);
  box-shadow: inset 0 0 0 1px #fde68a66;
  text-shadow: 0 0 6px #ffd54a99;
}

/* De dode nul: geen kleur, geen belofte. Hij hoort weg te vallen tegen het bord
   zodat je er letterlijk overheen kijkt — dat is precies wat hij waard is. */
.cel.dood {
  background: #10162a;
  color: #47527a;
  text-shadow: none;
}

/* De cirkel. Een rand alleen is op 34px te subtiel; de lichte
   opgloeiing eromheen maakt de selectie ook met een duim erop nog zichtbaar. */
.cel.cursor {
  box-shadow: inset 0 0 0 2px #fff, 0 0 6px #ffffff66;
  z-index: 2;
}

/* Het stipje markeert het enige vakje dat bevestigt. Elke andere cel — ook de
   drie andere onder de cirkel — verplaatst hem. */
.cel.hoek::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px #ffffffaa;
}

/* De draai: het oude cijfer vloeit over in het nieuwe, met een zwelling in het
   midden. Dat je iets veránderd hebt is de kern van het spel, dus dit mag
   opvallen — maar het gebeurt elke beurt, dus het mag niet lang duren. Het
   tempo staat in config.js (TEMPO.draai). */
.cel.verandert {
  animation: verandert var(--tempo-draai, 420ms) cubic-bezier(.4, 0, .2, 1);
  z-index: 3;
}

@keyframes verandert {
  0%   { color: var(--oudkleur, var(--kleur)); transform: scale(1); }
  40%  { color: var(--oudkleur, var(--kleur)); transform: scale(1.22); filter: brightness(1.6); }
  70%  { color: var(--kleur); transform: scale(1.22); filter: brightness(1.6); }
  100% { color: var(--kleur); transform: scale(1); }
}

/* Het bereik van de cirkel als één lichtvlak in plaats van per-cel doven. Het is
   een leeg rechthoekje ter grootte van het bereikbare gebied; de box-shadow
   eromheen doeft de rest van het bord, en het bord snijdt die schaduw af
   (overflow: hidden). Verplaatst het anker, dan schuift dit venster over x én y
   naar zijn nieuwe plek en nestelt het zich daar — zo zie je dat je opties
   meebewegen met waar je klikt. Gedoofd, niet verborgen: door de half-
   doorzichtige schaduw zie je nog wát er buiten bereik ligt om mee te plannen.
   Tempo in config.js (TEMPO.bereik). */
.bereik {
  position: absolute;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--paneel) 62%, transparent);
  z-index: 1;
  transition:
    top var(--tempo-bereik, 260ms) cubic-bezier(.3, .7, .3, 1),
    left var(--tempo-bereik, 260ms) cubic-bezier(.3, .7, .3, 1),
    width var(--tempo-bereik, 260ms) cubic-bezier(.3, .7, .3, 1),
    height var(--tempo-bereik, 260ms) cubic-bezier(.3, .7, .3, 1);
}

/* Rotatie: de inhoud schuift van zijn oude plek naar zijn nieuwe. Dat je iets
   verpláátst hebt in plaats van veranderd, is op deze celgrootte alleen aan de
   beweging te zien. */
.cel.verschuift {
  animation: verschuift var(--tempo-draai, 420ms) cubic-bezier(.3, .8, .3, 1);
  z-index: 3;
}

@keyframes verschuift {
  from {
    transform: translate(
      calc(var(--dk) * (var(--cel) + var(--gat)) * -1),
      calc(var(--dr) * (var(--cel) + var(--gat)) * -1));
  }
  to { transform: translate(0, 0); }
}

/* De uitslag groeit met de diepte van de cascade: --kracht komt uit render.js.
   Nadruk in plaats van duur — een langere animatie kan gaan vervelen, een
   heviger uitslag niet. */
.cel.pop {
  animation: pop calc(var(--tempo-pop, 220ms) * var(--kracht, 1)) ease-out;
  z-index: 4;
}

@keyframes pop {
  0%   { transform: scale(1); }
  45%  {
    transform: scale(calc(1 + 0.32 * var(--kracht, 1)));
    filter: brightness(calc(1 + 0.9 * var(--kracht, 1)));
  }
  100% { transform: scale(0.15); opacity: 0; }
}

/* Het combogetal midden over het bord. Het enige dat een uitzonderlijke beurt
   van een gewone onderscheidt op het moment zelf. */
.combo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 calc(var(--cel) * 2) / 1 system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 0 18px #7ea8ff, 0 0 40px #3b6fd0;
  pointer-events: none;
  z-index: 6;
  animation: combo calc(var(--tempo-pop, 220ms) * 3) cubic-bezier(.2, .9, .3, 1) forwards;
}

@keyframes combo {
  0%   { opacity: 0; transform: scale(calc(0.4 * var(--kracht, 1))); }
  25%  { opacity: 1; transform: scale(calc(1.1 * var(--kracht, 1))); }
  70%  { opacity: 1; transform: scale(var(--kracht, 1)); }
  100% { opacity: 0; transform: scale(calc(1.4 * var(--kracht, 1))); }
}

.cel.valt { animation: valt var(--tempo-val, 160ms) cubic-bezier(.3, .7, .4, 1); }

@keyframes valt {
  from { transform: translateY(calc(var(--val) * (var(--cel) + var(--gat)) * -1)); }
  to   { transform: translateY(0); }
}

/* ── Uitleg ──────────────────────────────────────────────────────────────── */

/* Open zolang je nog nooit een potje uitspeelde, daarna dicht. De
   opteltabel is er om te leren; zodra je speelt is het meubilair, en het nam een
   vijfde van het scherm. */
.uitleg {
  width: 100%;
  max-width: var(--totaal);
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: 8px;
}

.uitleg summary {
  cursor: pointer;
  padding: 9px 10px;
  font-size: 12px;
  color: var(--gedempt);
  min-height: 36px;
  display: flex;
  align-items: center;
}
.uitleg[open] summary { border-bottom: 1px solid var(--lijn); }

.legenda { padding: 8px 9px; }

/* De rekentabel: negen sommen, drie per rij. Dit is tegelijk de spelregel en de
   rekenles, dus hij mag ruimte kosten — maar niet zoveel dat het bord van het
   scherm valt. Vandaar drie kolommen en kleine cijfers. */
.sommen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 6px;
}

.som {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  white-space: nowrap;
}
.som .drietal {
  color: var(--kleur);
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.som .wordt { color: var(--gedempt); }
.som .uitkomst { display: inline-flex; align-items: center; gap: 1px; }
.som .uitkomst b { color: var(--kleur); font-weight: 700; }
.som .munt { color: #ffd54a; font-style: normal; font-size: 10px; }

.legenda-uitleg {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--gedempt);
}
.legenda-uitleg b { color: var(--tekst); font-weight: 600; }

/* ── Vliegende oogst ─────────────────────────────────────────────────────── */

/* Een kopie van een geoogst cijfer, onderweg naar zijn vat. Staat los van het
   bord (fixed) omdat het bord overflow:hidden heeft en hem anders afsnijdt. */
.vlieger {
  position: fixed;
  z-index: 50;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font: 700 calc(var(--cel) * 0.5)/1 ui-rounded, system-ui, sans-serif;
  pointer-events: none;
  transition:
    transform var(--tempo-vlucht, 620ms) cubic-bezier(.5, -0.2, .3, 1),
    opacity var(--tempo-vlucht, 620ms) ease-in;
}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */

.knoppen { display: flex; gap: 8px; }
/* Geen vaste knoppenrij meer: de enige knop hier verschijnt pas als het potje
   voorbij is. */
#opnieuw[hidden] { display: none; }

button {
  font: inherit;
  padding: 11px 22px;
  border-radius: 8px;
  border: 1px solid var(--lijn);
  background: var(--paneel);
  color: var(--tekst);
  min-height: 44px;              /* duimformaat */
  cursor: pointer;
}
button.primair {
  background: #2b3a63;
  border-color: #3d4f80;
  font-weight: 600;
}
button:disabled { opacity: 0.45; cursor: default; }

/* ── Het eindscherm ──────────────────────────────────────────────────────── */

/* Over het hele speelveld heen, inclusief de oliestaaf: die staat op nul en
   heeft niets meer te melden. De achtergrond is halfdoorzichtig zodat het
   eindbord doorschemert — je laatste zet en het goud dat nog onderweg was
   blijven zo in beeld, en dat is waar je op dat moment naar wilt kijken. */
.einde {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  background: color-mix(in srgb, var(--achtergrond) 72%, transparent);
  backdrop-filter: blur(1px);
  animation: eindeOp var(--tempo-schuif, 380ms) ease-out both;
}
.einde[hidden] { display: none; }

/* Groot en goudkleurig: dit is het enige getal dat er op dit moment toe doet.
   clamp() omdat tien kolommen op een telefoon al krap zijn — het getal mag
   groot zijn maar nooit breder dan het bord. */
.eindgoud {
  margin: 0;
  font-size: clamp(34px, 13vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  color: #ffd54a;                    /* dezelfde goudkleur als #onderweg */
  font-variant-numeric: tabular-nums;
}

.eindregel {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--tekst);
}
.eindregel.record { color: var(--goed); }

/* De terugblik. Gedempt en klein: hij hoort erbij te staan zonder de uitslag
   zelf te beconcurreren. */
.totaal {
  margin: 0 0 4px;
  color: var(--gedempt);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  max-width: 22em;
}

.einde button { margin-top: 4px; padding: 0 24px; }

@keyframes eindeOp {
  from { opacity: 0; }
  to   { opacity: 1; }
}



@media (prefers-reduced-motion: reduce) {
  .cel.pop, .cel.valt, .cel.verandert, .cel.verschuift,
  .combo, #goud.raak, .einde { animation: none; }
  .combo { opacity: 1; }
  /* De vliegers en het schuiven lopen op transitions, niet op keyframes, en
     worden vanuit JS gezet — vandaar !important: dit moet die stijlen winnen. */
  .vlieger, .cel, .bereik { transition: none !important; }
}

/* De taalschakelaar in het uitlegpaneel. Klein en terughoudend: hij hoort
   vindbaar te zijn maar niet te concurreren met de uitleg eronder. */
.taalknop {
  min-height: 32px;
  padding: 0 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  border: 1px solid var(--lijn);
  background: transparent;
  color: var(--gedempt);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}