:root{color-scheme:dark;--gold:#dfbd7e;--muted:#b3aa97}*{box-sizing:border-box}body{margin:0;background:#171b1c;color:#f3e7cd;font-family:Georgia,serif;min-height:100svh;display:grid;place-items:center;padding:20px}main{width:min(1200px,100%)}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 17px}.eyebrow{font:10px system-ui;letter-spacing:2px;color:var(--gold)}h1{font-size:28px;font-weight:normal;margin:7px 0 0}h1 span{font-size:17px;color:var(--muted)}button{font:12px system-ui;background:#282e2e;border:1px solid #57605a;color:#efdfbd;padding:11px 16px;border-radius:4px;cursor:pointer;min-height:44px}button:hover,button[aria-pressed=true]{border-color:var(--gold);background:#3d4236}button:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:3px}kbd{font:10px system-ui;margin-left:10px;opacity:.6}#stage{position:relative;line-height:0;box-shadow:0 15px 55px #0006;border:1px solid #62523c;background:#111}canvas{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#171b1c;line-height:1.5;padding:30px}#loading[hidden]{display:none}#dialogue{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);max-width:80%;min-width:210px;line-height:1.45;text-align:center;font:16px/1.45 Georgia,serif;color:#fff0ca;background:#172022ee;border:1px solid #bf9c65;padding:12px 22px;border-radius:4px;pointer-events:none}footer{display:flex;justify-content:space-between;gap:16px;padding:14px 0;font:12px/1.5 system-ui;color:var(--muted)}.badge{font-size:9px;letter-spacing:1px;color:#bda579}#debug-panel{border-top:1px solid #494d44;font:12px/1.5 system-ui;color:#c9c6b6;padding-top:12px}#checks{display:flex;gap:8px;flex-wrap:wrap}.legend{display:flex;gap:18px;flex-wrap:wrap}.legend span:nth-child(1){color:#72ecaa}.legend span:nth-child(2){color:#ff8c8c}.legend span:nth-child(3){color:#ffd372}.legend span:nth-child(4){color:#72cfff}#telemetry{font-variant-numeric:tabular-nums} @media(max-width:600px){body{padding:10px}header{padding-bottom:12px}h1{font-size:23px}h1 span{display:block;font-size:14px;margin-top:3px}.eyebrow{font-size:8px;letter-spacing:1px}footer{flex-direction:column;gap:4px;font-size:11px}#dialogue{font-size:12px;padding:7px 10px;max-width:92%}.badge{font-size:8px}kbd{display:none}}@media(max-height:520px) and (orientation:landscape){body{padding:6px}main{width:min(100%,calc((100svh - 80px)*1000/562))}header{padding-bottom:5px}h1{font-size:18px;margin:0}h1 span{font-size:12px}.eyebrow{display:none}footer{padding:6px 0;font-size:10px}.badge{display:none}}
#interactions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}#interactions button{font-size:12px;padding:9px 14px;background:#202727}@media(max-height:520px) and (orientation:landscape){main{width:min(100%,calc((100svh - 130px)*1000/562))}#interactions{margin-bottom:0;gap:5px}#interactions button{font-size:10px;padding:7px 10px}}

/* Adventure layer (adventure.js) */
#adv-say{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:min(82%,760px);line-height:1.45;font:17px/1.45 Georgia,serif;color:#fff0ca;background:#172022f0;border:1px solid #bf9c65;padding:11px 20px;border-radius:4px;z-index:20;cursor:pointer;text-align:center}
#adv-say .who{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#f0d7a3;margin-bottom:2px}#adv-say .who.wil{color:#ffc464}#adv-say .narr{font-style:italic;color:#d9cfb8}
#adv-menu{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:5px;padding:8px;background:#172022f5;border:1px solid #bf9c65;border-radius:6px;z-index:25;line-height:1.2}
#adv-menu b{font:12px Georgia,serif;color:#f0d7a3;text-align:center;padding:0 6px 3px;letter-spacing:.04em}
#adv-menu button,#adv-choices button,#adv-card button,#adv-end button{font:15px Georgia,serif;color:#fff0ca;background:#2b3436;border:1px solid #bf9c65;border-radius:4px;padding:9px 18px;cursor:pointer}
#adv-menu button:hover,#adv-choices button:hover,#adv-card button:hover,#adv-end button:hover,#adv-inv button:hover{background:#3d4a4c}
#adv-choices{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;width:min(82%,760px);z-index:26}
#adv-inv{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;align-items:center;z-index:15;line-height:1;pointer-events:auto}
#adv-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1deg);width:min(78%,430px);background:#efe2bd;color:#3b2c1c;border:1px solid #7d6238;box-shadow:0 12px 40px #000a;padding:22px 26px;text-align:center;z-index:30;line-height:1.4;cursor:pointer;font-family:Georgia,serif}
#adv-card h3{margin:0 0 10px;font-size:22px;letter-spacing:.06em}#adv-card p{margin:6px 0;font-size:17px}#adv-card button{margin-top:12px;background:#3b2c1c;color:#efe2bd}
#adv-card.torn{background:#d9c8a0;clip-path:polygon(0 3%,4% 0,20% 2%,45% 0,70% 3%,100% 0,98% 30%,100% 55%,97% 80%,100% 100%,70% 97%,40% 100%,10% 97%,0 100%,2% 60%)}
#adv-end{position:absolute;inset:0;background:#0b0f10ee;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;line-height:1.4;font-family:Georgia,serif}
#adv-end h2{color:#ffc464;font-size:32px;margin:0}#adv-end p{max-width:520px;margin:0 0 8px;font-size:18px}

#adv-say[hidden],#adv-menu[hidden],#adv-choices[hidden],#adv-inv[hidden],#adv-card[hidden],#adv-end[hidden]{display:none!important}
/* satchel inventory */
#adv-inv{position:absolute;left:12px;bottom:12px;display:flex;gap:10px;align-items:flex-end;z-index:15;line-height:1;pointer-events:none}
#adv-inv>*{pointer-events:auto}
.adv-satchel{position:relative;width:66px;height:66px;padding:7px;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 35% 30%,#5b3b22,#2b190d 75%);border:3px solid #c59a4e;box-shadow:0 4px 10px #000a,inset 0 0 0 2px #2b190d,inset 0 2px 6px #ffffff22;transition:transform .15s,box-shadow .15s}
.adv-satchel:hover,.adv-satchel.open{transform:translateY(-2px) scale(1.05);border-color:#ffd47a;box-shadow:0 6px 14px #000b,0 0 0 3px #ffc46455,inset 0 0 0 2px #2b190d}
.adv-satchel svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 2px #0008)}
.adv-satchel.wiggle{animation:advWiggle .7s ease 2}
.adv-badge{position:absolute;right:-4px;top:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#a33a24;border:2px solid #ffd9a0;color:#fff4dc;font:bold 12px/18px Georgia,serif;text-align:center}
.adv-panel{position:absolute;left:0;bottom:80px;width:max-content;max-width:min(360px,80vw);padding:14px 16px 12px;border-radius:12px;color:#fff0ca;background:repeating-linear-gradient(92deg,#4a2f1b 0 9px,#432a18 9px 10px,#4f331e 10px 19px),#4a2f1b;border:3px solid #24130a;box-shadow:0 10px 26px #000c,inset 0 0 0 3px #a97f45,inset 0 0 0 5px #24130a,inset 0 0 22px #0007;transform-origin:22px 100%;animation:advPanel .22s ease-out}
.adv-panel::before,.adv-panel::after{content:"";position:absolute;top:8px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#a97f30 60%,#4a3410);box-shadow:0 1px 2px #000a}
.adv-panel::before{left:9px}.adv-panel::after{right:9px}
.adv-panel-title{font:bold 15px Georgia,serif;letter-spacing:1px;text-align:center;color:#ffd47a;margin:0 0 10px;text-shadow:0 2px 0 #24130a}
.adv-slots{display:grid;grid-template-columns:repeat(4,64px);gap:9px;justify-content:center}
.adv-slot{width:64px;height:64px;padding:5px;border-radius:8px;position:relative;background:radial-gradient(circle at 50% 35%,#6a5238,#3a2a19);border:2px dashed #b99a68;box-shadow:inset 0 3px 8px #000b,inset 0 -1px 0 #ffffff18}
.adv-slot.empty{opacity:.55}
.adv-slot.full{cursor:pointer;border-style:solid;border-color:#d1ac6a;background:radial-gradient(circle at 50% 30%,#8a6d48,#4b3822);transition:transform .12s,box-shadow .12s}
.adv-slot.full:hover{transform:translateY(-3px) scale(1.06);box-shadow:inset 0 3px 8px #000a,0 0 0 2px #ffc46499,0 6px 10px #0009}
.adv-slot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #000a);display:block}
.adv-slot.fresh{animation:advPop .6s cubic-bezier(.3,1.6,.5,1);box-shadow:0 0 0 3px #ffd47a,0 0 18px #ffc464aa}
.adv-new{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font:bold 9px/1 system-ui;letter-spacing:1px;padding:3px 6px;border-radius:8px;background:#a33a24;color:#fff4dc;border:1px solid #ffd9a0}
.adv-plate{margin:12px auto 0;padding:6px 12px;text-align:center;font:italic 13px Georgia,serif;color:#3a2410;background:linear-gradient(#f0dcae,#dcc088);border:1px solid #7a5a2a;border-radius:3px;box-shadow:0 2px 3px #0008,inset 0 0 6px #b0894080}
.adv-held{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:12px;color:#fff0ca;background:linear-gradient(#3d2716,#2a190d);border:3px solid #d1ac6a;box-shadow:0 4px 12px #000b,0 0 0 3px #ffc46455;animation:advPanel .2s ease-out}
.adv-held img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 2px #000a)}
.adv-held-text{display:flex;flex-direction:column;gap:4px;font-family:Georgia,serif}.adv-held-text b{font-size:15px;color:#ffd47a}.adv-held-text span{font-size:12px;opacity:.85}
.adv-mini{font:13px Georgia,serif;color:#fff0ca;background:#5a3a20;border:1px solid #d1ac6a;border-radius:4px;padding:8px 10px;cursor:pointer;min-height:36px}.adv-mini:hover{background:#7a5030}
#adv-cursor{position:absolute;width:56px;height:56px;object-fit:contain;transform:translate(-50%,-50%) rotate(-8deg);pointer-events:none;z-index:30;filter:drop-shadow(0 4px 4px #000b)}
#adv-cursor[hidden]{display:none}
@keyframes advWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(5deg)}}
@keyframes advPanel{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
@keyframes advPop{0%{transform:scale(.2) rotate(-20deg);opacity:0}60%{transform:scale(1.18) rotate(6deg);opacity:1}100%{transform:scale(1)}}
@media(max-width:600px){.adv-satchel{width:54px;height:54px}.adv-panel{bottom:66px}.adv-slots{grid-template-columns:repeat(4,56px)}.adv-slot{width:56px;height:56px}.adv-held-text span{display:none}}
@media(prefers-reduced-motion:reduce){.adv-satchel.wiggle,.adv-slot.fresh,.adv-panel,.adv-held{animation:none}}

/* talking-head conversation card */
#adv-say.pt{display:flex;gap:18px;align-items:center;text-align:left;width:min(90%,840px);bottom:4.5%;padding:14px 20px 14px 14px;font-size:18px;background:linear-gradient(180deg,#1d2a2cf5,#141c1ef5);box-shadow:0 10px 34px #000a;animation:adv-pop .22s ease-out}
#adv-say.pt.right{flex-direction:row-reverse;text-align:right;padding:14px 14px 14px 20px}
#adv-say.pt .pt-img{flex:0 0 auto;width:clamp(84px,17%,150px);aspect-ratio:1;height:auto;border:2px solid #d9b26a;border-radius:10px;background:radial-gradient(circle at 50% 35%,#4c5b4a,#20292b);box-shadow:0 4px 14px #000a,inset 0 0 12px #0008;image-rendering:auto}
#adv-say.pt .pt-body{flex:1;min-width:0}#adv-say.pt .who{font-size:13px;margin-bottom:4px}
@keyframes adv-pop{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.97)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* 'click' reading mode: a small arrow shows that the line waits for you */
#adv-say.wait{cursor:pointer}#adv-say.wait::after{content:'\25B8';position:absolute;right:14px;bottom:8px;font-size:18px;line-height:1;color:#ffc464;animation:advnudge 1.1s ease-in-out infinite}@keyframes advnudge{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(4px);opacity:1}}