/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #ffffff;
  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  min-height: 100vh;
}
a { color: #1c3764; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Banner ────────────────────────────────────────────────── */
.banner {
  background: #1c3764;
  color: #ffffff;
  text-align: center;
  padding: 18px 20px 20px;
  border-bottom: 3px solid #0d2240;
}
.banner h1 {
  font-family: 'Anton', Impact, Haettenschweiler, 'Arial Narrow', sans-serif;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.banner .tagline {
  font-size: 13px;
  margin-top: 6px;
  color: rgba(255,255,255,0.72);
  font-style: italic;
}

/* ── Site nav ──────────────────────────────────────────────── */
.site-nav {
  background: #eef0f6;
  border-bottom: 1px solid #c4c8d4;
  display: flex;
  justify-content: center;
}
.site-nav a {
  display: block;
  color: #1c3764;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 22px;
  border-right: 1px solid #c4c8d4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.site-nav a:first-child { border-left: 1px solid #c4c8d4; }
.site-nav a:hover { background: #dde2ef; text-decoration: none; }
.site-nav a.active { background: #ffffff; }

/* ── Page content ──────────────────────────────────────────── */
.page-content {
  text-align: center;
  padding: 30px 20px 48px;
  max-width: 760px;
  margin: 0 auto;
}

.question {
  font-family: 'Times New Roman', Times, serif;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 36px;
}

/* ── Arena ─────────────────────────────────────────────────── */
.arena {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: opacity 0.12s;
}
.arena.loading { opacity: 0.25; pointer-events: none; }

/* ── Player card ───────────────────────────────────────────── */
.player-card {
  padding: 16px 28px 20px;
  cursor: pointer;
  transition: background 0.1s;
  min-width: 220px;
  text-align: center;
}
.player-card:hover { background: #f4f6fb; }
.player-card.winner { background: #f0f6f0; }
.player-card.loser  { opacity: 0.3; }

/* ── Photo ─────────────────────────────────────────────────── */
.photo-wrap {
  width: 220px;
  height: 245px;
  background: #e4e6ea;
  border: 1px solid #b0b4be;
  transition: background 0.1s;
  margin: 0 auto 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-real {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.photo-placeholder {
  width: 54%;
  filter: brightness(0) invert(1) opacity(0.35);
  display: block;
}
.photo-wrap.has-placeholder { background: #1c3764; border-color: #1c3764; }

/* ── Player info ───────────────────────────────────────────── */
.p-name {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  line-height: 1.3;
}
.bt-hash { color: #999; font-weight: normal; font-size: 14px; }
.p-team  { font-size: 13px; color: #666; margin-top: 4px; }

.winner-label {
  font-size: 12px;
  font-weight: bold;
  color: #336633;
  letter-spacing: 0.06em;
  margin-top: 5px;
  min-height: 16px;
  text-transform: uppercase;
}

/* ── OR divider ────────────────────────────────────────────── */
.or-divider {
  display: flex;
  align-items: center;
  padding: 0 18px;
  padding-top: 100px;
  font-size: 14px;
  color: #999;
  font-style: italic;
}

/* ── Skip ──────────────────────────────────────────────────── */
.skip-wrap { margin-top: 18px; }
#skip-btn {
  background: none;
  border: 1px solid #b8bcc8;
  color: #888;
  font-size: 13px;
  padding: 5px 22px;
  cursor: pointer;
  letter-spacing: 0.05em;
}
#skip-btn:hover { background: #f4f6fb; color: #555; }

/* ── Votes box ─────────────────────────────────────────────── */
.votes-box {
  display: inline-block;
  border: 1px solid #b8bcc8;
  padding: 10px 32px;
  margin-top: 32px;
  background: #f5f7fb;
  font-size: 14px;
  color: #555;
}
.votes-num {
  font-weight: bold;
  color: #1c3764;
  font-size: 20px;
}
.votes-label { margin-left: 6px; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .banner h1 { font-size: 26px; letter-spacing: 2px; }
  .banner .tagline { font-size: 11px; }
  .banner { padding: 12px 12px 14px; }

  .question { font-size: 16px; margin-bottom: 20px; }
  .page-content { padding: 16px 6px 32px; }

  .player-card { padding: 8px 6px 12px; min-width: 0; }

  .photo-wrap { width: 140px; height: 156px; }

  .or-divider { padding: 0 6px; padding-top: 60px; font-size: 12px; }

  .p-name { font-size: 13px; }
  .bt-hash { font-size: 11px; }
  .p-team { font-size: 11px; }

  .lb-table { font-size: 12px; }
  .lb-table thead th { padding: 7px 8px; }
  .lb-table tbody td { padding: 7px 8px; }
  .page-content.lb { padding: 14px 8px 32px; overflow-x: auto; }
}

/* ── Leaderboard ───────────────────────────────────────────── */
.page-content.lb { text-align: left; }
.lb-title {
  font-family: 'Times New Roman', Times, serif;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.lb-title .votes-box { font-size: 11px; padding: 4px 14px; margin: 0; }

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lb-table thead th {
  background: #1c3764;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  text-align: left;
  white-space: nowrap;
}
.lb-table tbody tr { border-bottom: 1px solid #e8e8e8; }
.lb-table tbody tr:hover { background: #f4f6fb; }
.lb-table tbody tr.rank-gold   { background: #fffbf0; }
.lb-table tbody tr.rank-silver { background: #fafafa; }
.lb-table tbody td { padding: 9px 14px; vertical-align: middle; white-space: nowrap; }

.rank-cell   { text-align: center; width: 40px; font-size: 14px; }
.avatar-cell { width: 44px; }
.lb-photo {
  width: 32px;
  height: 36px;
  background: #e4e6ea;
  border: 1px solid #c0c4cc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-photo-real {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.lb-photo-placeholder {
  width: 60%;
  filter: brightness(0) invert(1) opacity(0.35);
  display: block;
}
.lb-photo.has-placeholder { background: #1c3764; border-color: #1c3764; }

.elo-cell    { font-weight: bold; color: #1c3764; min-width: 60px; }
.wins-cell   { color: #336633; font-weight: 600; text-align: center; }
.losses-cell { color: #993333; font-weight: 600; text-align: center; }
.votes-cell  { text-align: center; color: #666; }

.winrate-bar-wrap {
  display: inline-block;
  width: 36px;
  height: 4px;
  background: #ddd;
  vertical-align: middle;
  margin-right: 5px;
  overflow: hidden;
}
.winrate-bar {
  display: block;
  height: 100%;
  background: #1c3764;
}