@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=VT323&display=swap');
:root{color-scheme:dark;--ink:#111824;--panel:#182231;--edge:#344051;--gold:#e6b776;--muted:#94a2b5;--cream:#eee7d6}*{box-sizing:border-box}body{margin:0;background:#0c121c;color:var(--cream);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.game{max-width:1240px;margin:auto;padding:0 36px}header{height:90px;display:flex;align-items:center;gap:40px}.wordmark{font:10px 'Space Mono',monospace;letter-spacing:3px;color:var(--cream);text-decoration:none}.wordmark strong{display:block;font-size:22px;letter-spacing:1.7px}.chapter{font:11px 'Space Mono',monospace;color:var(--gold);border-left:1px solid var(--edge);padding-left:25px}.chapter span{color:#68798c;margin-left:15px}.tools{display:flex;gap:20px;margin-left:auto}.tools button{border:0;background:none;color:var(--muted);font-size:12px;padding:8px 0}.tools button:hover{color:var(--gold)}.scene-wrap{border:1px solid #4e4b49;padding:5px;background:#18202a}.scene{aspect-ratio:16/9;position:relative;overflow:hidden;background-color:#443c46;background-image:url('assets/locations.png');background-size:200% 200%;image-rendering:pixelated}.scene[data-room=yard]{background-position:0 0}.scene[data-room=garage]{background-position:100% 0}.scene[data-room=barn]{background-position:0 100%}.scene[data-room=house]{background-position:100% 100%}.shade{position:absolute;inset:0;background:linear-gradient(#0c132778,transparent 30%,transparent 78%,#0c1327a6);pointer-events:none}.location{position:absolute;left:3%;top:5%;pointer-events:none;text-shadow:0 2px 4px #101523}.location span{font:10px 'Space Mono',monospace;letter-spacing:2px;color:#f7d4a7}.location h1{font-size:28px;font-weight:500;margin:8px 0}.scene-bottom{position:absolute;bottom:3%;left:3%;right:3%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.scene-bottom>span{font:11px 'Space Mono';letter-spacing:3px}.scene-bottom button{pointer-events:auto;background:#111824aa;border:1px solid #c4ab7944;padding:7px 12px;font-size:11px}kbd{font:9px 'Space Mono';color:var(--gold);margin-left:8px}#actors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}#hotspots{position:absolute;inset:0}.hotspot{position:absolute;z-index:2;background:transparent;border:1px solid transparent;border-radius:3px;padding:0}.hotspot:hover,.hotspot:focus-visible,.reveal .hotspot{border:1px solid #ffdc8b88;background:#ffe0a20d}.hotspot span{display:none;position:absolute;left:50%;top:0;transform:translate(-50%,-110%);white-space:nowrap;background:#111824ee;color:#ffe0ae;font-size:12px;padding:5px 9px;box-shadow:0 2px 0 #bb955a}.reveal .hotspot span,.hotspot:focus-visible span{display:block}#hover-label{position:absolute;bottom:13%;left:50%;transform:translateX(-50%);color:#ffe1a5;font:13px 'Space Mono';text-shadow:2px 2px #111;pointer-events:none;z-index:3}.console{border:1px solid var(--edge);border-top:0;background:var(--panel)}.dialogue{display:flex;align-items:center;gap:22px;min-height:83px;padding:16px 24px;border-bottom:1px solid var(--edge)}.speaker{font:10px 'Space Mono';letter-spacing:2px;color:var(--gold)}.dialogue p{font-size:15px;line-height:1.6;margin:0;flex:1;max-width:900px}.dialogue button{align-self:center;background:none;border:0;color:var(--gold);font-size:12px;white-space:nowrap}.interaction{display:grid;grid-template-columns:46% 54%;min-height:177px}.verbs-panel{padding:20px 24px;border-right:1px solid var(--edge)}.eyebrow{font:10px 'Space Mono';letter-spacing:1.5px;color:var(--muted)}#verbs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px 8px;margin-top:13px}#verbs button{background:#202d3e;border:1px solid #344256;padding:7px 3px;font-size:12px;border-radius:2px}#verbs button:hover{border-color:var(--gold)}#verbs button.active{background:var(--gold);border-color:var(--gold);color:#20232b}.inventory-panel{padding:20px 24px;overflow:hidden}.inventory-heading{display:flex;justify-content:space-between;gap:10px}#item-count{font:9px 'Space Mono';color:#697b93}#inventory{display:flex;align-items:center;gap:9px;overflow:auto;min-height:109px;padding-top:12px}.empty{font-size:13px;color:#738198;font-style:italic}.item{flex:0 0 78px;min-height:83px;border:1px solid #3a4759;background:#111b2a;padding:7px 4px;font-size:10px}.item.selected{border-color:var(--gold);background:#3c3540}.item canvas{width:36px;height:36px;display:block;margin:0 auto 5px;image-rendering:pixelated}footer{display:flex;justify-content:space-between;gap:20px;background:#121c2a;border-top:1px solid var(--edge);padding:12px 24px;font:11px 'Space Mono';color:var(--gold)}#progress{font-size:9px;color:#798b9e;text-align:right}#map{display:flex;justify-content:center;gap:7px;margin:20px 0 15px}#map button{border:1px solid transparent;background:transparent;padding:8px 20px;color:var(--muted);font-size:12px}#map button.active{border-color:#655741;color:var(--gold);background:#292929}#map button span{font:10px 'Space Mono';margin-right:9px;opacity:.5}.under-note{display:flex;justify-content:space-between;font-size:10px;color:#5d6e82;padding-bottom:20px}dialog{background:var(--panel);color:var(--cream);border:1px solid #9c815d;max-width:560px;padding:34px;box-shadow:0 20px 100px #000}dialog::backdrop{background:#060b14cc;backdrop-filter:blur(5px)}dialog h2{color:var(--gold);font-size:26px}dialog p{font-size:15px;line-height:1.8}dialog button{background:var(--gold);color:var(--ink);border:0;padding:12px 20px;margin-top:15px}dialog .eyebrow{color:var(--gold)}@media(min-width:1500px){.game{max-width:1360px}}@media(max-width:800px){.game{padding:0 10px}header{height:75px;gap:16px}.wordmark strong{font-size:16px}.wordmark{font-size:8px}.chapter{display:none}.tools{gap:12px}.location h1{font-size:20px}.location span{font-size:8px}.interaction{grid-template-columns:1fr}.verbs-panel{border-right:0;border-bottom:1px solid var(--edge);padding:15px}#verbs{grid-template-columns:repeat(6,1fr)}.inventory-panel{padding:15px}.dialogue{padding:14px;gap:10px}.dialogue p{font-size:13px}.scene-bottom>span{display:none}.scene-bottom{justify-content:flex-end}.scene-bottom kbd{display:none}#map{gap:0}#map button{padding:8px 12px}.under-note{font-size:9px}.hotspot span{font-size:10px}.location{top:4%}footer{padding:10px 15px}.item{min-height:72px}#inventory{min-height:87px}}@media(max-width:440px){#verbs{grid-template-columns:repeat(4,1fr)}.tools{gap:9px}.tools button{font-size:10px}.location h1{font-size:17px}.location span{letter-spacing:1px;font-size:7px}.dialogue{gap:8px}.dialogue button{font-size:10px}.speaker{font-size:8px}#progress{max-width:130px;font-size:8px}#map button{padding:8px 9px}}
/* A common low-resolution canvas keeps backgrounds and figures on one pixel grid. */
:root{--gold:#cfbc88;--panel:#10171b;--edge:#303d40;--muted:#819797}
body{background:#080d12}.game{max-width:1280px;padding:0 22px}header{height:66px}.wordmark strong{font-family:'VT323',monospace;font-size:25px;letter-spacing:2px}.wordmark{font-size:8px}.chapter{font-size:10px}.scene-wrap{padding:0;border:2px solid #30383c}.scene{background-image:none;background-color:#171e25;cursor:crosshair}#actors{z-index:0}.shade{z-index:1;background:linear-gradient(#0c132744,transparent 24%);}.location{z-index:1;top:3%;left:2.5%;text-shadow:2px 2px #0b151c}.location h1{font:23px 'VT323',monospace;color:#ddc999;margin:3px 0}.location span{font-size:8px;letter-spacing:1px;color:#cfb992}#hotspots{z-index:2}.scene-bottom{z-index:3;bottom:2%;left:2.5%;right:2.5%}.scene-bottom>span{font-size:9px;color:#dabf8d}.scene-bottom button{font:16px 'VT323',monospace;color:#d2c399;background:#10171baa}.hotspot{border-radius:0;cursor:crosshair}.hotspot:hover{border-color:transparent;background:none}.reveal .hotspot,.hotspot:focus-visible{border:1px dashed #d9ca92;background:#f3d99909}.hotspot span{font:18px 'VT323',monospace;box-shadow:none}.console{background:#10171b;border:2px solid #30383c;border-top:0}.dialogue{min-height:64px;padding:10px 20px;border-bottom:1px solid #29383c;gap:16px}.dialogue p{font:24px/1.05 'VT323',monospace;color:#66c7cf;text-shadow:2px 2px #02080e}.dialogue .speaker{color:#668d97}.dialogue button{font:18px 'VT323',monospace}.interaction{min-height:157px;grid-template-columns:47% 53%;background:linear-gradient(90deg,#131c20,#11181d)}.verbs-panel{padding:12px 18px;border-color:#29383c}.eyebrow{font-size:8px;letter-spacing:1px}#verbs{gap:4px 10px;margin-top:7px;grid-template-columns:repeat(4,1fr)}#verbs button{padding:1px 0;text-align:left;border:0;border-radius:0;background:none;font:clamp(19px,2.4vw,30px)/1.15 'VT323',monospace;color:#a59872;text-shadow:2px 2px #03090e}#verbs button:hover{color:#f4de9a}#verbs button.active{background:none;color:#fae4a0;border:0;text-shadow:2px 2px #655638}.inventory-panel{padding:12px 18px}#inventory{min-height:105px;gap:7px;padding-top:8px}.item{flex-basis:82px;min-height:87px;background:#1b2d33;border-color:#2e4246;font:14px/1 'VT323',monospace;color:#d5c497}.item canvas{width:46px;height:46px;margin-bottom:4px}.item.selected{border-color:#d9c88d;background:#344341}.empty{font:19px 'VT323',monospace;color:#627a80}footer{background:#0c1217;padding:9px 18px;font:20px 'VT323',monospace;color:#d5c796;min-height:38px}#progress{font:14px 'VT323',monospace;align-self:center}#map{margin:10px 0 8px}#map button{font:19px 'VT323',monospace;padding:5px 18px}#map button.active{background:#20292b;border-color:#566362}.under-note{padding-bottom:10px}dialog h2{font:34px 'VT323',monospace}dialog p{line-height:1.6}@media(min-width:1500px){.game{max-width:1280px}}@media(max-width:800px){.game{padding:0 8px}header{height:62px}.interaction{grid-template-columns:1fr}.verbs-panel{padding:9px 12px}#verbs{grid-template-columns:repeat(6,1fr);gap:3px 8px}#verbs button{font-size:23px}.inventory-panel{padding:9px 12px}.dialogue p{font-size:21px}.dialogue{padding:10px 12px}.item{min-height:78px}#inventory{min-height:84px}.location h1{font-size:20px}.location span{font-size:7px}footer{font-size:17px}.hotspot span{font-size:15px}}@media(max-width:440px){#verbs{grid-template-columns:repeat(4,1fr)}#verbs button{font-size:23px}.dialogue p{font-size:20px}.dialogue button{font-size:15px}#map button{font-size:17px;padding:5px 7px}.location span{display:none}.location h1{font-size:17px}.scene-bottom button{font-size:12px}#progress{font-size:12px}.item{flex-basis:75px}}
@media(min-width:801px){.game{max-width:min(1280px,calc((100dvh - 315px)*1.7778 + 44px))}header{height:44px}.wordmark strong{font-size:21px}.wordmark{font-size:7px}.chapter{padding-left:14px}.tools{gap:15px}.tools button{font-size:11px}.dialogue{min-height:50px;padding:6px 14px}.dialogue p{font-size:22px}.interaction{min-height:112px}.verbs-panel,.inventory-panel{padding:8px 12px}#verbs{margin-top:5px;gap:3px 8px}#verbs button{font-size:24px;line-height:1.1}#inventory{min-height:84px;padding-top:5px}.item{min-height:74px;flex-basis:70px;font-size:13px}.item canvas{width:38px;height:38px}.inventory-heading{align-items:center}footer{min-height:29px;padding:4px 12px;font-size:17px}#progress{font-size:12px}#map{margin:5px 0}#map button{padding:3px 12px;font-size:17px}.under-note{font-size:9px;padding-bottom:5px}}@media(min-width:801px) and (max-height:650px){.game{min-width:720px}}
@media(min-width:801px){#verbs{grid-template-columns:repeat(3,1fr);gap:3px 9px}#verbs button{font-size:22px;white-space:nowrap}.chapter{display:none}.interaction{grid-template-columns:47% 53%}}@media(max-width:800px){#verbs button{white-space:nowrap}}@media(min-width:441px) and (max-width:650px){#verbs{grid-template-columns:repeat(4,1fr)}}
@media(min-width:801px) and (min-height:651px) and (max-height:850px){.game{max-width:calc((100dvh - 360px)*1.7778 + 44px)}#verbs button{font-size:20px}.tools{gap:10px}.dialogue p{font-size:20px}.location h1{font-size:20px}.scene-bottom kbd{display:none}}