/* Layout: één deur tegelijk. Metallic robijnrood decor, ivoren tekst, metallic gouden opschriften. Beeld groot, tekst eronder. */
:root{
  --royal:#6e0a16;      /* diep robijnrood */
  --sapphire:#b3172c;   /* glanzend karmijn */
  --ruby-hi:#d7152b;    /* metaalglans */
  --ruby-lo:#4f0610;    /* schaduw in het metaal */
  --metal-red:linear-gradient(115deg,#3a0208 0%,#6a0512 18%,#8e0818 32%,#b80c22 39%,#d4102a 41%,#a90a1f 44%,#74061a 56%,#4e030e 66%,#7c0716 78%,#b00b20 85%,#cc0f27 87%,#8a0818 90%,#3f0209 100%);
  --ivory:#fbf6ea;      /* ivoor */
  --pearl:#e9e2cf;      /* parel, gedempte tekst */
  --gold-1:#f3e6c2; --gold-2:#c6a552; --gold-3:#8b6d24; --gold-4:#dcc483; --gold-5:#a6862f;
  --metal:linear-gradient(110deg,#6b5418 0%,#94762a 12%,#c2a14c 24%,#dcc47e 32%,#f7eed2 37%,#d4b766 41%,#a4852f 52%,#76601f 60%,#ad8f3c 70%,#e2cd8c 79%,#fbf3db 82%,#c9ab5a 86%,#7a6220 100%);
  --metal-text:linear-gradient(180deg,#eedc9f 0%,#c6a650 24%,#987a2a 44%,#6f5819 56%,#9b7d2d 68%,#d2b664 86%,#ecd796 100%);
  --display:"Marcellus","Amiri","Trajan Pro",Georgia,serif;
  --accent:"Marcellus","Trajan Pro",Georgia,serif;
  --body:"Spectral","Amiri",Georgia,serif;
  color-scheme:dark;
}
html{background:#4a040d;min-height:100%}
html,body{min-height:100%}
body{margin:0;min-height:100vh;color:var(--ivory);font-family:var(--body);font-size:18px;line-height:1.6;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),var(--metal-red);background-attachment:fixed;background-color:#2a0105;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:760px;margin:0 auto;padding-block:24px 56px;display:flex;flex-direction:column;gap:20px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mark{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:clamp(14px,3.8vw,18px);white-space:nowrap}
.gold{background:var(--metal-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
.doors{display:flex;gap:6px}
.doors i{width:22px;height:4px;border-radius:2px;background:rgba(251,246,234,.22);display:block}
.doors i.on{background:var(--metal)}
.frame{padding:5px;border-radius:12px;background:linear-gradient(135deg,#4a3a10 0%,#8b6d24 16%,#b98a3a 30%,#c9ab5a 36%,#8a5d16 48%,#5e3c08 56%,#a4752a 70%,#c99a48 80%,#76601f 90%,#4a3a10 100%);box-shadow:0 18px 50px rgba(40,2,8,.6)}
.scene{border:1px solid #3d2805;border-radius:8px;overflow:hidden;background:linear-gradient(rgba(30,1,5,.32),rgba(30,1,5,.32)),repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),var(--metal-red);
  box-shadow:none;animation:in .55s ease}
@keyframes sheen{0%{background-position:130% 0,0 0}60%,100%{background-position:-30% 0,0 0}}
@keyframes in{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.scene,.gold,.primary{animation:none}}
.photo{display:block;width:100%;max-width:100%;height:auto;border-bottom:2px solid #76601f}
.photo.portrait{max-height:78vh;object-fit:cover;object-position:top}
.body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:14px}
h1,h2{margin:0;font-family:var(--display);font-weight:400;line-height:1.15;text-wrap:balance;letter-spacing:.04em}
h1{font-size:clamp(38px,9vw,64px);text-transform:uppercase;text-align:center}
h2{font-size:clamp(26px,5.6vw,38px)}
.lead{font-family:var(--display);font-weight:400;font-size:clamp(22px,5vw,32px);text-align:center;letter-spacing:.08em}
.speaker{font-family:var(--accent);font-size:15px;letter-spacing:.2em;text-transform:uppercase}
p{margin:0;max-width:62ch} .sub{color:var(--pearl)}
.choices{display:grid;gap:10px}
button,.btn{font:inherit;cursor:pointer;text-align:left;color:var(--ivory);background:linear-gradient(170deg,rgba(215,21,43,.35),rgba(79,6,16,.45));
  border:1px solid rgba(212,175,55,.55);padding:15px 18px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;transition:border-color .2s,background .2s}
button:hover,.btn:hover{border-color:var(--gold-2);background:linear-gradient(170deg,rgba(215,21,43,.6),rgba(110,10,22,.7))}
button:focus-visible,.btn:focus-visible,input:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.primary{background:linear-gradient(110deg,transparent 42%,rgba(255,236,190,.45) 50%,transparent 58%),linear-gradient(180deg,#e9d69c 0%,#c7a650 16%,#9c7c2c 42%,#7a5f1c 58%,#9a7b2d 76%,#cfb064 100%);background-size:260% 100%,100% 100%;animation:sheen 5s ease-in-out infinite;color:#fff;border:0;justify-content:center;font-family:var(--display);font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:19px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,245,215,.7),inset 0 -2px 0 rgba(120,90,25,.35),0 6px 18px rgba(40,2,8,.5)}
.primary:hover{background:linear-gradient(110deg,transparent 42%,rgba(255,236,190,.45) 50%,transparent 58%),linear-gradient(180deg,#e9d69c 0%,#c7a650 16%,#9c7c2c 42%,#7a5f1c 58%,#9a7b2d 76%,#cfb064 100%);background-size:260% 100%,100% 100%;filter:brightness(1.08)}
.primary[aria-disabled="true"]{opacity:.55;cursor:default}
.choice small{display:block;color:var(--pearl);font-size:15px}
.price{font-family:var(--display);font-weight:400;font-size:20px}
.lock{font-family:var(--accent);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);white-space:nowrap}
.back{background:transparent;border:0;padding:4px 0;color:var(--pearl);font-size:15px;justify-content:flex-start}
.back:hover{background:transparent;color:var(--gold-2)}
label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--pearl)}
input{font:inherit;padding:12px;border:1px solid rgba(212,175,55,.55);border-radius:6px;background:rgba(251,246,234,.96);color:var(--royal)}
.note{border-left:3px solid var(--gold-3);padding:8px 14px;color:var(--pearl)}
.err{color:var(--gold-4);font-size:15px}
.solid-gold{color:#c6a552}
.intro{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-inline-start:3px solid #8b6d24;background:rgba(30,1,5,.3)}
.intro h3{margin:0;font-family:var(--display);font-weight:400;font-size:20px}
.intro p{color:var(--pearl)}
.langs{display:flex;gap:4px;flex-wrap:wrap}
.lang{font-family:var(--display);font-size:14px;letter-spacing:.08em;padding:6px 10px;border:1px solid rgba(198,165,82,.45);background:transparent;color:#c6a552;border-radius:4px;justify-content:center}
.lang.on{background:#c6a552;color:#2a0105;border-color:#c6a552}
.lang:hover{background:rgba(198,165,82,.18)}
.lang.on:hover{background:#c6a552}
.doors{justify-content:flex-start}
[dir="rtl"] .choice,[dir="rtl"] .line{direction:rtl}
[dir="rtl"] .price{transform:scaleX(-1)}
.hero{position:relative}
.logo{width:104px;height:104px;border-radius:50%;margin:0 auto}
.center{text-align:center;align-items:stretch}
textarea{font:inherit;padding:12px;border:1px solid rgba(212,175,55,.55);border-radius:6px;background:rgba(251,246,234,.96);color:#2a0105;resize:vertical}
.bowl{display:flex;flex-direction:column;padding:12px 16px;border:1px solid rgba(212,175,55,.45);border-radius:6px;background:rgba(42,1,5,.35)}
.bowl-t{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:#dcc47e}
.bill{display:flex;flex-direction:column;border-top:1px solid rgba(212,175,55,.5)}
.line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(212,175,55,.3);font-variant-numeric:tabular-nums}
.line span:last-child{text-align:right;white-space:nowrap}
.total{font-family:var(--display);font-size:22px;border-bottom:0}
.contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-family:var(--display);font-size:18px}
.contact span{user-select:all;min-width:0;overflow-wrap:anywhere}
.mini{padding:8px 14px;flex:0 0 auto}
.rule{height:1px;background:var(--metal);opacity:.7;border:0;margin:2px 0}


.wrap{max-width:980px}
.room{position:relative;width:100%;max-width:100%}
.room img{display:block;width:100%;height:auto}
.hot{position:absolute;border:2px solid transparent;border-radius:10px;background:transparent;padding:0;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.hot:hover,.hot:focus-visible{border-color:#c6a552;box-shadow:0 0 0 3px rgba(198,165,82,.35),0 0 24px rgba(198,165,82,.55);background:rgba(198,165,82,.08);outline:none}
.hot.open{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(198,165,82,0)}50%{box-shadow:0 0 0 2px rgba(198,165,82,.45),0 0 18px rgba(198,165,82,.35)}}
@media (prefers-reduced-motion:reduce){.hot.open{animation:none}}
.hint{color:var(--pearl);font-size:15px;text-align:center}
.pas{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--display);font-size:15px;letter-spacing:.06em}
.badge{padding:4px 10px;border-radius:4px;border:1px solid #8b6d24;color:#c6a552;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
input,textarea{font:inherit;padding:12px;border:1px solid rgba(198,165,82,.55);border-radius:6px;background:rgba(251,246,234,.96);color:#2a0105}
.entries{display:flex;flex-direction:column;gap:8px}
.entry{padding:10px 14px;border-inline-start:3px solid #8b6d24;background:rgba(30,1,5,.3);color:var(--ivory)}
.entry small{display:block;color:var(--pearl);font-size:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}

body[data-room=receptie]{background:linear-gradient(115deg,#22062e 0%,#46125c 30%,#6b1f8a 42%,#3d0f52 62%,#5a1a75 84%,#22062e 100%);background-attachment:fixed}
.chapter{color:var(--ivory)}.chapter img{border-radius:6px;margin:10px 0}.chapter h1,.chapter h2,.chapter h3{font-family:var(--display);color:#c6a552;font-weight:400;margin:18px 0 8px;text-transform:none;text-align:left;font-size:clamp(20px,4.5vw,28px)}.chapter p{margin:0 0 12px;max-width:none}.chapter a{color:#dcc483}
.reply{padding:10px 14px;border-inline-start:3px solid #8b6d24;background:rgba(42,1,5,.45);margin-top:6px}.reply b{font-family:var(--display);font-weight:400;color:#c6a552;display:block;font-size:14px;letter-spacing:.08em}
.err{min-height:1.2em}.wallet{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.wallet div{padding:12px;border:1px solid rgba(198,165,82,.45);border-radius:6px;text-align:center}.wallet b{display:block;font-family:var(--display);font-weight:400;font-size:24px;color:#c6a552}
body[data-room=receptie] .scene{background:linear-gradient(115deg,#2a0a38,#53186e 45%,#2f0c40)}body[data-room=receptie] .choice,body[data-room=receptie] .intro{background:rgba(40,10,55,.55)}

.vier{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(198,165,82,.55);border:1px solid rgba(198,165,82,.55);border-radius:6px;overflow:hidden;margin:6px 0}
.vier div{background:#3a0f4c;padding:22px 12px;font-family:var(--display);font-size:clamp(17px,3vw,21px);line-height:1.3;color:#d4b766;text-align:center;display:flex;align-items:center;justify-content:center}
.prijs{font-family:var(--display);font-size:clamp(26px,5vw,34px);text-align:center;margin:6px auto 2px;max-width:none}
.center p{margin-inline:auto;text-align:center}.center .back{align-self:center}.center h2,.center .speaker{text-align:center}.center .primary{text-align:center}
body[data-room=receptie] .lead{color:#d4b766;background:none;-webkit-text-fill-color:#d4b766}
html:has(body[data-room=receptie]){background:#2a0a38}body[data-room=receptie]{background-color:#2a0a38}
.vier small{display:block;font-family:var(--accent);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:6px;opacity:.85}
.room img[alt^="Kaart"],.photo[alt="Het Kingdom"]{filter:saturate(.68) contrast(.9) brightness(1.05) sepia(.08)}
.rij{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}.kaart{flex:0 0 240px;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;scroll-snap-align:start;background:rgba(30,1,5,.4)}.kaart img{width:100%;aspect-ratio:16/9;object-fit:cover}.kaart span{padding:10px;font-size:15px;line-height:1.3}.beeld{aspect-ratio:16/9;width:100%}.beeld iframe{width:100%;height:100%;border:0}
.primary,.primary:hover{color:#fff!important}.primary{text-shadow:none}
.vier{grid-template-columns:repeat(3,1fr)}@media(max-width:560px){.vier{grid-template-columns:1fr 1fr}}

.choice.on{border-color:var(--gold-2);background:linear-gradient(170deg,rgba(215,21,43,.6),rgba(110,10,22,.7))}
.stap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.stap .btn{justify-content:center;min-width:48px}.stap b{font-family:var(--display);font-weight:400;font-size:28px;min-width:2ch;text-align:center}
.huis{display:flex;flex-direction:column;gap:14px;padding:22px 20px;border:1px solid rgba(212,175,55,.6);border-radius:8px;background:linear-gradient(170deg,rgba(215,21,43,.28),rgba(79,6,16,.5))}.huis h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,8vw,42px);margin:0;line-height:1.1}
.pw{position:relative;display:block}.pw input{width:100%;padding-right:52px;box-sizing:border-box}.oog{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:transparent;border:0;padding:8px;color:var(--gold-3);justify-content:center}.oog:hover{background:transparent;color:var(--gold-5)}.oog.open .dicht{display:none}
.deuren{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.door{position:relative;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;gap:0;min-width:0}
.door img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;max-width:100%}
.door-crown{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;font-family:var(--display);font-size:24px;text-align:center;padding:12px;background:radial-gradient(circle at 50% 40%,rgba(212,175,55,.18),rgba(30,1,5,.4))}
.door-txt{display:flex;flex-direction:column;gap:2px;padding:12px 14px}.door-txt b{font-family:var(--display);font-weight:400;font-size:20px}.door-txt small{color:var(--pearl);font-size:15px}
.door .badge{position:absolute;top:10px;right:10px;background:rgba(42,1,5,.82)}
.plekken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:10px}
.plek{flex-direction:column;align-items:stretch;padding:0;overflow:hidden;gap:0;min-width:0}.plek img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.plek span{display:flex;flex-direction:column;padding:10px 12px}.plek b{font-family:var(--display);font-weight:400;font-size:18px}.plek small{color:var(--pearl);font-size:14px}
.wallet.klein{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.bib{display:flex;flex-direction:column;border:1px solid rgba(212,175,55,.6);border-radius:8px;overflow:hidden;background:linear-gradient(170deg,rgba(215,21,43,.28),rgba(79,6,16,.5))}.bib img{display:block;width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover}.bib-txt{display:flex;flex-direction:column;gap:10px;padding:16px}.bib-txt h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,7vw,36px)}
.portret{display:block;width:100%;aspect-ratio:1;overflow:hidden;background:#2a0105}.portret img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(1) sepia(.35) contrast(1.05) brightness(1.02)}
.door.aca .portret{border-bottom:2px solid #8b6d24}.door.aca .door-txt{gap:4px}
.aca-hoofd{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.portret.groot{width:132px;flex:0 0 132px;border-radius:50%;border:3px solid #a8843f}
.pin{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;min-height:44px;width:auto;border-radius:10px;background:rgba(30,18,6,.82);border:1px solid rgba(198,165,82,.75);font-family:var(--display);font-size:clamp(12px,3.4vw,17px);line-height:1.1;letter-spacing:.04em}.pin small{font-family:var(--accent);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#2a1608;background:linear-gradient(180deg,#e9d69c,#c7a650);padding:1px 8px;border-radius:4px}.pin:hover{background:rgba(30,18,6,.92)}
.logo-vak{background:#f7f2e8;border:1px solid rgba(198,165,82,.6);border-radius:8px;padding:10px;display:flex;justify-content:center}.logo-vak img{width:min(100%,320px);height:auto}
.boek{display:grid;grid-template-columns:1fr;gap:14px}.boek .tweede{display:none}
@media (min-width:900px){.boek{grid-template-columns:1fr 1fr}.boek .tweede{display:block}}
.blad{display:flex;flex-direction:column;gap:12px;background:#f6eedb;background-image:radial-gradient(circle at 20% 10%,rgba(255,255,255,.55),transparent 60%),linear-gradient(180deg,#f8f1df,#efe3c6);border:1px solid #c6a552;border-radius:4px 10px 10px 4px;box-shadow:inset 8px 0 14px -10px rgba(90,60,10,.45);padding:22px 20px;color:#4a3a10;min-height:420px}
.blad-kop{font-family:var(--display);font-size:19px;color:#8b6d24;text-transform:capitalize;border-bottom:1px solid #d9c99b;padding-bottom:8px}
.aanhef{font-style:italic;color:#6b5418;margin:0;line-height:1.6}
.lijnen{background:transparent;border:0;border-radius:0;color:#3f300c;font-size:18px;line-height:32px;background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(139,109,36,.35) 31px 32px);padding:0 4px;min-height:320px;resize:vertical}
.lijnen:focus-visible{outline:1px solid #c6a552}
.schrift{white-space:pre-wrap;font-size:18px;line-height:32px;color:#3f300c;background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(139,109,36,.3) 31px 32px)}
.stem{display:flex;flex-direction:column;gap:6px;border-left:3px solid #c6a552;padding:6px 12px;font-style:italic;color:#5a4512}.stem b{font-style:normal;font-family:var(--display);font-weight:400;color:#8b6d24}
.body>.stem{color:var(--ivory);border-color:var(--gold-2)}.body>.stem b{color:var(--gold-2)}
.blad .btn{align-self:flex-start;color:#6b5418;border-color:#c6a552;background:transparent}.blad .btn:hover{background:rgba(198,165,82,.15)}
.klein{flex-direction:row!important;gap:8px;font-size:14px;color:#6b5418;align-items:center}.klein input{width:auto}
.blader{display:flex;justify-content:space-between;align-items:center;gap:10px}.blader .btn{width:auto}.blader .btn[disabled]{opacity:.35;cursor:default}
.bord{position:absolute;display:flex;align-items:center;justify-content:center;background:#2a1a08;border:1px solid #a6862f;color:#e9d69c;font-family:var(--accent);font-size:clamp(7px,1.1vw,12px);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;border-radius:2px}
/* ---------- Spelvorm (KH 8 nov 2026): spelbalk, personages die spreken, levelpad, zegels ---------- */
.hud{position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-block:8px;padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px));margin-inline:-4px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,rgba(42,4,10,.96),rgba(30,1,5,.9));border:1px solid rgba(198,165,82,.55);border-top:0;box-shadow:0 8px 24px rgba(20,0,4,.5)}
.hud-logo{display:flex;align-items:center;gap:10px}.hud-logo img{width:36px;height:36px;border-radius:50%}
.hud-me{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:16px}
.hud-tel{display:flex;gap:14px;font-family:var(--display);font-size:16px;color:var(--ivory)}.hud-tel span{display:flex;align-items:center;gap:5px}
.ic{display:inline-block;width:18px;height:18px;background:linear-gradient(160deg,#f3e6c2,#c6a552 40%,#8b6d24);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;vertical-align:-3px}
.ic.seed{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 7 5 11 5 14a7 7 0 0 0 14 0c0-3-2-7-7-12z'/%3E%3C/svg%3E")}
.ic.pen{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2c-6 1-11 6-13 12l-2 6 1 1 2-2 2-1c6-2 10-8 10-16zM4 22h7v-1.5H4z'/%3E%3C/svg%3E")}
.ic.kroon,.kroon{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7l5 4 5-7 5 7 5-4-2 12H4zM4 20h16v2H4z'/%3E%3C/svg%3E")}
i.kroon{display:inline-block;width:20px;height:20px;margin-inline-end:6px;background:linear-gradient(160deg,#f3e6c2,#c6a552 40%,#8b6d24);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;vertical-align:-3px}
.ic.groot{width:72px;height:72px}
/* Een personage spreekt */
.dlg{position:relative}.dlg-beeld{display:block;width:100%;height:auto;max-height:62vh;object-fit:cover;object-position:top}
.dlg-box{position:relative;margin:-56px 14px 16px;padding:16px 18px 18px;border-radius:12px;background:linear-gradient(180deg,rgba(40,3,9,.94),rgba(24,1,5,.96));border:1px solid #c6a552;box-shadow:0 0 0 3px rgba(139,109,36,.35),0 14px 30px rgba(10,0,2,.6);display:flex;flex-direction:column;gap:10px;cursor:pointer}
.dlg-who{font-family:var(--accent);font-size:14px;letter-spacing:.22em;text-transform:uppercase}
.dlg-text{margin:0;font-size:clamp(18px,4.4vw,22px);line-height:1.5;min-height:3em}
.dlg-opts{display:grid;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;pointer-events:none}.dlg-box.af .dlg-opts{opacity:1;transform:none;pointer-events:auto}
.dlg-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:11px 14px;border-radius:8px;border:1px solid rgba(198,165,82,.6);background:rgba(60,8,16,.55);color:var(--ivory);font-family:var(--display);font-size:18px;cursor:pointer}
.dlg-opt::before{content:"";flex:none;width:10px;height:10px;transform:rotate(45deg);background:linear-gradient(160deg,#f3e6c2,#c6a552 45%,#8b6d24)}
.dlg-opt small{display:block;font-family:var(--body);font-size:15px;color:var(--pearl)}
.dlg-opt:hover,.dlg-opt:focus-visible{border-color:#e6d091;background:rgba(110,16,30,.6);outline:none}
.dlg+.body{padding-top:4px}
.quest{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:10px;border:1px solid rgba(198,165,82,.6);background:rgba(30,1,5,.45)}
.quest p{margin:0}
/* Het levelpad */
.pad{position:relative;width:100%;margin-block:6px}
.pad svg{position:absolute;inset:0;width:100%;height:100%}
.pad polyline{fill:none;stroke:#8b6d24;stroke-width:3;stroke-dasharray:2 8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pad-ban{position:absolute;left:50%;transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 18px;min-width:min(260px,80%);text-align:center;border-radius:8px;background:linear-gradient(180deg,#3b050d,#24020a);border:1px solid #c6a552;box-shadow:0 6px 16px rgba(10,0,2,.5)}
.pad-ban b{font-family:var(--display);font-weight:400;font-size:20px}.pad-ban small{color:var(--pearl);font-size:14px}.pad-ban .speaker{font-size:12px}
.node{position:absolute;z-index:1;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:130px;padding:0;border:0;background:none;color:var(--ivory);cursor:pointer}
.node .m{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-family:var(--display);font-size:22px;color:#fff;background:radial-gradient(circle at 35% 30%,#e9d69c,#c7a650 35%,#8b6d24 75%,#5e470f);border:2px solid #f3e6c2;box-shadow:0 4px 10px rgba(10,0,2,.6)}
.node small{font-size:13px;line-height:1.25;text-align:center;color:var(--pearl);max-width:130px}.node small em{display:block;font-style:normal;color:var(--gold-2)}
.node.dicht{cursor:default}.node.dicht .m{background:radial-gradient(circle at 35% 30%,#5a4a3a,#3a2a20 70%);border-color:#6b5a3a;box-shadow:none}.node.dicht small{opacity:.6}
.node.klaar .m{box-shadow:0 0 0 3px rgba(198,165,82,.35),0 4px 10px rgba(10,0,2,.6)}
.node.open:not(.klaar) .m{background:radial-gradient(circle at 35% 30%,#7a1020,#4a040d 70%);color:#e6d091;border-color:#c6a552}
.node.hier .m{animation:roep 1.8s ease-in-out infinite}
@keyframes roep{0%,100%{box-shadow:0 0 0 0 rgba(230,208,145,.0)}50%{box-shadow:0 0 0 8px rgba(230,208,145,.28),0 0 26px rgba(230,208,145,.55)}}
.hier-pijl{position:absolute;top:-24px;white-space:nowrap;font-family:var(--accent);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#e6d091}
.slot{display:block;width:18px;height:18px;background:#8a7a5a;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 0 1 12 0v2h1v12H5V10zm2 0h8V8a4 4 0 0 0-8 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 0 1 12 0v2h1v12H5V10zm2 0h8V8a4 4 0 0 0-8 0z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.node.hier .m{animation:none}.dlg-opts{transition:none}}
/* Opdrachten, teller en zegel */
.opdracht{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:10px;border:1px solid #c6a552;background:rgba(30,1,5,.5)}
.opdracht h3{margin:0;font-family:var(--display);font-weight:400;font-size:21px}
.teller{display:flex;align-items:baseline;gap:10px}.teller b{font-family:var(--display);font-weight:400;font-size:56px;line-height:1;color:#e6d091}
.balk{display:block;height:6px;margin-top:6px;border-radius:3px;background:rgba(198,165,82,.2);overflow:hidden}.balk.groot{height:10px}.balk span{display:block;height:100%;background:linear-gradient(90deg,#8b6d24,#e6d091)}
.slip summary{cursor:pointer;color:var(--pearl);font-size:15px}
.zegel-laag{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:rgba(14,0,3,.55);animation:in .25s ease-out}.zegel-laag.weg{opacity:0;transition:opacity .35s}
.zegel{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:340px;padding:26px 24px;text-align:center;border-radius:14px;background:linear-gradient(180deg,#3b050d,#1e0105);border:2px solid #c6a552;box-shadow:0 0 0 4px rgba(139,109,36,.4),0 20px 50px rgba(0,0,0,.6);animation:stempel .55s cubic-bezier(.2,1.4,.4,1)}
.zegel b{font-family:var(--display);font-weight:400;font-size:24px}.zegel small{color:var(--gold-2);font-family:var(--display);font-size:16px}
.zegel-stempel{display:block;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9d69c,#c7a650 35%,#8b6d24 75%,#5e470f);box-shadow:inset 0 0 0 5px rgba(94,71,15,.6),0 0 0 3px #c6a552}
@keyframes stempel{from{transform:scale(1.6) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.zegel,.zegel-laag{animation:none}}
.node:disabled{opacity:1}
.dlg-opt>span{flex:1;text-align:start}
.node small{padding:1px 8px;border-radius:6px;background:rgba(30,1,5,.88)}
.hier-pijl{top:14px;padding:2px 8px;border-radius:6px;background:rgba(30,1,5,.9);border:1px solid rgba(230,208,145,.6)}.hier-pijl.rechts{left:calc(50% + 34px)}.hier-pijl.links{right:calc(50% + 34px)}
/* De kaart: op een smal scherm sleep je over de wereld, zoals in een game. */
.kaart-pan{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.kaart-pan::-webkit-scrollbar{display:none}
@media (max-width:700px){.kaart-pan .room{width:210%;max-width:none}}
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tegel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px;padding:12px 8px;text-align:center;border-radius:10px;border:1px solid rgba(198,165,82,.65);background:radial-gradient(circle at 50% 0%,rgba(198,165,82,.18),rgba(30,1,5,.55) 70%);color:var(--ivory);font-family:var(--display);font-size:17px;line-height:1.25;cursor:pointer}
.tegel small{font-family:var(--accent);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
.tegel.dicht{opacity:.7}.tegel.dicht small{color:var(--pearl)}
.tegel:hover,.tegel:focus-visible{border-color:#e6d091;outline:none}
@media (max-width:700px){.dlg-beeld{height:min(58vh,520px);max-height:none;object-fit:cover}}
.oordeel{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:10px;border:1px solid #c6a552;background:rgba(30,1,5,.55)}
.oordeel h3{margin:0;font-family:var(--display);font-weight:400;font-size:21px}.oordeel p,.oordeel ul{margin:0}.oordeel ul{padding-inline-start:20px}
.oordeel.gemasterd,.oordeel.telt{border-color:#e6d091;box-shadow:0 0 0 2px rgba(198,165,82,.3)}
.oordeel.nog_niet,.oordeel.telt_niet,.oordeel.terugval{border-color:rgba(198,165,82,.5)}
/* Personage zonder groot beeld: het venster staat bovenaan, met een rond portret. */
.dlg.los .dlg-box{margin:16px 14px}
.dlg-box.met-portret{padding-top:18px}
.dlg-portret{float:left;width:64px;height:64px;margin:0 12px 4px 0;border-radius:50%;object-fit:cover;border:2px solid #c6a552;box-shadow:0 0 0 3px rgba(139,109,36,.35)}
.met-portret .dlg-who{display:block;padding-top:8px}.met-portret .dlg-text{clear:none}.met-portret .dlg-opts{clear:both}
/* Cijfers altijd leesbaar: Marcellus maakt van 111 iets dat op III lijkt. */
.price,.hud-tel,.wallet b,.teller b,.node .m,.bill .line span:last-child{font-family:var(--body);font-variant-numeric:lining-nums tabular-nums}
.bill .line{gap:12px}.bill .line>span:first-child{flex:1 1 auto;min-width:0}.bill .line>span:last-child{flex:0 1 46%;text-align:end}
html{background:#2a0309}
.bill .line>span:last-child{white-space:normal}
/* Keuzes staan meteen klaar; de tekst verschijnt als in een game, maar je hoeft niet te wachten. */
.dlg-opts{opacity:1;transform:none;pointer-events:auto}
.dlg-opt{box-sizing:border-box;text-decoration:none;color:var(--ivory)}a.dlg-opt:visited{color:var(--ivory)}
.blader{flex-wrap:nowrap}.blader .btn{white-space:nowrap;padding-inline:12px;font-size:15px}.blader>span{white-space:nowrap;font-size:15px}
/* De Academies: hoogwaardig metallic blauw, zoals de receptie paars is (KH 9 nov 2026). Goud blijft het accent. */
body[data-room=academy]{background:linear-gradient(115deg,#06142e 0%,#0d2a5c 30%,#1b4a9a 42%,#0b2350 62%,#173f86 84%,#06142e 100%);background-attachment:fixed;background-color:#081a3c}
html:has(body[data-room=academy]){background:#081a3c}
body[data-room=academy] .scene{background:linear-gradient(115deg,#0a1f45,#163e80 45%,#0b2250)}
body[data-room=academy] .choice,body[data-room=academy] .intro,body[data-room=academy] .dlg-box,body[data-room=academy] .hud{background:rgba(8,26,60,.7)}
body[data-room=academy] .dlg-opt{background:rgba(14,40,90,.55)}
/* Altijd de volledige foto, nooit een uitsnede (KH 9 nov 2026). Het dialoogvenster staat onder het beeld, niet erover. */
.dlg-beeld,.dlg-beeld[style]{height:auto!important;max-height:none!important;object-fit:fill!important}
@media (max-width:700px){.dlg-beeld{height:auto!important}.kaart-pan .room{width:100%!important}}
.dlg .dlg-box{margin-top:12px}
/* Het hele tafereel past op één scherm: de volledige foto, kleiner waar nodig, en het venster eronder. */
.dlg-beeld,.dlg-beeld[style]{width:auto!important;max-width:100%!important;max-height:calc(100vh - 380px)!important;max-height:calc(100dvh - 380px)!important;margin-inline:auto;min-height:0}
.dlg{text-align:center}.dlg .dlg-box{text-align:start}
.room{max-width:min(100%,calc((100vh - 400px) * 1.6));margin-inline:auto}

.dlg-opt[data-dicht]{opacity:.62;cursor:default;filter:saturate(.7)}.dlg-opt[data-dicht]:hover{transform:none}

.vision-access{font-size:13px;padding:7px 10px;border-radius:4px;border:1px solid var(--gold-2);background:rgba(42,1,5,.45);color:var(--gold-1);white-space:nowrap;align-self:center}