/* Letterlab – stijlen van de app */
/* Layout: one-column app, board as the hero, rack + buttons below like a real tile game on a tablet */
:root {
  --bg: #F4F1FF;
  --surface: #FFFFFF;
  --board: #DCD4F8;
  --cell: #F8F6FF;
  --ink: #241C3E;
  --muted: #6D6590;
  --accent: #5B3CC4;
  --accent-ink: #FFFFFF;
  --teal: #0E9F9E;
  --orange: #F08C00;
  --tile: #FFD66B;
  --tile-edge: #D9A520;
  --tile-ink: #2A2140;
  --pending: #FFE9A8;
  --l2: #BFEDEA;
  --l3: #8FDDD9;
  --w2: #FFD9A6;
  --w3: #FFB4C4;
  --good: #1F9D55;
  --bad: #D9480F;
  --ring: #5B3CC4;
  --shadow: 0 2px 0 rgba(36, 28, 62, .14);
  --grid: rgba(91, 60, 196, .07);
  --tint-o: #FFF1DC;
  --tint-p: #ECE6FF;
  --tint-t: #DDF5F3;
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15122A; --surface: #221D3D; --board: #2E2754; --cell: #1B1733;
    --ink: #EFEBFF; --muted: #A79FCB; --accent: #9B83FF; --accent-ink: #15122A;
    --teal: #3CCFCB; --orange: #FFB347; --pending: #FFE9A8;
    --l2: #1F4F55; --l3: #1E6B6E; --w2: #6B4A1E; --w3: #6E2B44;
    --good: #5CD38C; --bad: #FF8A5C; --ring: #FFD66B; --shadow: 0 2px 0 rgba(0,0,0,.4);
    --grid: rgba(155, 131, 255, .08); --tint-o: #3A2A1A; --tint-p: #2E2650; --tint-t: #173A3B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15122A; --surface: #221D3D; --board: #2E2754; --cell: #1B1733;
  --ink: #EFEBFF; --muted: #A79FCB; --accent: #9B83FF; --accent-ink: #15122A;
  --teal: #3CCFCB; --orange: #FFB347; --pending: #FFE9A8;
  --l2: #1F4F55; --l3: #1E6B6E; --w2: #6B4A1E; --w3: #6E2B44;
  --good: #5CD38C; --bad: #FF8A5C; --ring: #FFD66B; --shadow: 0 2px 0 rgba(0,0,0,.4);
  --grid: rgba(155, 131, 255, .08); --tint-o: #3A2A1A; --tint-p: #2E2650; --tint-t: #173A3B;
  color-scheme: dark;
}
html, body { min-height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 12px 24px;
  -webkit-tap-highlight-color: transparent;
}
.app { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, .cell:focus-visible, .rtile:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; line-height: 1.1; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex-direction: column; gap: .14em; }
.logo .lrow { display: flex; gap: .14em; }
.logo span {
  font-family: var(--display); font-weight: 800; width: 1.5em; height: 1.5em; display: grid; place-items: center; line-height: 1;
  border-radius: .26em; background: var(--tile); color: var(--tile-ink); box-shadow: inset 0 -.12em 0 var(--tile-edge);
}
.logo .lab span { color: #fff; box-shadow: inset 0 -.12em 0 rgba(0,0,0,.22); }
.logo .lab span:nth-child(1) { background: #F08C00; }
.logo .lab span:nth-child(2) { background: #0E9F9E; }
.logo .lab span:nth-child(3) { background: #5B3CC4; }
.logo.big { font-size: clamp(26px, 8.5vw, 44px); }
.logo.big .lrow:first-child span:nth-child(odd) { transform: rotate(-3deg); }
.logo.big .lrow:first-child span:nth-child(even) { transform: rotate(2deg) translateY(1px); }
.logo.big .lab span:nth-child(2) { transform: rotate(-2deg); }
.logo.small { font-size: 11px; gap: 2px; } .logo.small .lrow { gap: 2px; }

/* ---------- Start screen ---------- */
.hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 22px 20px; border-radius: 24px; background-color: var(--surface); box-shadow: var(--shadow); overflow: hidden;
  background-image: linear-gradient(var(--grid) 2px, transparent 2px), linear-gradient(90deg, var(--grid) 2px, transparent 2px);
  background-size: 30px 30px; background-position: -1px -1px;
}
.hero-text { display: grid; gap: 14px; min-width: 0; }
.tag { margin: 0; font-size: 18px; font-weight: 800; color: var(--muted); line-height: 1.35; max-width: 22ch; }
.hero-mascot { position: relative; display: grid; justify-items: center; margin-left: auto; }
.hero-mascot .owl { width: clamp(96px, 26vw, 140px); }
.speech {
  position: absolute; top: -6px; right: calc(100% - 18px); white-space: nowrap; background: var(--accent); color: var(--accent-ink);
  font-weight: 800; font-size: 14px; line-height: 1.25; padding: 8px 12px; border-radius: 14px 14px 4px 14px; box-shadow: var(--shadow);
}
.sh { font-size: 24px; margin-top: 6px; }
.sub { margin: -6px 0 0; color: var(--muted); font-weight: 700; }
.levels { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.level {
  display: grid; grid-template-rows: auto 1fr; text-align: left; background: var(--surface); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow); border: 2px solid transparent; transition: transform .12s, border-color .12s;
}
.level:hover { border-color: var(--lc); transform: translateY(-2px); }
.level .lv-top { background: var(--lt); padding: 14px 14px 12px; display: grid; gap: 10px; }
.level .stars { color: var(--lc); font-size: 16px; letter-spacing: 2px; }
.level .mini { display: flex; gap: 3px; flex-wrap: wrap; }
.level .mini span {
  font-family: var(--display); font-weight: 800; font-size: 15px; min-width: 26px; height: 26px; padding: 0 4px; display: grid; place-items: center;
  background: var(--tile); color: var(--tile-ink); border-radius: 6px; box-shadow: inset 0 -2px 0 var(--tile-edge);
}
.level .lv-body { padding: 12px 14px 14px; display: grid; gap: 4px; align-content: start; }
.level h3 { font-size: 23px; }
.level small { color: var(--muted); font-weight: 700; font-size: 13px; line-height: 1.35; }
.level .go { margin-top: 6px; font-family: var(--display); font-weight: 800; color: var(--lc); font-size: 18px; }
.section-label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.steps { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.step { background: var(--surface); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; font-weight: 700; line-height: 1.35; }
.step .num {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-family: var(--display); font-weight: 800; font-size: 20px;
  background: var(--tile); color: var(--tile-ink); box-shadow: inset 0 -3px 0 var(--tile-edge);
}
@media (max-width: 560px) {
  .levels { grid-template-columns: 1fr; }
  .level { grid-template-rows: none; grid-template-columns: 150px 1fr; }
  .level .lv-top { padding: 12px 10px; }
  .level .lv-top { align-content: center; }
  .steps { grid-template-columns: 1fr; }
  .step { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
}
.level .mini { gap: 2px; }
.level .mini span { min-width: 21px; height: 24px; font-size: 13px; padding: 0 3px; }
.level .mini { flex-wrap: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
.legend i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; font-style: normal; color: var(--ink); margin-right: 4px; vertical-align: middle; font-size: 11px; font-weight: 800; }
.linkbtn { font-weight: 800; color: var(--accent); padding: 12px 16px; text-align: center; border-radius: 14px; border: 2px dashed var(--board); }
.linkbtn:hover { border-color: var(--accent); }

/* ---------- Game header ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.iconbtn { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--muted); font-size: 14px; padding: 8px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); }
.iconbtn svg { width: 16px; height: 16px; }
button.iconbtn:hover { color: var(--accent); }
.topbar > :last-child { justify-self: end; }
.topbar { display: grid !important; grid-template-columns: 1fr auto 1fr; }
.topbar > :first-child { justify-self: start; }
.scores { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.score { background: var(--surface); border-radius: 14px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); border: 2px solid transparent; }
.score.active { border-color: var(--accent); }
.score b { font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.score span { font-weight: 800; font-size: 14px; }
.bag { display: grid; place-items: center; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); line-height: 1.1; }
.bag b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); }

/* ---------- Board ---------- */
.boardwrap { --bw: min(560px, calc(100vw - 32px)); }
.board {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; padding: 6px;
  background: var(--board); border-radius: 14px; width: 100%; aspect-ratio: 1; max-width: 100%;
}
.cell {
  position: relative; border-radius: 6px; background: var(--cell); display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; color: var(--ink); user-select: none; aspect-ratio: 1; min-width: 0;
  font-size: calc(var(--bw) / var(--n) * .24);
}
.cell.L2 { background: var(--l2); } .cell.L3 { background: var(--l3); }
.cell.W2 { background: var(--w2); } .cell.W3 { background: var(--w3); }
.cell .bonus { opacity: .85; line-height: 1; text-align: center; }
.cell .bonus.sym { font-size: 1.8em; }
.cell.target { box-shadow: inset 0 0 0 2px var(--accent); }
.tile {
  position: absolute; inset: 0; border-radius: 6px; background: var(--tile); color: var(--tile-ink);
  box-shadow: inset 0 -3px 0 var(--tile-edge); display: grid; place-items: center;
  font-size: calc(var(--bw) / var(--n) * .5); line-height: 1;
}
.tile.di { font-size: calc(var(--bw) / var(--n) * .38); letter-spacing: -.02em; }
.tile sub { position: absolute; right: 8%; bottom: 8%; font-size: .38em; font-family: var(--body); font-weight: 800; }
.tile.pending { background: var(--pending); box-shadow: inset 0 -3px 0 var(--tile-edge), 0 0 0 2px var(--accent); }
.tile.last { box-shadow: inset 0 -3px 0 var(--tile-edge), 0 0 0 2px var(--teal); }
.tile.pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---------- Lex bubble ---------- */
.lex { display: flex; gap: 10px; align-items: flex-start; }
.bubble {
  flex: 1; min-width: 0; background: var(--surface); border-radius: 4px 16px 16px 16px; padding: 10px 14px;
  font-weight: 700; box-shadow: var(--shadow); min-height: 46px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.bubble.good { color: var(--good); } .bubble.bad { color: var(--bad); }
.chip {
  font-family: var(--display); font-weight: 800; background: var(--tile); color: var(--tile-ink); border-radius: 8px;
  padding: 1px 8px; box-shadow: inset 0 -2px 0 var(--tile-edge); text-transform: uppercase; font-size: 15px;
}

/* ---------- Rack + controls ---------- */
.rack { display: flex; justify-content: center; gap: 6px; min-height: 64px; padding: 8px; border-radius: 14px; background: var(--board); }
.rtile {
  position: relative; width: min(56px, calc((100vw - 90px) / 7)); aspect-ratio: 1; border-radius: 10px;
  background: var(--tile); color: var(--tile-ink); box-shadow: inset 0 -4px 0 var(--tile-edge);
  font-family: var(--display); font-weight: 800; font-size: clamp(20px, 6vw, 30px); display: grid; place-items: center;
  transition: transform .12s;
}
.rtile.di { font-size: clamp(16px, 4.6vw, 23px); }
.rtile sub { position: absolute; right: 6px; bottom: 5px; font-size: 11px; font-family: var(--body); font-weight: 800; }
.rtile.sel { transform: translateY(-6px); box-shadow: inset 0 -4px 0 var(--tile-edge), 0 0 0 3px var(--accent); }
.rtile.vowel::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.btn {
  font-family: var(--display); font-weight: 800; font-size: 17px; padding: 10px 6px 8px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow); line-height: 1.1;
}
.btn .ic { display: block; margin: 0 auto 2px; width: 22px; height: 22px; color: var(--accent); }
.btn:disabled .ic { color: var(--muted); }
.btn small { display: block; font-family: var(--body); font-size: 11px; font-weight: 800; color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); font-size: 22px; padding: 12px; }
.controls .btn.primary { grid-column: span 3; }
.btn:disabled { opacity: .45; cursor: default; }
.thinking .rack, .thinking .controls { opacity: .6; pointer-events: none; }

/* ---------- Sheets ---------- */
.overlay { position: fixed; inset: 0; background: rgba(21, 18, 42, .55); display: grid; place-items: end center; z-index: 20; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.sheet {
  width: 100%; max-width: 520px; background: var(--surface); border-radius: 20px; padding: 20px; display: grid; gap: 14px;
  max-height: 85vh; overflow: auto; animation: up .25s ease-out;
}
@keyframes up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.wordtiles { display: flex; gap: 5px; flex-wrap: wrap; }
.wordtiles span {
  font-family: var(--display); font-weight: 800; font-size: 28px; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--tile); color: var(--tile-ink); border-radius: 9px; box-shadow: inset 0 -4px 0 var(--tile-edge); text-transform: uppercase;
}
.meaning { font-size: 19px; font-weight: 700; line-height: 1.4; margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row .btn { flex: 1; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 2px solid transparent; text-align: left; }
.opt:hover { border-color: var(--accent); }
.opt .pts { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--accent); flex: none; }
.wordtiles.small span { width: 34px; height: 34px; font-size: 20px; border-radius: 7px; box-shadow: inset 0 -3px 0 var(--tile-edge); }
.roles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.role {
  display: flex; gap: 14px; align-items: center; text-align: left; border-radius: 20px; padding: 18px; box-shadow: var(--shadow);
  border: 2px solid transparent; background: var(--rt); transition: transform .12s, border-color .12s;
}
.role:hover { border-color: var(--rc); transform: translateY(-2px); }
.role h3 { font-size: 23px; } .role small { display: block; color: var(--muted); font-weight: 700; font-size: 14px; margin-top: 3px; }
.role-ic { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--rc); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.role-ic svg { width: 30px; height: 30px; }
.role .chev { margin-left: auto; font-family: var(--display); font-size: 30px; color: var(--rc); line-height: 1; }
.panel { background: var(--surface); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.panel h3 { font-size: 20px; }
.note { margin: 0; font-weight: 700; color: var(--bad); }
.note.ok { color: var(--good); }
.small { font-size: 13px; }
input, select { font: inherit; font-size: 17px; font-weight: 700; color: var(--ink); background: var(--bg); border: 2px solid var(--board); border-radius: 12px; padding: 12px 14px; min-width: 0; width: 100%; }
select { cursor: pointer; }
input, select, textarea, button { box-sizing: border-box; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
.codeinput { font-family: var(--display); font-size: 34px; letter-spacing: .25em; text-align: center; text-transform: uppercase; padding: 8px; }
.formrow { display: flex; gap: 8px; flex-wrap: wrap; }
.formrow > input, .formrow > select { flex: 1 1 180px; width: auto; }
.formrow > .btn { flex: 0 0 auto; }
.formrow .btn.primary { grid-column: auto; font-size: 18px; padding: 10px 16px; }
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.kid { background: var(--surface); border-radius: 16px; padding: 14px 8px; box-shadow: var(--shadow); display: grid; gap: 6px; justify-items: center; border: 2px solid transparent; }
.kid:hover { border-color: var(--accent); }
.kid .av { font-size: 44px; line-height: 1; } .kid b { font-size: 17px; overflow-wrap: anywhere; }
.hello { display: flex; gap: 14px; align-items: center; }
.hello h1 { font-size: 34px; } .hello p { margin: 4px 0 0; }
.bigav { font-size: 64px; line-height: 1; flex: none; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stats div { background: var(--surface); border-radius: 14px; padding: 10px 6px; text-align: center; box-shadow: var(--shadow); }
.stats b { display: block; font-family: var(--display); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats span { font-size: 12px; font-weight: 800; color: var(--muted); }
.btn.big { font-size: 26px; padding: 16px; }
.classlist { display: grid; gap: 8px; }
.classcard { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); border: 2px solid transparent; }
.classcard:hover { border-color: var(--accent); }
.classcard small { color: var(--muted); font-weight: 700; }
.classcard .code, .bigcode { font-family: var(--display); font-weight: 800; letter-spacing: .12em; color: var(--accent); }
.classcard .code { font-size: 20px; }
.classhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.classhead p { margin: 4px 0 0; }
.bigcode { font-size: clamp(30px, 9vw, 44px); background: var(--surface); padding: 4px 16px; border-radius: 14px; box-shadow: var(--shadow); }
.tablewrap { overflow-x: auto; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); }
table.progress { border-collapse: collapse; width: 100%; font-size: 14px; }
.progress th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 8px; border-bottom: 2px solid var(--board); white-space: nowrap; }
.progress td { padding: 6px 8px; border-bottom: 1px solid var(--board); white-space: nowrap; font-weight: 700; }
.progress .num { text-align: right; font-variant-numeric: tabular-nums; }
.progress select { padding: 6px 8px; font-size: 14px; width: auto; }
/* licentie en plekken */
.banner { border-radius: 14px; padding: 12px 14px; font-weight: 700; display: grid; gap: 2px; background: #FFE6DC; color: #A33A0B; }
.banner b { font-family: var(--display); font-size: 18px; }
.banner.warn { background: #FFF1DC; color: #8A5300; }
.seats { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--muted); font-size: 14px; }
.seats .bar { flex: 1; height: 8px; border-radius: 99px; background: var(--board); overflow: hidden; min-width: 80px; }
.seats .bar i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.seats.full .bar i { background: var(--bad); } .seats.full { color: var(--bad); }
.field { display: grid; gap: 6px; }
/* telefoon: formulieren onder elkaar, leerlingen als kaartjes */
@media (max-width: 560px) {
  .formrow > * { flex: 1 1 100% !important; }
  .classhead { align-items: stretch; }
  .classhead > * { flex: 1 1 100%; }
  .bigcode { text-align: center; }
  h1 { font-size: 30px; }
}
@media (max-width: 680px) {
  .tablewrap.cards { background: none; box-shadow: none; overflow: visible; }
  .cards table, .cards tbody, .cards td { display: block; }
  .cards thead { display: none; }
  .cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px; }
  .cards td { border: 0; padding: 0; white-space: normal; }
  .cards td.av { order: 1; } .cards td.av .avbtn { font-size: 34px; }
  .cards td.nm { order: 2; flex: 1; font-size: 19px; }
  .cards td.dl { order: 3; }
  .cards td.lv { order: 4; flex: 1 1 100%; } .cards td.lv select { width: 100%; font-size: 16px; padding: 10px 12px; }
  .cards td.st { order: 5; flex: 1 1 15%; text-align: center; background: var(--bg); border-radius: 10px; padding: 6px 4px; font-family: var(--display); font-size: 20px; }
  .cards td.st::before { content: attr(data-label); display: block; font-family: var(--body); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .cards td.wh { order: 6; flex: 1 1 100%; color: var(--muted); font-size: 13px; }
  .cards td.wh::before { content: "Laatst gespeeld: "; }
}
.avbtn { font-size: 26px; line-height: 1; }
.namebtn { font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.delbtn { font-size: 12px; font-weight: 800; color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.delbtn.sure { color: #fff; background: var(--bad); }
.wordlist { display: flex; flex-wrap: wrap; gap: 8px; }
.wordlist .chip { font-size: 17px; padding: 3px 10px; }
.endtop { display: flex; justify-content: space-between; align-items: center; }
.stars { font-size: 40px; letter-spacing: 6px; color: var(--orange); }
.muted { color: var(--muted); font-weight: 700; margin: 0; }
/* ---------- Beweging ---------- */
.owl { overflow: visible; }
.owl g { transform-box: view-box; }
.owl .m-all { transform-origin: 40px 98px; animation: bob 3s ease-in-out var(--t) infinite; }
.owl .m-tail { transform-origin: 60px 90px; animation: tail 2.4s ease-in-out var(--t) infinite; }
.owl .m-eyes { transform-origin: 40px 38px; animation: blink 4.6s linear var(--t) infinite; }
.owl .m-head { transform-origin: 40px 58px; }
@keyframes bob { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-2px) scaleY(1.015); } }
@keyframes tail { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.owl.happy .m-all { animation: hop .5s cubic-bezier(.3,1.6,.6,1) 2; }
.owl.happy .m-tail, .owl.cheer .m-tail { animation: wag .25s ease-in-out 6; }
.owl.cheer .m-all { animation: hop .45s cubic-bezier(.3,1.6,.6,1) 5; }
.owl.cheer .m-nut { transform-origin: 40px 66px; animation: toss .9s ease-in-out 2; }
.owl.proud .m-all { animation: hop .5s cubic-bezier(.3,1.6,.6,1) 1; }
.owl.oops .m-head { animation: nope .5s ease-in-out 1; }
.owl.think .m-head { animation: tilt 1.4s ease-in-out infinite; }
.owl.think .m-eyes { animation: look 1.4s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(2px) scale(1.04, .94); } 50% { transform: translateY(-16px) scale(.97, 1.04); } }
@keyframes wag { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-16deg); } }
@keyframes toss { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-20px) rotate(200deg); } }
@keyframes nope { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } }
@keyframes look { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2.5px); } }

