:root{--h:186;--c:hsl(var(--h),100%,62%);--bg:#05060f;--tx:#dfe9ff;--dim:#7f8db3}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);overflow:hidden;font:15px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
body.play #cv{cursor:none}
.hide{display:none!important}
button,input{font:inherit;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* menus */
#ui{position:fixed;inset:0;display:flex;align-items:safe center;justify-content:center;overflow-y:auto;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:radial-gradient(ellipse at center,rgba(5,6,15,.6),rgba(5,6,15,.9));z-index:20}
#ui.off{display:none}
section{width:100%;max-width:440px;display:flex;flex-direction:column;gap:11px;margin:auto}
#s-setup,#s-set{max-width:640px}
h2{margin:0;text-align:center;font-size:21px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 0 12px var(--c)}
/* logo: the resting state is the finished logo; the class "go" replays the entrance */
.logo{width:min(100%,360px);height:auto;max-height:26vh;align-self:center;overflow:visible;cursor:pointer;--c5:hsl(calc(var(--h) + 140),100%,64%)}
.lg-tank,.lg-tr,.lg-l,.lg-5,.lg-shell,.lg-flash,.lg-ring,.lg-gun,.lg-tur{transform-box:fill-box;transform-origin:center}
.lg-s{stroke:var(--c);stroke-width:2.4;fill:rgba(3,6,16,.7)}
.lg-tank{filter:drop-shadow(0 0 4px var(--c))}
.lg-tr{stroke-dasharray:5 3}
.lg-l{stroke:#fff;stroke-width:8;filter:drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 14px var(--c))}
.lg-5{stroke:var(--c5);stroke-width:9;filter:drop-shadow(0 0 5px var(--c5)) drop-shadow(0 0 16px var(--c5));animation:lgPulse 2.8s ease-in-out infinite}
.lg-shell{stroke:#ffe9a8;stroke-width:5;opacity:0;filter:drop-shadow(0 0 6px #ffb347)}
.lg-flash{fill:#ffe9a8;stroke:none;opacity:0}
.lg-ring{stroke:var(--c5);stroke-width:4;opacity:0}
.lg-tur{transform-origin:22.5% 50%;animation:lgSweep 6s ease-in-out infinite}
.go .lg-tank{animation:lgTank .95s cubic-bezier(.2,.9,.3,1.12) both}
.go .lg-tr{animation:lgTread .95s linear both}
.go .lg-l{stroke-dasharray:1;animation:lgDraw .5s ease-out var(--d) both,lgBlink .16s linear var(--b)}
.go .lg-gun{animation:lgRecoil .34s ease-out 1.25s}
.go .lg-flash{animation:lgFlash .2s ease-out 1.25s}
.go .lg-shell{animation:lgShell .42s linear 1.25s}
.go .lg-ring{animation:lgRing .6s ease-out 1.67s}
.go .lg-5{animation:lgFive .6s cubic-bezier(.2,1.7,.4,1) 1.67s both,lgPulse 2.8s ease-in-out 2.6s infinite}
.go .lg-tur{animation:lgSweep 6s ease-in-out 2.4s infinite}
@keyframes lgTank{0%{transform:translateX(-150px);opacity:0}50%{opacity:1}100%{transform:none}}
@keyframes lgTread{0%{stroke-dashoffset:120}100%{stroke-dashoffset:0}}
@keyframes lgDraw{0%{stroke-dashoffset:1;opacity:0}15%{opacity:1}100%{stroke-dashoffset:0}}
@keyframes lgBlink{0%,100%{stroke:#fff}50%{stroke:#ffe9a8;transform:translateY(-3px)}}
@keyframes lgRecoil{0%{transform:none}22%{transform:translateX(-8px)}100%{transform:none}}
@keyframes lgFlash{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
@keyframes lgShell{0%{opacity:1;transform:none}98%{opacity:1}100%{opacity:0;transform:translateX(206px)}}
@keyframes lgRing{0%{opacity:1;transform:scale(.25)}100%{opacity:0;transform:scale(2.3)}}
@keyframes lgFive{0%{opacity:0;transform:scale(3) rotate(-30deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes lgPulse{0%,100%{stroke-width:9}50%{stroke-width:10.5}}
@keyframes lgSweep{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}}
.sub{margin:-4px 0 4px;text-align:center;color:var(--dim);letter-spacing:.06em;font-size:13px}
.row{display:flex;gap:10px;align-items:flex-end}
.grow{flex:1;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px 16px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld>span{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.fld>span b{color:var(--c);font-size:13px}
.fld small{color:var(--dim);font-size:12px;min-height:1.3em}
input:not([type=range]){height:44px;padding:0 12px;border-radius:9px;border:1px solid rgba(140,170,255,.28);background:rgba(10,14,32,.8);outline:0;width:100%;-webkit-user-select:text;user-select:text}
input:not([type=range]):focus{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 14px -4px var(--c)}
#jcode{text-transform:uppercase;letter-spacing:.4em;font-weight:700;font-size:20px;text-align:center}
input[type=range]{-webkit-appearance:none;appearance:none;height:44px;margin:0;background:none;width:100%;min-width:90px}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(140,170,255,.25)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(140,170,255,.25)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--c);border:0;box-shadow:0 0 10px var(--c)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--c);border:0;box-shadow:0 0 10px var(--c)}
#hue::-webkit-slider-runnable-track{background:linear-gradient(90deg,#f33,#ff3,#3f3,#3ff,#33f,#f3f,#f33)}
#hue::-moz-range-track{background:linear-gradient(90deg,#f33,#ff3,#3f3,#3ff,#33f,#f3f,#f33)}
.btn{min-height:46px;padding:0 16px;border-radius:10px;border:1px solid rgba(140,170,255,.32);background:rgba(12,17,38,.82);cursor:pointer;letter-spacing:.08em;text-transform:uppercase;font-weight:650;font-size:14px;transition:transform .08s,box-shadow .15s,border-color .15s}
.btn:hover,.btn:focus-visible{border-color:var(--c);box-shadow:0 0 16px -4px var(--c);outline:0}
.btn:active{transform:scale(.97)}
.btn.pri{min-height:52px;border-color:var(--c);color:#fff;background:linear-gradient(180deg,hsla(var(--h),100%,50%,.26),hsla(var(--h),100%,50%,.1));box-shadow:0 0 20px -6px var(--c),inset 0 0 14px -6px var(--c);text-shadow:0 0 8px var(--c)}
.btn.sm{min-height:40px;font-size:12px;color:var(--dim)}
.btn:disabled{opacity:.45;pointer-events:none}
.lnk{background:none;border:0;padding:0 4px;color:var(--c);cursor:pointer;text-transform:none;letter-spacing:0;font-size:12px}
.seg{display:flex;border:1px solid rgba(140,170,255,.28);border-radius:9px;overflow:hidden;background:rgba(10,14,32,.8)}
.seg button{flex:1;min-height:42px;padding:0 6px;border:0;background:none;cursor:pointer;font-size:13px;color:var(--dim);border-left:1px solid rgba(140,170,255,.16)}
.seg button:first-child{border-left:0}
.seg button.on{color:#fff;background:hsla(var(--h),100%,50%,.24);text-shadow:0 0 8px var(--c);box-shadow:inset 0 -2px 0 var(--c)}
.seg.ro{opacity:.6;pointer-events:none}
.step{display:flex;align-items:center;gap:14px}
.step button{width:44px;height:42px;border-radius:9px;border:1px solid rgba(140,170,255,.28);background:rgba(10,14,32,.8);cursor:pointer;font-size:20px}
.step b{font-size:22px;color:var(--c);min-width:2.2em;text-align:center}
.msg{margin:0;min-height:1.3em;text-align:center;color:#ffb36b;font-size:13px}
.pulse{animation:pulse 1.6s ease-in-out infinite;color:var(--dim)}
@keyframes pulse{50%{opacity:.35}}
.rec{margin:0;text-align:center;color:var(--dim);font-size:12px}
.room{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.room span{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.room b{font-size:34px;letter-spacing:.3em;color:#fff;text-shadow:0 0 10px var(--c),0 0 26px var(--c);-webkit-user-select:text;user-select:text}
.plist{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;max-height:150px;overflow-y:auto}
.plist>*{padding:6px 11px;border-radius:16px;border:1px solid hsla(var(--ph,200),100%,60%,.55);color:hsl(var(--ph,200),100%,78%);background:rgba(10,14,32,.8);font-size:13px}
.plist button{cursor:pointer}
.plist em{font-style:normal;color:var(--dim)}
.tbl{max-height:44vh;overflow-y:auto;border:1px solid rgba(140,170,255,.2);border-radius:10px;background:rgba(10,14,32,.75)}
.tbl div{display:grid;grid-template-columns:2em 1fr 4.6em 4.6em 4.6em;gap:4px;padding:6px 12px;font-size:13px;border-top:1px solid rgba(140,170,255,.1)}
.tbl div:first-child{border-top:0;color:var(--dim);font-size:10px;letter-spacing:.06em;text-transform:uppercase;position:sticky;top:0;background:#0a0e20}
.tbl div>*{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl div>:nth-child(2){text-align:left}
.tbl .me{background:hsla(var(--h),100%,50%,.16)}

/* in-game HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#hud>*{position:absolute}
#hl{left:calc(10px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top));width:min(34vw,200px)}
#hpw{height:12px;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);overflow:hidden}
#hp{height:100%;width:100%;transform-origin:0 50%;background:hsl(120,90%,50%);transition:transform .12s linear}
#fxs{display:flex;gap:5px;margin-top:5px;min-height:18px;font-size:11px;font-weight:700}
#fxs span{padding:1px 7px;border-radius:9px;border:1px solid currentColor;background:rgba(0,0,0,.45)}
#feed{margin-top:6px;font-size:12px;color:#c9d6ff;text-shadow:0 1px 3px #000}
#feed div{animation:feed 4.5s forwards;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes feed{0%,80%{opacity:1}100%{opacity:0}}
#info{left:50%;top:calc(8px + env(safe-area-inset-top));transform:translateX(-50%);pointer-events:auto;border:1px solid rgba(140,170,255,.25);border-radius:16px;background:rgba(5,8,20,.6);padding:5px 14px;font-size:13px;font-weight:650;letter-spacing:.05em;white-space:nowrap;cursor:pointer}
#info b{color:var(--c)}
#bmenu{right:calc(10px + env(safe-area-inset-right));top:calc(8px + env(safe-area-inset-top));width:42px;height:42px;border-radius:10px;border:1px solid rgba(140,170,255,.3);background:rgba(5,8,20,.6);pointer-events:auto;cursor:pointer;padding:9px}
#spect{left:50%;top:22%;transform:translateX(-50%);font-size:14px;color:#fff;text-shadow:0 0 10px #000,0 0 4px #000;letter-spacing:.06em;white-space:nowrap}
#banner{left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;opacity:0;transition:opacity .25s;white-space:nowrap}
#banner.on{opacity:1}
#banner b{display:block;font-size:clamp(34px,10vw,76px);font-weight:800;letter-spacing:.1em;color:#fff;text-shadow:0 0 10px var(--c),0 0 34px var(--c)}
#banner span{display:block;font-size:clamp(13px,3.4vw,19px);letter-spacing:.16em;text-transform:uppercase;color:#cfe0ff;text-shadow:0 0 8px #000}
#toast{position:fixed;z-index:40;pointer-events:none;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:6px 14px;border-radius:16px;background:rgba(5,8,20,.75);border:1px solid rgba(140,170,255,.3);font-size:13px;opacity:0;transition:opacity .25s;white-space:nowrap}
#toast.on{opacity:1}
#wps{left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto}
.wp{position:relative;width:54px;height:46px;border-radius:10px;border:1px solid rgba(140,170,255,.3);background:rgba(5,8,20,.6);cursor:pointer;padding:9px 13px;color:var(--dim);overflow:hidden}
.wp.on{color:#fff;border-color:var(--c);box-shadow:0 0 14px -4px var(--c)}
.wp kbd{position:absolute;left:5px;top:2px;font:10px system-ui;color:var(--dim)}
.wp i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);transform-origin:0 50%}
.wp.mine{margin-left:8px;color:#ffb3a8;border-color:rgba(255,120,100,.5)}
.wp.mine.none{opacity:.38}
.wp.mine b{position:absolute;right:4px;bottom:1px;font:700 12px system-ui;color:#fff}
.btn.wa{display:inline-flex;align-items:center;gap:7px;color:#eafff2;border-color:#25d366;background:rgba(18,90,50,.55)}
.btn.wa svg{width:19px;height:19px;stroke:#25d366}
@media (pointer:coarse){.wp kbd{display:none}}
#scores{left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,430px)}
#scores .tbl{max-height:70vh}
@media (max-width:520px){#hl{width:24vw}#info{font-size:12px;padding:4px 10px}}
#vig{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;box-shadow:inset 0 0 90px 24px rgba(255,30,40,.75)}
#fps{position:fixed;left:calc(10px + env(safe-area-inset-left));bottom:calc(6px + env(safe-area-inset-bottom));font:11px ui-monospace,monospace;color:#8f9;z-index:30;pointer-events:none;text-shadow:0 0 3px #000}
@media (max-height:440px){
  section{gap:7px}.logo{max-height:22vh;width:min(100%,250px)}.btn{min-height:40px}.btn.pri{min-height:44px}
  #s-title{max-width:560px}.grid{gap:7px 14px}.fld small{display:none}.seg button{min-height:36px}input:not([type=range]){height:38px}input[type=range]{height:34px}
  .tbl{max-height:36vh}#banner{top:30%}
}
@media (prefers-reduced-motion:reduce){.pulse,.logo *{animation:none!important}}