/* ============================================================
   TANK ARENA — Liquid Glass HUD
   Frosted translucent panels floating over the live arena.
   Hairline light edges, soft specular highlights, generous radii.
   One warm accent, minimal color, quiet motion.
   ============================================================ */

:root{
  color-scheme:dark;
  --ink:#f3f5f8;
  --dim:rgba(238,242,248,.62);
  --faint:rgba(238,242,248,.40);
  --glass:rgba(18,22,28,.42);
  --glass-2:rgba(36,42,50,.52);
  --glass-strong:rgba(13,16,21,.70);
  --stroke:rgba(255,255,255,.16);
  --stroke-soft:rgba(255,255,255,.08);
  --tile:rgba(255,255,255,.06);
  --accent:#f0a24a;
  --accent-strong:#e07d2c;
  --good:#69dca0;
  --danger:#ff6f61;
  --reticle:rgba(255,255,255,.82);
  --radius:20px; --radius-sm:13px; --radius-xs:10px;
  --blur:22px;
  --shadow:0 10px 34px rgba(0,0,0,.40);
  --hi:inset 0 1px 0 rgba(255,255,255,.22);
  --mono:"Share Tech Mono",ui-monospace,Consolas,monospace;
  --disp:"Oswald","Arial Narrow",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;min-height:100dvh;overflow:hidden;background:#0d100b;color:var(--ink);font-family:var(--disp);touch-action:none}
button,a,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#game{position:fixed;inset:0;width:100vw;height:100dvh;display:block;outline:0}

/* --- shared frosted-glass material (elements floating over the canvas) --- */
.glass,.panel,.brand,.stats>div,.tool,.mode,.chat-toggle,.chat-panel,.kill-row,.desktop-tip,.joystick{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow),var(--hi);
}

/* --- shared card + header --- */
.panel{position:relative;border-radius:var(--radius);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--stroke-soft);font:600 11px/1 var(--disp);letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.panel-head .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--good);box-shadow:0 0 12px rgba(105,220,160,.7)}
.panel-head .dot.warn{background:var(--accent);box-shadow:0 0 12px rgba(240,162,74,.7)}

/* --- fullscreen overlays: boot / fatal / lobby / modal --- */
.boot,.fatal,.modal,.lobby{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:22px;background:rgba(9,11,14,.55);-webkit-backdrop-filter:blur(9px) saturate(120%);backdrop-filter:blur(9px) saturate(120%)}

