*{box-sizing:border-box}html,body{overscroll-behavior:none;background:#1d2124;height:100%;margin:0;overflow:hidden}#frame{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#1d2124;position:absolute;inset:0;overflow:hidden}#app,#app canvas{width:100%;height:100%;display:block}.hud-hint{top:calc(16px + env(safe-area-inset-top,0px));text-align:center;color:#d8dcde;text-shadow:0 1px 2px #000;pointer-events:none;font:600 14px/1.4 system-ui,sans-serif;transition:opacity .6s;position:absolute;left:0;right:0}.hud-hint.hidden{opacity:0}.thumb-zone{touch-action:none;height:55%;position:absolute;bottom:0;left:0;right:0}.thumb-base{pointer-events:none;opacity:.5;background:#d8dcde0f;border:2px solid #d8dcde40;border-radius:50%;width:112px;height:112px;margin:-56px 0 0 -56px;transition:opacity .2s;position:absolute;top:70%;left:25%}.thumb-zone.active .thumb-base{opacity:1}.thumb-knob{background:#d8dcde8c;border-radius:50%;width:48px;height:48px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hud-status{top:calc(48px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px));pointer-events:none;color:#d8dcde;text-shadow:0 1px 2px #000;align-items:center;gap:10px;font:600 13px/1 system-ui,sans-serif;display:flex;position:absolute}.hp-bar{background:#00000080;border:1px solid #d8dcde59;border-radius:5px;width:120px;height:10px;overflow:hidden}.hp-fill{transform-origin:0;background:#b9c4a8;width:100%;height:100%;transition:transform .1s linear}.hp-bar.low .hp-fill{background:#c9b37a}.death-screen{z-index:10;color:#e6e2dc;touch-action:none;background:#0c0a0ab8;flex-direction:column;justify-content:center;align-items:center;gap:14px;font:600 15px/1.4 system-ui,sans-serif;display:flex;position:absolute;inset:0}.death-screen[hidden]{display:none}.death-title{letter-spacing:.2em;color:#c9c0b4;font-size:40px}.death-restart{min-width:160px;min-height:48px;color:inherit;font:inherit;cursor:pointer;background:#e6e2dc1f;border:1px solid #e6e2dc80;border-radius:24px}.hud-version{top:calc(3px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));z-index:20;color:#d8dcde;opacity:.55;text-shadow:0 1px 1px #000;white-space:nowrap;pointer-events:none;font:500 10px/12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;position:absolute}.route-ui{color:#e1e4dc;font:500 14px/1.4 system-ui,sans-serif}.route-ui[hidden],.route-ui [hidden]{display:none}.route-status{top:calc(76px + env(safe-area-inset-top,0px));pointer-events:none;color:#77dac8;text-shadow:0 1px 2px #000;position:absolute;left:12px}.route-ui button{color:inherit;font:inherit;cursor:pointer;background:#253733;border:1px solid #6c8b83;border-radius:8px;min-height:44px;padding:12px 16px}.map-open{top:calc(108px + env(safe-area-inset-top,0px));z-index:2;position:absolute;left:12px}.route-map,.run-complete{z-index:8;padding:calc(24px + env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));background:#151e1cf7;position:absolute;inset:0;overflow:auto}.route-map h1{margin:0 0 8px;font-size:24px}.map-progress{margin:0 0 12px}.map-pins{color:#84b9ac;text-align:center;border-block:1px dashed #577168;padding:16px 0}.route-cards{gap:10px;max-width:960px;margin:16px auto;display:grid}.route-card{text-align:left;flex-direction:column;gap:6px;display:flex}.route-card strong{font-size:19px}.route-card span{font-size:13px}.route-card:hover,.route-card:focus-visible{background:#344f48;outline:2px solid #77dac8}.run-complete{text-align:center;padding-top:25vh}@media (width>=700px){.route-cards{grid-template-columns:repeat(3,1fr)}}