@font-face{font-family:"Press Start 2P";src:url(fonts/PressStart2P.woff2) format("woff2"),url(fonts/PressStart2P-Regular.ttf) format("truetype");font-display:swap}
:root{--sky:#0d1b3d;--ink:#ece6d6;--muted:#a9b0c4;--paper:#f3e6c6;--paper-ink:#2a1a0e;--wall:#3a2612;--gold:#ffe066;--green:#7cfc7c;--blue:#03a9f4;--panel:#000;--card:#162447;--line:#2b3b66;--px:"Press Start 2P",monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--sky)}
body{margin:0;background:var(--sky);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:720px;margin:0 auto;padding:0 12px}
html[lang=pt] .en{display:none!important}html[lang=en] .pt{display:none!important}
.px,h1,h2,.tab,.sentence,.lbl,.lang,.ha,.inv figcaption,.seg button,.crumb,.count,.dur,footer{font-family:var(--px)}
/* header */
header.top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px 0 10px}
header.top h1{margin:0;font-size:13px;line-height:1.5;color:var(--gold);text-shadow:2px 2px 0 #000}
header.top p{margin:4px 0 0;font-size:13px;color:var(--muted)}
a.ha{display:inline-flex;align-items:center;gap:8px;padding:9px 10px;font-size:8px;line-height:1;background:var(--blue);color:#000;border:3px solid #000;box-shadow:3px 3px 0 #000;white-space:nowrap;flex:none}
a.ha:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
a.ha .dot{width:8px;height:8px;background:#fff;border:2px solid #000}
a.ha.small{padding:7px 8px}
/* game screen */
.screen{background:#000;border:3px solid #000;box-shadow:4px 4px 0 #000,0 0 0 1px #2b3b66;margin:6px 0 22px}
.tabs{display:flex;background:#111;border-bottom:3px solid #222}
.tab{flex:1;font-size:8px;line-height:1.4;padding:10px 6px;background:#111;color:#8a8a8a;border:0;border-right:3px solid #222;cursor:pointer}
.tab:last-child{border-right:0}.tab.on{background:#1f1f1f;color:var(--gold)}
a.tab.smart-tab{text-align:center;color:var(--blue);text-decoration:none}
.maps{position:relative}
.floor{display:none;position:relative;width:100%}
.floor.on{display:block}
.floor img{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.overlay{position:absolute;inset:0;width:100%;height:100%}
.hot{fill:transparent;stroke:none;cursor:pointer}
.hot.has{fill:rgba(255,224,102,.07)}
.hot.on{fill:rgba(255,255,255,.22);stroke:var(--gold);stroke-width:1;stroke-dasharray:2 1;animation:march .5s linear infinite}
@keyframes march{to{stroke-dashoffset:-3}}
.lbl{font-size:5.4px;fill:#fff;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:#000;stroke-width:1.1px;stroke-linejoin:round;letter-spacing:-.2px}
.lbl.has{fill:var(--gold)}
.mark{pointer-events:none}
.mark polygon{fill:var(--gold);stroke:#000;stroke-width:.7;animation:blink 1s steps(2,start) infinite}
.mark text{font-family:var(--px);font-size:4.5px;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#000;stroke-width:1px}
@keyframes blink{50%{opacity:.25}}
/* SCUMM panel */
.panel{background:var(--panel);border-top:3px solid #2a2a2a;padding:10px 10px 12px;min-height:150px}
.sentence{font-size:9px;line-height:1.8;color:var(--green);text-align:center;margin-bottom:10px;min-height:16px;overflow-wrap:anywhere}
.sentence .obj{color:var(--gold)}
.inv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.inv .hint,.inv .none{grid-column:1/-1;margin:14px 0;text-align:center;color:#7d7d7d;font-size:14px}
.inv a{display:block;color:inherit;background:#1a1a1a;border:3px solid #444;box-shadow:2px 2px 0 #000}
.inv a:active{border-color:var(--gold)}
.inv img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-bottom:3px solid #444}
.inv figure{margin:0}
.inv figcaption{font-size:7px;line-height:1.5;padding:6px 5px;color:#fff;overflow-wrap:anywhere}
.inv .d{display:block;color:#8a8a8a;margin-top:3px}
.smart{margin-top:12px;border-top:3px solid #2a2a2a;padding-top:10px}
.smart:empty{display:none}
.smart h3{font-family:var(--px);font-size:8px;color:var(--blue);margin:0 0 8px}
.smart ul{margin:0;padding-left:18px;color:#d8d8d8;font-size:14px;line-height:1.4}.smart li{margin:4px 0}
.smart .more{display:inline-block;margin-top:8px;font-family:var(--px);font-size:7px;color:var(--gold)}
/* list */
.list h2{font-size:9px;color:var(--gold);margin:22px 0 10px;text-shadow:2px 2px 0 #000}
.chip{display:inline-block;margin:16px 0 4px;padding:9px 12px;font-family:var(--px);font-size:8px;line-height:1.5;background:var(--card);color:var(--gold);border:3px solid #000;box-shadow:3px 3px 0 #000}
.chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.search{display:flex;gap:10px;align-items:center;margin:4px 0 2px}
.search input{flex:1;font:inherit;padding:11px 12px;border:3px solid #000;background:#fff;color:#000;outline:none;box-shadow:3px 3px 0 #000}
.count{font-size:7px;color:var(--muted);white-space:nowrap}
.grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:600px){.grid{grid-template-columns:1fr 1fr}}
.card{display:flex;gap:10px;background:var(--card);border:3px solid #000;box-shadow:3px 3px 0 #000;color:inherit;overflow:hidden;align-items:stretch}
.card:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.card .thumb{flex:0 0 104px;background:#000}
.card .thumb img{width:104px;height:100%;min-height:64px;object-fit:cover;display:block}
.card .body{padding:6px 8px 6px 0;min-width:0;position:relative;flex:1}
.card h3{margin:0 0 2px;font-size:14px;line-height:1.3;padding-right:34px}
.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .dur{position:absolute;right:0;top:6px;font-size:7px;color:#8a8a8a}
.hidden{display:none!important}
.empty{text-align:center;color:var(--muted);padding:20px}
/* guide page */
.crumb{display:flex;align-items:center;gap:10px;font-size:8px;line-height:1.6;padding:14px 0 10px;color:var(--muted)}
.crumb .back{color:var(--green)}.crumb .room-name{color:var(--gold);flex:1;overflow-wrap:anywhere}
.player{background:#000;border:3px solid #000;box-shadow:4px 4px 0 #000,0 0 0 1px #2b3b66}
.player video{width:100%;max-height:70vh;display:block;background:#000}
video::cue{font-size:1.05em;background:rgba(0,0,0,.7)}
h1.title{font-size:12px;line-height:1.6;color:var(--gold);text-shadow:2px 2px 0 #000;margin:16px 0 6px}
.summary{margin:0 0 10px;font-size:16px}
.meta{color:var(--muted);font-size:13px;margin-bottom:16px}
.meta span+span::before{content:"·";margin:0 7px}
.box{background:var(--paper);color:var(--paper-ink);border:3px solid var(--wall);box-shadow:4px 4px 0 #000;padding:12px 14px 12px;margin:0 0 14px}
.box h2{font-size:9px;margin:0 0 10px;color:var(--wall)}
.box h2 small{font-family:system-ui,sans-serif;font-size:12px;font-weight:400;color:#6b5a48}
.box ol,.box ul{margin:0;padding-left:22px}.box li{margin:6px 0}
.box.tips{background:#dcecd2;border-color:#2f4f2a}.box.tips h2{color:#2f4f2a}
details.transcript summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
details.transcript summary::before{content:"▶";font-size:8px;color:var(--wall)}
details[open].transcript summary::before{content:"▼"}
details.transcript summary h2{margin:0}
details[open].transcript summary{margin-bottom:10px}
.transcript .seg{display:flex;gap:10px;padding:6px 0;border-top:1px dashed #b9a98a}
.transcript .seg:first-child{border-top:0}
.seg button{font-size:7px;color:#8b2d1a;background:none;border:0;padding:3px 0 0;cursor:pointer;min-width:38px;text-align:left}
.seg.active{background:#fff6dc;margin:0 -8px;padding:6px 8px}
.pn{display:flex;justify-content:space-between;gap:12px;margin:22px 0;font-size:14px}
footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:7px;line-height:1.8;padding:24px 0 40px;border-top:3px solid #1b2a4f;margin-top:26px}
footer span{flex:1}
.lang{font-size:8px;padding:7px 9px;background:#1f1f1f;color:#8a8a8a;border:3px solid #000;box-shadow:2px 2px 0 #000;cursor:pointer}
html[lang=pt] .lang[data-set=pt],html[lang=en] .lang[data-set=en]{color:var(--gold);background:#2a2a2a}
@media(min-width:600px){.inv{grid-template-columns:repeat(4,1fr)}header.top h1{font-size:15px}.lbl{font-size:5px}}