:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#101720;color:#f7efdc}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#2d3c43,#111720 65%);min-height:100vh}main{max-width:850px;margin:auto;padding:22px 18px 12px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}header small,.sub{font-size:10px;letter-spacing:2px;color:#a5b8b2}h1{font:700 clamp(21px,4vw,35px) Georgia,serif;margin:5px 0}header p{font-size:13px;margin:0;color:#c4c7b7}button{font:600 13px system-ui;color:#fff1d2;border:1px solid #697575;background:#344749;border-radius:9px;padding:10px 14px;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #f6d270;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button:active,.pressed{filter:brightness(1.35);transform:translateY(2px)}[hidden]{display:none!important}.console{background:#263438;border:1px solid #526362;border-radius:18px;padding:12px;box-shadow:0 20px 70px #0006}.topline,.hud{display:flex;align-items:center;justify-content:space-between;gap:6px}.topline{padding:0 4px 10px;font:700 11px monospace;letter-spacing:1px;color:#ecd18f}.topline button{font-size:11px;padding:5px 10px}.screen{position:relative;background:#101b27;border:5px solid #0c161b;border-radius:8px;overflow:hidden}canvas{display:block;width:100%;aspect-ratio:8/5;image-rendering:pixelated}#real{position:absolute;inset:0;overflow:auto;background:#152025}#real img{width:100%;display:block;max-height:65%;object-fit:cover;object-position:center}#real .caption{padding:12px 18px;background:linear-gradient(#28312b,#172126)}.caption small{font:10px monospace;letter-spacing:2px;color:#e8c572}.caption h2{font:700 clamp(17px,3vw,26px) Georgia;margin:4px 0}.caption p{font-size:clamp(12px,1.8vw,15px);line-height:1.4;margin:6px 0 10px}.caption button{background:#c78747;color:#131c22;margin-right:6px}.hud{padding:10px 4px;font:700 12px monospace}.hud #health{color:#ff987e}.hud button{font-size:11px;padding:6px 10px}#objective{font-size:14px;margin:5px 5px;line-height:1.4;min-height:20px}#hint{color:#b6c4be;font-size:12px;margin:6px 5px;min-height:30px;line-height:1.4}.controls{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 14px;gap:8px;user-select:none;-webkit-user-select:none}.dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,40px);gap:3px}.dpad button{padding:0;background:#465659;border-bottom:4px solid #1b252b;border-radius:7px;font-size:18px;touch-action:none}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.center{grid-area:2/2;align-self:center;text-align:center;color:#73817b}.actions{display:flex;gap:10px;align-items:center}.actions button{width:61px;height:61px;border-radius:50%;padding:5px;font-size:20px;touch-action:none;border-bottom:5px solid #14222a}.actions small{font-size:9px;display:block}.actions .attack{background:#b94748}.actions .jump{background:#446d99}.actions .talk{font-size:12px;width:51px;height:51px;background:#72693d}footer{text-align:center;color:#a1b0aa;font-size:10px}.sub{text-align:center;margin-top:20px;font-size:9px}#overlay{position:fixed;inset:0;z-index:5;background:#07111cd9;display:flex;justify-content:center;align-items:center;padding:18px}.panel{background:#233638;border:2px solid #c8aa68;border-radius:14px;padding:24px;width:min(620px,100%);max-height:90dvh;overflow:auto;box-shadow:0 24px 80px #0009}.panel>small{color:#e3be74;font:10px monospace;letter-spacing:2px}.panel h2{font:700 25px Georgia;margin:9px 0 15px}.panel p{line-height:1.6;font-size:15px}.panel #continue{background:#e0b36d;color:#1d2d33;min-width:145px;margin-top:15px}.panel #newgame{margin-left:8px}.mapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mapcell{padding:10px 7px;border:1px solid #667778;border-radius:7px;font-size:11px;min-height:66px;background:#192b32}.mapcell b{display:block;color:#e4c58c;margin-bottom:4px}.mapcell.done{border-color:#94c998;background:#29493f}.mapcell.here{outline:2px solid #fff0b5}.mapcell.route{box-shadow:inset 0 0 0 2px #80cbd1}.maplegend{font-size:12px!important;color:#c7d5cd}.fortress,.home{padding:9px;border:1px solid #7f7594;border-radius:7px;text-align:center;font-size:12px;margin:8px 0}#glitch{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#76e8d577 0 3px,transparent 3px 11px);mix-blend-mode:screen;animation:glitch .18s steps(2) infinite}@keyframes glitch{50%{transform:translate(12px,-4px);filter:hue-rotate(150deg)}75%{opacity:.3}}.credits{text-align:center;line-height:1.8}.credits h3{font:700 30px monospace;letter-spacing:4px;color:#f1cb75}@media(max-width:520px){main{padding:10px 8px}header{margin:8px 7px 14px}.console{padding:7px}.screen{border-width:3px}#real img{max-height:51%}.caption{padding:8px 10px!important}.caption p{font-size:11px}.caption h2{font-size:17px}.caption button{font-size:11px;padding:7px 9px}.controls{padding:5px 4px 10px}.actions{gap:6px}.actions button{width:54px;height:54px}.actions .talk{width:45px;height:45px}.dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,36px)}.panel{padding:18px}.hud{font-size:10px}.mapcell{font-size:10px;padding:8px 5px}#objective{font-size:12px}#hint{font-size:11px}}@media(max-height:560px) and (orientation:landscape){main{max-width:900px;padding:4px}header,.sub,footer{display:none}.console{position:relative;padding:5px 150px}.controls{position:absolute;inset:0;pointer-events:none}.controls button{pointer-events:auto}.dpad{position:absolute;left:5px;bottom:45px}.actions{position:absolute;right:8px;bottom:70px;flex-wrap:wrap;width:120px}#hint{display:none}.screen canvas{max-height:65vh;width:100%}.hud{padding:4px}}

