:root {
  --bg: #0f1115;
  --panel: #181b22;
  --panel-2: #20242e;
  --border: #2a2f3a;
  --text: #e7e9ee;
  --muted: #8b93a4;
  --accent: #d4a23a;
  --win: #3fb950;
  --loss: #f0533f;
  --draw: #b8923a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
}
header h1 { font-size: 1.15rem; margin: 0; }
.header-left { display: flex; align-items: center; gap: 18px; }
.header-meta { display: flex; align-items: center; gap: 12px; }

#status-line { color: var(--muted); font-size: 0.82rem; }

main { max-width: 1080px; margin: 0 auto; padding: 20px; }

h2 { font-size: 1rem; margin: 0; }

.muted { color: var(--muted); font-size: 0.85rem; }
.hidden { display: none !important; }

button {
  cursor: pointer;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
}
button:hover { border-color: var(--accent); }
button.small { padding: 4px 10px; font-size: 0.8rem; }
button.primary { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; }
button.ghost { background: transparent; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.panel-head, .workspace-head, .modal-head, .modal-foot {
  display: flex; align-items: center; justify-content: space-between;
}
.workspace-head { margin-bottom: 16px; }
.workspace-actions { display: flex; gap: 8px; }

/* tournament list */
.list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px;
}
.list li.clickable { cursor: pointer; transition: border-color .15s; }
.list li.clickable:hover { border-color: var(--accent); }
.t-name { font-weight: 600; }
.badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.badge.live { background: rgba(63,185,80,0.15); color: var(--win); }
.badge.pending { background: rgba(139,147,164,0.15); color: var(--muted); }
.badge.upcoming { background: rgba(212,162,58,0.18); color: var(--accent); }

/* dashboard cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; cursor: pointer; transition: border-color .15s, transform .05s;
}
.card:hover { border-color: var(--accent); }
.card:active { transform: scale(0.99); }
.card.dropped { opacity: 0.55; border-style: dashed; }
.card.dropped .record { text-decoration: line-through; }
.dropped-badge { background: rgba(240,83,63,0.18); color: var(--loss); margin-left: 8px; }
.card-name { display: flex; align-items: center; flex-wrap: wrap; }
.card-top { display: flex; align-items: center; gap: 10px; }
.hero-thumb { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; background: var(--panel-2); }
.card-name { font-weight: 600; }
.card-hero { color: var(--muted); font-size: 0.8rem; }
.card-stats { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; }
.record { font-size: 1.35rem; font-weight: 700; letter-spacing: 1px; }
.rank { color: var(--muted); font-size: 0.85rem; }
.last { font-size: 0.78rem; margin-top: 6px; }

.flag { font-size: 0.95rem; }

.res-win { color: var(--win); font-weight: 600; }
.res-loss { color: var(--loss); font-weight: 600; }
.res-draw { color: var(--draw); font-weight: 600; }
.res-pending { color: var(--muted); font-weight: 600; }

/* modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  width: 100%; max-width: 460px; max-height: 85vh; display: flex; flex-direction: column; padding: 16px;
}
.modal-box.wide { max-width: 720px; }
/* Stable height so filtering the list doesn't resize + re-center the modal
   (which made the search field move and clicks land on the backdrop). */
#select-modal .modal-box { height: 70vh; }
.modal-head { margin-bottom: 12px; }
/* Detail modal: summary stays fixed, only the games list scrolls. */
#detail-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.history-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.close-btn { background: transparent; border: none; font-size: 1rem; }
.detail-head-left { display: flex; align-items: center; gap: 10px; }
.back-btn { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 10px; font-size: 1rem; line-height: 1.4; }
.back-btn:hover { border-color: var(--accent); }
#player-search { width: 100%; padding: 8px 10px; margin-bottom: 10px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.checklist { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.check-row:hover { background: var(--panel-2); }
.check-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.check-row .sub { color: var(--muted); font-size: 0.78rem; }
.modal-foot { margin-top: 12px; }

