/* Rekenkampioen — stijlen */
:root {
  --green: #00ff41;
  --yellow: #ffd700;
  --red: #ff3131;
  --cyan: #00e5ff;
  --bg: #0a0a0a;
  --grid-bg: #0d1a0d;
  --panel: #050f05;
  --line: #1a3a1a;
  --line2: #0d2a0d;
  --hover: #0a1f0a;
  --ok-bg: #001a00;
  --soft: #6a8a6a;
  --muted: #888;      /* uitleg en labels */
  --dim: #555;        /* uitgeschakeld / inactief */
  --faint: #444;
  --edge: #333;       /* randen van inactieve knoppen */
  --white: #fff;
  --good: #4dff4d;    /* analyse: goed */
  --bad-bg: #1a0000;  /* fout vakje */
  --hm-none: #111; --hm-good: #0d3d0d; --hm-mid: #3d2e00; --hm-bad: #3d0d0d;  /* heatmap */
}
/* ── KLEURTHEMA'S (keuze in de menubalk) ── */
html[data-theme="ice"] {
  --green: #4fc3ff; --yellow: #ffffff; --cyan: #b388ff; --bg: #020a18;
  --grid-bg: #06142a; --panel: #041026; --line: #12305a; --line2: #0c2246;
  --hover: #0a1c3a; --ok-bg: #062040; --soft: #6f8fb0;
}
html[data-theme="gameboy"] {
  --green: #9bbc0f; --yellow: #e0f8d0; --cyan: #8bac0f; --bg: #0f380f;
  --grid-bg: #134513; --panel: #144214; --line: #306230; --line2: #245224;
  --hover: #1c4f1c; --ok-bg: #1a4a1a; --soft: #8bac0f;
  --muted: #8bac0f; --dim: #4a7a2a; --faint: #306230; --edge: #306230; --hm-none: #134513;
}
/* grijze tinten zijn onleesbaar op het groene gameboy-scherm */
html[data-theme="gameboy"] .player-sel-btn:not(.active),
html[data-theme="gameboy"] .tbl-all,
html[data-theme="gameboy"] .player-export { border-color: var(--line); color: var(--cyan); }
html[data-theme="gameboy"] .tbl-btn:not(.on) { color: var(--line); }
html[data-theme="amber"] {
  --green: #ffb000; --yellow: #ffd56b; --cyan: #ff7a1a; --bg: #0c0803;
  --grid-bg: #1a1003; --panel: #140c02; --line: #3a2708; --line2: #2a1c06;
  --hover: #22160a; --ok-bg: #1f1400; --soft: #8a7350;
}
html[data-theme="synth"] {
  --green: #ff3cac; --yellow: #fff15c; --cyan: #2de2e6; --bg: #0d0221;
  --grid-bg: #1a0840; --panel: #150533; --line: #3a1868; --line2: #2a1050;
  --hover: #220a48; --ok-bg: #2a0830; --soft: #8a78b0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--green);
  font-family: 'Press Start 2P', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

@keyframes flicker {
  0%,100% { opacity:1; } 92% { opacity:1; } 93% { opacity:.97; } 94% { opacity:1; }
}
body { animation: flicker 8s infinite; }

/* ── HEADER ── */
#header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 20px;
  border-bottom: 2px solid var(--green);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 54px;
}

#logo {
  font-size: 11px;
  color: var(--yellow);
  text-shadow: 0 0 10px var(--yellow);
  letter-spacing: 2px;
  cursor: pointer;
  user-select: none;
}
#logo:hover { text-shadow: 0 0 20px var(--yellow), 0 0 40px var(--yellow); }

.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Mode switch */
.mode-switch {
  display: flex;
  border: 2px solid var(--green);
}
.mode-btn {
  background: transparent;
  border: none;
  color: var(--green);
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background .1s;
}
.mode-btn.active { background: var(--green); color: var(--bg); }
.mode-btn:not(.active):hover { background: color-mix(in srgb, var(--green) 15%, transparent); }

/* Size switch */
.size-switch {
  display: flex;
  border: 2px solid var(--cyan);
}
.size-btn {
  background: transparent;
  border: none;
  color: var(--cyan);
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background .1s;
}
.size-btn.active { background: var(--cyan); color: var(--bg); }
.size-btn:not(.active):hover { background: color-mix(in srgb, var(--cyan) 15%, transparent); }
.mode-btn.disabled { color:var(--edge); cursor:not-allowed; }
.mode-btn.disabled:hover { background:transparent; }

/* Actieve tafels */
.tables-pick { display:flex; flex-direction:column; gap:7px; align-items:center; }
.tables-pick-title { font-size:9px; color:var(--muted); letter-spacing:1px; }
.tables-row { display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:center; }
.tables-row-sym { font-size:9px; color:var(--cyan); width:58px; text-align:left; flex-shrink:0; letter-spacing:1px; white-space:nowrap; padding-right:8px; }
.tbl-btn {
  width:30px; height:30px; padding:0;
  font-family:'Press Start 2P',monospace; font-size:10px;
  background:var(--grid-bg); border:2px solid var(--line); color:var(--dim); cursor:pointer;
  touch-action:manipulation;
}
.tbl-btn.on { border-color:var(--green); color:var(--green); box-shadow:0 0 6px color-mix(in srgb, var(--green) 35%, transparent); }
.tbl-all { font-size:7px; color:var(--muted); background:transparent; border:1px solid var(--edge); padding:5px 7px; cursor:pointer; font-family:'Press Start 2P',monospace; }
.tbl-all:hover { border-color:var(--cyan); color:var(--cyan); }
.opt-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.opt-label { font-size:9px; color:var(--muted); }

