/* Refined modern gaming site styles */
:root{
  --bg:#071016;
  --panel:#0c1520;
  --panel-solid:#07141b;
  --muted:#9aa4b2;
  --accent:#6ee7b7;
  --accent-2:#60a5fa;
  --card: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --gold-grad: linear-gradient(90deg,#FFC857,#FF9F1C);
  --silver-grad: linear-gradient(90deg,#9aa6b2,#6f7b8a);
  --bronze-grad: linear-gradient(90deg,#E29C5D,#B96B2E);
}
*{box-sizing:border-box}
/* Always reserve space for a vertical scrollbar so layout doesn't shift between pages */
html { overflow-y: scroll; }
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#e6eef6;background:radial-gradient(1200px 600px at 10% 10%, rgba(96,165,250,0.06), transparent), linear-gradient(180deg,var(--bg) 0%, #001219 100%);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* remove focus outline on nav links to avoid layout jump; keep keyboard accessibility in mind */
.nav-item a:focus{outline: none}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
/* Force header sizing so it is consistent across all pages */
.site-header{padding:1.75rem 0 !important}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem !important}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:800;letter-spacing:0.06em}
.logo-pill{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#021019;font-weight:900}
.brand-name{font-size:1.15rem !important}
.nav-center{display:flex;align-items:center}
.nav-list{list-style:none;display:flex;gap:1rem;padding:0;margin:0}
.nav-item{padding:.6rem .9rem;min-width:110px;text-align:center;border-radius:10px;color:var(--muted);font-weight:800;transition:all 200ms cubic-bezier(.2,.9,.2,1)}
.nav-item:hover{color:#fff;/* removed translate transform to prevent header shift on navigation */}
.nav-item a{display:inline-block}
.nav-item.active{color:var(--bg);background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 10px 30px rgba(47,231,178,0.12)}
/* Hero */
.hero{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:center;padding:3.25rem 0}
.hero-left h1{font-size:2.1rem;margin:0 0 .5rem}
.hero-left p{color:var(--muted);margin:0 0 1.25rem}
.cta-row{display:flex;gap:1rem}
.btn{background:var(--accent);color:#021019;padding:.7rem 1rem;border-radius:10px;font-weight:700;box-shadow:0 8px 24px rgba(110,231,183,0.08);border:none;cursor:pointer}
.btn.alt{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
/* Right panel */
.panel{background:var(--panel);padding:1rem;border-radius:14px;box-shadow:0 6px 30px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.02)}
.small-title{font-size:0.9rem;color:var(--muted);margin:0 0 .75rem}
.card{background:var(--card);padding:1rem;border-radius:10px;margin-bottom:.7rem;border:1px solid rgba(255,255,255,0.02)}
.card table{width:100%;border-collapse:collapse;table-layout:fixed}
.card table th, .card table td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid rgba(255,255,255,0.02);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* numeric columns sizing: Kills, Deaths, K/D, Matches — keep numbers compact and centered */
.card table th:nth-child(2), .card table td:nth-child(2),
.card table th:nth-child(3), .card table td:nth-child(3){width:92px;text-align:center}
.card table th:nth-child(4), .card table td:nth-child(4){width:92px;text-align:center}
.card table th:last-child, .card table td:last-child{width:92px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* allow header text to wrap if needed so adjacent headers don't run together */
.card table thead th{white-space:normal;overflow:visible;text-overflow:clip}
.card h3{margin:0 0 .6rem}
/* Main placeholder area */
.section{padding:2rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.stream-item{display:flex;flex-direction:column;gap:.6rem}
.video-card{border-radius:10px;padding:0;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));overflow:hidden;border:1px solid rgba(255,255,255,0.02);transition:transform 220ms cubic-bezier(.2,.9,.2,1),box-shadow 220ms;position:relative}
.video-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(2,16,25,0.6)}
.video-thumb{width:100%;height:160px;object-fit:cover;display:block}
.video-body{padding:1rem}
.video-title{font-weight:800;margin-bottom:.4rem}
.video-meta{color:var(--muted);font-size:0.9rem;margin-bottom:.6rem}
/* separator row above button */
.stats-row{border-top:1px solid rgba(255,255,255,0.04);padding-top:.6rem;display:flex;justify-content:center}
/* Stats button — sleek, modern */
.stats-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--accent);font-weight:800;cursor:pointer}
.stats-btn svg{width:16px;height:16px;opacity:.95}
.stats-btn:hover{background:rgba(255,255,255,0.02)}

/* stream view buttons (per-stream) */
.view-stats-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .65rem;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#021019;font-weight:700;border:none;cursor:pointer}
.view-stats-btn.small{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:.35rem .6rem}
.view-stats-btn svg{width:14px;height:14px}/* Play overlay */
.play-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.3));backdrop-filter:blur(4px);opacity:0;transition:opacity 180ms}
.video-card:hover .play-overlay{opacity:1}
.play-triangle{width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:6px}
/* Modal — nontransparent background */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;padding:2rem;z-index:1200}
.modal{background:var(--panel-solid);border-radius:12px;max-width:900px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,0.7);overflow:hidden;border:1px solid rgba(255,255,255,0.03);max-height:85vh}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,0.02)}
.modal-body{display:grid;grid-template-columns:1fr 360px;gap:1rem;padding:1rem;overflow:auto}
.modal-left{padding:0 0.5rem;display:flex;flex-direction:column}
.modal-right{padding:0 0.5rem}
.kv-row{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px dashed rgba(255,255,255,0.02);color:var(--muted)}
.chart-placeholder{height:200px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;color:var(--muted)}
/* Matches scroll list */
.matches-scroll{flex:1;overflow:auto;padding-right:.5rem;margin-top:.6rem}
/* hide native scrollbar visuals for a cleaner look */
.matches-scroll{scrollbar-width:none;-ms-overflow-style:none}
.matches-scroll::-webkit-scrollbar{display:none}
.match-card{background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.015));padding:.6rem;border-radius:8px;margin-bottom:.6rem;border:1px solid rgba(255,255,255,0.02);display:flex;justify-content:space-between;align-items:center}
.match-players{display:flex;flex-direction:column;gap:.25rem;color:var(--muted);font-size:.95rem}
.frag-gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.frag-silver{background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.frag-bronze{background:var(--bronze-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

/* ranking text classes */
.rank-gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.rank-silver{background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.rank-bronze{background:var(--bronze-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

/* Selector styling in modal-right */
.modal-right select{width:100%;padding:.45rem;border-radius:8px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);color:#e6eef6}
.modal-right select option{background:var(--panel-solid);color:#e6eef6}/* Full stats page */
.stats-hero{padding:2rem 0}
.stats-grid{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
.table{background:var(--card);padding:1rem;border-radius:10px}

/* Rankings columns: responsive grid to avoid horizontal scrolling */
.rankings-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:1.25rem}
@media (max-width:1600px){
  .rankings-columns{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));}
}
@media (max-width:920px){
  .rankings-columns{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
}
/* Footer */
.site-footer{padding:2rem 0;color:var(--muted);font-size:0.9rem}
/* Responsive */
@media (max-width:920px){
  .modal-body{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .nav-list{gap:.5rem}
  .logo-pill{width:38px;height:38px}
  .hero-left h1{font-size:1.6rem}
  .video-thumb{height:120px}
}