:root{color-scheme:dark;--ink:#f2dfb3;--gold:#edbb67;--dim:#a9a8b8;--navy:#151b30;--panel:#22243e;--line:#4d4655}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 0,#30324c,#0c1020 70%);color:var(--ink);font:16px/1.5 system-ui,sans-serif}
button{color:inherit;font:600 15px system-ui;border:1px solid #6d5e69;background:#2b2945;border-radius:5px;padding:11px 17px;min-height:46px;cursor:pointer;transition:background .15s}
button:hover{background:#443652;border-color:var(--gold)}
button:focus-visible{outline:3px solid #ffd684;outline-offset:3px}
button:disabled{opacity:.5;cursor:default}
button.active{color:#182033;background:var(--gold);border-color:#ffe3a8}
[hidden]{display:none!important}
.game-shell{max-width:1320px;margin:auto;padding:22px 28px}
header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 0 22px}
.logo{display:flex;gap:12px;align-items:center;font:bold 30px Georgia,serif;text-shadow:0 2px #000}
.logo-star{font-size:43px;color:var(--gold)}
.logo small{display:block;font:700 9px system-ui;letter-spacing:3px;margin-top:7px}
.status{display:flex;flex-direction:column;font-size:12px;text-align:center;color:var(--dim)}
.status span{color:var(--gold);margin-top:5px}
.tools{display:flex;gap:8px}
.tools button{font-size:12px;padding:8px 12px;background:transparent}
.chapter{display:flex;align-items:center;gap:20px;margin:0 0 12px}
.chapter>span{font:600 11px system-ui;letter-spacing:2px;color:var(--gold);white-space:nowrap}
.chapter h1{flex:1;font:normal 25px Georgia;letter-spacing:.2px;margin:0}
.chapter button{border:0;background:none;font-size:12px;color:var(--dim)}
.scene{position:relative;aspect-ratio:2/1;overflow:hidden;border:2px solid #b58b53;box-shadow:0 0 0 5px #2e2738,0 14px 40px #0005;background-image:url('assets/scenes.png');background-size:300% 200%;isolation:isolate}
.scene-0{background-position:0 0}
.scene-1{background-position:50% 0}
.scene-2{background-position:100% 0}
.scene-3{background-position:0 100%}
.scene-4{background-position:50% 100%}
.scene-5{background-position:100% 100%}
.scene-shade{position:absolute;inset:0;background:linear-gradient(#0003,transparent 25%,transparent 70%,#05081e65);pointer-events:none}
.location{position:absolute;left:22px;top:15px;font:600 13px Georgia;letter-spacing:1px;text-shadow:0 1px 5px #000;z-index:3;color:#ffe7ae}
.location>span:first-child{color:var(--gold)}
.character{background-image:url('assets/characters.png');background-repeat:no-repeat;background-size:400% 100%;width:100px;height:200px}
.char-0{background-position:0 0}
.char-1{background-position:33.333% 0}
.char-2{background-position:66.667% 0}
.char-3{background-position:100% 0}
#pippo{position:absolute;bottom:8%;left:40%;width:10%;height:40%;z-index:4;transition:left .65s ease;filter:drop-shadow(5px 6px 3px #0005)}
.hotspot{position:absolute;z-index:5;border:0;background:transparent!important;padding:0;min-width:64px;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;justify-content:flex-end}
.hotspot.person{width:11%;height:42%}
.hotspot .character{width:100%;height:100%;filter:drop-shadow(4px 5px 2px #0005)}
.hotspot.prop{width:8%;height:16%}
.hotspot svg{width:100%;height:100%;filter:drop-shadow(3px 5px 3px #0008)}
.hotspot .caption{position:absolute;bottom:-10px;padding:4px 10px;white-space:nowrap;border:1px solid #b58b53;border-radius:3px;color:#ffe7ae;background:#16152eea;font:600 12px Georgia;opacity:0;transform:translateY(8px);transition:opacity .2s;pointer-events:none}
.hotspot:hover .caption,.hotspot:focus-visible .caption{opacity:1}
.hotspot:hover{filter:brightness(1.15)}
.travel{position:absolute;bottom:12px;left:14px;right:14px;z-index:8;display:flex;justify-content:space-between;pointer-events:none}
.travel button{pointer-events:auto;background:#15152dc9;border-color:#b18a54;font:600 12px Georgia;padding:8px 12px;min-height:40px}
.travel button:last-child{margin-left:auto}
#actionText{position:absolute;left:25%;right:25%;bottom:10px;z-index:6;text-align:center;color:#ffe4a2;text-shadow:0 2px 4px #000;font:600 12px Georgia;pointer-events:none}
.dialogue{display:flex;align-items:flex-start;gap:18px;padding:22px 25px 18px;border:1px solid var(--line);border-top:0;background:linear-gradient(110deg,#272742,#1e2237);min-height:130px}
.speaker-medallion{width:65px;height:75px;overflow:hidden;background:#413847;border:1px solid #8f6e48;border-radius:40% 40% 7px 7px;flex:none}
.speaker-medallion .character{width:65px;height:130px}
.speech{flex:1}
.speech>strong{font:600 12px Georgia;color:var(--gold);letter-spacing:1px}
.speech p{margin:6px 0 0;font-size:16px;line-height:1.6;max-width:960px}
.dialogue>button{padding:5px 12px;min-height:38px;font-size:20px;background:transparent}
.controls{display:flex;align-items:stretch;gap:20px;padding:18px 20px;border:1px solid var(--line);border-top:0;background:#171b30;min-height:113px}
.verbs{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:215px}
.verbs button{font:600 17px Georgia;padding:7px 13px;min-height:38px}
.bag{flex:1;border-left:1px solid #494251;padding-left:20px}
.tiny-label{font:700 10px system-ui;letter-spacing:2px;color:var(--gold)}
#inventory{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
#inventory button{display:flex;align-items:center;gap:7px;font-size:12px;padding:7px 9px;min-height:48px}
#inventory svg{width:28px;height:28px}
#inventory .selected{border-color:var(--gold);background:#614a32;color:#fff0bb}
#inventory>span{font:italic 14px Georgia;color:#888899}
.footnote{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#8e8c9b;margin-top:10px}
#dialogChoices{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#dialogChoices:empty{margin:0}
#dialogChoices button{font-size:13px;min-height:40px;padding:7px 12px;text-align:left;color:#f4d48e;background:#1c2034}
#next{align-self:center;color:#201d2a;background:var(--gold);font:600 15px Georgia;max-width:170px}
footer{display:flex;justify-content:space-between;align-items:center;margin-top:25px;color:#777989;font-size:10px}
footer button{background:none;border:0;font-size:11px;color:#aaa5aa}
.hub-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0}
.hub-heading h1{font:36px Georgia;margin:12px 0}
.hub-heading p{color:var(--dim);font-size:14px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:35px}
.card{border:1px solid #63526a;border-radius:7px;background:linear-gradient(125deg,#30283f,#202438);padding:22px}
.card h3{font:22px Georgia;margin:0 0 8px}
.card p{font-size:13px;color:var(--dim)}
.card button{width:100%;margin-top:9px;background:#473750;font-size:13px}
.card.owned{border-color:var(--gold);box-shadow:inset 0 0 0 1px #b18a5422}
.card .number{color:var(--gold);font:24px Georgia;float:right}
.case-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.case-entry{border-bottom:1px solid var(--line);padding:13px 0}
.case-entry h3{font:18px Georgia;margin:0}
.case-entry p{font-size:12px;color:var(--dim);margin:5px 0}
h2{font:27px Georgia;color:var(--gold)}
dialog{color:var(--ink);background:linear-gradient(130deg,#292740,#171c30);border:2px solid #b18a54;border-radius:7px;padding:30px;max-width:630px;width:calc(100% - 30px);box-shadow:0 0 0 6px #201d31,0 20px 100px #0008}
dialog::backdrop{background:#050718c9}
.close{position:absolute;right:12px;top:8px;font-size:25px;background:none;border:0;padding:0 10px}
dialog h2{margin:15px 0;color:#ffe3a8}
dialog p{font-size:16px;line-height:1.7}
#readPuzzle{font-size:12px;background:transparent;margin:0 0 15px}
#puzzleClue{margin:12px 0;padding:12px;background:#11182b;border:1px dashed #8a795c;min-height:44px;font-size:14px}
#puzzleClue:empty{display:none}
#puzzleOptions{display:flex;gap:10px;flex-wrap:wrap}
#puzzleOptions button{flex:1;min-width:110px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:15px}
#puzzleOptions svg{width:48px;height:48px}
#puzzleFeedback{color:#f0cd87;min-height:28px;margin-bottom:0}
.note{display:flex;gap:12px;border-bottom:1px solid var(--line);padding:13px 0;font-size:14px}
.note b{color:var(--gold)}
.journal-tip{font-style:italic;color:var(--dim);font-size:13px!important}
.sound-sequence{font-size:24px;letter-spacing:8px}
.parcel-row{display:flex;gap:8px;justify-content:center;margin:10px 0}
.parcel-row svg{width:50px;height:50px}
@media(max-width:760px){.game-shell{padding:15px 12px}
header{flex-wrap:wrap;padding-bottom:15px;gap:12px}
.logo{font-size:23px}
.logo-star{font-size:32px}
.logo small{font-size:7px;letter-spacing:2px}
.status{margin-left:auto;font-size:10px}
.tools{width:100%;justify-content:flex-end}
.tools button{padding:6px 12px;min-height:36px}
.chapter{flex-wrap:wrap;gap:6px 12px}
.chapter h1{font-size:22px;flex-basis:70%}
.chapter>span{font-size:9px}
.chapter button{padding:0;min-height:30px}
.scene{aspect-ratio:1.65/1}
.location{left:10px;top:10px;font-size:11px}
.hotspot.person{width:13%;height:42%}
.hotspot.prop{width:12%;height:19%}
.hotspot .caption{font-size:10px}
.travel{left:6px;right:6px;bottom:6px}
.travel button{font-size:10px;padding:5px 8px;min-height:34px}
#actionText{display:none}
.dialogue{padding:15px 12px;gap:10px}
.speaker-medallion{width:45px;height:55px}
.speaker-medallion .character{width:45px;height:90px}
.speech p{font-size:14px}
.controls{padding:12px;gap:12px;flex-wrap:wrap}
.verbs{min-width:145px;flex:0 0 40%}
.verbs button{font-size:16px;padding:7px;min-height:40px}
.bag{padding-left:12px;flex-basis:50%}
.tiny-label{font-size:8px}
#inventory button{font-size:10px;padding:5px;min-height:44px}
#inventory svg{width:23px;height:23px}
.footnote{flex-direction:column;gap:3px}
.cards{grid-template-columns:1fr 1fr}
.card{padding:15px}
.card h3{font-size:18px}
.hub-heading{flex-wrap:wrap}
.hub-heading h1{font-size:29px}
.case-list{grid-template-columns:1fr}
dialog{padding:25px 20px}
#puzzleOptions button{min-width:95px;font-size:13px}
#next{max-width:none;width:100%}
footer{gap:10px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}
}
.tools button,.chapter button,.travel button,.dialogue>button,.verbs button,#dialogChoices button{min-height:44px}
.travel button{background:#15152dea}