:root{font-family:"Courier New",monospace;color:#172f25;background:#102e23;font-weight:700}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none}
body{display:grid;place-items:center}
#game{position:relative;width:min(100vw,56.25dvh);height:min(177.7778vw,100dvh);overflow:hidden;background:#8bd975;box-shadow:0 0 0 999px #102e23}
#canvas,canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
button{font:inherit;cursor:pointer;border:0;font-weight:900;letter-spacing:1px}
#hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:8px;right:8px;padding:10px 12px;border:4px solid #173d2e;border-radius:0;background:#fff8d9f2;box-shadow:5px 5px 0 #173d2e;font-size:clamp(16px,4.6vw,22px);line-height:1.2;letter-spacing:.2px;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);pointer-events:none}
#chapter{font-size:1.08em;font-weight:900;color:#174e36;text-transform:uppercase}
#objective{margin-top:5px;color:#172f25}
#score{margin-top:4px;font-weight:900;color:#76451f}
#sound{position:absolute;top:142px;right:10px;width:46px;height:46px;border:4px solid #173d2e;border-radius:0;background:#fff4c8;color:#174e36;font-size:24px;box-shadow:4px 4px 0 #173d2e;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
#toast,#quest-toast,#world-toast{position:absolute;left:5%;right:5%;padding:8px;background:#fff8d9ed;border:3px solid #214b37;text-align:center;font-size:clamp(17px,5vw,23px);line-height:1.25;font-weight:900;color:#173d2e;text-shadow:2px 2px #fff;box-shadow:4px 4px 0 #214b37;opacity:0;transition:opacity .15s;pointer-events:none}
#toast{top:48%}
#toast.below-controls{top:auto;bottom:max(12px,env(safe-area-inset-bottom))}
#quest-toast{top:21%;background:#ffe179f2;color:#49301e}
#world-toast{top:32%;font-size:clamp(16px,4.5vw,21px)}
#toast.show,#quest-toast.show,#world-toast.show{opacity:1}
#joystick{position:absolute;left:66.666%;top:75%;width:33.333%;aspect-ratio:1;transform:translate(-50%,-50%);border:4px solid #244d3fc9;border-radius:50%;background:#fffbdc9c;box-shadow:0 6px 0 #25543b7a;touch-action:none}
#stick{position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%);border-radius:50%;background:#fef6cc;border:4px solid #39694d;box-shadow:0 4px #28533b}
#tap{display:none;position:absolute;left:40%;top:75%;width:18%;aspect-ratio:1;transform:translate(-50%,0);border:4px solid #56351f;border-radius:0;background:#ffe078;color:#472918;font-size:clamp(16px,5vw,24px);box-shadow:5px 5px 0 #56351f;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);animation:pulse 1s steps(2,end) infinite}
#tap.visible{display:block}
@keyframes pulse{50%{transform:translate(-50%,0) scale(1.1);background:#fff3ad}
}
#dialog,#start{position:absolute;inset:0;display:grid;place-items:center;background:#173f32b8;padding:14px}
#dialog[hidden],#start[hidden]{display:none}
.dialog-card,.start-card{width:100%;background:#fff8d9;border:5px solid #173d2e;border-radius:0;box-shadow:8px 8px 0 #102e23;padding:20px 16px;text-align:center;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.dialog-card{align-self:end;margin-bottom:10vh}
#speaker{font-size:clamp(21px,6vw,28px);font-weight:900;color:#1b6742;text-transform:uppercase}
#line{font-size:clamp(18px,5vw,24px);font-weight:900;line-height:1.35;min-height:96px}
#next,#play{background:#ffca55;color:#432817;border:4px solid #56351f;border-radius:0;padding:12px 28px;font-size:clamp(19px,5.5vw,26px);box-shadow:5px 5px 0 #56351f;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
#next:active,#play:active,#sound:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #56351f}
.start-card h1{font-size:clamp(40px,12vw,62px);line-height:1;margin:12px 0 8px;color:#1c6943;letter-spacing:3px;text-shadow:4px 4px 0 #f0c95b}
.start-card p{font-size:clamp(18px,5vw,24px);font-weight:900;line-height:1.35;margin:10px 0 18px}
.dog-mark{position:relative;width:64px;height:48px;margin:0 auto;background:#cb8c56;border:6px solid #20292c;box-shadow:6px 6px 0 #356144}
.dog-mark:before{content:"";position:absolute;left:-14px;top:-6px;width:14px;height:25px;background:#20292c;box-shadow:64px 0 0 #20292c}
.dog-mark:after{content:"";position:absolute;left:17px;bottom:-7px;width:20px;height:14px;background:#e5b27a;border:4px solid #20292c}
.dog-mark i:before,.dog-mark i:after{content:"";position:absolute;top:12px;width:7px;height:7px;background:#20292c}
.dog-mark i:before{left:12px}
.dog-mark i:after{right:12px}