/* Phantom · Live Map — Midnight + electric Violet, matched to the Phantom panel. */
:root{
  --bg:#08070c; --app-bg:#0d0b14; --surface:#16131f; --surface-2:#1e1a29; --surface-3:#272233;
  --border:#2a2438; --border-soft:#221d30; --border-strong:#3a3151;
  --text:#ece9f3; --text-dim:#a49db8; --muted:#6f6885; --muted-2:#5a5371;
  --accent:#8b5cff; --accent-hi:#a883ff; --accent-lo:#6d3fe0;
  --accent-glow:rgba(139,92,255,.35); --accent-soft:rgba(139,92,255,.12);
  --ok:#34d399; --warn:#fbbf24; --danger:#fb7185; --info:#38bdf8;
  --ally:#38bdf8; --ally-soft:rgba(56,189,248,.14);
  --enemy:#fb7185; --enemy-soft:rgba(251,113,133,.14);
  --gold:#f5c764;
  --radius:18px; --radius-sm:12px; --radius-lg:26px;
  --shadow:0 18px 50px rgba(0,0,0,.5); --shadow-soft:0 8px 24px rgba(0,0,0,.35);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'SF Mono',ui-monospace,'Cascadia Code','Roboto Mono',Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow:hidden;
  background-image:
    radial-gradient(1200px 700px at 78% -10%, rgba(139,92,255,.16), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(56,189,248,.08), transparent 55%);
}
.app{height:100dvh; display:flex; flex-direction:column; padding:14px; gap:12px}

/* ░░ top bar ░░ */
.topbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:10px 14px; background:linear-gradient(180deg,rgba(30,26,41,.72),rgba(22,19,31,.72));
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.brand{display:flex; align-items:center; gap:11px; justify-self:start}
.ghost{width:30px; height:30px; filter:drop-shadow(0 4px 10px var(--accent-glow)); animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-2.5px)}}
.brand-txt{display:flex; flex-direction:column; line-height:1.04}
.brand-txt b{font-size:15px; letter-spacing:.14em; font-weight:800}
.brand-txt span{font-size:9.5px; letter-spacing:.34em; color:var(--accent-hi); font-weight:700}

.connect{display:flex; align-items:center; gap:8px; justify-self:center}
.codefield{display:flex; align-items:center; gap:6px; padding:0 12px; height:38px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; transition:.18s}
.codefield:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.codefield .hash{color:var(--muted); font-weight:700}
#code{width:118px; background:none; border:0; outline:0; color:var(--text);
  font-family:var(--mono); font-size:14px; letter-spacing:.18em; font-weight:600}
#code::placeholder{color:var(--muted-2); letter-spacing:.14em}
.btn{height:38px; padding:0 18px; border:0; border-radius:12px; cursor:pointer; color:#fff;
  font:inherit; font-weight:700; font-size:13.5px; letter-spacing:.02em;
  background:linear-gradient(135deg,var(--accent-hi),var(--accent-lo)); box-shadow:0 4px 14px var(--accent-glow);
  transition:transform .12s, box-shadow .18s, filter .18s}
.btn:hover{filter:brightness(1.07); box-shadow:0 6px 20px var(--accent-glow)}
.btn:active{transform:translateY(1px)}

.pills{display:flex; align-items:center; gap:8px; justify-self:end}
.pill{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px;
  border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.04em;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); white-space:nowrap}
.pill.status i{width:8px; height:8px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 0 transparent}
.pill.status.off i{background:var(--muted)}
.pill.status.connecting{color:var(--warn)} .pill.status.connecting i{background:var(--warn); animation:pulse 1s infinite}
.pill.status.live{color:var(--ok); border-color:rgba(52,211,153,.35)} .pill.status.live i{background:var(--ok); animation:pulse 1.4s infinite}
.pill.status.lost{color:var(--danger)} .pill.status.lost i{background:var(--danger); animation:pulse .7s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor; opacity:1}70%{box-shadow:0 0 0 7px transparent; opacity:.7}100%{opacity:1}}
.pill.viewers .eye{width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--accent-hi) 0 3px, transparent 4px), var(--surface-3);
  border:1.5px solid var(--accent); box-shadow:0 0 8px var(--accent-glow)}

