/* Breukentegels — thema. Vaste onderdelen komen uit ../gedeeld/stijl-v1.css. */
:root {
  --mlp-vak: var(--mlp-rekenen);
  --bt-nacht: #13214a; --bt-nacht2: #1b2d63; --bt-lijn: #2a3f7e;
  --bt-paars: #7c3aed; --bt-rood: #e5383b; --bt-blauw: #2f6fe8; --bt-geel: #f5c518; --bt-groen: #1fb36b;
  --bt-gids: 104px;
}
body.mlp.bt { background: var(--bt-nacht) linear-gradient(var(--bt-nacht), var(--bt-nacht2)); background-attachment: fixed; }
.bt .mlp-balk { background: #fefcf3f2; }
.bt-app { min-height: calc(100dvh - 66px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 14px calc(var(--bt-gids) + 18px); color: #fff;
  background-image: linear-gradient(var(--bt-lijn) 1px, transparent 1px), linear-gradient(90deg, var(--bt-lijn) 1px, transparent 1px); background-size: 44px 44px; background-position: center; }
.bt-laden { color: #fff; }

/* ---------- gids: Daan rechtsonder met ondertitel (altijd in beeld) ---------- */
.bt-gids { position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 30; display: flex; align-items: center; gap: 12px; width: min(980px, calc(100vw - 20px)); pointer-events: none; }
.bt-avatar { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff, #dce6ff); border: 4px solid #fff; box-shadow: 0 6px 18px #0007; position: relative; transition: transform .2s; }
.bt-avatar img { position: absolute; left: 50%; top: 4px; width: 92%; transform: translateX(-50%); }
.bt-avatar.praat { transform: scale(1.08); box-shadow: 0 0 0 6px #ffd84d88, 0 6px 18px #0007; }
.bt-avatar.praat::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 4px solid #ffd84d; animation: bt-puls 1s ease-in-out infinite; }
@keyframes bt-puls { 50% { opacity: .2; transform: scale(1.06); } }
.bt-ondertitel { margin: 0; flex: 1; background: #0b1533e6; color: #fff; border: 2px solid #ffffff55; border-radius: 16px; padding: 10px 16px; font-size: 19px; font-weight: 700; line-height: 1.35; text-shadow: 0 1px 2px #000; }
.bt-ondertitel[data-wie="pien"] { border-color: #ffd84d; }
.bt-ondertitel[data-wie="pien"]::before { content: 'Pien: '; color: #ffd84d; }
@media (max-width: 600px) { :root { --bt-gids: 84px; } .bt-avatar { width: 64px; height: 64px; } .bt-ondertitel { font-size: 16px; padding: 8px 12px; } }

/* ---------- start ---------- */
.bt-start { width: min(860px, 100%); background: #fefcf3; color: var(--mlp-tekst); border-radius: 22px; padding: 18px 22px; box-shadow: 0 16px 40px #0008; }
.bt-start h1 { margin: 4px 0; }
.bt-start .demo { float: right; width: 170px; margin: 0 0 8px 14px; }
.bt-niveaus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; margin: 12px 0; clear: both; }
.bt-niveau { text-align: left; border: 3px solid var(--mlp-rand); border-radius: 16px; background: #fff; padding: 10px 12px; cursor: pointer; box-shadow: 0 4px 0 var(--mlp-rand); min-height: 96px; touch-action: manipulation; }
.bt-niveau b { display: block; font-size: 18px; }
.bt-niveau .nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bt-paars); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.bt-niveau .ster { color: var(--mlp-warm); letter-spacing: 2px; }
.bt-niveau .ster i { color: var(--mlp-rand); font-style: normal; }
.bt-niveau.gekozen { border-color: var(--mlp-hoofd); }
.bt-niveau:focus-visible { outline: 4px solid var(--mlp-hoofd-licht); outline-offset: 2px; }
.bt-start .mlp-schakel { border-top: 1px solid var(--mlp-rand); }
@media (max-width: 560px) { .bt-start .demo { width: 110px; } }

/* ---------- speelveld ---------- */
.bt-veld { width: min(1000px, 100%); display: grid; grid-template-columns: minmax(260px, 470px) 1fr; gap: 20px; align-items: center; }
@media (max-width: 820px) { .bt-veld { grid-template-columns: 1fr; justify-items: center; gap: 12px; } }
.bt-kop { width: min(1000px, 100%); display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #fff; }
.bt-kop .mlp-voortgang { flex: 1; }
.bt-kop .naam { font-weight: 700; white-space: nowrap; }
.bt-bord { width: min(470px, 86vw, calc(100dvh - 300px)); min-width: 240px; aspect-ratio: 1; position: relative; }
.bt-bord svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 24px #0009); overflow: visible; }
.bt-bord .rand { fill: none; stroke: #fff; stroke-width: 6; }
.bt-regio { stroke: #fff; stroke-width: 5; transition: opacity .5s, fill .4s; }
.bt-regio.paars { fill: var(--bt-paars); } .bt-regio.rood { fill: var(--bt-rood); } .bt-regio.blauw { fill: var(--bt-blauw); } .bt-regio.geel { fill: var(--bt-geel); } .bt-regio.groen { fill: var(--bt-groen); } .bt-regio.wit { fill: #fff; stroke: #c9d3ee; }
.bt-regio.vaag { opacity: .1; }
.bt-tegel { fill: var(--bt-paars); stroke: #fff; stroke-width: 5; opacity: .92; }
.bt-tegel.eenheid { fill: #a78bfa; }
.bt-tegel-nr.donker { fill: var(--bt-nacht); stroke: #fff; }
.bt-tegel-nr { fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: central; font-family: var(--mlp-letter); paint-order: stroke; stroke: #0005; stroke-width: 3px; }
.bt-label { font-family: var(--mlp-letter); font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: #fff; paint-order: stroke; stroke: #0006; stroke-width: 4px; }
.bt-label-vak { fill: #fff; stroke: #fff; }
.bt-label-vak.leeg { fill: #ffffff33; stroke: #fff; stroke-width: 3; }
.bt-label-tekst { font-family: var(--mlp-letter); font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: var(--bt-paars); }
.bt-label-tekst.leeg { fill: #fff; }
.bt-streep { stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.bt-cel { fill: #fff; stroke: #9fb0dd; stroke-width: 3; cursor: pointer; transition: fill .15s; }
.bt-cel.aan { fill: var(--bt-paars); stroke: #fff; }
.bt-cel:focus-visible { outline: none; stroke: var(--mlp-warm); stroke-width: 8; }
.bt-groep { fill: none; stroke: var(--bt-geel); stroke-width: 9; stroke-dasharray: 18 10; pointer-events: none; }
.bt-groep-nr { fill: var(--bt-nacht); font-weight: 700; font-family: var(--mlp-letter); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tutor-wijs { animation: bt-wijs 1s ease-in-out infinite; }
@keyframes bt-wijs { 50% { filter: drop-shadow(0 0 14px #ffd84d) brightness(1.15); } }
.bt-regio.tutor-wijs { stroke: #ffd84d; stroke-width: 10; }

/* ---------- paneel met vraag en invoer ---------- */
.bt-paneel { background: #fefcf3; color: var(--mlp-tekst); border-radius: 22px; padding: 16px 18px; box-shadow: 0 14px 36px #0008; width: 100%; max-width: 480px; }
.bt-vraag { font-size: 23px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.bt-breuk { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px auto 10px; }
.bt-invoer { display: flex; align-items: center; gap: 16px; justify-content: center; }
.bt-slot { width: 76px; height: 64px; border: 4px solid var(--mlp-rand); border-radius: 14px; background: #fff; font: inherit; font-size: 38px; font-weight: 700; color: var(--bt-paars); cursor: pointer; display: grid; place-items: center; padding: 0; }
.bt-slot.actief { border-color: var(--bt-paars); box-shadow: 0 0 0 5px #7c3aed33; }
.bt-slot.vul { animation: bt-vul .8s ease-out; border-color: var(--mlp-goed); }
@keyframes bt-vul { 0% { transform: scale(1.3); background: #ffd84d; } 100% { transform: none; } }
.bt-slot.tutor-wijs { border-color: #ffd84d; }
.bt-deelstreep { width: 92px; height: 6px; border-radius: 3px; background: var(--mlp-tekst); }
.bt-namen { display: flex; flex-direction: column; justify-content: space-between; height: 150px; font-size: 15px; color: var(--mlp-zacht); padding: 18px 0; }
.bt-toetsen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 8px 0; }
.bt-toets { min-height: 52px; border: 2px solid var(--mlp-rand); border-radius: 12px; background: #fff; font: inherit; font-size: 24px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 var(--mlp-rand); touch-action: manipulation; color: var(--mlp-tekst); }
.bt-toets:active { transform: translateY(2px); box-shadow: none; }
.bt-toets:focus-visible { outline: 4px solid var(--mlp-hoofd-licht); }
.bt-acties { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.bt-keuzes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0; }
.bt-keuzes .mlp-keuze { min-width: 80px; }
.bt .mlp-feedback { margin: 10px 0 2px; font-size: 18px; }
.bt .mlp-feedback p { margin: 0; }
.bt-pien { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 10px; }
.bt-pien img { width: 70px; flex: none; }
.bt-pien .ballon { background: #fff7d1; border: 2px solid var(--bt-geel); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 18px; }
.bt-pien .ballon b { color: var(--bt-paars); font-size: 22px; }
.bt-telbadge { display: inline-block; margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: var(--bt-geel); color: var(--bt-nacht); font-weight: 700; }
.bt-mini { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 700; color: var(--bt-paars); vertical-align: middle; margin: 0 4px; }
.bt-mini i { display: block; width: 100%; height: 3px; background: currentColor; margin: 2px 0; }

/* ---------- afronding ---------- */
.bt-eind { width: min(640px, 100%); background: #fefcf3; color: var(--mlp-tekst); border-radius: 22px; padding: 20px; box-shadow: 0 16px 40px #0008; }
.bt-eind img.figuur { width: 120px; float: right; }

.bt-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bt-app button, .bt-app [data-tel] { scroll-margin-bottom: calc(var(--bt-gids) + 34px); scroll-margin-top: 80px; }