/* Kraak de kluis: thema (versie 1.0.0). Vaste onderdelen komen uit gedeeld/stijl-v1.css. */
:root { --mlp-vak: var(--mlp-rekenen); --kk-nacht: #0f1a2e; --kk-goud: #f5b82e; --kk-paneel: rgba(255, 252, 243, .97); --gids-r: 66px; --gids-wolk: 330px; }
body.mlp.kk { background: var(--kk-nacht); min-height: 100dvh; overflow-x: hidden; }
#kk-bg { position: fixed; inset: -24px; z-index: 0; background: var(--kk-nacht) center / cover no-repeat; filter: blur(1.5px) brightness(.6) saturate(1.1); transition: background-image .6s; }
.kk .mlp-balk { z-index: 30; }
.kk-main { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 10px 14px 96px; }
.kk-laden { color: #fff; text-align: center; padding: 40px; }
.kk-kaart { background: var(--kk-paneel); border-radius: 22px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.kk-kaartje { background: #fff; border: 2px solid var(--mlp-rand); border-radius: 16px; padding: 12px 14px; }
.kk-kaartje p { margin: 0 0 8px; }
.kk-knoppen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.kk-teller { font-weight: 700; color: #9a6200; }
.mlp-melding { margin: 4px 0; }

/* ---------- startscherm ---------- */
.kk-start { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; padding: 22px 26px; margin-top: 8px; overflow: hidden; }
.kk-start h1 { margin: 6px 0 6px; font-size: clamp(34px, 6vw, 54px); color: var(--mlp-navy); }
.kk-start p { margin: 10px 0; }
.kk-stand { font-weight: 700; color: var(--mlp-hoofd); }
.kk-start .kk-knoppen { justify-content: flex-start; }
.kk-start-beeld { position: relative; min-height: 260px; }
.kk-start-kluis { position: absolute; right: 4%; top: 6%; width: 70%; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35)); }
.kk-start-held { position: absolute; left: 0; bottom: -22px; height: 82%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.kk-start-robot { position: absolute; right: 0; bottom: 0; height: 40%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }

/* ---------- strook: chiphouder ---------- */
.kk-strook { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
body:not([data-scherm="start"]) .mlp-balk .mlp-titel { flex: 0 1 auto; }
@media (max-width: 1050px) { body:not([data-scherm="start"]) .mlp-balk .mlp-titel { display: none; } }
.kk-houder { display: flex; gap: 5px; list-style: none; margin: 0; padding: 3px 6px; background: rgba(10, 16, 30, .72); border: 2px solid rgba(245, 184, 46, .55); border-radius: 16px; }
.kk-vak { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 2px dashed rgba(255, 255, 255, .28); color: #cbd5e1; font-weight: 700; }
.kk-vak svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.kk-vak.nu { border: 2px solid var(--kk-goud); color: var(--kk-goud); box-shadow: 0 0 0 3px rgba(245, 184, 46, .25); }
.kk-vak.gevonden { border: 0; background: none; }
.kk-vak.net .kk-chip { animation: kkLand .9s cubic-bezier(.3, 1.4, .5, 1); }
.kk-grote { margin-left: 6px; border-style: solid; }
.kk-grote.actief { color: var(--kk-goud); border-color: var(--kk-goud); animation: kkGloei 1.6s ease-in-out infinite alternate; }
.kk-klok { color: #fff; font-weight: 700; background: rgba(10, 16, 30, .72); padding: 6px 12px; border-radius: 12px; font-variant-numeric: tabular-nums; }
@keyframes kkLand { from { transform: translateY(80px) scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kkGloei { to { box-shadow: 0 0 14px 2px rgba(245, 184, 46, .7); } }

/* ---------- codechip ---------- */
.kk-chip { --s: 92px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 18%;
  background: linear-gradient(135deg, #1f8a70, #0b5d4f); border: 3px solid #f5b82e; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .15), 0 6px 16px rgba(0, 0, 0, .35); }
.kk-chip::before { content: ''; position: absolute; inset: 14%; border-radius: 12%; border: 2px solid rgba(245, 184, 46, .55);
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(245, 184, 46, .25) 7px 9px); }
.kk-chip-n { position: relative; font-size: calc(var(--s) * .52); font-weight: 700; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); line-height: 1; }
.kk-chip.klein { --s: 40px; border-width: 2px; }
.kk-chip.klein::before { inset: 10%; }

/* ---------- puzzelpaneel ---------- */
.kk-paneel { position: relative; background: var(--kk-paneel); border-radius: 22px; padding: 12px 16px 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); margin-top: 8px; }
.kk-kop { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.kk-kop h2 { margin: 0; font-size: 24px; color: var(--mlp-navy); }
.kk-nr { font-size: 14px; font-weight: 700; color: #fff; background: var(--mlp-hoofd); border-radius: 999px; padding: 2px 10px; }
.kk-terug { display: flex; gap: 10px; align-items: center; min-height: 0; border-radius: 14px; margin-top: 8px; }
.kk-terug:empty { display: none; }
.kk-terug.goed { background: var(--mlp-goed-zacht); border: 2px solid var(--mlp-goed); padding: 8px 12px; }
.kk-terug.half { background: var(--mlp-half-zacht); border: 2px solid var(--mlp-half); padding: 8px 12px; }
.kk-terug.fout { background: #fff; border: 2px solid var(--mlp-fout); padding: 8px 12px; }
.kk-teken { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--mlp-half); }
.kk-terug.goed .kk-teken { background: var(--mlp-goed); }
.kk-terug.fout .kk-teken { background: var(--mlp-fout); }
.kk-legenda { list-style: none; padding: 0; margin: 6px 0; font-size: 16px; }
.kk-legenda li { display: flex; align-items: center; gap: 8px; margin: 3px 0; }

/* ---------- 1. kleurenpaneel ---------- */
.kk-mm { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.3fr); gap: 14px; }
.kk-mm-paneel { background: linear-gradient(#3b4252, #262b36); border-radius: 18px; padding: 10px 12px; border: 3px solid #868e96; color: #fff; }
.kk-mm-lijst { list-style: none; margin: 0 0 8px; padding: 0; max-height: 168px; overflow-y: auto; }
.kk-mm-lijst li { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.kk-mm-geen { color: #adb5bd; font-size: 15px; }
.kk-mm-nr { width: 22px; font-size: 14px; color: #adb5bd; text-align: right; }
.kk-pin { --k: #555; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--k) 55%, #fff), var(--k) 60%, color-mix(in srgb, var(--k) 70%, #000)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.kk-pin.klein { width: 28px; height: 28px; }
.kk-pin.leeg { background: rgba(255, 255, 255, .1); border: 2px dashed rgba(255, 255, 255, .45); box-shadow: none; }
.kk-pin .kk-vorm { width: 58%; height: 58%; }
.kk-mm-nu { display: flex; gap: 10px; justify-content: center; margin: 4px 0 10px; }
.kk-mm-vak { position: relative; width: 60px; height: 60px; border-radius: 14px; border: 3px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); display: grid; place-items: center; cursor: pointer; padding: 0; }
.kk-mm-vak.gekozen { border-color: var(--kk-goud); box-shadow: 0 0 0 3px rgba(245, 184, 46, .35); }
.kk-mm-vak.vast { border-color: #69db7c; cursor: default; }
.kk-mm-vak .kk-pin { width: 44px; height: 44px; }
.kk-slotje { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #2f9e44; display: grid; place-items: center; }
.kk-slotje svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.5; }
.kk-zeker { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2f9e44; color: #fff; border-radius: 6px; padding: 0 5px; }
.kk-mm-kleuren { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.kk-mm-kleur { display: grid; justify-items: center; gap: 2px; padding: 5px 2px 3px; min-height: 64px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; font-size: 13px; }
.kk-mm-kleur:active { transform: translateY(2px); }
.kk-mm-paneel .mlp-knop:not(.mlp-hoofdknop) { background: #495057; color: #fff; border-color: #343a40; box-shadow: 0 3px 0 #212529; }

/* ---------- 2. verdachtenbord ---------- */
.kk-vb { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(420px, 1.3fr); gap: 14px; }
.kk-vb-vraag { font-size: 19px; }
.kk-vb-links .mlp-melding { font-size: 14px; }
.kk-vb-aanw { margin: 0; padding-left: 26px; }
.kk-vb-aanw li { margin: 2px 0; }
.kk-vb-a { text-align: left; width: 100%; min-height: 34px; padding: 3px 8px; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; font-size: 16px; line-height: 1.25; }
.kk-vb-a.af { color: var(--mlp-zacht); text-decoration: line-through; }
.kk-vb-a.licht { background: #fff3bf; border-color: #fab005; }
.kk-vb-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.kk-vb-tool { min-height: 44px; padding: 4px 12px; border-radius: 12px; border: 2px solid var(--mlp-rand); background: #fff; cursor: pointer; font-size: 16px; box-shadow: 0 3px 0 var(--mlp-rand); }
.kk-vb-tool.aan { border-color: var(--mlp-hoofd); background: var(--mlp-vlak); box-shadow: 0 3px 0 var(--mlp-hoofd); }
.m-x { color: var(--mlp-fout); font-weight: 700; } .m-v { color: var(--mlp-goed); font-weight: 700; } .m-q { color: var(--mlp-half); font-weight: 700; } .m-gum { color: var(--mlp-zacht); }
.kk-vb-raster { display: grid; gap: 0; background: #fff; border-radius: 12px; padding: 4px; border: 2px solid var(--mlp-rand); overflow-x: auto; }
.kk-vb-rij { display: grid; grid-template-columns: 64px repeat(8, minmax(44px, 1fr)); }
.kk-vb-kol { display: grid; justify-items: center; align-content: end; gap: 0; padding: 2px 0 4px; font-size: 11px; line-height: 1.1; color: var(--mlp-zacht); text-align: center; overflow-wrap: anywhere; }
.kk-vb-kol small { font-size: 11px; max-width: 100%; }
.kk-ic { width: 24px; height: 24px; stroke: var(--mlp-navy); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kk-vb-naam { display: flex; align-items: center; font-weight: 700; font-size: 17px; padding-left: 4px; }
.kk-vb-cel { min-height: 44px; border: 1px solid #dee2e6; background: #fff; cursor: pointer; font-size: 22px; padding: 0; display: grid; place-items: center; }
.kk-vb-cel:focus-visible { outline: 3px solid var(--mlp-hoofd-licht); outline-offset: -3px; }
.kk-vb-cel.scheid, .kk-vb-kol.scheid { border-left: 3px solid var(--mlp-navy); }
.kk-vb-antwoord { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.kk-vb-antwoord > span { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-right: 4px; }
.kk-vb-p.goed { border-color: var(--mlp-goed); background: var(--mlp-goed-zacht); }
.kk-vb-p.fout { border-color: var(--mlp-fout); }

/* ---------- 3. cijfermachine ---------- */
.kk-cm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kk-cm-verg { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.kk-cm-verg li { display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 700; background: #f1f3f5; border-radius: 12px; padding: 4px 12px; }
.kk-sym { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2)); }
.kk-sym.groot { width: 46px; height: 46px; }
.kk-cm-som { min-width: 40px; }
.kk-cm-kladrij { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-cm-kladvak { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.kk-cm-kladvak .kk-sym { width: 30px; height: 30px; }
.kk-cm-kladvak input { width: 52px; height: 44px; font: inherit; font-size: 22px; text-align: center; border: 2px dashed #adb5bd; border-radius: 10px; background: #fffbe6; }
.kk-cm-kladvak input.vast { border: 2px solid var(--mlp-goed); background: var(--mlp-goed-zacht); }
.kk-cm-slot { background: linear-gradient(#495057, #2b3036); color: #fff; border-color: #868e96; }
.kk-cm-slot.aan { box-shadow: 0 0 0 4px #69db7c, 0 0 30px rgba(105, 219, 124, .6); }
.kk-cm-code { display: flex; gap: 10px; justify-content: center; margin: 4px 0 8px; }
.kk-cm-cijfer { display: grid; justify-items: center; gap: 6px; }
.kk-cijfer { display: grid; place-items: center; width: 50px; height: 58px; border-radius: 10px; background: #111; color: #69db7c; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; border: 2px solid #868e96; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6); }
.kk-cijfer.groot { width: 70px; height: 80px; font-size: 48px; }
.kk-toetsen { display: grid; grid-template-columns: repeat(4, 56px); gap: 6px; justify-content: center; }
.kk .kk-toets { min-height: 48px; border-radius: 12px; border: 2px solid #adb5bd; background: linear-gradient(#f8f9fa, #dee2e6); font-size: 22px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 #868e96; color: var(--mlp-navy); }
.kk .kk-toets.klein { font-size: 16px; }
.kk-toets:active { transform: translateY(2px); box-shadow: 0 1px 0 #868e96; }

/* ---------- 4. laserkluis ---------- */
.kk-lz { display: grid; grid-template-columns: minmax(220px, .8fr) auto; gap: 14px; align-items: start; }
.kk-lz-veld { justify-self: center; }
.kk-lz-raster { --c: 56px; position: relative; display: grid; grid-template-columns: repeat(var(--w), var(--c)); grid-auto-rows: var(--c); background: #10151f; border: 4px solid #495057; border-radius: 12px;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: var(--c) var(--c); margin-left: 20px; }
.kk-lz-svg { position: absolute; left: -20px; top: 0; width: calc(100% + 20px); height: 100%; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 6px #ff3b3b); }
.kk-lz-cel { position: relative; display: grid; place-items: center; }
.kk-lz-cel.vak { margin: 5px; border: 2px dashed #74c0fc; border-radius: 8px; background: rgba(116, 192, 252, .1); cursor: pointer; padding: 0; }
.kk-lz-cel.vak.licht { background: rgba(252, 196, 25, .35); border: 3px solid #fcc419; animation: kkPuls 1s ease-in-out infinite alternate; }
.kk-lz-cel.vak.vast { border-style: solid; border-color: #69db7c; }
.kk-lz-cel.muur { background: repeating-linear-gradient(45deg, #868e96 0 8px, #495057 8px 16px); border-radius: 4px; margin: 3px; }
.kk-sensor { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(#ff8787, #c92a2a); box-shadow: 0 0 12px #ff6b6b; }
.kk-lz-cel.alarm .kk-sensor { animation: kkAlarm .25s 6 alternate; }
.kk-ontvanger { width: 34px; height: 34px; border-radius: 8px; background: radial-gradient(#b2f2bb, #2f9e44); border: 3px solid #d3f9d8; }
.kk-lz-cel.raak .kk-ontvanger { box-shadow: 0 0 24px 8px #69db7c; }
.kk-spiegel { position: absolute; left: 50%; top: 50%; width: 52px; height: 7px; border-radius: 4px; background: linear-gradient(#e7f5ff, #a5d8ff); box-shadow: 0 0 6px #a5d8ff; }
.kk-spiegel.rechts { transform: translate(-50%, -50%) rotate(-45deg); }
.kk-spiegel.links { transform: translate(-50%, -50%) rotate(45deg); }
.kk-lz-l { display: inline-block; width: 22px; height: 22px; border-radius: 6px; }
.kk-lz-l.vak { border: 2px dashed #1c7ed6; }
.kk-lz-l.sensor { border-radius: 50%; background: radial-gradient(#ff8787, #c92a2a); }
.kk-lz-l.muur { background: repeating-linear-gradient(45deg, #868e96 0 4px, #495057 4px 8px); }
.kk-lz-l.doel { background: radial-gradient(#b2f2bb, #2f9e44); }
@keyframes kkPuls { to { box-shadow: 0 0 16px #fcc419; } }
@keyframes kkAlarm { to { transform: scale(1.35); box-shadow: 0 0 22px 6px #ff6b6b; } }

/* ---------- 5. geheim bericht ---------- */
.kk-gb { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; }
.kk-briefje { background: #fdf6e3; background-image: repeating-linear-gradient(transparent 0 33px, #d0e3f0 33px 34px); padding: 14px 22px 18px; border-radius: 4px; transform: rotate(-1.2deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35); font-size: 21px; line-height: 34px; clip-path: polygon(0 2%, 4% 0, 30% 1.5%, 60% 0, 100% 1%, 99% 40%, 100% 98%, 70% 100%, 35% 98.5%, 0 100%, 1% 60%); }
.kk-briefje p { margin: 0; }
.kk-briefje-kop { font-size: 14px; color: var(--mlp-zacht); }
.kk-briefje mark { background: #ffe066; border-radius: 4px; padding: 0 2px; font-weight: 700; }
.kk-kastje { position: relative; width: 100%; max-width: 320px; margin: 0 auto; height: 176px; perspective: 900px; }
.kk-kastje-binnen { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(#5c3d22, #3b2614); display: grid; place-items: center; box-shadow: inset 0 6px 18px rgba(0, 0, 0, .6); }
.kk-kastje-binnen .kk-chip { cursor: pointer; }
.kk-kastje-deur { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(135deg, #a9714b, #7a4a2a); border: 4px solid #5c3d22; display: grid; place-items: center; transform-origin: left center; transition: transform 1s cubic-bezier(.4, 1.3, .6, 1); }
.kk-kastje.open .kk-kastje-deur { transform: rotateY(-108deg); }
.kk-kastje.open .kk-letterslot { visibility: hidden; }
.kk-letterslot { display: flex; gap: 8px; padding: 8px 10px; background: linear-gradient(#c9a227, #8a6d12); border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 0 #5c4a0b; }
.kk-wiel { display: grid; gap: 2px; border-radius: 10px; padding: 2px; }
.kk-wiel.gekozen { background: rgba(255, 255, 255, .5); }
.kk-wiel-k { width: 52px; height: 44px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .25); color: #fff; cursor: pointer; font-size: 18px; }
.kk-wiel-l { width: 52px; height: 52px; border: 2px solid #5c4a0b; border-radius: 8px; background: linear-gradient(#fff, #e9ecef 45%, #fff); font-size: 30px; font-weight: 700; color: var(--mlp-navy); cursor: pointer; padding: 0; }

/* ---------- 6. kaartenkamer ---------- */
.kk-kk { display: grid; grid-template-columns: minmax(230px, .8fr) auto; gap: 14px; align-items: start; }
.kk-kk-route ol { margin: 0 0 8px; padding-left: 24px; }
.kk-kk-plek { font-size: 20px; }
.kk-kk-kaart { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.kk-kk-raster { --c: 50px; position: relative; display: grid; grid-template-columns: repeat(7, var(--c)); grid-auto-rows: var(--c);
  background: #f4e4bc; border: 4px solid #8d6e3f; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.kk-kk-rijnr, .kk-kk-kolnr { display: grid; place-items: center; font-weight: 700; color: #6b4f24; font-size: 18px; }
.kk-kk-cel { position: relative; border: 1px solid rgba(107, 79, 36, .35); display: grid; place-items: center; }
.kk-kk-cel small { position: absolute; top: 1px; left: 3px; font-size: 11px; color: #6b4f24; }
.kk-kk-cel.start { background: rgba(28, 126, 214, .15); }
.kk-kk-cel.boom::after { content: ''; width: 22px; height: 22px; border-radius: 50%; background: #74b816; box-shadow: 9px 6px 0 -3px #5c940d; opacity: .7; }
.kk-kk-cel.berg::after { content: ''; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 24px solid #a1887f; opacity: .7; }
.kk-kk-cel.water { background: rgba(116, 192, 252, .45); }
.kk-kk-cel.huis::after { content: ''; width: 20px; height: 16px; background: #e8590c; opacity: .6; border-radius: 2px; }
.kk-kk-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kk-kk-pad { fill: none; stroke: #1c7ed6; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; }
.kk-kk-hulplijn { fill: none; stroke: #e8590c; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.kk-kk-pion { fill: #e03131; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }
.kk-roos { display: grid; grid-template-columns: repeat(3, 56px); grid-auto-rows: 56px; gap: 6px; padding: 8px; border-radius: 50%; background: radial-gradient(#fff8e1, #f4e4bc 70%); border: 4px solid #8d6e3f; }
.kk-roos-k { border-radius: 14px; border: 2px solid #8d6e3f; background: #fff; cursor: pointer; display: grid; place-items: center; line-height: 1; padding: 0; box-shadow: 0 3px 0 #8d6e3f; }
.kk-roos-k span { font-size: 24px; font-weight: 700; }
.kk-roos-k small { font-size: 12px; font-weight: 700; color: #6b4f24; }
.kk-roos-k:active { transform: translateY(2px); box-shadow: 0 1px 0 #8d6e3f; }
.kk-roos-midden { display: grid; place-items: center; font-weight: 700; color: #c92a2a; font-size: 14px; line-height: 1; text-align: center; }
.kk-roos-midden svg { width: 26px; height: 26px; }
.kk-kk-bediening { display: grid; justify-items: center; gap: 4px; }
.kk-kk-knoppen { max-width: 240px; }

/* ---------- 7. laatste dossier ---------- */
.kk-ds { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; align-items: start; }
.kk-ds-bureau { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #8d5a33, #5c3a1f); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .15); }
.kk-ds-obj { display: grid; justify-items: center; gap: 2px; padding: 8px; border: 2px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; min-height: 120px; }
.kk-ds-obj.gezien { border-color: rgba(255, 255, 255, .45); }
.kk-ds-obj small { font-size: 12px; opacity: .85; }
.kk-ds-mini { display: block; height: 96px; overflow: hidden; pointer-events: none; transform: scale(.5); transform-origin: top center; margin-bottom: -2px; width: 100%; }
.kk-ds-mini > * { margin: 0 auto; }
.kk-ds-som { font-size: 26px; font-weight: 700; text-align: center; background: #fff3bf; border-radius: 10px; }
.kk-ds-draai { display: grid; place-items: center; margin: 4px 0 8px; }
.kk-kal { width: 250px; background: #fff; border-radius: 10px; overflow: hidden; color: var(--mlp-navy); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.kk-kal-kop { background: #c92a2a; color: #fff; text-align: center; font-weight: 700; font-size: 22px; letter-spacing: .1em; text-transform: uppercase; }
.kk-kal-dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 6px; font-size: 15px; text-align: center; }
.kk-kal-dagen b { font-size: 12px; color: var(--mlp-zacht); }
.kk-kal-dagen .rond { border: 3px solid #e03131; border-radius: 50%; font-weight: 700; }
.kk-foto { width: 210px; background: #fff; padding: 10px 10px 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); transform: rotate(2deg); color: var(--mlp-navy); text-align: center; }
.kk-foto p { margin: 2px 0; font-size: 14px; }
.kk-kast { position: relative; height: 150px; background: linear-gradient(90deg, #adb5bd, #868e96); border: 3px solid #495057; border-radius: 4px; display: grid; place-items: center; }
.kk-kast-nr { font-size: 84px; font-weight: 700; color: #fff; text-shadow: 0 3px 0 #343a40; line-height: 1; }
.kk-kast i { position: absolute; right: 12px; width: 8px; height: 24px; border-radius: 4px; background: #343a40; top: 40%; }
.kk-kast i + i { top: auto; bottom: 10px; right: auto; left: 12px; width: 30px; height: 6px; background: #495057; }
.kk-bon { width: 230px; background: #fff; padding: 12px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; color: #222; box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 93% 100%, 86% 96%, 79% 100%, 72% 96%, 65% 100%, 58% 96%, 51% 100%, 44% 96%, 37% 100%, 30% 96%, 23% 100%, 16% 96%, 9% 100%, 0 96%); }
.kk-bon p { display: flex; justify-content: space-between; margin: 2px 0; }
.kk-bon-kop { justify-content: center !important; font-weight: 700; }
.kk-bon-wg { font-weight: 700; }
.kk-bon hr { border: 0; border-top: 2px dashed #999; }
.kk-brief { width: 250px; background: #fff9db; padding: 12px 14px; color: var(--mlp-navy); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); transform: rotate(-2deg); font-size: 17px; }
.kk-brief p { margin: 2px 0; }
.kk-modal { position: fixed; inset: 0; z-index: 60; background: rgba(5, 10, 20, .72); display: grid; place-items: center; padding: 16px; }
.kk-modal-kaart { background: var(--kk-paneel); border-radius: 20px; padding: 14px 18px; max-width: 420px; width: 100%; max-height: 100%; overflow: auto; text-align: center; }
.kk-modal-kaart h3 { margin: 0 0 8px; }
.kk-modal-inhoud { display: grid; place-items: center; }
.kk-modal-inhoud .kk-kal, .kk-modal-inhoud .kk-bon, .kk-modal-inhoud .kk-brief, .kk-modal-inhoud .kk-foto { width: min(320px, 100%); font-size: 19px; }
.kk-modal-inhoud .kk-brief { font-size: 21px; }

/* ---------- finale ---------- */
.kk-fin { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.kk-fin-kluis { position: relative; width: min(330px, 42vw, calc(100dvh - 170px)); aspect-ratio: 1; overflow: hidden; border-radius: 26px; }
.kk-kluis-svg { width: 100%; height: 100%; display: block; }
.kk-deur { transform-box: fill-box; transform-origin: 0% 50%; transition: transform 1.6s cubic-bezier(.5, 0, .3, 1), opacity 1.6s; }
.kk-wiel { transform-box: fill-box; transform-origin: center; transition: transform 1.3s ease-in-out; }
.kk-grendel { fill: #ced4da; stroke: #495057; stroke-width: 2; transition: transform .6s ease-in; }
.kk-lamp { fill: #343a40; stroke: #868e96; stroke-width: 2; transition: fill .2s; }
.kk-lamp.aan { fill: #69db7c; filter: drop-shadow(0 0 5px #69db7c); }
.kk-fin-kluis.grendels-open .kk-grendel.l { transform: translateX(-40px); }
.kk-fin-kluis.grendels-open .kk-grendel.r { transform: translateX(40px); }
.kk-fin-kluis.wiel-draait .kk-wiel { transform: rotate(540deg); }
.kk-fin-kluis.deur-open .kk-deur { transform: scaleX(.12) skewY(-8deg); opacity: .9; }
.kk-glans { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 236, 153, .85), transparent 60%); transition: opacity 1.2s .6s; }
.kk-fin-kluis.deur-open .kk-glans { opacity: 1; }
.kk-ster { position: absolute; bottom: 30%; color: #ffd43b; text-shadow: 0 0 8px #fff3bf; animation: kkSter 2.4s ease-out forwards; opacity: 0; }
@keyframes kkSter { 0% { opacity: 0; transform: translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-190px) rotate(200deg) scale(1.1); } }
.kk-fin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kk-fin-chip { display: grid; justify-items: center; padding: 4px; border-radius: 12px; border: 2px solid var(--mlp-rand); background: #fff; cursor: pointer; min-width: 52px; min-height: 52px; box-shadow: 0 3px 0 var(--mlp-rand); }
.kk-fin-chip small { font-size: 11px; color: var(--mlp-zacht); }
.kk-fin-chip .kk-chip.klein { --s: 38px; }
.kk-fin-display { display: flex; gap: 5px; justify-content: center; margin-bottom: 8px; }
.kk-fin-display .kk-cijfer { width: 40px; height: 50px; font-size: 28px; }
.kk-fin-goed { font-size: 24px; font-weight: 700; color: var(--mlp-goed); text-align: center; }

/* ---------- vondst, hulp, gids, melding ---------- */
.kk-vondst { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(5, 10, 20, .7); padding: 16px; }
.kk-vondst-kaart { background: var(--kk-paneel); border-radius: 22px; padding: 18px 26px; text-align: center; max-width: 380px; box-shadow: 0 0 60px rgba(245, 184, 46, .45); }
.kk-vondst-kaart p { margin: 8px 0; }
.kk-vondst-kop { font-size: 26px; font-weight: 700; color: var(--mlp-navy); }
.kk-vondst .kk-chip { --s: 110px; animation: kkChip 1s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kkChip { from { transform: scale(.2) rotate(-200deg); opacity: 0; } to { transform: none; opacity: 1; } }
.kk-hulp { position: fixed; z-index: 40; right: 14px; top: 72px; width: min(540px, calc(100vw - 28px)); }
@keyframes kkKnipper { to { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(248, 161, 63, .45); } }
.kk-gids { display: none; }
.kk-kop { min-height: 56px; align-items: center; }
.kk-kop .gids { margin-left: auto; flex: 0 1 auto; max-width: 64%; --gids-r: 50px; gap: 12px; }
.kk-kop .gids-wolk { font-size: 16px; line-height: 1.25; padding: 5px 12px 6px; max-width: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); border: 2px solid #e9ecef; }
.kk-kop .gids-wolk::before { border-left: 2px solid #e9ecef; border-bottom: 2px solid #e9ecef; }
.kk-kop .gids-naam { display: none; }
.kk-melding { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; background: var(--mlp-navy); color: #fff; padding: 10px 18px; border-radius: 14px; font-weight: 700; max-width: calc(100vw - 32px); }

/* ---------- resultaat ---------- */
.kk-resultaat { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; padding: 16px 20px; }
.kk-res-beeld { width: 100%; border-radius: 16px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.kk-resultaat .kk-knoppen { justify-content: center; }

/* ---------- lage schermen (ingebed venster van 490 px hoog) ---------- */
@media (max-height: 640px) {
  .kk .mlp-balk { padding: 4px 10px; }
  .kk-main { padding-top: 4px; padding-bottom: 80px; }
  .kk-paneel { padding: 8px 12px 10px; margin-top: 4px; }
  .kk-kop { margin-bottom: 4px; }
  .kk-kop h2 { font-size: 20px; }
  .kk-kaartje { padding: 8px 10px; }
  .kk-kaartje p { margin-bottom: 4px; }
  .kk-legenda { font-size: 15px; }
  .kk-mm-lijst { max-height: 92px; }
  .kk-mm-kleur { min-height: 50px; padding: 3px 2px 2px; }
  .kk-mm-kleur .kk-pin { width: 32px; height: 32px; }
  .kk-mm-vak { width: 52px; height: 52px; }
  .kk-mm-nu { margin: 2px 0 6px; }
  .kk-sym.groot { width: 34px; height: 34px; }
  .kk-cijfer.groot { width: 60px; height: 64px; font-size: 40px; }
  .kk-ds-obj { min-height: 108px; }
  .kk-knoppen { margin-top: 6px; }
  .mlp-hoofdknop, .mlp .mlp-hoofdknop { min-height: 50px; padding: 8px 22px; font-size: 19px; }
  .kk-lz-raster { --c: 48px; }
  .kk-kk-raster { --c: 42px; }
  .kk-roos { grid-template-columns: repeat(3, 48px); grid-auto-rows: 48px; }
  .kk-cijfer { height: 50px; }
  .kk-toets { min-height: 44px; }
  .kk-cm-verg li { font-size: 22px; padding: 2px 10px; }
  .kk-sym { width: 32px; height: 32px; }
  .kk-briefje { font-size: 19px; line-height: 30px; background-image: repeating-linear-gradient(transparent 0 29px, #d0e3f0 29px 30px); }
  .kk-kastje { height: 150px; }
  .kk-start-beeld { min-height: 200px; }
  :root { --gids-r: 54px; }
}

/* ---------- smalle schermen ---------- */
@media (max-width: 900px) {
  .kk-mm, .kk-vb, .kk-cm, .kk-lz, .kk-gb, .kk-kk, .kk-ds, .kk-fin, .kk-resultaat, .kk-start { grid-template-columns: 1fr; }
  .kk-fin-kluis { width: min(300px, 80vw); margin: 0 auto; }
  .kk-start-beeld { min-height: 220px; max-width: 420px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
  .kk-main { padding: 6px 10px 90px; }
  .kk-houder { gap: 3px; padding: 3px 4px; }
  .kk-vak { width: 36px; height: 36px; }
  .kk-chip.klein { --s: 32px; }
  .kk .mlp-balk { flex-wrap: wrap; row-gap: 4px; }
  .kk-strook { order: 9; flex-basis: 100%; flex-wrap: wrap; gap: 6px; row-gap: 4px; }
  .kk-strook .esc-klok, .kk-strook .esc-straf { font-size: 15px; padding: 4px 8px; }
  body:not([data-scherm="start"]) .mlp-balk .mlp-titel { display: block; flex: 1; }
  .kk-klok { padding: 4px 8px; font-size: 15px; }
  .kk-lz-raster { --c: calc((100vw - 74px) / 7); }
  .kk-kk-raster { --c: calc((100vw - 64px) / 7); }
  .kk-vb-rij { grid-template-columns: 56px repeat(8, 44px); }
  .kk-mm-kleuren { grid-template-columns: repeat(3, 1fr); }
  .kk-mm-vak { width: 56px; height: 56px; }
  .kk-start { padding: 16px; }
  :root { --gids-r: 50px; --gids-wolk: 230px; }
  .kk-hulp { top: auto; bottom: 10px; }
}
.zonder-beweging #kk-bg { transition: none; }

/* ---------- versie 1.1: escape-flow (gedeelde hulp en klok uit gedeeld/escape-v1.*) ---------- */
.kk-strook .esc-klok, .kk-strook .esc-straf { font-size: 16px; }
.kk-hulpbalk { display: flex; flex-wrap: nowrap; gap: 6px; flex: none; }
.kk-hulpbalk .mlp-knop { padding: 6px 12px; min-height: 44px; font-size: 16px; }
.kk-kop .gids { max-width: 52%; }
.kk-intro { max-width: 760px; margin-left: auto; margin-right: auto; }
.kk-intro .esc-intro-kop { min-height: 56px; }
.kk-intro .esc-intro-kop .gids { margin-left: auto; flex: 0 1 auto; max-width: 60%; --gids-r: 50px; }
.kk-intro .esc-intro-kop .gids-naam { display: none; }

/* kleurenpaneel: ✓ ↔ ✕ (kleur + symbool + aantal) */
.kk-mmf { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; border-radius: 9px; padding: 1px 7px 1px 2px; font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kk-mmf-s { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 14px; }
.kk-mmf.goed { background: #d3f9d8; color: #1b5e20; } .kk-mmf.goed .kk-mmf-s { background: #2f9e44; }
.kk-mmf.plek { background: #ffe8cc; color: #7a3b00; } .kk-mmf.plek .kk-mmf-s { background: #f08c00; }
.kk-mmf.niet { background: #e9ecef; color: #343a40; } .kk-mmf.niet .kk-mmf-s { background: #868e96; }
.kk-mmf-rij { display: inline-flex; gap: 4px; margin-left: auto; }
.kk-mm-legenda { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; font-size: 16px; }
.kk-mm-legenda li { display: flex; align-items: center; gap: 8px; }
.kk-mm-legenda .kk-mmf { padding: 1px; }
.kk-mm-res { margin-top: 6px; }
.kk-mm-res:empty { display: none; }
.kk-mmr-kop { margin: 0 0 4px; font-weight: 700; color: var(--mlp-navy); }
.kk-mmr-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.kk-mmr-lijst .kk-mmf { display: flex; padding: 3px 10px 3px 3px; font-weight: 400; font-size: 16px; }
.kk-mmr-lijst .kk-mmf b { font-size: 19px; margin: 0 2px; }
.kk-mm-lijst li.laatste { background: rgba(245, 184, 46, .14); border-radius: 8px; }
.kk-mm-lijst .kk-mmf { font-size: 15px; }
.kk-mm-pins { display: inline-flex; gap: 4px; }
.kk-mm-vaknr { position: absolute; top: 1px; left: 5px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.kk-mm-op { text-align: center; padding: 6px 4px; }
.kk-mm-op p { margin: 4px 0; }
.kk-oefen { background: #f8f9fa; border: 2px dashed #adb5bd; border-radius: 16px; padding: 8px 12px; margin: 6px 0; }
.kk-oefen-kop { margin: 0 0 6px; font-weight: 700; }
.kk-oefen-rij { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.kk-oefen-label { width: 120px; font-size: 15px; color: #495057; }
.kk-oefen-vak { display: inline-grid; justify-items: center; gap: 2px; min-width: 34px; }
.kk-oefen-merk { padding: 1px; }
.kk-oefen-merk[hidden] { display: inline-flex; visibility: hidden; }
.kk-oefen .esc-knoppen { justify-content: flex-start; margin-top: 4px; }

/* resultaat */
.kk-res-lijst { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 3px; }
.kk-res-kluis { color: #2b8a3e; font-weight: 700; }
@media (max-height: 640px) {
  .kk-mmr-lijst .kk-mmf { padding: 1px 8px 1px 2px; font-size: 15px; }
  .kk-mm-legenda { font-size: 15px; gap: 2px; }
  .esc-opdracht { font-size: 18px; margin: 2px 0 6px; }
}
@media (max-width: 560px) {
  .kk-kop { flex-wrap: wrap; }
  .kk-hulpbalk { order: 5; width: 100%; }
  .kk-hulpbalk .mlp-knop { flex: 1; justify-content: center; }
  .kk-oefen-label { width: 92px; }
}
.kk-hulp .esc-kaart { grid-template-columns: 64px 1fr; }
.kk-hulp .esc-robot { width: 64px; }
.kk-resultaat .esc-tijden { margin: 8px auto; }
.kk-res-lijst { width: fit-content; margin: 6px auto; text-align: left; }
/* verdachtenbord: soort aanwijzing (versie 1.2) */
.kk-vb-a { display: flex; align-items: flex-start; gap: 8px; }
.kk-vb-soort { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px; }
.kk-vb-soort svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kk-vb-soort.persoon-plek { background: #e7f5ff; color: #1864ab; }
.kk-vb-soort.persoon-voorwerp { background: #fff4e6; color: #a5490a; }
.kk-vb-soort.voorwerp-plek { background: #f3f0ff; color: #5f3dc4; }
.kk-vb-a.af .kk-vb-soort { opacity: .5; }

/* versie 1.3: teamnaam, kaartroute, finale-uitleg */
.kk-team { display: grid; gap: 6px; margin: 10px 0; }
.kk-team input { font: inherit; font-size: 20px; padding: 8px 12px; border: 3px solid #ced4da; border-radius: 12px; min-height: 44px; max-width: 360px; }
.kk-team input:focus { outline: none; border-color: #f5b82e; }
.kk-team-keus { display: flex; flex-wrap: wrap; gap: 6px; }
.kk-team-k { font: inherit; font-size: 15px; padding: 4px 10px; border-radius: 999px; border: 2px solid #f3d29b; background: #fff7e6; cursor: pointer; min-height: 36px; }
.kk-team-k:hover, .kk-team-k:focus-visible { border-color: #f5b82e; background: #fff0c2; }
.kk-res-team { font-size: 20px; margin: 0 0 4px; }
.kk-kk-cel { cursor: pointer; }
.kk-kk-cel:hover { background: rgba(245, 184, 46, .25); }
.kk-kk-cel.doel { background: rgba(64, 192, 87, .45); box-shadow: inset 0 0 0 3px #2b8a3e; }
.kk-kk-stapnr { fill: #e8590c; stroke: #fff; stroke-width: 2; }
.kk-kk-stapnr-t { fill: #fff; font: 700 12px sans-serif; text-anchor: middle; }
.kk-fin-uitleg { background: #fff7e6; border-radius: 12px; padding: 6px 12px; margin-bottom: 8px; }
.kk-fin-uitleg p { margin: 0 0 2px; }
.kk-fin-uitleg ol { margin: 0; padding-left: 22px; line-height: 1.35; }
.kk-fin-chip small { display: block; font-weight: 700; font-size: 13px; color: #6b4f24; }
.kk-fin-chip.gebruikt { opacity: .45; }