:root{color-scheme:dark;--bg-deep: #01070b;--bg-ocean: #08171d;--panel: rgba(7, 19, 24, .34);--panel-strong: rgba(5, 16, 21, .84);--line: rgba(176, 220, 213, .16);--line-strong: rgba(211, 238, 234, .36);--text-main: #effaf8;--text-dim: #c3d7d3;--accent: #8df2e7;--accent-hot: #ffb07c;--shadow: rgba(0, 0, 0, .42)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden;background:radial-gradient(circle at top,rgba(34,105,120,.2),transparent 44%),linear-gradient(180deg,#031015,#020508);color:var(--text-main);font-family:Trebuchet MS,Gill Sans,Avenir Next,sans-serif}body{touch-action:none}button,input,textarea,select{font:inherit}[hidden]{display:none!important}.page-shell{position:relative;min-height:100vh;min-height:100svh}.bg-orb{position:absolute;border-radius:999px;filter:blur(54px);pointer-events:none;opacity:.54}.orb-a{inset:auto auto 8% 8%;width:min(48vw,360px);height:min(48vw,360px);background:radial-gradient(circle,rgba(91,249,227,.18),transparent 68%)}.orb-b{inset:6% 6% auto auto;width:min(32vw,240px);height:min(32vw,240px);background:radial-gradient(circle,rgba(255,153,112,.12),transparent 74%)}.bg-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(103,193,193,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(103,193,193,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(180deg,#0000003d,#000000e0);mask-image:linear-gradient(180deg,#0000003d,#000000e0);pointer-events:none}.arena-shell{position:relative;z-index:1;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(circle at 50% 20%,rgba(91,249,227,.08),transparent 40%),radial-gradient(circle at 50% 100%,rgba(255,153,112,.05),transparent 34%),linear-gradient(180deg,#02070af0,#010406fa)}#game{display:block;width:100%;height:100%;touch-action:none}.brand-tag,.room-pill,.settings-button,.feed-banner,.player-badge,.settings-card{border:1px solid var(--line);background:var(--panel);box-shadow:0 14px 30px var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand-tag,.room-pill,.feed-banner,.player-badge,.touch-anchor,.touch-stick,.touch-line,.settings-panel{position:absolute;z-index:3}.brand-tag{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));padding:.36rem .74rem .42rem;border-radius:999px;letter-spacing:.16em;text-transform:lowercase;font-size:.78rem;font-style:italic;color:var(--text-dim);pointer-events:none}.room-pill{top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.45rem;min-width:6rem;max-width:min(62vw,18rem);padding:.46rem .82rem .52rem;border-radius:999px;pointer-events:none}.room-pill strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings-button{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:4;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.5rem .86rem .58rem;border-radius:999px;color:var(--text-main);letter-spacing:.14em;text-transform:lowercase;cursor:pointer}.settings-button:hover,.settings-button:focus-visible,.action-button:hover,.action-button:focus-visible{border-color:var(--line-strong);background:#081e24eb}.feed-banner{top:calc(max(12px,env(safe-area-inset-top)) + 42px);left:50%;transform:translate(-50%);width:min(62vw,22rem);padding:.44rem .82rem .54rem;border-radius:18px;text-align:center;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.feed-banner strong{display:block;margin-top:.18rem;font-size:.88rem;line-height:1.35}.feed-banner.feed-idle{opacity:0;transform:translate(-50%) translateY(-8px)}.player-badge{left:50%;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 6px);transform:translate(-50%);display:flex;align-items:center;gap:.72rem;min-width:10rem;max-width:min(74vw,18rem);padding:.58rem .82rem .64rem;border-radius:999px;pointer-events:none}.player-color-swatch{width:.82rem;height:.82rem;border-radius:999px;background:#72e8d799;box-shadow:0 0 18px #72e8d766;flex:0 0 auto}.player-badge-copy{min-width:0}.player-name-readout{display:block;color:var(--text-dim);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-score-line{display:block;margin-top:.16rem;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-sep{color:var(--text-dim);margin:0 .26rem}.settings-panel{top:calc(max(12px,env(safe-area-inset-top)) + 42px);right:max(12px,env(safe-area-inset-right));width:min(82vw,18rem);z-index:5}.settings-card{padding:.86rem;border-radius:22px;background:var(--panel-strong)}.settings-grid{display:grid;gap:.52rem}.settings-row{padding:.72rem .8rem;border-radius:14px;background:#ffffff0a}.settings-row strong{display:block;margin-top:.24rem;line-height:1.35}.action-row{display:grid;gap:.5rem;margin-top:.7rem}.action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(122,234,216,.35);border-radius:999px;background:#06161bdb;color:var(--text-main);padding:.8rem 1rem;letter-spacing:.08em;cursor:pointer}.action-button.alt{border-color:#ffa47857}.chip-label{margin:0;color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;font-size:.58rem}.touch-anchor,.touch-stick,.touch-line{pointer-events:none;opacity:0;transition:opacity .12s ease}.touch-anchor,.touch-stick{width:84px;height:84px;margin-left:-42px;margin-top:-42px;border-radius:999px}.touch-anchor{border:1px solid rgba(122,234,216,.28);background:radial-gradient(circle,#7aead814,#7aead805);box-shadow:0 0 0 1px #7aead814 inset}.touch-stick{width:42px;height:42px;margin-left:-21px;margin-top:-21px;background:radial-gradient(circle,#ffffffeb,#7aead82e);box-shadow:0 0 28px #f4f7fb47}.touch-line{height:3px;transform-origin:left center;background:linear-gradient(90deg,#7aead899,#7aead800);border-radius:999px}.touch-visible{opacity:1}.splash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,rgba(34,105,120,.14),transparent 50%),linear-gradient(180deg,#010a0e,#000304);touch-action:none;-webkit-user-select:none;user-select:none}.splash-overlay[hidden]{display:none!important}.splash-content{text-align:center;max-width:320px;padding:0 1.5rem}.splash-title{font-size:3.2rem;font-weight:900;letter-spacing:.18em;text-transform:lowercase;color:var(--text-main);margin:0 0 .6rem;text-shadow:0 0 40px rgba(141,242,231,.3)}.splash-sub{font-size:.85rem;color:var(--text-dim);letter-spacing:.12em;margin:0 0 2.4rem}.splash-name-picker{display:flex;justify-content:center;gap:.6rem;margin-bottom:1.4rem}.name-slot{display:flex;flex-direction:column;align-items:center;gap:.15rem}.slot-char{font-size:2rem;font-weight:700;color:var(--accent);text-transform:lowercase;width:2.4rem;height:2.6rem;display:flex;align-items:center;justify-content:center;background:var(--panel-strong);border-radius:6px;border:1px solid var(--line-strong);text-shadow:0 0 12px var(--accent);-webkit-user-select:none;user-select:none}.slot-arrow{background:none;border:none;color:var(--text-dim);font-size:1.1rem;cursor:pointer;padding:.3rem .6rem;line-height:1;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color .1s}.slot-arrow:active{color:var(--accent)}.splash-color-picker{margin-bottom:1.6rem}.color-label{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:lowercase;color:var(--text-dim);margin-bottom:.6rem}.color-slider-row{display:flex;align-items:center;gap:.8rem}.hue-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:28px;border-radius:14px;background:linear-gradient(to right,#f04242,#f09942,#f0f042,#99f042,#42f042,#42f099,#42f0f0,#4299f0,#4242f0,#9942f0,#f042f0,#f04299,#f04242);outline:none;border:1px solid rgba(140,220,230,.15);cursor:pointer}.hue-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:32px;border-radius:12px;background:#fff;border:2px solid rgba(0,0,0,.3);box-shadow:0 0 8px #fff6;cursor:grab}.hue-slider::-moz-range-thumb{width:24px;height:32px;border-radius:12px;background:#fff;border:2px solid rgba(0,0,0,.3);box-shadow:0 0 8px #fff6;cursor:grab}.color-preview{width:36px;height:36px;border-radius:999px;border:2px solid rgba(255,255,255,.2);flex-shrink:0;transition:background .1s ease,box-shadow .1s ease}.splash-modes{display:flex;flex-direction:column;gap:1rem}.splash-mode-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(122,234,216,.25);border-radius:14px;background:#06161bcc;padding:1.2rem 1.6rem;cursor:pointer;text-align:left;transition:border-color .18s ease,background .18s ease,transform .1s ease}.splash-mode-btn:active{transform:scale(.97)}.splash-mode-btn:hover,.splash-mode-btn:focus-visible{border-color:var(--accent);background:#081e24eb}.splash-teams{border-color:#ff8a5240}.splash-teams:hover,.splash-teams:focus-visible{border-color:#ff8a5299}.mode-label{display:block;font-size:1.15rem;font-weight:700;letter-spacing:.1em;text-transform:lowercase;color:var(--text-main)}.mode-desc{display:block;font-size:.75rem;color:var(--text-dim);letter-spacing:.08em;margin-top:.3rem}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,rgba(34,105,120,.14),transparent 50%),linear-gradient(180deg,#010a0e,#000304);touch-action:none;-webkit-user-select:none;user-select:none}.tutorial-overlay[hidden]{display:none!important}.tutorial-pages{position:relative;width:100%;max-width:340px}.tutorial-page{display:none;flex-direction:column;align-items:center;gap:1rem}.tutorial-page.active{display:flex}.tut-heading{margin:0;font-size:1.6rem;letter-spacing:.18em;text-transform:lowercase;color:var(--accent);text-shadow:0 0 24px rgba(141,242,231,.4)}.tut-body{margin:0;font-size:.88rem;color:var(--text-dim);text-align:center;line-height:1.5;max-width:280px}.tut-scene{position:relative;width:260px;height:260px;border-radius:24px;overflow:hidden;background:#020d13;border:1px solid rgba(70,190,210,.12)}.tut-grid-lines{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(70,190,210,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(70,190,210,.08) 1px,transparent 1px);background-size:52px 52px;background-position:25px 25px}.tut-squid{position:absolute;width:40px;height:40px;border-radius:999px;background:radial-gradient(circle,#67b6ff,#67b6ff99);filter:drop-shadow(0 0 10px rgba(103,182,255,.6)) drop-shadow(0 0 24px rgba(103,182,255,.4))}.tut-enemy{position:absolute;width:36px;height:36px;border-radius:999px;background:radial-gradient(circle,#ff8a52,#ff8a5299);filter:drop-shadow(0 0 10px rgba(255,138,82,.5)) drop-shadow(0 0 24px rgba(255,100,50,.3))}.tut-finger{position:absolute;width:52px;height:52px;border-radius:999px;border:2px solid rgba(122,234,216,.4);background:radial-gradient(circle,#ffffff2e,#7aead80f);box-shadow:0 0 20px #7aead826}.tut-finger:after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:999px;background:radial-gradient(circle,#fffc,#7aead84d);box-shadow:0 0 12px #f4f7fb66}.tut-bullet{position:absolute;width:8px;height:8px;border-radius:999px;background:#f4f7fb;box-shadow:0 0 10px #f4f7fb99,0 0 24px #8df2e74d;opacity:0}.tut-recoil-arrow{position:absolute;width:40px;height:3px;background:linear-gradient(90deg,#8df2e7b3,#8df2e700);border-radius:999px;opacity:0}.tut-recoil-arrow:before{content:"";position:absolute;left:-1px;top:-5px;border:6px solid transparent;border-right-color:#8df2e7b3}.tut-trail{position:absolute;height:4px;border-radius:999px;background:linear-gradient(90deg,#f4f7fb00,#f4f7fb40);opacity:0}.tut-wall{position:absolute;background:#050e14;border:1px solid rgba(103,182,255,.25);border-radius:4px;box-shadow:inset 0 0 8px #67b6ff14,0 0 12px #67b6ff0f}.tut-wall-top{top:0;left:52px;right:52px;height:26px}.tut-wall-right{top:52px;right:0;width:26px;bottom:52px}.tut-paint-glow{position:absolute;border-radius:4px;opacity:0}.tut-burst-ring{position:absolute;border-radius:999px;border:3px solid rgba(244,247,251,.6);box-shadow:0 0 28px #f4f7fb4d;opacity:0}.tut-squid-anim{top:116px;left:130px;transform:translate(-50%,-50%) rotate(0);animation:squid-recoil 4s ease-in-out infinite}.tut-finger-anim{top:190px;left:130px;transform:translate(-50%,-50%);animation:finger-drag 4s ease-in-out infinite}.tut-bullet-anim{top:116px;left:144px;animation:bullet-fly 4s ease-out infinite}.tut-bullet-anim-2{top:116px;left:144px;animation:bullet-fly 4s ease-out infinite .12s}.tut-trail-anim{top:114px;left:80px;width:50px;animation:trail-show 4s ease-in-out infinite}.tut-arrow-anim{top:104px;left:52px;animation:arrow-show 4s ease-in-out infinite}@keyframes finger-drag{0%,10%{left:130px;top:190px;opacity:0}15%{opacity:1}20%,35%{left:200px;top:190px;opacity:1}40%{opacity:0}50%,60%{left:130px;top:190px;opacity:0}65%{opacity:1}70%,85%{left:130px;top:120px;opacity:1}90%{opacity:0}to{left:130px;top:190px;opacity:0}}@keyframes squid-recoil{0%,20%{left:130px;top:116px;transform:translate(-50%,-50%) rotate(0)}25%,48%{left:72px;top:116px;transform:translate(-50%,-50%) rotate(0)}50%{left:72px;top:116px;transform:translate(-50%,-50%) rotate(-90deg)}75%,98%{left:72px;top:178px;transform:translate(-50%,-50%) rotate(-90deg)}to{left:72px;top:178px;transform:translate(-50%,-50%) rotate(-90deg)}}@keyframes bullet-fly{0%,20%{left:144px;top:112px;opacity:0}22%{opacity:1}35%{left:240px;top:112px;opacity:.3}36%,to{opacity:0}}@keyframes trail-show{0%,20%{opacity:0;width:0;left:130px}25%{opacity:.4;width:58px;left:72px}45%{opacity:0}to{opacity:0}}@keyframes arrow-show{0%,22%{opacity:0}26%{opacity:.9;left:30px;top:104px;transform:scaleX(1)}44%{opacity:0}to{opacity:0}}.tut-squid-paint{bottom:60px;left:50px;transform:rotate(-20deg);animation:squid-idle 2s ease-in-out infinite}@keyframes squid-idle{0%,to{transform:rotate(-20deg) translateY(0)}50%{transform:rotate(-20deg) translateY(-3px)}}.tut-bullet-paint{bottom:72px;left:64px;animation:bullet-paint 3s ease-out infinite}@keyframes bullet-paint{0%,5%{left:64px;bottom:72px;opacity:0}8%{opacity:1}30%{left:210px;bottom:72px;opacity:1}32%{left:222px;bottom:72px}34%{left:222px;bottom:72px;opacity:1}50%{left:222px;bottom:200px;opacity:.6}55%{opacity:0}to{opacity:0}}.tut-paint-anim{right:0;bottom:52px;width:26px;height:40px;background:#f4f7fb80;box-shadow:0 0 20px #f4f7fb4d;animation:paint-appear 3s ease-out infinite}.tut-paint-anim-2{right:52px;top:0;width:48px;height:26px;background:#f4f7fb80;box-shadow:0 0 20px #f4f7fb4d;animation:paint-appear 3s ease-out infinite .5s}@keyframes paint-appear{0%,32%{opacity:0;transform:scale(.6)}40%{opacity:.8;transform:scale(1.1)}50%{opacity:.6;transform:scale(1)}80%{opacity:.6}to{opacity:0}}.tut-squid-burst-shooter{bottom:80px;left:60px;transform:rotate(-35deg)}.tut-enemy-anim{top:90px;right:70px;animation:enemy-hit 3.5s ease-out infinite}@keyframes enemy-hit{0%,35%{opacity:1;transform:scale(1)}40%{opacity:1;transform:scale(1.3)}45%{opacity:0;transform:scale(0)}to{opacity:0}}.tut-bullet-burst{bottom:86px;left:74px;animation:bullet-to-enemy 3.5s ease-out infinite}@keyframes bullet-to-enemy{0%,5%{opacity:0;left:74px;bottom:86px}8%{opacity:1}32%{left:172px;bottom:172px;opacity:1}36%{opacity:0}to{opacity:0}}.tut-burst-anim{top:90px;right:70px;width:0;height:0;transform:translate(50%,-50%);animation:burst-expand 3.5s ease-out infinite}@keyframes burst-expand{0%,39%{width:0;height:0;opacity:0;border-width:3px}42%{width:24px;height:24px;opacity:1;border-width:3px;border-color:#f4f7fbcc}55%{width:140px;height:140px;opacity:.5;border-width:2px;border-color:#f4f7fb4d}70%{width:180px;height:180px;opacity:0;border-width:1px}to{opacity:0}}.tut-nav{display:flex;flex-direction:column;align-items:center;gap:1.2rem;margin-top:2rem}.tut-dots{display:flex;gap:.6rem}.tut-dot{width:8px;height:8px;border-radius:999px;background:#8df2e733;transition:background .2s ease,transform .2s ease}.tut-dot.active{background:#8df2e7cc;transform:scale(1.3);box-shadow:0 0 8px #8df2e766}.tut-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(122,234,216,.35);border-radius:999px;background:#06161bdb;color:var(--text-main);padding:.8rem 2.4rem;font-size:1rem;letter-spacing:.14em;text-transform:lowercase;cursor:pointer;box-shadow:0 0 20px #8df2e71a;transition:border-color .18s ease,background .18s ease}.tut-button:hover,.tut-button:focus-visible{border-color:var(--accent);background:#081e24eb}@media(max-width:720px){.room-pill{max-width:50vw}.feed-banner{width:calc(100vw - 44px);max-width:22rem}.player-badge{max-width:calc(100vw - 48px)}}