/* Timer */
#timer {
  margin-left: auto; margin-right: 14px; /* duwt de knoppen rechts samen */
  font-size: 18px;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan);
  min-width: 90px;
  text-align: right;
  visibility: hidden;
}
#timer.visible { visibility: visible; }
#timer:not(.visible) { min-width: 0; width: 0; overflow: hidden; margin-right: 0; } /* geen ruimte innemen als hij niet zichtbaar is */
#timer.warning { color: var(--red); text-shadow: 0 0 12px var(--red); animation: blink .5s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ── PIXEL ICONS ── */
i[data-icon] {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -0.18em;
  flex-shrink: 0; font-style: normal;
}
i[data-icon] svg { width: 100%; height: 100%; display: block; }

/* ── HAMBURGER MENU ── */
#hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; cursor: pointer; padding: 7px; flex-shrink: 0;
  border: 2px solid var(--line);
}
#hamburger:hover { border-color: var(--green); box-shadow: 0 0 8px var(--green); }
#hamburger span {
  display: block; height: 2px; background: var(--green);
  transition: background .2s;
}
#hamburger:hover span { background: var(--yellow); }
#menu-dropdown {
  display: none; position: fixed; top: 54px; right: 0;
  background: var(--panel); border: 2px solid var(--green); border-top: none;
  z-index: 200; min-width: 220px;
  flex-direction: column;
}
#menu-dropdown.open { display: flex; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; font-size: 11px; color: var(--green);
  cursor: pointer; border-bottom: 1px solid var(--line2);
  background: transparent; border-left: none; border-right: none; border-top: none;
  font-family: 'Press Start 2P', monospace; text-align: left; width: 100%;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--hover); color: var(--yellow); }
.menu-item label { cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; }

/* ── PIXEL-ACCENTEN op hoofdletters ── */
.px-acc { position: relative; display: inline-block; line-height: 1; } /* los van regelhoogte → accent altijd even ver */
.px-acc-mark { position: absolute; left: 0; top: 0; width: .125em; height: .125em; pointer-events: none; }

/* ── TAAL- EN KLEURKEUZE (alle knoppen in de menubalk even hoog) ── */
#lang-wrap, #theme-wrap { position: relative; flex-shrink: 0; margin-right: 10px; }
#lang-btn, #theme-btn {
  background: transparent; border: 2px solid var(--line); color: var(--green);
  font-family: 'Press Start 2P', monospace; font-size: 9px; padding: 0 8px; height: 36px;
  cursor: pointer; letter-spacing: 1px; display: flex; align-items: center; gap: 6px;
}
#lang-btn:hover, #theme-btn:hover { border-color: var(--green); box-shadow: 0 0 8px var(--green); }
.sw3 { display: inline-flex; gap: 2px; }
.sw3 i { width: 8px; height: 8px; display: block; }
#theme-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--panel); border: 2px solid var(--green); z-index: 200;
  flex-direction: column; min-width: 90px;
}
#theme-dropdown.open { display: flex; }
.theme-item {
  background: transparent; border: none; border-bottom: 1px solid var(--line2); color: var(--yellow);
  font-family: 'Press Start 2P', monospace; font-size: 10px; padding: 12px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.theme-item:last-child { border-bottom: none; }
.theme-item:hover { background: var(--hover); }
.theme-item .mark { width: 1.2em; }
.theme-item .sw3 i { width: 12px; height: 12px; }
#lang-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--panel); border: 2px solid var(--green); z-index: 200;
  flex-direction: column; min-width: 90px;
}
#lang-dropdown.open { display: flex; }
.lang-item {
  background: transparent; border: none; border-bottom: 1px solid var(--line2);
  color: var(--green); font-family: 'Press Start 2P', monospace; font-size: 10px;
  padding: 12px 14px; text-align: left; cursor: pointer;
}
.lang-item:last-child { border-bottom: none; }
.lang-item:hover { background: var(--hover); color: var(--cyan); }
.lang-item.active { color: var(--yellow); }
.lang-item.active::before { content: '▶ '; }
.lang-item:not(.active)::before { content: '\00a0\00a0 '; }
html[lang="fr"] .tables-row-sym, html[lang="en"] .tables-row-sym { width: 80px; }

