:root{color-scheme:dark;--cream:#f7e5bc;--gold:#dfb477;--ink:#223b36;--sage:#b7c8a0}*{box-sizing:border-box}html{background:#182b29;color:var(--cream);font-family:Georgia,serif}body{margin:0;background:radial-gradient(ellipse at 50% 0,#3d5141 0,transparent 65%);min-height:100dvh;overscroll-behavior:none}main{width:min(1160px,100%);margin:auto;padding:22px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.eyebrow{font:10px/1.5 monospace;letter-spacing:2px;color:var(--sage)}h1{font-size:34px;font-weight:normal;line-height:1;margin:9px 0}h1 em{display:block;font-size:16px;color:var(--gold);margin-top:9px;letter-spacing:3px;font-style:normal}.tools{display:flex;gap:8px}button{font:13px/1.3 monospace;color:var(--cream);border:1px solid #819573;background:#344e43;padding:12px 16px;cursor:pointer;border-radius:4px;box-shadow:0 3px 0 #142d29;min-height:43px}button:hover{background:#4c6750}button:focus-visible{outline:3px solid #ffdb8b;outline-offset:3px}button:disabled{opacity:.45;cursor:default}kbd{font:10px monospace;opacity:.65;margin-left:6px}.ribbon{display:flex;justify-content:space-between;padding:12px 17px;background:#2d463c;border:1px solid #6c7c57;border-bottom:0;font:12px monospace;letter-spacing:.5px}#area{color:#f4c17c}#stage{position:relative;border:1px solid #9b986a;box-shadow:0 18px 65px #0b201f80;overflow:hidden;background:#657b52;aspect-ratio:3/2;max-height:calc(100dvh - 270px);min-height:200px;display:grid;place-items:center}canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block;touch-action:none}#location{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font:12px monospace;color:#fff2c5;background:#20382bea;padding:8px 12px;border-radius:3px;white-space:nowrap;pointer-events:none}#location:empty{display:none}.panel{position:absolute;inset:0;background:#142c29bb;display:grid;place-items:center;padding:16px;backdrop-filter:blur(2px);overflow:auto;z-index:4}.panel[hidden]{display:none}.panel-inner{width:min(570px,100%);max-height:100%;overflow:auto;background:#243e37;border:1px solid #b4aa77;padding:25px 30px;box-shadow:0 8px 0 #122b26}h2{font-size:29px;font-weight:normal;margin:5px 0 15px;color:#ffdc9e}#panel-body{font-size:16px;line-height:1.65;color:#e2dfc1}#panel-body p{margin:10px 0}#panel-body strong{color:#f4c17c}#choices{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}#choices button:first-child{background:#dac38e;color:#253b32;border-color:#edd7a4}#panel-body .ending{width:100%;max-height:240px;object-fit:contain;image-rendering:pixelated;background:#546647}#panel-body ul{padding-left:20px}#panel-body .inventory{font:12px/1.8 monospace;color:#bcd5ad}.below{display:flex;gap:15px;align-items:start;justify-content:space-between;margin-top:12px}#status{font-size:15px;line-height:1.4;margin:0;min-height:24px}#save-status{font:10px monospace;color:#9cb39b;text-align:right;min-width:100px}#controls{display:flex;align-items:center;gap:18px;margin-top:12px}nav{display:grid;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,38px);gap:4px;touch-action:none;user-select:none}nav button{padding:0;min-height:0;font-size:17px}nav button[data-dir=up]{grid-column:2}nav button[data-dir=left]{grid-column:1;grid-row:2}nav button[data-dir=down]{grid-column:2;grid-row:2}nav button[data-dir=right]{grid-column:3;grid-row:2}.pressed{background:#a7bb88!important;color:#233c31;transform:translateY(2px)}#interact{background:#d2b67c;color:#263b31;min-width:160px;touch-action:manipulation}#controls p{font:11px/1.8 monospace;color:#b4c0a1}footer{font:10px monospace;color:#8b9f8c;margin-top:16px;display:flex;justify-content:space-between}@media(min-width:900px) and (min-height:551px){#stage{aspect-ratio:3/2;width:100%;max-height:calc(100dvh - 380px)}main{max-width:min(1160px,calc((100dvh - 380px)*1.5 + 32px))}h1 em{display:inline;margin-left:16px;font-size:14px}nav{display:flex}nav button{width:43px;height:38px}}@media(max-width:600px){main{padding-top:15px}header{align-items:start;margin-bottom:12px}h1{font-size:27px}h1 em{font-size:12px}.eyebrow{font-size:8px;letter-spacing:1px}.tools{flex-direction:column;gap:5px}.tools button{font-size:11px;padding:8px;min-height:34px}.tools kbd{display:none}.ribbon{font-size:10px;padding:10px 8px}#stage{min-height:0;max-height:none;aspect-ratio:3/2}.panel{padding:8px}.panel-inner{padding:15px}h2{font-size:23px}#panel-body{font-size:14px;line-height:1.5}#choices{margin-top:12px;gap:7px}#choices button{font-size:12px;padding:10px}#controls{gap:12px;justify-content:space-between}#controls p{display:none}#interact{min-width:140px}#interact kbd{display:block;margin:4px 0 0}#status{font-size:13px}#save-status{font-size:9px;min-width:70px}footer{line-height:1.8;font-size:9px}footer span{display:none}#location{font-size:10px;bottom:6px;padding:5px 7px}#panel-body .ending{max-height:135px}}@media(max-height:550px) and (orientation:landscape){main{padding-top:6px;display:grid;grid-template-columns:1fr 170px;gap:5px 12px;max-width:1000px}header{grid-column:2;grid-row:1/3;display:block;margin:0}h1{font-size:22px}.tools{margin-top:12px}.eyebrow{font-size:8px}#stage{grid-column:1;grid-row:2/6;width:100%;max-height:calc(100dvh - 50px);min-height:0}.ribbon{grid-column:1;grid-row:1;font-size:10px;padding:6px}.below{grid-column:2;display:block}#controls{grid-column:2;flex-wrap:wrap;margin:0;gap:6px}#controls p,footer,#save-status{display:none}#interact{min-width:135px}.panel-inner{padding:15px}#panel-body{font-size:13px}h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Comfortable controls and readable context without rescaling the pixel artwork. */
button{min-width:48px;min-height:48px}
nav{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:8px}
nav button{min-height:48px}
#location{color:#fff4d3;background:#142c25;border:1px solid #e9ce91;max-width:calc(100% - 16px);white-space:normal;text-align:center;line-height:1.4;font-size:13px}
#save-status{color:#c3d1b9}#controls p{color:#d4dec5}
.touch-hint{display:none}
@media(min-width:900px) and (min-height:551px){nav button{width:48px;height:48px}}
@media(max-width:600px){
.tools{gap:8px}.tools button{min-height:48px;min-width:64px}
#location{font-size:12px;padding:6px 9px}
#interact{min-width:140px;min-height:56px}
}
@media(max-width:600px) and (orientation:portrait){
main{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:max(12px,env(safe-area-inset-bottom))}
#stage{flex-shrink:0;width:100%;aspect-ratio:3/2}
#controls{margin-top:auto;padding-top:20px;padding-bottom:8px;flex-shrink:0}
footer{flex-shrink:0}
}
@media(pointer:coarse){
#interact kbd{display:none}.touch-hint{display:block;font:11px/1.4 monospace;margin-top:4px}
}
/* Keep the landscape sidebar inside the screen as touch controls grow. */
@media(max-height:550px) and (orientation:landscape){
main{height:100dvh;grid-template-rows:auto auto minmax(0,1fr) auto}
header h1{margin:6px 0}header h1 em{font-size:12px;letter-spacing:1px;margin-top:6px}
.tools{margin-top:6px}
.tools button{padding:8px}
#stage{grid-row:2/5;height:100%;aspect-ratio:auto}
.below{grid-row:3}
#controls{grid-row:4}
}