/* =========================================================
   Dueltainer Network — Site Styles (clean + de-duplicated)
   ========================================================= */

:root{
  --bg:#05070D;
  --panel:#0B1020;
  --accent:#00B3FF;
  --violet:#7C4DFF;
  --orange:#FF7A18;
  --text:#E6F0FF;
  --muted:#92A0B6;
  --card:#0E1428;
  --border:rgba(124,77,255,.45);
  --shadow:0 10px 25px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.03);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,179,255,.08), transparent 60%),
    radial-gradient(1000px 500px at 110% 20%, rgba(124,77,255,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:"Atkinson Hyperlegible", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}

h1,h2,h3 { font-family:"Orbitron", sans-serif; letter-spacing:.03em; }
h1 { text-shadow:0 0 18px rgba(0,179,255,.35); }

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(1200px,92%);margin:0 auto}

/* === Header / Nav === */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,12,20,.7);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{display:flex;align-items:center;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{height:36px;width:auto;filter:drop-shadow(0 0 8px rgba(0,179,255,.35))}
.brand span{font-family:"Orbitron",sans-serif}
.nav{display:flex;gap:14px;margin-left:auto;align-items:center}
.nav a{padding:8px 12px;border-radius:12px;border:1px solid transparent}
.nav a[data-active="true"]{border-color:var(--violet);background:linear-gradient(180deg,rgba(124,77,255,.15),rgba(0,0,0,0))}
.nav a.discord{border-color:rgba(0,179,255,.35)}
.nav-toggle{display:none;width:40px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--panel);position:relative}
.nav-toggle:before,.nav-toggle:after{content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--text);top:12px;box-shadow:0 8px 0 var(--text)}

@media (max-width:860px){
  .nav{display:none}
  .nav.open{display:flex;flex-wrap:wrap;gap:8px;position:absolute;right:16px;top:56px;background:rgba(10,12,20,.95);padding:12px;border:1px solid var(--border);border-radius:14px}
  .nav-toggle{display:block;margin-left:auto}
}

/* === Footer === */
.site-footer{border-top:1px solid var(--border);margin-top:48px;padding:18px 0;background:rgba(10,12,20,.6)}
.site-footer .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between}
.site-footer .tagline{color:var(--muted)}
.site-footer .socials a{margin-left:12px}

/* === Hero === */
.hero{padding:48px 0 24px;background:linear-gradient(180deg,rgba(0,179,255,.05),rgba(124,77,255,.02) 60%,transparent)}
.hero h1{font-size:clamp(28px,4vw,56px)}
.hero .glow{text-shadow:0 0 18px rgba(0,179,255,.6)}
.hero .sub{color:var(--muted);max-width:800px}

/* === Buttons === */
.btn{display:inline-block;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(0,179,255,.12),rgba(124,77,255,.08));border:1px solid var(--border);color:var(--text);font-weight:700}
.btn.primary{background:linear-gradient(180deg,rgba(0,179,255,.18),rgba(124,77,255,.12))}
.btn.ghost{background:transparent}
.btn.danger{background:linear-gradient(180deg,rgba(255,122,24,.15),rgba(255,122,24,.05));border-color:rgba(255,122,24,.45)}
.btn.pill{border-radius:999px;padding:10px 16px;display:inline-flex;align-items:center;gap:8px}
.btn.platform{background:linear-gradient(180deg,rgba(124,77,255,.18),rgba(0,0,0,0));border-color:rgba(124,77,255,.45)}
.btn.support{background:linear-gradient(180deg,rgba(0,179,255,.18),rgba(0,0,0,0));border-color:rgba(0,179,255,.45)}

/* === Layout / Cards === */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05)}

.rules{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px}
.rules a{color:var(--accent)}

/* === Tables (base) === */
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}
tbody tr:hover{background:rgba(255,255,255,.04)}
.muted{color:var(--muted)}

/* === Tabs (for the index tabs above the table) === */
#dtSeasonTabs{display:flex;gap:8px;flex-wrap:wrap}
#dtSeasonTabs .tab{
  padding:8px 12px;border-radius:10px;background:#0e1520;color:#cfe9ff;
  border:1px solid rgba(255,255,255,.12);cursor:pointer;
}
#dtSeasonTabs .tab.active{
  background:#112238;border-color:#00B3FF;color:#e7f6ff;box-shadow:0 0 0 1px rgba(0,179,255,.3) inset;
}

/* =========================================================
   Dueltainer Leaderboards — ALIGNMENT + VIBRANT VISUALS
   ========================================================= */

/* Use separate model for this table so sticky headers + highlights align perfectly */
#dtLbTable{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0;
  table-layout:fixed;              /* header/body stay in lockstep */
}
#dtLbTable th, #dtLbTable td { white-space: nowrap; }

/* Sticky header + caret + selected header state */
#dtLbTable thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel);
}
#dtLbTable thead th[data-sort="asc"]::after  { content: " ▲"; opacity:1; }
#dtLbTable thead th[data-sort="desc"]::after { content: " ▼"; opacity:1; }

#dtLbTable thead th.sorted{
  background: rgba(124,77,255,.18);
  box-shadow: inset 0 0 0 1px rgba(124,77,255,.45);
  border-radius: 8px;
}

/* Give first column a little extra room (accent bar sits on the left) */
#dtLbTable thead th:first-child,
#dtLbTable tbody td:first-child{
  padding-left: 18px;
}

/* Sorted column cell highlight */
#dtLbTable td.sorted{
  background: rgba(124,77,255,.16);
  font-weight:700;
  background-clip: padding-box;
}

