:root{
  --ink1:#19e3ff; --ink2:#ff6a1a;
  --panel:#10141bcc; --txt:#f4f7fa;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0e13;color:var(--txt);
  font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none!important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5}
#coverage{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px}
.cov-label{font-weight:800;font-size:15px;min-width:56px;text-align:center;
  text-shadow:0 2px 6px #000}
#covBar{position:relative;width:min(46vw,420px);height:20px;border-radius:12px;overflow:hidden;
  background:#222a33;border:2px solid #ffffff33;box-shadow:0 2px 10px #0009}
#covP1Fill{position:absolute;left:0;top:0;bottom:0;width:50%;background:linear-gradient(180deg,#7ff3ff,var(--ink1))}
#covP2Fill{position:absolute;right:0;top:0;bottom:0;width:50%;background:linear-gradient(180deg,#ffb37f,var(--ink2))}
#covMid{position:absolute;top:-2px;bottom:-2px;width:3px;background:#fff;left:50%;box-shadow:0 0 6px #000}
#timer{position:absolute;top:14px;right:18px;font-weight:800;font-size:20px;
  background:#00000055;padding:4px 12px;border-radius:10px;border:1px solid #ffffff22}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.9}
#crosshair span{display:block;width:14px;height:14px;border:2.5px solid #fff;border-radius:50%;
  box-shadow:0 0 6px #000, inset 0 0 4px #00000088}
#hitmarker{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%) rotate(45deg);
  border:3px solid #fff;opacity:0;box-shadow:0 0 8px var(--ink1)}
#inkWrap{position:absolute;right:22px;bottom:24px;text-align:center}
#inkTank{position:relative;width:44px;height:150px;margin:0 auto;border-radius:14px;overflow:hidden;
  background:#1a212bcc;border:2px solid #ffffff44;box-shadow:0 2px 12px #000a}
#inkFill{position:absolute;left:0;right:0;bottom:0;height:100%;
  background:linear-gradient(180deg,#a8f5ff,var(--ink1));transition:height .08s linear}
#inkGhost{position:absolute;left:0;right:0;bottom:0;height:100%;background:#ff3b3b66;opacity:0}
#inkLabel{font-weight:800;letter-spacing:2px;font-size:13px;margin-top:6px;text-shadow:0 2px 4px #000}
#swimHint{margin-top:8px;font-size:12px;background:#00000066;padding:5px 10px;border-radius:8px;
  border:1px solid #ffffff22}
#swimHint b{color:var(--ink1)}
#msg{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:26px;font-weight:900;
  text-shadow:0 3px 10px #000;opacity:0;transition:opacity .25s;white-space:nowrap}
#vignette{position:absolute;inset:0;box-shadow:inset 0 0 120px 40px #ff220000;opacity:0;transition:opacity .2s}

/* ---------- Overlays ---------- */
#overlay,#endOverlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#141b26ee 0%,#05070bee 75%);z-index:10}
.panel{text-align:center;background:var(--panel);border:1px solid #ffffff22;border-radius:20px;
  padding:34px 44px;max-width:min(92vw,560px);box-shadow:0 20px 60px #000c}
.panel h1{font-size:52px;font-weight:900;letter-spacing:3px}
.panel h1 span{color:var(--ink1)}
.panel .sub{opacity:.75;margin:6px 0 14px}
.teams{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:14px;font-weight:800}
.t1{color:var(--ink1)} .t2{color:var(--ink2)} .vs{opacity:.5}
.controls{list-style:none;text-align:left;margin:0 auto 18px;display:inline-block;line-height:1.9;font-size:15px}
.controls b{color:#ffe14d}
button{pointer-events:auto;font-size:19px;font-weight:900;letter-spacing:1px;color:#062a30;cursor:pointer;
  background:linear-gradient(180deg,#8ff4ff,var(--ink1));border:0;border-radius:14px;padding:13px 34px;
  box-shadow:0 6px 0 #0a7d8f,0 10px 24px #000a;transition:transform .08s}
button:hover{transform:scale(1.04)} button:active{transform:translateY(3px)}
.note{margin-top:14px;font-size:12px;opacity:.55}
#loadErr{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:#a00;color:#fff;
  padding:8px 16px;border-radius:8px;z-index:50;font-weight:700}