:root { --bg:#0c1820; --rood:#e5484d; --geel:#ffc53d; --tekst:#f4f7fa; --dof:#9fb3c2; --knop:#22394a; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--tekst);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
canvas { position:fixed; inset:0; width:100%; height:100%; display:block; }
.scherm { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(8,18,25,.78); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); overflow:auto; }
.scherm[hidden] { display:none; }
.kaart { width:100%; max-width:420px; text-align:center; margin:auto; }
h1 { margin:0 0 4px; font-size:clamp(28px,8vw,44px); letter-spacing:-.5px; line-height:1.1; }
.geel { color:var(--geel); }
.rood { color:var(--rood); }
.drie { display:inline-block; font-size:.5em; vertical-align:middle; background:var(--rood); color:#fff; border-radius:8px; padding:3px 9px; letter-spacing:0; }
p { margin:6px 0 18px; color:var(--dof); line-height:1.45; }
.rij { display:flex; gap:8px; margin:0 0 14px; }
.rij.onder { margin-top:10px; }
button { font:inherit; font-weight:700; color:var(--tekst); border:0; border-radius:12px; cursor:pointer;
  padding:14px 12px; flex:1; background:var(--knop); }
button:active { transform:scale(.96); }
button.aan { background:var(--geel); color:#1b1400; }
button.groot { display:block; width:100%; font-size:20px; padding:18px; background:var(--rood); margin-top:6px; }
.label { font-size:13px; text-transform:uppercase; letter-spacing:1.2px; color:var(--dof); margin:0 0 6px; text-align:left; }
.uitleg { font-size:14px; margin-top:16px; }
kbd { background:var(--knop); border-radius:5px; padding:1px 6px; font:inherit; font-weight:700; color:var(--tekst); }
#pauzeknop { position:fixed; top:12px; right:12px; width:44px; height:44px; flex:none; padding:0; border-radius:50%;
  background:rgba(34,57,74,.85); font-size:16px; }
#pauzeknop[hidden] { display:none; }