@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500;700;800&family=Inter:wght@400;600;700&display=swap');
:root{--cyan:#35e3ff;--blue:#1478ff;--ink:#07101d;--panel:rgba(9,22,39,.86);--text:#eef7ff;--muted:#91a7bd}
/* HUD labels and tank artwork are not document-selection targets. */
*{box-sizing:border-box;-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);color:var(--text);font-family:Inter,Arial,sans-serif}button,input{font:inherit}
#game{position:fixed;inset:0;width:100%;height:100%;background:#091524}
/* Chat returns keyboard focus here; keep the browser ring off the playfield. */
#game:focus{outline:none}
#gameViewport:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 67% 44%,rgba(24,163,255,.09),transparent 31%),linear-gradient(90deg,rgba(4,12,23,.94),rgba(4,12,23,.48) 54%,rgba(4,12,23,.2));z-index:1}
.topbar{position:fixed;z-index:4;left:25px;right:calc(var(--view-w) * 6);top:30px;display:flex;align-items:center;gap:14px}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:"Exo 2";font-weight:800;letter-spacing:2px;font-size:20px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;clip-path:polygon(50% 0,96% 24%,96% 76%,50% 100%,4% 76%,4% 24%);background:linear-gradient(135deg,var(--cyan),var(--blue));color:#041321}.alpha{border:1px solid #27425a;color:#7792a9;padding:5px 8px;font:600 9px Inter;letter-spacing:1.5px;border-radius:4px}
.menu{position:relative;z-index:3;display:grid;grid-template-columns:minmax(430px,640px) 360px;align-items:center;justify-content:space-between;gap:calc(var(--view-w) * 7);min-height:100%;padding:100px calc(var(--view-w) * 8) 45px}.hero{max-width:650px}.eyebrow{color:var(--cyan);font:700 12px "Exo 2";letter-spacing:4px;margin:0 0 18px}.hero h1{font:800 clamp(46px,calc(var(--view-w) * 5.5),78px)/.98 "Exo 2";letter-spacing:-2px;text-transform:uppercase;margin:0}.hero h1 span{color:transparent;-webkit-text-stroke:1px #6b91aa}.description{max-width:545px;color:#9eb0c0;line-height:1.7;margin:26px 0 34px}.name-label{display:block;color:#71899e;font-size:10px;font-weight:700;letter-spacing:2px;margin-bottom:9px}.start-row{display:flex;gap:10px;max-width:570px}.start-row input{min-width:0;flex:1;background:rgba(10,24,41,.82);border:1px solid #29435a;border-radius:5px;color:white;padding:0 18px;outline:none}.start-row input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(53,227,255,.12)}.start-row button{border:0;border-radius:5px;padding:17px 24px;background:linear-gradient(135deg,var(--cyan),#1b8cff);color:#03121d;font:800 13px "Exo 2";letter-spacing:1.3px;cursor:pointer;box-shadow:0 12px 35px rgba(14,164,255,.23);transition:.2s}.start-row button:hover{transform:translateY(-2px);filter:brightness(1.08)}.start-row button span{font-size:20px;margin-left:12px}.controls{display:flex;gap:25px;color:#60788d;font-size:10px;margin-top:20px}.controls b{color:#a8bed1;border:1px solid #30485d;border-radius:3px;padding:4px 6px;margin-right:5px;font-size:9px}
.tank-card{position:relative;min-height:520px;padding:320px 32px 28px;border:1px solid rgba(63,113,148,.35);background:linear-gradient(155deg,rgba(17,37,60,.76),rgba(5,14,27,.73));clip-path:polygon(0 0,88% 0,100% 9%,100% 100%,0 100%);backdrop-filter:blur(7px)}.tank-card:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,transparent 46%,rgba(53,227,255,.08));pointer-events:none}.orb{position:absolute;width:270px;height:270px;top:40px;left:45px;border:1px solid rgba(53,227,255,.16);border-radius:50%;box-shadow:inset 0 0 55px rgba(26,147,255,.08),0 0 70px rgba(26,147,255,.06)}.orb:before,.orb:after{content:"";position:absolute;inset:28px;border:1px dashed rgba(53,227,255,.12);border-radius:50%}.orb:after{inset:70px}.tank-preview{position:absolute;width:150px;height:150px;border:7px solid #081421;background:linear-gradient(145deg,#2ce1ff,#167bf0);border-radius:50%;top:100px;left:105px;box-shadow:inset -14px -14px 28px rgba(0,35,99,.3),0 20px 45px rgba(0,170,255,.25)}.tank-preview i{position:absolute;width:95px;height:32px;background:linear-gradient(#a1ecff,#45aee8);border:6px solid #081421;border-left:0;border-radius:0 8px 8px 0;left:105px;top:52px}.tank-preview b{position:absolute;width:56px;height:56px;border:6px solid #081421;background:#105fae;border-radius:50%;left:40px;top:40px}.tank-card>p{margin:0;color:var(--cyan);font:700 9px "Exo 2";letter-spacing:2.6px}.tank-card h2{margin:5px 0 22px;font:800 27px "Exo 2";letter-spacing:2px}.stat{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px;margin:11px 0;color:#748da3;font-size:9px;font-weight:700;letter-spacing:1px}.stat>i{display:block;height:3px;background:#24394d}.stat>i>b{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.hud{position:fixed;z-index:5;inset:0;pointer-events:none}.hidden{display:none}.player-panel{position:absolute;left:28px;top:25px;padding:13px 18px;border-left:3px solid var(--cyan);background:rgba(4,14,25,.78)}.player-panel b{display:block;font:800 16px "Exo 2"}.player-panel span{color:#6f8ba2;font-size:9px;letter-spacing:2px}.level{position:absolute;left:50%;top:24px;transform:translateX(-50%);width:min(360px,calc(var(--view-w) * 42));text-align:center;font:700 11px "Exo 2";letter-spacing:1px}.level i{display:block;height:7px;background:#152b3d;border:1px solid #2c475c;margin:6px 0}.level i span{display:block;height:100%;width:0;background:linear-gradient(90deg,#1678ff,var(--cyan));transition:.25s}.level small{color:#6f899e;font-size:9px}.hud button{pointer-events:auto;position:absolute;right:28px;top:25px;border:1px solid #304b60;background:rgba(5,18,31,.78);color:#9bb2c4;padding:10px 15px;border-radius:4px;cursor:pointer}.hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(4,14,25,.72);border:1px solid #243d52;padding:9px 15px;border-radius:5px;color:#7f98aa;font-size:10px}
.hud .top-actions{pointer-events:auto;position:absolute;right:28px;top:25px;display:flex;align-items:center;gap:7px}.hud .top-actions button{position:static;right:auto;top:auto;white-space:nowrap}.hud #obstaclesToggle{color:#9bb8ca;font:700 9px "Exo 2";letter-spacing:.5px}.hud #obstaclesToggle.active{border-color:#9c5c67;color:#ff8794;background:rgba(55,17,27,.86)}.hud #botToggle,.hud #botAttackToggle{padding:10px 11px;font:700 9px "Exo 2";letter-spacing:.4px}.hud #botToggle.active{border-color:#ae6074;color:#ff8296;background:rgba(52,15,26,.9)}.hud #botAttackToggle.active{border-color:#d98542;color:#ffba74;background:rgba(57,31,13,.9)}.hud #botTankSelect{max-width:165px;height:35px;padding:0 8px;border:1px solid #304b60;border-radius:4px;background:#091523;color:#b6d0e0;font:700 9px "Exo 2";letter-spacing:.3px;cursor:pointer}.hud #botTankSelect:focus{outline:none;border-color:#5fdcf4}
.health-panel{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);width:min(390px,calc(var(--view-w) * 46));padding:9px 12px 8px;background:linear-gradient(90deg,rgba(4,14,25,.88),rgba(8,27,43,.92),rgba(4,14,25,.88));border:1px solid #29475d;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}.health-line{display:flex;justify-content:space-between;align-items:center;margin:0 4px 5px;font:700 8px "Exo 2";letter-spacing:1.2px;color:#91a9ba}.health-line span{color:#cfeeff;letter-spacing:.5px}.health-track{display:block;height:10px;padding:2px;background:#07121f;border:1px solid #36566d}.health-track span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#0ebf91,#45f0bd);box-shadow:0 0 10px rgba(36,225,178,.3);transition:width .2s}.health-panel small{display:block;height:10px;margin-top:4px;text-align:center;color:#66d9bc;font:700 8px "Exo 2";letter-spacing:1px}
.skill-panel{pointer-events:auto;position:absolute;left:25px;bottom:25px;width:280px;padding:11px;background:rgba(4,14,25,.91);border:1px solid #29485e;border-left:3px solid #28cda9;box-shadow:0 14px 38px rgba(0,0,0,.28)}.skill-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#7792a6;font:700 8px "Exo 2";letter-spacing:1px}.skill-head b{color:#a9c2d3}.skill-head i{color:#42e3bd;font-style:normal;font-size:11px}.skill-row{display:grid;grid-template-columns:112px 1fr 23px;align-items:center;gap:6px;height:25px}.skill-name{color:#9db4c5;font:700 8px "Exo 2";white-space:nowrap}.skill-cells{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.skill-cells i{height:6px;background:#1c3447;border:1px solid #29495f}.skill-cells i.on{background:linear-gradient(90deg,#149bdf,#3ee3bd);border-color:#52dabc;box-shadow:0 0 5px rgba(54,220,187,.25)}.hud .skill-add{position:relative;inset:auto;width:23px;height:20px;padding:0;border:1px solid #39708a;background:#13384c;color:#58e8c2;border-radius:3px;font:bold 15px/18px Inter}.hud .skill-add:hover:not(:disabled){border-color:#4ff0ca;background:#18506a}.hud .skill-add:disabled{opacity:.3;cursor:not-allowed}
.bullet-debug{position:absolute;right:28px;top:78px;width:205px;padding:9px 10px;background:rgba(4,14,25,.84);border:1px solid #29485e;border-right:3px solid #5fdcf4}.debug-stat{padding:7px 0;border-top:1px solid rgba(52,82,104,.55)}.debug-stat:first-child{padding-top:0;border-top:0}.debug-stat:last-child{padding-bottom:1px}.debug-stat b{display:block;color:#7895a9;font:700 8px "Exo 2";letter-spacing:1px}.debug-stat>span{display:block;margin:4px 0;color:#d2f5ff;font:800 11px "Exo 2"}.current-speed #currentSpeedDebugText{display:inline-block;width:45px;text-align:right;font-variant-numeric:tabular-nums}.current-speed-unit{display:inline-block;margin-left:4px}.debug-stat>i{display:block;height:5px;background:#172e41}.debug-stat>i span{display:block;width:0;height:100%;background:linear-gradient(90deg,#168bea,#58e7f4);transition:width .1s}.enemy-projectile-stat>i span{background:linear-gradient(90deg,#e74d68,#ff9a73)}

.upgrade-panel{pointer-events:auto;position:absolute;left:28px;top:94px;width:380px;padding:16px;background:rgba(4,15,27,.96);border:1px solid #31516a;border-left:3px solid var(--cyan);box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(8px)}.upgrade-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;font-family:"Exo 2"}.upgrade-title span{color:var(--cyan);font-size:9px;letter-spacing:1.5px}.upgrade-title b{font-size:12px;letter-spacing:1px}.upgrade-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hud .upgrade-card{position:relative;inset:auto;display:grid;grid-template-rows:58px 38px;align-items:center;justify-items:center;min-height:106px;padding:8px 9px 0;border:1px solid #29465c;background:#0b1c2d;color:#d9e9f5;text-align:center;overflow:hidden;transition:.18s}.hud .upgrade-card:hover{border-color:var(--cyan);background:#102a40;transform:translateY(-1px)}.upgrade-card>span{align-self:stretch;width:calc(100% + 18px);margin-left:-9px;padding:7px 6px 5px;border-top:1px solid #233f55;background:rgba(4,15,26,.52)}.upgrade-card span b{display:block;font:800 10px "Exo 2";line-height:12px;letter-spacing:.7px;white-space:nowrap}.upgrade-card small{display:block;margin-top:2px;color:#718da3;font-size:8px;line-height:10px}.tank-icon{--body:38px;--barrel-border:3px;position:relative;left:-10px;flex:0 0 var(--body);width:var(--body);height:var(--body);border:3px solid #061421;border-radius:50%;background:#198ee5;box-shadow:0 0 0 1px #3ebce9}.tank-icon:before,.tank-icon:after{content:"";position:absolute;left:calc(var(--body) - 7px);background:#6bdfff;border:var(--barrel-border) solid #061421}.twin-icon{--barrel-height:10px;--half-gap:2px}.twin-icon:before,.twin-icon:after{width:25px;height:var(--barrel-height)}.twin-icon:before{top:calc(50% - var(--half-gap) - var(--barrel-height))}.twin-icon:after{top:calc(50% + var(--half-gap))}.lancer-icon:before{width:38px;height:9px;top:50%;transform:translateY(-50%)}.lancer-icon:after,.bulwark-icon:after{content:none}.bulwark-icon:before{width:29px;height:18px;top:50%;transform:translateY(-50%)}.splitter-icon{--barrel-height:9px;--half-gap:2px;--barrel-angle:16deg;--negative-angle:-16deg}.splitter-icon:before,.splitter-icon:after{width:28px;height:var(--barrel-height);left:calc(var(--body) - 9px);transform-origin:left center}.splitter-icon:before{top:calc(50% - var(--half-gap) - var(--barrel-height));transform:rotate(var(--negative-angle))}.splitter-icon:after{top:calc(50% + var(--half-gap));transform:rotate(var(--barrel-angle))}
body.playing #gameViewport:after{background:radial-gradient(circle,transparent 45%,rgba(2,8,16,.48))}.playing .topbar{display:none}
.splitter-icon{--barrel-angle:12.5deg;--negative-angle:-12.5deg}
.tank-preview i{width:82px;height:38px;top:49px}
.bulwark-icon:before{height:24px}
.destroyer-icon:before{width:29px;height:36px;top:50%;transform:translateY(-50%)}.destroyer-icon:after{content:none}
.twin-icon{--barrel-height:14px;--half-gap:1px}
.gunner-icon:before,.gunner-icon:after,.gunner-icon>b,.gunner-icon>em{position:absolute;left:calc(var(--body) - 8px);display:block;height:7px;background:#6bdfff;border:2px solid #061421}.gunner-icon:before{top:2px;width:19px}.gunner-icon>b{top:10px;width:27px}.gunner-icon>em{top:20px;width:27px}.gunner-icon:after{top:29px;width:19px}
.gunner-auto-icon u{position:absolute;left:11px;top:11px;width:16px;height:16px;border:2px solid #061421;border-radius:50%;background:#2f9fd3;z-index:4}
.weaver-icon:before{left:calc(var(--body) - 7px);top:4px;width:31px;height:12px;transform:rotate(-12deg);clip-path:polygon(0 36%,100% 0,100% 65%,0 100%)}.weaver-icon:after{left:calc(var(--body) - 7px);top:22px;width:31px;height:12px;transform:rotate(12deg);clip-path:polygon(0 0,100% 35%,100% 100%,0 64%);background:#6bdfff;box-shadow:none}.weaver-icon{box-shadow:28px 0 0 -10px #a879ff,28px 0 7px -8px rgba(168,121,255,.9)}
.disruptor-icon:before{top:6px;width:38px;height:24px;border-radius:4px;background:repeating-linear-gradient(90deg,#65d9f2 0 8px,#183448 8px 12px)}.disruptor-icon:after{left:57px;top:10px;width:16px;height:16px;border-radius:50%;background:#c393dd}
.jammer-icon:before{top:8px;width:32px;height:20px;border-radius:3px;background:#183448;border:2px solid #65d9f2}.jammer-icon:after{left:55px;top:13px;width:10px;height:10px;border-radius:50%;background:#fff2bb;border:2px solid #78edff}


#disruptionStatus{position:fixed;left:26px;bottom:290px;padding:8px 12px;border:1px solid #c48864;background:#15212d;color:#ffc090;font:700 10px Inter;pointer-events:none}
#disruptionStatus[hidden]{display:none}
.shotgun-icon:before{left:calc(var(--body) - 7px);top:7px;width:34px;height:24px;clip-path:polygon(0 20%,100% 0,100% 100%,0 80%)}.shotgun-icon:after{content:none}.shotgun-icon>b,.shotgun-icon>em{position:absolute;left:calc(var(--body) + 16px);width:17px;height:3px;background:#061421;z-index:2}.shotgun-icon>b{top:14px}.shotgun-icon>em{top:23px}
.wideshot-icon:before{height:29px;top:5px}.pelletshot-icon:before{left:calc(var(--body) - 10px);width:39px;height:31px;top:4px}.pelletshot-icon>b{position:absolute;display:block;left:calc(var(--body));top:9px;width:36px;height:21px;background:#6bdfff;border:2px solid #061421;clip-path:polygon(0 22%,100% 0,100% 100%,0 78%);z-index:-1}
.lancer-icon:before{width:32px;height:14px}
.overseer-icon{left:0}.overseer-icon:before,.overseer-icon:after{left:7px;width:28px;height:18px;border-width:3px;border-radius:2px;background:linear-gradient(90deg,#3caacb,#82edff)}.overseer-icon:before{top:-16px;transform:rotate(-90deg)}.overseer-icon:after{top:36px;transform:rotate(90deg)}
.hud #botTankSelect{max-width:145px;padding:0 7px;font-size:10px}.hud #botTankSelect option{font:700 10px "Exo 2"}.hud #botTankSelect::-webkit-scrollbar{width:7px}.hud #botTankSelect::-webkit-scrollbar-track{background:#0a1624}.hud #botTankSelect::-webkit-scrollbar-thumb{background:#52687a;border-radius:5px}
.overseer-icon:before,.overseer-icon:after{top:6px;width:28px;height:20px;border-width:3px;border-radius:1px;background:linear-gradient(90deg,#3caacb,#82edff);transform:none}.overseer-icon:before{left:-31px;clip-path:polygon(0 0,100% 24%,100% 76%,0 100%)}.overseer-icon:after{left:35px;clip-path:polygon(0 24%,100% 0,100% 100%,0 76%)}
.assassin-icon:before{width:43px;height:14px;top:50%;transform:translateY(-50%)}.assassin-icon:after{content:none}
.horizon-icon:before{width:43px;height:14px;top:50%;transform:translateY(-50%)}.horizon-icon:after{content:"";left:calc(var(--body) - 12px);top:50%;width:25px;height:34px;transform:translateY(-50%);clip-path:polygon(0 0,100% 30%,100% 70%,0 100%)}
.aegis-icon:before{width:43px;height:14px;top:50%;transform:translateY(-50%)}.aegis-icon:after{content:none}.aegis-icon>b{position:absolute;left:calc(var(--body) + 21px);top:50%;width:26px;height:48px;transform:translateY(-50%);border:5px solid #72ebff;border-left-width:2px;border-radius:0 55% 55% 0;box-shadow:0 0 7px rgba(90,225,255,.55);z-index:3}
.hunter-icon:before{width:33px;height:16px;top:50%;transform:translateY(-50%)}.hunter-icon:after{width:27px;height:23px;top:50%;transform:translateY(-50%)}
.stalker-icon:after{clip-path:polygon(0 0,63% 0,100% 6%,100% 94%,63% 100%,0 100%)}
.specter-icon:before{width:33px;height:19px;top:50%;transform:translateY(-50%);clip-path:polygon(0 12%,100% 0,100% 100%,0 88%)}.specter-icon:after{content:none}
.triarch-icon:before,.triarch-icon:after,.triarch-icon b{position:absolute;width:25px;height:14px;background:#6bdfff;border:3px solid #061421;transform-origin:left center}.triarch-icon:before{left:29px;top:10px;transform:rotate(0)}.triarch-icon:after{left:8px;top:29px;transform:rotate(120deg)}.triarch-icon b{left:6px;top:4px;transform:rotate(240deg)}
.overtrapper-icon:before,.overtrapper-icon:after,.overtrapper-icon b{position:absolute;width:23px;height:13px;background:#6bdfff;border:3px solid #061421;transform-origin:left center}.overtrapper-icon:before{left:29px;top:12px}.overtrapper-icon:after{left:8px;top:29px;transform:rotate(120deg)}.overtrapper-icon b{left:6px;top:4px;transform:rotate(240deg)}.overtrapper-icon em{position:absolute;left:46px;top:13px;width:11px;height:11px;background:#77ecff;border:2px solid #061421;transform:rotate(45deg)}
.trapper-icon:before,.trapper-icon:after{position:absolute;top:12px;width:23px;height:13px;background:#6bdfff;border:3px solid #061421}.trapper-icon:before{left:29px}.trapper-icon:after{left:-22px}.trapper-icon em{position:absolute;left:46px;top:13px;width:11px;height:11px;background:#77ecff;border:2px solid #061421;transform:rotate(45deg)}
.necromancer-icon{left:0;border-radius:3px}.necromancer-icon:before,.necromancer-icon:after{top:7px;width:24px;height:20px;border-width:3px}.necromancer-icon:before{left:-22px}.necromancer-icon:after{left:32px}
.necrogunner-icon b{position:absolute;left:14px;top:13px;width:22px;height:8px;background:#6bdfff;border:3px solid #061421;z-index:4}.necrogunner-icon b:after{content:"";position:absolute;left:-8px;top:-6px;width:14px;height:14px;border-radius:50%;background:#2f9fd3;border:3px solid #061421}
.necrogunner-icon:before{content:none}
.advanced-upgrade-panel{top:94px}.advanced-upgrade-grid{grid-template-columns:repeat(2,1fr)}
.trident-icon:before,.trident-icon:after{width:24px;height:14px;left:calc(var(--body) - 8px);transform-origin:left center}.trident-icon:before{top:2px;transform:rotate(-45deg)}.trident-icon:after{bottom:2px;transform:rotate(45deg)}
.trident-icon{background:#198ee5}.trident-icon b{position:absolute;left:calc(var(--body) - 7px);top:50%;width:25px;height:14px;transform:translateY(-50%);background:#6bdfff;border:var(--barrel-border) solid #061421}
.comet-icon:before{width:25px;height:14px;top:50%;transform:translateY(-50%)}.comet-icon:after{left:-22px;width:24px;height:12px;top:2px}.comet-icon b{position:absolute;left:-22px;bottom:2px;width:24px;height:12px;background:#6bdfff;border:var(--barrel-border) solid #061421}
.pulsar-icon:before{width:25px;height:14px;top:50%;transform:translateY(-50%)}.pulsar-icon:after{left:-22px;width:24px;height:14px;top:50%;transform:translateY(-50%)}
.quasar-icon:before{width:25px;height:14px;top:50%;transform:translateY(-50%)}.quasar-icon:after{left:-22px;width:24px;height:14px;top:50%;transform:translateY(-50%)}.quasar-icon b,.quasar-icon em{position:absolute;left:50%;width:14px;height:20px;transform:translateX(-50%);background:#6bdfff;border:var(--barrel-border) solid #061421}.quasar-icon b{bottom:calc(var(--body) - 7px)}.quasar-icon em{top:calc(var(--body) - 7px)}
.chimera-icon:before,.gyro-icon:before,.warhead-icon:before,.viper-icon:before{width:29px;height:24px;top:50%;transform:translateY(-50%)}
.chimera-icon b{position:absolute;right:calc(var(--body) - 1px);top:50%;width:20px;height:22px;transform:translateY(-50%);background:#6bdfff;border:3px solid #061421;clip-path:polygon(0 0,100% 18%,100% 82%,0 100%)}
.chimera-v2-icon em,.chimera-v2-icon u{position:absolute;right:calc(var(--body) - 1px);width:19px;height:3px;background:#061421;z-index:2}
.chimera-v2-icon em{top:12px}
.chimera-v2-icon u{bottom:12px}
.gyro-icon b,.warhead-icon b{position:absolute;left:calc(var(--body) - 4px);top:50%;width:34px;height:8px;transform:translateY(-50%);background:#6bdfff;border:2px solid #061421}
.warhead-icon:before{clip-path:polygon(0 0,100% 22%,100% 78%,0 100%)}
.dual-warhead-icon:before{width:29px;height:24px;top:50%;transform:translateY(-50%);clip-path:polygon(0 0,100% 22%,100% 78%,0 100%)}
.dual-warhead-icon:after{content:none}
.dual-warhead-icon b,.dual-warhead-icon em{position:absolute;left:calc(var(--body) + 15px);width:21px;height:6px;background:#6bdfff;border:2px solid #061421}
.dual-warhead-icon b{top:8px}
.dual-warhead-icon em{bottom:8px}
.viper-icon:before,.gyro-icon:before{clip-path:polygon(0 0,100% 18%,100% 82%,0 100%)}
.viper-icon:after,.viper-icon em{display:none}
.viper-icon b{position:absolute;left:calc(var(--body) + 8px);top:50%;width:9px;height:9px;background:transparent;border-top:2px solid #061421;border-right:2px solid #061421;border-bottom:0;border-left:0;transform:translateY(-50%) rotate(45deg);z-index:2}
.gyro-icon b{position:absolute;left:calc(var(--body) + 8px);top:50%;width:9px;height:9px;background:transparent;border:2px solid #061421;border-radius:50%;transform:translateY(-50%);z-index:2}
.crossfire-icon:before,.crossfire-icon:after{width:25px;height:14px;left:calc(var(--body) - 7px);top:50%;transform:translateY(-50%)}.crossfire-icon:after{left:auto;right:calc(var(--body) - 7px);transform:translateY(-50%)}
.crossfire-icon b,.crossfire-icon em{position:absolute;left:50%;width:14px;height:25px;transform:translateX(-50%);background:#6bdfff;border:var(--barrel-border) solid #061421}.crossfire-icon b{bottom:calc(var(--body) - 7px)}.crossfire-icon em{top:calc(var(--body) - 7px)}
.janus-icon:before,.janus-icon:after{width:29px;height:14px;left:calc(var(--body) - 7px)}.janus-icon:before{top:1px}.janus-icon:after{bottom:1px}.janus-icon b,.janus-icon em{position:absolute;right:calc(var(--body) - 7px);width:29px;height:14px;background:#6bdfff;border:var(--barrel-border) solid #061421}.janus-icon b{top:1px}.janus-icon em{bottom:1px}
.elite-upgrade-panel{top:94px}.hud .upgrade-card.hidden,.hud .upgrade-card[hidden]{display:none}
.autovanguard-icon:before{width:32px;height:18px;top:10px;background:#77ecff}.autovanguard-icon:after{left:10px;top:8px;width:20px;height:20px;border-radius:50%;background:#278ec1;border:3px solid #061321}
.octavia-icon:before,.octavia-icon:after,.octavia-icon b,.octavia-icon em,.octavia-icon u,.octavia-icon strong,.octavia-icon s,.octavia-icon mark,.orbit-icon:before,.orbit-icon:after,.orbit-icon b,.orbit-icon em,.orbit-icon u,.orbit-icon strong,.orbit-icon s,.orbit-icon mark{content:"";position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);width:25px;height:14px;background:#6bdfff;border:var(--barrel-border) solid #061421;transform-origin:7px 7px;text-decoration:none}
.octavia-icon:before{transform:rotate(0deg) translateX(12px) translateY(-8px)}.octavia-icon:after{transform:rotate(0deg) translateX(12px) translateY(8px)}.octavia-icon b{transform:rotate(90deg) translateX(12px) translateY(-8px)}.octavia-icon em{transform:rotate(90deg) translateX(12px) translateY(8px)}.octavia-icon u{transform:rotate(180deg) translateX(12px) translateY(-8px)}.octavia-icon strong{transform:rotate(180deg) translateX(12px) translateY(8px)}.octavia-icon s{transform:rotate(270deg) translateX(12px) translateY(-8px)}.octavia-icon mark{transform:rotate(270deg) translateX(12px) translateY(8px)}
.orbit-icon:before{transform:rotate(0deg) translateX(13px)}.orbit-icon:after{transform:rotate(45deg) translateX(13px)}.orbit-icon b{transform:rotate(90deg) translateX(13px)}.orbit-icon em{transform:rotate(135deg) translateX(13px)}.orbit-icon u{transform:rotate(180deg) translateX(13px)}.orbit-icon strong{transform:rotate(225deg) translateX(13px)}.orbit-icon s{transform:rotate(270deg) translateX(13px)}.orbit-icon mark{transform:rotate(315deg) translateX(13px)}
.cyclone-icon:before,.cyclone-icon:after,.cyclone-icon b,.cyclone-icon em,.cyclone-icon u,.cyclone-icon strong,.cyclone-icon s,.cyclone-icon mark{content:"";position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);height:14px;background:#6bdfff;border:var(--barrel-border) solid #061421;transform-origin:7px 7px;text-decoration:none}.cyclone-icon:before,.cyclone-icon b,.cyclone-icon u,.cyclone-icon s{width:25px}.cyclone-icon:after,.cyclone-icon em,.cyclone-icon strong,.cyclone-icon mark{width:17px}.cyclone-icon:before{transform:rotate(0deg) translateX(13px)}.cyclone-icon:after{transform:rotate(45deg) translateX(13px)}.cyclone-icon b{transform:rotate(90deg) translateX(13px)}.cyclone-icon em{transform:rotate(135deg) translateX(13px)}.cyclone-icon u{transform:rotate(180deg) translateX(13px)}.cyclone-icon strong{transform:rotate(225deg) translateX(13px)}.cyclone-icon s{transform:rotate(270deg) translateX(13px)}.cyclone-icon mark{transform:rotate(315deg) translateX(13px)}
.auto4-icon:before,.auto4-icon:after,.auto4-icon b,.auto4-icon em{content:"";position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);width:28px;height:14px;background:#6bdfff;border:3px solid #061421;border-radius:0;transform-origin:7px 7px}.auto4-icon:before{transform:rotate(0deg) translateX(15px)}.auto4-icon:after{transform:rotate(90deg) translateX(15px)}.auto4-icon b{transform:rotate(180deg) translateX(15px)}.auto4-icon em{transform:rotate(270deg) translateX(15px)}.auto4-icon{z-index:0}.auto4-icon:after,.auto4-icon:before,.auto4-icon b,.auto4-icon em{z-index:-1}
.triplet-icon:before,.triplet-icon:after,.triplet-icon b{content:"";position:absolute;left:calc(var(--body) - 8px);width:30px;height:14px;background:#6bdfff;border:3px solid #061421}.triplet-icon:before{top:0;z-index:1}.triplet-icon:after{bottom:0;z-index:1}.triplet-icon b{top:12px;width:36px;z-index:3}
.penta-icon:before,.penta-icon:after,.penta-icon b,.penta-icon em,.penta-icon u{content:"";position:absolute;left:calc(var(--body) - 8px);top:10px;width:29px;height:14px;background:#6bdfff;border:3px solid #061421;transform-origin:left center}.penta-icon:before{transform:rotate(-40deg);z-index:1}.penta-icon u{transform:rotate(40deg);z-index:1}.penta-icon:after{transform:rotate(-20deg);z-index:2}.penta-icon em{transform:rotate(20deg);z-index:2}.penta-icon b{width:35px;transform:rotate(0);z-index:3}
.spread-icon:before,.spread-icon:after,.spread-icon b,.spread-icon em,.spread-icon u,.spread-icon strong,.spread-icon mark{content:"";position:absolute;left:calc(var(--body) - 10px);top:14px;width:25px;height:8px;background:#6bdfff;border:2px solid #061421;transform-origin:left center}.spread-icon:before{transform:rotate(-80deg);z-index:1}.spread-icon strong{transform:rotate(80deg);z-index:1}.spread-icon:after{transform:rotate(-48deg);z-index:2}.spread-icon u{transform:rotate(48deg);z-index:2}.spread-icon b{transform:rotate(-16deg);z-index:3}.spread-icon em{transform:rotate(16deg);z-index:3}.spread-icon mark{transform:rotate(64deg);z-index:1}.spread-icon s{content:"";position:absolute;left:calc(var(--body) - 10px);top:10px;width:30px;height:14px;background:#6bdfff;border:3px solid #061421;z-index:4}


/* ALPHA 20.51 HUD interaction refinements */
.shotgun-icon:before{height:29px;top:5px}.wideshot-icon:before{height:24px;top:7px}
.hud #botRamToggle{padding:10px 11px;font:700 9px "Exo 2";letter-spacing:.4px}.hud #botRamToggle.active{border-color:#5aa6ce;color:#80ddff;background:rgba(13,42,58,.9)}
.bastion-icon:before{width:27px;height:20px;top:50%;transform:translateY(-50%)}.bastion-icon:after{content:none}.bastion-icon>b,.bastion-icon>em{position:absolute;left:calc(var(--body) - 3px);width:23px;height:6px;background:#6bdfff;border:2px solid #061421;z-index:2}.bastion-icon>b{top:4px}.bastion-icon>em{bottom:4px}
.health-panel{transform:translateX(-50%) scale(1.05);transform-origin:center bottom}
.skill-panel{transform:scale(1);transform-origin:left bottom;clip-path:inset(0 0 0 0);transition:clip-path .28s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.skill-panel.collapsed{transform:scale(1);clip-path:inset(0 calc(100% - 5px) 0 0);opacity:.82;pointer-events:none}
.upgrade-title span{font-size:12px;letter-spacing:1px;font-weight:700}
.hud .upgrade-ignore{position:static;inset:auto;margin-left:auto;margin-right:10px;padding:4px 7px;border:1px solid #48647a;background:rgba(12,31,48,.9);color:#91aabd;border-radius:3px;font:700 8px "Exo 2";letter-spacing:.7px;cursor:pointer}
.hud .upgrade-ignore:hover{border-color:#ff9b68;color:#ffd0b6;background:rgba(58,30,22,.92)}

.skill-head{font-size:10px}.skill-head i{font-size:13px}.skill-row{grid-template-columns:126px 1fr 23px}.skill-name,.skill-name.aegis-shield-label{font-size:10px;letter-spacing:0}
.health-line{font-size:8.380952px}.health-line span{font-size:8.857143px}.health-panel small{font-size:8.857143px}.debug-stat b{font-size:8.5px}
.hud #botModeSelect{max-width:150px;height:35px;padding:0 8px;border:1px solid #304b60;border-radius:4px;background:#091523;color:#b6d0e0;font:700 9px "Exo 2";letter-spacing:.3px;cursor:pointer}.hud #botModeSelect.active{border-color:#ae6074;color:#ff8296;background:rgba(52,15,26,.9)}.hud #botModeSelect:focus{outline:none;border-color:#5fdcf4}

.appearance-select{display:block;margin:8px 0 20px;padding:12px 14px;max-width:100%;background:#0d1b2a;color:#d9efff;border:1px solid #36556d;border-radius:5px;font:inherit}.appearance-select:focus{outline:2px solid #66dfff}

/* Keep the original upgrade design; reduce only its panel and cards by 15%. */
.upgrade-panel{box-sizing:border-box;width:323px;max-height:calc(calc(var(--view-h) * 100) - 105px);overflow-y:auto;scrollbar-width:thin}
.upgrade-grid{gap:8.5px}
.hud .upgrade-card{grid-template-rows:49px 31px;min-height:90px;padding:7px 8px 0}
.upgrade-card>span{width:calc(100% + 16px);margin-left:-8px;padding:7px 5px 4px}
.upgrade-tank-image{display:block;width:78px;height:49px;object-fit:contain;align-self:center;justify-self:center}
/* Give the image its own centered bay and put the divider closer to the name. */
.hud .upgrade-card{grid-template-rows:65px 22px;min-height:90px;padding:0 8px}
.hud .upgrade-card>.upgrade-tank-image{width:100px;height:100px;max-width:none;max-height:none;transform:none}
.hud .upgrade-card>span{display:flex;align-items:center;justify-content:center;align-self:stretch;width:calc(100% + 16px);margin-left:-8px;padding:0 3px;text-align:center}
.hud .upgrade-card>span b{font-size:10px;line-height:12px}
.hud .upgrade-ignore{color:#d9e9f5;font-size:9px;letter-spacing:.3px}


.tank-tree-overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.48);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s}
.tank-tree-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.tank-tree-wheel{width:min(calc(var(--view-w) * 73.8),calc(var(--view-h) * 73.8),810px);height:min(calc(var(--view-w) * 73.8),calc(var(--view-h) * 73.8),810px);transform:scale(.62);opacity:0;transition:transform .24s cubic-bezier(.2,.85,.25,1.08),opacity .18s ease;filter:drop-shadow(0 8px 22px rgba(0,0,0,.4))}
.tank-tree-overlay.open .tank-tree-wheel{transform:scale(1);opacity:1}
.tank-tree-wheel svg{display:block;width:100%;height:100%;overflow:visible}
.tank-tree-node{cursor:default}
.tank-tree-node:hover>path{stroke:#fff;stroke-width:4;filter:brightness(1.13)}
.tank-tree-node.current>path{stroke:#fff;stroke-width:4;filter:brightness(1.12)}
.tank-tree-tooltip{position:fixed;z-index:31;padding:5px 8px;border-radius:4px;background:rgba(15,24,32,.92);color:#edf6fc;font:700 14px Inter,Arial,sans-serif;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #000}
/* Centered arena menu and four-way tank preview. */
.menu{display:block;padding:0;min-height:100%;height:100%;overflow:auto}
.menu .hero{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(660px,calc(var(--view-w) * 44));max-width:none;text-align:center}
.hero .menu-logo{font-size:clamp(42px,calc(var(--view-w) * 5.2),82px);letter-spacing:-2px;margin:0 0 54px;line-height:1.1}
.hero .menu-logo span{color:var(--cyan);-webkit-text-stroke:0}
.menu-options{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px;text-align:left}
.menu-options label{font-size:15px;font-weight:700;color:#d9e9f5}
.menu-options select{display:block;width:100%;height:60px;margin-top:8px;border:1px solid #36546b;border-radius:5px;background:#132a40;color:#edf6fc;padding:0 18px;font-size:19px;font-weight:700}
:root{--mode-ffa:#4da6bf;--mode-teams:#4c9f70;--mode-survival:#a48745;--mode-infection:#759f38;--mode-home:#7857bc}
.mode-picker{position:relative;margin-top:8px;text-align:left}
.menu-options .mode-picker>select{display:none}
.menu-mode-trigger,.menu-mode-option{display:flex;align-items:center;justify-content:space-between;width:100%;height:60px;box-sizing:border-box;margin:0;padding:0 22px;border:2px solid #0003;border-radius:5px;background:var(--mode-ffa);color:#fff;font:700 19px Inter,Arial,sans-serif;text-align:left;text-shadow:0 2px 2px #17212d;box-shadow:inset 0 -13px 0 #0001;cursor:pointer}
[data-menu-mode="teams"]{background-color:var(--mode-teams)}
[data-menu-mode="survival"]{background-color:var(--mode-survival)}
[data-menu-mode="infection"]{background-color:var(--mode-infection)}
[data-menu-mode="home"]{background-color:var(--mode-home)}
.menu-mode-options{position:absolute;top:100%;left:0;z-index:8;width:100%;max-height:calc(var(--view-h) * 40);overflow-y:auto;border-radius:0 0 5px 5px;box-shadow:0 10px 22px #0004;scrollbar-width:thin}
.menu-mode-options[hidden],.menu-mode-option[hidden]{display:none}
.menu-mode-option{border-top:0;border-radius:0;flex-shrink:0}
.menu-mode-trigger[aria-expanded="true"]{border-radius:5px 5px 0 0}
.menu-mode-trigger:hover,.menu-mode-option:hover:not(:disabled){filter:brightness(1.1)}
.menu-mode-trigger:focus-visible,.menu-mode-option:focus-visible{outline:2px solid #edf6fc;outline-offset:-4px}
.menu-mode-option:disabled{opacity:.5;cursor:default}
.mode-picker-arrow{width:10px;height:10px;margin-left:12px;flex-shrink:0;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.menu-mode-trigger[aria-expanded="true"] .mode-picker-arrow{transform:translateY(3px) rotate(225deg)}
.hero .name-label{text-align:left}
.hero .start-row{display:flex;flex-direction:column;max-width:none;gap:24px}
.hero .start-row input{flex:none;width:100%;height:72px;font-size:23px}
.hero .start-row button{align-self:center;width:50%;padding:15px 18px}
.hero .appearance-select{margin-top:0;max-width:100%;font-size:12px}
.hero .start-row+.name-label{margin-top:24px}
.hero .controls{justify-content:center;gap:20px}
.menu .tank-card{position:absolute;right:calc(var(--view-w) * 7);top:50%;transform:translateY(-50%);width:360px;min-height:0;padding:28px 32px 34px}
.tank-showcase{position:relative;height:280px;margin:0 0 24px;outline:none}
.tank-showcase .orb{left:50%;top:0;transform:translateX(-50%);width:270px;height:270px}
.tank-showcase .tank-preview{left:calc(50% - 75px);top:60px;transition:opacity .22s ease,transform .28s ease}
.tank-showcase.expanded .tank-preview{opacity:0;transform:scale(.35);pointer-events:none}
.menu-tank-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;opacity:0;transform:scale(.85);visibility:hidden;transition:opacity .23s ease,transform .28s ease,visibility .23s}
.expanded .menu-tank-grid{opacity:1;transform:scale(1);visibility:visible}
.menu-tank-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(11,28,45,.85);border:1px solid #29485e;border-radius:5px;color:#d9e9f5;font:700 11px Arial;cursor:pointer;transition:background .15s,border-color .15s}
.menu-tank-grid button:hover,.menu-tank-grid button:focus-visible,.menu-tank-grid button.active{background:#17394f;border-color:var(--cyan);outline:none}
.menu-tank-grid img{width:105px;height:105px;object-fit:contain}
.menu .tank-card h2{margin:0 0 22px}
.menu .stat>i>b{transition:width .18s ease}


@media(prefers-reduced-motion:reduce){.tank-showcase .tank-preview,.menu-tank-grid,.menu .stat>i>b{transition:none}}
@media(prefers-reduced-motion:reduce){.tank-tree-overlay,.tank-tree-wheel{transition:none}}
.menu .hero{top:calc(50% + calc(var(--view-h) * 12))}
.hero .menu-logo img{display:block;width:min(540px,90%);height:auto;margin:0 auto}
.hero .pilot-label{font-size:15px;font-weight:700;color:#d9e9f5;letter-spacing:0}
.hero .start-row button{font-size:18px}
.menu .stat{font-size:11px;grid-template-columns:100px minmax(0,1fr);gap:10px}
.menu .stat>i{height:5px;width:85%;justify-self:start}


.menu .hero{transform:translate(-50%,-50%) scale(.85);transform-origin:center}
.menu-launch-row{position:relative;display:flex;justify-content:center;width:100%}
.hero .menu-launch-row #playBtn{width:auto;min-width:250px;padding:15px 20px}
.hero .menu-launch-row #settingsBtn{position:absolute;left:0;top:0;width:54px;height:54px;padding:12px;background:#132a40;color:#d9e9f5;border:1px solid #36546b;box-shadow:none;display:grid;place-items:center}
#settingsBtn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.menu-settings{position:fixed;left:0;top:28%;width:min(360px,calc(var(--view-w) * 90));padding:28px 24px;background:rgba(9,22,39,.97);border:1px solid #29485e;border-left:0;border-radius:0 8px 8px 0;z-index:6;box-shadow:12px 10px 35px #0005;transform:translateX(-105%);visibility:hidden;transition:transform .26s ease,visibility .26s}
.menu-settings.open{transform:translateX(0);visibility:visible}
.settings-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.settings-heading h2{font-size:19px;margin:0;letter-spacing:1px}
.settings-heading button{background:none;border:0;color:#d9e9f5;font-size:28px;cursor:pointer}
.menu-settings>label{font-size:15px;font-weight:700;color:#d9e9f5}
.menu-settings .appearance-select{width:100%;margin:10px 0 0;font-size:14px}

@media(prefers-reduced-motion:reduce){.menu-settings{transition:none}}
:root{--menu-scale:.9;--menu-label-size:15px;--menu-label-color:#d9e9f5}
.menu .hero{transform:translate(-50%,-50%) scale(var(--menu-scale));--label-scale:1}
.menu-settings{--label-scale:var(--menu-scale)}
.menu-options label,.hero .pilot-label,.menu-settings>label{font-family:Inter,Arial,sans-serif;font-size:calc(var(--menu-label-size) * var(--label-scale,1));font-weight:700;color:var(--menu-label-color);letter-spacing:0;line-height:1.2}
.hero .controls{font-size:12px;gap:20px}
.hero .controls b{font-size:11px;padding:5px 7px}
.menu-settings .appearance-select{width:auto;max-width:100%;height:34px;padding:6px 9px;font-size:12px;margin-top:8px}

.menu-main-content{transform:translateY(calc(var(--view-h) * -10.8))}
.hero .menu-launch-row #playBtn{min-width:280px;display:flex;align-items:center;justify-content:center;text-align:center}
.menu-options label,.hero .pilot-label{font-size:calc((var(--menu-label-size) + 1px) * var(--label-scale,1))}

/* Menu layout rules must not override the game's hidden state. */
#menu.hidden{display:none}
.ffa-mode .bullet-debug,.ffa-mode #hud .hint,.ffa-mode .top-actions>:not(#exitBtn):not(#gameSettingsBtn){display:none}
.ffa-scoreboard{display:none;position:absolute;right:28px;top:25px;width:220px;text-align:center;color:#edf6fc}
.ffa-mode .ffa-scoreboard{display:block}
.ffa-scoreboard h2{margin:0 0 10px;font:800 21px "Exo 2",Arial,sans-serif;text-shadow:0 2px 3px #000}
.score-row{height:22px;position:relative;border:2px solid #29485e;background:rgba(6,17,29,.85);border-radius:14px;overflow:hidden;margin:5px 0}
.score-row i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#237b8d,#3eb8be);opacity:.8}
.score-row span{position:relative;display:block;line-height:18px;font:700 12px/18px Inter,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 7px;text-shadow:0 1px 2px #07101d}

.hud .top-actions #exitBtn{display:none;position:fixed;right:25px;top:auto;bottom:233px;pointer-events:auto}
.menu-button-visible .hud .top-actions #exitBtn{display:block}

.menu-button-visible #game,.menu-button-visible #hud>:not(.top-actions),.menu-button-visible #hud .top-actions>:not(#exitBtn):not(#gameSettingsBtn){filter:blur(3px)}
.death-screen{position:fixed;z-index:20;inset:0;display:flex;justify-content:center;align-items:flex-start;background:rgba(0,0,0,.65);backdrop-filter:none;animation:deathShade .4s ease-out both}
.death-screen.hidden{display:none}
.death-content{width:min(620px,calc(var(--view-w) * 94));height:min(800px,calc(var(--view-h) * 96));display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px 0 70px;color:#fff;font:700 clamp(14px,calc(var(--view-w) * 1.2),24px) Arial,sans-serif;text-shadow:0 2px 2px #17212d,1px 0 2px #17212d;animation:deathReveal .45s cubic-bezier(.2,.75,.3,1) both}
.death-modes{text-align:center;width:100%}.death-modes strong{display:block;margin-bottom:8px}.death-modes div{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.death-content button{border:3px solid rgba(0,0,0,.22);border-radius:4px;color:white;font:inherit;text-shadow:inherit;cursor:pointer;box-shadow:inset 0 -16px 0 rgba(0,0,0,.1);transition:filter .15s,transform .15s}
.death-content button:hover{filter:brightness(1.12)}.death-content button:active{transform:translateY(2px)}
.death-modes button{padding:8px 18px;background:var(--mode-ffa);font-size:.8em}.death-modes button[data-death-mode=teams]{background:var(--mode-teams)}.death-modes button[data-death-mode=survival]{background:var(--mode-survival)}.death-modes button[data-death-mode=infection]{background:var(--mode-infection)}.death-modes button[data-death-mode=home]{background:var(--mode-home)}.death-modes button.selected{border-color:#fff}
.death-respawn{background:#7970c8;padding:12px 16px;font-size:.85em!important}
.death-killer{text-align:center;font-size:.9em}.death-killer strong{display:block;font-size:1.2em;margin-top:3px}
.death-results{display:flex;align-items:center;justify-content:space-between;width:90%;gap:30px}.death-results dl{margin:0}.death-results dl div{display:flex;gap:12px;margin:0 0 16px}.death-results dd{margin:0}.death-results figure{margin:0;text-align:center}.death-tank-tile{width:clamp(85px,calc(var(--view-w) * 7),135px);aspect-ratio:1;background:linear-gradient(#8cffff 0 60%,#81cfc5 60%);border:3px solid #71b6b3;border-radius:4px;display:grid;place-items:center}.death-tank-tile img{width:95%;height:95%;object-fit:contain;transform:rotate(-45deg)}.death-results figcaption{font-size:.8em;margin-top:12px}
.death-continue{background:#4ca9c6;padding:12px 44px}
.death-tank-tile img.death-shape-image{transform:none}
@keyframes deathShade{from{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.65)}}
@keyframes deathReveal{from{opacity:0;transform:translateY(-25px)}to{opacity:1;transform:translateY(0)}}


.menu-settings .background-theme-label{display:block;margin-top:22px}
body.playing.light-background #gameViewport:after{background:none}

/* Level and XP labels share scoreboard heading typography and contrast. */
.level #levelText,.level #xpText{font:800 11px "Exo 2",Arial,sans-serif;color:#edf6fc;text-shadow:0 2px 3px #000}

/* Direct theme selection; light HUD keeps the existing layout. */
.theme-buttons{display:flex;gap:8px;margin-top:8px}
.theme-buttons button{min-width:74px;padding:8px 16px;border:1px solid #36556d;border-radius:5px;background:#0d1b2a;color:#a9bdce;font:700 12px Inter,Arial,sans-serif;cursor:pointer}
.theme-buttons button[aria-pressed="true"]{background:#21455b;border-color:#66dfff;color:#edfaff;box-shadow:inset 0 0 0 1px #66dfff}
.theme-buttons button:focus-visible{outline:2px solid #66dfff;outline-offset:3px}

body.gray-hud .hud .player-panel,body.gray-hud .hud .skill-panel,body.gray-hud .hud .upgrade-panel,body.gray-hud .hud .bullet-debug,body.gray-hud .hud .hint{background:rgba(230,230,230,.9);color:#383838;border-color:#999;box-shadow:none}
body.gray-hud .hud .player-panel span,body.gray-hud .hud .skill-head,body.gray-hud .hud .skill-head b,body.gray-hud .hud .skill-name,body.gray-hud .hud .debug-stat b,body.gray-hud .hud .debug-stat>span,body.gray-hud .hud .upgrade-title span{color:#444}
body.gray-hud .hud .skill-head i{color:#168a6d}
body.gray-hud .hud .health-panel{background:rgba(230,230,230,.9);border-color:#999}
body.gray-hud .hud .health-line,body.gray-hud .hud .health-line span{color:#444}
body.gray-hud .hud .health-panel small{color:#168365}
body.gray-hud .hud .health-track,body.gray-hud .hud .level i,body.gray-hud .hud .debug-stat>i{background:#aaa;border-color:#777}
body.gray-hud .hud .health-track span{box-shadow:none}
body.gray-hud .hud .skill-cells i:not(.on){background:#c4c4c4;border-color:#999}
body.gray-hud .hud .skill-add,body.gray-hud .hud .upgrade-ignore,body.gray-hud .hud .top-actions button,body.gray-hud .hud .top-actions select{background:#dedede;border-color:#888;color:#333}
body.gray-hud .hud .skill-add:hover:not(:disabled){background:#b6e5d5;border-color:#33886d}
body.gray-hud .hud .upgrade-card{background:#c9c9c9;border-color:#888;color:#333}
body.gray-hud .hud .upgrade-card:hover{background:#d8e8e9;border-color:#4c9fac}
body.gray-hud .hud .upgrade-card>span{background:rgba(255,255,255,.3);border-color:#aaa}
body.gray-hud .hud .score-row{background:#555;border-color:#777}
body.gray-hud .hud .debug-stat{border-color:#aaa}

.theme-buttons{gap:6px;flex-wrap:wrap}
.theme-buttons button{min-width:62px;padding:8px 12px}
body.transparent-hud .hud .player-panel,body.transparent-hud .hud .skill-panel,body.transparent-hud .hud .upgrade-panel,body.transparent-hud .hud .health-panel,body.transparent-hud .hud .bullet-debug,body.transparent-hud .hud .hint{background:none;border-color:transparent;box-shadow:none;backdrop-filter:none}
body.transparent-hud .hud .player-panel,body.transparent-hud .hud .player-panel span,body.transparent-hud .hud .skill-head,body.transparent-hud .hud .skill-head b,body.transparent-hud .hud .skill-head i,body.transparent-hud .hud .skill-name,body.transparent-hud .hud .health-line,body.transparent-hud .hud .health-line span,body.transparent-hud .hud .debug-stat b,body.transparent-hud .hud .debug-stat>span,body.transparent-hud .hud .upgrade-title{color:#fff;text-shadow:-1px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,1px 1px 0 #333,0 1px 2px #333}
body.transparent-hud .hud .health-panel small{color:#75edb0;text-shadow:1px 1px 0 #333,-1px -1px 0 #333}
body.transparent-hud .hud .health-track,body.transparent-hud .hud .level i,body.transparent-hud .hud .debug-stat>i{background:#41474d;border:1px solid #34393f;border-radius:10px;overflow:hidden}
body.transparent-hud .hud .health-track span{background:#49e99c;box-shadow:none;border-radius:10px}
body.transparent-hud .hud .skill-row{--skill-color:#59c8f0}
body.transparent-hud .hud .skill-row:nth-child(2){--skill-color:#ff8585}
body.transparent-hud .hud .skill-row:nth-child(3){--skill-color:#f1d96c}
body.transparent-hud .hud .skill-row:nth-child(4){--skill-color:#b791f0}
body.transparent-hud .hud .skill-row:nth-child(5){--skill-color:#59e19e}
body.transparent-hud .hud .skill-row:nth-child(6){--skill-color:#ed8ed4}
body.transparent-hud .hud .skill-row:nth-child(7){--skill-color:#5abcec}
body.transparent-hud .hud .skill-row:nth-child(8){--skill-color:#59dcc7}
body.transparent-hud .hud .skill-cells{background:#41474d;border-radius:8px;overflow:hidden;gap:2px;padding:2px}
body.transparent-hud .hud .skill-cells i{background:transparent;border-color:transparent;box-shadow:none}
body.transparent-hud .hud .skill-cells i.on{background:var(--skill-color);border-color:var(--skill-color)}
body.transparent-hud .hud .skill-add{background:#e5eaf0;color:#273443;border-color:#536373}
body.transparent-hud .hud .score-row{background:#41474d;border-color:#34393f}
body.transparent-hud .hud .debug-stat{border-color:transparent}
body.transparent-hud .hud .upgrade-card{background:rgba(220,235,242,.25);border-color:#72848c}
body.transparent-hud .hud .upgrade-card>span{background:none;border-color:transparent;color:#fff;text-shadow:1px 1px 1px #222,-1px -1px 1px #222}

body.gray-hud .hud .health-panel small{color:#444}
body.transparent-hud .hud .health-panel small{color:#fff;text-shadow:-1px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,1px 1px 0 #333,0 1px 2px #333}





.theme-buttons button[hidden]{display:none}

.hud .top-actions #gameSettingsBtn{display:none;position:fixed;right:25px;top:auto;bottom:280px;pointer-events:auto}
.menu-button-visible .hud .top-actions #gameSettingsBtn{display:block}
body.playing .menu-settings{z-index:40;pointer-events:auto}

/* Reference wordmark: white TANK, cyan-to-blue NOVA and hexagonal N icon. */
.hero h1.menu-logo{display:flex;align-items:center;justify-content:center;gap:.28em;white-space:nowrap}
.hero .menu-logo .menu-brand-word{color:#edf6fc;-webkit-text-stroke:0}
.hero .menu-logo .menu-brand-nova{background:linear-gradient(180deg,#36d8ec 0%,#23bfe9 48%,#199bea 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:0}
.hero .menu-logo .menu-brand-mark{display:grid;place-items:center;flex:0 0 .88em;width:.88em;height:.96em;clip-path:polygon(50% 0,96% 24%,96% 76%,50% 100%,4% 76%,4% 24%);background:linear-gradient(145deg,#38def1 0%,#26bcef 45%,#397bea 100%);color:#07182b;-webkit-text-stroke:0;font:800 .48em/1 "Exo 2",Arial,sans-serif;letter-spacing:0;flex-basis:1.84em;width:1.84em;height:2em}

/* Keep the badge close to a regular hexagon; move only the wordmark. */
.hero .menu-logo .menu-brand-mark{flex-basis:2.08em;width:2.08em;height:2em}
.hero h1.menu-logo{position:relative;top:-24px}
.hero .menu-logo .menu-impact-letter{color:transparent;-webkit-text-stroke:0;background:radial-gradient(circle at 23% 33%,#243546 0 3%,#77858d 3.2% 4.7%,transparent 5.2%),radial-gradient(circle at 52% 53%,#243546 0 3.3%,#77858d 3.5% 5%,transparent 5.5%),radial-gradient(circle at 77% 73%,#243546 0 2.7%,#77858d 2.9% 4.2%,transparent 4.7%),linear-gradient(#edf6fc,#edf6fc);background-clip:text;-webkit-background-clip:text}

/* Enlarge the wordmark and badge letter independently of the badge silhouette. */
.hero .menu-logo .menu-brand-word{font-size:1.12em}
.hero .menu-logo .menu-badge-letter{font-size:1.2em;color:#07182b;-webkit-text-stroke:0;line-height:1}
.hero .menu-logo .menu-impact-letter{background:radial-gradient(circle at 23% 33%,#243546 0 4.6%,#77858d 4.8% 6.5%,transparent 7%),radial-gradient(circle at 52% 53%,#243546 0 5%,#77858d 5.2% 7%,transparent 7.5%),radial-gradient(circle at 77% 73%,#243546 0 4.2%,#77858d 4.4% 6%,transparent 6.5%),linear-gradient(#edf6fc,#edf6fc);background-clip:text;-webkit-background-clip:text;clip-path:polygon(0 0,18% 0,21% 18%,29% 22%,34% 14%,39% 18%,43% 0,100% 0,100% 100%,0 100%)}

#gameViewport{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;isolation:isolate}

.menu-settings .auto-fire-label{display:block;margin-top:22px}
.auto-fire-controls{display:flex;gap:8px;margin-top:8px}
.auto-fire-controls button{padding:8px 12px;border:1px solid #36556d;border-radius:5px;background:#0d1b2a;color:#d9efff;font:700 12px Inter,Arial,sans-serif;cursor:pointer}
#autoFireKeyBtn{min-width:62px;border-color:#66dfff}
#autoFireKeyBtn[aria-busy="true"]{background:#21455b}
.auto-fire-hint{display:block;margin-top:8px;color:#91a9ba;font:11px Inter,Arial,sans-serif}

/* Large text changes only the requested HUD labels, retaining panel geometry. */
.font-size-label{display:block;margin-top:16px}
body.hud-large-font .hud .player-panel b{font-size:17px}
body.hud-large-font .hud .player-panel span{font-size:10px}
body.hud-large-font .hud .upgrade-title span,body.hud-large-font .hud .upgrade-title b{font-size:13px}
body.hud-large-font .hud .upgrade-ignore{font-size:10px}
body.hud-large-font .hud .upgrade-card>span b{font-size:11px}
body.hud-large-font .hud .skill-head{font-size:11px}
body.hud-large-font .hud .skill-head i{font-size:14px}
body.hud-large-font .hud .skill-name{font-size:11px}
body.hud-large-font .hud .skill-add{font-size:16px}
/* Compensate for the health panel's existing 1.05 scale: +1 visible pixel. */
body.hud-large-font .hud .health-line{font-size:9.333333px}
body.hud-large-font .hud .health-line span,body.hud-large-font .hud .health-panel small{font-size:9.809524px}
body.hud-large-font .hud .level #levelText,body.hud-large-font .hud .level #xpText{font-size:12px}
#networkNotice{position:absolute;left:50%;top:60px;transform:translateX(-50%);z-index:50;max-width:650px;padding:6px 12px;font:600 12px Inter;color:#edf6fc;text-shadow:0 1px 3px #000;pointer-events:none;text-align:center}
#networkNotice:empty{display:none}
#networkNotice .network-profile-active{font-weight:800;color:#12376b;text-shadow:0 1px 2px rgba(255,255,255,.8)}


.online-name-layer{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:layout style paint}
.online-player-name{position:absolute;left:0;top:0;white-space:pre;font:600 12px/1 Inter,Arial,sans-serif;color:#edf6fc;pointer-events:none;will-change:transform;backface-visibility:hidden}
.online-player-name>span{display:block;transform:translate(-50%,-100%)}

#playBtn.disconnected{background:#c83e4d;color:#fff;box-shadow:0 8px 28px rgba(200,62,77,.25)}

/* Connection messages and unboxed menu control descriptions. */
#networkNotice.connection-status{font-size:22px;font-weight:700;max-width:min(900px,90%);line-height:1.35}
body.light-background .hero .controls .control-description{background:linear-gradient(180deg,#36d8ec 0%,#23bfe9 48%,#199bea 100%);background-clip:text;-webkit-background-clip:text;color:transparent}

.hero .controls .control-description{font-size:13px}
.menu-settings .appearance-select,.menu-settings .appearance-select option{font:700 12px Inter,Arial,sans-serif}
.reconnect-reason{display:none}
body.connection-lost .pilot-label,body.connection-lost #playerName{display:none}
body.connection-lost .hero .menu-launch-row{flex-direction:column;align-items:center}
body.connection-lost .hero .menu-launch-row #playBtn.disconnected{width:320px;max-width:calc(100% - 140px);min-width:0;border:3px solid #ac4356;border-radius:3px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12);font-size:20px;letter-spacing:0;animation:reconnect-blink 1s steps(1,end) infinite}
body.connection-lost .reconnect-reason{display:block;margin-top:10px;font:600 13px Inter,Arial,sans-serif;color:#edf6fc;text-shadow:0 1px 3px #000;text-align:center}
#playBtn .reconnect-symbol{display:inline-block;margin:0 5px 0 0;font-size:25px;vertical-align:middle}
@keyframes reconnect-blink{0%,100%{background:#cb3e59;border-color:#a8364b}50%{background:#a8a8a8;border-color:#858585}}
#playBtn:disabled{cursor:wait}

.hud .player-panel{pointer-events:auto;cursor:pointer}

/* One typography rule for every settings section heading. */
.menu-settings>label,.menu-settings>.background-theme-label,.menu-settings .border-settings .background-theme-label,.menu-settings .settings-display-row .background-theme-label{font-family:Inter,Arial,sans-serif;font-size:calc(var(--menu-label-size) * var(--label-scale,1));font-weight:700;color:var(--menu-label-color);letter-spacing:0;line-height:1.2}
.border-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:22px}
.border-settings>div{min-width:0}
.menu-settings .border-settings .background-theme-label{margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.border-settings .theme-buttons{flex-wrap:nowrap}
.border-settings .theme-buttons button{flex:1;min-width:0;padding-left:6px;padding-right:6px}
body.gray-hud .hud #regenText[data-full="true"]{color:#444!important}

/* Unified connection notification typography. */
#networkNotice.connection-status,body:not(.playing) #networkNotice{top:118px;font:700 18px/1.35 Inter,Arial,sans-serif}
body.connection-lost .reconnect-reason{font:700 16px/1.35 Inter,Arial,sans-serif}

.online-player-name{font-weight:700;text-shadow:-1px -1px 0 #17212d,1px -1px 0 #17212d,-1px 1px 0 #17212d,1px 1px 0 #17212d,0 2px 3px #000}

/* Compact optional panel shares the classic panel's height and label fonts. */
.health-player-name{display:none}
body.modern-health-panel .hud .health-panel{clip-path:none;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.18)}
body.modern-health-panel .hud .health-line{position:static}
body.modern-health-panel .health-player-name{display:block;position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#edf6fc;font:700 20px/1.2 Inter,Arial,sans-serif;letter-spacing:0;text-shadow:-1px -1px 0 #17212d,1px -1px 0 #17212d,-1px 1px 0 #17212d,1px 1px 0 #17212d,0 2px 3px #000}
body.modern-health-panel.hud-large-font .health-player-name{font-size:22px}
body.modern-health-panel .hud .health-track{border-radius:8px;overflow:hidden}
body.modern-health-panel .hud .health-track span{border-radius:6px}
body.modern-health-panel.gray-hud .hud .health-panel{background:rgba(230,230,230,.94);border-color:#9299a0;box-shadow:0 2px 8px rgba(0,0,0,.12)}
body.modern-health-panel.gray-hud .health-player-name{color:#17212d;text-shadow:none}
body.modern-health-panel.gray-hud .hud .health-line,body.modern-health-panel.gray-hud .hud .health-line span{color:#444}
body.modern-health-panel.gray-hud .hud .health-track{background:#aab3b8;border-color:#56646e}

/* Classic name-first HUD. Bar + footer retain the original card height. */
body.compact-health-panel .hud .health-panel{width:min(340px,calc(var(--view-w) * 42));display:flex;flex-direction:column;clip-path:none;background:none!important;border:1px solid transparent;box-shadow:none!important;padding:9px 12px 8px}
body.compact-health-panel .health-player-name{display:block;position:absolute;left:50%;top:-28px;transform:translateX(-50%);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#edf6fc;font:700 20px/1.2 Inter,Arial,sans-serif;letter-spacing:0;text-align:center;text-shadow:-1px -1px 0 #17212d,1px -1px 0 #17212d,-1px 1px 0 #17212d,1px 1px 0 #17212d,0 2px 3px #000}
body.compact-health-panel .hud .health-track{order:1;flex-shrink:0;height:24px;padding:2px;border:1.5px solid #17212d;border-radius:16px;background:#17212d}
body.compact-health-panel .hud .health-track span{border-radius:11px;box-shadow:none}
body.compact-health-panel .hud .health-line{order:2;position:static;margin:5px 0 0}
body.compact-health-panel .hud #healthText{position:absolute;left:50%;top:21px;transform:translate(-50%,-50%);z-index:1;color:#17212d;font-weight:700;letter-spacing:.5px;white-space:nowrap}
body.compact-health-panel .hud .health-panel small{position:absolute;right:12px;bottom:8px;margin:0;text-align:right}
body.compact-health-panel.hud-large-font .health-player-name{font-size:22px;top:-30px}

/* Gray repair status; classic footer uses the ready green on the dark theme. */
body.gray-hud .hud #regenText[data-status="healing"]{color:#444!important}
body.compact-health-panel .hud .health-line,body.compact-health-panel .hud .health-line span{color:#444}
body.compact-health-panel .hud #healthText{color:#17212d;font-size:12px}
body.compact-health-panel.hud-large-font .hud #healthText{font-size:13px}
body.compact-health-panel .hud #regenText[data-full="true"],body.compact-health-panel .hud #regenText[data-status="healing"]{color:#444!important}
body.compact-health-panel:not(.light-background) .hud .health-line>b{color:#66d9bc}
body.compact-health-panel:not(.light-background) .hud #regenText[data-full="true"],body.compact-health-panel:not(.light-background) .hud #regenText[data-status="healing"]{color:#66d9bc!important}

/* Minimap is a HUD layer above world nickname labels. */
.minimap-hud{position:absolute;right:0;bottom:0;pointer-events:none}
.minimap-hud[hidden]{display:none}
body:has(#deathScreen:not(.hidden)) .hud .health-panel{display:none!important}

/* Static cached tank sprites; row size and score bars remain unchanged. */
.score-row .score-tank-icon{position:absolute;left:2px;top:50%;width:23px;height:23px;transform:translateY(-50%);background-image:url('assets/scoreboard-tanks-619.png');background-size:184px 138px;background-repeat:no-repeat;pointer-events:none}
.score-row:has(.score-tank-icon) span{padding-left:28px}
.auto-fire-notice{position:absolute;z-index:40;top:118px;left:50%;transform:translate(-50%,-4px);padding:5px 12px;border-radius:2px;background:rgba(108,86,201,.94);color:#fff;font:700 14px/20px Inter,Arial,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .16s ease,transform .16s ease}
.auto-fire-notice[data-enabled="false"]{background:rgba(78,87,105,.94)}
.auto-fire-notice.visible{opacity:1;transform:translate(-50%,0)}
.team-balance-notice{top:154px;max-width:min(560px,calc(100% - 32px));box-sizing:border-box;white-space:normal;text-align:center;background:#125b9b}
.team-balance-notice[data-team="red"]{background:#a62f48}
@media(prefers-reduced-motion:reduce){.auto-fire-notice{transition:none}}

/* Scale the complete tank upgrade panel uniformly from its existing anchor. */
.hud .upgrade-panel{transform:scale(.97);transform-origin:top left}

/* The menu language selector keeps the saved selection. */
.language-picker{position:fixed;left:25px;bottom:22px;z-index:7;width:78px;font:700 14px Inter,Arial,sans-serif;color:#fff}
.language-picker select{display:none}
.language-trigger{display:flex;align-items:center;justify-content:space-between;gap:6px;width:78px;height:34px;padding:0 8px;border:1px solid #333;border-radius:5px;background:#141414;color:#fff;font:inherit;cursor:pointer}
.language-flag{display:inline-flex;flex:0 0 22px;width:22px;height:15px;overflow:hidden;border-radius:1px;box-shadow:0 0 0 1px #ffffff14}
.language-flag svg{display:block;width:100%;height:100%}
.language-code{flex:1;text-align:center}
.language-chevron{flex:0 0 5px;width:5px;height:5px;border-right:1.5px solid #ddd;border-bottom:1.5px solid #ddd;transform:translateY(-2px) rotate(45deg)}
.language-trigger[aria-expanded="true"] .language-chevron{transform:translateY(2px) rotate(225deg)}
.language-options{position:absolute;left:0;bottom:calc(100% + 6px);width:184px;max-height:min(340px,calc(var(--view-h) * 72));padding:4px;border:1px solid #333;border-radius:6px;background:#0d0d0d;box-shadow:0 7px 24px #0005;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#666 #171717}
.language-options[hidden]{display:none}
.language-option{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:6px 8px;border:0;border-radius:4px;background:none;color:#fff;font:inherit;line-height:20px;text-align:left;white-space:nowrap;cursor:pointer}
.language-option[aria-selected="true"]{background:#343434}
.language-option:hover{background:#2a2a2a}
.language-trigger:focus-visible,.language-option:focus-visible{outline:2px solid #e0e0e0;outline-offset:-3px}
body.playing .language-picker{display:none}

/*734: an original TankNova guide beside the compact language control. */
.rules-trigger{position:fixed;left:111px;bottom:22px;z-index:7;display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:1px solid #333;border-radius:5px;background:#141414;color:#fff;font:700 14px Inter,Arial,sans-serif;white-space:nowrap;cursor:pointer}
.rules-trigger svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rules-trigger:hover{background:#2a2a2a}
.rules-trigger:focus-visible{outline:2px solid #e0e0e0;outline-offset:-3px}
body.playing .rules-trigger,body.room-waiting .rules-trigger,.infection-mode:has(#menu.hidden) .rules-trigger{display:none}
.rules-dialog{--rules-bg:#101e2e;--rules-card:#17283a;--rules-line:#304458;--rules-text:#ecf4fa;--rules-muted:#b0c1d0;--rules-accent:#65d2ef;--rules-tint:#19384a;--rules-good:#9dd381;--rules-good-bg:#203426;--rules-good-line:#3f6340;width:min(940px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);max-height:min(820px,calc(100dvh - 48px));margin:auto;padding:0;overflow:hidden;border:1px solid var(--rules-line);border-radius:14px;background:var(--rules-bg);color:var(--rules-text);box-shadow:0 24px 80px #0006;font:400 15px/1.55 Inter,Arial,sans-serif}
.rules-dialog[open]{display:flex;flex-direction:column}
.rules-dialog::backdrop{background:rgba(3,9,17,.76)}
body.light-background .rules-dialog{--rules-bg:#edf1f5;--rules-card:#fff;--rules-line:#c9d3de;--rules-text:#203244;--rules-muted:#465d70;--rules-accent:#137c9c;--rules-tint:#d9ebf2;--rules-good:#31612e;--rules-good-bg:#e4efdf;--rules-good-line:#b6cfaa}
body.gray-hud .rules-dialog{--rules-bg:#e8e8e8;--rules-card:#f6f6f6;--rules-line:#c1c1c1;--rules-text:#303030;--rules-muted:#555;--rules-accent:#3f6775;--rules-tint:#d8e1e4}
.rules-heading{display:flex;align-items:center;gap:13px;padding:24px 28px 0;flex-shrink:0}
.rules-emblem{display:grid;place-items:center;width:43px;height:48px;flex-shrink:0;background:linear-gradient(145deg,#54d9f0,#3387e9);color:#071b2b;font:800 27px "Exo 2",Arial,sans-serif;clip-path:polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%)}
.rules-heading h2{margin:0;font:800 29px/1.15 "Exo 2",Arial,sans-serif}
.rules-close{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;margin-left:auto;padding:8px;border:1px solid var(--rules-line);border-radius:7px;background:var(--rules-card);color:var(--rules-text);cursor:pointer}
.rules-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rules-intro{margin:16px 28px 22px;color:var(--rules-muted);flex-shrink:0}
.rules-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 28px 18px;border-bottom:1px solid var(--rules-line);flex-shrink:0}
.rules-tabs button{min-height:44px;padding:9px 10px;border:1px solid var(--rules-line);border-radius:6px;background:transparent;color:var(--rules-muted);font:700 14px/1.3 Inter,Arial,sans-serif;overflow-wrap:anywhere;cursor:pointer}
.rules-tabs button[aria-selected="true"]{color:var(--rules-accent);background:var(--rules-tint);border-color:var(--rules-accent)}
.rules-tabs button:hover,.rules-close:hover{filter:brightness(.94)}
.rules-body{min-height:0;padding:20px 28px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rules-line) transparent}
.rules-section{display:grid;gap:10px;outline-offset:4px}
.rules-section[hidden]{display:none}
.rule-card{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:12px;padding:16px 18px;border:1px solid var(--rules-line);border-left:3px solid var(--rule-accent,var(--rules-accent));border-radius:8px;background:var(--rules-card)}
.rule-number{margin-top:2px;color:var(--rule-accent,var(--rules-accent));font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.rule-card h3,.rules-allowed h3{margin:0 0 5px;font-size:16px;font-weight:700;line-height:1.4}
.rule-card p,.rules-allowed p,.rules-note p{margin:0;color:var(--rules-muted)}
#rulesRespect{--rule-accent:#ad88d5}#rulesBugs{--rule-accent:#ce934b}
.rules-allowed,.rules-note{padding:15px 18px;border:1px solid var(--rules-good-line);border-radius:8px;background:var(--rules-good-bg)}
.rules-allowed h3{color:var(--rules-good)}
.rules-allowed p{color:var(--rules-good)}
.rules-note{border-color:var(--rules-line);background:var(--rules-tint)}
.rule-mode-dot{width:12px;height:12px;margin:6px 0 0 5px;border-radius:3px;background:var(--rule-accent)}
[data-rule-mode="ffa"]{--rule-accent:var(--mode-ffa)}[data-rule-mode="teams"]{--rule-accent:var(--mode-teams)}[data-rule-mode="survival"]{--rule-accent:var(--mode-survival)}[data-rule-mode="infection"]{--rule-accent:var(--mode-infection)}[data-rule-mode="home"]{--rule-accent:var(--mode-home)}
.rules-footer{padding:13px 28px;border-top:1px solid var(--rules-line);color:var(--rules-muted);font-size:12px;flex-shrink:0}
.rules-dialog button:focus-visible,.rules-section:focus-visible{outline:2px solid var(--rules-accent);outline-offset:3px}
@media(max-width:560px){.rules-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);font-size:14px}.rules-heading{padding:18px 18px 0}.rules-intro{margin:12px 18px 18px}.rules-heading h2{font-size:25px}.rules-tabs{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 18px 14px}.rules-body{padding:14px 18px}.rule-card{padding:13px 12px;gap:6px;grid-template-columns:24px minmax(0,1fr)}.rules-footer{padding:11px 18px}}

html:not([lang="tr"]) .upgrade-title{flex-wrap:wrap;gap:4px}
html:not([lang="tr"]) .menu-options select{min-width:0;width:100%}
/* Infection uses the approved full-screen death/result composition. */
#infectionStatus{position:absolute;top:48px;left:50%;transform:translateX(-50%);max-width:75%;padding:9px 17px;border:1px solid rgba(108,186,220,.3);border-radius:8px;color:#daedf3;background:rgba(8,21,31,.88);font:600 13px Inter,sans-serif;text-align:center;pointer-events:none;z-index:25}
#infectionStatus[hidden],#infectionTestStart[hidden]{display:none}
#infectionTestStart{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:26;padding:6px 12px;border:1px solid #698c48;border-radius:5px;background:#213421;color:#e1edd4;font:600 11px Inter,sans-serif;cursor:pointer}
/* Infection leader selection and automatic five-second respawn share one card. */
.infection-flow{position:absolute;inset:0;z-index:64;background:rgba(4,12,22,.34);pointer-events:auto}
.infection-flow[hidden]{display:none}
.infection-flow-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:740px;height:230px;max-width:calc(100% - 48px);padding:26px;border:1px solid #63889c;border-radius:14px;background:rgba(13,28,40,.94);box-shadow:0 14px 36px #0004;text-align:center;color:#eef5fa;font-family:Inter,Arial,sans-serif}
/* Remaining lives are two compact bars beside the unchanged respawn heading. */
.infection-flow-lives{position:absolute;left:26px;top:33px;display:flex;gap:4px;pointer-events:none}
.infection-flow-lives[hidden]{display:none}
.infection-flow-lives>i{display:block;width:24px;height:10px;border:1px solid #536875;border-radius:2px;background:#20323f}
.infection-flow-lives>i.available{border-color:#a6e240;background:#a6e240}
.infection-selection-roster{z-index:5;pointer-events:none}
body.online-awaiting .infection-selection-roster,body.room-waiting .infection-selection-roster{display:none!important}
.infection-flow h2{margin:0 0 20px;font:700 18px/1.35 Inter,Arial,sans-serif;letter-spacing:2px;color:#a8c4d1}
.infection-respawn-line{display:flex;align-items:center;justify-content:center;gap:18px;min-height:66px}
.infection-respawn-line>b{font:800 64px/1 "Exo 2",Arial,sans-serif;color:#a6e240}
.infection-respawn-line>span{font:700 25px/1.35 Inter,Arial,sans-serif}
#infectionFlowNote{margin:18px 0 20px;font:500 18px/1.4 Inter,Arial,sans-serif;color:#bed1de}
.infection-flow-track{height:5px;border-radius:4px;background:#385061;overflow:hidden}
.infection-flow-track>i{display:block;height:100%;width:100%;background:#a6e240;border-radius:4px;transition:width .18s linear}
.infection-flow[data-kind=selection] .infection-flow-card{padding:18px 26px 20px}
.infection-flow[data-kind=selection] h2{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);width:calc(100% + 400px);max-width:none;margin:0;padding:7px 24px;white-space:nowrap;background:linear-gradient(90deg,transparent 0%,rgba(8,17,22,.5)20%,rgba(8,17,22,.84)50%,rgba(8,17,22,.5)80%,transparent 100%)}
.infection-flow[data-kind=selection] #infectionFlowNote{margin:14px 0 0}
.infection-tank-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.infection-tank-choice{position:relative;display:flex;align-items:center;justify-content:space-between;flex-direction:column;min-width:0;height:150px;padding:8px 5px 5px;border:1px solid #708b43;border-radius:7px;background:rgba(39,61,59,.18);color:#eff8fa;cursor:pointer;font-family:Inter,Arial,sans-serif}
.infection-tank-choice img{width:100%;height:104px;object-fit:contain;pointer-events:none}
.infection-tank-choice>strong{display:flex;align-items:center;justify-content:center;width:100%;height:30px;border-radius:3px;background:#9bd63c;color:#17251c;font-size:14px;font-weight:700}
.infection-tank-choice:hover:not(:disabled){border-color:#b5ed68;background:rgba(85,115,77,.20)}
.infection-tank-choice:focus-visible{outline:2px solid #b5ed68;outline-offset:4px}
.infection-tank-choice:disabled{opacity:.65;cursor:default}
.infection-tank-unknown:disabled{opacity:1}
.infection-tank-unknown img{filter:grayscale(1) brightness(.14);opacity:.8}
.infection-tank-unknown>strong{background:rgba(113,139,66,.42);color:#b5c3be}
.infection-unknown-mark{position:absolute;top:40px;left:0;width:100%;font:700 32px/1 Arial,sans-serif;color:#738b9a;pointer-events:none}
.infection-flow[data-kind=respawn] .infection-tank-choices,.infection-flow[data-kind=selection] .infection-respawn-line,.infection-flow[data-kind=selection] .infection-flow-track{display:none}
body.light-background #infectionStatus{background:rgba(232,239,241,.95);color:#1a3446;border-color:#8195a1}
.infection-mode #networkNotice{top:118px}.infection-mode:not(.playing) .health-panel{display:none!important}
.infection-mode .level>i,.infection-mode #xpText{display:none}
.infection-screen{position:absolute;inset:0;z-index:70;display:flex;justify-content:center;background:rgba(0,0,0,.65);font-family:Inter,Arial,sans-serif;color:#f5f8fc;text-align:center;text-shadow:0 3px 2px #16212d,1px 0 2px #16212d}
.infection-screen.hidden,.infection-screen [hidden]{display:none!important}
.infection-screen[data-kind="result"].infection-result-enter{animation:infection-result-shade .45s ease-out both}
.infection-screen[data-kind="result"].infection-result-enter .infection-content{animation:infection-result-panel .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes infection-result-shade{from{opacity:0}to{opacity:1}}
@keyframes infection-result-panel{from{opacity:0;transform:translate(-50%,16px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.infection-mode-nav{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;font:800 25px Inter,Arial,sans-serif}
.infection-mode-nav strong{display:block;margin-bottom:15px}.infection-mode-nav>div{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.infection-mode-nav button{padding:8px 20px;border:2px solid rgba(0,0,0,.2);border-radius:4px;background:var(--mode-ffa);color:white;font:700 18px Inter,Arial,sans-serif;box-shadow:inset 0 -12px 0 #0001;text-shadow:0 2px 2px #17212d;cursor:pointer}
.infection-mode-nav button[data-infection-mode="teams"]{background:var(--mode-teams)}.infection-mode-nav button[data-infection-mode="survival"]{background:var(--mode-survival)}.infection-mode-nav button[data-infection-mode="home"]{background:var(--mode-home)}.infection-mode-nav button[data-infection-mode="infection"]{background:var(--mode-infection)}.infection-mode-nav button.selected{border-color:#e7fac8}.infection-mode-nav button:disabled{opacity:.5;cursor:default}
.infection-content{position:absolute;top:18%;left:50%;transform:translateX(-50%);height:auto;display:block;padding:0;background:none;border:0;box-shadow:none;animation:none}
.infection-eyebrow{font-size:.85em;font-weight:700;letter-spacing:.5px;line-height:1.2;margin-bottom:8px;color:#edf2f9}
.infection-content h2{font-size:1.4em;line-height:1.15;margin:0;font-weight:700;color:#bceaff;text-shadow:inherit}
.infection-content p{font-size:.85em;font-weight:700;line-height:1.3;margin:8px 0 0;color:#f1f4f8}
.infection-screen[data-kind="elimination"] .infection-content{width:min(760px,calc(var(--view-w) * 94))}
.infection-screen[data-kind="elimination"] h2{font-size:2.6em;color:#f5f8ff}
.infection-screen[data-kind="elimination"] .infection-eyebrow{font-size:1em;color:#cad3df}
.infection-badge{display:table;margin:14px auto 10px;padding:5px 14px;background:#b5ef49;border:2px solid #8ab635;border-radius:6px;color:#152130;font-size:.8em;font-weight:700;text-shadow:none;box-shadow:inset 0 2px 4px #e6ffa380}
.infection-screen[data-kind="elimination"] #infectionSubtitle{color:#d3dde9}
.infection-screen[data-kind="elimination"] .infection-badge{font-size:.85em}
.infection-screen[data-kind="elimination"] .infection-elimination{gap:28px;margin-top:30px}
.infection-screen[data-kind="elimination"] .infection-elimination dl>div{font-size:1em}
.infection-elimination{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:30px auto 0;width:90%}
.infection-elimination dl{margin:0;min-width:0;flex:1;text-align:left}.infection-elimination dl>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;font-size:.9em;line-height:1.3;font-weight:700}.infection-elimination dl>div:last-child{margin-bottom:0}.infection-elimination dd{margin:0;min-width:50px;text-align:left}
.infection-killer{margin:0;border-left:2px solid #91a4b52b;min-width:150px;padding-left:24px;display:flex;align-items:center;flex-direction:column}
.infection-killer>strong{font-size:.8em;margin-bottom:10px}.infection-killer-art{width:clamp(85px,calc(var(--view-w) * 7),135px);aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center;border:3px solid #83b9b8;border-radius:4px;background:linear-gradient(#5ad1da,#71d2c9);text-shadow:none}.infection-killer-art img{width:95%;height:95%;object-fit:contain;pointer-events:none}
.infection-killer figcaption{display:flex;align-items:center;flex-direction:column;margin-top:10px}.infection-killer figcaption b{font-size:1.2em;line-height:1.1}.infection-killer figcaption span{font-size:.8em;color:#c0cdda;margin-top:6px}
.infection-content .infection-counts{font-size:.85em;color:#c4d0dd;margin:24px 0}
/* Font, border, hover and height inherit the normal death-content buttons. */
.infection-actions{display:flex;justify-content:center;gap:14px;margin-top:24px}.infection-actions button{padding:12px 44px;background:#4ca9c6}
.infection-actions #infectionMenu{background:rgba(20,34,45,.25);border-color:#aec5d5}
#infectionFooter{font-size:.8em;color:#eef1f6;margin:24px 0 0;min-height:24px}
#infectionWinnersLabel{font-size:1em;font-weight:700;margin:28px 0 14px;line-height:1.2}
.infection-winners{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:104px;gap:10px;width:560px;max-width:100%;max-height:218px;overflow:hidden;overscroll-behavior:contain;margin:0 auto;scrollbar-width:thin;scrollbar-color:#9bdded #0c1720}
.infection-winners.scrollable{overflow-y:auto;padding-right:10px;box-sizing:content-box}.infection-winners:empty{display:none}
.infection-winner{min-width:0;box-sizing:border-box;border:2px solid #65a8c3;border-radius:8px;background:rgba(5,16,25,.65);display:flex;align-items:center;flex-direction:column;justify-content:center;overflow:hidden}
.infection-winner img{width:126px;max-width:100%;height:74px;object-fit:contain;pointer-events:none}.infection-winner span{font-size:.75em;line-height:1.15;font-weight:700;max-width:96%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f3f7ff;margin-top:0}
.infection-screen[data-winner="infected"] h2{color:#b2ec3d}.infection-screen[data-winner="infected"] .infection-winner{border-color:#a4d937;background:rgba(8,19,16,.7)}.infection-screen[data-winner="infected"] .infection-winners{scrollbar-color:#b0e83c #101912}.infection-screen[data-winner="infected"] #infectionContinue{background:linear-gradient(#8bbf18,#73a910);border-color:#a9e337}.infection-screen[data-winner="infected"] #infectionMenu{border-color:#afe345}
/* Infection always uses the same compact two-column scoreboard, at any count. */
.infection-scoreboard.infection-two-columns #scoreboardRows{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--infection-rows),22px);grid-template-columns:repeat(2,minmax(0,1fr));column-gap:5px;row-gap:5px}
.infection-scoreboard.infection-two-columns .score-row{margin:0;height:22px;box-sizing:border-box;min-width:0}
.infection-scoreboard .score-row span{padding-right:3px}.infection-scoreboard .score-row i{width:100%}
.infection-scoreboard .infection-eliminated{opacity:.55}.infection-scoreboard .infection-waiting-player{opacity:.65}
@media(max-height:650px){.infection-content{top:18%}.infection-elimination{margin-top:20px}.infection-content .infection-counts{margin:18px 0}.infection-actions{margin-top:18px}#infectionWinnersLabel{margin-top:20px}}

.infection-mode:has(#infectionScreen:not(.hidden)) #infectionStatus{visibility:hidden}

.infection-mode:has(#menu.hidden) .topbar,.infection-mode:has(#menu.hidden) .language-picker{display:none}
/* A dead/observing player has no upgrade controls; use the live theme canvas
   without the main menu's directional shading. Joining restores normal HUD. */
body.infection-mode:not(.playing):has(#menu.hidden) .hud .upgrade-panel,
body.infection-mode:not(.playing):has(#menu.hidden) .hud .skill-panel{display:none!important}
body.infection-mode:not(.playing):has(#menu.hidden) #gameViewport:after{background:none}

/* One approved background and one live panel layout for either winner. */
body{--infection-backdrop:url('assets/infection-backdrop-678.png');--infection-floor:#ccc}
body:not(.light-background){--infection-backdrop:url('assets/infection-backdrop-dark-689.png');--infection-floor:#091625}
body:has(#gameMode option[value="infection"]:checked) #menu{background:transparent}
body:has(#gameMode option[value="infection"]:checked) #menu .tank-card{display:none}
body:has(#gameMode option[value="infection"]:checked) #menu .menu-options label,body:has(#gameMode option[value="infection"]:checked) #menu .pilot-label{color:#344a5a}
body:has(#gameMode option[value="infection"]:checked):has(#menu:not(.hidden)) #gameViewport:after{background:none}
.infection-screen[data-kind="intermission"]{background:transparent;text-shadow:none;--result-border:#577f9c;--result-title:#bce6ff;--result-surface:#152633;--result-tint:#203e51;--result-card:#142531}
.infection-screen[data-kind="intermission"][data-winner="infected"]{--result-border:#65853b;--result-title:#b9dc86;--result-surface:#142126;--result-tint:#223729;--result-card:#142329}
.infection-screen[data-kind="intermission"] .infection-mode-nav{display:none}
.infection-screen[data-kind="intermission"] .infection-content{top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(620px,calc(var(--view-w) * 94));height:422px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:22px 34px 18px;border:1px solid var(--result-border);border-radius:14px;background:linear-gradient(135deg,var(--result-tint),var(--result-surface));font:600 14px Inter,Arial,sans-serif;box-shadow:0 12px 36px #0003}
.infection-screen[data-kind="intermission"] .infection-content>*{flex-shrink:0}
.infection-screen[data-kind="intermission"] .infection-eyebrow,.infection-screen[data-kind="intermission"] #infectionFooter{font:700 20px/1.2 Inter,Arial,sans-serif;color:#bccbd4}
.infection-screen[data-kind="intermission"] .infection-eyebrow{height:24px;color:var(--result-title);letter-spacing:2px;margin-bottom:8px;white-space:nowrap}
.infection-screen[data-kind="intermission"] h2{height:30px;font-size:26px;line-height:30px;color:var(--result-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.infection-screen[data-kind="intermission"] .infection-winners,.infection-screen[data-kind="intermission"] .infection-winners.scrollable{box-sizing:border-box;width:100%;height:210px;min-height:210px;max-height:210px;grid-auto-rows:100px;margin-top:16px;padding-right:8px;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;scrollbar-color:var(--result-border) #13232c}
.infection-screen[data-kind="intermission"] .infection-winner{border:1px solid var(--result-border);border-radius:6px;background:var(--result-card)}
.infection-screen[data-kind="intermission"] .infection-winner span{width:96%;font-size:12px;text-align:center}
.infection-screen[data-kind="intermission"] .infection-actions{order:1;margin-top:18px}
.infection-screen[data-kind="intermission"] #infectionMenu{height:37px;padding:10px 22px;font:700 13px/15px Inter,Arial,sans-serif;border:1px solid var(--result-border);border-radius:5px;color:#c9dce8;background:#14232d;text-shadow:none;box-shadow:none}
.infection-screen[data-kind="intermission"] #infectionFooter{order:2;height:24px;margin-top:12px;min-height:24px;white-space:nowrap}
.infection-intermission #networkNotice{display:none!important}

/* No gameplay HUD exists while acquiring a room or waiting for capacity. */
body.online-awaiting .hud,body.room-waiting .hud{display:none!important}
.room-waiting-screen{position:absolute;inset:0;z-index:55;pointer-events:none;color:#edf6fc;text-shadow:0 2px 2px #17212d}
.room-waiting-screen .infection-mode-nav{text-align:center;pointer-events:auto}
body.room-waiting #networkNotice.connection-status{top:118px;max-width:min(1050px,90%);z-index:56;font-size:18px;line-height:1.35}
body.room-waiting .language-picker{display:none}

/* Infection paint is a fixed visual skin. Theme selection changes only the
   illustration/floor; language controls and all panel geometry stay intact. */
body:has(#gameMode option[value="infection"]:checked) .hero .menu-logo .menu-brand-nova{
 background:url('assets/infection-paint-689.svg') 3px 4px/112px 72px repeat,linear-gradient(180deg,#36d8ec 0%,#23bfe9 48%,#199bea 100%);
 background-clip:text;-webkit-background-clip:text;color:transparent
}
body:has(#gameMode option[value="infection"]:checked) #playBtn:not(.disconnected){
 background:url('assets/infection-frame-689.svg') center/100% 100% no-repeat,linear-gradient(135deg,var(--cyan),#1b8cff);
 box-shadow:inset 0 0 0 1px #638b43,0 12px 35px rgba(63,94,35,.18)
}
body:has(#gameMode option[value="infection"]:checked) #settingsBtn{
 background:#16272a url('assets/infection-frame-689.svg') center/100% 100% no-repeat;
 border-color:#719544;color:#d5e7d0
}
body:not(.light-background):has(#gameMode option[value="infection"]:checked) #menu .menu-options label,
body:not(.light-background):has(#gameMode option[value="infection"]:checked) #menu .pilot-label{color:#a9bdce}

/* Apply to the local living infected tank only, using its server snapshot. */
#infectionVignette{position:absolute;inset:0;z-index:2;display:none;pointer-events:none;contain:strict;color:#99aa55}
#infectionVignette *{pointer-events:none}
#infectionVignette .infection-corner{position:absolute;width:min(160px,calc(var(--view-w) * 8.4),calc(var(--view-h) * 18));height:auto;overflow:hidden}
#infectionVignette[data-layer="2"] .infection-corner{width:min(240px,calc(var(--view-w) * 12.5),calc(var(--view-h) * 21.6))}
#infectionVignette .top-left{left:0;top:0}
#infectionVignette .top-right{right:0;top:0}
#infectionVignette .bottom-left{left:0;bottom:0}
#infectionVignette .bottom-right{right:0;bottom:0}
body.light-background #infectionVignette{color:#6f8036}
body.playing.infection-mode.infection-hud:not(.online-awaiting):not(.room-waiting) #infectionVignette{display:block}
body.infection-mode.infection-hud:not(.gray-hud) .hud :is(.player-panel,.upgrade-panel,.skill-panel){
 background:#102027 url('assets/infection-frame-689.svg') center/100% 100% no-repeat;
 border-color:#638443;color:#dce8d4
}
body.infection-mode.infection-hud:not(.gray-hud) .hud :is(.player-panel,.upgrade-panel,.skill-panel){border-left-color:#8bbf43}
body.infection-mode.infection-hud:not(.gray-hud) .hud .player-panel span{color:#a0b78c}
body.infection-mode.infection-hud:not(.gray-hud) .hud .upgrade-title span{color:#a7cf73}
body.infection-mode.infection-hud:not(.gray-hud) .hud .upgrade-title b{color:#dce8d4}
body.infection-mode.infection-hud:not(.gray-hud) .hud .upgrade-card{
 background:#152b32 url('assets/infection-frame-689.svg') center/100% 100% no-repeat;
 border-color:#526d41;color:#e2ecd9
}
body.infection-mode.infection-hud:not(.gray-hud) .hud .upgrade-card:hover{background-color:#203b34;border-color:#97bf5d}
body.infection-mode.infection-hud:not(.gray-hud) .hud .upgrade-card>span{background:rgba(7,20,24,.65);border-color:#40573b;color:#e2ecd9}
body.infection-mode.infection-hud:not(.gray-hud) .hud .skill-head,
body.infection-mode.infection-hud:not(.gray-hud) .hud .skill-name{color:#b2c5aa}
body.infection-mode.infection-hud:not(.gray-hud) .hud .skill-head b{color:#c2d0b8}
body.infection-mode.infection-hud:not(.gray-hud) .hud .skill-head i{color:#a4d263}
body.infection-mode.infection-hud:not(.gray-hud) .hud .skill-row button{border-color:#658443;color:#b5df7c;background:#20352e}
body.infection-mode.infection-hud:not(.gray-hud):not(.compact-health-panel) .hud .health-panel{
 background:#14272b url('assets/infection-frame-689.svg') center/100% 100% no-repeat;
 border-color:#6d8b46
}
body.infection-mode.infection-hud:not(.gray-hud) .hud .health-track{position:relative;border-color:#638443}
body.infection-mode.infection-hud:not(.gray-hud) .hud .health-track:after{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:url('assets/infection-frame-689.svg') center/100% 100% no-repeat
}
body.infection-mode.infection-hud:not(.gray-hud):not(.compact-health-panel) .hud .health-line,
body.infection-mode.infection-hud:not(.gray-hud):not(.compact-health-panel) .hud .health-line span{color:#c2d5ba}
body.infection-mode.infection-hud:not(.gray-hud):not(.compact-health-panel) .hud .health-line>b{color:#a2ca78}
body.infection-mode.infection-hud:not(.gray-hud):not(.compact-health-panel) .hud #regenText:is([data-status="full"],[data-status="healing"]){color:#a2ca78!important}
body.infection-mode.infection-hud:not(.gray-hud).compact-health-panel .hud #healthText{color:#17212d}

/* Classic health style: eight separate colored upgrade pills, with clear gaps.
   Nova1/2 and the shared chat/hover edge retain their existing layout. */
.classic-skill-name,.classic-skill-key,.classic-skill-points{display:none}
body.compact-health-panel #hud .skill-panel{height:249px;background:none;border-color:transparent;border-left-color:#28cda9;box-shadow:none;pointer-events:none}
/* Only the counter may extend above the unchanged edge while the live panel is open. */
body.compact-health-panel:has(#deathScreen.hidden) #hud .skill-panel:not(.collapsed){clip-path:inset(-12px 0 0 0)}
body.infection-mode.infection-hud:not(.gray-hud).compact-health-panel #hud .skill-panel{border-left-color:#8bbf43}
body.compact-health-panel #hud .skill-head{position:absolute;inset:0;height:auto;margin:0;pointer-events:none}
body.compact-health-panel #hud .skill-head>span{visibility:hidden}
body.compact-health-panel #hud .skill-head>b{display:none}
body.compact-health-panel #hud .classic-skill-points{position:absolute;left:224px;top:2px;width:46px;height:28px;overflow:visible;transform:rotate(-25deg);transform-origin:center;pointer-events:none}
body.compact-health-panel #hud .has-skill-points .classic-skill-points{display:block}
body.compact-health-panel #hud .classic-skill-points text{font:800 18px "Exo 2",Arial,sans-serif;letter-spacing:0;fill:#e4e4e4;stroke:#181818;stroke-width:2.5px;stroke-linejoin:round;paint-order:stroke fill}
body.compact-health-panel #skillRows{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:218px;max-width:calc(100% - 22px)}
body.compact-health-panel #hud .skill-row{--classic-skill-color:#b58a65;position:relative;display:block;height:20px;margin-bottom:5px;border:2px solid #101010;border-radius:12px;background:#151515;overflow:hidden}
body.compact-health-panel #hud .skill-row:last-child{margin-bottom:0}
body.compact-health-panel #hud .skill-row:nth-child(2){--classic-skill-color:#bd32c9}
body.compact-health-panel #hud .skill-row:nth-child(3){--classic-skill-color:#7838c6}
body.compact-health-panel #hud .skill-row:nth-child(4){--classic-skill-color:#4d62d0}
body.compact-health-panel #hud .skill-row:nth-child(5){--classic-skill-color:#bcb536}
body.compact-health-panel #hud .skill-row:nth-child(6){--classic-skill-color:#c24449}
body.compact-health-panel #hud .skill-row:nth-child(7){--classic-skill-color:#77c53d}
body.compact-health-panel #hud .skill-row:nth-child(8){--classic-skill-color:#4ec1b9}
body.compact-health-panel #hud .skill-name{display:none}
body.compact-health-panel #hud .classic-skill-name,body.compact-health-panel #hud .classic-skill-key{display:block;position:absolute;top:0;bottom:0;z-index:1;color:#d7d7d7;text-shadow:-1px -1px 0 #222,1px -1px 0 #222,-1px 1px 0 #222,1px 1px 0 #222;white-space:nowrap;pointer-events:none}
body.compact-health-panel #hud .classic-skill-name{left:6px;right:calc(12.5% + 27px);overflow:hidden;text-overflow:ellipsis;text-align:center;font:800 12px/16px Inter,Arial,sans-serif;letter-spacing:0}
body.compact-health-panel #hud .classic-skill-key{right:calc(12.5% + 3px);width:23px;text-align:center;font:800 10px/16px Inter,Arial,sans-serif}
body.compact-health-panel #hud .skill-cells{position:absolute;inset:0 12.5% 0 0;display:grid;grid-template-columns:repeat(7,1fr);gap:0;border:0;border-radius:0;padding:0;background:none;overflow:hidden}
body.compact-health-panel #hud .skill-cells i{height:100%;background:none;border:0;box-shadow:none}
body.compact-health-panel #hud .skill-cells i.on{background:var(--classic-skill-color);border-left:3px solid #0005;box-shadow:none}
body.compact-health-panel #hud .skill-cells i:first-child.on{border-left:0}
body.compact-health-panel #hud .skill-add{position:absolute;inset:0 0 0 auto;z-index:2;width:12.5%;height:100%;padding:0;border:0;border-left:3px solid #101010;border-radius:0;background:var(--classic-skill-color);color:#171717;font:900 21px/15px Inter,Arial,sans-serif;opacity:1;pointer-events:auto}
body.compact-health-panel #hud .skill-add:hover:not(:disabled){background:var(--classic-skill-color);filter:brightness(1.15)}
body.compact-health-panel #hud .skill-add:disabled{color:#17171780;filter:brightness(.8);opacity:1;cursor:default}
body.compact-health-panel #hud .skill-row:has(.skill-cells i:last-child.on) .skill-add{background:#777;color:#202020;filter:none}
body.compact-health-panel #hud .skill-add:focus-visible{outline:2px solid #fff;outline-offset:-3px}
body.compact-health-panel.hud-large-font #hud .classic-skill-name{font-size:13px}
body.compact-health-panel.hud-large-font #hud .classic-skill-key{font-size:11px}

/*692: a test-only overlay; existing HUD/settings geometry stays unchanged.*/
.server-stats{position:absolute;top:160px;left:50%;transform:translateX(-50%);z-index:80;width:650px;max-width:calc(100% - 40px);padding:12px 15px;border:1px solid #647a93;border-radius:8px;background:rgba(13,23,36,.95);color:#e8f1fa;font:600 13px/1.55 Inter,Arial,sans-serif;box-shadow:0 6px 25px #0005;pointer-events:none;user-select:none;-webkit-user-select:none;text-shadow:none}
.server-stats[hidden],.server-stats [hidden]{display:none!important}
.server-stats-header{display:flex;align-items:center;justify-content:space-between;color:#e8f1fa;letter-spacing:.4px}
.server-stats-header button{pointer-events:auto;border:0;background:none;color:#e8f1fa;font:700 21px Inter;cursor:pointer;line-height:1;padding:0 3px}
.server-stats-state{display:block;margin-top:3px;font-size:15px;color:#a8e8bb}
.server-stats[data-status=warning] .server-stats-state,.server-stats [data-status=warning]{color:#ffe2a1}
.server-stats[data-status=limited] .server-stats-state,.server-stats [data-status=limited]{color:#ffacac}
.server-stats[data-status=stale] .server-stats-state,.server-stats [data-status=stale],.server-stats[data-status=measuring] .server-stats-state{color:#c5d1e0}
.server-stats-reason{margin-bottom:5px;color:#e8f1fa}
.server-stats-nodes{border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;padding:5px 0;margin-bottom:5px}
.server-stats-selected{font-weight:700}.server-stats-client{color:#bcd9f3}.server-stats-worst{margin:3px 0 6px;color:#e8f1fa}
.server-stats-table{max-height:168px;overflow:auto;scrollbar-width:thin;scrollbar-color:#7892ad transparent}
.server-stats table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;font-variant-numeric:tabular-nums}
.server-stats th,.server-stats td{padding:2px 4px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #ffffff12}
.server-stats th{color:#d5e6f7}.server-stats th:first-child,.server-stats td:first-child{text-align:left;width:28%}
.server-stats tr.selected{background:#93bcff18}.server-stats tr[data-status=good]{color:#b4e5c2}
.server-stats-foot{display:block;margin-top:6px;font-size:11px;line-height:1.4;color:#c5d1e0}
.server-stats-auth{pointer-events:auto;display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}.server-stats-auth div{width:100%}.server-stats-auth input{min-width:0;flex:1;border:1px solid #7e95af;border-radius:4px;background:#18283b;color:#fff;padding:6px 8px;font:600 13px Inter;user-select:text;-webkit-user-select:text}.server-stats-auth button{border:1px solid #7e95af;border-radius:4px;background:#294c75;color:#fff;padding:6px 12px;font:700 13px Inter;cursor:pointer}

.rule-card:not([data-rule-mode]){border-left-color:#d94252}.rule-card>div{position:relative}.rule-card:not([data-rule-mode]) h3{padding-right:110px}.rule-penalty{display:inline-block;padding:3px 9px;margin:2px 0 8px;border:1px solid #ad2333;border-radius:4px;background:#d94252;color:white;font-size:12px;font-weight:700}

/*736: penalty badge aligns with its rule heading. */
.rule-card:not([data-rule-mode])>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}.rule-card:not([data-rule-mode]) h3{grid-column:1;grid-row:1;padding-right:0}.rule-penalty{grid-column:2;grid-row:1;justify-self:end;margin:0;white-space:nowrap}.rule-card:not([data-rule-mode]) p{grid-column:1 / -1;margin-top:6px}

/*739: stats alone sit under the HUD; connection notices keep their own position. */
body #networkNotice.performance-stats{left:25px;right:auto;top:auto;bottom:2px;transform:none;max-width:calc(100% - 50px);padding:0;font:600 12px/1.3 Inter,Arial,sans-serif;text-align:left}
#networkNotice.performance-stats[data-stats-visible="false"]{display:none}
.settings-display-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.settings-display-row>div{min-width:0}
.menu-settings .settings-display-row .background-theme-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-display-row .theme-buttons{flex-wrap:nowrap}
.settings-display-row .theme-buttons button{flex:1;min-width:0;padding-left:5px;padding-right:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}