:root{--paper:#efdbad;--gold:#dcac57;--ink:#101d20;--muted:#9daead;--danger:#d9534f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:#0c171b;color:var(--paper);font:15px Georgia,serif;overscroll-behavior-y:contain}
button,a,#stage{touch-action:manipulation;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:1px solid #68777355;background:#213335;border-radius:5px;padding:9px 13px;transition:transform .12s,background .15s,border-color .15s}
button:hover,button:focus-visible{background:#3c4b43;border-color:var(--gold);outline:2px solid transparent}
button:disabled{opacity:.4;cursor:default}
header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #af945c44;gap:16px;background:linear-gradient(180deg,#162b30,#0f1e22)}
.brand{font-size:10px;letter-spacing:3px;text-decoration:none;color:var(--gold)}
.brand b{display:block;font-size:14px;letter-spacing:1px;margin-top:4px}
nav{display:flex;gap:6px}
nav button{background:transparent;font:12px system-ui}
kbd{color:#92aaa8;font-size:9px;margin-left:5px}
#chapterLabel{font:11px system-ui;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}
#stage{position:relative;height:min(64vw,610px);min-height:380px;max-height:68vh;overflow:hidden;background:#254d56}
#backdrop{position:absolute;inset:0;background-image:url('assets/world-atlas.png');background-size:200% 200%;transition:filter .5s,background-position .35s}
#atmosphere{position:absolute;inset:0;background:linear-gradient(180deg,#00171a55,transparent 35%,transparent 65%,#051b21bb);pointer-events:none}
#atmosphere:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 20%,#ffffbb22,transparent 45%);animation:breathe 9s infinite alternate}
.atmoSvg{width:100%;height:100%;display:block}
.atmoParticle{animation:floatUp 6s ease-in-out infinite alternate}
.roomTitle{position:absolute;left:28px;top:20px;text-shadow:0 2px 6px #000;pointer-events:none;z-index:2}
.roomTitle span{font:10px system-ui;letter-spacing:3px;text-transform:uppercase;color:#ffd78b}
.roomTitle h1{font-size:27px;font-weight:normal;margin:6px 0}
#complicationBanner{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#5e1919eb;border:2px solid #ff9c6b;color:#ffe6d5;padding:7px 16px;border-radius:20px;font:12px system-ui;letter-spacing:.5px;z-index:8;box-shadow:0 6px 20px #000a;animation:pulseWarn 2s infinite alternate}
#decor{position:absolute;inset:0;pointer-events:none}
.roomMarker{position:absolute;right:26px;top:24px;width:54px;height:54px;opacity:.92;filter:drop-shadow(0 4px 6px #000a)}
#hotspots{position:absolute;inset:0}
.hotspot{position:absolute;transform:translate(-50%,-50%);background:transparent;border:0;min-width:68px;min-height:74px;padding:0;filter:drop-shadow(0 6px 8px #000c);transition:transform .18s,filter .18s}
.hotspot:hover{background:transparent;border:0;transform:translate(-50%,-53%) scale(1.07);filter:drop-shadow(0 0 12px #ffe49a)}
.hotspot.npcHotspot{transform:translate(-50%,-100%);transform-origin:50% 100%;z-index:3}
.hotspot.npcHotspot:hover{transform:translate(-50%,-100%) scale(1.04);filter:drop-shadow(0 0 12px #ffe49a)}
.hotspot.npcHotspot::before{content:"";position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:116px;height:20px;background:radial-gradient(ellipse,#000c 0%,#0006 55%,transparent 76%);pointer-events:none;z-index:-1}
.hotspot.exitHotspot{transform:translate(-50%,-100%);transform-origin:50% 100%;z-index:2;min-width:64px;min-height:86px}
.hotspot.exitHotspot:hover{transform:translate(-50%,-100%) scale(1.08);filter:drop-shadow(0 0 15px #ffd86b)}
.hotspot.exitHotspot .svgExitPortal{width:64px;height:86px;display:block;margin:0 auto;transition:transform .2s}
.hotspot.exitHotspot .exitLabel{opacity:.9;background:linear-gradient(180deg,#1d363bf2,#0e1f23f8);border-color:#e6b85ccc;color:#ffe6a3;font-weight:600;padding:4px 8px;box-shadow:0 3px 10px #000b}
.hotspot.exitHotspot:hover .exitLabel{opacity:1;border-color:#fff0b3;background:#294950}
.walkTargetRipple{position:absolute;width:36px;height:14px;transform:translate(-50%,-50%);border:2px solid #ffe49a;border-radius:50%;box-shadow:0 0 12px #ffd86b;pointer-events:none;animation:walkRipple .52s ease-out forwards}
@keyframes walkRipple{0%{transform:translate(-50%,-50%) scale(.35);opacity:1}100%{transform:translate(-50%,-50%) scale(1.55);opacity:0}}
.hotspot .svgProp{width:72px;height:72px;display:block;margin:0 auto}
.hotspot .label{font:11px system-ui;white-space:nowrap;border:1px solid #cfa86299;border-radius:4px;background:#132629f2;padding:5px 9px;display:block;opacity:0;transition:opacity .2s;margin-top:2px}
.hotspot:hover .label,.hotspot:focus .label,.revealed .label{opacity:1}
.hotspot.solved{opacity:.76}
.hotspot.complicated{filter:drop-shadow(0 0 10px #ff5a4f)}
.paintedNPC{display:block;width:157px;height:210px;background:url('assets/characters.png') 0 100%/400% 100% no-repeat;transform-origin:50% 100%;animation:standBreathe 3.8s ease-in-out infinite}
.paintedExtraNPC{display:block;width:156px;height:196px;border:0;border-radius:0;box-shadow:none;background-repeat:no-repeat;transform-origin:50% 100%;animation:standBreathe 3.8s ease-in-out infinite}
.paintedExtraNPC.CompanionNPC{width:112px;height:142px;border-radius:0}
.paintedExtraNPC.ghostNPC{animation:bob 3.5s ease-in-out infinite}
#verbCoin{position:absolute;z-index:12;width:168px;height:168px;transform:translate(-50%,-50%);pointer-events:auto;animation:coinPop .16s ease-out}
.verbCoinSvg{width:100%;height:100%;filter:drop-shadow(0 8px 18px #000c)}
.coinBtn{position:absolute;width:46px;height:46px;border-radius:50%;background:#182e33f5;border:2px solid var(--gold);color:#ffe8a3;font:18px system-ui;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 4px 10px #0009}
.coinBtn:hover{background:var(--gold);color:#142428;transform:scale(1.12)}
.coinBtn small{position:absolute;bottom:-17px;font:9px system-ui;background:#0d1d21ee;color:var(--paper);padding:1px 5px;border-radius:3px;white-space:nowrap;border:1px solid #cfa86255}
.coinLook{left:6px;top:42px}
.coinTalk{left:61px;top:2px}
.coinUse{right:6px;top:42px}
.coinClose{left:67px;bottom:8px;width:34px;height:34px;font-size:13px;opacity:.85}
#hero{position:absolute;width:147px;height:220px;left:43%;bottom:14%;pointer-events:none;transition:left .55s,transform .25s;filter:drop-shadow(0 8px 6px #000a);transform-origin:50% 100%;animation:standBreathe 3.2s ease-in-out infinite;z-index:4}
#hero::before{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:106px;height:18px;background:radial-gradient(ellipse,#000c 0%,#0006 55%,transparent 76%);pointer-events:none;z-index:-1}
#hero.walking{animation:stride .32s ease-in-out infinite alternate}
#hero.flipped img{transform:scaleX(-1)}
#hero img{width:100%;height:100%;object-fit:contain;transition:transform .2s}
#caption{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:min(780px,92%);display:flex;align-items:center;gap:14px;background:#0a1b20f2;border:1px solid #ad904977;padding:10px 16px;border-radius:8px;pointer-events:none;box-shadow:0 8px 30px #0008;z-index:6}
#portrait{width:74px;height:74px;flex-shrink:0;border:2px solid var(--gold);border-radius:10px;overflow:hidden;background:#162c30;box-shadow:inset 0 0 12px #0009,0 4px 12px #0008}
.portraitSvg{width:100%;height:100%;display:block}
.talking .portraitMouth{animation:talkMouth .26s ease-in-out infinite alternate;transform-origin:center}
.captionText{flex:1;text-align:left}
#speaker{font:bold 10px system-ui;letter-spacing:2px;color:var(--gold);margin-bottom:4px}
#english{font-size:17px;line-height:1.32}
#dutch{font:13px system-ui;color:#b9ccca;margin-top:5px;line-height:1.38}
#choices{position:absolute;right:20px;bottom:112px;max-width:480px;max-height:56%;overflow-y:auto;display:flex;flex-direction:column;gap:6px;z-index:10}
#choices button{background:#102b30f7;text-align:left;border-color:#ae9158aa;padding:8px 12px;box-shadow:0 4px 14px #0007}
#choices button:hover{background:#1f434a;border-color:#ffd78b}
#choices button.badChoiceBtn{border-color:#d96b43aa;background:#2b1c1df5}
#choices button.badChoiceBtn:hover{background:#472527;border-color:#ff8b6b}
#choices button.recoverChoiceBtn{border-color:#52d1b8;background:#143836f5}
#choices button.duelChoiceBtn{border-color:#f2c14e;background:#2e2615f5}
#choices button small{display:block;color:#a8bfbb;font:11.5px system-ui;margin-top:3px}
#revealButton{position:absolute;right:18px;top:88px;font-size:23px;border-radius:50%;width:44px;height:44px;padding:0;background:#122b32cc;z-index:5}
#roomDescription{position:absolute;bottom:116px;left:22px;font:11px system-ui;color:#f1e5c9;max-width:265px;text-shadow:0 2px 5px black;pointer-events:none;background:#0a1b2099;padding:6px 10px;border-radius:5px}
#controls{padding:12px 28px;background:#14262a;border-top:2px solid #9c7f48}
.verbs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.verbs button{font:12px system-ui;padding:7px 13px}
.verbs .active{background:var(--gold);color:#15272b;font-weight:600}
.inventoryHeader{display:flex;gap:20px;align-items:center;font:10px system-ui;letter-spacing:2px;color:var(--gold)}
#selection{letter-spacing:0;color:#adc0be}
#clearItem{margin-left:auto;font:10px system-ui;padding:3px 8px}
#inventory{display:flex;gap:7px;min-height:68px;overflow-x:auto;padding:8px 0}
.item{min-width:88px;background:#1c3235;font:10.5px system-ui;padding:6px 9px;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:7px}
.item .svgProp{width:46px;height:46px;display:block}
.item.selected{border:2px solid var(--gold);background:#455344}
.emptyBag{font:13px system-ui;color:#7c9695;padding:15px}
#exits{display:flex;flex-wrap:wrap;gap:6px;padding-top:6px;border-top:1px solid #54645c55}
#exits button{font:12px system-ui;background:transparent;border:0;padding:5px 10px;color:#efcd85}
#exits button:hover{background:#243d42;border-radius:4px}
footer{display:flex;justify-content:space-between;padding:11px 28px;gap:20px;font:11px system-ui;color:#96aaa7}
#objective{color:#d4bd8b}
dialog{background:#142b30;color:var(--paper);border:1px solid #ae8d51;border-radius:8px;width:min(800px,94vw);max-height:88vh;padding:30px;box-shadow:0 25px 100px #0009}
dialog::backdrop{background:#001216cc;backdrop-filter:blur(5px)}
#closeModal{position:sticky;float:right;top:0;font-size:23px;padding:0 10px;z-index:2}
dialog h2{font-size:30px;font-weight:normal;margin-top:8px}
dialog p,dialog li{font:14px/1.7 system-ui;color:#c8d1c4}
.mapGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mapGrid button{text-align:left;min-height:54px}
.mapGrid small{display:block;color:#9db5b2;font:10px system-ui;margin-top:5px}
.chapterTabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:15px}
.chapterTabs .active{background:#8b7145}
.journalEntry{border-bottom:1px solid #64807844;padding:12px 0}
.journalEntry span{color:var(--gold);font:10px system-ui}
.settings{display:flex;flex-direction:column;gap:18px}
.settings label{font:14px system-ui}
.puzzleButtons{display:flex;gap:12px;flex-wrap:wrap}
.puzzleButtons button{min-height:70px;font-size:20px}
.puzzleSteps{padding:25px 5px;font-size:25px;color:var(--gold)}
.duelArena{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.duelQuote{background:#0c1c20;border-left:4px solid var(--gold);padding:12px 16px;border-radius:4px}
#intro{position:fixed;inset:0;z-index:20;background:#14262a url('assets/world-atlas.png') 100% 0 / 200% 200%;overflow-x:hidden;overflow-y:auto}
.introShade{position:absolute;inset:0;background:linear-gradient(95deg,#071e23f2 0%,#0b2429cc 42%,#07161a44 100%);pointer-events:none}
#introLighthouse{position:absolute;left:71.2%;top:14.2%;width:0;height:0;pointer-events:none;z-index:1}
.lighthouseGlow{position:absolute;left:-38px;top:-38px;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle,#fffef0 0%,#ffe07d 32%,#ffae2b55 66%,transparent 100%);box-shadow:0 0 50px 20px #ffd86b88;animation:beaconPulse 2.6s ease-in-out infinite alternate}
.lighthouseBeam{position:absolute;left:0;top:-130px;width:1100px;height:260px;transform-origin:0 50%;background:linear-gradient(90deg,#fff6c2aa 0%,#ffd86b48 28%,#ffd86b14 68%,transparent 100%);clip-path:polygon(0 47%,100% 0,100% 100%,0 53%);filter:blur(5px);animation:sweepBeam 11s ease-in-out infinite alternate;mix-blend-mode:screen}
.lighthouseBeam.beamSecondary{top:-90px;width:850px;height:180px;opacity:.6;animation-duration:14s;animation-direction:alternate-reverse}
#intro.flareBeam .lighthouseGlow{transform:scale(1.65);box-shadow:0 0 95px 40px #ffe88a}
#intro.flareBeam .lighthouseBeam{opacity:1;filter:blur(3px) brightness(1.5)}
.introLighthouseSpot{position:absolute;left:71.2%;top:14.2%;transform:translate(-50%,-50%);width:96px;height:110px;background:transparent;border:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;z-index:4;cursor:pointer}
.introLighthouseSpot:hover,.introLighthouseSpot.speakingActor{background:transparent;border:0;transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 0 14px #ffe49a)}
.introLayout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(320px,1.02fr) minmax(340px,.98fr);align-items:end;gap:28px;min-height:100vh;padding:4vh 5vw 5vh;max-width:1440px;margin:0 auto}
.introContent{position:relative;max-width:660px;align-self:center}
.introTopRow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.introAudioPill{font:bold 11.5px system-ui;background:#1d3b40ee;color:#ffe49a;border:1px solid var(--gold);border-radius:20px;padding:6px 14px;box-shadow:0 4px 14px #0008;animation:pulseWarn 2.6s infinite alternate}
.introAudioPill.playing{background:#294f3e;border-color:#6be3b5;color:#d8fff0;animation:none}
.eyebrow{color:#e0b265;letter-spacing:4px;font:10px system-ui}
.byline{font-style:italic;color:#b8c8bd;margin-top:16px}
.introContent h1{font-size:clamp(44px,6vw,84px);line-height:.93;font-weight:normal;margin:18px 0;color:#f1dfb3;text-shadow:0 6px 10px #0006}
.introContent h1 em{color:#e6b55b}
.introContent p{font-size:16.5px;line-height:1.58}
.introCtaRow{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 14px}
.introCtaRow button{background:#d8ad64;color:#13292d;font-weight:bold;font-size:17px;padding:15px 24px;border:0;min-width:240px;box-shadow:0 8px 24px #0009}
.introCtaRow button span{margin-left:28px}
.introCtaRow #continueButton{background:#203f41;color:var(--paper);border:1px solid #c9a96d;min-width:180px}
.introContent small{font:11px/1.65 system-ui;color:#9fb8b4;display:block}
.introStage{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:26vh;background:linear-gradient(180deg,#0a1e23bb,#071519eb);border:1px solid #cfa86266;border-radius:16px;padding:14px 16px;box-shadow:0 20px 60px #000b,inset 0 0 24px #0008;backdrop-filter:blur(2px)}
.introDock{position:relative;height:205px;display:flex;align-items:flex-end;justify-content:space-around;padding:0 8px 14px;border-bottom:4px solid #593a1e;background:linear-gradient(180deg,transparent 65%,#1f140acc 100%);border-radius:10px}
.introDock::after{content:"HAVENKADE VAN EB · KLIK OP EEN PERSONAGE OF DIER";position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);background:#1a2f34;border:1px solid #cfa86288;color:#e6c275;font:bold 9px system-ui;letter-spacing:1.5px;padding:2px 10px;border-radius:10px;white-space:nowrap}
.introActor{background:transparent;border:0;padding:0;display:flex;flex-direction:column;align-items:center;position:relative;transition:transform .2s,filter .2s;filter:drop-shadow(0 8px 10px #000c)}
.introActor:hover,.introActor.speakingActor{background:transparent;border:0;transform:translateY(-5px) scale(1.06);filter:drop-shadow(0 0 14px #ffe49a)}
.introActor::before{content:"";position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:86px;height:14px;background:radial-gradient(ellipse,#000d 0%,transparent 75%);pointer-events:none;z-index:-1}
.introPipActor img{width:118px;height:176px;object-fit:contain;display:block;transform-origin:50% 100%;animation:standBreathe 3.2s ease-in-out infinite}
.introMaraActor .paintedNPC{width:122px;height:164px}
.introGullActor .paintedExtraNPC,.introCrabActor .paintedExtraNPC{width:92px;height:104px;border-radius:14px}
.introActorTag{font:bold 10px system-ui;background:#0e2125f2;color:#ffe6a3;border:1px solid #cfa862aa;border-radius:4px;padding:3px 7px;margin-top:4px;white-space:nowrap}
.introBanterCard{display:flex;align-items:center;gap:12px;background:#09191df5;border:1px solid #cfa86299;border-left:4px solid var(--gold);border-radius:10px;padding:10px 14px;min-height:86px;box-shadow:0 8px 24px #0009}
.introBanterPortrait{width:64px;height:64px;flex-shrink:0;border:2px solid var(--gold);border-radius:8px;overflow:hidden;background:#162c30}
.introBanterSpeaker{font:bold 10px system-ui;letter-spacing:1.8px;color:var(--gold);margin-bottom:3px}
.introBanterEn{font-size:15px;line-height:1.32;color:#fff3d6}
.introBanterNl{font:12.5px/1.36 system-ui;color:#b8cfcd;margin-top:4px}
.introQuickActions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.introQuickActions button{font:11.5px system-ui;background:#173136;border:1px solid #cfa86277;padding:6px 10px;border-radius:6px;color:#f3dfb4}
.introQuickActions button:hover{background:#284c53;border-color:var(--gold)}
.introStamp{position:fixed;right:2vw;bottom:2vh;border:3px double #e0bb6d66;border-radius:50%;width:112px;height:112px;display:flex;flex-direction:column;justify-content:center;text-align:center;transform:rotate(13deg);font:11px/1.5 system-ui;color:#e6bf7baa;letter-spacing:2px;pointer-events:none;z-index:1}
.introStamp small{font-size:7.5px}
@keyframes sweepBeam{0%{transform:rotate(138deg);opacity:.55}50%{transform:rotate(166deg);opacity:.92}100%{transform:rotate(196deg);opacity:.6}}
@keyframes beaconPulse{from{transform:scale(.92);opacity:.8}to{transform:scale(1.12);opacity:1}}
#intro[hidden],button[hidden],#verbCoin[hidden],#complicationBanner[hidden],#inspectOverlay[hidden]{display:none!important}
.roomMarker{pointer-events:auto;cursor:pointer;transition:transform .18s,filter .18s}
.roomMarker:hover{transform:scale(1.14);filter:drop-shadow(0 0 12px #ffe49a)}
#inspectItem{font:11px system-ui;padding:4px 10px;background:#2a4549;border-color:var(--gold);color:#ffe8a3}
#inspectOverlay{position:absolute;inset:0;z-index:15;background:#051115cc;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;animation:fadeIn .16s ease-out}
.inspectCard{width:min(740px,95%);max-height:92%;overflow-y:auto;background:linear-gradient(165deg,#182f34,#0e1e22);border:2px solid var(--gold);border-radius:12px;padding:20px 24px;box-shadow:0 22px 70px #000d,inset 0 0 24px #0008;display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:center;animation:zoomCard .18s cubic-bezier(.2,.9,.3,1.1)}
.inspectCard.inspectBoardCard{background:linear-gradient(165deg,#382414,#22150b);border:3px solid #d9a23b;box-shadow:0 22px 70px #000e,inset 0 0 30px #000a}
.inspectVisualBox{position:relative;width:190px;height:190px;border-radius:12px;background:radial-gradient(circle at 50% 42%,#2e565e,#102226 78%);border:2px solid #cfa862aa;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 22px #000a,0 8px 20px #0008;padding:12px}
.inspectBoardCard .inspectVisualBox{background:radial-gradient(circle at 50% 42%,#634022,#2b1a0c 80%);border-color:#e6b85c}
.inspectVisualBox .svgPropZoomed,.inspectVisualBox .svgProp{width:146px;height:146px;display:block;filter:drop-shadow(0 8px 12px #000b);animation:bob 4s ease-in-out infinite}
.inspectVisualBox .customCharacter{width:136px;height:168px;display:block}
.inspectVisualBox .paintedNPC{transform:scale(.82);transform-origin:center}
.zoomBadge{position:absolute;bottom:7px;right:8px;background:#0c1b1fee;border:1px solid #d9a23b88;color:#ffd966;font:bold 9px system-ui;letter-spacing:1px;padding:2px 6px;border-radius:4px}
.inspectBody{display:flex;flex-direction:column;gap:10px;text-align:left}
.inspectEyebrow{font:bold 10px system-ui;letter-spacing:2.5px;text-transform:uppercase;color:#ffd78b}
.inspectTitle{font-size:26px;font-weight:normal;margin:0;color:#fff2d1;text-shadow:0 2px 6px #000}
.inspectPlaque{background:#102226;border:1px solid #cfa86277;border-left:4px solid var(--gold);border-radius:8px;padding:13px 16px;box-shadow:inset 0 2px 10px #0008}
.inspectBoardCard .inspectPlaque{background:linear-gradient(180deg,#efe0bd,#dec592);color:#1f1308;border:2px solid #8c5a32;border-left:6px solid #734218;box-shadow:inset 0 0 18px #8c5a3244,0 4px 12px #0007}
.inspectEn{font-size:19px;line-height:1.38;margin:0;font-weight:500}
.inspectBoardCard .inspectEn{color:#1b1006;font-family:Georgia,serif;font-weight:bold}
.inspectNl{font:14.5px/1.45 system-ui;color:#c3d6d4;margin:7px 0 0}
.inspectBoardCard .inspectNl{color:#472c14;border-top:1px dashed #8c5a3266;padding-top:6px}
.inspectClueBox{background:#0b181bcc;border:1px dashed #8fa8a466;border-radius:6px;padding:8px 12px;font:12.5px/1.45 system-ui;color:#d6e4e2}
.inspectBoardCard .inspectClueBox{background:#1c1108cc;border-color:#cfa86266;color:#f0dec0}
.inspectClueBox b{color:var(--gold)}
.inspectActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.inspectActions button{font:12.5px system-ui;padding:8px 14px}
.inspectActions .primaryInspectBtn{background:var(--gold);color:#13262a;font-weight:600;border-color:#ffe49a}
.finaleContainer{position:relative;overflow:hidden;text-align:center;padding:8px 4px}
.finaleFireworks{position:absolute;inset:0;pointer-events:none;z-index:0}
.fwBurst{position:absolute;width:12px;height:12px;border-radius:50%;box-shadow:0 -42px 0 2px #ffd86b,30px -30px 0 2px #ff6b6b,42px 0 0 2px #4ecdc4,30px 30px 0 2px #ffe66d,0 42px 0 2px #ff9f43,-30px 30px 0 2px #54a0ff,-42px 0 0 2px #ffd86b,-30px -30px 0 2px #ff6b81;animation:fireworkPop 2.4s ease-out infinite}
.fw1{left:14%;top:12%;animation-delay:0s}
.fw2{right:16%;top:10%;animation-delay:.6s}
.fw3{left:28%;top:22%;animation-delay:1.2s}
.fw4{right:26%;top:20%;animation-delay:1.8s}
.finaleLead{max-width:680px;margin:8px auto 16px;color:#e6f0ee}
.finaleTreasureShowcase{position:relative;z-index:1;display:grid;grid-template-columns:110px 1fr 110px;align-items:center;gap:14px;background:radial-gradient(circle at 50% 50%,#26484f,#0d1f23);border:2px solid var(--gold);border-radius:12px;padding:14px 18px;margin:14px 0;box-shadow:0 12px 34px #000a}
.finaleTreasureArt .svgPropZoomed,.finaleTreasureArt .svgProp{width:96px;height:96px;display:block;margin:0 auto;animation:bob 3.2s ease-in-out infinite}
.finaleTreasureQuote{text-align:left}
.finaleTreasureQuote small{display:block;color:var(--gold);font:11px system-ui;margin-top:6px}
.finaleSectionTitle{font:bold 12px system-ui;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:18px 0 10px}
.finaleCastGrid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin-bottom:16px}
.finaleCastBtn{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px;background:#162e33;border:1px solid #cfa86266;border-radius:9px}
.finaleCastBtn:hover{background:#23464d;border-color:var(--gold);transform:translateY(-3px)}
.finaleCastPortrait{width:56px;height:56px;border-radius:8px;overflow:hidden;border:1.5px solid var(--gold)}
.finaleCastBtn strong{font:bold 11.5px system-ui;color:#fff2d1}
.finaleCastBtn small{font:10px/1.25 system-ui;color:#a9c2bf}
.creditsRollBox{position:relative;height:185px;overflow-y:auto;background:#081518;border:1px solid #cfa86266;border-radius:10px;padding:16px;margin:12px 0;box-shadow:inset 0 0 24px #000d}
.creditsRollContent{animation:creditsScroll 22s linear infinite}
.creditsRollBox:hover .creditsRollContent{animation-play-state:paused}
.creditsRollContent h3{color:var(--gold);letter-spacing:3px;font:bold 13px system-ui;margin:0 0 12px}
.creditsRollContent p{margin:12px 0;font:13px/1.55 system-ui;color:#d6e4e2}
.creditsRollContent b{color:#ffe299}
.creditsFinalQuote{font:italic 16px Georgia,serif!important;color:var(--gold)!important;margin-top:18px!important}
.finaleActions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
@keyframes fireworkPop{0%{transform:scale(.15);opacity:1}70%{transform:scale(1.25);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes creditsScroll{0%{transform:translateY(35%)}100%{transform:translateY(-65%)}}
@keyframes zoomCard{from{transform:scale(.78);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes bob{50%{transform:translateY(-4px) rotate(.5deg)}}
@keyframes standBreathe{50%{transform:scaleY(1.016)}}
@keyframes stride{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-8px) rotate(2deg)}}
@keyframes talkMouth{from{transform:scale(1)}to{transform:scale(1.04) translateY(-1.5px)}}
@keyframes coinPop{from{transform:translate(-50%,-50%) scale(.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes floatUp{from{transform:translateY(4px)}to{transform:translateY(-14px)}}
@keyframes pulseWarn{from{box-shadow:0 0 8px #ff5a4f66}to{box-shadow:0 0 18px #ff9c6bcc}}
@keyframes breathe{to{opacity:.35}}
@media(hover:none),(pointer:coarse){
  kbd{display:none}
  .hotspot .label{opacity:.94;font-size:11px;padding:4px 8px}
  #verbCoin{width:184px;height:184px}
  .coinBtn{width:52px;height:52px;font-size:20px}
  .coinLook{left:6px;top:46px}
  .coinTalk{left:66px;top:2px}
  .coinUse{right:6px;top:46px}
  .coinClose{left:71px;bottom:8px;width:40px;height:40px;font-size:15px}
  .verbs button,#exits button,#choices button,nav button{min-height:42px}
  #Choices,#inventory,.inspectCard{-webkit-overflow-scrolling:touch}
}
@media(min-width:701px) and (max-width:1180px){
  header{height:64px;padding:0 18px;gap:10px}
  nav button{padding:8px 11px;font-size:12.5px}
  #stage{height:min(58vh,540px);min-height:360px}
  #controls{padding:10px 18px}
  #caption{width:94%;padding:10px 14px}
  #choices{right:16px;bottom:108px;max-width:440px}
  #choices button{padding:10px 14px;font-size:14.5px}
  .item{min-width:94px;padding:8px 10px}
  footer{padding:9px 18px}
}
@media(max-width:960px){
  .introLayout{grid-template-columns:1fr;padding:3vh 5vw;gap:20px}
  .introContent{max-width:none}
}
@media(max-width:700px){
  header{height:auto;min-height:68px;padding:10px 12px;flex-wrap:wrap;gap:6px}
  .brand{font-size:8px}.brand b{font-size:10px}#chapterLabel{font-size:8px}
  nav{width:100%;justify-content:space-between}nav button{font-size:11px;padding:6px}kbd{display:none}
  #stage{height:58vh;min-height:350px;max-height:none}
  .roomTitle{left:16px;top:15px}.roomTitle h1{font-size:21px}.roomTitle span{font-size:8px}
  #backdrop{background-size:240% 200%}#controls{padding:10px 12px}
  #caption{width:94%;padding:8px 10px;gap:10px}#portrait{width:54px;height:54px}
  #english{font-size:14px}#dutch{font-size:11.5px}
  #hero{width:103px;height:155px;bottom:18%}.paintedNPC{width:106px;height:143px}.paintedExtraNPC{width:104px;height:132px}
  .hotspot .svgProp{width:54px;height:54px}
  .hotspot{min-width:44px;min-height:55px}.hotspot .label{font-size:9px;max-width:130px;white-space:normal}
  .verbs button{font-size:10px;padding:8px}.inventoryHeader{letter-spacing:1px;font-size:9px;gap:8px}
  #selection{max-width:165px}.item{min-width:68px}
  footer{padding:10px 12px;flex-direction:column;gap:5px}
  #choices{bottom:105px;right:10px;left:10px;max-width:none}#choices button{font-size:13px}
  #roomDescription{display:none}.introStamp{display:none}
  .introContent h1{font-size:52px}.introContent p{font-size:14px}
  .introDock{height:165px}.introPipActor img{width:86px;height:130px}.introMaraActor .paintedNPC{width:90px;height:122px}.introGullActor .paintedExtraNPC,.introCrabActor .paintedExtraNPC{width:68px;height:78px}
  .mapGrid{grid-template-columns:1fr 1fr}dialog{padding:20px}
  .inspectCard{grid-template-columns:1fr;justify-items:center;padding:14px;gap:12px}
  .inspectVisualBox{width:132px;height:132px}.inspectVisualBox .svgPropZoomed{width:104px;height:104px}
  .inspectTitle{font-size:20px}.inspectEn{font-size:15.5px}.inspectNl{font-size:13px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}