:root{color-scheme:dark;--bg:#0b1420;--panel:#14212e;--panel2:#192a38;--line:#2b3c4b;--text:#edf5f3;--muted:#91a3b2;--accent:#b9f47e;--mint:#8ce9bd;--safe-top:10px;--safe-bottom:12px;--viewport:100dvh;--app-height:min(var(--viewport),100dvh);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{background:var(--bg);overscroll-behavior:none}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 10% 0,#24384766,transparent 50%),var(--bg);min-height:100svh;font-size:14px}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.app{max-width:1040px;margin:auto;padding:var(--safe-top) 24px calc(100px + var(--safe-bottom))}.brand-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px}.brand{display:flex;gap:10px;align-items:center}.brand-mark{display:grid;place-items:center;width:39px;height:42px;color:var(--accent);background:#b9f47e11;border:1px solid #b9f47e44;border-radius:13px;transform:rotate(-7deg)}.brand-mark .icon{width:26px;height:26px}.brand-word{font-size:16px;font-weight:850;letter-spacing:1.4px}.brand-word small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:4px}.version{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #b9f47e66}.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#263c4a;color:#c5e4d9;font-weight:800;border:1px solid #4c6567}.hero{position:relative;padding:42px 0 30px}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:10px;letter-spacing:2px;font-weight:800;text-transform:uppercase}.eyebrow:before{content:'';width:22px;height:1px;background:currentColor}h1{font-size:clamp(34px,6.3vw,58px);line-height:1.05;letter-spacing:-2px;margin:15px 0 13px;font-weight:850}h1 span{color:#9cabb7}.intro{color:var(--muted);font-size:14px;line-height:1.65;max-width:460px;margin:0}.hero-badge{position:absolute;right:16px;top:65px;display:grid;place-items:center;width:120px;height:120px;border:1px solid #a7d8b433;border-radius:50%;color:#9bb8ae;transform:rotate(-12deg);font-size:10px;letter-spacing:2px;text-align:center;line-height:2;background:radial-gradient(circle,#abd5ae0a,transparent 70%)}.hero-badge .icon{width:31px;height:31px;color:var(--accent)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 15px}.section-head h2{font-size:19px;letter-spacing:-.5px;margin:0}.subtle{color:var(--muted);font-size:11px}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.game-card{position:relative;overflow:hidden;border-radius:23px;background:linear-gradient(130deg,#1a2c39,#101e2b);border:1px solid #35464f;box-shadow:0 16px 50px #0003;transition:transform .2s,border-color .2s}.game-card:hover{border-color:#75947d;transform:translateY(-3px)}.card-art{height:264px;position:relative;overflow:hidden;background:radial-gradient(ellipse,#4d7163,#1c3035 75%)}.card-art canvas{width:100%;height:100%;display:block;transform:scale(1.12);filter:saturate(.92)}.card-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#111d2900 55%,#12212e 100%)}.card-labels{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;gap:8px;z-index:1}.pill{font-size:10px;letter-spacing:.7px;display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #ffffff26;border-radius:7px;color:#e4f3ee;background:#142632dd;font-weight:750}.pill.online{color:#c5f59a;background:#1a3226df;border-color:#a8e17844}.card-copy{padding:0 22px 21px;position:relative;margin-top:-10px}.game-number{font-size:10px;color:#8aa79f;letter-spacing:2px;margin-bottom:8px}.card-copy h2{font-size:31px;font-weight:850;line-height:1.05;letter-spacing:-.8px;margin:0 0 10px}.game-card.tanks .card-copy h2{color:#e1e9e5}.card-copy p{line-height:1.6;color:#a5b5be;font-size:12px;min-height:38px;margin:0 0 18px;max-width:350px}.card-actions{display:grid;grid-template-columns:1fr auto;gap:9px}.primary,.secondary,.icon-btn,.danger,.tab,.choice{display:flex;align-items:center;justify-content:center;gap:8px;min-height:47px;border:0;border-radius:12px;font-weight:750;color:#15221a;background:var(--accent);transition:background .15s,transform .12s}.primary{box-shadow:0 4px 14px #b9f47e0f}.primary .icon{width:18px}.secondary,.icon-btn,.choice,.tab{background:#263746;color:#d5e3e8;border:1px solid #3a4d5b}.secondary:hover,.choice:hover{background:#304757}.secondary{padding:0 16px}.icon-btn{width:42px;min-height:42px;border-radius:12px}.online-button{width:50px;min-height:47px;color:var(--mint)}.hub-note{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;padding:21px;border:1px solid #2a3d4a;border-radius:18px;background:#13212e99}.hub-note div{display:flex;align-items:center;gap:10px;color:#d4e2df;font-size:12px}.hub-note .icon{color:#93adac;width:22px}.hub-note small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.stat{border:1px solid #2e424f;border-radius:16px;padding:18px;background:#142430}.stat b{display:block;color:var(--accent);font-size:27px;letter-spacing:-.7px;margin-bottom:7px}.stat span{color:var(--muted);font-size:11px}.bottom-nav{position:fixed;z-index:20;bottom:0;left:0;right:0;background:#111e2af2;backdrop-filter:blur(18px);border-top:1px solid #2c3b48;padding:7px 10px calc(7px + var(--safe-bottom));display:flex;justify-content:center;gap:clamp(12px,6vw,65px)}.nav-btn{min-width:62px;min-height:46px;display:grid;place-items:center;gap:3px;background:transparent;border:0;color:#8497a8;font-size:10px;border-radius:12px}.nav-btn.active{color:var(--accent)}.nav-btn .icon{width:21px;height:21px}.panel{padding:22px;background:#142330;border:1px solid #304552;border-radius:20px;margin:18px 0}.panel h2{font-size:19px;margin:0 0 10px;letter-spacing:-.4px}.panel p{color:var(--muted);line-height:1.6;font-size:12px}.screen-title{margin:32px 0 23px;font-size:30px;letter-spacing:-1px}.tabs{display:flex;gap:6px;padding:5px;background:#0d1a26;border:1px solid #263b48;border-radius:13px;margin:14px 0}.tab{flex:1;border:0;background:transparent;min-height:39px;color:var(--muted);font-size:12px;padding:5px 10px}.tab.active,.choice.active{color:var(--accent);background:#304630;border-color:#89ba6266}.rank-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:17px 6px;border-bottom:1px solid #2a3b48}.rank-row:last-child{border:0}.rank-row .rank{color:#9cb1bb;font-weight:700;font-size:13px}.rank-row:nth-child(1) .rank{color:#f2cf7e}.rank-row:nth-child(2) .rank{color:#d0dfe5}.rank-row:nth-child(3) .rank{color:#cba082}.rank-row .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.rank-row b{color:#b8dfb5;font-size:12px}.empty{color:var(--muted);padding:25px 8px;text-align:center;line-height:1.7;font-size:12px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:1px solid #2a3d49}.setting-row:last-child{border:0}.setting-row label{font-weight:650;font-size:13px}.setting-row small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:5px;font-weight:400}.toggle{width:46px;height:27px;border:1px solid #405461;background:#223442;border-radius:25px;position:relative;flex-shrink:0}.toggle:after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#8198a4;transition:transform .2s}.toggle[aria-checked=true]{background:#8eb762;border-color:#bbef85}.toggle[aria-checked=true]:after{transform:translateX(19px);background:#f5ffe9}.compact-select{background:#233542;color:#d9e6e4;border:1px solid #3b5260;border-radius:9px;padding:10px;font-size:12px;max-width:150px}.modal{position:fixed;inset:0;z-index:40;background:#030b14ba;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:20px}.sheet{max-width:490px;width:100%;max-height:calc(var(--app-height) - 40px - var(--safe-top) - var(--safe-bottom));overflow:auto;background:linear-gradient(150deg,#1c2f3b,#12222f);border:1px solid #405563;border-radius:26px;box-shadow:0 25px 120px #0007;padding:26px}.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:14px}.sheet h2{font-size:28px;letter-spacing:-1px;margin:0}.sheet .intro{font-size:12px;margin:12px 0 16px}.sheet .primary{width:100%}.field-label{color:#a7b9c2;display:block;font-size:11px;margin:19px 0 9px}.choices{display:flex;gap:7px}.choice{flex:1;min-height:40px;padding:7px;font-size:11px;line-height:1.4}.join-row{display:flex;gap:8px;margin:16px 0 0}.join-row input{width:100%;min-width:0;min-height:46px;padding:0 14px;background:#0b1b28;border:1px solid #47606d;border-radius:12px;color:#eef6f5;letter-spacing:2px;text-transform:uppercase}.join-row button{font-size:12px}.divider{display:flex;gap:12px;align-items:center;font-size:10px;color:#7f98a8;margin:18px 0}.divider:before,.divider:after{content:'';height:1px;background:#354b58;flex:1}.room-code{font-size:35px;letter-spacing:3px;color:var(--accent);font-weight:800;margin:17px 0 5px;font-variant-numeric:tabular-nums}.room-players{display:grid;gap:9px;margin:20px 0}.room-player{display:flex;align-items:center;gap:10px;border:1px solid #3b515c;background:#192f3a;border-radius:12px;padding:12px}.room-player .avatar{width:31px;height:31px;border-radius:10px}.room-player .player-info{flex:1;min-width:0}.room-player .player-info b{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-player small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.player-ready{font-size:10px;color:#b0e58d}.room-actions{display:flex;gap:9px;margin:10px 0}.room-actions>*{flex:1}.room-settings{font-size:11px;color:#9cb4bd;line-height:1.7}.toast{position:fixed;z-index:80;top:calc(var(--safe-top) + 14px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:#e1f1de;color:#1b342a;border:1px solid #bcdbb3;border-radius:12px;padding:12px 17px;font-size:12px;line-height:1.5;box-shadow:0 9px 40px #0004;pointer-events:none}.toast.error{background:#f3dbd1;border-color:#e9b7a5;color:#613c37}.game-view{position:fixed;inset:0;z-index:30;height:var(--app-height);background:radial-gradient(ellipse at 50% 20%,#24383f,#0b1723 75%);padding:var(--safe-top) max(12px,env(safe-area-inset-right)) var(--safe-bottom) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:7px;overflow:hidden;touch-action:none}.battle-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(100%,920px);margin:auto;flex-shrink:0;min-height:45px}.battle-title{min-width:0;flex:1}.battle-title b{font-size:12px;letter-spacing:.5px;display:block}.battle-title small{display:block;color:#9bb2bd;font-size:10px;margin-top:4px}.network{font-size:10px;color:var(--mint);white-space:nowrap}.hud{display:flex;gap:6px;align-items:center;justify-content:center;width:min(100%,920px);margin:auto;flex-shrink:0;min-height:37px}.hud-person{display:flex;align-items:center;justify-content:center;gap:5px;background:#203440;border:1px solid #38545d;border-radius:9px;padding:7px 8px;flex:1;min-width:0;font-size:10px}.hud-person .pname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-person.dead{opacity:.4}.hud-person .pip{width:6px;height:6px;background:var(--player);border-radius:50%;flex-shrink:0}.hud-person b{color:var(--player);font-variant-numeric:tabular-nums}.arena-wrap{position:relative;flex:1;min-height:0;width:min(100%,920px);margin:0 auto;border:1px solid #415b62;border-radius:16px;overflow:hidden;background:#142533;box-shadow:0 14px 45px #0004;contain:strict}.battle-canvas{display:block;width:100%;height:100%}.arena-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;border:4px solid #ffffff04;border-radius:15px}.game-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:15px;background:#06111b55;text-align:center;pointer-events:none}.game-overlay:empty{display:none}.countdown{font-size:84px;color:#e1ffbe;text-shadow:0 4px 0 #2b503b,0 8px 40px #0008;font-weight:850;letter-spacing:-5px}.countdown small{display:block;font-size:11px;letter-spacing:4px;margin-top:8px;color:#e9f5e4;text-shadow:none}.result-card{pointer-events:auto;width:min(350px,100%);padding:24px;border-radius:20px;background:#132b37f5;border:1px solid #5c7979;box-shadow:0 20px 60px #0006}.result-card h2{margin:10px 0;color:#d7f7ac;font-size:28px;letter-spacing:-1px}.result-card p{font-size:12px;color:#adbdc6;line-height:1.6;margin:8px 0 15px}.result-card .primary,.result-card .secondary{width:100%;margin-top:8px}.result-icon{font-size:30px;color:#cfef9b}.status-strip{display:flex;justify-content:space-between;align-items:center;min-height:24px;width:min(100%,920px);margin:0 auto;color:#a5bdc6;font-size:10px;gap:7px;flex-shrink:0}.status-strip b{color:#dbeed5}.status-message{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.controls{width:min(100%,740px);margin:0 auto;display:flex;justify-content:space-between;align-items:center;min-height:135px;flex-shrink:0;padding:0 14px;user-select:none;-webkit-user-select:none;touch-action:none}.stick{width:126px;height:126px;border-radius:50%;border:1px solid #4d6870;background:radial-gradient(circle,#243f4d 0,#192e3c 48%,#122431 50%,#263e4a 70%);box-shadow:inset 0 2px 15px #0005,0 6px 12px #0003;display:grid;place-items:center;position:relative;touch-action:none}.stick:before,.stick:after{content:'';position:absolute;pointer-events:none;background:#70919e33}.stick:before{width:1px;height:92px}.stick:after{height:1px;width:92px}.stick-knob{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 36% 24%,#71858c,#3d5968 55%,#2a4556);border:1px solid #a3b6b33b;box-shadow:0 5px 14px #0007,inset 0 2px 1px #b2d0cd55;z-index:1;pointer-events:none}.stick-knob:after{content:'';position:absolute;inset:15px;border:1px solid #b1d1c53b;border-radius:50%}.control-hint{text-align:center;font-size:9px;color:#7e99a8;line-height:1.8;padding:0 5px}.control-hint b{display:block;letter-spacing:1px;font-size:9px;color:#a9bdbf;margin-bottom:3px}.action-block{display:grid;place-items:center;gap:7px}.action{width:94px;height:94px;min-height:unset;border-radius:50%;border:2px solid #d9f6b0;background:radial-gradient(circle at 35% 25%,#d5f6a4,#a3cf6b 65%,#759653);color:#213b2b;box-shadow:0 6px 0 #38503d,0 9px 25px #0005,inset 0 2px 0 #f5ffe8;display:grid;place-items:center;touch-action:none}.action .icon{width:34px;height:34px;stroke-width:1.8}.action.pressed{transform:translateY(4px);box-shadow:0 2px 0 #38503d,0 5px 15px #0004;filter:brightness(1.08)}.action-caption{font-size:9px;letter-spacing:1.5px;color:#a7bda4;font-weight:700}.dpad{width:126px;height:126px;display:none;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px;touch-action:none}.dpad button{border:1px solid #587480;border-radius:11px;background:linear-gradient(#3b5766,#233e50);color:#c4d7d8;display:grid;place-items:center;font-size:21px;touch-action:none}.dpad .pressed{color:#c9ef93;background:#506c49}.dpad [data-dir=up]{grid-column:2}.dpad [data-dir=left]{grid-row:2;grid-column:1}.dpad [data-dir=right]{grid-row:2;grid-column:3}.dpad [data-dir=down]{grid-row:3;grid-column:2}.use-pad .dpad{display:grid}.use-pad .stick{display:none}.left-handed{flex-direction:row-reverse}.battle-bottom{width:min(100%,920px);margin:auto;text-align:center;font-size:9px;letter-spacing:1px;color:#6e8a99;flex-shrink:0}.help-list{padding-left:18px;margin:10px 0;color:#adbfca;font-size:12px;line-height:1.9}.keycap{border:1px solid #536a74;background:#233e4c;border-radius:4px;padding:1px 5px;color:#d2e5df}.about-version{font-size:11px;line-height:1.8;color:#8fa9b7}.back-link{display:flex;align-items:center;gap:8px;font-size:11px;color:#bad5c5;background:none;border:0;padding:0}.skeleton{background:linear-gradient(90deg,#152936,#243c47,#152936);background-size:200%;animation:shimmer 2s infinite;border-radius:10px;height:45px;margin:10px 0}@keyframes shimmer{to{background-position:-200%}}.stats-caption{font-size:11px;color:#9bb9aa;line-height:1.7}.mini-score{color:#a2bdc6;font-size:11px;line-height:1.9}.online-row{display:flex;justify-content:space-between;align-items:center;margin:12px 0}.online-row label{font-size:12px;color:#bacdd5}.wide-btn{width:100%;margin-top:16px}.howto .icon{color:var(--accent)}
@media(max-width:600px){.app{padding-left:18px;padding-right:18px}.hero{padding:30px 0 27px}.hero-badge{display:none}.game-grid{grid-template-columns:1fr;gap:18px}.card-art{height:235px}.card-art canvas{transform:scale(1.13)}.card-copy{padding:0 20px 20px}.card-copy h2{font-size:29px}.game-card{border-radius:22px}.hub-note{padding:17px 12px;gap:6px}.hub-note div{display:grid;justify-items:center;text-align:center;font-size:10px}.hub-note small{font-size:9px}.stat{padding:16px 11px}.stat b{font-size:23px}.stat span{font-size:10px}.sheet{padding:22px;border-radius:24px}.modal{padding:14px}.hero h1{font-size:40px}.section-head .subtle{font-size:10px}.panel{padding:18px}}
@media(max-width:370px){.controls{padding:0 6px;min-height:119px}.stick,.dpad{width:110px;height:110px}.action{width:82px;height:82px}.control-hint{display:none}.hud-person{padding:7px 5px;font-size:9px}.brand-word{font-size:14px}.version{font-size:10px}.app{padding-left:14px;padding-right:14px}}
@media(orientation:landscape) and (min-width:640px) and (max-height:650px){.game-view{display:grid;grid-template-columns:minmax(0,1fr) 225px;grid-template-rows:40px 1fr 25px;gap:6px;padding-top:max(7px,var(--safe-top))}.battle-top{grid-column:1/-1;min-height:36px}.battle-top .icon-btn{min-height:32px;height:32px;width:34px}.arena-wrap{grid-column:1;grid-row:2/4;height:100%;width:100%}.hud{grid-column:2;grid-row:2;align-self:start;flex-wrap:wrap;margin:0;min-height:34px}.hud-person{flex-basis:43%;font-size:9px}.controls{grid-column:2;grid-row:2;align-self:end;min-height:110px;padding:0;gap:8px}.control-hint{display:none}.stick,.dpad{width:107px;height:107px}.stick-knob{width:50px;height:50px}.action{width:81px;height:81px}.status-strip{grid-column:2;grid-row:3;font-size:9px;align-self:end}.battle-bottom{display:none}.result-card{padding:16px}.result-card h2{font-size:23px}.result-card p{font-size:11px;margin:6px 0}.result-card .primary,.result-card .secondary{min-height:38px}.countdown{font-size:65px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}