/* boot */
.boot{background:radial-gradient(125% 95% at 50% 32%,#1b222c,#0b0e12)}
.boot.hide{opacity:0;pointer-events:none;transition:opacity .3s ease-out}
.boot-card{position:relative;text-align:center}
.mark{width:60px;height:60px;margin:0 auto 20px;display:grid;place-items:center;border-radius:18px;background:var(--glass-2);border:1px solid var(--stroke);box-shadow:var(--hi);color:var(--accent);font:700 26px/1 var(--disp)}
.boot-card b{display:block;font:600 22px/1 var(--disp);letter-spacing:.3em;padding-left:.3em}
.boot-card span{display:block;color:var(--dim);font:400 12px/1 var(--mono);letter-spacing:.08em;margin:12px 0 22px}
.boot-card i{display:block;width:220px;height:3px;margin:0 auto;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.12)}
.boot-card i::after{content:"";display:block;width:38%;height:100%;border-radius:3px;background:var(--accent);animation:loading 1.05s ease-in-out infinite}
@keyframes loading{from{transform:translateX(-110%)}to{transform:translateX(360%)}}

/* buttons */
.btn{display:inline-grid;place-items:center;min-height:50px;padding:0 24px;border-radius:var(--radius-sm);background:var(--tile);border:1px solid var(--stroke);box-shadow:var(--hi);color:var(--ink);font:600 14px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:transform .08s ease-out,background .16s ease-out,border-color .16s ease-out}
.btn:hover{border-color:rgba(255,255,255,.30);background:var(--glass-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{margin-top:18px;background:linear-gradient(var(--accent),var(--accent-strong));border-color:rgba(255,255,255,.30);color:#1a1206;box-shadow:0 8px 24px rgba(224,125,44,.35),var(--hi)}
.btn.primary:hover{filter:brightness(1.06)}

/* fatal */
.fatal{z-index:50}
.fatal-card{width:min(400px,100%)}
.fatal-body{padding:28px 26px 26px;text-align:center}
.alert-chip{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--glass-2);border:1px solid var(--stroke);box-shadow:var(--hi);color:var(--accent);font:700 26px/1 var(--mono)}
.fatal h1{margin:16px 0 8px;font:600 22px/1.15 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.fatal p,.modal p{margin:0;color:var(--dim);font-size:14px;line-height:1.55}

/* lobby */
.lobby{z-index:25}
.lobby-card{width:min(440px,100%);border-radius:var(--radius);overflow:hidden}
.lobby-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--stroke-soft);font:400 11px/1 var(--mono);letter-spacing:.12em;color:var(--dim)}
.lobby-top b{display:grid;place-items:center;width:50px;height:40px;border-radius:12px;background:var(--tile);border:1px solid var(--stroke-soft);box-shadow:var(--hi);color:var(--accent);font:700 20px/1 var(--mono);font-variant-numeric:tabular-nums}
.lobby-card>h1{margin:0;padding:20px 20px 4px;font:600 25px/1.05 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.lobby-card>p{margin:0;padding:0 20px 16px;color:var(--dim);font-size:13px;line-height:1.5}
.slots{display:grid;gap:8px;margin:0;padding:0 18px;list-style:none}
.slots li{display:flex;align-items:center;gap:13px;min-height:52px;padding:9px 14px;border-radius:14px;background:var(--tile);border:1px solid var(--stroke-soft)}
.slots li.filled{border-color:rgba(105,220,160,.45)}
.slots li.bot{border-color:rgba(240,162,74,.45)}
.slot-index{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--stroke-soft);color:var(--dim);font:700 12px/1 var(--mono)}
.slots li.filled .slot-index{color:var(--good);border-color:rgba(105,220,160,.5)}
.slots li.bot .slot-index{color:var(--accent);border-color:rgba(240,162,74,.5)}
.slot-copy{min-width:0}
.slot-copy b,.slot-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-copy b{font:500 15px/1.1 var(--disp);letter-spacing:.01em}
.slot-copy small{margin-top:3px;color:var(--dim);font:400 11px/1 var(--mono);letter-spacing:.03em}
.secure{display:flex;align-items:center;gap:12px;margin:18px 18px 0;padding:15px 0 18px;border-top:1px solid var(--stroke-soft)}
.secure>span{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:10px;border:1px solid rgba(105,220,160,.5);color:var(--good);font:700 14px/1 var(--mono)}
.secure b,.secure small{display:block}
.secure b{font:500 13px/1.2 var(--disp)}
.secure small{margin-top:2px;color:var(--dim);font:400 11px/1 var(--mono)}

/* modal (pause) */
.modal{z-index:35;background:rgba(6,9,12,.60);-webkit-backdrop-filter:blur(11px) saturate(120%);backdrop-filter:blur(11px) saturate(120%)}
.modal-card{width:min(360px,100%);border-radius:var(--radius);overflow:hidden}
.modal-body{padding:26px;text-align:center}
.modal-body h1{margin:14px 0 8px;font:600 21px/1.1 var(--disp);text-transform:uppercase}
.modal-card .btn{width:100%}
.pause-chip{position:relative}
.pause-chip::before,.pause-chip::after{content:"";position:absolute;top:15px;width:6px;height:22px;border-radius:2px;background:var(--ink)}
.pause-chip::before{left:17px}
.pause-chip::after{right:17px}

/* --- in-match HUD --- */
.hud{position:fixed;inset:0;z-index:5;pointer-events:none;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}

/* brand */
.brand{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:16px}
.brand-mark{width:38px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--tile);border:1px solid var(--stroke-soft);color:var(--accent);font:700 13px/1 var(--mono)}
.brand strong{font:600 14px/1 var(--disp);letter-spacing:.1em}
.brand small{display:block;margin-top:3px;color:var(--dim);font:400 10px/1 var(--mono);letter-spacing:.06em}

/* center armor readout */
.center-hud{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:min(280px,42vw);text-align:center}
.center-hud span{display:block;color:var(--dim);font:400 10px/1 var(--mono);letter-spacing:.22em;margin-bottom:6px}
.hp{position:relative;height:14px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.hp i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--good),#8fe6b6);transition:width .18s linear;box-shadow:0 0 14px rgba(105,220,160,.5)}

/* stats */
.stats>div{padding:8px 14px 8px 12px;text-align:right;min-width:92px;border-radius:14px}
.stats span{display:block;color:var(--dim);font:400 10px/1 var(--mono);letter-spacing:.14em}
.stats b{font:700 18px/1.1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.03em}

/* crosshair / reticle */
.crosshair{position:absolute;left:50%;top:47%;width:44px;height:44px;transform:translate(-50%,-50%);pointer-events:none}
.crosshair::before,.crosshair::after{content:"";position:absolute}
.crosshair::before{left:50%;top:0;width:2px;height:44px;transform:translateX(-50%);border-radius:2px;background:linear-gradient(var(--reticle) 0 36%,transparent 36% 64%,var(--reticle) 64% 100%)}
.crosshair::after{top:50%;left:0;height:2px;width:44px;transform:translateY(-50%);border-radius:2px;background:linear-gradient(90deg,var(--reticle) 0 36%,transparent 36% 64%,var(--reticle) 64% 100%)}
.crosshair i{position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* --- HUD tools (sound / mode / chat) --- */
.tool{pointer-events:auto;display:grid;place-items:center;color:var(--ink);border-radius:14px;transition:border-color .14s ease-out,background .14s ease-out,transform .08s ease-out}
.tool:hover{border-color:rgba(255,255,255,.30);background:var(--glass-2)}
.tool:active{transform:translateY(1px)}
.sound{position:absolute;right:14px;top:82px;width:74px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.sound>span{font:400 9px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
.sound::after{content:"ВКЛ";font:600 12px/1 var(--disp);letter-spacing:.06em;color:var(--good)}
.sound.muted::after{content:"ВЫКЛ";color:var(--danger)}
.mode{pointer-events:auto;position:absolute;right:14px;top:140px;width:74px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink);border-radius:14px;transition:border-color .14s ease-out,background .14s ease-out,transform .08s ease-out}
.mode:hover{border-color:rgba(255,255,255,.30)}
.mode:active{transform:translateY(1px)}
.mode span{font:400 9px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
.mode b{font:600 12px/1 var(--disp);letter-spacing:.04em}
.mode.auto{background:linear-gradient(var(--accent),var(--accent-strong));border-color:rgba(255,255,255,.30);color:#1a1206}
.mode.auto span{color:rgba(26,18,6,.72)}
.chat-toggle{position:absolute;right:14px;top:140px;min-width:74px;height:42px;border-radius:14px;font:400 11px/1 var(--mono);letter-spacing:.08em;color:var(--ink)}
.chat-toggle b{position:absolute;right:-7px;top:-8px;min-width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#1a1206;font:700 11px/1 var(--mono);box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* --- controls: joysticks + fire --- */
.controls{position:absolute;inset:auto 0 max(16px,env(safe-area-inset-bottom)) 0;height:150px;pointer-events:none}
.joystick{pointer-events:auto;position:absolute;bottom:0;width:126px;height:126px;border-radius:50%}
.joystick::before,.joystick::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.14)}
.joystick::before{width:1px;height:64%;transform:translate(-50%,-50%)}
.joystick::after{height:1px;width:64%;transform:translate(-50%,-50%)}
.joystick>span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);color:var(--dim);font:400 10px/1 var(--mono);letter-spacing:.1em}
.joystick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:linear-gradient(rgba(255,255,255,.20),rgba(255,255,255,.05));border:1px solid var(--stroke);box-shadow:0 6px 18px rgba(0,0,0,.4),var(--hi)}
.move{left:max(18px,env(safe-area-inset-left))}
.aim{right:max(128px,env(safe-area-inset-right))}
.aim i{border-color:rgba(240,162,74,.6);background:linear-gradient(rgba(240,162,74,.32),rgba(240,162,74,.08))}
.auto-mode .aim{opacity:.26;pointer-events:none}
.actions{pointer-events:auto;position:absolute;right:max(18px,env(safe-area-inset-right));bottom:2px;display:flex;gap:13px;align-items:flex-end}
.pause{width:50px;height:50px;border-radius:14px;font:400 20px/1 var(--mono);color:var(--ink)}
.fire{pointer-events:auto;width:94px;height:94px;border-radius:50%;background:linear-gradient(var(--accent),var(--accent-strong));border:1px solid rgba(255,255,255,.34);color:#1a1206;display:grid;place-items:center;box-shadow:0 10px 26px rgba(224,125,44,.40),var(--hi);transition:transform .08s ease-out,box-shadow .08s ease-out,filter .12s ease-out}
.fire span{display:block;font:700 15px/1 var(--disp);letter-spacing:.08em}
.fire small{display:block;margin-top:3px;font:400 9px/1 var(--mono);opacity:.72}
.fire:hover{filter:brightness(1.06)}
.fire:active,.fire.active{transform:translateY(3px) scale(.97);box-shadow:0 3px 10px rgba(224,125,44,.4),var(--hi)}
.desktop-tip{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 14px;border-radius:12px;color:var(--dim);font:400 11px/1 var(--mono);letter-spacing:.03em;white-space:nowrap}

/* --- chat panel --- */
.chat-panel{pointer-events:auto;position:absolute;left:14px;bottom:180px;width:min(384px,calc(100vw - 28px));height:290px;border-radius:var(--radius);overflow:hidden;background:var(--glass-strong);display:flex;flex-direction:column}
.chat-panel>header{flex:0 0 auto;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--stroke-soft)}
.chat-panel header b{display:block;font:600 12px/1 var(--disp);letter-spacing:.1em}
.chat-panel header small{display:block;margin-top:3px;color:var(--dim);font:400 10px/1 var(--mono)}
.chat-panel header button{width:36px;height:36px;border-radius:11px;background:var(--tile);border:1px solid var(--stroke-soft);color:var(--ink);font:400 22px/1 var(--disp);transition:border-color .12s,color .12s}
.chat-panel header button:hover{border-color:rgba(255,111,97,.6);color:var(--danger)}
.chat-messages{flex:1;min-height:0;overflow:auto;padding:12px 14px;user-select:text}
.chat-line{margin:0 0 8px;font:400 12px/1.45 var(--mono);overflow-wrap:anywhere}
.chat-line b{color:var(--good)}
.chat-line.own b{color:var(--accent)}
.chat-line span{color:var(--ink)}
.quick-chat{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px}
.quick-chat button{min-height:34px;border-radius:10px;background:var(--tile);border:1px solid var(--stroke-soft);color:var(--dim);font:400 10px/1 var(--mono);letter-spacing:.03em;transition:border-color .12s,color .12s}
.quick-chat button:hover{border-color:rgba(255,255,255,.30);color:var(--ink)}
.quick-chat button:active{transform:translateY(1px)}
.chat-form{flex:0 0 auto;display:grid;grid-template-columns:1fr 70px;gap:8px;padding:0 8px 8px}
.chat-form input{min-width:0;height:40px;padding:0 12px;border-radius:11px;background:var(--tile);border:1px solid var(--stroke);color:var(--ink);font:400 13px/1 var(--mono);user-select:text}
.chat-form input:focus{outline:none;border-color:var(--accent)}
.chat-form input::placeholder{color:var(--faint)}
.chat-form button{border-radius:11px;background:linear-gradient(var(--accent),var(--accent-strong));border:1px solid rgba(255,255,255,.30);color:#1a1206;font:600 12px/1 var(--disp);letter-spacing:.04em}
.chat-form button:hover{filter:brightness(1.06)}

/* --- kill feed --- */
.kill-feed{position:absolute;right:98px;top:84px;width:min(320px,46vw);display:grid;gap:6px;justify-items:end;pointer-events:none}
.kill-row{max-width:100%;display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:12px;font:400 12px/1 var(--mono);white-space:nowrap;overflow:hidden;animation:kill-in .16s ease-out}
.kill-row b,.kill-row strong{overflow:hidden;text-overflow:ellipsis;font-weight:400}
.kill-row b{color:var(--ink)}
.kill-row strong{color:var(--dim)}
.kill-row span{flex:0 0 auto;color:var(--accent);font-size:10px}
.kill-row.own-kill{border-color:rgba(105,220,160,.5)}
.kill-row.own-kill b{color:var(--good)}
.kill-row.own-death{border-color:rgba(255,111,97,.55)}
.kill-row.own-death strong{color:var(--danger)}
.kill-row.leaving{opacity:0;transform:translateX(10px);transition:.3s}
@keyframes kill-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* --- ammo strip (magazine pips near the fire button) --- */
.ammo-strip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:104px;display:flex;gap:5px;align-items:center;padding:7px 10px;border-radius:12px;pointer-events:none;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%);border:1px solid var(--stroke);box-shadow:var(--shadow),var(--hi)}
.ammo-pip{width:7px;height:17px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent-strong));box-shadow:0 0 6px rgba(240,162,74,.55),var(--hi);transition:opacity .14s ease-out,background .14s ease-out,box-shadow .14s ease-out}
.ammo-pip.spent{background:rgba(255,255,255,.12);box-shadow:none}
.ammo-strip.reloading .ammo-pip{animation:reload-pulse 1s ease-in-out infinite}
.ammo-strip.reloading .ammo-pip:nth-child(2){animation-delay:.12s}
.ammo-strip.reloading .ammo-pip:nth-child(3){animation-delay:.24s}
.ammo-strip.reloading .ammo-pip:nth-child(4){animation-delay:.36s}
.ammo-strip.reloading .ammo-pip:nth-child(5){animation-delay:.48s}
@keyframes reload-pulse{0%,100%{opacity:.28}50%{opacity:1;background:linear-gradient(var(--accent),var(--accent-strong))}}
.fire.reloading{filter:grayscale(.55) brightness(.82)}
.fire.empty{filter:grayscale(.4) brightness(.86)}
.fire small#ammoText{font-variant-numeric:tabular-nums}
.fire.reloading small#ammoText{color:var(--danger);opacity:.95;letter-spacing:.04em}

