:root{--ink:#18211a;--lime:#d7f68a;--white:#f0f3e8;--muted:#a6b4a4;--glass:rgba(16,27,21,.87)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#859c75;color:var(--white);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}#labels{position:fixed;inset:0;overflow:hidden;pointer-events:none}.tank-label{position:absolute;transform:translate(-50%,-100%);padding:3px 9px;background:rgba(20,31,25,.80);border:1px solid rgba(225,241,216,.15);border-radius:3px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.025em;white-space:nowrap;text-shadow:0 1px 2px #000}.tank-label.me{background:#d7f68a;color:#243523;border-color:#d7f68a;text-shadow:none}.tank-label.dead{opacity:.4}
.topbar{z-index:2;position:fixed;top:0;left:0;right:0;min-height:76px;padding:17px 27px;background:linear-gradient(180deg,rgba(16,27,21,.85),rgba(16,27,21,0));display:flex;align-items:flex-start;justify-content:space-between;gap:20px;pointer-events:none}.brand{display:flex;align-items:center;gap:11px;line-height:1}.brand-mark{color:var(--lime);font-size:34px;font-weight:900;line-height:1}.brand b{font-size:23px;letter-spacing:-.045em;font-weight:900}.brand .slash{color:var(--lime)}.brand small{display:block;margin-top:7px;color:#c2cec0;font-size:9px;font-weight:700;letter-spacing:.2em}.room{margin-top:3px;background:rgba(14,24,19,.75);border:1px solid rgba(255,255,255,.16);border-radius:3px;padding:10px 15px;font-size:11px;font-weight:800;letter-spacing:.12em;white-space:nowrap}.room-separator{opacity:.45;margin:0 8px}.live-dot{display:inline-block;height:7px;width:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #d7f68a;margin-right:6px}.top-help{margin-top:10px;font-size:10px;color:#e0e8dc;font-weight:650;letter-spacing:.025em}.top-help span{color:var(--lime);margin:0 4px}
.status{position:fixed;left:50%;top:84px;transform:translateX(-50%);background:rgba(26,39,27,.8);padding:5px 12px;font-size:10px;letter-spacing:.11em;border-radius:2px;color:#e0e8dc;z-index:2;pointer-events:none}.hud-panel{background:var(--glass);border:1px solid rgba(228,243,217,.15);backdrop-filter:blur(12px);box-shadow:0 7px 30px rgba(15,33,19,.13);border-radius:5px;z-index:3}.chat{position:fixed;bottom:23px;left:23px;width:min(355px,calc(100vw - 42px));height:235px;display:flex;flex-direction:column}.members{position:fixed;bottom:23px;right:23px;width:233px;max-height:310px;min-height:175px;display:flex;flex-direction:column}.panel-heading{padding:13px 15px 10px;display:flex;align-items:center;gap:7px;font-weight:850;letter-spacing:.17em;font-size:11px;border-bottom:1px solid rgba(255,255,255,.12)}.tiny-icon{font-size:15px;color:var(--lime)}.panel-sub{margin-left:auto;color:var(--lime);font-size:10px;letter-spacing:.08em}.chat-log{padding:12px 14px 8px;flex:1;overflow-y:auto;scrollbar-color:#5b735b transparent;scrollbar-width:thin}.msg{line-height:1.46;margin-bottom:7px;font-size:11px;overflow-wrap:anywhere;color:#e4ecdf}.msg span{color:var(--lime);font-weight:800;margin-right:6px}.msg.system{color:#9baea0}.msg.system span{color:#7f9581}.chat-form{height:42px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.12);padding:0 10px 0 14px;gap:8px}.chat-form .prompt{color:var(--lime);font-size:16px}.chat-form input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-size:12px}.chat-form input::placeholder{color:#809080}.chat-form button{background:#d7f68a;border:0;border-radius:2px;color:#223023;font-size:17px;width:27px;height:27px}.chat-form button:disabled{opacity:.6}.member-table-head{padding:9px 14px;display:grid;grid-template-columns:1fr 28px 28px;color:#8a9a8e;font-size:9px;font-weight:800;letter-spacing:.1em}.member-table-head span:not(:first-child){text-align:center}.member-list{flex:1;overflow-y:auto;padding:0 9px 10px;scrollbar-width:thin}.member{padding:7px 5px;display:grid;grid-template-columns:1fr 28px 28px;align-items:center;border-bottom:1px solid rgba(255,255,255,.055);font-size:11px}.member .identity{min-width:0;display:flex;align-items:center;gap:7px}.member .avatar{width:8px;height:8px;flex-shrink:0;border-radius:1px;background:#b4cf9d}.member .username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member .score{text-align:center;color:#ccd6c8;font-variant-numeric:tabular-nums}.member.self .username{color:var(--lime);font-weight:800}.empty{text-align:center;font-size:11px;color:#9da99c}.health-bar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;background:rgba(16,27,21,.8);padding:11px 15px;display:flex;align-items:center;gap:10px;border-radius:3px;pointer-events:none}.health-bar span{font-size:10px;font-weight:900;letter-spacing:.12em}.health-track{width:105px;height:6px;background:#465749}.health-fill{width:100%;height:100%;background:var(--lime);transition:width .15s}.health-bar b{font-variant-numeric:tabular-nums;font-size:13px}.crosshair{position:fixed;z-index:1;pointer-events:none;width:16px;height:16px;transform:translate(-50%,-50%);left:50%;top:50%}.crosshair:before{content:"";position:absolute;left:7px;top:0;width:2px;height:16px;background:#faffdf;box-shadow:0 0 3px #243223}.crosshair:after{content:"";position:absolute;top:7px;left:0;height:2px;width:16px;background:#faffdf;box-shadow:0 0 3px #243223}.respawn{position:fixed;z-index:4;top:47%;left:50%;transform:translate(-50%,-50%);background:rgba(27,25,20,.9);padding:17px 26px;border-left:4px solid #e5a071;font-size:23px;font-weight:900;pointer-events:none}.respawn span{display:block;color:#e1c3ae;font-size:11px;margin-top:6px}.hidden{display:none}.kill-feed{position:fixed;z-index:2;right:25px;top:85px;display:flex;flex-direction:column;gap:6px;pointer-events:none}.kill{font-size:11px;color:#eef2e9;background:rgba(20,29,24,.77);padding:9px 12px;border-left:2px solid #e2a472;border-radius:2px}.kill b{color:#e8e996}
.login-overlay{position:fixed;inset:0;z-index:9;background:rgba(17,28,19,.48);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);padding:18px}.login-card{width:min(420px,100%);background:#16231b;border:1px solid #586c50;border-radius:5px;box-shadow:0 24px 95px #12211980;text-align:center;padding:35px 35px 26px}.emblem{font-size:18px;color:var(--lime);letter-spacing:3px;transform:skew(-20deg);margin-bottom:18px}.eyebrow{font-size:9px;color:#94ac8e;font-weight:850;letter-spacing:.22em}.login-card h1{font-size:65px;line-height:1;font-weight:1000;letter-spacing:-.08em;margin:12px 0 4px}.login-card h1 span{color:var(--lime)}.subtitle{margin:0;color:#d8e5cf;font-size:16px;font-weight:750;letter-spacing:.08em}.description{font-size:12px;line-height:1.8;color:#9fb19f;margin:21px 0 23px}.login-card form{text-align:left}.login-card label{display:block;font-size:10px;color:var(--lime);font-weight:850;letter-spacing:.13em;margin-bottom:8px}.login-card input{display:block;width:100%;background:#253429;border:1px solid #4d614c;padding:14px 15px;border-radius:2px;outline:none;color:#f5f5ec;font-size:15px}.login-card input:focus{border-color:var(--lime)}.login-card form button{margin-top:12px;display:flex;width:100%;justify-content:center;align-items:center;gap:15px;background:var(--lime);color:#24301e;border:0;border-radius:2px;font-weight:900;font-size:14px;padding:15px}.login-card form button:hover{background:#e7ffb8}.login-card form button:disabled{opacity:.6;cursor:default}.login-foot{font-size:9px;color:#8ba08a;letter-spacing:.065em;margin-top:24px}.login-foot .live-dot{height:6px;width:6px}.login-foot span:not(.live-dot){margin:0 4px;color:#4c614c}.join-error{min-height:14px;color:#f9a38e;font-size:11px;margin:8px 0 0}
@media(max-width:800px){.top-help{display:none}.topbar{padding:12px 15px}.brand b{font-size:20px}.brand small{font-size:7px}.room{font-size:10px;padding:8px}.status{top:68px}.chat{width:calc(50vw - 18px);height:190px;left:10px;bottom:12px}.members{width:calc(50vw - 18px);height:190px;right:10px;bottom:12px;min-height:0}.health-bar{bottom:209px}.panel-heading{font-size:9px;padding:9px 10px}.chat-log{padding:8px}.msg,.member{font-size:10px}.chat-form{height:36px}.chat-form input{font-size:10px}.member-table-head{padding:7px 9px}}
@media(max-width:440px){.login-card{padding:24px 21px}.login-card h1{font-size:52px}.health-track{width:64px}.chat,.members{height:170px}.health-bar{bottom:187px}.members .panel-heading,.chat .panel-heading{letter-spacing:.07em}}
/* Optional touch controls for phones/tablets. */
.touch-controls{display:none;pointer-events:none;position:fixed;inset:0;z-index:4}.touch-pad{position:absolute;bottom:214px;left:13px;display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,38px);gap:5px}.touch-controls button{pointer-events:auto;border:1px solid rgba(244,255,231,.6);background:rgba(22,35,27,.82);color:var(--lime);font-size:19px;font-weight:900;border-radius:5px;touch-action:none;user-select:none;-webkit-user-select:none}.touch-controls button.pressed{background:var(--lime);color:var(--ink)}.touch-pad [data-control=f]{grid-column:2;grid-row:1}.touch-pad [data-control=l]{grid-column:1;grid-row:2}.touch-pad [data-control=b]{grid-column:2;grid-row:2}.touch-pad [data-control=r]{grid-column:3;grid-row:2}.touch-fire{position:absolute;right:17px;bottom:232px;width:74px;height:74px;border-radius:50%!important;font-size:12px!important;letter-spacing:.1em}@media (pointer:coarse){.touch-controls{display:block}}
/* Revised HUD and multitouch layout. */
:root{--glass:rgba(16,27,21,.46)}
.topbar,.health-bar{display:none}.playing .status{display:none}.status{top:max(12px,env(safe-area-inset-top))}.kill-feed{top:calc(env(safe-area-inset-top) + 12px)}
.hud-panel{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.tank-label,.tank-label.me{padding:0;background:none;border:0;color:white;text-shadow:0 1px 2px #000;min-width:76px;text-align:center}
.tank-name{display:inline-block;padding:3px 8px;background:rgba(16,27,21,.7);border-radius:4px;max-width:180px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.me .tank-name{color:#d7f68a;border:1px solid #d7f68a}
.overhead-hp{position:relative;height:15px;background:rgba(15,24,18,.85);border:1px solid #dcebc977;border-radius:3px;overflow:hidden;margin-top:3px}
.overhead-hp i{position:absolute;inset:0 auto 0 0;background:#7ea83c;transition:width .12s}.overhead-hp.low i{background:#b44c39}.overhead-hp span{position:relative;font-size:10px;line-height:13px;color:#fff}
.speech-bubble{position:relative;max-width:210px;min-width:90px;margin:0 auto 9px;padding:8px 10px;border-radius:10px;background:rgba(255,255,244,.95);color:#17271c;white-space:normal;overflow-wrap:anywhere;text-shadow:none;font-size:12px;line-height:1.4;box-shadow:0 2px 9px #0003}
.speech-bubble:after{content:"";position:absolute;top:100%;left:50%;border:6px solid transparent;border-top-color:rgba(255,255,244,.95);border-bottom:0;transform:translateX(-50%)}
.hud-toggle{display:none}.touch-controls{display:none}.joystick{position:absolute;width:116px;height:116px;border-radius:50%;border:2px solid #e9ffd075;background:rgba(16,27,21,.25);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:rgba(215,246,138,.7);border:2px solid #efffc7;transform:translate(-50%,-50%);pointer-events:none}
.stick-caption{position:absolute;top:100%;left:0;right:0;text-align:center;font-size:11px;text-shadow:0 1px 3px #000;line-height:22px;pointer-events:none}
.move-stick{left:max(18px,env(safe-area-inset-left));bottom:calc(env(safe-area-inset-bottom) + 32px)}
.aim-stick{right:max(18px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 32px)}
.touch-fire{right:calc(max(18px,env(safe-area-inset-right)) + 12px);bottom:calc(env(safe-area-inset-bottom) + 174px);width:86px;height:64px;border-radius:32px!important;font-size:16px!important}
.chat-form input,.login-card input{font-size:16px}
@media (any-pointer:coarse){
  .playing .touch-controls{display:block}.crosshair{display:none}
  .chat,.members{top:calc(env(safe-area-inset-top) + 50px);bottom:auto;height:132px;width:min(40vw,280px);min-height:0}
  .chat{left:max(10px,env(safe-area-inset-left))}.members{right:max(10px,env(safe-area-inset-right))}
  .panel-heading{padding:6px 8px;font-size:9px;letter-spacing:.03em}.member-table-head{padding:4px 8px}.member{padding:4px}.chat-log{padding:5px 8px}.msg{margin-bottom:3px}.chat-form{height:40px;flex-shrink:0;padding:0 6px}.chat-form button{width:38px;height:36px;flex-shrink:0}
  .hud-toggle{display:block;position:fixed;z-index:5;top:calc(env(safe-area-inset-top) + 8px);bottom:auto;height:36px;border:1px solid #d7f68a80;border-radius:6px;background:rgba(16,27,21,.55);color:#eff5e6;font-size:12px;padding:0 12px;touch-action:manipulation}
  #chat-toggle{left:max(10px,env(safe-area-inset-left))}#members-toggle{right:max(10px,env(safe-area-inset-right))}
  .collapsed{display:none}.typing .touch-controls{display:none}.typing .chat{top:auto;bottom:calc(env(safe-area-inset-bottom) + 8px);width:min(420px,calc(100vw - 20px));height:155px;z-index:6}.typing .members,.typing .hud-toggle{display:none}
  @media(max-height:520px){
    .chat,.members{top:calc(env(safe-area-inset-top) + 46px);bottom:auto;height:110px;width:29vw}
    .hud-toggle{top:calc(env(safe-area-inset-top) + 5px);bottom:auto}
    .joystick{width:100px;height:100px;bottom:calc(env(safe-area-inset-bottom) + 20px)}
    .touch-fire{right:calc(max(18px,env(safe-area-inset-right)) + 125px);bottom:calc(env(safe-area-inset-bottom) + 38px)}
    .typing .chat{top:auto;bottom:8px}
  }
}