/* Deelnemer-app: telefoon in een verduisterde vergaderruimte. Zelfde wereld als het
   beamerscherm (donker, goud, smalle kapitalen), maar met duimformaat knoppen. */
:root {
  --ink:#0C0B09; --soil:#16130F; --soil2:#1F1B15; --line:#332C22;
  --bone:#EAE3D6; --dim:#A79C8B; --faint:#6E655A;
  --gold:#D8A63C; --good:#36B37E; --watch:#FFAB00; --risk:#FF5630; --blue:#4C9AFF;
  --disp:"Avenir Next Condensed","HelveticaNeue-CondensedBold","Arial Narrow",system-ui,sans-serif;
  --body:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,ui-serif,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--body); font-size:17px; line-height:1.55;
  display:flex; flex-direction:column; -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(120% 50% at 50% 0%, rgba(216,166,60,.10), transparent 60%);
}
main { position:relative; flex:1; display:flex; flex-direction:column; gap:14px; padding:22px 18px 8px; overflow-y:auto; }
.mid { margin:auto 0; }
.kick { font-family:var(--disp); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:0 0 10px; }
.sub { font-family:var(--disp); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); font-weight:700; margin:0; }
h1, .big { font-family:var(--disp); font-size:clamp(1.7rem,7vw,2.4rem); line-height:1.02; text-transform:uppercase; letter-spacing:-.005em; margin:0; font-weight:700; text-wrap:balance; }
p { margin:0 0 10px; }
.dim { color:var(--dim); } .faint { color:var(--faint); }
.sm { font-size:14px; line-height:1.5; } .xs { font-size:12px; line-height:1.6; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
strong { color:#fff; font-weight:600; }

.card { border:1px solid var(--line); background:var(--soil); border-radius:3px; padding:15px 16px; }
.waarde { font-family:var(--mono); font-size:clamp(2.4rem,13vw,3.6rem); line-height:1; color:#fff; }

.keuzes { display:flex; flex-direction:column; gap:10px; }
button, .knop {
  font:inherit; font-family:var(--disp); font-size:16px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  background:var(--soil2); border:1px solid var(--line); color:var(--bone);
  border-radius:3px; padding:16px 14px; cursor:pointer; text-align:left; width:100%;
  display:flex; align-items:baseline; gap:10px; transition:border-color .15s, background .15s;
}
button .hint { font-family:var(--mono); font-size:12px; letter-spacing:0; color:var(--dim); text-transform:none; margin-left:auto; }
button:active:not(:disabled) { background:#2A241C; }
button.aan { border-color:var(--gold); background:rgba(216,166,60,.14); color:#fff; }
button.go { background:var(--gold); border-color:var(--gold); color:var(--ink); justify-content:center; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible, input:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

input[type=text] {
  font:inherit; font-size:18px; width:100%; background:var(--soil); border:1px solid var(--line);
  color:var(--bone); border-radius:3px; padding:14px 14px;
}
input[type=range] { width:100%; accent-color:var(--blue); height:38px; }
.schaal { display:flex; justify-content:space-between; font-size:12px; color:var(--faint); font-family:var(--disp); letter-spacing:.1em; text-transform:uppercase; }

.rol { border:1px solid var(--line); border-radius:3px; padding:22px 20px; background:var(--soil); text-align:center; }
.rol.sab { border-color:var(--risk); background:rgba(255,86,48,.08); }
.rol.eerlijk { border-color:var(--good); background:rgba(54,179,126,.07); }

.fiche-rij { display:flex; align-items:center; gap:12px; border-bottom:1px dashed var(--line); padding:12px 0; }
.fiche-rij .t { flex:1; font-size:15px; color:#fff; }
.fiche-rij button { width:46px; padding:12px 0; justify-content:center; }
.fiche-rij .n { font-family:var(--mono); font-size:22px; color:var(--gold); min-width:2ch; text-align:center; }

footer { position:relative; padding:10px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #241F19; font-family:var(--mono); font-size:11px; color:var(--faint); }
.pil { display:inline-block; border-radius:999px; padding:2px 9px; font-family:var(--disp); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.spot { animation:spot .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes spot { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .spot { animation:none; } }