/* --- responsive --- */
@media(max-width:680px){
  .brand{padding:8px 10px}
  .brand small{display:none}
  .center-hud{top:62px;width:56vw}
  .stats>div{min-width:74px}
  .sound{top:70px}
  .mode{top:126px}
  .chat-toggle{top:126px}
  .kill-feed{right:94px;top:124px;width:calc(100vw - 112px)}
  .kill-row{font-size:10px;padding:7px 9px;gap:6px}
  .desktop-tip{display:none}
  .joystick{width:114px;height:114px}
  .joystick i{width:48px;height:48px;margin:-24px 0 0 -24px}
  .aim{right:108px}
  .actions{right:16px;bottom:0;width:80px;height:132px;display:block}
  .pause{position:absolute;left:16px;top:0;width:46px;height:46px}
  .fire{position:absolute;left:0;bottom:0;width:80px;height:80px}
  .controls{height:132px}
  .ammo-strip{right:16px;bottom:90px;gap:4px;padding:5px 8px}
  .ammo-pip{width:6px;height:14px}
  .chat-panel{left:10px;bottom:172px;width:calc(100vw - 20px);height:300px}
  .lobby-card,.fatal-card,.modal-card{width:100%}
}
@media(max-height:620px){
  .lobby{display:block;overflow:auto}
  .lobby-card{margin:auto}
  .slots{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}