/* ============================================================
   CodenamesBench — GitHub Pages stylesheet
   ============================================================ */

:root {
  --red:    #c0392b;
  --red-bg: #fdf0ef;
  --blue:   #2471a3;
  --blue-bg:#eaf3fb;
  --gold:   #f9e79f;
  --silver: #f2f3f4;
  --bronze: #fdebd0;
  --border: #dde3ea;
  --text:   #1a1a2e;
  --muted:  #6b7280;
  --bg:     #ffffff;
  --surface:#f8f9fb;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Nav ────────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 52px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.nav-title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: 0.875rem;
}

.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--text); text-decoration: none; }

.nav-gh {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-weight: 500;
  color: var(--text) !important;
}
.nav-gh:hover { background: var(--surface); }

/* ── Sections ───────────────────────────────────────────── */
section {
  max-width: 960px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}

section + section {
  border-top: 1px solid var(--border);
}

h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.section-desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

/* ── Hero ───────────────────────────────────────────────── */
#hero { padding-top: 4rem; }

#hero h1 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

.hero-desc {
  font-size: 1.05rem;
  max-width: 680px;
  color: #374151;
  margin-bottom: 1.75rem;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.rule-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.9rem;
}

.rule-assassin { border-color: #e5e7eb; background: #f9fafb; }

.rule-icon { font-size: 1.25rem; line-height: 1; }

.rules-note {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

thead th {
  background: var(--surface);
  padding: 0.65rem 0.9rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface); }

/* Leaderboard rank highlights */
#lb-body tr.rank-1 td:first-child { background: var(--gold); font-weight: 700; }
#lb-body tr.rank-2 td:first-child { background: var(--silver); font-weight: 600; }
#lb-body tr.rank-3 td:first-child { background: var(--bronze); font-weight: 600; }

.elo-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.win-pct { font-variant-numeric: tabular-nums; }

/* ── Sortable game table ────────────────────────────────── */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #eef0f3; }
th.sort-asc .sort-arrow::after  { content: " ▲"; }
th.sort-desc .sort-arrow::after { content: " ▼"; }
.sort-arrow { color: var(--muted); font-size: 0.75em; }

/* Red / blue winner highlight */
.winner-red  { color: var(--red);  font-weight: 600; }
.winner-blue { color: var(--blue); font-weight: 600; }

/* ── Games filter ────────────────────────────────────────── */
.games-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

#games-filter {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  width: 240px;
  outline: none;
}
#games-filter:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(36,113,163,0.15); }

.games-count { font-size: 0.85rem; color: var(--muted); }

/* ── Stat blocks ─────────────────────────────────────────── */
.stat-block {
  margin-bottom: 2.5rem;
}
.stat-block:last-child { margin-bottom: 0; }

/* ELO chart */
.chart-wrap {
  position: relative;
  height: 340px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--bg);
}

/* ── Head-to-head matrix ─────────────────────────────────── */
#h2h-container {
  overflow-x: auto;
}

.h2h-table {
  border-collapse: collapse;
  font-size: 0.82rem;
  width: 100%;
}

.h2h-table th {
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}

.h2h-table th.row-header {
  text-align: right;
  min-width: 110px;
}

