/* ===========================
   1V1 Sprint League — styles.css
   =========================== */

/* ===== Theme ===== */
:root {
  --bg:#0f1222;
  --card:#171a2b;
  --text:#e8ebff;
  --muted:#97a0d3;
  --accent:#79ffa8;
  --link:#9bbcff;
  --border:#2a2f4b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--link); }

/* ===== Layout ===== */
.container { width: min(1100px, 92%); margin: 0 auto; }
.page-content { padding: 22px 0 36px; }

/* ===========================
   Appbar (top navigation only)
   =========================== */
.appbar {
  position: sticky; top: 0; z-index: 50;
  background: #0f1222;
  border-bottom: 1px solid var(--border);
}

.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 14px;
}
.nav-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nav-links a { color:#f2f5ff; text-decoration:none; font-weight:700; opacity:.92; }
.nav-links a:hover { opacity:1; text-decoration:underline; }
.nav-cta { display:flex; align-items:center; gap:10px; }
.nav-cta a { color:#f2f5ff; text-decoration:none; }

/* Buttons */
.btn, a.btn {
  display:inline-block;
  background:#25304f;
  color:#e8ebff;
  padding:8px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  border:1px solid #2e375a;
}
.btn-primary, a.btn-primary {
  background: var(--accent);
  color:#061a12 !important;
  border:1px solid rgba(0,0,0,.25);
}
/* NEW: ghost button used in hero */
.btn-ghost, a.btn-ghost {
  display:inline-block;
  background: transparent;
  color: var(--link);
  border: 1px solid var(--border);
  border-radius:10px;
  padding:8px 14px;
  text-decoration:none;
  font-weight:800;
}

/* ===========================
   Home grid (3 columns)
   =========================== */
.home-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 2fr) 1.2fr;
  gap: 18px;
}
.col-left, .col-center, .col-right { min-width: 0; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.card h1, .card h2, .card h3 { margin: 0 0 12px; }

/* Tables */
.table { width:100%; border-collapse: collapse; }
.table th, .table td {
  padding:10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align: middle;
}
.table th { color:#cfd6ff; font-weight:700; }
/* NEW: keep table headers neat + action column right-aligned */
.table thead th { white-space: nowrap; }
.table tbody td.actions { text-align: right; }

/* Lists for recent/upcoming */
.list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.match, .upcoming {
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#13162a;
}
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.label { font-weight:700; color:#cfd6ff; }
.muted { color: var(--muted); font-size: 0.95em; }
.winner { color:#b3ffd1; font-weight:700; }
.loser  { color:#ffb3b3; font-weight:700; }
.score  { font-weight:700; }

/* Avatars */
.avatar {
  width:26px; height:26px; border-radius:50%;
  vertical-align:middle; margin-right:8px; object-fit:cover;
  border:1px solid #2a2f4b;
}

/* Forms */
.stack { display:flex; flex-direction:column; }
.gap { gap:10px; }
input, select {
  background:#0f1326; color:var(--text);
  border:1px solid #30365a;
  border-radius:8px;
  padding:8px 10px;
  width:100%;
}
label { display:block; margin:10px 0 6px; color:var(--muted); }

/* Prose (rules / privacy / terms) */
.prose h1 { font-size: 1.8rem; margin: 0 0 0.6rem; }
.prose h2 { font-size: 1.2rem; margin: 1.1rem 0 0.4rem; color: #cfd6ff; }
.prose p  { margin: 0.6rem 0; }
.prose ul, .prose ol { margin: 0.4rem 0 0.8rem 1.2rem; }
.prose li { margin: 0.25rem 0; }

/* Footer */
.footer {
  padding:24px 0;
  border-top:1px solid var(--border);
  color:var(--muted);
}
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* Alerts */
.success { color:#b3ffd1; }
.error   { color:#ff9a9a; }

/* ===========================
   Centered home logo (under Leaderboard)
   =========================== */
.home-logo {
  display: grid;
  place-items: center;
  margin: 18px 0 8px;
}
.home-logo-img {
  display: block;
  max-width: min(520px, 90%);
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* ===========================
   NEW: Engagement UI (chips, medals, Δ)
   =========================== */
.chip{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  font-size:.78rem;
  background:#121724;
  margin-left:6px;
  vertical-align:middle;
}
.chip.warm{background:#2b1a12;border-color:rgba(255,90,31,.35)}
.chip.good{background:#112315;border-color:rgba(56,213,120,.35)}
.chip.time{background:#101a26;border-color:rgba(77,163,255,.35)}
.chip.badge-top{background:#151126;border-color:rgba(163,77,255,.35)}
.medal{padding:2px 6px}
.medal.gold{background:#32260f;border-color:rgba(255,210,71,.5)}
.medal.silver{background:#2b2e36;border-color:rgba(206,213,224,.45)}
.medal.bronze{background:#302218;border-color:rgba(225,155,85,.45)}

.delta{font-weight:700;white-space:nowrap}
.delta.up{color:#44d07b}
.delta.down{color:#ff8a57}
.delta.same{opacity:.7}
.delta .arrow{font-size:1rem;margin-right:2px}

/* NEW: row actions + WL badge */
.row-actions a{font-size:.88rem; opacity:.95}
.row-actions a + a{margin-left:8px}
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#0f1326;
  border:1px solid var(--border);
  font-weight:700;
}
.badge.wl{}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 10px; }
  .home-logo { margin: 16px 0 4px; }
}
@media (max-width: 600px) {
  .home-logo-img { max-width: 84%; }
}
/* === Social sharing === */
.sharebar {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.btn-share, a.btn-share, button.btn-share {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px;
  background:#0f1326; color:var(--text);
  border:1px solid var(--border);
  font-weight:700; text-decoration:none; cursor:pointer;
}
.btn-share:hover { filter:brightness(1.05); }
.btn-share .ico { width:18px; height:18px; display:inline-block; }

/* compact share group (e.g., inside lists) */
.share-inline { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.btn-share.sm { padding:6px 10px; border-radius:8px; font-size:0.9rem; }
.btn-copy { position:relative; }
.btn-copy[data-copied="1"]::after{
  content:"Copied!"; position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  background:#1d2b4d; color:#fff; padding:3px 8px; border-radius:8px;
  border:1px solid var(--border); font-size:0.8rem;
}