:root {
  --grond: #F6F2EA; --kaart: #FFFFFF; --lijn: #E2DBCD; --inkt: #1F2430; --zacht: #555B66;
  --groen: #0F6E6A; --groen-donker: #0A4F4C; --groen-licht: #DCEBE8;
  --oranje: #B4501A; --oranje-licht: #F7E3D6; --rood: #A23B2A; --rood-licht: #F6DEDA;
  --kop: 'Bricolage Grotesque', Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--grond); }
body { margin: 0; font-family: 'Atkinson Hyperlegible', Verdana, sans-serif; background: var(--grond); color: var(--inkt); font-size: 16px; line-height: 1.4; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--groen); }
h1, h2, h3 { font-family: var(--kop); margin: 0; line-height: 1.1; }
h1 { font-weight: 800; font-size: 30px; }
h2 { font-weight: 600; font-size: 20px; }
.verborgen { display: none !important; }
.zacht { color: var(--zacht); font-size: 14px; }

/* leerlingenapp: smal en mobiel */
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.scherm { flex: 1; padding: 28px 18px 24px; display: flex; flex-direction: column; gap: 18px; }
.logo { font-family: var(--kop); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -1px; }
.logo span { color: var(--oranje); }
.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tegel { padding: 20px 12px; border-radius: 16px; font-family: var(--kop); font-weight: 800; font-size: 21px; text-align: center; background: var(--kaart); border: 2px solid var(--inkt); }
.tegel:nth-child(1) { background: var(--groen); color: #fff; border-color: var(--groen); transform: rotate(-3deg); }
.tegel:nth-child(2) { transform: rotate(2deg); }
.tegel:nth-child(3) { transform: rotate(2deg); }
.tegel:nth-child(4) { background: var(--oranje); color: #fff; border-color: var(--oranje); transform: rotate(-2deg); }

.veld { display: flex; flex-direction: column; gap: 6px; }
.veld label { font-weight: 700; font-size: 14px; }
.veld input, .veld select, .veld textarea { min-height: 48px; padding: 0 14px; border: 1px solid #C9C1B1; border-radius: 12px; background: #fff; font-size: 17px; }
.veld textarea { padding: 10px 12px; font-size: 14px; min-height: 160px; font-family: ui-monospace, Menlo, monospace; }
.veld input:focus, .veld select:focus, .veld textarea:focus, button:focus-visible { outline: 3px solid var(--groen); outline-offset: 1px; }

.knop { min-height: 52px; padding: 0 18px; border: none; border-radius: 14px; background: var(--inkt); color: #fff; font-weight: 700; font-size: 17px; }
.knop.oranje { background: var(--oranje); }
.knop.groen { background: var(--groen); }
.knop.rand { background: transparent; color: var(--inkt); border: 2px solid var(--inkt); }
.knop.klein { min-height: 44px; font-size: 15px; padding: 0 16px; border-radius: 12px; }
.knop:disabled { opacity: .5; cursor: default; }
.foutmelding { padding: 12px 14px; border-radius: 12px; background: var(--rood-licht); color: #6E2116; font-size: 15px; }
.foutmelding:empty { display: none; }

.kopregel { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pil { padding: 8px 12px; background: #fff; border: 1px solid var(--lijn); border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.rondekaart { padding: 20px; background: var(--groen); color: #fff; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; }
.rondekaart .klein { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.rondekaart .groot { font-family: var(--kop); font-weight: 800; font-size: 30px; line-height: 1.05; }
.rondekaart select { background: var(--groen-donker); color: #fff; border: 1px solid #ffffff55; border-radius: 10px; min-height: 40px; padding: 0 8px; }
.balk { height: 10px; background: var(--groen-donker); border-radius: 999px; overflow: hidden; }
.balk > div { height: 100%; background: #fff; border-radius: 999px; }
.balk.licht { height: 6px; background: var(--lijn); }
.balk.licht > div { background: var(--groen); }

.keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.keuze { padding: 14px; border: none; border-radius: 14px; background: var(--inkt); color: #fff; text-align: left; display: flex; flex-direction: column; gap: 4px; min-height: 84px; }
.keuze b { font-size: 16px; }
.keuze span { font-size: 13px; color: #D5D8DE; }
.keuze.oranje { background: var(--oranje); }
.keuze.oranje span { color: #fff; }
.keuze.rand { grid-column: span 2; background: transparent; color: var(--inkt); border: 2px solid var(--inkt); min-height: 0; }
.keuze.rand span { color: var(--zacht); }
.keuze.rand b { color: var(--inkt); }
.keuze .rij { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; }

.lijst { display: flex; flex-direction: column; gap: 10px; }
.item { padding: 14px; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.item .wie { font-weight: 700; }
.item.info { background: var(--groen-licht); border: none; font-size: 15px; display: block; }
.item.info.verlies { background: #EFE9DD; }
.label-klas { color: var(--oranje); font-weight: 700; }

nav.onder { position: sticky; bottom: 0; height: 68px; border-top: 1px solid var(--lijn); background: #fff; display: grid; grid-template-columns: repeat(3, 1fr); }
nav.onder button { border: none; background: transparent; font-size: 14px; color: var(--zacht); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
nav.onder button svg { width: 22px; height: 22px; }
nav.onder button[aria-current="page"] { color: var(--groen); font-weight: 700; }

/* spelen */
.stippen { display: grid; gap: 4px; }
.stippen div { height: 8px; border-radius: 4px; background: var(--lijn); }
.stippen .j { background: var(--groen); }
.stippen .f { background: var(--oranje); }
.klok { width: 58px; height: 58px; flex-shrink: 0; border-radius: 999px; border: 3px solid var(--oranje); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.klok.bijna { background: var(--oranje); color: #fff; }
.vraag { padding: 22px 20px; background: #fff; border: 1px solid var(--lijn); border-radius: 20px; display: flex; flex-direction: column; gap: 10px; }
.vraag .kop { font-size: 15px; color: var(--zacht); }
.vraag .tekst { font-family: var(--kop); font-weight: 800; font-size: 24px; line-height: 1.2; }
.vraag .tekst.groot { font-size: 36px; }
.vraag .sub { font-size: 17px; font-weight: 700; }
.gat { display: inline-block; min-width: 90px; border-bottom: 3px solid var(--oranje); }
.opties { display: flex; flex-direction: column; gap: 10px; }
.optie { min-height: 54px; padding: 12px 16px; text-align: left; border: 2px solid var(--lijn); border-radius: 14px; background: #fff; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.optie:not(:disabled):hover { border-color: var(--inkt); }
.optie.goed { border-color: var(--groen); background: var(--groen-licht); font-weight: 700; }
.optie.fout { border-color: var(--oranje); background: var(--oranje-licht); }
.optie:disabled { cursor: default; color: var(--inkt); }
.uitleg { padding: 14px 16px; background: var(--inkt); color: #fff; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.uitslag { padding: 26px 20px; border-radius: 20px; background: var(--groen); color: #fff; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.uitslag.verlies { background: var(--inkt); }
.uitslag.wacht { background: var(--oranje); }
.uitslag .groot { font-family: var(--kop); font-weight: 800; font-size: 56px; line-height: 1; }

/* klassement */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--lijn); border-radius: 12px; }
.tabs button { min-height: 42px; border: none; border-radius: 9px; background: transparent; font-size: 14px; }
.tabs button[aria-selected="true"] { background: #fff; font-weight: 700; }
.rang { padding: 12px 14px; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; display: flex; align-items: center; gap: 12px; }
.rang .nr { width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; background: var(--lijn); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.rang:first-child .nr { background: var(--oranje); color: #fff; }
.rang .naam { flex: 1; display: flex; flex-direction: column; }
.rang .naam b { font-size: 17px; }
.rang .naam small { font-size: 13px; }
.rang .score { font-weight: 700; text-align: right; }
.rang .score small { display: block; font-weight: 400; font-size: 12px; color: var(--zacht); }
.rang.ik { background: var(--groen); color: #fff; border-color: var(--groen); }
.rang.ik .nr { background: #fff; color: var(--groen); }
.rang.ik .score small { color: #DCEBE8; }
.kader { padding: 16px; background: #fff; border: 1px dashed var(--oranje); border-radius: 14px; font-size: 15px; }
.woord { padding: 14px; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; display: flex; flex-direction: column; gap: 4px; }
.woord .boven { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.woord b { font-family: var(--kop); font-size: 20px; }
.badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--lijn); white-space: nowrap; }
.badge.knie { background: var(--groen); color: #fff; }
.badge.bezig { background: var(--oranje-licht); color: #7A3510; }

dialog { border: none; border-radius: 20px; padding: 22px; width: min(440px, calc(100vw - 32px)); max-height: 80vh; }
dialog::backdrop { background: #1F243088; }
dialog .lijst { max-height: 50vh; overflow: auto; }
.kiesknop { width: 100%; min-height: 50px; text-align: left; padding: 0 14px; border: 2px solid var(--lijn); border-radius: 12px; background: #fff; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.kiesknop:hover { border-color: var(--inkt); }

/* beheer: breed */
.beheer { display: flex; min-height: 100vh; }
.beheer > nav { width: 230px; flex-shrink: 0; padding: 28px 18px; background: var(--inkt); color: #fff; display: flex; flex-direction: column; gap: 6px; }
.beheer > nav .logo { font-size: 28px; }
.beheer > nav .logo span { color: #F0A77A; }
.beheer > nav button { text-align: left; padding: 12px 14px; border-radius: 10px; border: none; background: transparent; color: #fff; font-size: 15px; }
.beheer > nav button[aria-current="page"] { background: var(--groen); font-weight: 700; }
.beheer main { flex: 1; min-width: 0; padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; }
.paneel { padding: 22px; background: #fff; border: 1px solid var(--lijn); border-radius: 18px; display: flex; flex-direction: column; gap: 14px; }
.rij { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rij > .veld { flex: 1; min-width: 160px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 13px; color: var(--zacht); padding: 8px; border-bottom: 1px solid var(--lijn); }
td { padding: 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 17px; background: var(--groen-licht); padding: 3px 8px; border-radius: 6px; }
.tekstknop { border: none; background: none; color: var(--groen); text-decoration: underline; padding: 4px; font-size: 14px; }
.tekstknop.rood { color: var(--rood); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--groen-licht); font-size: 14px; }
.chip input { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--groen); }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.melding { padding: 12px 14px; border-radius: 12px; background: var(--groen-licht); font-size: 15px; }
@media (max-width: 860px) {
  .beheer { flex-direction: column; }
  .beheer > nav { width: auto; flex-direction: row; flex-wrap: wrap; padding: 14px; }
  .beheer > nav .logo { width: 100%; }
  .beheer main { padding: 20px 16px; }
  .twee { grid-template-columns: 1fr; }
  .paneel { overflow-x: auto; }
}
@media print {
  .beheer > nav, .geenprint { display: none !important; }
  .beheer main { padding: 0; }
}