/* ░░ lead bar ░░ */
.leadbar{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:9px 16px; background:linear-gradient(180deg,rgba(22,19,31,.6),rgba(13,11,20,.6));
  border:1px solid var(--border-soft); border-radius:14px}
.lead-side{display:flex; align-items:center; gap:9px; font-weight:800}
.lead-tag{font-size:10px; letter-spacing:.18em; color:var(--muted)}
.lead-side.ally .lead-tag{color:var(--ally)} .lead-side.enemy .lead-tag{color:var(--enemy)}
.lead-gold{font-family:var(--mono); font-size:15px; color:var(--gold); min-width:66px}
.lead-side.enemy{justify-content:flex-end} .lead-side.enemy .lead-gold{text-align:right}
.lead-track{position:relative; height:10px; border-radius:999px; overflow:hidden;
  background:linear-gradient(90deg,var(--ally-soft),var(--enemy-soft)); border:1px solid var(--border)}
.lead-fill{position:absolute; inset:0 50% 0 0; background:linear-gradient(90deg,var(--ally),rgba(56,189,248,.3));
  transition:right .6s cubic-bezier(.4,0,.2,1), left .6s cubic-bezier(.4,0,.2,1)}
.lead-diff{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:10px; font-weight:700; color:#fff; text-shadow:0 1px 3px #000; pointer-events:none}

/* ░░ no-room empty state ░░ */
.prompt{display:none; flex:1; min-height:0; align-items:center; justify-content:center; padding:20px}
.app.state-prompt .prompt{display:flex}
.app.state-prompt .leadbar,
.app.state-prompt .stage,
.app.state-prompt .seg{display:none}
.prompt-card{max-width:460px; text-align:center; padding:44px 34px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(30,26,41,.6),rgba(13,11,20,.55)); border:1px solid var(--border);
  box-shadow:var(--shadow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.prompt-ghost{width:76px; height:76px; fill:var(--accent-hi);
  filter:drop-shadow(0 10px 26px var(--accent-glow)); margin-bottom:20px; animation:float 5s ease-in-out infinite}
.prompt-card h1{font-size:23px; font-weight:800; letter-spacing:.01em; margin-bottom:12px}
.prompt-card p{font-size:14.5px; color:var(--text-dim); line-height:1.6}
.prompt-card p b{color:var(--accent-hi); font-weight:700}

/* ░░ stage ░░ */
.stage{flex:1; min-height:0; display:grid; grid-template-columns:minmax(230px,1fr) auto minmax(230px,1fr);
  gap:12px; align-items:stretch}
.roster{display:flex; flex-direction:column; gap:9px; overflow-y:auto; padding:2px; min-height:0;
  scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent}
.roster::-webkit-scrollbar{width:6px} .roster::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:3px}

/* map */
.mapwrap{display:flex; align-items:center; justify-content:center; min-width:0; min-height:0}
.map-frame{position:relative; aspect-ratio:1/1; height:100%; max-height:100%; max-width:100%;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-strong);
  box-shadow:var(--shadow), inset 0 0 70px rgba(0,0,0,.55); background:#0a0910}
.map-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none; opacity:.97}
.map-frame canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

.objs{position:absolute; inset:0; pointer-events:none}
.obj{position:absolute; display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  background:rgba(13,11,20,.78); border:1px solid var(--border); border-radius:999px;
  font-family:var(--mono); font-size:12px; font-weight:700; backdrop-filter:blur(6px); box-shadow:var(--shadow-soft)}
