:root{
  --green:#1F6F54; --oker:#E8A33D; --koraal:#E06D5F;
  --navy:#1A2B4A; --cream:#FCF8F0; --gsoft:#EAF2EE; --line:#D8E2DC; --grey:#6a7680;
  --disp:'Fredoka','Baloo 2','Nunito','Segoe UI',system-ui,sans-serif;
  --body:'Nunito',system-ui,'Segoe UI',sans-serif;
}
html[data-theme="dark"]{
  --navy:#E8EEF5; --cream:#141A24; --gsoft:#1E2734; --line:#2C3a4d; --grey:#9aa6b2;
}
html[data-theme="dark"] .card,html[data-theme="dark"] .printArea,html[data-theme="dark"] .routestats,html[data-theme="dark"] input[type=text],html[data-theme="dark"] select{background:#1B2330;}
html[data-theme="dark"] .chip{background:#26303f;}
html[data-theme="dark"] #map{background:#222c3a;}
/* overlays (spelen, zelf bouwen, plekken kiezen) volgen de donkere modus mee */
html[data-theme="dark"] .play .pinner,html[data-theme="dark"] .pclue,html[data-theme="dark"] .pdir,html[data-theme="dark"] .pleader,html[data-theme="dark"] .bstop,html[data-theme="dark"] .prow{background:#1B2330;color:var(--cream);}
html[data-theme="dark"] .play .ph1,html[data-theme="dark"] .prow b,html[data-theme="dark"] .bstop b{color:var(--cream);}
html[data-theme="dark"] .popt i,html[data-theme="dark"] .gpsnote,html[data-theme="dark"] .plnear{color:#9aa8b6;}
html[data-theme="dark"] .ppaused{background:#26303f;color:#8fd8bd;}
html[data-theme="dark"] .myhunts .mh-row,html[data-theme="dark"] .democards button{background:#1B2330;color:var(--cream);border-color:#2c3644;}
html[data-theme="dark"] .busysteps span{background:#26303f;}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--body);color:var(--navy);background:var(--cream);}
:focus-visible{outline:3px solid var(--oker);outline-offset:2px;border-radius:6px;}
.header{background:var(--green);color:#fff;padding:18px 22px;display:flex;align-items:center;gap:11px;}
.header .wm{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:1px;}
/* tweekleurig woordmerk: het kompas springt eruit (licht oker op groen: 3,8:1) */
.wm span{color:#F6C66E;}
@media (max-width:520px){
  .header{padding:14px 14px;gap:8px 10px;flex-wrap:wrap}
  /* logo en naam naast elkaar; de tagline loopt eronder door i.p.v. alles te verdringen */
  .header > div:not(.flags):not(.spacer){flex:1 1 0;min-width:0}
  /* knoppen (thema, vlaggen) op een eigen regel */
  .header .spacer{flex-basis:100%;height:0;margin:0}
  .header .wm{font-size:17px;letter-spacing:.5px}.header .sub{font-size:12px}
}
.header .sub{font-size:13px;opacity:.9;}
.header .spacer{margin-left:auto;}
.langsel{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.5);border-radius:10px;padding:6px 9px;font-family:var(--disp);font-weight:600;font-size:13px;cursor:pointer;}
.langsel option{color:#1A2B4A;}
.flags{display:flex;gap:4px;}
.flagbtn{background:rgba(255,255,255,.12);border:1.5px solid transparent;border-radius:9px;padding:4px 7px;font-size:18px;line-height:1;cursor:pointer;opacity:.55;transition:opacity .15s;}
.flagbtn:hover{opacity:.85;}
.flagbtn.active{opacity:1;border-color:#fff;background:rgba(255,255,255,.25);}
@page{size:A4;margin:12mm;}
.wrap{max-width:780px;margin:0 auto;padding:0 18px 50px;}
.card{background:#fff;border-radius:18px;padding:22px;margin-top:20px;box-shadow:0 2px 14px rgba(26,43,74,.06);}
label.lab{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--green);display:block;margin-bottom:5px;}
.row{display:flex;gap:14px;flex-wrap:wrap;}
.col{flex:1 1 220px;}
.field{position:relative;}
input[type=text],select{width:100%;padding:11px 13px;border:2px solid var(--line);border-radius:12px;font-family:var(--body);font-size:15px;color:var(--navy);background:#fff;outline:none;}
input[type=text]:focus,select:focus{border-color:var(--green);}
input[type=range]{width:100%;accent-color:var(--green);margin-top:8px;}
.btn{cursor:pointer;border:none;font-family:var(--disp);font-weight:700;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-main{width:100%;background:var(--green);color:#fff;padding:14px;font-size:17px;margin-top:18px;}
.btn-main[disabled]{background:#9bbcae;cursor:not-allowed;}
.btn-ghost{flex:1 1 160px;background:#fff;color:var(--green);border:2px solid var(--green);padding:11px;}
.btn-dark{flex:1 1 160px;background:var(--navy);color:#fff;padding:11px;}
.btn-oker{flex:1 1 160px;background:var(--oker);color:#fff;padding:11px;}
.btn-sm{padding:9px 12px;font-size:14px;border-radius:11px;}
.note{display:flex;gap:7px;margin-top:12px;font-size:12.5px;color:var(--grey);align-items:flex-start;}
.note a{color:var(--green);}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.chip{background:var(--gsoft);color:var(--green);font-family:var(--disp);font-weight:600;font-size:12.5px;border-radius:20px;padding:5px 12px;}
.err{background:#FBE6E3;border:2px solid var(--koraal);border-radius:14px;padding:16px;margin-top:16px;display:flex;gap:10px;font-size:14px;}
.src{margin-top:8px;font-size:13px;display:flex;align-items:center;gap:6px;}
.src.ai{color:var(--green);font-weight:700;}
.src.basis{color:var(--grey);}
#map{height:300px;border-radius:16px;margin-top:16px;border:2px solid var(--gsoft);background:#e9eee9;}
.mapfallback{height:auto;min-height:60px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--grey);font-size:13px;padding:16px;}

/* autocomplete */
.suggest{position:absolute;left:0;right:0;top:100%;z-index:1200;background:#fff;border:2px solid var(--line);border-top:none;border-radius:0 0 12px 12px;max-height:240px;overflow:auto;box-shadow:0 8px 20px rgba(26,43,74,.12);}
.suggest div{padding:10px 13px;font-size:14px;cursor:pointer;border-bottom:1px solid var(--gsoft);}
.suggest div:last-child{border-bottom:none;}
.suggest div:hover,.suggest div.active{background:var(--gsoft);}

/* route stats */
.routestats{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:14px;background:var(--gsoft);border-radius:14px;padding:11px 15px;}
.routestats .rs{display:flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;color:var(--green);font-size:15px;}
.routestats .rs small{font-family:var(--body);font-weight:600;color:var(--grey);font-size:12px;}
.routestats .tag{margin-left:auto;font-family:var(--body);font-weight:600;font-size:12px;color:var(--grey);}

/* print sheet */
.printArea{position:relative;background:#fff;border-radius:18px;padding:26px;margin-top:16px;box-shadow:0 2px 14px rgba(26,43,74,.06);overflow:hidden;}
.brandline{display:flex;align-items:center;gap:9px;}
.brandline span{font-family:var(--disp);font-weight:700;color:var(--green);letter-spacing:1px;}
/* KOMPAS in de kleur van de kompasnaald (donker koraal op wit: 4,6:1) */
.brandline span b{color:#C4513F;font-weight:700;}
h1.title{font-family:var(--disp);font-weight:700;color:var(--navy);font-size:30px;margin:10px 0 2px;}
.subtitle{color:var(--green);font-family:var(--disp);font-weight:600;}
.routebadge{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:var(--gsoft);color:var(--green);font-family:var(--disp);font-weight:600;font-size:13.5px;border-radius:20px;padding:6px 14px;}
.factbox{margin-top:12px;font-size:13.5px;color:var(--navy);background:var(--gsoft);border-radius:12px;padding:11px 14px;line-height:1.5;}
.routedesc{margin-top:12px;font-size:13px;color:var(--navy);background:#fff;border:1.5px dashed var(--line);border-radius:12px;padding:10px 13px;line-height:1.7;}
.routedesc .rd-m{color:var(--grey);font-size:12px;}
.story{background:var(--cream);border:2px solid var(--oker);border-radius:14px;padding:14px 16px;margin-top:16px;font-size:15px;}
.task{border:2px solid var(--gsoft);border-radius:14px;padding:12px 14px;margin-top:14px;}
.thead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.numbadge{width:28px;height:28px;background:var(--navy);color:#fff;border-radius:50%;font-family:var(--disp);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;}
.typeicon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;}
.typename{font-family:var(--disp);font-weight:700;font-size:13px;}
.ttitle{font-family:var(--disp);font-weight:600;color:var(--navy);font-size:16px;}
.leg{margin-left:auto;font-family:var(--body);font-weight:600;font-size:12px;color:var(--grey);display:flex;align-items:center;gap:5px;}
.bigcue{font-size:40px;text-align:center;margin:8px 0 2px;line-height:1;}
.levels{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.lvl{display:flex;gap:9px;align-items:baseline;}
.lvl .txt{font-size:14.5px;}
.pill{color:#fff;font-family:var(--disp);font-weight:700;font-size:11px;border-radius:20px;padding:2px 9px;min-width:44px;text-align:center;display:inline-block;flex:none;}
.letterclue{margin-top:9px;display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--koraal);font-family:var(--disp);font-weight:600;}
.letterbox{width:26px;height:30px;border:2.5px solid var(--koraal);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--koraal);}
.write{margin-top:9px;padding-top:8px;border-top:1.5px dashed var(--line);display:flex;gap:9px;align-items:center;}
.write .wl{font-family:var(--disp);font-weight:600;color:var(--green);font-size:13px;}
.write .dots{flex:1;border-bottom:2px dotted var(--navy);height:13px;}
.write .box{width:17px;height:17px;border:2.5px solid var(--green);border-radius:5px;flex:none;}
.finale{background:var(--cream);border-radius:14px;padding:16px 18px;margin-top:18px;text-align:center;}
.finale .ft{font-family:var(--disp);font-weight:700;color:var(--green);font-size:18px;}
.finale .letters{font-family:var(--disp);font-weight:700;color:var(--koraal);font-size:22px;letter-spacing:8px;}
.finale .boxes{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.finale .pbox{width:36px;height:44px;border:3px solid var(--navy);border-radius:8px;}
table.ws{border-collapse:collapse;margin:4px auto 0;}
table.ws td{width:18px;height:18px;text-align:center;font-family:'Fredoka',monospace;font-weight:600;font-size:12.5px;color:var(--navy);border:1px solid var(--line);}
.begeleider{margin-top:16px;font-size:12.5px;color:var(--grey);border-top:2px solid var(--gsoft);padding-top:12px;}
.begeleider b{color:var(--green);font-family:var(--disp);}
.watermark{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.watermark span{font-family:var(--disp);font-weight:700;font-size:52px;color:rgba(31,111,84,.06);transform:rotate(-24deg);letter-spacing:4px;white-space:nowrap;}
.wmfoot{margin-top:10px;text-align:center;font-size:11px;color:var(--grey);}
.diploma{break-before:page;margin-top:24px;border:4px double var(--oker);border-radius:16px;padding:26px 22px;text-align:center;background:var(--cream);}
.diploma .dipmedal{font-size:46px;}
.diploma .diptitle{font-family:var(--disp);font-weight:700;color:var(--green);font-size:28px;letter-spacing:2px;margin:6px 0;}
.diploma .diptext{font-size:16px;max-width:460px;margin:8px auto;color:var(--navy);}
.diploma .dipword{margin-top:14px;font-family:var(--disp);font-weight:600;color:var(--koraal);}
.diploma .dipboxes{display:inline-flex;gap:5px;vertical-align:middle;}
.diploma .dipboxes span{width:22px;height:26px;border:2px solid var(--navy);border-radius:5px;display:inline-block;}
.diploma .dipdate{margin-top:16px;color:var(--grey);font-size:13px;}
.qrstops{break-before:page;margin-top:24px;}
.qrstops .ft{font-family:var(--disp);font-weight:700;color:var(--green);font-size:18px;}
.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.qrcard{border:2px dashed var(--navy);border-radius:12px;padding:12px;text-align:center;break-inside:avoid;}
.qrcard .qrnum{width:28px;height:28px;background:var(--navy);color:#fff;border-radius:50%;font-family:var(--disp);font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;}
.qrcard img{width:120px;height:120px;}
.qrcard .qrcap{font-size:11.5px;color:var(--grey);margin-top:6px;}
.empty{text-align:center;color:#8a96a0;margin-top:26px;font-size:14px;}
.spin{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.mk{background:var(--navy);color:#fff;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:13px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.mk.home{background:var(--koraal);}
.mk.here{background:var(--oker);}

/* upgrade / premium */
.premiumbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#FFF6E6;border:2px solid var(--oker);border-radius:14px;padding:12px 15px;margin-top:16px;}
.premiumbar .pt{font-family:var(--disp);font-weight:700;color:#9a6a12;font-size:14px;}
.premiumbar .pd{font-size:12.5px;color:var(--grey);flex:1 1 200px;}
.badge-pro{background:var(--green);color:#fff;border-radius:20px;padding:3px 10px;font-family:var(--disp);font-weight:700;font-size:11px;}
.wl-fields{margin-top:12px;}

/* play mode */
.play{position:fixed;inset:0;z-index:3000;background:var(--cream);display:flex;flex-direction:column;}
.play header{background:var(--green);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:10px;}
.play header .pclose{margin-left:auto;background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font-family:var(--disp);font-weight:700;}
.play .pbody{flex:1;overflow:auto;padding:20px;max-width:680px;margin:0 auto;width:100%;}
.play .pstep{font-family:var(--disp);font-weight:700;color:var(--green);font-size:13px;}
.play .ph1{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--navy);margin:4px 0 2px;}
.play .pdir{background:#fff;border-radius:16px;padding:18px;margin-top:14px;box-shadow:0 2px 12px rgba(26,43,74,.07);text-align:center;}
.play .parrow{font-size:54px;line-height:1;transition:transform .25s;}
.play .pdist{font-family:var(--disp);font-weight:700;font-size:30px;color:var(--green);margin-top:6px;}
.play .pnear{color:var(--koraal);font-weight:700;}
.play .pclue{background:#fff;border-radius:16px;padding:16px;margin-top:14px;box-shadow:0 2px 12px rgba(26,43,74,.07);}
.play .pletter{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:var(--koraal);font-family:var(--disp);font-weight:700;}
.play .pletter b{font-size:22px;}
.play .pfoot{display:flex;gap:10px;margin-top:16px;}
.play .pcollected{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;justify-content:center;}
.play .pcollected span{width:30px;height:36px;border:2px solid var(--navy);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:18px;}
.gpsnote{font-size:12px;color:var(--grey);margin-top:8px;}
.pteams{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.pscore{display:inline-flex;gap:10px;flex-wrap:wrap;}
.pscore span{padding:1px 8px;border-radius:10px;background:var(--gsoft);}
.pscore span.active{background:var(--oker);color:#fff;}
.panswer{display:flex;gap:8px;margin-top:10px;}
.panswer input{flex:1;padding:9px 11px;border:2px solid var(--line);border-radius:10px;font-size:14px;}
.psv{margin-top:12px;}
.psv img{width:100%;max-width:420px;border-radius:12px;display:block;}
.psvhint{font-size:12.5px;color:var(--koraal);font-family:var(--disp);font-weight:600;margin-top:6px;}
.psvlink{display:inline-block;margin-top:8px;color:var(--green);font-family:var(--disp);font-weight:700;font-size:13.5px;text-decoration:none;}
.pprog{height:8px;background:var(--gsoft);border-radius:6px;overflow:hidden;margin-bottom:12px;}
.pprog div{height:100%;background:var(--green);transition:width .3s;}
.pactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.phint{margin-top:8px;color:var(--green);font-size:13.5px;}
.play .pclose{cursor:pointer;}
.pthumb{display:block;width:100%;max-width:280px;border-radius:12px;margin:12px auto 0;}
.pbadges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
.pbadges span{background:var(--gsoft);color:var(--green);font-family:var(--disp);font-weight:700;font-size:13px;border-radius:20px;padding:6px 12px;}
.pphotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:10px;}
.pphotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;}
.bstop{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.bstop .bnum{width:26px;height:26px;flex:none;background:var(--navy);color:#fff;border-radius:50%;font-family:var(--disp);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px;}
.bstop .bfields{flex:1;display:flex;flex-direction:column;gap:6px;}
.bstop input{padding:9px 11px;border:2px solid var(--line);border-radius:10px;font-size:14px;}
.bstop .brm{flex:none;background:#FBE6E3;border:none;color:var(--koraal);border-radius:10px;width:34px;height:34px;cursor:pointer;font-weight:700;}
.bstop .bplace{width:26px;height:26px;flex:none;background:var(--gsoft);color:var(--green);border:2px dashed var(--green);border-radius:50%;cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.bstop-nogeo .bfields input:first-child{border-style:dashed;}
.pmk{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2px solid #fff;font-size:14px;box-shadow:0 1px 5px rgba(0,0,0,.35);}
.pmk-off{opacity:.5;filter:grayscale(.5);}
.prow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px solid var(--line);border-radius:11px;margin-bottom:7px;cursor:pointer;}
.prow.on{border-color:var(--green);background:var(--gsoft);}
.prow .pemoji{font-size:18px;flex:none;}
.prow .ptitle{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--navy);}
.prow .pcat{font-size:12px;color:var(--grey);}
.prow .pcheck{margin-left:auto;font-weight:700;font-size:18px;color:var(--green);flex:none;width:22px;text-align:center;}
/* voortgangsstappen tijdens genereren */
.busysteps{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;font-size:12.5px;color:var(--grey);}
.busysteps span{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;background:var(--gsoft);opacity:.55;}
.busysteps span.active{opacity:1;font-weight:600;color:var(--green);}
.busysteps span.done{opacity:1;}
/* beoordeling na afloop (speelmodus, en via de QR op het diploma) */
.rate{margin-top:18px;padding:14px;border-radius:14px;background:var(--gsoft);text-align:center;}
.rate-t{font-family:var(--disp);font-weight:600;color:var(--navy);font-size:15px;}
.rate-b{display:flex;justify-content:center;gap:8px;margin-top:10px;}
.rate-b button{font-size:30px;line-height:1;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px;cursor:pointer;transition:transform .1s;}
.rate-b button:hover,.rate-b button:focus-visible{border-color:var(--green);transform:scale(1.08);}
.ratecard{margin-top:20px;}
.diprate{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font-size:12px;color:var(--grey);}
.diprate img{width:64px;height:64px;}
/* startpunt kiezen in de speelmodus */
.pstart{display:flex;flex-direction:column;gap:6px;margin-top:14px;text-align:left;font-size:13.5px;}
.pstart span{display:flex;flex-direction:column;}
.pstart i{font-style:normal;font-size:11.5px;color:var(--grey);margin-top:2px;}
.pstart select{padding:9px 10px;border:2px solid var(--line);border-radius:10px;font:inherit;}
/* interne links onderaan de homepage */
.seolinks{margin-top:14px;line-height:1.9;}
.seolinks a{color:var(--green);}
.seocities{margin-top:4px;font-size:12px;}
html[data-theme="dark"] .rate{background:#1E2734;}
html[data-theme="dark"] .rate-b button,html[data-theme="dark"] .pstart select{background:#1B2330;border-color:#2c3644;color:var(--cream);}
/* knoppen in drie lagen: hoofdacties groot, aanpassen klein, de rest onder "Meer" */
.actions-main{gap:10px;}
.actions-edit{gap:8px;margin-top:10px;align-items:center;}
/* deze knoppen zijn zo breed als hun tekst; anders rekken ze en valt "Meer" op een eigen regel */
.actions-edit .btn{flex:0 0 auto;}
.actlab{font-size:12px;color:var(--grey);font-weight:600;margin-right:2px;}
.morewrap{position:relative;display:inline-block;margin-left:auto;}
.moremenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:2px solid var(--line);border-radius:12px;padding:6px;min-width:210px;max-width:calc(100vw - 28px);box-shadow:0 10px 28px rgba(26,43,74,.16);display:flex;flex-direction:column;gap:2px;}
.moremenu[hidden]{display:none;}
.moremenu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;padding:9px 11px;border-radius:8px;font:inherit;font-size:13px;color:var(--navy);cursor:pointer;}
.moremenu button:hover{background:var(--gsoft);}
html[data-theme="dark"] .moremenu{background:#1B2330;border-color:#2c3644;}
html[data-theme="dark"] .moremenu button{color:var(--cream);}
html[data-theme="dark"] .moremenu button:hover{background:#26303f;}
/* printopties: ingeklapt, met kopjes per groep */
.printopts{margin-top:14px;border:2px solid var(--line);border-radius:12px;padding:0 14px;}
.printopts[open]{padding-bottom:12px;}
.printopts summary{cursor:pointer;padding:11px 0;font-family:var(--disp);font-weight:600;color:var(--navy);font-size:13.5px;list-style:none;}
.printopts summary::-webkit-details-marker{display:none;}
.printopts summary::after{content:"▾";float:right;color:var(--grey);}
.printopts[open] summary::after{content:"▴";}
.optgrp{margin-top:4px;}
.optgrp + .optgrp{margin-top:14px;padding-top:12px;border-top:1.5px solid var(--gsoft);}
.optgrp-t{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);font-weight:700;margin-bottom:7px;}
.optgrp label{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:13.5px;color:var(--navy);cursor:pointer;}
html[data-theme="dark"] .optgrp label,html[data-theme="dark"] .printopts summary{color:var(--cream);}
/* losse optie in de instellingenkaart (rolstoel/kinderwagen) */
.setopt{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--disp);font-weight:600;color:var(--navy);font-size:13.5px;cursor:pointer;}
html[data-theme="dark"] .setopt{color:var(--cream);}
/* uitleg onder de actieknoppen (tooltips werken niet op touch) */
.btnhelp{font-size:12px;color:var(--grey);margin-top:8px;line-height:1.5;}
/* instellingen-kaart ingeklapt na genereren */
#setupCard.collapsed .row,#setupCard.collapsed #premiumBar,#setupCard.collapsed #accountBar,#setupCard.collapsed #builderBtn,#setupCard.collapsed #wlFields,#setupCard.collapsed #go,#setupCard.collapsed #busySteps,#setupCard.collapsed #wheelchairWrap,#setupCard.collapsed #recentBox{display:none;}
/* demo-voorbeelden + bewaarde tochten op het lege scherm */
.demotitle{font-family:var(--disp);font-weight:600;color:var(--navy);font-size:13px;margin-top:18px;}
.democards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.democards button{border:2px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:13px;color:var(--navy);}
.democards button:hover{border-color:var(--green);}
.myhunts{margin-top:16px;text-align:left;max-width:420px;margin-left:auto;margin-right:auto;}
.myhunts .mh-title{font-family:var(--disp);font-weight:600;color:var(--navy);font-size:13px;margin-bottom:6px;text-align:center;}
.myhunts .mh-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:2px solid var(--line);border-radius:10px;margin-bottom:6px;font-size:13px;background:#fff;}
.myhunts .mh-row b{flex:1;font-weight:600;color:var(--navy);}
.myhunts .mh-row button{border:none;background:var(--gsoft);color:var(--green);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:12px;}
.myhunts .mh-row .mh-del{background:#FBE6E3;color:var(--koraal);}
/* recent gebruikte adressen + kinderprofielen */
.recentbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;}
.recentbox:empty{display:none;}
.reclab{font-size:11.5px;color:var(--grey);font-weight:600;}
.recchip{border:2px solid var(--line);background:#fff;border-radius:20px;padding:4px 11px;font-size:12px;cursor:pointer;color:var(--navy);font-family:inherit;}
.recchip:hover{border-color:var(--green);}
.recchip.addkid{border-style:dashed;color:var(--green);}
.recchip .kidx{color:var(--koraal);margin-left:3px;font-size:11px;}
html[data-theme="dark"] .recchip{background:#1B2330;color:var(--cream);border-color:#2c3644;}
/* toegankelijkheid: sla de header over, en maak toetsenbordfocus altijd zichtbaar */
.skiplink{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--green);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-family:var(--disp);font-weight:600;text-decoration:none;}
.skiplink:focus{left:0;}
:focus-visible{outline:3px solid var(--oker);outline-offset:2px;border-radius:4px;}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--oker);outline-offset:2px;}
/* respecteer "verminder beweging": geen spinner, geen zachte scroll */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .spin{animation:none !important;}
}
/* QR-scanner in de speelmodus */
.qrscan{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.qrscan video{width:100%;max-width:320px;border-radius:12px;border:3px solid var(--green);background:#000;}
/* begeleidersblad met antwoorden */
.answersheet{margin-top:22px;padding:16px;border:2.5px dashed var(--koraal);border-radius:14px;background:#FFF9F8;break-before:page;}
.answersheet .anote{color:var(--koraal);font-weight:700;font-size:13px;margin:4px 0 12px;}
.answersheet .asub{font-family:var(--disp);font-weight:700;color:var(--navy);margin-top:14px;font-size:14px;}
.answersheet .asol{font-size:13px;margin:5px 0 0;line-height:1.7;}
.answersheet .asol span{color:var(--grey);font-size:11.5px;}
.atable{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px;}
.atable th,.atable td{border:1px solid var(--line);padding:5px 7px;text-align:left;vertical-align:top;}
.atable th{background:var(--gsoft);font-family:var(--disp);}
.agoals{margin:6px 0 0;padding-left:20px;font-size:12.5px;line-height:1.7;}
/* tweede taal onder de opdracht */
.bilingual{display:flex;gap:8px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);font-size:13px;color:#41525e;}
.bilingual .blang{flex:none;font-size:10.5px;font-weight:700;color:var(--grey);text-transform:uppercase;padding-top:2px;}
/* tekenvak i.p.v. schrijfregel */
.drawbox{margin-top:10px;border:2px dashed var(--line);border-radius:10px;height:78px;display:flex;align-items:flex-start;padding:6px 10px;}
.drawbox .wl{font-size:11.5px;color:var(--grey);}
/* "stop x van y" + aandenken-regel */
.pageof{margin-left:auto;font-size:10.5px;color:var(--grey);font-weight:600;}
.foundby{display:flex;align-items:flex-end;gap:8px;margin-top:16px;font-size:12.5px;color:var(--grey);}
.foundby .dots{flex:1;border-bottom:1.5px dotted var(--line);height:14px;}
/* kleurenblind-vriendelijk: markers krijgen extra vormcontrast */
body.cb-safe .mk{border:3px solid #000 !important;}
body.cb-safe .mk.home{background:#0072B2 !important;}
/* instellingen vóór vertrek (strikt, spaarstand, stil) */
.popts{margin-top:18px;text-align:left;display:flex;flex-direction:column;gap:10px;}
.popt{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;cursor:pointer;}
.popt input{margin-top:3px;flex:none;width:18px;height:18px;}
.popt span{display:flex;flex-direction:column;}
.popt i{font-style:normal;font-size:11.5px;color:var(--grey);margin-top:2px;}
.ppaused{margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--gsoft);color:var(--green);font-size:13px;font-weight:600;}
.psharepos{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-top:6px;cursor:pointer;}
.plnear{font-style:normal;color:var(--grey);font-size:11.5px;}
/* mini-kaart in de speelmodus */
#pminimap{height:150px;border-radius:12px;margin-top:10px;border:2px solid var(--gsoft);}
/* leeftijd 4–6: grotere letters, minder visuele drukte */
.printArea.lvl-a .txt{font-size:16.5px;line-height:1.55;}
.printArea.lvl-a .lvl .pill{display:none;}
.taskimgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center;}
.taskimgs img{width:74px;height:74px;object-fit:cover;border-radius:10px;border:2px solid var(--gsoft);background:#eef2ee;}
.taskimgs .imgcred{font-size:10.5px;color:var(--grey);flex-basis:100%;margin-top:-2px;}
.pgamecode{background:#FFF6E6;border:2px solid var(--oker);border-radius:12px;padding:10px 13px;font-size:13px;color:var(--navy);margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pgamecode b{font-family:var(--disp);font-size:18px;letter-spacing:2px;color:var(--green);}
.pleader{background:var(--gsoft);border-radius:12px;padding:10px 13px;margin-bottom:12px;}
.pleader .plhead{font-family:var(--disp);font-weight:700;color:var(--green);font-size:14px;margin-bottom:6px;}
.pleader .plrow{display:flex;justify-content:space-between;font-size:14px;padding:2px 0;}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;z-index:4000;box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;transition:opacity .2s;}
.toast.show{opacity:1;}

@media (max-width:560px){
  .header{flex-wrap:wrap;gap:8px;padding:13px 15px;}
  .header .sub{font-size:11.5px;}
  .header .spacer{flex-basis:100%;height:0;}
  .wrap{padding:0 12px 40px;}
  .card{padding:18px 16px;}
  .row{gap:10px;}
  .btn-ghost,.btn-dark,.btn-oker{flex:1 1 140px;font-size:14px;padding:11px 8px;}
  .routestats{gap:10px;}
  table.ws td{width:17px;height:17px;font-size:11.5px;}
  .play .pbody{padding:16px;}
  .play .parrow{font-size:46px;}
  #bmap{height:240px !important;}
}
@media print{
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  body *{visibility:hidden;}
  .printArea,.printArea *{visibility:visible;}
  .printArea{position:absolute;left:0;top:0;width:100%;box-shadow:none;}
  .noprint{display:none !important;}
  .task,.finale{break-inside:avoid;}
  #map{height:280px !important;break-inside:avoid;margin-top:12px;}
  .leaflet-control-zoom,.leaflet-control-attribution .leaflet-attribution-flag{display:none !important;}
  /* kleurplaat-versie: zwart-wit lijnen om in te kleuren */
  body.coloring .printArea *{color:#000 !important;}
  body.coloring .typeicon,body.coloring .numbadge,body.coloring .pill,body.coloring .finale .pbox,body.coloring .letterbox,body.coloring .pscore span{background:#fff !important;border:1.5px solid #000 !important;color:#000 !important;}
  body.coloring .typeicon svg{stroke:#000 !important;fill:none !important;}
  body.coloring .typeicon svg *{stroke:#000 !important;fill:none !important;}
  body.coloring .story,body.coloring .finale,body.coloring .task,body.coloring .routebadge,body.coloring .routedesc,body.coloring .qrt{background:#fff !important;border-color:#000 !important;}
  body.coloring #map{filter:grayscale(1) contrast(1.1);}
  body.coloring table.ws td{color:#000 !important;}
  body.print-nomap #map{display:none !important;}
  .qrblock{break-inside:avoid;}
  /* één stop per pagina: handig om de stops over de kinderen te verdelen */
  body.one-per-page .task{break-after:page;padding:24px;}
  body.one-per-page .task .txt{font-size:16px;}
  body.one-per-page .task:last-of-type{break-after:auto;}
  /* A5-boekje: twee stops naast elkaar op een liggend A4, daarna vouwen */
  @page{margin:12mm;}
  body.booklet{}
  body.booklet .printArea{column-count:2;column-gap:14mm;column-fill:auto;}
  body.booklet .task{break-inside:avoid;font-size:12.5px;}
  body.booklet .finale,body.booklet .answersheet{break-inside:avoid;}
  /* begeleidersblad altijd op een eigen vel (niet per ongeluk aan de kinderen geven) */
  .answersheet{break-before:page;break-inside:avoid;}
}
@media print{
  /* paginanummer in de voettekst van elk vel */
  .printArea{counter-reset:page;}
}
/* print sheet altijd op licht papier, ook in donkere modus */
html[data-theme="dark"] .printArea{color:#1A2B4A;}
html[data-theme="dark"] .printArea .ttitle,html[data-theme="dark"] .printArea .title{color:#1A2B4A;}
.qrblock{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:2px solid var(--gsoft);}
.qrblock img{width:90px;height:90px;}
.qrblock .qrt{font-size:12.5px;color:var(--grey);}