.h2h-table td {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.h2h-cell-empty { background: #f3f4f6; color: var(--muted); }
.h2h-cell-win   { font-weight: 600; }

/* ── Review button in game table ─────────────────────────── */
.btn-review {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
  font-family: var(--font);
}
.btn-review:hover { background: #e8edf3; border-color: #adb5bd; }

/* ── Game Reviewer ───────────────────────────────────────── */
#reviewer-header {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
#reviewer-header strong { color: var(--text); }

/* Clue bar */
#clue-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.clue-team-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.clue-team-badge.red  { background: var(--red);  color: #fff; }
.clue-team-badge.blue { background: var(--blue); color: #fff; }

#clue-word {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#clue-number {
  font-size: 1.1rem;
  color: var(--muted);
}

#guess-display {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
#guess-display strong { color: var(--text); font-size: 1rem; }

#turn-indicator {
  font-size: 0.8rem;
  color: var(--muted);
}

/* PASS banner */
#pass-banner {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--muted);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 3px dashed var(--border);
  border-radius: var(--radius);
  animation: fadein 0.3s ease;
}

@keyframes fadein { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* Board nav */
.board-nav-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.nav-arrow {
  font-size: 1.6rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text);
  transition: background 0.15s;
}
.nav-arrow:hover:not(:disabled) { background: var(--surface); }
.nav-arrow:disabled { opacity: 0.25; cursor: default; }

/* Board grid */
.board-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  flex: 1;
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 3px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}

.board-wrap.team-red  { border-color: var(--red); }
.board-wrap.team-blue { border-color: var(--blue); }

/* End-state board wash */
.board-wrap.end-red  { background: rgba(192,57,43,0.07); border-color: var(--red); }
.board-wrap.end-blue { background: rgba(36,113,163,0.07); border-color: var(--blue); }

/* Subtle color hints on unrevealed cards at game end */
.card.hint-red      .card-back { background: #f0d8d6; border-color: #d9a8a4; }
.card.hint-blue     .card-back { background: #d4e5f5; border-color: #9dc0e0; }
.card.hint-neutral  .card-back { background: #e8e0d4; border-color: #c8baa8; }
.card.hint-assassin .card-back { background: #d0d0d0; border-color: #a0a0a0; }

/* ── Card 3D flip ────────────────────────────────────────── */
.card {
  perspective: 600px;
  aspect-ratio: 3/2;
  min-height: 54px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.card.revealed .card-inner { transform: rotateY(180deg); }

.card-back,
.card-front {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: clamp(0.55rem, 1.4vw, 0.8rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  padding: 0.2rem;
  text-transform: uppercase;
  overflow: hidden;
}

/* Unrevealed back face: cream card look */
.card-back {
  background: #f5f0e8;
  border: 2px solid #d6cfc2;
  color: #333;
}

/* Revealed front face */
.card-front {
  transform: rotateY(180deg);
  border: 2px solid transparent;
}

.card-front.color-red      { background: var(--red);  color: #fff; border-color: #a93226; }
.card-front.color-blue     { background: var(--blue); color: #fff; border-color: #1a5276; }
.card-front.color-neutral  { background: #c9b99a;     color: #3d2b1f; border-color: #a89070; }
.card-front.color-assassin { background: #1c1c1c;     color: #fff; border-color: #000; }

/* Assassin skull overlay on end state */
.card-front.color-assassin.assassin-hit::after {
  content: "💀";
  position: absolute;
  font-size: 1.6em;
  opacity: 0.85;
}

/* ── Reasoning panel ─────────────────────────────────────── */
#reasoning-wrap { margin-top: 0.5rem; }

.reasoning-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font);
}
.reasoning-btn:hover { background: var(--surface); }

#reasoning-panel {
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.5;
  background: var(--surface);
}


#reasoning-text { color: var(--text); }

/* ── End banner ──────────────────────────────────────────── */
#end-banner {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  border: 2px solid transparent;
}
#end-banner.end-red  { background: var(--red-bg);  color: var(--red);  border-color: var(--red); }
#end-banner.end-blue { background: var(--blue-bg); color: var(--blue); border-color: var(--blue); }

/* ── Placeholder / loading ────────────────────────────────── */
.loading {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 1.5rem !important;
  text-align: center;
}

.placeholder-text {
  color: var(--muted);
  font-style: italic;
  padding: 2rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}

/* ── Footer ──────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  nav { padding: 0 1rem; }
  .nav-links { gap: 0.75rem; }
  #hero h1 { font-size: 1.8rem; }
  section { padding: 2rem 1rem; }
  .chart-wrap { height: 260px; }
}