*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#d3eae4;color:#233b36}#stage{position:fixed;top:0;right:0;bottom:0;left:0}canvas{display:block;width:100%;height:100%}.hud{position:fixed;top:12px;left:18px;right:18px;display:flex;justify-content:space-between;gap:12px;font-weight:700;text-shadow:0 1px white}.hud #info{max-width:60%;text-align:right}#message{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;font-size:clamp(24px,5vw,52px);font-weight:800;text-shadow:0 2px white}.media{width:100%;height:100%;object-fit:cover;position:absolute}.panel{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;width:min(360px,85vw);height:max-content;padding:25px;background:#fffcf1;border-radius:18px;box-shadow:0 8px 40px #365a4544}.panel[hidden]{display:none}input,button{font:inherit;border:0;border-radius:12px;padding:12px}input{background:#eee7d4;width:100%;margin-bottom:12px}button{background:#d35b45;color:#fff;font-weight:700;cursor:pointer}form button{width:100%}#error{color:#b32d2d}#controls[hidden]{display:none}.stick,.jump{position:fixed;bottom:22px;width:100px;height:100px;border-radius:50%;touch-action:none;display:grid;place-items:center}.stick{left:25px;background:#fff8;border:3px solid #ffffffaa}.jump{right:25px;font-size:26px;background:#db6c53dd}.rotate{display:none}@media(orientation:portrait){.rotate{display:grid;place-items:center;position:fixed;top:0;right:0;bottom:0;left:0;background:#243d38ee;color:#fff;font-size:24px;z-index:20}}.color-label{display:flex;align-items:center;gap:12px;margin-bottom:10px}.color-label input{width:48px;height:36px;margin:0;padding:2px}#message{padding:0 12%;text-align:center}.history{position:fixed;bottom:8px;left:8%;right:8%;max-height:32%;overflow:auto;background:#fffdf0ee;border-radius:10px;padding:8px;font-size:13px;z-index:4}.history[hidden]{display:none}#map{position:fixed;top:calc(48px + env(safe-area-inset-top));left:calc(18px + env(safe-area-inset-left));width:88px;height:88px;border-radius:10px;box-shadow:0 1px 4px #233b3660;pointer-events:none}#map[hidden]{display:none}.hud{top:calc(12px + env(safe-area-inset-top));left:calc(18px + env(safe-area-inset-left));right:calc(18px + env(safe-area-inset-right))}.stick,.jump{bottom:calc(22px + env(safe-area-inset-bottom))}.stick{left:calc(25px + env(safe-area-inset-left))}.jump{right:calc(25px + env(safe-area-inset-right))}html,body,#app{width:100%;height:100%;overflow:hidden}.hud{align-items:flex-start}.hud #info{margin-left:auto}.hud #fullscreen{flex:none;padding:7px 10px;font-size:13px;background:#325b51e8}.entry{position:fixed;z-index:10;top:var(--visible-top,0px);left:0;right:0;height:var(--visible-height,100dvh);overflow:auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;align-items:safe center;justify-content:center}.entry[hidden]{display:none}.panel{position:relative;inset:auto;margin:auto;width:min(360px,100%);height:auto;max-height:none;flex-shrink:0}.panel h1{margin:0 0 6px}.panel p{margin:0 0 8px}.panel #error:empty{display:none}.media{object-fit:contain;background:#000}#boundary-alert,#fullscreen-notice{position:fixed;z-index:5;top:calc(52px + env(safe-area-inset-top));left:50%;transform:translate(-50%);max-width:70%;padding:6px 12px;border-radius:8px;background:#233b36e8;color:#fff;text-align:center;font-size:14px;pointer-events:none}#boundary-alert[hidden],#fullscreen-notice[hidden]{display:none}@media(max-height:400px){.panel{padding:12px 18px}.panel h1{font-size:20px}.panel p{font-size:13px}.panel input,.panel button{padding:8px}.panel input,.panel .color-label{margin-bottom:6px}}@media(max-height:320px){.stick,.jump{width:80px;height:80px;bottom:calc(10px + env(safe-area-inset-bottom))}#map{width:68px;height:68px;top:calc(42px + env(safe-area-inset-top))}#message{font-size:clamp(18px,8vh,32px)}}#fullscreen-notice{top:auto;bottom:calc(10px + env(safe-area-inset-bottom))}.stick span{display:grid;place-items:center;width:46%;height:46%;border-radius:50%;background:#fffb;color:#233b36;font-size:12px;font-weight:700;pointer-events:none;will-change:transform}.browser-guide{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;display:flex;align-items:safe center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#d3eae4}.guide-card{flex-shrink:0;margin:auto;width:min(520px,100%);padding:24px;background:#fffcf1;border-radius:18px;box-shadow:0 8px 40px #365a4544}.guide-card h1{margin:0 0 10px;font-size:24px}.guide-card p,.guide-card ol{margin:8px 0;font-size:15px;line-height:1.5}.guide-card ol{padding-left:24px}.guide-card label{font-size:13px;font-weight:700}.guide-card input{margin:6px 0;width:100%;font-size:14px}.guide-card button{width:100%}.guide-card #copy-result:empty{display:none}.guide-card .guide-note{color:#4a6c62;font-size:13px}@media(max-height:400px){.guide-card{padding:14px 18px}.guide-card h1{font-size:20px}.guide-card p,.guide-card ol{margin:4px 0;font-size:13px}.guide-card input,.guide-card button{padding:8px}#safari-tip{font-size:12px}}.entry:not([hidden])~.rotate{display:none}.hud{z-index:11;pointer-events:none}.hud #fullscreen{pointer-events:auto}.hud #status,.hud #info{padding:5px 8px;border-radius:7px;background:#fff9e4dd;color:#243d37;text-shadow:none}.panel,.guide-card{border:2px solid #ddc799}.stick{box-shadow:0 3px 10px #4d3e2930}.jump{box-shadow:0 3px 10px #4d3e2945}#controls .stick,#controls .jump{transition:opacity .15s}#controls .stick.player-overlap,#controls .jump.player-overlap{opacity:.32}#controls .stick.player-overlap:active,#controls .jump.player-overlap:active{opacity:.65}.load-progress{margin:6px 0 0;font-size:13px;color:#5a7068;text-align:center}@media(max-height:400px){.load-progress{margin:2px 0 0;font-size:11px;line-height:1.2}}@media(max-height:260px){.load-progress{display:none}}.pick{display:flex;gap:8px;margin-bottom:8px}.pick input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}.gender{flex:1;text-align:center}.gender span{display:block;padding:9px 0;border-radius:12px;background:#eee7d4;font-weight:700;border:2px solid transparent;cursor:pointer}.gender input:checked+span{background:#fff4d6;border-color:#d35b45;color:#a1402e}.gender input:focus-visible+span,.swatch input:focus-visible+span{outline:3px solid #2f6f8f;outline-offset:2px}.swatches{justify-content:space-between}.swatch{flex:1;display:flex;justify-content:center}.swatch span{display:block;width:30px;height:30px;border-radius:50%;background:var(--c);border:3px solid #fffcf1;box-shadow:0 0 0 1px #bda97a;cursor:pointer}.swatch input:checked+span{box-shadow:0 0 0 3px #233b36}@media(max-height:400px){.gender span{padding:5px 0;font-size:14px}.swatch span{width:24px;height:24px;border-width:2px}.pick{margin-bottom:5px}}.hud #info[data-danger=true]{background:#c9412ee8;color:#fff}html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}#stage,.hud,#controls,#map,#message{touch-action:none}