/* detail table */
table.history { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.history th, table.history td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
/* Sticky header so the column labels stay visible while the list scrolls. */
table.history th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.detail-summary { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.detail-summary .record { font-size: 1.5rem; }

/* format badges + draft-round highlight */
.fmt-badge { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.fmt-cc { background: rgba(63,185,80,0.15); color: var(--win); }
.fmt-draft { background: rgba(212,162,58,0.18); color: var(--accent); }
table.history tr.draft-row { background: rgba(212,162,58,0.06); }
a.opp-link { color: var(--accent); text-decoration: none; }
a.opp-link:hover { text-decoration: underline; }

/* ----------------------------- Living Legend page ----------------------------- */
.ll-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.ll-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .ll-grid { grid-template-columns: 1fr; } }

/* Tables can have several nowrap columns; let them scroll inside their panel
   rather than widening the whole page (which caused a slight mobile h-scroll). */
#events-wrap, #leaderboard-wrap, #points-wrap, #legends-wrap { overflow-x: auto; }

.ll-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 10px; }
.ll-table th, .ll-table td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ll-table th { color: var(--muted); font-weight: 500; }
.ll-table tbody tr:hover { background: var(--panel-2); }
.ll-table tbody tr.ll-cutoff-row:hover { background: transparent; }
.ll-table .nowrap { white-space: nowrap; }
.ll-table .loc { color: var(--muted); font-size: 0.8rem; }
.ll-table .rank { color: var(--muted); }
.ll-table a { color: var(--accent); text-decoration: none; }
.ll-table a:hover { text-decoration: underline; }
.ll-pts { color: var(--accent); font-weight: 700; white-space: nowrap; }
.mult { font-size: 0.78rem; font-weight: 600; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 999px; white-space: nowrap; }

/* LL cutoff separator — a full-width row inside the single events table, so every
   week shares the same column widths. The cell spans all columns and its flexible
   dashed rules absorb the slack, so the (nowrap) label can't stretch any column. */
.ll-cutoff-row td { padding: 0; border-bottom: none; }
.ll-cutoff {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 6px;
  color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.ll-cutoff-row:first-child .ll-cutoff { margin-top: 0; }
.ll-cutoff::before, .ll-cutoff::after { content: ''; flex: 1; border-top: 1px dashed var(--border); }
.ll-cutoff-label { white-space: nowrap; }

.legends { margin-top: 12px; }
.legends summary { color: var(--muted); font-size: 0.82rem; cursor: pointer; }
#multiplier-note { margin-top: 10px; }

/* event-type badges */
.evt-badge { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--panel-2); color: var(--muted); }
.evt-worlds { background: rgba(212,162,58,0.22); color: var(--accent); }
.evt-protour { background: rgba(212,162,58,0.16); color: var(--accent); }
.evt-calling { background: rgba(63,185,80,0.15); color: var(--win); }
.evt-nationals { background: rgba(88,140,240,0.18); color: #7aa2f7; }
.evt-bg { background: rgba(240,83,63,0.15); color: var(--loss); }
/* Full type label by default; the abbreviated one only shows on phones (below). */
.evt-short { display: none; }

/* ----------------------------- phones ----------------------------- */
/* Tighten chrome so the content fits a narrow viewport (e.g. Pixel 8 ~412px)
   without horizontal scroll. */
@media (max-width: 560px) {
  main { padding: 12px; }
  .panel { padding: 12px; }
  header { padding: 10px 14px; }
  header h1 { font-size: 1rem; }
  .header-left { gap: 10px; }
  .ll-table { font-size: 0.8rem; }
  .ll-table th, .ll-table td { padding: 6px 6px; }
  /* Event names are the one column that can be long — let them wrap instead of
     forcing the table wider than the screen. Break at spaces first, only mid-word
     as a last resort. */
  .ll-table td:nth-child(2) { overflow-wrap: anywhere; }
  /* Abbreviate the wide type pills so they stop squeezing the Event column. */
  .evt-full { display: none; }
  .evt-short { display: inline; }
}