/* ── KADERS met titel in de rand ── */
.page-col { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.page-col.wide { max-width: 900px; }
.panel {
  position: relative; border: 2px solid var(--line); background: var(--panel);
  padding: 22px 14px 14px; width: 100%;
}
.panel.hl { border-color: var(--green); box-shadow: 0 0 10px color-mix(in srgb, var(--green) 25%, transparent); }
.panel-t, .panel-r {
  position: absolute; top: -7px; background: var(--bg); padding: 0 8px;
  font-size: 8px; line-height: 12px; letter-spacing: 1px; white-space: nowrap;
}
.panel-t { left: 12px; color: var(--yellow); }
.panel-t b { color: var(--cyan); font-weight: normal; margin-right: 6px; }
.panel-r { right: 12px; color: var(--cyan); }
.opt-line { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; }
.opt-line + .opt-line { margin-top: 10px; }
.opt-line .lbl { font-size: 8px; color: var(--muted); letter-spacing: 1px; }
.opt-line .lbl.sym { color: var(--cyan); }
.seg { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; }
.seg > button + button { border-left: 1px solid var(--line); }
.seg .mode-btn, .seg .size-btn { padding: 9px 4px; white-space: nowrap; }
.tb-grid { display: grid; grid-template-columns: repeat(10, 1fr) 1.6fr; gap: 4px; }
.tb-grid .tbl-btn { width: auto; height: auto; aspect-ratio: 1; }
.tb-grid .tbl-all { padding: 0; }
.wide-btn { width: 100%; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.stats div { text-align: center; font-size: 8px; color: var(--muted); line-height: 2.2; }
.stats div + div { border-left: 1px solid var(--line); }
.stats b { display: block; font-size: 11px; color: var(--green); font-weight: normal; }
.btn-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; width: 100%; }
@media (max-width: 600px) {
  .opt-line { grid-template-columns: 1fr; gap: 6px; }
  .opt-line + .opt-line { margin-top: 12px; }
  .seg .mode-btn, .seg .size-btn { font-size: 9px; }
  .tb-grid { grid-template-columns: repeat(10, 1fr) 2.2fr; gap: 3px; }
  .tb-grid .tbl-all { font-size: 6px; }
}

/* ── SAMENVATTING ── */
#screen-summary {
  justify-content: center; align-items: center;
  min-height: calc(100vh - 54px); gap: 16px;
  padding: 28px 20px; width: 100%; max-width: 620px; margin: 0 auto;
}
#summary-title { font-size: 26px; color: var(--yellow); text-shadow: 0 0 20px var(--yellow); text-align: center; letter-spacing: 2px; }
.summary-mistakes { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.sum-chip {
  display: flex; align-items: center; gap: 10px;
  color: var(--green); font-size: 11px; padding: 6px 2px;
}
.sum-yours { position: relative; color: var(--red); font-size: 10px; }
.sum-yours::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 50%;
  height: 3px; background: var(--red); box-shadow: 0 0 4px var(--red);
  transform: translateY(-50%) rotate(-22deg);
}

/* ── HANDLEIDING ── */
#screen-updates {
  justify-content: flex-start; align-items: center;
  min-height: calc(100vh - 54px); gap: 20px;
  padding: 28px 20px; width: 100%; max-width: 660px; margin: 0 auto;
}
#screen-handleiding, #screen-over {
  justify-content: flex-start; align-items: center;
  min-height: calc(100vh - 54px); gap: 20px;
  padding: 28px 20px; width: 100%; max-width: 660px; margin: 0 auto;
}
.hdl-section { width:100%; display:flex; flex-direction:column; gap:8px; }
.hdl-title { font-size:10px; color:var(--cyan); border-bottom:1px solid var(--line); padding-bottom:6px; letter-spacing:1px; }
.hdl-text { font-size:10px; color:var(--green); line-height:2.4; }
h2.hdl-title, p.hdl-text { margin:0; font-weight:normal; }
.hdl-text b { color:var(--yellow); font-style:normal; }

/* ── IMPORT MODAL ── */
#import-modal, #wipe-modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.85); align-items: center; justify-content: center;
}
#import-modal.open, #wipe-modal.open { display: flex; }
.import-box {
  background: var(--panel); border: 2px solid var(--cyan);
  padding: 28px 24px; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.import-box h2 { font-size: 11px; color: var(--cyan); letter-spacing: 2px; }
.import-box .import-info { font-size: 10px; color: var(--dim); text-align: center; line-height: 2; }
.import-choice { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.import-choice-label { font-size: 11px; color: var(--yellow); margin-bottom: 2px; }
.import-section {
  border: 1px solid var(--line); padding: 14px; display: flex;
  flex-direction: column; gap: 10px; cursor: pointer;
}
.import-section:hover { border-color: var(--cyan); }
.import-section.selected { border-color: var(--cyan); background: var(--hover); }
.import-section-title { font-size: 11px; color: var(--green); }
.import-player-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.import-player-btn {
  background: transparent; border: 2px solid var(--edge); color: var(--dim);
  font-family: 'Press Start 2P', monospace; font-size: 10px; padding: 5px 10px; cursor: pointer;
}
.import-player-btn.selected { border-color: var(--cyan); color: var(--cyan); }
.import-actions { display: flex; gap: 12px; }

/* ── SCREENS ── */
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* START */
#screen-home, #screen-klok, #screen-klok-game { gap: 18px; padding: 24px 20px 70px; position: relative; min-height: calc(100vh - 54px); }
#screen-home, #screen-klok { justify-content: center; }
#screen-start {
  justify-content: center;
  min-height: calc(100vh - 54px);
  gap: 18px;
  padding: 34px 20px 70px;
  position: relative;
}
#screen-start .big-title { margin-bottom: 6px; }
#screen-start .player-selector { justify-content: center; }
#continue-block {
  border: 2px dashed var(--cyan); padding: 12px; gap: 12px;
  flex-direction: column; align-items: stretch;
}
#continue-block .pause-info { border: none; background: none; padding: 0; font-size: 8px; line-height: 2; }
.big-title {
  font-size: 28px;
  color: var(--yellow);
  text-shadow: 0 0 20px var(--yellow), 0 0 40px var(--yellow);
  text-align: center;
  line-height: 1.6;
}
.subtitle { font-size: 11px; color: var(--green); text-align: center; line-height: 2.2; }

