:root{color-scheme:dark;font-family:system-ui,"Noto Sans TC","Microsoft JhengHei",sans-serif;background:#101a1d;color:#edf0e6;touch-action:none}
*{box-sizing:border-box}html,body,#game{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#game{position:relative;background:#101a1d;isolation:isolate}
#viewport,#viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#viewport canvas{touch-action:none}
#look-pad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:2;display:none}
#topbar{position:absolute;z-index:4;left:max(15px,env(safe-area-inset-left));right:max(15px,env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none;text-shadow:0 1px 4px #000a}
.site{display:flex;flex-direction:column;letter-spacing:.14em;font-size:16px}.site small{font-size:9px;color:#b6c9be;letter-spacing:.22em;margin-top:4px}
#progress{padding:9px 12px;background:#121c1eb8;border:1px solid #9bbba35c;border-radius:9px;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
#reticle{position:absolute;z-index:2;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 2px #f3f6e5a1,0 0 4px #000b;pointer-events:none}
#notice{position:absolute;z-index:4;left:12%;right:12%;top:calc(76px + env(safe-area-inset-top));text-align:center;text-shadow:0 2px 8px #000;min-height:2em;pointer-events:none;font-size:14px;font-weight:600;transition:opacity .25s}
#help{position:absolute;z-index:5;right:max(15px,env(safe-area-inset-right));top:calc(76px + env(safe-area-inset-top));width:35px;height:35px;border-radius:50%;border:1px solid #acc3bd88;color:#e9f5ec;background:#142a2cb4;font-weight:700}
#controls{position:absolute;z-index:3;inset:0;pointer-events:none;display:none}
#joystick{position:absolute;left:max(25px,env(safe-area-inset-left));bottom:calc(29px + env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;background:#11282b78;border:2px solid #c5e3d96c;pointer-events:auto;touch-action:none;display:grid;place-items:center}
#stick{width:55px;height:55px;border-radius:50%;background:#e1efddd6;border:3px solid #142a2b;box-shadow:0 4px 18px #0004;transform:translate(0,0);pointer-events:none}
#dialog{position:absolute;z-index:10;inset:0;display:none;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));background:#061217bb;overflow-y:auto;touch-action:pan-y}
#dialog.open{display:flex}
.paper{background:linear-gradient(170deg,#203034,#131f23);border:1px solid #8baba59a;border-radius:15px;width:min(480px,100%);padding:clamp(18px,5vw,32px);box-shadow:0 25px 60px #0009}
.eyebrow{font-size:10px;color:#a4d6c1;letter-spacing:.24em}
h1{font-size:clamp(25px,7vw,35px);letter-spacing:.15em;margin:13px 0 18px}
.paper p{line-height:1.7;font-size:14px;color:#d8e2dc}.paper .muted{font-size:12px;color:#aebdb6}.instructions{background:#0c2227;padding:10px 12px;border-left:3px solid #82b9a7}
#begin{width:100%;min-height:48px;margin-top:8px;border:1px solid #b4d5c4;background:#d9e8d2;color:#153339;border-radius:8px;font-weight:800}
#begin:focus-visible,#help:focus-visible{outline:3px solid #fff5ab;outline-offset:3px}
#error{position:absolute;inset:20%;z-index:20;display:grid;align-content:center;background:#280f18e8;padding:30px;border:1px solid #e79b97;border-radius:12px}
.hidden{display:none!important}
@media (hover:none),(pointer:coarse){#look-pad,#controls{display:block}#joystick{width:118px;height:118px;bottom:calc(25px + env(safe-area-inset-bottom))}}
@media (max-width:420px){#topbar{top:calc(10px + env(safe-area-inset-top))}.site{font-size:14px}#progress{font-size:13px;padding:8px}#notice{top:calc(68px + env(safe-area-inset-top))}#help{top:calc(68px + env(safe-area-inset-top))}}
@media (max-height:550px){#joystick{width:87px;height:87px;bottom:12px}}
@media (prefers-reduced-motion:reduce){#notice{transition:none}}

/* Prototype v0.2: responsive diagnostic overlay and tuning controls. */
#debug-panel{position:absolute;z-index:6;top:calc(119px + env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:min(340px,91vw);padding:12px;background:#0d2427ec;color:#e6f6e9;border:1px solid #a2c5b2;border-radius:11px;box-shadow:0 8px 24px #0008;touch-action:manipulation}
#debug-panel .debug-title{font-size:13px;font-weight:750;display:flex;justify-content:space-between;gap:8px}
.debug-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:9px 0}
.debug-actions button{font-size:13px;padding:9px 4px;color:#ecf5ef;background:#2c474a;border:1px solid #8cb6af;border-radius:6px;min-height:42px}
.debug-actions button.active{color:#172a2f;background:#e7dfb8;font-weight:800}
#debug-panel small{font-size:11px;color:#bbd1c5}
.paper .setting{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:#dfeddf;margin-top:15px;margin-bottom:4px}
#look-sensitivity{width:100%;margin:0 0 8px;accent-color:#acd9bd;touch-action:pan-x;min-height:26px}
#look-value{font-variant-numeric:tabular-nums}
@media(max-width:430px){#debug-panel{top:calc(110px + env(safe-area-inset-top))}}