/* ========== THEME ========== */
:root{
  --bg:#0b1020;            /* page background (very dark) */
  --bg-alt:#0e1428;        /* subtle header/section bg */
  --card:#111827;          /* card background */
  --text:#f8fafc;          /* main text (white) */
  --muted:#9aa3b2;         /* secondary text */
  --border:#1f2937;        /* borders / hairlines */
  --brand:#60a5fa;         /* accent (links, badge) */
  --brand-soft:rgba(96,165,250,.16);
}

/* ========== BASE ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Noto Sans, Helvetica, Arial;
  color:var(--text);
  background:var(--bg);
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ========== LAYOUT ========== */
.container{max-width:1280px;margin:0 auto;padding:24px}

.site-header{
  background:linear-gradient(180deg, var(--bg-alt), transparent);
  border-bottom:1px solid var(--border);
}

/* Hero title on home */
.site-title--hero{
  text-align:center;
  font-size: clamp(2.4rem, 4.5vw, 4.25rem);
  letter-spacing:.5px;
  margin: 18px 0 4px;
}
.hero-tagline{margin:14px 0 0;font-weight:800;text-align:center;font-size:1.15rem}

/* Tabs/Nav */
.tabs{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.tabs a{
  text-decoration:none;color:var(--text);
  padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:transparent;
}
.tabs a:hover{background:var(--brand-soft)}
.tabs a.active{background:var(--brand);color:#0b1020;border-color:transparent}

/* Home: Position boxes */
.position-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-top:24px;
}
.position-card{
  display:grid; place-items:center;
  padding:28px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background: var(--card);
  color: var(--text);
  font-weight:800;
  font-size:1.05rem;
  text-decoration:none;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.position-card:hover{
  transform: translateY(-2px);
  background: var(--bg-alt);
  border-color: var(--brand);
}

/* Home-only info cards (Socials, Sources, Who we follow) */
.info-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top:20px;
}
.info-card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:12px;
  padding:14px 16px;
}
.info-card h4{margin:0 0 8px 0;font-size:1rem}
.info-card p{margin:6px 0}
.small{color:var(--muted);font-size:.95rem;margin-top:4px}
.follow-list{list-style:none;margin:10px 0 0 0;padding:0;display:grid;gap:6px}
.follow-list a{color:var(--text);text-decoration:none}
.follow-list a:hover{text-decoration:underline}

/* Search + grid (used only on position pages) */
.toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  margin:12px 0 12px;
}
.toolbar input[type="search"]{
  margin-left:8px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
  background:#0b1020;color:var(--text);
}
.players-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:16px;
}

/* Player card with right stats column (position pages) */
.player-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px;
  display:grid; grid-template-columns: 1.6fr 1fr; gap:14px;
}
.player-main{display:flex;flex-direction:column;gap:10px}
.player-aside{border-left:1px solid var(--border); padding-left:14px; display:flex;flex-direction:column;gap:10px}

.rank-badge{
  display:inline-block; font-weight:900; font-size:.95rem; padding:4px 10px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand); border:1px solid var(--brand);
}
.player-card h3{margin:0;font-size:1.15rem}
.meta{color:var(--muted);margin:-4px 0 4px;font-size:.95rem}
.analysis{color:#e5e7eb;line-height:1.7}

/* Stats panel */
.stats{display:grid;gap:8px;font-size:.95rem;color:var(--text)}
.stat-row{display:flex;justify-content:space-between;gap:10px}
.stat-key{color:var(--muted)}
.stat-val{font-weight:600}
.stat-title{margin:0;font-weight:700;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}

/* YouTube thumbnail / fallback */
.yt-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}
.yt-thumb{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.yt-thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .25s ease}
.yt-thumb:hover img{transform:scale(1.02)}
.yt-thumb.fallback{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px dashed var(--border);
  background:transparent;
}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:40px;color:var(--muted)}

/* Responsive */
@media (max-width: 980px){
  .player-card{grid-template-columns:1fr}
  .player-aside{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:10px}
}