.btn {
  background: transparent;
  border: 3px solid var(--green);
  color: var(--green);
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  padding: 13px 28px;
  cursor: pointer;
  text-shadow: 0 0 8px var(--green);
  box-shadow: 0 0 12px var(--green), inset 0 0 8px color-mix(in srgb, var(--green) 5%, transparent);
  transition: all .1s;
  letter-spacing: 2px;
}
.btn:hover { background: var(--green); color: var(--bg); box-shadow: 0 0 25px var(--green); text-shadow: none; }
.btn.yellow { border-color:var(--yellow); color:var(--yellow); text-shadow:0 0 8px var(--yellow); box-shadow:0 0 12px var(--yellow); }
.btn.yellow:hover { background:var(--yellow); color:var(--bg); box-shadow:0 0 25px var(--yellow); }
.btn.cyan { border-color:var(--cyan); color:var(--cyan); text-shadow:0 0 8px var(--cyan); box-shadow:0 0 12px var(--cyan); }
.btn.cyan:hover { background:var(--cyan); color:var(--bg); }
.btn.red { border-color:var(--red); color:var(--red); text-shadow:0 0 8px var(--red); box-shadow:0 0 12px var(--red); }
.btn.red:hover { background:var(--red); color:var(--bg); box-shadow:0 0 25px var(--red); }
.btn.red:disabled { opacity:.35; cursor:not-allowed; background:transparent; color:var(--red); }
.btn.small { font-size:11px; padding:11px 20px; }

/* COUNTDOWN */
#screen-countdown {
  justify-content: center;
  min-height: calc(100vh - 54px);
}
#countdown-plan { font-size: 9px; color: var(--cyan); text-align: center; line-height: 2; margin-top: 20px; }
#countdown-num {
  font-size: 120px;
  color: var(--yellow);
  text-shadow: 0 0 40px var(--yellow), 0 0 80px var(--yellow);
  animation: pulse .8s ease-in-out;
}
@keyframes pulse { 0%{transform:scale(1.5);opacity:0;} 100%{transform:scale(1);opacity:1;} }

/* GAME */
#screen-game {
  padding: 16px 20px 30px;
  min-height: calc(100vh - 54px);
  width: 100%;
  align-items: stretch;
}

.game-panel { max-width: 900px; margin: 4px auto 14px; padding: 18px 14px 12px; }
.prog-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font-size: 9px; color: var(--muted); }
.prog-row .mode-lbl { color: var(--cyan); }
.prog-row:has(.pause-btn) { grid-template-columns: auto 1fr auto auto; }
.pause-btn { width: 30px; height: 30px; background: transparent; border: 2px solid var(--yellow); color: var(--yellow);
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 0 8px color-mix(in srgb, var(--yellow) 50%, transparent); }
.pause-btn:hover { background: var(--yellow); color: var(--bg); }
.big-title.mod-title { font-size: 24px; }
.hdl-tabs, .an-mod-tabs { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 620px; }
.an-mod-tabs { max-width: 900px; }
.hdl-tabs .an-tab, .an-mod-tabs .an-tab { font-size: 9px; padding: 10px 4px; }
.an-mod-tabs .an-tab + .an-tab, .hdl-tabs .an-tab + .an-tab { border-left: 1px solid var(--line); }

#progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: var(--line);
}
#progress-bar {
  height: 100%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  transition: width .3s;
  width: 0%;
}

.questions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.q-item {
  background: var(--grid-bg);
  border: 1px solid var(--line);
  padding: 8px 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}
.q-item.correct { border-color: var(--green); background: var(--ok-bg); }
.q-item.wrong   { border-color: var(--red);   background: var(--bad-bg); }
.q-item.corrected { border-color: var(--dim); background: var(--bg); }

.q-label { color: var(--cyan); white-space: nowrap; flex-shrink: 0; }
.q-eq    { color: var(--green); flex-shrink: 0; }

.q-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--yellow);
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  width: 58px;
  outline: none;
  text-align: center;
  padding: 2px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.q-input::-webkit-inner-spin-button,
.q-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.q-input:focus { border-bottom-color: var(--yellow); }
.q-item.correct .q-input { color: var(--green); border-bottom-color: var(--green); }
.q-item.wrong   .q-input { color: var(--red);   border-bottom-color: var(--red);   }
/* active field highlight */
.q-item:focus-within {
  border-color: var(--yellow) !important;
  background: var(--hover) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--yellow) 50%, transparent);
}
/* dimmed = originally correct items in correction round */
.q-item.dimmed { opacity: 0.28; pointer-events: none; }
/* corrected = wrong item that was fixed → green */
.q-item.corrected { border-color: var(--green); background: var(--ok-bg); }
/* wrong attempts (strikethrough) in correction round */
.q-attempts { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 1; align-items: center; min-width: 0; }
.q-wrong-val { position: relative; display: inline-block; color: var(--red); font-size: 10px; white-space: nowrap; }
.q-wrong-val::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 50%;
  height: 3px; background: var(--red); box-shadow: 0 0 4px var(--red);
  transform: translateY(-50%) rotate(-22deg); transform-origin: center;
}
/* KLAAR cell in grid */
.q-item-klaar {
  background: transparent;
  border: 2px solid var(--yellow);
  padding: 7px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 8px color-mix(in srgb, var(--yellow) 30%, transparent);
}
.q-item-klaar:hover, .q-item-klaar:focus-within {
  background: var(--yellow) !important;
  box-shadow: 0 0 16px var(--yellow) !important;
}
.q-item-klaar:hover .klaar-btn, .q-item-klaar:focus-within .klaar-btn { color: var(--bg); }
.klaar-btn {
  background: transparent; border: none;
  color: var(--yellow); font-family: 'Press Start 2P', monospace;
  font-size: 11px; cursor: pointer; width: 100%;
  letter-spacing: 1px;
}