.obj .obj-ic{font-size:13px; filter:saturate(1.2)}
.obj.lord{top:11px; left:11px; color:var(--accent-hi)}
.obj.turtle{bottom:11px; right:11px; color:var(--ok)}
.obj.rdy{color:#fff; border-color:currentColor; animation:pulse 1.2s infinite}
.obj.lord.rdy{background:linear-gradient(135deg,var(--accent-lo),rgba(13,11,20,.8))}
.obj.turtle.rdy{background:linear-gradient(135deg,rgba(16,122,92,.7),rgba(13,11,20,.8))}

.feed{position:absolute; top:11px; right:11px; display:flex; flex-direction:column; gap:6px;
  align-items:flex-end; pointer-events:none; max-width:70%}
.feed .kill{display:flex; align-items:center; gap:7px; padding:5px 10px; border-radius:10px;
  background:rgba(13,11,20,.82); border:1px solid var(--border); font-size:12px; font-weight:600;
  backdrop-filter:blur(6px); box-shadow:var(--shadow-soft); animation:killin .32s ease}
@keyframes killin{from{opacity:0; transform:translateX(16px)}to{opacity:1; transform:none}}
.feed .kill .who{font-weight:800} .feed .kill .k{color:var(--ally)} .feed .kill .v{color:var(--enemy)}
.feed .kill.ke .k{color:var(--enemy)} .feed .kill.ke .v{color:var(--ally)}
.feed .kill .sw{color:var(--muted); font-size:12px}

.banner{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;
  transition:opacity .4s; background:radial-gradient(400px 200px at 50% 50%, rgba(8,7,12,.5), transparent)}
.banner.hide{opacity:0}
.banner-in{display:flex; align-items:center; gap:10px; padding:11px 20px; border-radius:999px;
  background:rgba(13,11,20,.85); border:1px solid var(--border-strong); box-shadow:var(--shadow);
  font-weight:700; font-size:14px; letter-spacing:.02em; backdrop-filter:blur(8px)}
.banner-in .dot{width:9px;height:9px;border-radius:50%;background:var(--accent-hi);animation:pulse 1.2s infinite}

.demo-badge{position:absolute; bottom:11px; left:11px; padding:3px 10px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.2em; color:var(--warn);
  background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.4)}
.demo-badge.hide{display:none}
.topcenter{position:absolute; top:10px; left:50%; transform:translateX(-50%); display:flex;
  flex-direction:column; align-items:center; gap:4px; pointer-events:none}
.scorebar{display:flex; align-items:center; gap:11px; padding:4px 18px; border-radius:999px;
  background:rgba(13,11,20,.84); border:1px solid var(--border-strong); box-shadow:var(--shadow-soft);
  backdrop-filter:blur(8px); font-family:var(--mono); font-weight:800; font-size:23px; line-height:1}
.scorebar .sc-a{color:var(--ok); text-shadow:0 0 14px rgba(52,211,153,.55)}
.scorebar .sc-e{color:var(--danger); text-shadow:0 0 14px rgba(251,113,133,.55)}
.scorebar .sc-dash{color:var(--muted); font-weight:600; font-size:18px}
.clock{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text-dim); padding:2px 10px;
  border-radius:999px; background:rgba(13,11,20,.7); border:1px solid var(--border); backdrop-filter:blur(6px)}

/* ░░ roster card ░░ */
.card{position:relative; padding:11px 12px; border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--border);
  box-shadow:var(--shadow-soft); transition:transform .14s, border-color .18s, box-shadow .18s; overflow:hidden}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px}
