:root {
  --bg: #1b1740;
  --bg2: #2a2270;
  --card: #ffffff;
  --ink: #1e1b3a;
  --muted: #6b6a85;
  --primary: #ff7a1a;
  --primary-dark: #d95f00;
  --accent: #23c6a2;
  --accent-dark: #16997c;
  --danger: #ff4d6d;
  --gold: #ffcc33;
  --purple: #7b5cff;
  --radius: 22px;
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
  --font: "Nunito", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: radial-gradient(1200px 700px at 50% -10%, var(--bg2), var(--bg));
  color: #fff;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; }
.hidden { display: none !important; }
.muted { opacity: 0.7; }

.app { max-width: 720px; margin: 0 auto; min-height: 100dvh; padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom); }
.screen { display: flex; flex-direction: column; min-height: 100dvh; padding: 10px 0 16px; }

/* Topbar / hero */
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.hero { display: flex; gap: 12px; align-items: center; flex: 1; }
.hero-emoji { font-size: 56px; line-height: 1; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
h1 { margin: 0; font-size: 30px; letter-spacing: 0.5px; }
.level-line { font-weight: 800; font-size: 15px; margin-top: 2px; }
.xp-bar { height: 12px; background: rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; margin-top: 4px; min-width: 160px; }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #ff9f1a); border-radius: 8px; transition: width .4s; width: 0; }
.topbar-actions { display: flex; gap: 8px; }
.icon-btn { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; font-weight: 900; }
.icon-btn:active { transform: translateY(2px); }

.section-title { font-size: 17px; margin: 14px 0 8px; opacity: .85; text-transform: uppercase; letter-spacing: 1px; }

/* Tafelgrid */
.table-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.table-btn {
  position: relative; background: var(--card); color: var(--ink); border-radius: 16px;
  padding: 8px 4px 6px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 3px solid transparent; transition: transform .08s;
}
.table-btn .num { font-size: 26px; font-weight: 900; line-height: 1; }
.table-btn .stars { font-size: 11px; letter-spacing: -1px; height: 14px; }
.table-btn .mini-bar { width: 80%; height: 5px; background: #e8e6f5; border-radius: 4px; overflow: hidden; }
.table-btn .mini-bar i { display: block; height: 100%; background: var(--accent); }
.table-btn.selected { border-color: var(--primary); background: #fff4ea; transform: scale(1.04); }
.table-btn.selected::after { content: "✓"; position: absolute; top: -8px; right: -6px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 900; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.table-btn.done .num { color: var(--accent-dark); }

.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.gap { gap: 8px; margin-top: 10px; }
.chip { background: rgba(255,255,255,.14); color: #fff; padding: 9px 14px; border-radius: 999px; font-weight: 800; font-size: 14px; }
.chip.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chip.toggle input { width: 18px; height: 18px; accent-color: var(--primary); }
.chip.danger { background: rgba(255,77,109,.25); margin-top: 20px; }

/* Modes */
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mode-btn { border-radius: var(--radius); padding: 14px 8px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--shadow); min-height: 130px; }
.mode-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.mode-btn:disabled { opacity: .45; }
.mode-learn { background: linear-gradient(160deg, #2fc9ff, #1a78d8); }
.mode-hunt { background: linear-gradient(160deg, #ff8a3d, #e8420f); }
.mode-diploma { background: linear-gradient(160deg, #a577ff, #5d34d6); }
.mode-rocket { background: linear-gradient(160deg, #ff5fa2, #b3126b); }

/* Tafelraket */
.rocket-screen { height: 100dvh; min-height: 0; padding-bottom: 8px; overflow: hidden; }
.rocket-bar { grid-template-columns: 48px 1fr 90px; margin-bottom: 6px; }
.rocket-info { display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: 15px; line-height: 1.2; }
.rocket-score { color: var(--gold); font-size: 13px; }
.rocket-shields { text-align: right; font-size: 20px; letter-spacing: 1px; }
.rocket-wrap { flex: 1; min-height: 0; border-radius: var(--radius); overflow: hidden; background: radial-gradient(900px 500px at 50% 0%, #251c66, #0d0b26); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.rocket-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.mode-emoji { font-size: 40px; line-height: 1; }
.mode-name { font-weight: 900; font-size: 18px; }
.mode-desc { font-size: 12px; opacity: .9; text-align: center; }
.hint { text-align: center; opacity: .75; font-size: 14px; margin: 12px 0 0; min-height: 1.4em; }

/* Bars */
.bar { display: grid; grid-template-columns: 48px 1fr 70px; align-items: center; gap: 8px; margin-bottom: 8px; }
.bar h2 { margin: 0; text-align: center; font-size: 22px; }
.quiz-status { text-align: center; font-weight: 800; font-size: 16px; }
.timer { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; font-size: 18px; color: var(--gold); }

/* Tafelkaart */
.card-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.card-rows { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.card-row { display: flex; justify-content: space-between; padding: 6px 12px; border-radius: 10px; font-size: 20px; font-weight: 800; background: transparent; color: var(--ink); text-align: left; }
.card-row.active { background: #fff0e0; outline: 3px solid var(--primary); }
.card-row .lvl { font-size: 12px; letter-spacing: -1px; }
.card-dots { min-height: 340px; position: sticky; top: 8px; background: rgba(255,255,255,.1); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; }
.dot-group { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.dot-caption { font-size: 26px; font-weight: 900; text-align: center; }
.dot-sub { font-size: 14px; opacity: .8; text-align: center; }
@media (max-width: 520px) {
  .card-body { grid-template-columns: 1fr; }
  .card-rows { order: 2; }
  .dot { width: 10px; height: 10px; }
}

.bottom-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.big-btn { padding: 18px; border-radius: var(--radius); font-size: 20px; font-weight: 900; background: rgba(255,255,255,.14); color: #fff; box-shadow: var(--shadow); }
.big-btn.primary { background: linear-gradient(160deg, #ffa24d, var(--primary)); }
.big-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.18); }

/* Monster */
.monster-box { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; background: rgba(0,0,0,.25); border-radius: var(--radius); padding: 10px 14px; position: relative; }
.monster { font-size: 72px; line-height: 1; text-align: center; transition: transform .1s; }
.monster.hit { animation: shake .4s; }
.monster.dead { animation: die .8s forwards; }
@keyframes shake { 0%,100%{transform:translateX(0) rotate(0)} 20%{transform:translateX(-10px) rotate(-8deg)} 40%{transform:translateX(10px) rotate(8deg)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
@keyframes die { to { transform: scale(0) rotate(360deg); opacity: 0; } }
.monster-name { font-weight: 900; font-size: 18px; }
.hp-bar { height: 16px; background: rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; margin: 6px 0; }
.hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff4d6d, #ff8a3d); transition: width .3s; }
.hearts { font-size: 20px; letter-spacing: 2px; }
.combo { position: absolute; right: 12px; top: -12px; background: var(--gold); color: #5a3a00; font-weight: 900; padding: 4px 10px; border-radius: 999px; font-size: 14px; animation: pop .3s; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Vraag */
.question-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px 0; }
.progress { width: 100%; height: 8px; background: rgba(255,255,255,.15); border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); width: 0; transition: width .3s; }
.question { font-size: clamp(44px, 12vw, 72px); font-weight: 900; letter-spacing: 1px; }
.answer-box { min-width: 150px; min-height: 76px; background: var(--card); color: var(--ink); border-radius: 18px; font-size: 48px; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 4px 20px; box-shadow: inset 0 4px 0 rgba(0,0,0,.08); }
.answer-box .caret { width: 3px; height: 44px; background: var(--primary); margin-left: 4px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.answer-box.good { background: #d8ffe9; color: var(--accent-dark); }
.answer-box.bad { background: #ffe0e6; color: var(--danger); animation: shake .4s; }
.feedback { min-height: 32px; font-size: 22px; font-weight: 900; text-align: center; }
.feedback.good { color: #6cf3c9; }
.feedback.bad { color: #ff9fb3; }

/* Keuzeknoppen */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choices button { padding: 20px; font-size: 34px; font-weight: 900; border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.choices button:active { transform: translateY(3px); }
.choices button.good { background: #23c6a2; color: #fff; }
.choices button.bad { background: var(--danger); color: #fff; }
.choices button:disabled { opacity: .85; }

/* Numpad */
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numpad button { padding: 14px; font-size: 30px; font-weight: 900; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); min-height: 62px; }
.numpad button:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.numpad .key-back { background: #ffe8d6; }
.numpad .key-ok { background: var(--accent); color: #fff; }
@media (min-height: 800px) { .numpad button { min-height: 74px; } }

/* Resultaat */
.result { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.result-emoji { font-size: 110px; line-height: 1; animation: bounce .8s; }
@keyframes bounce { 0%{transform:scale(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }
.result h2 { font-size: 34px; margin: 0; }
.result-text { font-size: 18px; opacity: .9; margin: 0; }
.result-stars { font-size: 44px; letter-spacing: 4px; }
.result-sticker { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 12px 20px; font-weight: 900; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.result-sticker span { font-size: 40px; }
.mistakes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.mistakes .m { background: rgba(255,255,255,.12); padding: 8px 12px; border-radius: 12px; font-weight: 800; }

/* Stickers */
.stickers-body { flex: 1; }
.stickers-body h3 { margin: 16px 0 8px; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.sticker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sticker { background: var(--card); color: var(--ink); border-radius: 16px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 34px; box-shadow: var(--shadow); }
.sticker small { font-size: 11px; font-weight: 800; }
.sticker.locked { background: rgba(255,255,255,.1); color: #fff; filter: grayscale(1); opacity: .5; }
.diploma-list { display: flex; flex-direction: column; gap: 6px; }
.diploma { background: var(--card); color: var(--ink); border-radius: 14px; padding: 10px 14px; font-weight: 800; display: flex; justify-content: space-between; }

/* Confetti & toast */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .6; } }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: var(--gold); color: #4a2f00; font-weight: 900; padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow); z-index: 60; font-size: 18px; animation: pop .3s; }

@media (max-width: 400px) {
  .table-grid { grid-template-columns: repeat(4, 1fr); }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-btn { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 16px; }
  .mode-desc { text-align: left; }
  h1 { font-size: 26px; }
}