/* logo valt erin bij het openen */
.intro .logo.big span { animation: drop .55s cubic-bezier(.3,1.5,.6,1) backwards; }
.intro .logo.big .lrow:first-child span:nth-child(1) { animation-delay: .05s; } .intro .logo.big .lrow:first-child span:nth-child(2) { animation-delay: .11s; }
.intro .logo.big .lrow:first-child span:nth-child(3) { animation-delay: .17s; } .intro .logo.big .lrow:first-child span:nth-child(4) { animation-delay: .23s; }
.intro .logo.big .lrow:first-child span:nth-child(5) { animation-delay: .29s; } .intro .logo.big .lrow:first-child span:nth-child(6) { animation-delay: .35s; }
.intro .logo.big .lab span:nth-child(1) { animation-delay: .5s; } .intro .logo.big .lab span:nth-child(2) { animation-delay: .58s; } .intro .logo.big .lab span:nth-child(3) { animation-delay: .66s; }
@keyframes drop { 0% { opacity: 0; translate: 0 -40px; } 70% { opacity: 1; translate: 0 4px; } 100% { translate: 0 0; } }
.intro .speech { animation: bubble .4s cubic-bezier(.3,1.6,.6,1) .9s backwards; }
@keyframes bubble { from { opacity: 0; transform: scale(.5); transform-origin: 100% 100%; } to { opacity: 1; transform: scale(1); } }