/* SCORE */
#screen-score {
  justify-content: center;
  min-height: calc(100vh - 54px);
  gap: 22px;
  padding: 40px 20px;
  text-align: center;
}
.score-big { font-size: 52px; color: var(--yellow); text-shadow: 0 0 20px var(--yellow); }
.score-label { font-size: 13px; color: var(--green); line-height: 2.5; }
.score-detail { font-size: 11px; color: var(--muted); line-height: 2.5; }

/* CORRECTION */
#screen-correct {
  padding: 16px 20px 30px;
  min-height: calc(100vh - 54px);
  width: 100%;
  align-items: stretch;
}
#correct-title { text-align:center; font-size:13px; color:var(--yellow); margin-bottom:14px; text-shadow:0 0 10px var(--yellow); }
#correct-meta  { font-size:9px; color:var(--muted); }
#correct-bar-wrap { width:100%; height:8px; background:var(--line); }
#correct-bar { height:100%; width:0; background:var(--yellow); box-shadow:0 0 6px var(--yellow); transition:width .3s; }

/* HIGH SCORE */
#screen-highscore {
  justify-content: center;
  min-height: calc(100vh - 54px);
  gap: 18px;
  padding: 28px 20px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
#hs-title { font-size:15px; color:var(--yellow); text-shadow:0 0 12px var(--yellow); text-align:center; letter-spacing:2px; }

.hs-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:2px solid var(--cyan); width:100%; }
.hs-tab + .hs-tab { border-left:1px solid var(--line); }
#hs-panel { padding:18px 0 0; }
.hs-info { font-size:8px; color:var(--muted); line-height:2.2; text-align:center; }
.hs-info b { color:var(--yellow); font-weight:normal; }
.hs-tab { background:transparent; border:none; color:var(--cyan); font-family:'Press Start 2P',monospace; font-size:11px; padding:8px 12px; cursor:pointer; }
.hs-tab.active { background:var(--cyan); color:var(--bg); }

.hs-table-wrap {
  width: 100%;
  overflow-y: auto;
  height: calc(var(--row-h) * 10 + var(--hdr-h));
  --row-h: 36px;
  --hdr-h: 38px;
}
.hs-table { width:100%; border-collapse:collapse; font-size:10px; table-layout:fixed; }
.hs-table thead { position:sticky; top:0; background:var(--bg); z-index:2; }
.hs-table th { color:var(--cyan); border-bottom:2px solid var(--cyan); padding:9px 12px; text-align:left; white-space:nowrap; }
.hs-table th:nth-child(1) { width:46px; }
.hs-table th:nth-child(3) { width:60px; }
.hs-table th:nth-child(4) { width:60px; }
.hs-table th:nth-child(5) { width:144px; }
.hs-table th:nth-child(7) { width:34px; }
.hs-table td { padding:0 12px; border-bottom:1px solid var(--line); color:var(--green); height:var(--row-h); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-table tbody tr.hs-first td { color:var(--yellow); }
.hs-row-pending td { color:var(--yellow) !important; background:var(--hover); }
.hs-row-pending td:nth-child(2) { animation:blink-name .8s step-end infinite; }
@keyframes blink-name { 50% { opacity:0.3; } }
.hs-del {
  background:transparent; border:none; color:var(--dim); font-size:13px; cursor:pointer;
  padding:2px 4px; font-family:inherit; line-height:1;
}
.hs-del:hover { color:var(--red); }

.hs-name-form {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:18px; border:2px solid var(--yellow); background:var(--panel); width:100%;
}
.hs-name-form label { font-size:11px; color:var(--yellow); }
.hs-name-input {
  background:var(--bg); border:2px solid var(--yellow); color:var(--yellow);
  font-family:'Press Start 2P',monospace; font-size:14px; padding:10px 14px;
  outline:none; width:240px; text-align:center; text-transform:uppercase;
}

/* ── ANALYSE ── */
.an-grid { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; width:100%; }
.an-side { display:flex; flex-direction:column; gap:18px; min-width:0; }
.an-heat { display:flex; flex-direction:column; gap:12px; align-items:center; }
.an-heat .an-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; width:100%; }
.an-grid > * { min-width: 0; }
@media (max-width: 900px) { .an-grid { grid-template-columns: minmax(0, 1fr); } }
#screen-analyse {
  justify-content: flex-start;
  min-height: calc(100vh - 54px);
  gap: 18px;
  padding: 28px 20px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  align-items: center;
}
#analyse-title { font-size:14px; color:var(--yellow); text-shadow:0 0 12px var(--yellow); letter-spacing:2px; }
.an-tabs { display:flex; border:2px solid var(--cyan); }
.an-tab { background:transparent; border:none; color:var(--cyan); font-family:'Press Start 2P',monospace; font-size:11px; padding:8px 14px; cursor:pointer; }
.an-tab.active { background:var(--cyan); color:var(--bg); }
.an-section-title { font-size:10px; color:var(--cyan); letter-spacing:1px; align-self:flex-start; margin-top:6px; }

