/* ===================== XZEN — Simple Dark Theme (no blurs) ===================== */
/* Palette tuned for purple/black/white, high contrast and mobile-friendly */
:root{
  --bg:#0b0c10;
  --panel:#14171d;
  --edge:#232832;
  --ink:#f4f4f6;
  --muted:#a7afbd;
  --accent:#b38aff;
  --accent-2:#8e6bff;
  --danger:#e74c3c;
  --warn:#f1c40f;
  --ok:#2ecc71;

  --radius:14px;
  --space:14px;

  font-synthesis-weight:none;
}

*{ box-sizing:border-box }
html,body{ margin:0; background:var(--bg); color:var(--ink); font:14px ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial }

/* ===================== Layout ===================== */
.wrap{
  max-width:1200px; margin:20px auto; padding:0 16px;
  display:grid; grid-template-columns:1fr; gap:16px;
}

/* ===================== Top bar ===================== */
.topbar{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  padding:12px 16px; border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg, rgba(20,23,29,.95), rgba(20,23,29,.85));
}
.topbar h1{
  margin:0; font-size:18px; letter-spacing:.2px; font-weight:700; color:var(--ink);
}
.toprightbar{ margin-left:auto }
.hint{ color:var(--muted); font-size:12px }

/* Stack top info (delay, cache, etc.) cleanly on mobile */
.topinfo{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.topinfo > .pill,
.topinfo > .status{ margin-left:0 }

/* ===================== Panels ===================== */
.panel{
  border:1px solid var(--edge); border-radius:var(--radius);
  background:var(--panel); padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* ===================== Tabs ===================== */
.tabs{ display:flex; gap:8px; border-bottom:1px solid var(--edge); margin-bottom:12px }
.tabbtn{
  appearance:none; border:1px solid var(--edge); border-bottom:none; cursor:pointer;
  background:rgba(255,255,255,.02); color:var(--muted);
  padding:8px 12px; border-radius:10px 10px 0 0; font-weight:600;
}
.tabbtn:hover{ color:var(--ink) }
.tabbtn.active{
  color:#fff; background:linear-gradient(180deg, #1a1f27, #14171d);
  border-color:var(--accent);
  box-shadow:inset 0 -2px 0 var(--accent);
}

/* ===================== Forms ===================== */
.lbl{ display:block; margin-bottom:6px; color:var(--muted) }
.row{ display:flex; gap:10px; align-items:center }
.row.spread{ justify-content:space-between }
.inp{
  flex:1; background:#11141a; color:var(--ink);
  border:1px solid var(--edge); border-radius:10px; padding:10px 12px; outline:none;
}
.inp:focus{ border-color:var(--accent) }
.btn{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border:0; color:#fff; border-radius:10px; padding:10px 14px; cursor:pointer;
  box-shadow:0 8px 18px rgba(142,107,255,.25);
}
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform:translateY(1px) }

/* ===================== Status & Pills ===================== */
.status{
  padding:8px 10px; border-radius:999px; border:1px solid var(--edge);
  color:var(--muted); background:#10141a; font-weight:600;
}
.status.ok{ border-color:rgba(46,204,113,.55); color:#eafff2 }
.status.warn{ border-color:rgba(241,196,15,.55); color:#fff3cc }
.status.err{ border-color:rgba(231,76,60,.6); color:#ffe9e7 }
.status.info{ border-color:rgba(142,107,255,.55); color:#efe9ff }
.status.idle{ border-color:rgba(241,196,15,.55); color:#fff3cc }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(179,138,255,.12); border:1px solid rgba(179,138,255,.35);
  color:#fff; padding:6px 10px; border-radius:999px; font-weight:700;
}
.pill:empty{ display:none }

/* ===================== Title ===================== */
.title{ font-size:18px; font-weight:800; color:#fff }
.title small{ color:var(--muted); font-weight:600 }

/* ===================== Key/vals ===================== */
.grid4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:10px }
.kv{
  background:#10141a; border:1px solid var(--edge); border-radius:10px; padding:12px;
}
.kv span{ display:block; color:var(--muted); font-size:12px; margin-bottom:4px }
.kv b{ font-weight:800; color:#fff }

/* ===================== Charts ===================== */
.charts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:260px; gap:16px;
}
.chart{
  display:flex; flex-direction:column; min-height:0; height:100%;
  border:1px solid var(--edge); border-radius:var(--radius); padding:10px; background:#11141a;
}
.chart-head{ display:flex; align-items:baseline; gap:8px; margin:0 2px 8px 2px }
.chart h3{ font-size:14px; margin:0; color:#fff }
.chart small{ color:var(--muted) }
.chart canvas{ width:100% !important; height:100% !important; display:block }

/* ===================== Top heroes ===================== */
.heroes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.hero{
  background:#10141a; border:1px solid var(--edge); border-radius:12px; padding:12px;
  display:grid; grid-template-columns:90px 1fr; gap:12px; align-items:center;
}
.hero img{
  width:90px; height:90px; object-fit:contain; background:#0d1016; border:1px solid var(--edge); border-radius:10px;
}
.hero-name{ font-size:16px; color:#fff; margin-bottom:6px }
.hero-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.hero-stats div{
  background:#0f1319; border:1px solid var(--edge); border-radius:10px; padding:8px;
}
.hero-stats span{ display:block; color:var(--muted); font-size:11px; margin-bottom:2px }
.hero-stats b{ color:#fff }

/* ===================== Rank grid ===================== */
.rankgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px }
.rankcard{
  background:#10141a; border:1px solid var(--edge); border-radius:12px; padding:12px;
}
.rankhead{ display:flex; align-items:center; gap:8px; margin-bottom:8px }
.rankhead .s{
  background:#121821; border:1px solid var(--edge); color:#fff;
  padding:4px 8px; border-radius:8px; line-height:1; font-weight:800;
}
.rankhead .pill{
  margin-left:auto; font-size:12px; padding:6px 8px; border-radius:10px;
  max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rankbody{ display:flex; align-items:center; gap:12px }
.rankimg{ width:56px; height:56px; border-radius:10px; background:#0d1016; display:block }
.rankbody .rankimg img{ display:block }
.rankmeta{ display:flex; flex-direction:column; gap:4px }
.rankmeta b{ font-size:13px; color:#fff }
.rankmeta small{ color:var(--muted) }

/* Ensure rank PNGs aren’t overridden by old CSS */
.rankcard .rankimg,
.rankcard .rankimg img{
  width:56px !important; height:56px !important; object-fit:contain;
  background:none !important; visibility:visible !important; opacity:1 !important;
}

/* ===================== User card / avatar ===================== */
.usercard{ display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:center }
.avatar{ position:relative; width:96px; height:96px; border-radius:12px; overflow:hidden; background:#0f1218; border:1px solid var(--edge) }
.avatar .icon{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
.avatar .frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none }
.clanbox{ display:flex; flex-direction:column; gap:6px; align-items:flex-start }
.clan-banner{ width:220px; height:64px; border:1px solid var(--edge); border-radius:12px; overflow:hidden; background:#0f1218 }
.clan-banner>img{ width:100%; height:100%; object-fit:cover; display:block }
.clan-caption{ font-weight:700; color:#fff; opacity:.95 }

/* ===================== Mode picker ===================== */
.modepicker{ position:relative; width:300px }
.modebtn{
  width:100%; display:flex; align-items:center; gap:10px;
  background:#11141a; border:1px solid var(--edge); border-radius:10px;
  color:#fff; padding:10px 38px 10px 12px; text-align:left; cursor:pointer;
}
.modebtn::after{
  content:""; position:absolute; right:10px; top:50%; width:14px; height:14px; transform:translateY(-50%);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23a7afbd' d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-size:14px; background-repeat:no-repeat; background-position:center; opacity:.9;
}

/* Dropdown panel */
.modemenu{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#11141a; border:1px solid var(--edge); border-radius:10px; z-index:9999;
  max-height:320px; overflow:auto; padding:6px; box-shadow:0 14px 28px rgba(0,0,0,.35);
}

/* Each row: icon + label */
.modemenu li{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.modemenu li:hover{ background:rgba(179,138,255,.12) }

/* ---- ICON VISIBILITY FIXES ---- */
/* Default: inline icons elsewhere are hidden */
.modeicon{
  width:20px; height:20px; object-fit:contain; vertical-align:middle; margin-right:8px;
  display:none;
}
/* Show icon on the closed trigger button */
.modepicker .modebtn .modeicon{
  display:inline-block !important;
}
/* Always show icons inside the open dropdown */
.modepicker .modemenu li .modeicon{
  display:inline-block !important;
  width:20px; height:20px; object-fit:contain;
}

/* Keep the dropdown over panels/charts and prevent clipping */
.panel, .chart, .hero, .rankcard{ overflow:visible }
.modepicker{ z-index:4000 }
.modemenu{ z-index:9999 }

/* ===================== Footer ===================== */
.foot{
  max-width:1200px; margin:0 auto; padding:16px; color:var(--muted);
  display:flex; justify-content:space-between;
}

/* ===================== Utilities ===================== */
[hidden]{ display:none !important }

/* ===================== Mobile ===================== */
@media (max-width:1000px){
  .grid4{ grid-template-columns:repeat(2,1fr) }
  .charts{ grid-template-columns:1fr; grid-auto-rows:240px }
  .heroes{ grid-template-columns:1fr }
}

@media (max-width: 640px){
  html,body{ font-size:15px }

  .wrap{ padding:0 12px; gap:12px }
  .tabs{ overflow:auto; -webkit-overflow-scrolling:touch }

  .row{ flex-direction:column; align-items:stretch; gap:8px }
  .inp, .btn, .modebtn{ width:100%; min-height:44px; font-size:16px }
  .modepicker{ width:100%; max-width:none }

  .grid4{ grid-template-columns:1fr; gap:8px; margin-top:8px }
  .heroes{ grid-template-columns:1fr; gap:10px }
  .rankgrid{ grid-template-columns:1fr; gap:10px }

  .charts{ grid-template-columns:1fr; grid-auto-rows:auto; gap:12px }
  .chart{ height:auto; padding:10px }
  .chart canvas{ height:clamp(220px, 42vh, 360px) !important }

  .hero{ grid-template-columns:64px 1fr; gap:10px; padding:10px }
  .hero img{ width:64px; height:64px; border-radius:10px }

  .foot{ flex-direction:column; gap:8px }
}
/* Hide icon ONLY when it's the All Modes entry (no image) */
.modepicker .modebtn .modeicon:not([src]),
.modepicker .modebtn .modeicon[src=""],
.modepicker .modemenu li .modeicon:not([src]),
.modepicker .modemenu li .modeicon[src=""]{
  display:none !important;
}

/* Optional safety if your markup tags All Modes */
.modepicker [data-mode="ALL"] .modeicon,
.modepicker [aria-label="All Modes"] .modeicon{
  display:none !important;
}