button:focus-visible{outline:3px solid #e8c96a;outline-offset:3px}
  :root{ --bg:#231d15; --paneel:#2f281d; --rand:#4a4030; --accent:#e0a83c; --accent2:#8fb35d;
    --tekst:#ece4d4; --dof:#a89c85; --fout:#c96a45; }
  *{box-sizing:border-box; -webkit-user-select:none; user-select:none;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--tekst);
    font-family:Georgia,'Times New Roman',serif;}
  #app{max-width:900px;margin:0 auto;padding:12px;}
  h1{font-size:1.5em;margin:.2em 0;color:var(--accent);}
  .sub{color:var(--dof);font-size:.85em;margin-bottom:8px;}
  .hud{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
  .chip{background:var(--paneel);border:1px solid var(--rand);border-radius:8px;padding:6px 12px;font-size:.9em;}
  .chip b{color:var(--accent);}
  .hud-reis{flex:1 0 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1/-1;}
  .hud-reis .chip{min-width:0;overflow-wrap:anywhere;font-size:.78em;}
  .hud-reis b{display:block;font-variant-numeric:tabular-nums;}
  .wagen-icoon{width:32px;height:26px;vertical-align:middle;display:inline-block;}
  #nieuwSpelDialoog{width:min(440px,94vw);max-height:85dvh;overflow:auto;}
  #nieuwSpelDialoog .knoppen{display:flex;flex-wrap:wrap;gap:12px;}
  #nieuwSpelDialoog button{min-height:44px;}
  @media(max-height:500px){.hud-reis .chip{font-size:.72em;padding:2px 6px!important;}.hud-reis b{display:inline;}}
  #wereld{width:100%;background:#1b1610;border:4px solid #3a3020;border-radius:6px;}
  .paneel{background:var(--paneel);border:1px solid var(--rand);border-radius:10px;padding:12px;margin:10px 0;}
  .vtitel{color:var(--accent);font-size:.95em;margin-bottom:6px;}
  button{font-family:inherit;font-size:.9em;background:#3d3423;color:var(--tekst);
    border:1px solid var(--rand);border-radius:8px;padding:9px 10px;cursor:pointer;}
  button:hover:not(:disabled){background:#4a3f2a;}
  button:disabled{opacity:.4;cursor:default;}
  .rij{display:flex;justify-content:space-between;align-items:center;gap:8px;
    border-bottom:1px dashed var(--rand);padding:6px 0;font-size:.9em;}
  .rij .naam b{color:var(--tekst);}
  .klein{font-size:.78em;color:var(--dof);}
  .kolommen{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  @media (max-width:640px){ .kolommen{grid-template-columns:1fr;} }
  #spoorKnop{width:100%;font-size:1.05em;padding:14px;background:#5a4a28;border-color:var(--accent);}
  #overval{display:none;background:#33221a;border:2px solid var(--fout);border-radius:10px;padding:12px;margin:10px 0;}
  .wachtslot{display:inline-block;background:#241b12;border:1px solid var(--rand);border-radius:8px;
    padding:6px 10px;margin:3px;font-size:.85em;}
  .hpbalk{height:8px;background:#1b1610;border-radius:4px;overflow:hidden;margin-top:4px;}
  .hpbalk div{height:100%;background:var(--accent2);transition:width .3s;}
  #meldingen{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:50;}
  .melding{background:var(--accent);color:#241b06;border-radius:8px;padding:8px 16px;margin-top:6px;
    font-size:.9em;box-shadow:0 4px 14px rgba(0,0,0,.4);}
  dialog{background:var(--paneel);color:var(--tekst);border:2px solid var(--accent);border-radius:12px;
    max-width:460px;font-family:inherit;}
  dialog::backdrop{background:rgba(0,0,0,.6);}
  /* Reisroute, voorraad en stadstap (lokaal voor Karavaan). */
  #reis{padding:10px 12px;}
  .reis-identiteit{display:flex;gap:12px;align-items:center;min-width:0;}
  #reisVaandel{width:52px;height:68px;flex:none;}
  .reis-identiteit h2{font-size:1.15em;margin:0;color:var(--accent);overflow-wrap:anywhere;}
  #karavaanNummer{display:block;font-size:.72em;color:var(--dof);margin-bottom:3px;}
  #erfenis{margin:5px 0 0;font-size:.78em;color:var(--dof);}
  #reisboek{padding:0 12px;}
  #reisboek>summary{cursor:pointer;min-height:44px;padding:12px 0;}
  #reisboekLijst{list-style:none;margin:8px 0;padding:0;max-height:320px;overflow:auto;overscroll-behavior:contain;}
  #reisboekLijst li{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--rand);}
  #reisboekLijst li>div{min-width:0;overflow-wrap:anywhere;}
  #reisboekLijst svg{width:34px;height:44px;flex:none;}
  #reisNaamForm{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}
  #reisNaamForm label{width:100%;font-size:.85em;}
  #reisNaamInput{font:inherit;color:var(--tekst);background:var(--bg);border:1px solid var(--rand);padding:9px;min-width:0;flex:1 1 160px;max-width:100%;user-select:text;}
  #reisNaamForm button{min-height:44px;}
  #reisOvergang{margin:8px 0;font-size:.85em;border-left:3px solid var(--accent2);padding-left:10px;}
  #reisPlaats{margin-top:6px;}
  #reisKop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline;}
  #reisKop b{font-size:1.05em;}
  .reisbalk{position:relative;height:14px;margin:10px 0 6px;background:#1b1610;border:2px solid var(--rand);}
  .reisbalk>i{position:absolute;inset:0 auto 0 0;background:var(--accent);}
  .reisbalk>span{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:var(--dof);}
  .reisbalk>span.voorbij{background:var(--accent2);}
  .reisbalk>span.stad{width:6px;margin-left:-6px;background:var(--tekst);}
  #reisVolgende{margin:0;font-size:.9em;}
  .tekort{display:block;color:var(--dof);}
  /* Eén melding tegelijk, bovenin over de niet-klikbare HUD-strook: nooit over kaart, stadspaneel of vaste balk. */
  #meldingen{pointer-events:none;top:4px;bottom:auto;width:min(92vw,640px);}
  .melding{text-align:center;margin-top:0;}
  @media (max-width:640px){ .melding{padding:6px 10px;font-size:.85em;} }
  /* Vaste HUD boven en vaste balk onder: focus en scrollIntoView landen ertussen (maten via pasRuimte()). */
  html[data-game=karavaan]{scroll-padding-top:calc(var(--kv-hud,0px) + 8px);scroll-padding-bottom:calc(var(--kv-balk,7rem) + 12px);}
  #wereld{display:block;}
  #stadPaneel,#overval{scroll-margin-bottom:8px;}
  #kolonieBevestiging dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 14px;font-size:.92em;}
  #kolonieBevestiging dt{font-weight:700;color:var(--accent);}
  #kolonieBevestiging dd{margin:0;}
  #kolonieBevestiging .knoppen{display:flex;flex-wrap:wrap;gap:10px;}
  #stadHeropen{margin:6px 0;}
  [hidden]{display:none!important;}
  .kv-tabs{display:flex;gap:10px;margin:16px 0 12px;}
  .kv-tabs button{flex:1;min-height:44px;}
  .kv-tabs [aria-selected=true]{border:3px solid var(--accent);}
  .kv-shop-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
  .kv-shop-head p{margin:0;}
  #onderzoekLijst .rij{align-items:flex-start;padding:14px 0;}
  .rij .naam{min-width:0;}
  .rij button{flex-shrink:0;min-height:44px;}
  #ovStand{font-weight:bold;font-size:1.05em;margin:10px 0;}
  #ovTijd{font-variant-numeric:tabular-nums;}
  #ovResultaat{border-left:4px solid var(--accent2);}
  .kv-uitleg summary{cursor:pointer;min-height:44px;padding:10px 0;}
  .kv-uitleg p{margin:6px 0;}
  progress{accent-color:var(--accent2);width:100%;height:16px;}
  #ovTijdBalk{accent-color:var(--accent);}
  #spaardoelStatus{display:flex;justify-content:space-between;align-items:center;gap:10px;}
  #spaardoelStatus p{margin:0;min-width:0;}
  .spaar-keuze{display:flex;gap:8px;margin:8px 0;}
  .spaar-keuze select{min-width:0;width:100%;font:inherit;color:var(--tekst);background:var(--paneel);padding:8px;border:1px solid var(--rand);}
  #welkom{max-height:90dvh;overflow:auto;width:min(460px,94vw);}
  .welkom-keuze{display:flex;flex-wrap:wrap;gap:12px;}
  .welkom-keuze button{flex:1 1 170px;min-height:48px;}
  @media(max-width:400px){#onderzoekLijst .rij{gap:8px;font-size:.85em;}}
/* Hoekige Pausito-vorm B (data-pk-vorm="hoekig" schakelt de kittokens: zwarte inkt, 0px-hoeken, harde schaduw).
   Alleen hier, voor dit spel; de gedeelde game-shell.css en kit blijven ongewijzigd. Eigen spelwereld (kaart) blijft. */
html[data-pk-vorm=hoekig][data-game] body{background:var(--gs-ink);}
html[data-pk-vorm=hoekig][data-game] :is(h1,h2,h3,.vtitel,.chip,.melding,summary){font-family:var(--gs-display);font-weight:800;letter-spacing:-.01em;}
html[data-pk-vorm=hoekig][data-game] :is(.paneel,dialog,#overval,#kr-oef-les){border-radius:0;box-shadow:6px 6px 0 var(--gs-line);}
html[data-pk-vorm=hoekig][data-game] #overval{border-color:var(--gs-coral);box-shadow:6px 6px 0 var(--gs-coral-s);}
html[data-pk-vorm=hoekig][data-game] #stadPaneel{border-color:var(--gs-gold);box-shadow:6px 6px 0 var(--gs-gold-s);}
html[data-pk-vorm=hoekig][data-game] #wereld{border-radius:0;border-color:var(--gs-line-2);}
html[data-pk-vorm=hoekig][data-game] :is(.chip,.wachtslot,.melding,.hpbalk,.reisbalk){border-radius:0;}
html[data-pk-vorm=hoekig][data-game] .chip{box-shadow:4px 4px 0 var(--gs-teal-s);}
html[data-pk-vorm=hoekig][data-game] .melding{box-shadow:5px 5px 0 var(--gs-cream-s);}
html[data-pk-vorm=hoekig][data-game] button{border-radius:0;box-shadow:4px 4px 0 var(--s);font-weight:800;}
html[data-pk-vorm=hoekig][data-game] button:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--s);}
html[data-pk-vorm=hoekig][data-game] .game-tools .game-primary:is(.game-primary,#gs-specificiteit){border-radius:0;box-shadow:6px 6px 0 var(--s);font-weight:800;}
html[data-pk-vorm=hoekig][data-game] .game-tools .game-primary:is(.game-primary,#gs-specificiteit):active:not(:disabled){transform:translate(4px,4px);box-shadow:2px 2px 0 var(--s);}
html[data-pk-vorm=hoekig][data-game] .game-tools .game-save-menu button{border-radius:0;}
html[data-pk-vorm=hoekig][data-game] #kolonieBevestig{--c:var(--gs-gold);--s:var(--gs-gold-s);}
html[data-pk-vorm=hoekig][data-game] .rij button:not(:disabled){--c:var(--gs-gold);--s:var(--gs-gold-s);}
html[data-pk-vorm=hoekig][data-game] .rij button:disabled{color:var(--gs-mute);}
html[data-pk-vorm=hoekig][data-game] .reisbalk{background:var(--gs-deep);border-color:var(--gs-line-2);}
@media (prefers-reduced-motion:reduce){html[data-pk-vorm=hoekig] button:active{transform:none!important;}}
/* Smalle en korte schermen: compacte HUD en balk, zodat kaart en stadspaneel niet onder vaste lagen vallen.
   Aanraakdoelen blijven minstens 44px; alleen opvulling en tekstgrootte krimpen. */
@media (max-width:640px),(max-height:500px){
  h1{font-size:1.25em;} .sub{font-size:.78em;margin-bottom:4px;}
  html[data-game=karavaan] .hud{gap:6px;margin:6px 0;padding:4px 0;}
  html[data-game=karavaan] .chip{padding:4px 8px;font-size:.8em;box-shadow:3px 3px 0 var(--gs-teal-s);}
  html[data-game=karavaan] .game-tools{padding:6px 8px calc(6px + var(--game-inset-bottom));gap:6px;}
  html[data-game=karavaan] .game-tools #spoorKnop{flex:1 1 50%;min-width:0;padding:6px 8px!important;font-size:13px!important;}
  html[data-game=karavaan] .game-tools #fakkelKnop{flex:1 1 40%;min-width:0;padding:6px 6px!important;font-size:12px!important;}
  #reis{padding:8px 10px;} .reisbalk{margin:6px 0 4px;}
}
@media (max-width:640px){ html[data-game=karavaan] .hud{display:grid;grid-template-columns:1fr 1fr;} #reisVolgende{font-size:.85em;} h1{margin:0;} }
@media (max-height:500px){ .sub{display:none;} #reisVolgende{font-size:.82em;} }
/* Liggende gsm: balk in één rij (aandrijven, fakkel, status, bewaren). */
@media (max-height:500px) and (min-width:641px){
  html[data-game=karavaan] .game-tools #spoorKnop{flex-basis:32%;} html[data-game=karavaan] .game-tools #fakkelKnop{flex-basis:26%;}
}
#kr-oef-les{max-width:1050px;margin:20px auto;padding:20px;border:1px solid #796545;border-radius:16px;background:#30281d;box-sizing:border-box;line-height:1.6}#kr-oef-les *{box-sizing:border-box}#kr-oef-les summary{cursor:pointer;font-weight:700;padding:8px 0}#kr-oef-les .kr-oef-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}#kr-oef-les article{padding:14px;border:1px solid #796545;border-radius:10px}#kr-oef-les button,#kr-oef-les select{white-space:normal;max-width:100%;font:inherit;padding:10px;margin:4px 0}#kr-oef-les .kr-oef-actions{display:flex;flex-wrap:wrap;gap:8px}#kr-oef-les button:disabled{opacity:.5}#kr-oef-les :focus-visible{outline:3px solid #f1c66e;outline-offset:3px}#kr-oef-status{padding:14px;background:#211b14;border-radius:8px}@media(max-width:620px){#kr-oef-les{margin:12px;padding:14px}#kr-oef-les .kr-oef-cards{grid-template-columns:1fr}#kr-oef-les button{width:100%}}
.platform-nav,.platform-footer{padding:16px;max-width:760px;margin:auto}.platform-nav a,.platform-footer a{color:inherit}.platform-footer{padding-bottom:110px;font-size:.85rem}#opslagStatus{max-width:1100px;margin:1rem auto;padding:0 1rem}#stadPaneel{display:none}.kv-klein{font-size:.9em}.vtitel.kv-fout{color:var(--fout)}#ovSloten{margin:8px 0}.kv-rij{display:flex;gap:8px;align-items:center}.klein.kv-mt6{margin-top:6px}.hpbalk div.pct-0{width:0%}.hpbalk div.pct-1{width:1%}.hpbalk div.pct-2{width:2%}.hpbalk div.pct-3{width:3%}.hpbalk div.pct-4{width:4%}.hpbalk div.pct-5{width:5%}.hpbalk div.pct-6{width:6%}.hpbalk div.pct-7{width:7%}.hpbalk div.pct-8{width:8%}.hpbalk div.pct-9{width:9%}.hpbalk div.pct-10{width:10%}.hpbalk div.pct-11{width:11%}.hpbalk div.pct-12{width:12%}.hpbalk div.pct-13{width:13%}.hpbalk div.pct-14{width:14%}.hpbalk div.pct-15{width:15%}.hpbalk div.pct-16{width:16%}.hpbalk div.pct-17{width:17%}.hpbalk div.pct-18{width:18%}.hpbalk div.pct-19{width:19%}.hpbalk div.pct-20{width:20%}.hpbalk div.pct-21{width:21%}.hpbalk div.pct-22{width:22%}.hpbalk div.pct-23{width:23%}.hpbalk div.pct-24{width:24%}.hpbalk div.pct-25{width:25%}.hpbalk div.pct-26{width:26%}.hpbalk div.pct-27{width:27%}.hpbalk div.pct-28{width:28%}.hpbalk div.pct-29{width:29%}.hpbalk div.pct-30{width:30%}.hpbalk div.pct-31{width:31%}.hpbalk div.pct-32{width:32%}.hpbalk div.pct-33{width:33%}.hpbalk div.pct-34{width:34%}.hpbalk div.pct-35{width:35%}.hpbalk div.pct-36{width:36%}.hpbalk div.pct-37{width:37%}.hpbalk div.pct-38{width:38%}.hpbalk div.pct-39{width:39%}.hpbalk div.pct-40{width:40%}.hpbalk div.pct-41{width:41%}.hpbalk div.pct-42{width:42%}.hpbalk div.pct-43{width:43%}.hpbalk div.pct-44{width:44%}.hpbalk div.pct-45{width:45%}.hpbalk div.pct-46{width:46%}.hpbalk div.pct-47{width:47%}.hpbalk div.pct-48{width:48%}.hpbalk div.pct-49{width:49%}.hpbalk div.pct-50{width:50%}.hpbalk div.pct-51{width:51%}.hpbalk div.pct-52{width:52%}.hpbalk div.pct-53{width:53%}.hpbalk div.pct-54{width:54%}.hpbalk div.pct-55{width:55%}.hpbalk div.pct-56{width:56%}.hpbalk div.pct-57{width:57%}.hpbalk div.pct-58{width:58%}.hpbalk div.pct-59{width:59%}.hpbalk div.pct-60{width:60%}.hpbalk div.pct-61{width:61%}.hpbalk div.pct-62{width:62%}.hpbalk div.pct-63{width:63%}.hpbalk div.pct-64{width:64%}.hpbalk div.pct-65{width:65%}.hpbalk div.pct-66{width:66%}.hpbalk div.pct-67{width:67%}.hpbalk div.pct-68{width:68%}.hpbalk div.pct-69{width:69%}.hpbalk div.pct-70{width:70%}.hpbalk div.pct-71{width:71%}.hpbalk div.pct-72{width:72%}.hpbalk div.pct-73{width:73%}.hpbalk div.pct-74{width:74%}.hpbalk div.pct-75{width:75%}.hpbalk div.pct-76{width:76%}.hpbalk div.pct-77{width:77%}.hpbalk div.pct-78{width:78%}.hpbalk div.pct-79{width:79%}.hpbalk div.pct-80{width:80%}.hpbalk div.pct-81{width:81%}.hpbalk div.pct-82{width:82%}.hpbalk div.pct-83{width:83%}.hpbalk div.pct-84{width:84%}.hpbalk div.pct-85{width:85%}.hpbalk div.pct-86{width:86%}.hpbalk div.pct-87{width:87%}.hpbalk div.pct-88{width:88%}.hpbalk div.pct-89{width:89%}.hpbalk div.pct-90{width:90%}.hpbalk div.pct-91{width:91%}.hpbalk div.pct-92{width:92%}.hpbalk div.pct-93{width:93%}.hpbalk div.pct-94{width:94%}.hpbalk div.pct-95{width:95%}.hpbalk div.pct-96{width:96%}.hpbalk div.pct-97{width:97%}.hpbalk div.pct-98{width:98%}.hpbalk div.pct-99{width:99%}.hpbalk div.pct-100{width:100%}