/* ═══════════════════════════════════════════════════
   DXRP — Live Dashboard (v2)
   Bento layout · dark luxury · animated · editorial
   ═══════════════════════════════════════════════════ */

/* Prevent hidden util conflicts */
[hidden]{display:none !important}

/* ── Page wrapper ─────────────────────────────────── */
.dxlive-page{background:var(--bg)}
.dxlive-main{padding-bottom:96px}

/* ── Hero / Status headline ───────────────────────── */
.dxlive-hero{
  position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + 48px) 0 56px;
  border-bottom:1px solid var(--border);margin-bottom:8px;
  background:
    radial-gradient(1200px 420px at 85% -20%, rgba(168,85,247,.10), transparent 60%),
    radial-gradient(900px 380px at 10% 0%, rgba(225,29,72,.12), transparent 60%),
    linear-gradient(180deg, #0b0b0f 0%, var(--bg) 100%);
}
.dxlive-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%);
}
.dxlive-hero-inner{position:relative;display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center}
.dxlive-hero-title,.dxlive-hero-sub{text-align:center}
.dxlive-hero-stats{width:100%;max-width:920px}
.dxlive-hero-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.dxlive-live-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;border-radius:100px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);
  color:#86efac;font-family:var(--font);font-weight:800;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s, border-color .25s, color .25s;
}
.dxlive-live-pill.is-off{
  background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:#fca5a5;
}
.dxlive-live-pill .pulse{
  width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:dxlPulse 1.8s ease-out infinite;
}
.dxlive-live-pill.is-off .pulse{background:#ef4444;animation:none;box-shadow:0 0 10px rgba(239,68,68,.6)}
@keyframes dxlPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

.dxlive-hero-eyebrow{
  font-family:var(--font);font-size:.72rem;font-weight:700;
  color:var(--muted);letter-spacing:.16em;text-transform:uppercase;
}
.dxlive-hero-title{
  font-family:var(--font);font-weight:900;line-height:1.02;
  font-size:clamp(2.2rem, 5.2vw, 4rem);margin:0;color:var(--text);
  letter-spacing:-.015em;
}
.dxlive-hero-title .accent{
  background:linear-gradient(90deg,#fb7185,#e11d48 60%,#a855f7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dxlive-hero-sub{color:var(--muted);font-size:1rem;max-width:640px;margin:0;line-height:1.55}

/* ── Hero stats strip (count-up tiles) ────────────── */
.dxlive-hero-stats{
  display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px;margin-top:6px;
}
.dxlive-stat{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 18px 16px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.dxlive-stat:hover{border-color:var(--border-h);transform:translateY(-2px)}
.dxlive-stat::after{
  content:"";position:absolute;inset:auto -20% -60% auto;width:180px;height:180px;
  background:radial-gradient(circle at center, var(--glow, rgba(225,29,72,.22)), transparent 70%);
  filter:blur(8px);pointer-events:none;opacity:.7;
}
.dxlive-stat .lbl{
  font-family:var(--font);font-size:.7rem;font-weight:700;
  color:var(--dim);letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.dxlive-stat .lbl .ico{font-size:1rem;filter:saturate(1.1)}
.dxlive-stat .val{
  font-family:var(--font);font-size:clamp(1.8rem, 3vw, 2.4rem);font-weight:900;
  color:var(--text);line-height:1.05;margin-top:8px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.dxlive-stat .hint{font-size:.72rem;color:var(--muted);margin-top:4px}
.dxlive-stat.s-accent{--glow:rgba(225,29,72,.26)}
.dxlive-stat.s-green{--glow:rgba(34,197,94,.22)}
.dxlive-stat.s-gold{--glow:rgba(234,179,8,.22)}
.dxlive-stat.s-purple{--glow:rgba(168,85,247,.22)}

.dxlive-stat.s-accent .val{color:#fb7185}
.dxlive-stat.s-green  .val{color:#86efac}
.dxlive-stat.s-gold   .val{color:#fde68a}
.dxlive-stat.s-purple .val{color:#c4b5fd}

/* ── KPI row: top killer / richest / top gang ─────── */
.dxlive-kpis{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:36px auto 0;
  position:relative;z-index:2;
}
.kpi-card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 18px 18px 22px;display:flex;align-items:center;gap:14px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.kpi-card::after{
  content:"";position:absolute;inset:auto -20% -60% auto;width:180px;height:180px;
  background:radial-gradient(circle at center, var(--bar, rgba(225,29,72,.22)), transparent 70%);
  filter:blur(8px);pointer-events:none;opacity:.35;
}
.kpi-card > *{position:relative;z-index:1}
.kpi-card > [data-av]{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:48px}
.kpi-card > [data-av]:empty::before{
  content:"";display:block;width:48px;height:48px;border-radius:50%;
  background:var(--surface);border:2px dashed var(--border);
}
.kpi-card:hover{border-color:var(--border-h);transform:translateY(-2px)}
.kpi-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--bar, var(--accent));box-shadow:0 0 18px var(--bar, var(--accent));
}
.kpi-card > .kpi-body{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;gap:2px}
.kpi-card > .kpi-val{margin-left:auto}
.kpi-card.k-gold{--bar:var(--gold)}
.kpi-card.k-green{--bar:var(--green)}
.kpi-card.k-purple{--bar:var(--purple)}
.kpi-avatar{
  width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--border);
}
.kpi-avatar-ph{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:2px solid var(--border);color:var(--text);
  font-family:var(--font);font-weight:800;font-size:1.2rem;
}
.kpi-body{min-width:0;flex:1}
.kpi-tag{
  font-family:var(--font);font-size:.66rem;font-weight:800;
  color:var(--dim);letter-spacing:.14em;text-transform:uppercase;
}
.kpi-name{
  font-family:var(--font);font-size:1rem;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;
}
.kpi-meta{font-size:.82rem;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-val{
  font-family:var(--font);font-size:1.1rem;font-weight:900;color:var(--text);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.kpi-card.k-gold .kpi-val{color:var(--gold)}
.kpi-card.k-green .kpi-val{color:#86efac}
.kpi-card.k-purple .kpi-val{color:#c4b5fd}

/* ── Offline banner ───────────────────────────────── */
.dxlive-offline{
  margin:18px 0 0;padding:14px 16px;border-radius:var(--r);
  background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);
  color:#fca5a5;font-size:.9rem;display:flex;align-items:center;gap:10px;
}
.dxlive-offline::before{content:"⚠";font-size:1.1rem}

/* ── Main bento grid ──────────────────────────────── */
.dxlive-grid{
  display:grid;gap:18px;margin-top:28px;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  align-items:start;
}

/* Panel shell */
.dxl-panel{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
}
.dxl-panel::after{
  content:"";position:absolute;inset:auto -15% -50% auto;width:220px;height:220px;
  background:radial-gradient(circle at center, rgba(225,29,72,.08), transparent 70%);
  filter:blur(10px);pointer-events:none;opacity:.6;z-index:0;
}
.dxl-panel > *{position:relative;z-index:1}
.dxl-panel-h{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.dxl-panel-h h2{
  font-family:var(--font);font-size:.95rem;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:8px;margin:0;letter-spacing:-.005em;
}
.dxl-panel-h .dxl-badge{
  font-family:var(--font);font-size:.7rem;font-weight:800;
  background:var(--accent-soft);color:#fb7185;border:1px solid rgba(225,29,72,.25);
  padding:3px 9px;border-radius:100px;min-width:28px;text-align:center;
}
.dxl-panel-h .dxl-badge.g{background:rgba(34,197,94,.08);color:#86efac;border-color:rgba(34,197,94,.25)}

/* Sidebar columns */
.dxl-side{display:flex;flex-direction:column;gap:18px}

/* ── Event feed ───────────────────────────────────── */
.dxl-feed-toolbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
}
.dxl-chip{
  font-family:var(--font);font-size:.74rem;font-weight:700;
  padding:6px 12px;border-radius:100px;
  background:transparent;border:1px solid var(--border);color:var(--muted);
  cursor:pointer;transition:all .15s var(--ease);
}
.dxl-chip:hover{border-color:var(--border-h);color:var(--sub)}
.dxl-chip.active{
  background:var(--accent-soft);border-color:rgba(225,29,72,.4);color:#fb7185;
}
.dxl-chip .n{opacity:.7;margin-left:6px;font-weight:600}

.dxl-feed-pause{
  margin-left:auto;font-size:.78rem;font-weight:700;color:var(--muted);
  padding:5px 10px;border-radius:6px;border:1px solid transparent;background:transparent;
  cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;
}
.dxl-feed-pause:hover{background:rgba(255,255,255,.05);color:var(--text)}
.dxl-feed-pause.is-paused{color:#fb7185;border-color:rgba(225,29,72,.3);background:var(--accent-soft)}

.dxl-feed{
  display:flex;flex-direction:column;gap:2px;padding:10px 10px;
  max-height:560px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.dxl-feed::-webkit-scrollbar{width:6px}
.dxl-feed::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.dxl-ev{
  display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  border:1px solid transparent;
  background:linear-gradient(90deg, rgba(255,255,255,.02), transparent);
  animation:dxlEvSlide .36s var(--ease) both;
  transition:background .18s, border-color .18s, transform .18s;
  position:relative;
}
.dxl-ev:hover{background:rgba(255,255,255,.05);border-color:var(--border)}
@keyframes dxlEvSlide{
  from{opacity:0;transform:translateX(-14px);filter:blur(2px)}
  to{opacity:1;transform:translateX(0);filter:blur(0)}
}
.dxl-ev .ico{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:var(--surface);border:1px solid var(--border);flex-shrink:0;
}
.dxl-ev .txt{font-size:.88rem;color:var(--sub);line-height:1.4;min-width:0}
.dxl-ev .txt strong{color:var(--text);font-weight:700}
.dxl-ev .time{font-size:.7rem;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}

.dxl-ev.type-player-kill{border-color:rgba(239,68,68,.18)}
.dxl-ev.type-player-kill .ico{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.3);color:#fca5a5}
.dxl-ev.type-player-join .ico{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.3);color:#86efac}
.dxl-ev.type-player-leave .ico{background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.25);color:#cbd5e1}
.dxl-ev.type-territory-capture{border-color:rgba(168,85,247,.18)}
.dxl-ev.type-territory-capture .ico{background:rgba(168,85,247,.10);border-color:rgba(168,85,247,.3);color:#c4b5fd}
.dxl-ev.type-territory-neutralize .ico{background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.3);color:#93c5fd}
.dxl-ev.type-player-money .ico{background:rgba(234,179,8,.10);border-color:rgba(234,179,8,.3);color:#fde68a}
.dxl-ev.type-player-job .ico{background:rgba(225,29,72,.10);border-color:rgba(225,29,72,.3);color:#fb7185}

.dxl-feed-empty{
  padding:44px 20px;text-align:center;color:var(--muted);font-size:.92rem;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.dxl-feed-empty .big{font-size:2rem;opacity:.6}

/* ── Online players ──────────────────────────────── */
.dxl-online{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(90px,1fr));
  gap:10px;padding:14px;min-height:120px;
}
.dxl-pcard{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px;border-radius:var(--r);
  text-decoration:none;color:var(--text);
  background:transparent;border:1px solid transparent;
  transition:all .18s var(--ease);position:relative;
}
.dxl-pcard:hover{background:var(--surface);border-color:var(--border);transform:translateY(-2px)}
.dxl-pcard .av{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  border:2px solid var(--border);
}
.dxl-pcard .av-ph{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);border:2px solid rgba(225,29,72,.25);
  color:#fb7185;font-family:var(--font);font-weight:800;font-size:1.1rem;
}
.dxl-pcard .online-dot{
  position:absolute;top:6px;right:18px;width:10px;height:10px;border-radius:50%;
  background:#22c55e;border:2px solid var(--card);
  box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:dxlPulse 2s ease-out infinite;
}
.dxl-pcard .nm{
  font-size:.74rem;font-weight:600;color:var(--sub);text-align:center;
  max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dxl-pcard .jb{
  font-size:.64rem;color:var(--muted);text-align:center;
  max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:1px 6px;border-radius:4px;background:var(--surface);
}

/* ── Territory grid (visual map) ──────────────────── */
.dxl-territories{padding:14px;display:grid;grid-template-columns:repeat(auto-fill, minmax(120px,1fr));gap:8px}
.dxl-zone{
  position:relative;
  border:1px solid var(--border);border-radius:10px;
  padding:12px 10px;min-height:78px;
  background:linear-gradient(145deg, rgba(255,255,255,.025), rgba(0,0,0,.2));
  display:flex;flex-direction:column;justify-content:space-between;
  transition:all .2s var(--ease);overflow:hidden;
}
.dxl-zone::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:var(--zcolor, var(--dim));opacity:.85;
}
.dxl-zone.owned{border-color:color-mix(in srgb, var(--zcolor) 30%, var(--border))}
.dxl-zone.owned::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--zcolor) 25%, transparent), transparent 60%);
}
.dxl-zone:hover{transform:translateY(-2px);border-color:var(--border-h)}
.dxl-zone .z-name{
  font-family:var(--font);font-size:.82rem;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dxl-zone .z-owner{
  font-size:.72rem;color:var(--muted);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dxl-zone .z-owner.neutral{color:var(--dim);font-style:italic}
.dxl-zone .z-income{
  font-family:var(--font);font-size:.74rem;font-weight:800;
  color:var(--gold);margin-top:6px;font-variant-numeric:tabular-nums;
}
.dxl-zone .z-income::before{content:"+";opacity:.7;margin-right:2px}

/* ── Gang list ───────────────────────────────────── */
.dxl-gangs{display:flex;flex-direction:column;padding:6px 8px 10px}
.dxl-gang{
  display:grid;grid-template-columns:28px auto 1fr auto;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;
  transition:background .15s;text-decoration:none;color:var(--text);
}
.dxl-gang:hover{background:var(--surface)}
.dxl-gang .rk{
  font-family:var(--font);font-size:.8rem;font-weight:900;color:var(--muted);
  text-align:center;font-variant-numeric:tabular-nums;
}
.dxl-gang:nth-child(1) .rk{color:var(--gold)}
.dxl-gang:nth-child(2) .rk{color:#cbd5e1}
.dxl-gang:nth-child(3) .rk{color:var(--orange)}
.dxl-gang .tg{
  font-family:var(--font);font-size:.72rem;font-weight:800;
  padding:3px 8px;border-radius:5px;white-space:nowrap;letter-spacing:.04em;
}
.dxl-gang .info{min-width:0}
.dxl-gang .nm{
  font-size:.84rem;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dxl-gang .mt{font-size:.7rem;color:var(--muted);margin-top:1px}
.dxl-gang .score{
  font-family:var(--font);font-size:.82rem;font-weight:800;color:var(--sub);
  font-variant-numeric:tabular-nums;
}

/* ── Empty & skeletons ───────────────────────────── */
.dxl-empty{
  padding:28px 20px;text-align:center;color:var(--muted);font-size:.88rem;
}
.dxl-skel{
  background:linear-gradient(90deg, var(--surface) 0%, rgba(255,255,255,.08) 50%, var(--surface) 100%);
  background-size:200% 100%;
  animation:dxlSkel 1.4s linear infinite;
  border-radius:8px;
}
@keyframes dxlSkel{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width:1060px){
  .dxlive-hero-stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .dxlive-kpis{grid-template-columns:1fr}
  .dxlive-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dxlive-hero{padding:40px 0 20px}
  .dxlive-hero-stats{grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
  .dxlive-stat{padding:14px}
  .dxlive-stat .val{font-size:1.6rem}
  .dxl-feed-toolbar{padding:8px}
  .dxl-chip{padding:5px 10px;font-size:.7rem}
  .dxl-ev{grid-template-columns:28px 1fr auto;gap:8px;padding:8px 10px}
  .dxl-ev .ico{width:28px;height:28px;border-radius:8px;font-size:.9rem}
  .dxl-online{grid-template-columns:repeat(auto-fill, minmax(78px,1fr))}
}