.allies .card::before{background:linear-gradient(var(--ally),transparent)}
.enemies .card::before{background:linear-gradient(var(--enemy),transparent)}
.card.dead{opacity:.5; filter:grayscale(.4)}
.card.lowhp{border-color:var(--enemy); box-shadow:0 0 0 1px var(--enemy-soft),0 0 22px rgba(251,113,133,.18)}
.card.ultup{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-soft),0 0 22px var(--accent-glow)}
.card.self{background:linear-gradient(180deg,rgba(52,211,153,.1),var(--surface-2)); border-color:rgba(52,211,153,.4)}
.card-top{display:flex; align-items:center; gap:10px}
.pf{position:relative; width:42px; height:42px; border-radius:11px; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 2px var(--border-strong)}
.allies .pf{box-shadow:inset 0 0 0 2px var(--ally)} .enemies .pf{box-shadow:inset 0 0 0 2px var(--enemy)}
.pf img{width:100%; height:100%; object-fit:cover}
.card-id{flex:1; min-width:0}
.nm{font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px}
.nm .star{color:var(--ok); font-size:11px}
.sub{font-size:11px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.sub .flag{margin-right:5px}
.lv{flex:none; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:800; font-size:12px; background:var(--surface-3); border:1px solid var(--border-strong); color:var(--accent-hi)}
.bars{display:flex; flex-direction:column; gap:4px; margin-top:9px}
.bar{position:relative; height:15px; border-radius:6px; background:var(--surface-3); overflow:hidden; border:1px solid var(--border-soft)}
.bar .fill{position:absolute; inset:0 auto 0 0; border-radius:6px; transition:width .25s linear}
.bar.hp .fill{background:linear-gradient(90deg,#1f8f5f,var(--ok))}
.bar.mp{height:7px} .bar.mp .fill{background:linear-gradient(90deg,#2b6fb0,var(--info))}
.bar .txt{position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding-right:6px;
  font-family:var(--mono); font-size:10px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7); gap:5px}
.card-bot{display:flex; align-items:center; justify-content:space-between; margin-top:9px; gap:8px}
.kda{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text-dim)}
.kda b{color:var(--text)} .kda .d{color:var(--danger)}
.pips{display:flex; gap:4px}
.pip{width:17px; height:17px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:800; background:var(--surface-3); color:var(--muted-2); border:1px solid var(--border-soft)}
.pip.rdy{background:var(--accent-soft); color:var(--accent-hi); border-color:var(--accent)}
.pip.spl{width:19px; height:19px; padding:0; overflow:hidden; background:var(--surface-3)}
.pip.spl img{width:100%; height:100%; object-fit:cover; display:block}
.pip.spl.rdy{border-color:rgba(52,211,153,.6); box-shadow:0 0 0 1px rgba(52,211,153,.25)}
.pf img{width:100%; height:100%; object-fit:cover; display:block}

/* mobile team toggle */
.seg{display:none; gap:6px; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:14px}
.seg button{flex:1; height:38px; border:0; border-radius:10px; background:transparent; color:var(--text-dim);
  font:inherit; font-weight:700; font-size:13px; cursor:pointer; transition:.15s}
.seg button.on{background:linear-gradient(135deg,var(--accent-hi),var(--accent-lo)); color:#fff; box-shadow:0 4px 12px var(--accent-glow)}

/* ░░ responsive ░░ */
@media (max-width:1100px){
  .stage{grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr); gap:9px}
  #code{width:92px}
}
@media (max-width:820px){
  body{overflow:auto}
  .app{height:auto; min-height:100dvh; padding:10px; gap:10px}
  .topbar{grid-template-columns:1fr auto; grid-template-areas:"brand pills" "connect connect"; row-gap:10px}
  .brand{grid-area:brand} .pills{grid-area:pills} .connect{grid-area:connect; justify-self:stretch}
  .connect{width:100%} .codefield{flex:1} #code{width:100%}
  .stage{grid-template-columns:1fr}
  .mapwrap{order:-2}
  .seg{order:-1}
  .roster.allies{order:0} .roster.enemies{order:1}
  .map-frame{height:auto; width:100%}
  .roster.enemies{display:none}
  .roster{max-height:none; overflow:visible}
  .seg{display:flex}
  .lead-gold{min-width:52px; font-size:13px}
}
@media (max-width:820px){
  .app.show-enemies .roster.allies{display:none}
  .app.show-enemies .roster.enemies{display:flex}
}
@media (max-width:420px){
  .brand-txt span{display:none}
  .feed{max-width:85%}
}