:root{
  --bg:#0f172a;
  --panel:#111827cc;
  --text:#e5e7eb;
  --accent:#f59e0b;
  --accent-2:#22c55e;
  --danger:#ef4444;
  --focus:#93c5fd;
}
[data-contrast="high"]{
  --bg:#000;
  --panel:#000;
  --text:#fff;
  --accent:#ff0;
  --accent-2:#0f0;
  --danger:#f00;
  --focus:#0ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, #1f2937 0%, var(--bg) 40%, #0b1022 100%);
  color:var(--text);
  overflow:hidden;
}
header{
  position:fixed; inset:0 0 auto 0; padding:12px 16px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, #0000007a, #00000000);
  z-index:20;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
}
.brand .logo{
  width:28px; height:28px; border-radius:50%;
  background:conic-gradient(from 0deg, #f59e0b, #22c55e, #3b82f6, #f59e0b);
  box-shadow:0 0 16px #f59e0b66;
}
.toolbar{display:flex; gap:8px; align-items:center}
button, .btn{
  appearance:none; border:1px solid #ffffff22; color:var(--text);
  background:#111827aa; padding:10px 14px; border-radius:10px; cursor:pointer;
  backdrop-filter: blur(6px);
  transition:transform .05s ease, background .2s ease, border-color .2s ease;
  font-weight:600;
}
button:hover{background:#1f2937aa}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.primary{border-color:#f59e0b88; background:linear-gradient(180deg,#f59e0b22,#0000)}
.danger{border-color:#ef444477; background:linear-gradient(180deg,#ef444422,#0000)}
.success{border-color:#22c55e77; background:linear-gradient(180deg,#22c55e22,#0000)}
main{
  position:relative; width:100vw; height:100vh; overflow:hidden;
}
#arena{
  position:absolute; inset:0; margin:0;
}
/* Panelen */
.panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--panel); padding:20px; border-radius:16px; border:1px solid #ffffff22;
  width:min(560px, 92vw); z-index:10; text-align:center;
  box-shadow:0 10px 40px #0009;
}
.panel h1{margin:8px 0 6px; font-size:clamp(22px, 3.4vw, 28px)}
.panel p{opacity:.9}
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px}
.chip{
  border:1px solid #ffffff22; padding:6px 10px; border-radius:999px; font-size:.9rem;
  background:#0b1022aa;
}
.stats{
  position:fixed; inset:auto 12px 12px 12px; display:flex; gap:8px; flex-wrap:wrap;
  z-index:15; justify-content:center;
}
.stat{
  background:#111827aa; border:1px solid #ffffff22; border-radius:12px; padding:8px 12px;
  display:flex; align-items:center; gap:8px; min-width:120px; justify-content:center;
  backdrop-filter: blur(6px);
}
.stat .val{font-weight:800; color:var(--accent)}
.stat .ok{color:var(--accent-2)}
.stat .bad{color:var(--danger)}
/* Stroopwafel */
#wafel{
  position:absolute; width:90px; height:90px; border-radius:50%; transform:translate(-50%,-50%) scale(1);
  background:
    radial-gradient(circle at 30% 30%, #f9b24d 0 32%, #c97a23 33% 100%),
    repeating-conic-gradient(from 0deg, #b86b1a 0 6deg, #d6903b 6deg 12deg);
  box-shadow: 0 10px 18px #0008, inset 0 0 0 4px #00000022;
  border:3px solid #00000030;
  display:grid; place-items:center; user-select:none; touch-action:none;
}
#wafel::after{
  content:"🍯"; font-size:26px; transform:translateY(0); filter: drop-shadow(0 1px 0 #0006);
}
.pop{animation:pop .18s ease}
@keyframes pop{50%{transform:translate(-50%,-50%) scale(1.14)}}
.miss{animation:shake .25s ease}
@keyframes shake{
  20%{transform:translate(-50%,-50%) rotate(6deg)}
  40%{transform:translate(-50%,-50%) rotate(-6deg)}
  60%{transform:translate(-50%,-50%) rotate(3deg)}
  80%{transform:translate(-50%,-50%) rotate(-3deg)}
}
/* Confetti */
canvas#confetti{position:absolute; inset:0; pointer-events:none}
/* Footer tip */
.tip{position:fixed; bottom:58px; left:50%; transform:translateX(-50%); opacity:.7; font-size:.9rem}
@media (max-width:480px){
  #wafel{width:76px; height:76px}
  .stat{min-width:100px}
}