/* tegels in het spel */
.tile.pop { animation: pop .45s cubic-bezier(.3,1.6,.6,1) backwards; }
@keyframes pop { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.tile.glow { animation: pop .45s cubic-bezier(.3,1.6,.6,1) backwards, glow 1s ease-out .3s backwards; }
@keyframes glow { 0% { box-shadow: inset 0 -3px 0 var(--tile-edge), 0 0 0 0 rgba(255, 214, 107, .9); } 100% { box-shadow: inset 0 -3px 0 var(--tile-edge), 0 0 0 10px rgba(255, 214, 107, 0); } }
.tile.pending { animation: place .2s ease-out; }
@keyframes place { from { transform: scale(1.25); } to { transform: scale(1); } }
.shake .tile.pending { animation: shake .45s ease-in-out; background: #FFC9B8; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.rtile.deal { animation: deal .45s cubic-bezier(.3,1.5,.6,1) backwards; }
@keyframes deal { 0% { opacity: 0; transform: translateY(40px) rotate(-15deg) scale(.6); } 100% { opacity: 1; transform: none; } }
.rtile.sel { animation: wiggle 1s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.btn:not(:disabled):active, .rtile:active, .role:active, .level:active, .kid:active { transform: scale(.95); }
.btn, .kid { transition: transform .1s; }
.boardwrap { position: relative; }
.floatscore {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -50%);
  font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--accent);
  text-shadow: 0 2px 0 var(--surface), 0 0 12px var(--surface); animation: floatup 1.4s ease-out forwards;
}
.floatscore.lexs { color: var(--orange); }
.floatscore small { display: block; font-size: 15px; text-align: center; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.bubble.fresh { animation: bubble2 .35s cubic-bezier(.3,1.5,.6,1); }
@keyframes bubble2 { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }
.score b.bump { display: inline-block; animation: bump .5s cubic-bezier(.3,1.6,.6,1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: var(--accent); } 100% { transform: scale(1); } }
.lex .owl { width: 64px; flex: none; margin-top: -8px; }
.stars.win span { display: inline-block; animation: star .5s cubic-bezier(.3,1.6,.6,1) backwards; }
.stars.win span:nth-child(2) { animation-delay: .2s; } .stars.win span:nth-child(3) { animation-delay: .4s; }
@keyframes star { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
/* ---------- Brede schermen (laptop / desktop / tablet liggend) ---------- */
.classtop { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .app { transition: max-width .2s; }
  .app[data-screen="start"] { max-width: 980px; }
  .app[data-screen="student-pick"] { max-width: 900px; }
  .app[data-screen^="teacher"] { max-width: 1120px; }
  .app[data-screen="teacher-password"] { max-width: 560px; }
  /* startscherm */
  .app[data-screen="start"] .hero { padding: 32px 36px; }
  .app[data-screen="start"] .levels { grid-template-columns: repeat(3, 1fr); }
  .app[data-screen="start"] .level { grid-template-rows: auto 1fr; grid-template-columns: none; }
  .app[data-screen="start"] .steps { grid-template-columns: repeat(3, 1fr); }
  /* leerkracht: klassen als tegels */
  .app[data-screen="teacher"] .classlist { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .app[data-screen="teacher"] .classcard { padding: 18px 20px; }
  .app[data-screen="teacher"] .formrow > input { flex: 2 1 260px; }
  /* leerkracht: klas – kop en toevoegen naast elkaar, tabel over de volle breedte */
  .classtop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; }
  .classtop .classhead { display: grid; gap: 12px; }
  .classtop .bigcode { justify-self: start; }
  .progress { font-size: 15px; }
  .progress td { padding: 10px 12px; }
  .progress th { padding: 12px; }
  /* spel: bord links, Lex + plankje + knoppen rechts */
  .app[data-screen="game"] { max-width: 1060px; display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "top top" "board scores" "board lex" "board rack" "board controls" "board ."; column-gap: 24px; row-gap: 14px; align-items: start; }
  .app[data-screen="game"] > .topbar { grid-area: top; }
  .app[data-screen="game"] > .scores { grid-area: scores; }
  .app[data-screen="game"] > .boardwrap { grid-area: board; --bw: min(660px, calc(100vh - 120px)); max-width: var(--bw); width: 100%; justify-self: end; }
  .app[data-screen="game"] > .lex { grid-area: lex; }
  .app[data-screen="game"] > .rack { grid-area: rack; flex-wrap: wrap; }
  .app[data-screen="game"] > .controls { grid-area: controls; }
  .app[data-screen="game"] .rtile { width: 44px; font-size: 24px; }
  .app[data-screen="game"] .rtile.di { font-size: 18px; }
}
/* ---------- Levels ---------- */
.lvlbadge { --s: 64px; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; border-radius: 30%;
  background: radial-gradient(circle at 35% 30%, #FFE59A, #F5B83D 60%, #D9A520); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), var(--shadow); }
.lvlbadge b { font-family: var(--display); font-size: calc(var(--s) * .48); color: #5A3A00; line-height: 1; }
.levelcard { display: flex; gap: 14px; align-items: center; background: var(--surface); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); }
.lvlinfo { flex: 1; min-width: 0; display: grid; gap: 6px; }
.lvltitle { font-family: var(--display); font-size: 20px; }
.row.between { justify-content: space-between; align-items: baseline; }
.xpbar { height: 12px; border-radius: 99px; background: var(--board); overflow: hidden; }
.xpbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), #5BD6A4); transition: width .8s ease-out; }
.xpbox { display: grid; gap: 8px; background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.xpgain { font-family: var(--display); font-size: 28px; color: var(--teal); }
.xpgain small { font-family: var(--body); font-size: 14px; color: var(--muted); }
.lvlup { display: flex; gap: 12px; align-items: center; animation: pop .6s cubic-bezier(.3,1.6,.6,1); }
.lvlup b { display: block; font-family: var(--display); font-size: 24px; } .lvlup span { color: var(--muted); font-weight: 700; }
/* ---------- Leerling: acties ---------- */
.actions { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.action { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 18px; box-shadow: var(--shadow); border: 2px solid transparent; transition: transform .12s; }
.action:hover { transform: translateY(-2px); }
.action b { display: block; font-family: var(--display); font-size: 20px; line-height: 1.15; } .action small { color: var(--muted); font-weight: 700; }
.action .owl { width: 54px; flex: none; }
.a-lex { background: var(--tint-p); } .a-mp { background: var(--tint-o); } .a-pz { background: var(--tint-t); }
.aic { flex: none; display: flex; gap: 2px; color: #fff; }
.a-mp .aic { background: var(--orange); border-radius: 14px; padding: 10px; } .a-mp .aic svg { width: 22px; height: 22px; }
.pzic { flex-wrap: wrap; width: 54px; gap: 2px; }
.pzic i { width: 16px; height: 16px; border-radius: 4px; background: var(--tile); color: var(--tile-ink); font: 800 10px/16px var(--display); text-align: center; font-style: normal; box-shadow: inset 0 -2px 0 var(--tile-edge); }
.resume { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--accent); color: var(--accent-ink); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); animation: bubble2 .4s; }
.resume .av { font-size: 34px; } .resume b { display: block; font-family: var(--display); font-size: 18px; } .resume small { opacity: .85; font-weight: 700; }
.resume .chev { margin-left: auto; font-size: 28px; }
.pzpromo { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; background: var(--tint-t); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); }
.pzpromo h3 { font-size: 21px; } .pzpromo small { color: var(--muted); font-weight: 700; }
.pzpromo .row { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; } .pzpromo .row .btn { flex: 1; font-size: 16px; }
/* ---------- Woordzoeker ---------- */
.pzhead h1 { font-size: 30px; } .pzhead p { margin: 2px 0 0; }
.pztime { font-variant-numeric: tabular-nums; color: var(--accent) !important; font-family: var(--display); font-size: 18px; }
.pzwrap { display: grid; gap: 14px; }
.pzgrid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; padding: 6px; background: var(--board); border-radius: 14px; touch-action: none; user-select: none; -webkit-user-select: none; aspect-ratio: 1; }
.pzcell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: var(--cell); font-family: var(--display); font-weight: 800;
  font-size: clamp(14px, calc(min(560px, 100vw - 32px) / var(--n) * .45), 30px); color: var(--ink); cursor: pointer; transition: background .15s, transform .1s; }
.pzcell.sel { background: var(--tile); color: var(--tile-ink); transform: scale(1.06); box-shadow: inset 0 -3px 0 var(--tile-edge); }
.pzcell.f { color: #241C3E; }
.f0 { background: #FFD66B !important; } .f1 { background: #8FDDD9 !important; } .f2 { background: #C9B8FF !important; }
.f3 { background: #FFB4C4 !important; } .f4 { background: #B8E6A0 !important; } .f5 { background: #FFC98F !important; }
.pzcell.hit { animation: pop .45s cubic-bezier(.3,1.6,.6,1); }
.pzcell.miss { animation: shake .4s; }
.pzside { display: grid; gap: 10px; align-content: start; }
.pzwords { display: flex; flex-wrap: wrap; gap: 6px; }
.pzword { font-family: var(--display); font-weight: 800; font-size: 17px; padding: 6px 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); letter-spacing: .04em; color: var(--ink); }
.pzword:disabled { opacity: 1; cursor: default; }
.pzword.done { text-decoration: line-through; text-decoration-thickness: 3px; color: #241C3E; }
.ranking { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: r; max-height: 220px; overflow: auto; }
.ranking li { display: grid; grid-template-columns: 26px 30px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--bg); font-weight: 700; }
.ranking li::before { counter-increment: r; content: counter(r) "."; font-family: var(--display); color: var(--muted); }
.ranking li.me { background: var(--tint-p); outline: 2px solid var(--accent); }
/* ---------- Live spelen ---------- */
.mpwait { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 30px 10px; }
.mpwait .owl { width: 140px; } .mpwait p { max-width: 36ch; }
.dots { display: flex; gap: 8px; } .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.1); } }
.idle { display: grid; gap: 6px; width: 100%; margin-top: 6px; color: var(--muted); font-size: 14px; }
.idle .btn { font-size: 15px; padding: 8px; }
@media (min-width: 900px) {
  .app[data-screen="puzzle"] { max-width: 1000px; }
  .app[data-screen="puzzle"] .pzwrap { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .app[data-screen="puzzle"] .pzgrid { max-width: min(600px, calc(100vh - 170px)); width: 100%; justify-self: end; }
  .app[data-screen="puzzle"] .pzcell { font-size: clamp(14px, calc(min(600px, 100vh - 170px) / var(--n) * .45), 32px); }
  .app[data-screen="student-home"] { max-width: 900px; }
  .app[data-screen="student-home"] .actions { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- Kledingkast ---------- */
.wardrobebtn { display: flex; align-items: center; gap: 12px; text-align: left; padding: 6px 16px 6px 8px; border-radius: 18px; background: linear-gradient(120deg, var(--tint-o), var(--tint-p)); box-shadow: var(--shadow); }
.wardrobebtn .owl { width: 84px; flex: none; } .wardrobebtn b { display: block; font-family: var(--display); font-size: 20px; } .wardrobebtn small { color: var(--muted); font-weight: 700; }
.wardrobebtn .chev { margin-left: auto; font-family: var(--display); font-size: 30px; color: var(--accent); }
.wardrobe { display: grid; gap: 16px; }
.wearstage { display: grid; justify-items: center; gap: 6px; background: var(--surface); border-radius: 22px; padding: 16px; box-shadow: var(--shadow);
  background-image: radial-gradient(circle at 50% 70%, var(--tint-o), transparent 65%); }
.wearlex .owl { width: min(220px, 55vw); }
.wearstage p { text-align: center; margin: 0; }
.wearpanel { display: grid; gap: 12px; align-content: start; }
.wearpanel h1 { font-size: 30px; }
.weartabs { display: flex; gap: 6px; flex-wrap: wrap; }
.weartab { font-weight: 800; padding: 8px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); color: var(--muted); }
.weartab.on { background: var(--accent); color: var(--accent-ink); }
.weargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.wearitem { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); border: 3px solid transparent; }
.wearitem .owl { width: 64px; } .wearitem b { font-size: 13px; line-height: 1.2; text-align: center; }
.wearitem.on { border-color: var(--accent); background: var(--tint-p); }
.wearitem.locked { opacity: .55; filter: grayscale(.8); cursor: default; }
.wearitem .lock { position: absolute; top: 6px; right: 6px; font-size: 11px; font-weight: 800; background: var(--bg); border-radius: 999px; padding: 1px 6px; }
.unlock { display: grid; gap: 8px; background: var(--tint-o); border-radius: 14px; padding: 10px 12px; }
.unlockitem { display: flex; align-items: center; gap: 10px; animation: pop .6s cubic-bezier(.3,1.6,.6,1); }
.unlockitem .owl { width: 70px; } .unlockitem b { display: block; font-family: var(--display); font-size: 20px; } .unlockitem span { font-weight: 700; color: var(--muted); }
.classset { gap: 12px; }
.switch { display: flex; gap: 12px; align-items: flex-start; font-weight: 800; cursor: pointer; }
.switch input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.switch small { display: block; font-weight: 700; color: var(--muted); font-size: 13px; }
@media (min-width: 900px) {
  .app[data-screen="wardrobe"] { max-width: 1000px; }
  .wardrobe { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
  .wearstage { position: sticky; top: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* basis (was de pagina-wrapper) */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; } img { max-width: 100%; } [hidden] { display: none !important; }

/* ================== KLASSENUITDAGING & WEEKRAPPORT ================== */
.chcard { background: linear-gradient(135deg, #FFF6D6, #FFE7B8); color: #3B2A06; border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; box-shadow: var(--shadow); }
.chcard.done { background: linear-gradient(135deg, #DDF7E6, #C6EFD5); color: #0F3D22; }
.chcard .muted { color: inherit; opacity: .8; }
.chcard.big { padding: 18px 20px; gap: 12px; }
.chtop { display: flex; gap: 12px; align-items: center; }
.chtop .chicon { font-size: 34px; line-height: 1; }
.chtop b { display: block; font-family: var(--display); font-size: 20px; line-height: 1.1; }
.chtop span { font-weight: 700; }
.chbar { position: relative; height: 26px; border-radius: 999px; background: rgba(0,0,0,.1); overflow: hidden; }
.chbar.big { height: 34px; }
.chbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #F08C00, #FFB938); border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.2,1); min-width: 26px; }
.chbar.done i { background: linear-gradient(90deg, #1F9D55, #5CD38C); }
.chbar span { position: relative; display: block; text-align: center; font-weight: 800; font-size: 14px; line-height: 26px; color: #2A2140; }
.chbar.big span { line-height: 34px; font-size: 16px; }
.chgain { margin: 0; font-weight: 800; color: #B35F00; background: #FFF1D6; border-radius: 12px; padding: 8px 12px; }
.chgain.done { color: #0F6B37; background: #DDF7E6; }
.ranking { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: r; }
.ranking li { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,.55); border-radius: 10px; padding: 6px 10px; counter-increment: r; }
.ranking li::before { content: counter(r); font-family: var(--display); font-weight: 800; width: 18px; }
.ranking li b { flex: 1; }
.ctabs { display: flex; gap: 6px; background: var(--surface); padding: 5px; border-radius: 999px; box-shadow: var(--shadow); align-self: stretch; }
.ctab { flex: 1; padding: 10px 8px; border-radius: 999px; font-weight: 800; color: var(--muted); font-size: 15px; }
.ctab.on { background: var(--accent); color: var(--accent-ink); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.preset { font-size: 13px; text-align: left; }
.chgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chgrid .wide { grid-column: 1 / -1; }
@media (max-width: 420px) { .chgrid { grid-template-columns: 1fr; } }
.weeknav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.weeknav b { flex: 1; text-align: center; font-family: var(--display); font-size: 17px; min-width: 160px; }
.weeknav button:disabled { opacity: .35; }
.rtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.rtile2 { background: var(--surface); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.rtile2 b { font-family: var(--display); font-size: 26px; line-height: 1.1; }
.rtile2 span { font-size: 13px; font-weight: 700; color: var(--muted); }
.dl.up { color: var(--good); font-weight: 800; } .dl.down { color: var(--bad); font-weight: 800; } .dl.eq { color: var(--muted); }
small.dl { font-size: 12px; }
.lvlmini { font-size: 11px; font-weight: 800; background: var(--board); border-radius: 6px; padding: 1px 5px; vertical-align: middle; }
.xpcell { position: relative; display: inline-block; min-width: 64px; padding: 0 4px; z-index: 0; }
.xpcell i { position: absolute; inset: 2px auto 2px 0; background: #FFE7B8; border-radius: 4px; z-index: -1; }
.report details summary { cursor: pointer; font-weight: 800; color: var(--accent); }
.report details .wordlist { margin-top: 6px; max-width: 420px; white-space: normal; }
.wordlist.small .chip { font-size: 12px; padding: 3px 8px; }
@media (max-width: 679px) {
  .cards .report td.wds { order: 6; flex: 1 1 100%; }
}
@media print {
  body { background: #fff !important; }
  .topbar, .ctabs, .weeknav button, .classtop, #delClass, .tablewrap { box-shadow: none !important; }
  .topbar, .ctabs, .weeknav button, .classtop, #delClass { display: none !important; }
  .report details { display: block; } .report details > summary { display: none; }
  .report details .wordlist { display: flex !important; }
  .app { max-width: none !important; padding: 0 !important; }
}
.chip.preset { text-transform: none; letter-spacing: 0; }
.chcard .delbtn { justify-self: start; }

/* ================== WOORDENLIJSTEN & QUIZ ================== */
.headbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.headbtns .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; }
.headbtns .btn .ic { margin: 0; }
.linkish { color: var(--accent); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; padding: 2px 0; }
.linkish.del { color: var(--muted); } .linkish.del.sure { color: var(--bad); }
.setrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .setrow { grid-template-columns: 1fr; } }
.groeptabs { overflow-x: auto; }
.groeptabs .ctab { white-space: nowrap; min-width: 84px; }
.vaddgrid { display: grid; grid-template-columns: 1fr 2fr auto auto; gap: 8px; }
@media (max-width: 760px) { .vaddgrid { grid-template-columns: 1fr; } }
.vdup { margin: 0; font-size: 14px; font-weight: 700; color: #8A5300; display: none; }
.vdup.on { display: block; background: #FFF1DC; border-radius: 10px; padding: 8px 10px; }
.vimport summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.vimport summary::-webkit-details-marker { display: none; }
.vimport summary::before { content: '▸'; color: var(--accent); }
.vimport[open] summary::before { content: '▾'; }
.vimport textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--board); background: var(--bg); color: var(--ink); resize: vertical; }
.btn.file { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vprev { display: grid; gap: 8px; }
.vtable td.wrap { white-space: normal; min-width: 200px; }
.vtable tr.skip td { color: var(--muted); }
.vstat { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--board); color: var(--muted); white-space: nowrap; }
.vstat.new { background: #DDF7E6; color: #0F6B37; }
.vfilters { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.chipsrow { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.f { text-transform: none; letter-spacing: 0; background: var(--bg); box-shadow: none; border: 2px solid var(--board); color: var(--ink); }
.chip.f.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; }
.vrow { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr auto; gap: 4px 14px; align-items: baseline; padding: 10px 2px; border-bottom: 1px solid var(--board); }
.vrow:last-child { border-bottom: 0; }
.vword { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.vword b { font-size: 16px; }
.vmean { color: var(--muted); font-weight: 600; font-size: 15px; }
.vblok, .vsrc { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 6px; background: var(--board); color: var(--muted); }
.vsrc.own { background: #DDF5F3; color: #0B6E6D; } .vsrc.chk { background: #FFE6DC; color: #A33A0B; }
.vbtns { display: flex; gap: 10px; justify-content: flex-end; }
.vrow.editing { grid-template-columns: 1fr 2fr auto auto; align-items: center; }
.btn.sm { font-size: 14px; padding: 8px 12px; }
@media (max-width: 680px) {
  .vrow { grid-template-columns: 1fr auto; } .vrow .vmean { grid-column: 1 / -1; grid-row: 2; }
  .vrow.editing { grid-template-columns: 1fr; }
}
.hardwords { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hardwords li { display: grid; gap: 2px; background: var(--bg); border-radius: 10px; padding: 8px 12px; }
.hardwords li span { color: var(--muted); font-weight: 600; font-size: 14px; }
.hardwords li small { font-weight: 800; color: var(--bad); font-size: 12px; }
/* quiz */
.a-quiz { background: #FFE9F0; }
.qzic i { width: 54px; height: 54px; border-radius: 14px; background: #E0457B; color: #fff; font: 800 34px/54px var(--display); font-style: normal; text-align: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.qprog { display: flex; gap: 4px; }
.qprog i { flex: 1; height: 8px; border-radius: 99px; background: var(--board); }
.qprog i.now { background: var(--accent); } .qprog i.ok { background: var(--good); } .qprog i.bad { background: var(--bad); }
.qcard { background: var(--surface); border-radius: 20px; padding: 22px 20px; box-shadow: var(--shadow); text-align: center; display: grid; gap: 6px; }
.qlabel { margin: 0; font-weight: 800; color: var(--muted); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.qtext { margin: 0; font-family: var(--display); font-size: 24px; line-height: 1.25; font-weight: 700; }
.qtext.big { font-size: 34px; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.iconbtn.sm { padding: 6px 10px; font-size: 18px; }
.qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qopt { background: var(--surface); border: 3px solid var(--board); border-radius: 16px; padding: 16px 12px; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.2; min-height: 72px; box-shadow: var(--shadow); color: var(--ink); transition: transform .1s; }
.qopt.long { grid-column: 1 / -1; font-family: var(--body); font-size: 16px; font-weight: 700; min-height: 0; text-align: left; }
.qopt:not(:disabled):hover { border-color: var(--accent); transform: translateY(-2px); }
.qopt.right { border-color: var(--good); background: #DDF7E6; color: #0F3D22; }
.qopt.wrong { border-color: var(--bad); background: #FFE6DC; color: #6B2207; }
.qopt.dim { opacity: .5; }
@media (max-width: 380px) { .qopts { grid-template-columns: 1fr; } }
.qfeed .bubble b { font-weight: 800; }
.center { text-align: center; }
.app[data-screen="quiz"] { max-width: 640px; }

/* ================== KLASMENU (links) ================== */
.tlayout { display: grid; gap: 14px; }
.tmain { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tmain-title { margin: 4px 0 0; font-size: 28px; }
.tnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 5px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); }
.tnav-head, .tnav hr, .tnav-item.sub { display: none; }
.tnav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; font-weight: 800; color: var(--muted); font-size: 12px; }
.tnav-item svg { flex: none; }
.tnav-item.on { background: var(--accent); color: var(--accent-ink); }
.tnav-item:not(.on):hover { color: var(--accent); }
.setsec { gap: 12px; }
.setsec h3 { margin: 0 0 2px; font-size: 20px; }
.setsec p { margin: 0; }
.setsec.danger { border: 2px solid #FFD9CC; box-shadow: none; }
.setmsg { position: sticky; top: 8px; z-index: 2; background: #DDF7E6; padding: 8px 12px; border-radius: 10px; align-self: flex-start; }
@media (min-width: 900px) {
  .app[data-screen="teacher-class"] { max-width: 1240px; }
  .app[data-screen="teacher-class"] > .topbar #backT { visibility: hidden; }
  .tlayout { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
  .tnav-item.sub { display: flex; }
  .tnav { display: flex; flex-direction: column; overflow: visible; position: sticky; top: 16px; margin: 0; padding: 12px; gap: 4px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); }
  .tnav-head { display: grid; gap: 2px; padding: 6px 10px 12px; border-bottom: 1px solid var(--board); margin-bottom: 6px; }
  .tnav-head b { font-family: var(--display); font-size: 20px; line-height: 1.15; }
  .tnav-head span { font-family: var(--display); font-weight: 800; letter-spacing: .12em; color: var(--accent); font-size: 14px; }
  .tnav hr { display: block; border: 0; border-top: 1px solid var(--board); margin: 8px 0; width: 100%; }
  .tnav-item { flex-direction: row; gap: 10px; font-size: 15px; background: none; border-radius: 12px; padding: 11px 12px; width: 100%; }
  .tnav-item.on { background: var(--tint-p); color: var(--accent); }
  .tnav-item.sub { font-size: 14px; padding: 9px 12px; }
  .tmain .classtop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media print { .tnav { display: none !important; } .tlayout { display: block; } }
@media (min-width: 900px) { .tmain .rtiles { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } }

/* ================== RUSTIGER STARTSCHERMEN ================== */
.lvchip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); box-shadow: var(--shadow); border-radius: 999px; padding: 4px 12px 4px 4px; color: var(--accent); }
.lvchip .lvlbadge { --s: 34px; }
.lvchip-txt { display: grid; gap: 3px; text-align: left; min-width: 64px; }
.lvchip-txt b { font-family: var(--display); font-size: 15px; line-height: 1; color: var(--ink); }
.lvchip .xpbar { height: 6px; }
.lvchip-ic { flex: none; }
.lvchip:hover { transform: translateY(-1px); }
.playbig { display: flex; align-items: center; gap: 16px; text-align: left; background: var(--accent); color: #fff; border-radius: 26px; padding: 14px 22px 14px 14px;
  box-shadow: 0 5px 0 #43299E; transition: transform .12s, box-shadow .12s; }
.playbig:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #43299E; }
.playbig:active { transform: translateY(3px); box-shadow: 0 2px 0 #43299E; }
.playbig .owl { width: 104px; flex: none; background: rgba(255,255,255,.14); border-radius: 22px; padding: 4px; }
.playbig b { display: block; font-family: var(--display); font-size: 40px; line-height: 1; }
.playbig small { font-weight: 700; opacity: .85; font-size: 16px; }
.playgo { margin-left: auto; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--tile); color: var(--tile-ink); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: inset 0 -4px 0 var(--tile-edge); padding-left: 4px; }
.minitiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.minitile { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--surface); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); }
.minitile b { display: block; font-family: var(--display); font-size: 18px; line-height: 1.15; }
.minitile small { color: var(--muted); font-weight: 700; font-size: 13px; }
.mt-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--tint-p); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--accent); }
.mt-ic .ic { margin: 0; }
.playsheet .actions { grid-template-columns: 1fr; }
@media (min-width: 560px) { .playsheet { max-width: 640px; } .playsheet .actions { grid-template-columns: 1fr 1fr; } }
.guestbtn { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; background: transparent; border: 2px dashed var(--board); border-radius: 16px; padding: 14px 16px; color: var(--ink); }
.guestbtn b { display: block; font-family: var(--display); font-size: 19px; } .guestbtn small { color: var(--muted); font-weight: 700; }
.guestbtn .chev { margin-left: auto; font-size: 20px; color: var(--accent); }
.guestbtn:hover, .guestbtn.open { border-color: var(--accent); }
.guestarea { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 420px) { .playbig b { font-size: 32px; } .playbig .owl { width: 80px; } .playgo { width: 46px; height: 46px; } .lvchip-txt { display: none; } .lvchip { padding: 4px 10px 4px 4px; } }