/* ------------------------------------------------------------------ *
 *  Evolve — client styles
 * ------------------------------------------------------------------ */
:root{
  --bg0:#05060c;
  --bg1:#0b0d1a;
  --ink:#e8ecff;
  --ink-dim:#93a0c8;
  --accent:#7c5cff;
  --accent-2:#22e0b0;
  --danger:#ff4d6d;
  --panel:rgba(16,19,34,.82);
  --stroke:rgba(140,155,230,.16);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg0);color:var(--ink);font-family:var(--font)}
body{position:fixed;inset:0;-webkit-user-select:none;user-select:none;touch-action:none}

#game{position:fixed;inset:0;display:block;width:100%;height:100%;cursor:crosshair}

/* ---------------- HUD ---------------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;font-variant-numeric:tabular-nums}
#hud[hidden]{display:none}

.hud-tl{position:absolute;top:18px;left:20px}
.stat-len{display:flex;align-items:baseline;gap:8px;line-height:1}
.stat-len span{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.02em;
  text-shadow:0 2px 18px rgba(124,92,255,.55)}
.stat-len small{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-dim)}
.stat-sub{margin-top:4px;font-size:13px;color:var(--ink-dim)}
.stat-sub span{color:var(--accent-2)}

.hud-tr{position:absolute;top:16px;right:20px;width:190px;text-align:right}
.lb-title{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-dim);margin-bottom:6px}
#leaderboard{list-style:none}
#leaderboard li{font-size:13px;padding:3px 0;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#leaderboard li b{color:var(--ink);font-weight:600}
#leaderboard li.me b{color:var(--accent-2)}
#leaderboard li .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:6px;vertical-align:middle}
.lb-online{margin-top:8px;font-size:11px;color:var(--ink-dim)}

#minimap{position:absolute;right:20px;bottom:18px;width:160px;height:160px;
  background:rgba(8,10,20,.55);border:1px solid var(--stroke);border-radius:50%;
  backdrop-filter:blur(4px)}

.hud-bottom{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.hud-hint{font-size:12px;letter-spacing:.06em;color:var(--ink-dim);white-space:nowrap;
  background:rgba(8,10,20,.5);padding:6px 14px;border-radius:999px;border:1px solid var(--stroke)}
.hud-hint.safe{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(124,92,255,.25)}

#blast-meter{position:relative;width:190px;height:22px;border-radius:999px;overflow:hidden;
  border:1px solid var(--stroke);background:rgba(8,10,20,.62);
  display:flex;align-items:center;justify-content:center}
#blast-fill{position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:.85;transition:width .12s linear}
.blast-label{position:relative;z-index:1;font-size:10px;font-weight:800;letter-spacing:.26em;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
#blast-meter.ready{border-color:rgba(255,255,255,.75);box-shadow:0 0 18px -2px var(--accent-2)}
#blast-meter.ready #blast-fill{opacity:1;animation:blastpulse 1.1s ease-in-out infinite}
#blast-meter.locked{opacity:.4}
#blast-meter.locked .blast-label::after{content:" · need mass";font-weight:500;letter-spacing:.08em}
@keyframes blastpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* ---------------- veil / panels ---------------- */
#veil{position:fixed;inset:0;z-index:10;display:grid;place-items:center;
  padding:24px;background:radial-gradient(1200px 800px at 50% 40%,rgba(20,16,44,.55),rgba(4,5,12,.9));
  backdrop-filter:blur(7px)}
#veil[hidden]{display:none}

.panel{width:min(440px,92vw);background:var(--panel);border:1px solid var(--stroke);
  border-radius:22px;padding:34px 30px;text-align:center;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)}
.panel[hidden]{display:none}

.logo{font-size:clamp(38px,8vw,62px);font-weight:900;letter-spacing:.14em;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 24px rgba(124,92,255,.5))}
.logo.dead{background:linear-gradient(120deg,var(--danger),#ff9e6d);
  -webkit-background-clip:text;background-clip:text;letter-spacing:.1em;text-transform:lowercase}

.pitch,.death-by{color:var(--ink-dim);font-size:14px;line-height:1.6;margin:14px auto 22px;max-width:34ch}
.death-by span{color:var(--danger);font-weight:600}

#join-form{display:flex;flex-direction:column;gap:10px}
input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--stroke);
  background:rgba(4,6,14,.7);color:var(--ink);font-size:15px;font-family:inherit;text-align:center;outline:none}
input:focus{border-color:var(--accent)}
input::placeholder{color:#5b6690}

.btn{width:100%;padding:13px 18px;border:0;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.02em;color:#0b0713;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:0 12px 30px -8px rgba(124,92,255,.6);transition:transform .12s ease,filter .12s ease}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}

.online{margin-top:14px;font-size:12px;color:var(--ink-dim)}

.rules{list-style:none;margin-top:20px;text-align:left;display:grid;gap:8px}
.rules li{font-size:12.5px;color:var(--ink-dim);line-height:1.5;padding-left:16px;position:relative}
.rules li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;
  background:var(--accent)}
.rules li b{color:var(--ink);font-weight:600}

.death-stats{display:flex;justify-content:center;gap:26px;margin:6px 0 22px}
.death-stats div{display:flex;flex-direction:column;gap:4px}
.death-stats span{font-size:30px;font-weight:800;letter-spacing:-.02em}
.death-stats small{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-dim)}

/* ---------------- toast ---------------- */
#toast{position:fixed;left:50%;top:22px;transform:translateX(-50%);z-index:20;
  background:rgba(10,12,24,.92);border:1px solid var(--stroke);color:var(--ink);
  padding:10px 18px;border-radius:12px;font-size:13px;opacity:0;transition:opacity .2s ease}
#toast.show{opacity:1}
#toast[hidden]{display:none}

@media (max-width:560px){
  .hud-tr{width:150px}
  #minimap{width:120px;height:120px}
  .hud-hint{font-size:11px}
}