/* Chunky, comfortable handheld shell. */
main{max-width:690px}.console{background:linear-gradient(135deg,#d6d5c7,#aaaeb0);border:2px solid #eceadd;border-bottom:10px solid #7d828c;border-radius:22px 22px 66px 22px;padding:20px;color:#283448;box-shadow:inset 3px 3px 0 #f1ecda,0 22px 65px #0008}.topline{color:#454369;font-size:11px;padding-bottom:13px}.topline:before{content:'●';color:#bd4d5a;text-shadow:0 0 8px #f97575}.topline button{background:#63657a}.screen{border:12px solid #5c6271;border-bottom-width:20px;border-radius:12px 12px 32px 12px;box-shadow:inset 0 0 0 3px #242d3d}.hud{padding:12px 0;color:#38355a}.hud #health{color:#a73555}.hud button{background:#66637e;border:0}#objective{font-weight:700;color:#343750}#hint{color:#505765}.dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,48px);gap:0;filter:drop-shadow(3px 5px 1px #777b80)}.dpad button{background:#303644;border-radius:4px;border:1px solid #252932;border-bottom:5px solid #1c2231;font-size:25px}.center{height:48px;background:#303644;margin:0;color:#5a626d;display:grid;place-items:center}.actions{display:grid;grid-template-columns:70px 70px;gap:12px;transform:rotate(-5deg)}.actions button{width:70px;height:70px;font-size:25px;border:2px solid #692348;border-bottom:7px solid #5b2044;box-shadow:2px 3px 0 #83858b;background:#a63e69}.actions .jump{background:#a63e69}.actions .talk{width:64px;height:64px;background:#777689;border-color:#555769;font-size:13px}.actions .peace{width:64px;height:64px;background:conic-gradient(#86d8c3 var(--charge,0%),#626a78 0);color:#22374b;border-color:#516f75;font-size:24px}.actions .peace:disabled{background:#e2e5de;color:#adb6b7;border-color:#b4bab8;opacity:1;box-shadow:none}.actions .peace.ready{box-shadow:0 0 12px #a8ffe4,inset 0 0 0 3px #c3efdc}.controls{padding:14px 2px 8px;gap:12px}.actions small{font-size:10px}.speaker{display:flex;justify-content:flex-end;gap:7px;margin:16px 8px 10px;transform:rotate(-12deg)}.speaker i{height:35px;width:5px;background:#777d86;border-radius:4px;box-shadow:1px 1px #e1e0d5}footer{color:#525b68;font-size:10px}.scene-art{position:relative}.scene-art #sceneImage{max-height:none;width:100%;display:block}.loose-cord{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.cartridge{position:absolute;left:7%;top:56%;width:8%;height:14%;background:#777a77;border:3px solid #4c514e;border-radius:3px;transform:rotate(-12deg);display:grid;place-items:center;box-shadow:4px 5px 7px #0008}.cartridge span{font:bold italic clamp(15px,4vw,35px) cursive;color:#191b1c;background:#b7b5a4;width:80%;text-align:center}.screen:has(#real:not([hidden])) canvas{display:none}#real{position:relative;inset:auto;overflow:visible}.caption{color:#f7ecd5}#real .caption{padding:16px!important}.mapcell p{font-size:12px;line-height:1.5}.scripture{font:22px Georgia;line-height:1.6!important;color:#f0d99f}
@media(max-width:520px){main{padding:8px}.console{padding:13px 11px 16px;border-radius:18px 18px 48px 18px}.screen{border-width:7px;border-bottom-width:14px}.controls{padding:12px 0 5px}.dpad{grid-template-columns:repeat(3,47px);grid-template-rows:repeat(3,44px)}.center{height:44px}.actions{grid-template-columns:64px 64px;gap:10px}.actions button{width:64px;height:64px}.actions .talk,.actions .peace{width:59px;height:59px}.hud{font-size:11px}.caption p{font-size:13px}.caption h2{font-size:21px}.caption button{font-size:13px;padding:10px}.speaker{margin-top:11px}.speaker i{height:26px}.mapgrid{grid-template-columns:1fr 1fr}}
@media(max-height:560px) and (orientation:landscape){.console{padding:5px 165px}.controls{padding:0}.actions{width:148px;right:3px;bottom:50px}.dpad{left:6px;bottom:60px}.speaker{display:none}.screen{border-width:5px}#real .caption{padding:8px!important}}

#sceneCanvas{display:block!important;width:100%;height:auto;aspect-ratio:8/5;image-rendering:auto}.scene-art img[hidden]{display:none!important}

/* Gesture protection stays inside the play surfaces. */
.controls,.controls *,#game,#sceneCanvas,.hud,.topline,#objective,#hint,.speaker{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.controls,#game,#sceneCanvas{touch-action:none}
.controls button{touch-action:none;-webkit-tap-highlight-color:transparent}
.speaker{width:max-content;margin:38px 0 16px auto;transform:rotate(-12deg);transform-origin:center;pointer-events:none}
.speaker *,.dpad .center{pointer-events:none}
@media(pointer:coarse){.console>footer{display:none}}
@media(max-width:360px){.actions{grid-template-columns:59px 59px;gap:8px}.actions button{width:59px;height:59px}.dpad{grid-template-columns:repeat(3,44px)}.controls{gap:8px}}