.heatmap-wrap { overflow-x:auto; width:100%; }
.heatmap-grid {
  display:grid;
  grid-template-columns: 30px repeat(11, 38px);
  gap:3px;
  width:max-content;
  margin:0 auto;
}
.hm-label { display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--dim); height:38px; }
.hm-col-label { color:var(--dim); }
.hm-cell {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  font-size:9px; border-radius:3px; cursor:pointer; font-family:'Press Start 2P',monospace;
}
.hm-unseen { background:var(--hm-none); color:var(--faint); }
.hm-empty  { background:var(--hm-none); }
.hm-green  { background:var(--hm-good); color:var(--good); }
.hm-yellow { background:var(--hm-mid); color:var(--yellow); }
.hm-red    { background:var(--hm-bad); color:var(--red); }
.hm-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:9px; color:var(--muted); align-items:center; justify-content:center; }
.hm-legend-dot { width:12px; height:12px; border-radius:2px; display:inline-block; margin-right:4px; vertical-align:middle; }
.hm-row-label.hm-active { color:var(--yellow); text-shadow:0 0 8px var(--yellow); font-weight:bold; }
.hm-legend-active { display:inline-block; width:12px; height:12px; margin-right:4px; vertical-align:middle; color:var(--yellow); text-shadow:0 0 8px var(--yellow); font-weight:bold; }

/* retro tooltip (80s style, like keypad) */
#hm-tooltip {
  position:fixed; z-index:600; display:none;
  background:var(--panel); border:2px solid var(--green);
  box-shadow:0 0 16px color-mix(in srgb, var(--green) 40%, transparent);
  padding:10px 12px; font-family:'Press Start 2P',monospace;
  pointer-events:none; max-width:230px; text-align:center;
}
#hm-tooltip.show { display:block; }
#hm-tooltip .tt-sum  { font-size:13px; color:var(--yellow); text-shadow:0 0 8px var(--yellow); margin-bottom:9px; }
#hm-tooltip .tt-line { font-size:9px; color:var(--green); line-height:2; }
#hm-tooltip .tt-wrong { color:var(--red); }

.hardest-list { width:100%; display:flex; flex-direction:column; gap:6px; }
.hardest-item {
  display:flex; align-items:center; gap:12px; padding:8px 12px;
  border:1px solid var(--line); font-size:11px; background:var(--panel);
}
.hardest-q    { color:var(--yellow); width:80px; flex-shrink:0; }
.hardest-pct  { width:60px; flex-shrink:0; }
.hardest-pct.good   { color:var(--good); }
.hardest-pct.ok     { color:var(--yellow); }
.hardest-pct.bad    { color:var(--red); }
.hardest-wrong { color:var(--muted); }

.prog-wrap { width:100%; display:flex; flex-direction:column; gap:6px; }
.prog-bars { display:flex; align-items:flex-end; gap:4px; height:80px; }
.prog-bar-col { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.prog-bar {
  width:100%; background:var(--green); min-height:2px;
  transition:height .3s; position:relative;
}
.prog-bar-label { font-size:7px; color:var(--dim); white-space:nowrap; }
.prog-bar-val { font-size:7px; color:var(--green); }

/* PAUSE OVERLAY INFO */
.pause-info {
  font-size: 10px;
  color: var(--cyan);
  text-align: center;
  border: 1px solid var(--cyan);
  padding: 12px 20px;
  background: var(--panel);
  line-height: 2.2;
}

#home-footer {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  color: var(--edge);
  letter-spacing: 1px;
  pointer-events: none;
}

/* ── PLAYERS ── */
#screen-players {
  justify-content: flex-start; align-items: center;
  min-height: calc(100vh - 54px); gap: 18px;
  padding: 28px 20px; width: 100%; max-width: 580px; margin: 0 auto;
}
#players-title { font-size:14px; color:var(--yellow); text-shadow:0 0 12px var(--yellow); letter-spacing:2px; }
.player-row {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:10px 14px; border:1px solid var(--line); background:var(--panel);
}
.player-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.player-row-name { flex:1; font-size:10px; color:var(--green); }
.player-del { background:transparent; border:none; color:var(--dim); font-size:14px; cursor:pointer; padding:2px 4px; font-family:inherit; }
.player-del:hover { color:var(--red); }
.player-export { background:transparent; border:1px solid var(--edge); color:var(--dim); font-family:'Press Start 2P',monospace; font-size:7px; cursor:pointer; padding:4px 7px; letter-spacing:1px; }
.player-export:hover { border-color:var(--cyan); color:var(--cyan); }
.add-player-form {
  width:100%; display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:16px; border:2px solid var(--line); background:var(--panel);
}
.add-player-form label { font-size:11px; color:var(--cyan); align-self:flex-start; }
.player-name-input {
  background:var(--bg); border:2px solid var(--green); color:var(--green);
  font-family:'Press Start 2P',monospace; font-size:12px; padding:9px 12px;
  outline:none; width:100%; text-align:center; text-transform:uppercase; box-sizing:border-box;
}
.color-swatches { display:flex; gap:8px; }
.color-swatch {
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  border:3px solid transparent; transition:border-color .15s;
}
.color-swatch.selected { border-color:var(--white); }

