/* ═══ Camp War paneelsysteem (F10b+c Taak 6, 22-08-2026) ══════════════════
   Jordin keurde de vorige ronde af als "echt hele zware AI-slob": de
   voorgecomponeerde panel-*.webp-mockups stonden als volledige
   schermachtergrond (hun gebakken slotgrid schemerde door alle content
   heen), er lagen halfdoorzichtig-witte balken en gestippelde
   placeholder-knoppen overheen, en losse knoppen zweefden buiten elke
   uitlijning. Vanaf nu zijn die mockups REFERENTIE-ART: ze worden nergens
   meer als achtergrond of border-image gebruikt, alleen als bron waaruit
   het palet en de vormentaal hieronder gemeten zijn.

   Elke kleur is een pixel-sample uit Marwans art, geen verzonnen waarde:
     --cw-ink            #0a0705  panel-quests (3,200)      buitenlijn kader
     --cw-wood-deep      #231c14  dominante kleur #201810   paneelbodem
     --cw-wood           #2e261b  dominante kleur #302818   paneelvlak
     --cw-wood-raise     #3d3324  panel-quests (200,102)    kaart-/rijvlak
     --cw-wood-raise-top #4a3e2c  panel-quests (200,78)     bovenrand kaart
     --cw-brass          #6b5a2a  panel-quests (15,200)     frameband
     --cw-brass-lit      #9c8542  bovenbevel van die band
     --cw-brass-dim      #2c250c  panel-quests (18,200)     framerand-schaduw
     --cw-moss           #57611a  actieve tab (70,322)      accent/bevestigen
     --cw-moss-lit       #7c8a26  bovenbevel van dat accent
     --cw-gold           #f2d98a  questbeloning (430,95)    getallen/titels
     --cw-parchment      #f3f0e2  titeltekst (210,36)       primaire tekst
     --cw-parchment-dim  #a89f8c  tabtekst (230,322)        secundaire tekst
     --cw-danger         #8f2f24  de rode sluitknop         afbreken/wissen
   --cw-tap is het tikdoel-minimum: het spel is primair voor de telefoon en
   844x390 (liggend) is de maatstaf. */

/* Media-drempels (media queries kennen geen custom properties; hier letterlijk vastgelegd, F134):
   (max-height:420px)  telefoon liggend; alle doelschermen (360-412 hoog) vallen eronder, ook 844x390.
   (max-height:520px)  laag scherm: grote telefoon, klein tablet liggend, laag desktopvenster.
   pointer:coarse combineert ermee. De 600 px-blokken (tablet) blijven buiten scope. */
:root{
  --cw-ink:#0a0705;--cw-wood-deep:#231c14;--cw-wood:#2e261b;--cw-wood-raise:#3d3324;--cw-wood-raise-top:#4a3e2c;
  --cw-brass:#6b5a2a;--cw-brass-lit:#9c8542;--cw-brass-dim:#2c250c;--cw-moss:#57611a;--cw-moss-lit:#7c8a26;
  --cw-gold:#f2d98a;--cw-parchment:#f3f0e2;--cw-parchment-dim:#a89f8c;--cw-danger:#8f2f24;
  --cw-danger-lit:#a83b2e;--cw-on-danger:#ffe4de;--cw-error-text:#ff9a8a;
  --cw-tap:44px;
  --cw-fs-label:10px;--cw-fs-body:11px;--cw-fs-lead:12px;--cw-fs-title:14px;--cw-fs-display:20px;
  --cw-r-sm:4px;--cw-r-md:8px;--cw-r-lg:14px;--cw-r-pill:999px;
  --cw-radius:var(--cw-r-lg);
  --hud-btn-border:1px solid rgba(255,255,255,.20);--hud-btn-bg:radial-gradient(circle at 40% 32%,rgba(255,255,255,.16),rgba(5,12,8,.86) 68%);--hud-btn-shadow:0 6px 18px rgba(0,0,0,.24),inset 0 0 0 2px rgba(255,255,255,.035)
}
/* HUD-maten na zoom:var(--hud-scale) op .hudZoneBody: --cw-tap-hud levert op elke schaal 44 px gerenderd,
   de fonttokens renderen nooit onder de vloer bij schaal < 1 en groeien mee bij schaal > 1. */
.hud{
  --cw-tap-hud:calc(var(--cw-tap) / var(--hud-scale));
  --cw-fs-hud-label:max(var(--cw-fs-label), calc(var(--cw-fs-label) / var(--hud-scale)));
  --cw-fs-hud-body:max(var(--cw-fs-body), calc(var(--cw-fs-body) / var(--hud-scale)));
}