:root{color:#edf2f7;font-synthesis:none;text-rendering:optimizelegibility;background:#101417;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;height:100%;min-height:100%;margin:0}button,input{font:inherit}button{color:#111827;cursor:pointer;background:#eef2f7;border:1px solid #ffffff2e;border-radius:8px;min-height:42px;padding:0 16px;font-weight:800}button:hover{background:#fff}input{color:#f8fafc;background:#0b0f10b8;border:1px solid #ffffff2e;border-radius:8px;outline:none;width:100%;min-height:42px;padding:0 12px}input:focus{border-color:#f7c948;box-shadow:0 0 0 3px #f7c9482e}.join-shell{background:radial-gradient(circle at 76% 42%,#f7c94833,#0000 24%),linear-gradient(90deg,#080c0ef2 0%,#080c0ee0 34%,#080c0e47 62%,#080c0e14 100%),url(/assets/tank-battle-hero.png) 50%/cover no-repeat,repeating-linear-gradient(0deg,#0000 0 31px,#ffffff0a 31px 32px),repeating-linear-gradient(90deg,#0000 0 31px,#ffffff0a 31px 32px);grid-template-columns:minmax(320px,430px) minmax(360px,1fr);min-height:100%;display:grid;position:relative;overflow:hidden}.join-panel{z-index:1;-webkit-backdrop-filter:blur(18px)saturate(1.12);backdrop-filter:blur(18px)saturate(1.12);background:#0c1012d1;border:1px solid #ffffff24;border-radius:8px;align-self:center;width:min(100%,430px);margin:32px;padding:28px;box-shadow:0 30px 90px #00000080}.eyebrow{color:#f7c948;letter-spacing:0;text-transform:uppercase;margin:0 0 6px;font-size:.78rem;font-weight:900}.brand-lockup{grid-template-columns:76px minmax(0,1fr);align-items:center;gap:16px;margin-bottom:24px;display:grid}.brand-lockup img{border-radius:8px;width:76px;height:76px;box-shadow:0 14px 34px #0000006b}h1,h2,p{margin:0}.join-panel h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.95}.join-panel form,.chat-panel form{gap:14px;display:grid}label{color:#cbd5e1;gap:8px;font-size:.9rem;font-weight:700;display:grid}.join-preview{pointer-events:none;min-height:100%;position:absolute;inset:0}.preview-tank,.preview-wall{position:absolute;box-shadow:inset 0 0 0 2px #00000059}.preview-tank{background:linear-gradient(90deg,#0b0f10 0 16px,#0000 16px calc(100% - 16px),#0b0f10 calc(100% - 16px)),linear-gradient(#f7c948,#d69e2e);width:148px;height:148px;top:34%;right:22%}.preview-tank:before{content:"";background:#f8fafc;width:24px;height:100px;position:absolute;top:-74px;left:calc(50% - 12px)}.wall-a{background:#8f4533;width:96px;height:96px;top:16%;right:12%}.wall-b{background:#707982;width:128px;height:128px;bottom:16%;right:42%}.wall-c{background:#8f4533;width:96px;height:96px;bottom:18%;right:8%}.game-shell{background:#070b0f;grid-template-rows:auto 1fr;min-height:100%;display:grid}.topbar{background:linear-gradient(90deg,#151922,#101d24);border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:14px 18px;display:flex}.topbar h1{font-size:1.55rem;line-height:1}.topbar span{color:#a8b3c1;font-size:.86rem}.top-actions{align-items:center;gap:10px;display:flex}.icon-button{min-width:74px;padding:0 12px}.status-pill{text-overflow:ellipsis;white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;align-items:center;max-width:min(48vw,360px);min-height:34px;padding:0 12px;display:inline-flex;overflow:hidden}.play-area{grid-template-columns:minmax(0,1fr) 320px;min-height:0;display:grid}.stage{background:#05080c;min-height:0;position:relative;overflow:hidden}canvas{width:100%;height:100%;min-height:420px;display:block}.connection-overlay{background:#0b0f109e;place-items:center;font-weight:800;display:grid;position:absolute;inset:0}.sidebar{background:#121922;border-left:1px solid #ffffff1a;grid-template-rows:auto minmax(0,1fr);min-height:0;display:grid}.panel{border-bottom:1px solid #ffffff1a;min-width:0;padding:16px}.panel h2{color:#f7c948;text-transform:uppercase;margin-bottom:12px;font-size:.82rem;line-height:1}.players{gap:8px;margin:0;padding:0;list-style:none;display:grid}.players li{background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:32px;padding:6px 8px;display:grid}.players span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.swatch{border-radius:3px;width:14px;height:14px}.swatch.pending{background:#64748b}.chat-panel{grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid}.messages{flex-direction:column;gap:8px;min-height:0;padding-right:4px;display:flex;overflow:auto}.messages p{background:#ffffff0d;border-radius:8px;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;padding:8px;display:grid}.messages time{color:#94a3b8;font-size:.72rem}.messages b{color:#e2e8f0;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;overflow:hidden}.messages span{overflow-wrap:anywhere;color:#f8fafc;grid-column:1/-1}.chat-panel form{grid-template-columns:minmax(0,1fr) auto;margin-top:12px}.touch-controls{pointer-events:none;display:none;position:absolute;inset:0}.floating-control{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;justify-items:center;display:grid;position:absolute;transform:translate(-50%,-50%)}.joystick{pointer-events:auto;touch-action:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:radial-gradient(circle,#ffffff1a,#0000 36%),#050a0e61;border-radius:50%;width:132px;height:132px;position:relative;box-shadow:0 16px 38px #00000057,inset 0 0 0 1px #ffffff14,0 0 28px #41d6ff29}.joystick-ring{border:2px solid #86e6ff75;border-radius:50%;position:absolute;inset:14px;box-shadow:inset 0 0 22px #57e0ff1f,0 0 18px #41d6ff24}.joystick-thumb{background:radial-gradient(circle at 34% 28%,#ffffffd1,#0000 18%),linear-gradient(145deg,#6ee7fff0,#0f4e6af0);border:1px solid #ffffff47;border-radius:50%;width:58px;height:58px;position:absolute;top:50%;left:50%;box-shadow:0 10px 24px #0000005c,inset 0 0 0 1px #ffffff29,0 0 18px #41d6ff38}.joystick:not(.is-active) .joystick-thumb{transition:transform .13s}.touch-controls button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;padding:0}.fire{color:#fff;align-self:center;background:radial-gradient(circle at 36% 30%,#ffffffb8,#0000 17%),linear-gradient(145deg,#ff8a3d,#a71f19 70%)!important;border-color:#ffd2a98f!important;border-radius:50%!important;width:82px!important;height:82px!important;box-shadow:0 14px 32px #00000061,0 0 26px #ff6f355c!important}.fire.is-dragging,.fire:active{transform:scale(.96);box-shadow:0 9px 24px #0000005c,0 0 30px #ff6f3575!important}@media (width<=840px){.join-shell,.play-area{grid-template-columns:1fr}.join-panel{margin:18px}.join-preview{display:none}.play-area{grid-template-rows:minmax(420px,62vh) auto}.sidebar{border-top:1px solid #ffffff1a;border-left:0;grid-template-rows:auto 320px}.touch-controls{display:block}}@media (width<=520px){.topbar{flex-direction:column;align-items:start}.top-actions{width:100%}.status-pill{flex:1;max-width:none}.chat-panel form{grid-template-columns:1fr}}