/* Player selector on home screen */
.player-selector { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }
.player-sel-btn {
  background:transparent; border:2px solid var(--edge); color:var(--dim);
  font-family:'Press Start 2P',monospace; font-size:11px; padding:6px 12px; cursor:pointer;
  transition:all .15s;
}
.player-sel-btn.active { border-color:var(--c,var(--green)); color:var(--c,var(--green)); box-shadow:0 0 8px var(--c,var(--green)); }
.player-sel-btn:not(.active):hover { border-color:var(--dim); color:var(--muted); }
.player-sel-add { color:var(--edge); border-color:var(--edge); font-size:11px; }
.player-sel-add:hover { color:var(--dim) !important; border-color:var(--faint) !important; }

/* ── CUSTOM KEYPAD ── */
#keypad-toggle {
  background: transparent; border: 2px solid var(--line); cursor: pointer;
  flex-shrink: 0; margin-right: 10px;
  display: none; grid-template-columns: repeat(3, 5px); grid-template-rows: repeat(3, 5px);
  gap: 2px; padding: 0; width: 36px; height: 36px; place-content: center;
}
#keypad-toggle.visible { display: grid; }
#keypad-toggle span { background: var(--dim); width: 5px; height: 5px; }
#keypad-toggle.on { border-color: var(--green); box-shadow: 0 0 8px var(--green); }
#keypad-toggle.on span { background: var(--green); box-shadow: 0 0 4px var(--green); }
#keypad {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 8px; z-index: 300;
  background: var(--panel); border: 2px solid var(--green);
  box-shadow: 0 0 16px color-mix(in srgb, var(--green) 35%, transparent);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-width: 420px; margin: 0 auto;
}
#keypad.show { display: grid; }
.kp-btn {
  font-family: 'Press Start 2P', monospace; font-size: 16px;
  height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--grid-bg); border: 2px solid var(--line); color: var(--green);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; padding: 0;
}
.kp-btn:active { background: var(--green); color: var(--bg); }
.kp-btn.kp-action { color: var(--cyan); border-color: var(--line); font-size: 24px; font-family: monospace; }
.kp-btn[data-kp="bs"], .kp-btn[data-kp="enter"] { font-size: 32px; }
.kp-btn.kp-action:active { background: var(--cyan); color: var(--bg); }
.kp-zero { grid-column: span 3; }
body.keypad-open #screen-game,
body.keypad-open #screen-correct { padding-bottom: 260px; }

@media (max-width:900px) {
  .questions-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width:600px) {
  #header { padding: 10px 12px; }
  #lang-wrap, #theme-wrap, #keypad-toggle { margin-right: 6px; }
  #lang-btn, #theme-btn { padding: 0 6px; gap: 4px; }
  #timer { margin-right: 8px; }
  /* tijdens het spelen geen taal/kleur in de smalle menubalk */
  body[data-screen="screen-game"] #lang-wrap, body[data-screen="screen-game"] #theme-wrap,
  body[data-screen="screen-correct"] #lang-wrap, body[data-screen="screen-correct"] #theme-wrap { display: none; }
  .questions-grid { grid-template-columns: repeat(2,1fr); }
  #logo { font-size:10px; }
  #version-tag { display:none; }
  #timer { font-size:13px; min-width:60px; }
  /* hide date column on small screens */
  .hs-table th:nth-child(6),
  .hs-table td:nth-child(6) { display:none; }
  /* make hs table horizontally scrollable */
  .hs-table-wrap { overflow-x:auto; }
  .hs-table { min-width:340px; }
}

/* ── ONDERDEEL KIEZEN ── */
.mod-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mod-tile {
  background: transparent; border: 3px solid var(--green); color: var(--green); font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 8px; cursor: pointer;
  box-shadow: 0 0 10px color-mix(in srgb, var(--green) 35%, transparent);
}
.mod-tile:hover { background: color-mix(in srgb, var(--green) 12%, transparent); box-shadow: 0 0 20px var(--green); }
.mod-ico { font-size: 26px; height: 34px; display: flex; align-items: center; color: var(--yellow); text-shadow: 0 0 10px var(--yellow); }
.mod-name { font-size: 12px; color: var(--yellow); }
.mod-sub { font-size: 7px; color: var(--muted); line-height: 1.8; }
.continue-box { border: 2px dashed var(--cyan); padding: 12px; gap: 12px; flex-direction: column; align-items: stretch; }
.continue-box .pause-info { border: none; background: none; padding: 0; font-size: 8px; line-height: 2; }

