:root{font-family:Arial,"PingFang SC",sans-serif;color:#244b61}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#c8e4ef}#scene{position:fixed;inset:0;width:100%;height:100%;display:block}.hud{position:absolute;top:max(20px,env(safe-area-inset-top));left:23px;right:21px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.speed{display:flex;align-items:baseline;gap:5px;opacity:.8}.speed strong{font-size:27px;font-weight:400;font-variant-numeric:tabular-nums}.speed small{font-size:10px}.actions{display:flex;gap:8px;pointer-events:auto}button{appearance:none;width:38px;height:38px;border:1px solid #fff8;background:#fff7;backdrop-filter:blur(12px);border-radius:50%;font-size:22px;line-height:1;color:#31566a;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #e48340}.controls{position:absolute;left:50%;bottom:max(44px,calc(env(safe-area-inset-bottom) + 24px));transform:translateX(-50%);width:calc(100% - 24px);height:clamp(112px,32vw,158px);max-width:610px;user-select:none;-webkit-user-select:none;touch-action:none;filter:drop-shadow(0 12px 17px #24495a27)}.board-shape{position:absolute;width:100%;height:100%;inset:0;pointer-events:none}.foot{position:absolute;top:50%;width:100px;height:100px;border-radius:50%;transform:translate(-50%,-50%);touch-action:none;display:flex;align-items:center;justify-content:center;cursor:grab}#rear{left:26%}#front{left:74%}.ring{width:91px;height:91px;border-radius:50%;border:1.5px solid #3f718a99;background:#ffffff15;box-shadow:inset 0 0 0 6px #ffffff30;position:relative;transition:width .13s,height .13s,border-color .13s,background .13s;pointer-events:none}.foot.active .ring{width:76px;height:76px;border-color:#db8854;background:#fff5;box-shadow:inset 0 0 0 4px #ffffff55}.binding{position:absolute;top:50%;width:32px;height:58px;border:2px solid #557e9055;border-radius:10px;background:repeating-linear-gradient(0deg,transparent 0 15px,#6b91a448 16px 19px);transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none}.rear-binding{left:26%}.front-binding{left:74%;transform:translate(-50%,-50%) rotate(12deg)}#error{position:absolute;top:40%;left:10%;right:10%;padding:30px;background:#fff;text-align:center}@media(orientation:landscape){.controls{width:min(620px,75vw);height:115px;bottom:max(18px,env(safe-area-inset-bottom))}.hud{top:max(14px,env(safe-area-inset-top))}.ring{width:86px;height:86px}.foot.active .ring{width:72px;height:72px}}@media(max-width:360px){.foot{width:88px;height:88px}.ring{width:80px;height:80px}.foot.active .ring{width:68px;height:68px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#pose{position:relative}#pose i{display:block;position:absolute;left:15px;top:7px;width:7px;height:23px;border:1.5px solid #31566a;border-radius:50% / 25%;transform:rotate(15deg);background:#31566a18}#pose[data-mode="heel"] i{transform:rotate(90deg);border-color:#b6774f;background:#b6774f23}#pose[data-mode="toe"] i{transform:rotate(90deg);border-color:#366f8d;background:#366f8d35}

#reset.recovery{color:#9f431f;background:#ffc393;border-color:#df8b55;box-shadow:0 0 0 5px #ec995b33}

.ring{border-width:calc(1px + var(--load,.5)*2px)}

button:disabled{opacity:.35;cursor:default}

[hidden]{display:none!important}#stance-picker{position:fixed;inset:0;display:grid;place-items:center;background:#183f5866;backdrop-filter:blur(7px);z-index:5}.stance-options{display:flex;gap:16px;padding:20px}.stance-options button{width:145px;height:238px;border-radius:24px;background:#e8f4faee;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;box-shadow:0 12px 35px #12344b30}.stance-options svg{width:125px;height:180px;fill:#bfd6df;stroke:#3b6377;stroke-width:2}.stance-options svg .lead{fill:#ed9d62}.stance-options text{fill:#264657;stroke:none;font-size:15px;text-anchor:middle}.stance-options .nose{fill:none}.controls[data-stance="goofy"] .binding{scale:1 -1}.controls.edge-warning .board-shape{filter:drop-shadow(0 0 5px #ef9444)}#feedback{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);padding:18px;border-radius:24px;background:#eaf6fad9;width:110px;height:100px}#feedback svg{width:75px;height:60px;fill:none;stroke:#bf703c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#stance[data-stance="goofy"]{transform:scaleX(-1)}

.foot-label{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#31566a;pointer-events:none}#front .ring{border-color:#c37c4f}#rear .ring{border-color:#528ba5}#front.active .ring{border-color:#e6813c}#rear.active .ring{border-color:#337e9d}

.balance-shading{pointer-events:none}.controls[data-centered="true"] .board-shape{opacity:.94}

@media(max-width:420px){.actions{gap:5px}.actions button{width:34px;height:34px}.hud{left:14px;right:14px}}

#sound{font-size:17px}#stance-picker{display:flex;flex-direction:column;justify-content:center;align-items:center}.gesture-guide{display:flex;flex-direction:column;gap:10px;text-align:center;color:#f1f8fc;font-size:16px;text-shadow:0 1px 3px #244b61}.gesture-guide small{font-size:14px;opacity:.85}
@media(max-height:500px){.stance-options{padding:8px}.stance-options button{width:130px;height:175px}.stance-options svg{height:130px}.gesture-guide{gap:5px;font-size:14px}}

@media(max-width:370px){.hud{align-items:flex-start}.actions{max-width:238px;flex-wrap:wrap;justify-content:flex-end;gap:4px}.actions button{width:30px;height:30px}.speed strong{font-size:24px}}

#journey-hud{position:fixed;right:max(18px,env(safe-area-inset-right));top:calc(max(16px,env(safe-area-inset-top)) + 55px);z-index:3;display:flex;align-items:center;gap:7px;color:#f8f4ee;text-shadow:0 1px 4px #314358;font-variant-numeric:tabular-nums;pointer-events:none;font-size:13px;transition:transform .2s,color .2s}#journey-hud strong{font-size:19px;font-weight:600;margin-right:10px}.diamond-icon{color:#b9f2e8;font-size:14px}#journey-hud.collected{transform:scale(1.09);color:#b9f2e8}@media(max-height:450px){#journey-hud{top:calc(max(8px,env(safe-area-inset-top)) + 49px);font-size:11px}#journey-hud strong{font-size:16px}}
@media(max-width:370px){#journey-hud{top:calc(max(20px,env(safe-area-inset-top)) + 82px)}}

#journey-hud.milestone strong{color:#ffe1b3}

/* R17 collectible feedback stays in the existing upper-right counter. */
.diamond-icon{color:#e748ff;text-shadow:0 0 9px #c72af8}#journey-hud.collected{color:#f8ccff;transform:none}#diamonds{display:inline-block;transform-origin:center;min-width:1.2em;font-size:17px;font-weight:700;color:#f6cbff}#gem-gain{position:absolute;right:0;top:29px;white-space:nowrap;color:#f8c8ff;font-size:13px;font-weight:600;opacity:0;text-shadow:0 0 9px #9d12c8}

#character{position:fixed;left:max(18px,env(safe-area-inset-left));top:calc(max(16px,env(safe-area-inset-top)) + 55px);font-size:24px}.character-options{display:flex;gap:9px;justify-content:center}.character-option{width:99px;height:118px;border-radius:18px;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7f5eff2;gap:3px;border:2px solid transparent;color:#294451}.character-option svg{width:75px;height:80px}.character-option[aria-pressed="true"]{border-color:var(--outfit);box-shadow:0 0 0 3px #ffffff88}.character-option span{white-space:nowrap}#character-picker{position:fixed;inset:0;z-index:7;display:grid;place-items:center;background:#172c3c77;backdrop-filter:blur(7px)}.character-sheet{position:relative;padding:28px 16px 24px;border-radius:26px;background:#e9f0f2ed;box-shadow:0 16px 60px #152e4940}.character-sheet p{margin:0 0 24px;font-size:18px;color:#284658}.character-sheet #character-close{position:absolute;right:10px;top:10px;width:30px;height:30px}#stance-picker .stance-options{padding:15px}#stance-picker .stance-options button{height:200px;width:138px}#stance-picker .stance-options svg{height:145px}.gesture-guide{gap:8px;font-size:14px}.gesture-guide small{font-size:12px}@media(max-height:600px){#stance-picker .character-option{height:82px;width:92px}#stance-picker .character-option svg{height:48px}#stance-picker .stance-options{padding:9px}#stance-picker .stance-options button{height:146px;width:125px}#stance-picker .stance-options svg{height:105px}.gesture-guide{gap:4px;font-size:12px}.gesture-guide small{font-size:10px}}

/* R18 hand-cut amethyst HUD, readable in bright snow and dusk. */
.diamond-icon{width:27px;height:29px;overflow:visible;filter:drop-shadow(0 2px 3px #402a6c66) drop-shadow(0 0 5px #cc76ee55);flex:none}#diamonds{font-size:20px;font-weight:650;letter-spacing:.01em;color:#fff0ff;text-shadow:0 1px 3px #4d356b}#journey-hud{gap:8px}#journey-hud.collected .diamond-icon{filter:drop-shadow(0 0 8px #f4b8ff);transform:scale(1.08)}

/* Skin tone remains independent of outfit and gender. */
.skin-options{display:flex;justify-content:center;gap:8px;margin:9px 0 12px}.skin-option{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #ffffff55;border-radius:18px;background:#203a4940;color:#f6f3ec;font:inherit;font-size:12px;min-height:36px}.skin-option i{display:block;background:var(--skin);width:17px;height:17px;border-radius:50%;border:1px solid #ffffff70}.skin-option[aria-pressed="true"]{border-color:#fff6d7;background:#43657799;box-shadow:0 0 0 1px #fff6d766}@media(max-height:550px){.skin-options{margin:4px 0}.skin-option{padding:4px 8px;min-height:30px}}
.character-sheet .skin-option{color:#284658;background:#dce6eb;border-color:#9fb0bb}.character-sheet .skin-option[aria-pressed="true"]{background:#244b61;color:#fff8e9;border-color:#244b61}.skin-option:focus-visible{outline:3px solid #ffd77a;outline-offset:2px}

/* R20: one compact objective; results only after finishing. */
#trail-hud{position:absolute;left:18px;top:118px;color:#fff;text-shadow:0 1px 5px #24424f;font:14px system-ui;pointer-events:none}#trail-hud strong,#trail-status{display:block}#trail-hud small{font-weight:400;opacity:.85}#trail-status{font-size:12px;margin-top:4px}
#trail-result{position:fixed;inset:0;z-index:30;background:#102d3c80;display:grid;place-items:center;font-family:system-ui;color:#e6f5f5}#trail-result[hidden],#trail-hud[hidden]{display:none}#trail-result>div{width:min(320px,80vw);background:#163944eF;border:1px solid #8eaaa7;border-radius:24px;padding:28px;text-align:center;box-shadow:0 18px 60px #0b223850}#trail-result p{font-size:13px;line-height:1.7;color:#bbd5d5}#trail-retry{display:block;width:100%;padding:13px;border:0;border-radius:14px;background:#b7efd3;color:#173d43;font-weight:bold;font-size:16px}#trail-result a,.gesture-guide a{display:block;margin-top:14px;color:inherit;font-size:12px}#trail-result h2{margin:12px 0}