/* Medal rows */
#dtLbTable tbody tr.lb-gold{
  background: linear-gradient(90deg, rgba(255,215,0,.30), rgba(255,215,0,.14) 45%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(255,215,0,.35);
}
#dtLbTable tbody tr.lb-silver{
  background: linear-gradient(90deg, rgba(192,192,192,.30), rgba(192,192,192,.12) 45%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(192,192,192,.35);
}
#dtLbTable tbody tr.lb-bronze{
  background: linear-gradient(90deg, rgba(205,127,50,.30), rgba(205,127,50,.12) 45%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(205,127,50,.35);
}

/* Percentile buckets */
#dtLbTable tbody tr.lb-top{
  background: linear-gradient(90deg, rgba(0,179,255,.26), rgba(0,179,255,.12) 45%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(0,179,255,.35);
}
#dtLbTable tbody tr.lb-mid{
  background: linear-gradient(90deg, rgba(255,215,0,.22), rgba(255,215,0,.10) 45%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(255,215,0,.28);
}
#dtLbTable tbody tr.lb-bottom{
  background: linear-gradient(90deg, rgba(255,70,70,.24), rgba(255,70,70,.10) 45%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(255,70,70,.30);
}

/* Zebra for uncolored rows */
#dtLbTable tbody tr:nth-child(odd):not(.lb-gold):not(.lb-silver):not(.lb-bronze):not(.lb-top):not(.lb-mid):not(.lb-bottom){
  background: rgba(255,255,255,.03);
}

/* Hover state */
#dtLbTable tbody tr:hover{
  background-image: none !important;
  background-color: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Left accent bar to the very left of each row (doesn’t affect layout) */
#dtLbTable tbody tr{ position:relative; }
#dtLbTable tbody tr::before{
  content:"";
  display:block;
  width:6px; height:100%;
  position:absolute; left:0; top:0; bottom:0;
  border-radius: 8px 0 0 8px;
  opacity:.9; pointer-events:none;
}
#dtLbTable tbody tr.lb-gold::before   { background: linear-gradient(#ffdf00, #e3b700); }
#dtLbTable tbody tr.lb-silver::before { background: linear-gradient(#dcdcdc, #bfbfbf); }
#dtLbTable tbody tr.lb-bronze::before { background: linear-gradient(#d18a3a, #b3712b); }
#dtLbTable tbody tr.lb-top::before    { background: linear-gradient(#39c7ff, #0095e6); }
#dtLbTable tbody tr.lb-mid::before    { background: linear-gradient(#ffd84a, #ffb800); }
#dtLbTable tbody tr.lb-bottom::before { background: linear-gradient(#ff6a6a, #dc4040); }

/* “Sorted by …” pill (place anywhere above the table) */
#dtSortHint{
  display:inline-block;
  margin:6px 0 10px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  color:#e7f6ff;
  background:rgba(124,77,255,.20);
  border:1px solid rgba(124,77,255,.45);
}
/* === FIX: keep columns aligned by moving the accent bar into the first cell === */

/* kill the old row-level accent if it exists */
#dtLbTable tbody tr::before { content: none !important; }

/* first cell gets some extra left padding to make room for the accent */
#dtLbTable tbody td:first-child {
  position: relative;
  padding-left: 18px; /* base 12px + ~6px accent */
}

/* draw the accent inside the first cell only */
#dtLbTable tbody td:first-child::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 6px;
  border-radius: 4px;
  opacity: .95;
  pointer-events: none;
}

/* color the accent based on the row class */
#dtLbTable tbody tr.lb-gold   td:first-child::before { background: linear-gradient(#ffdf00, #e3b700); }
#dtLbTable tbody tr.lb-silver td:first-child::before { background: linear-gradient(#dcdcdc, #bfbfbf); }
#dtLbTable tbody tr.lb-bronze td:first-child::before { background: linear-gradient(#d18a3a, #b3712b); }
#dtLbTable tbody tr.lb-top    td:first-child::before { background: linear-gradient(#39c7ff, #0095e6); }
#dtLbTable tbody tr.lb-mid    td:first-child::before { background: linear-gradient(#ffd84a, #ffb800); }
#dtLbTable tbody tr.lb-bottom td:first-child::before { background: linear-gradient(#ff6a6a, #dc4040); }

/* keep header/body widths in lockstep (good defense in depth) */
#dtLbTable { table-layout: fixed; width: 100%; }
#dtLbTable th, #dtLbTable td { white-space: nowrap; }

/* ===== DTN Sponsor Bar (GamerXpress) ===== */
.dtn-sponsor-bar {
    width: 100%;
    background: #111;
    border-bottom: 2px solid #ff7a00;
}

.dtn-sponsor-bar .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
}

.dtn-sponsor-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

/* ⭐ Match DTN icon size exactly */
.dtn-sponsor-logo {
    height: 50px;      /* DTN icon is ~24px tall */
    width: auto;
    object-fit: contain;
}

.dtn-sponsor-link strong {
    color: #ff7a00;
}

/* Mobile tweak */
@media (max-width: 600px) {
    .dtn-sponsor-link {
        flex-direction: column;
        font-size: 12px;
        text-align: center;
    }
    .dtn-sponsor-logo {
        height: 22px;
    }
}
/* Hard cap for any GamerXpress logo anywhere */
img[src*="gamerxpress"] {
    max-height: 50px;
    height: 50px;
    width: auto;
    object-fit: contain;
}