/* ── KLOK ── */
#screen-klok-game .game-panel { margin: 4px 0 0; }
.prog-wrap-bar { width: 100%; height: 8px; background: var(--line); }
.prog-fill { height: 100%; width: 0%; background: var(--green); box-shadow: 0 0 6px var(--green); transition: width .3s; }
.klok-q { text-align: center; }
.klok-written { font-size: 13px; color: var(--yellow); text-shadow: 0 0 10px var(--yellow); line-height: 2; }
.klok-digital { font-size: 34px; color: var(--yellow); text-shadow: 0 0 14px var(--yellow); letter-spacing: 4px; }
.klok-daypart { font-size: 9px; color: var(--cyan); margin-top: 8px; }
.klok-answer { display: grid; gap: 18px; }
.klok-part { border-left: 3px solid transparent; padding: 8px 0 8px 10px; }
.klok-part.ok { border-left-color: var(--green); }
.klok-part.bad { border-left-color: var(--red); }
.klok-lbl { font-size: 8px; color: var(--muted); margin-bottom: 10px; line-height: 1.8; letter-spacing: 1px; }
.klok-lbl .res { margin-left: 8px; }
.klok-part.ok .res { color: var(--green); } .klok-part.bad .res { color: var(--red); }
.digin { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 28px; color: var(--yellow); }
.digin input { width: 76px; background: transparent; border: none; border-bottom: 3px solid var(--line); color: var(--yellow); font-family: inherit; font-size: 28px; text-align: center; outline: none; border-radius: 0; }
.digin input:focus { border-bottom-color: var(--yellow); }
.klok-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
svg.klok { width: 240px; height: 240px; max-width: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
svg.klok .face { fill: var(--panel); stroke: var(--green); stroke-width: 3; }
svg.klok .tick { fill: var(--line); } svg.klok .tick.big { fill: var(--green); }
svg.klok .num { fill: var(--green); font-family: 'Press Start 2P', monospace; font-size: 12px; text-anchor: middle; dominant-baseline: central; }
svg.klok.edit { cursor: pointer; }
svg.klok .hhand { stroke: var(--cyan); stroke-width: 8; stroke-linecap: square; }
svg.klok .mhand { stroke: var(--yellow); stroke-width: 5; stroke-linecap: square; }
svg.klok .hand.sel { filter: drop-shadow(0 0 4px var(--fg-glow, var(--white))); }
svg.klok .hand.empty { opacity: .18; }
svg.klok .hub { fill: var(--green); }
.hand-sel { width: 100%; max-width: 300px; }
.hand-sel .size-btn { font-size: 8px; }
.klok-legend { display: flex; gap: 16px; font-size: 7px; justify-content: center; color: var(--muted); flex-wrap: wrap; }
.klok-legend i { display: inline-block; width: 14px; height: 5px; margin-right: 6px; vertical-align: middle; }
.sentence { min-height: 48px; border: 2px dashed var(--line); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; margin-bottom: 12px; }
.sentence:empty::before { content: attr(data-hint); font-size: 7px; color: var(--dim); line-height: 1.8; }
.s-chip { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--yellow); color: var(--yellow); font-size: 9px; padding: 6px 4px 6px 8px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; background: var(--bg); }
.s-chip.drag { opacity: .5; }
.s-chip .x { border: none; background: none; color: var(--yellow); font-family: inherit; font-size: 9px; cursor: pointer; padding: 2px 4px; }
.s-chip .x:hover { color: var(--red); }
.tile-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tile-row + .tile-row { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.tile { background: transparent; border: 2px solid var(--line); color: var(--green); font-family: inherit; font-size: 9px; padding: 9px 9px; cursor: pointer; }
.tile:hover { border-color: var(--green); }
.tile.dp { color: var(--cyan); }
.klok-fb { text-align: center; font-size: 11px; line-height: 2; padding: 12px; border: 3px solid transparent; }
.klok-fb:empty { display: none; }
.klok-fb.ok { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); box-shadow: 0 0 14px var(--green); }
.klok-fb.bad { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); box-shadow: 0 0 14px var(--red); animation: klok-shake .3s; }
.klok-fb.shown { color: var(--yellow); border-color: var(--yellow); }
@keyframes klok-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.klok-part.shown { border-left-color: var(--yellow); }
.klok-part.shown .res { color: var(--yellow); }
.klok-part.ok, .klok-part.bad, .klok-part.shown { border-left-width: 6px; }
.klok-part.bad { background: color-mix(in srgb, var(--red) 8%, transparent); }
.klok-part.ok { background: color-mix(in srgb, var(--green) 8%, transparent); }
.klok-part.bad .digin input, .klok-part.bad .sentence { border-color: var(--red); }
.klok-part.ok .digin input, .klok-part.ok .sentence { border-color: var(--green); }
.klok-lbl .res { font-size: 10px; }
.s-gap { width: 44px; height: 30px; border: 2px dashed var(--yellow); }
.s-ghost { position: fixed; z-index: 999; pointer-events: none; transform: translate(-50%, -70%);
  border: 2px solid var(--yellow); color: var(--yellow); background: var(--bg); font-size: 10px; padding: 8px 10px;
  box-shadow: 0 0 16px var(--yellow); }
.tile { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.menu-item.sub { padding-left: 34px; }
.mi-ico { display: inline-block; width: 14px; text-align: center; color: var(--cyan); }
@media (max-width:600px) {
  .mod-tile { padding: 18px 6px; }
  .mod-name { font-size: 10px; }
  .klok-written { font-size: 11px; }
}

/* ── SPELERS BEHEREN: één blok per speler ── */
.player-block { width: 100%; border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; }
.player-del i[data-icon] { width: 14px; height: 14px; }
.hs-del i[data-icon] { width: 12px; height: 12px; }