:root{--glass: rgba(10, 30, 42, .62);--line: rgba(255,255,255,.18);--ink: #f2fbff;--accent: #36d1c4}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#0b2a3a;color:var(--ink);font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}#app canvas{display:block;position:fixed;inset:0;width:100vw;height:100vh}#ui{position:fixed;inset:0;pointer-events:none}#ui>*{pointer-events:auto}#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#0b6e86,#0b2a3a);z-index:50}.ld-title{font-size:34px;font-weight:700;letter-spacing:.5px}.ld-sub{margin:8px 0 14px;opacity:.85}.ld-bar{width:200px;height:6px;border-radius:3px;background:#fff3;overflow:hidden}.ld-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}.hud-top{position:absolute;top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;display:flex;gap:6px;align-items:flex-start;pointer-events:none}.hud-top>*{pointer-events:auto}.spacer{flex:1;pointer-events:none!important}.pill{background:var(--glass);color:var(--ink);border:1px solid var(--line);border-radius:18px;height:34px;padding:0 12px;font:inherit;font-weight:600;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.pill.icon{width:34px;padding:0;font-size:16px}.cog-wrap{display:flex;flex-direction:column;align-items:center}.ver{font-size:10px;opacity:.8;margin-top:2px;text-shadow:0 1px 2px #000}.pop{position:absolute;top:calc(50px + env(safe-area-inset-top));left:8px;width:min(340px,calc(100vw - 16px));background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:10px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.view-pop{left:auto;right:8px;max-height:70vh;overflow:auto}.hidden{display:none!important}.row{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 6px}input[type=range]{width:100%;accent-color:var(--accent);height:28px}.seg{display:flex;gap:4px;margin:4px 0 8px}.seg button,.chip,.tab,.list-btn{background:#ffffff14;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:6px 9px;font:inherit;font-size:12.5px}.seg button{flex:1}.seg button.on,.chip.on,.tab.on{background:var(--accent);color:#022;border-color:transparent;font-weight:600}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}.list-btn{display:block;width:100%;text-align:left;margin:4px 0;padding:9px 10px;font-size:14px}.panel{position:absolute;inset:calc(8px + env(safe-area-inset-top)) 8px 8px 8px;max-width:520px;margin-left:auto;background:#081a24db;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.panel-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}.panel-head b{flex:1;font-size:16px}.ver2{opacity:.7;font-size:12px}.tabs{display:flex;gap:6px;padding:8px 12px 0;flex-wrap:wrap}.panel-body{flex:1;overflow:auto;padding:8px 12px 16px;touch-action:pan-y}.srow{margin:8px 0}.srow label{display:flex;justify-content:space-between;font-size:13px;opacity:.95}.srow label span{opacity:.75}.check{display:flex;gap:8px;align-items:center;margin:10px 0}.hint{font-size:12.5px;opacity:.8;margin:6px 0}.update{position:absolute;left:50%;transform:translate(-50%);top:calc(52px + env(safe-area-inset-top));background:var(--glass);border:1px solid var(--line);padding:8px 12px;border-radius:12px}.update button{margin-left:8px;background:var(--accent);border:0;border-radius:8px;padding:5px 10px;font-weight:600}.barrel-tag{position:absolute;top:30%;left:50%;transform:translate(-50%,-10px);opacity:0;transition:all .3s;background:#00000059;padding:6px 14px;border-radius:20px;font-weight:700;font-size:18px;pointer-events:none!important}.barrel-tag.show{opacity:1;transform:translate(-50%)}#touch-ui{position:absolute;inset:0;pointer-events:none}#touch-ui>*{pointer-events:auto}.stick-base{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));width:124px;height:124px;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:#ffffff12;pointer-events:none!important;transition:opacity .2s;opacity:.55}.stick-base.left{left:22px}.stick-base.right{right:22px}.stick-base.active{opacity:1}.stick-knob{position:absolute;left:37px;top:37px;width:46px;height:46px;border-radius:50%;background:#ffffff73;box-shadow:0 2px 8px #0000004d}.tbtn{position:absolute;right:22px;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--ink);font-size:18px}.tbtn.up{bottom:calc(222px + env(safe-area-inset-bottom))}.tbtn.down{bottom:calc(162px + env(safe-area-inset-bottom))}.tbtn.fast{right:auto;left:22px;bottom:calc(162px + env(safe-area-inset-bottom));font-size:20px}.tbtn.on{background:var(--accent);color:#022}@media(orientation:landscape)and (max-height:500px){.stick-base{bottom:14px;width:110px;height:110px}.stick-knob{left:31px;top:31px}.tbtn.up{bottom:142px;right:140px}.tbtn.down{bottom:82px;right:140px}.tbtn.fast{bottom:82px;left:140px}.pop{max-height:calc(100vh - 60px);overflow:auto}}@media(hover:hover)and (pointer:fine){.stick-base,.tbtn{display:none}}.list-btn.hot{background:#36d1c438;border-color:#36d1c499}.toast{position:absolute;left:50%;bottom:calc(170px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--glass);border:1px solid var(--line);padding:8px 14px;border-radius:14px;max-width:calc(100vw - 32px);text-align:center;transition:opacity .6s;pointer-events:none!important}.toast.gone{opacity:0}.pill.ride{font-size:13px;padding:0 10px}.barrel-marker{position:absolute;transform:translate(-50%,-100%);pointer-events:none!important;display:flex;align-items:center;gap:4px;background:#082834b8;border:1px solid rgba(54,209,196,.8);color:#fff;padding:3px 8px;border-radius:12px;font-size:12.5px;font-weight:700;white-space:nowrap;animation:bmPulse 1.2s ease-in-out infinite}.barrel-marker .bm-arrow{display:none;color:var(--accent)}.barrel-marker.edge{transform:translate(-50%,-50%)}.barrel-marker.edge .bm-arrow{display:inline-block}@keyframes bmPulse{0%,to{box-shadow:0 0 #36d1c480}50%{box-shadow:0 0 0 6px #36d1c400}}.pill.sound{animation:bmPulse 1.2s ease-in-out infinite}.status-pill{position:absolute;left:50%;transform:translate(-50%);bottom:calc(160px + env(safe-area-inset-bottom));background:var(--glass);border:1px solid var(--line);padding:5px 12px;border-radius:14px;font-weight:600;font-size:13px;pointer-events:none!important}.status-pill.hot{background:#36d1c4d9;color:#022}body.surfer-mode .tbtn.up,body.surfer-mode .tbtn.down{display:none}.tbtn.off{display:none;width:auto;height:50px;padding:0 16px;border-radius:25px;font-size:15px;font-weight:600;bottom:calc(222px + env(safe-area-inset-bottom))}body.surfer-mode.riding .tbtn.off{display:block}@media(hover:hover)and (pointer:fine){body.surfer-mode.riding .tbtn.off{display:block}}@media(orientation:landscape)and (max-height:500px){.status-pill{bottom:14px}}@media(orientation:landscape)and (max-height:500px){.tbtn.off{bottom:142px;right:140px}}.intro{position:fixed;inset:0;z-index:50;pointer-events:none;font-family:inherit}.intro.hidden{display:none}.intro-bar{position:absolute;left:0;right:0;height:0;background:#000;transition:height .9s ease}.intro-bar.top{top:0}.intro-bar.bottom{bottom:0}.intro.letterbox .intro-bar{height:7vh}.intro-fade{position:absolute;inset:0;background:#000;opacity:0}.intro-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:18px;color:#fff;opacity:0;white-space:nowrap;letter-spacing:.32em;font-weight:600;font-size:clamp(13px,3.4vw,22px);text-shadow:0 1px 12px rgba(0,0,0,.45)}.intro-card .ln{display:block;width:clamp(28px,9vw,90px);height:1px;background:currentColor;opacity:.85}.intro-card.big{font-size:clamp(30px,9vw,64px);letter-spacing:.22em;font-weight:800}.intro-card.dark{color:#111;text-shadow:none}.intro-shot{position:absolute;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));font:600 12px/1 ui-monospace,Menlo,monospace;color:#ffffff8c;letter-spacing:.08em;text-shadow:0 0 3px rgba(0,0,0,.6)}.intro-shot.flash{animation:introShot 1.2s ease-out}@keyframes introShot{0%{color:#fff}to{color:#ffffff8c}}.intro-skip{position:absolute;top:calc(7vh + 10px);right:12px;pointer-events:auto;background:#00000059;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:16px;padding:6px 12px;font-size:13px}.intro-skip.hidden{display:none}.intro-sub{position:absolute;left:50%;bottom:calc(7vh + 18px);transform:translate(-50%);width:min(92vw,560px);text-align:center;color:#fff;font-size:clamp(14px,3.8vw,18px);text-shadow:0 1px 4px rgba(0,0,0,.8);transition:opacity .4s}.intro-credit{position:absolute;left:12px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:70vw;color:#ffffffb3;font-size:10px;text-shadow:0 0 3px rgba(0,0,0,.7)}.intro-tut{position:absolute;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translate(-50%);text-align:center;color:#fff;background:#04141e73;border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:10px 16px;font-size:clamp(13px,3.6vw,16px);text-shadow:0 1px 3px rgba(0,0,0,.6)}.intro-tut.hidden{display:none}.intro-tut .tt{font-weight:800;letter-spacing:.08em;margin-bottom:6px}.intro-tut .row{margin:3px 0}.intro-tut .hint{opacity:.7;font-size:12px;margin-top:4px}.intro-tut .key{display:inline-block;min-width:70px;padding:2px 8px;margin-right:6px;border-radius:8px;background:#ffffff2e;font-weight:700}.intro-tut .prog{letter-spacing:.3em;margin-top:4px;color:#7ff0d0}.intro-tut .arrow{font-size:44px;line-height:1;animation:introUp .8s ease-in-out infinite alternate;color:#7ff0d0}@keyframes introUp{0%{transform:translateY(6px)}to{transform:translateY(-6px)}}.intro-tap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:#000;color:#fff}.intro-tap.hidden{display:none}.intro-tap-in{display:flex;flex-direction:column;align-items:center;gap:14px}.intro-tap-in b{font-size:34px;letter-spacing:.25em}.intro-tap-in span{padding:10px 22px;border:1px solid rgba(255,255,255,.5);border-radius:22px;animation:introPulse 1.4s ease-in-out infinite alternate}.intro-tap-in small{opacity:.6}@keyframes introPulse{0%{opacity:.55}to{opacity:1}}body.intro-on #ui>*:not(#touch-ui){display:none!important}body.intro-on:not(.intro-play) #touch-ui>*{visibility:hidden}body.intro-play #touch-ui .tbtn{display:none!important}