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

:root {
  --bg:          #0c0b0a;
  --surface:     #141210;
  --surface2:    #1c1a17;
  --surface3:    #252220;
  --border:      #2d2924;
  --border2:     #3d3830;
  --accent:      #e63946;
  --accent-dim:  #c0303b;
  --accent-glow: rgba(230, 57, 70, 0.18);
  --text:        #f0ece6;
  --text2:       #a09890;
  --text3:       #5a5248;
  --gold:        #f5c842;
  --gold-dim:    rgba(245,200,66,0.15);
  --green:       #22c55e;
  --radius:      10px;
  --radius-sm:   6px;
  --header-h:    60px;
  --player-h:    80px;
  --player-h-xl: 380px;
  --rail-w:      404px;
  --font:        'Inter', system-ui, sans-serif;
  --font-display:'Barlow Condensed', 'Inter', system-ui, sans-serif;
  --shadow:      0 8px 32px rgba(0,0,0,0.6);
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.4);
}

html { font-size: 15px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  min-height: 100vh;
  padding-top: var(--header-h);
  padding-bottom: var(--player-h);
  transition: padding-bottom 0.3s;
}
body.player-expanded { padding-bottom: var(--player-h-xl); }
body.player-open { padding-bottom: var(--player-h-xl); }

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }
input, select { font-family: var(--font); }
img { display: block; }

/* ── Header ──────────────────────────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(12,11,10,0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  z-index: 200;
}
/* thin red line at top of header */
#site-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}
.header-inner {
  max-width: min(96vw, 2040px);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo */
.logo { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.logo-icon { display: none; }
.logo-text {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1;
}
.logo-accent { color: var(--accent); }

/* Header search — hidden; search lives in the home hero */
.header-search { display: none; position: relative; }
.search-icon { display: none; }

/* "/" keyboard shortcut hint — visible when search is not focused */
.search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-family: monospace;
  color: var(--text3);
  pointer-events: none;
  transition: opacity 0.15s;
  line-height: 1.6;
}
.header-search:focus-within .search-kbd { opacity: 0; }

/* Autocomplete dropdown */
.ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 500;
  overflow: hidden;
  max-height: 420px;
  overflow-y: auto;
}
.ac-dropdown.hidden { display: none; }
.ac-section-label {
  padding: 8px 14px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
}
.ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 0.875rem;
}
.ac-item:hover, .ac-item.focused { background: var(--surface2); }
.ac-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.ac-thumb {
  width: 48px; height: 30px; border-radius: 4px;
  object-fit: cover; flex-shrink: 0; background: var(--surface3);
}
.ac-name { font-weight: 600; color: var(--text); }
.ac-sub  { font-size: 0.74rem; color: var(--text3); margin-top: 1px; }
.ac-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Nav — one evenly divided row, centred between the logo and the auth buttons.
   The links share the row equally (flex: 1) rather than sizing to their text,
   which is what keeps the spacing even as items are added or removed. The
   max-width stops four short words from sprawling across a 2000px header now
   that "Find the Punch" is gone. */
.main-nav {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  /* Wide enough that five links spread across the header instead of huddling
     in the middle, capped so they never run into the auth buttons on a
     smaller laptop screen. `margin: 0 auto` still centres the row — the width
     grows outward from the centre in both directions. */
  max-width: min(70vw, 940px);
  margin: 0 auto;
}
.nav-link {
  flex: 1;
  text-align: center;
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  position: relative;
  border-radius: 6px;
}
.nav-link::after {
  content: '';
  position: absolute;
  /* Inset a little less than the padding so the underline reads as belonging
     to the word rather than spanning the whole hover area. */
  bottom: -1px; left: 16px; right: 16px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.2s;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--text); }
.nav-link.active::after { transform: scaleX(1); }
.nav-saved { color: var(--gold) !important; }
.nav-saved::after { background: var(--gold) !important; }

/* Home-mode: same centred row, slightly roomier links. This used to be
   justify-content: flex-end — invisible while the links stretched, but it
   pushed the whole nav into the auth buttons the moment they didn't. */
.home-mode .main-nav { flex: 1; justify-content: center; }
.home-mode .nav-link { padding: 6px 26px; font-size: 0.86rem; }
.home-mode .nav-link::after { left: 22px; right: 22px; }

/* Auth buttons */
.header-auth { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.btn-auth {
  padding: 6px 15px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: opacity 0.15s, transform 0.1s;
}
.btn-auth:active { transform: scale(0.97); }
.btn-login { color: var(--text2); border: 1px solid var(--border2); }
.btn-login:hover { color: var(--text); border-color: var(--text3); }
.btn-register { background: var(--accent); color: #fff; }
.btn-register:hover { background: var(--accent-dim); }

/* User pill */
.header-user { margin-left: auto; position: relative; }
.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 30px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 0.15s;
}
.user-pill:hover { border-color: var(--text3); }
.user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chevron { font-size: 0.65rem; color: var(--text3); }
.user-menu {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  min-width: 180px;
  overflow: hidden;
  box-shadow: var(--shadow);
  z-index: 300;
}
.user-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 0.84rem;
  color: var(--text2);
  transition: background 0.1s, color 0.1s;
}
.user-menu a:hover { background: var(--surface2); color: var(--text); }
.user-menu hr { border: none; border-top: 1px solid var(--border); }

/* ── Main ─────────────────────────────────────────────────────────────────── */
#app {
  max-width: min(96vw, 2040px);
  margin: 0 auto;
  padding: 32px 24px 60px;
}

@keyframes ann-flash {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50%       { opacity: 0.8; box-shadow: 0 0 8px 2px rgba(239,68,68,0.5); }
}

/* ── Home layout (sidebar + main) ────────────────────────────────────────── */
.home-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0 32px;
  align-items: start;
}
.home-main { min-width: 0; }

/* ── Announcements sidebar ────────────────────────────────────────────────── */
.announcements-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: calc(100vh - var(--header-h) - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.announcements-sidebar::-webkit-scrollbar { width: 4px; }
.announcements-sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

.announcements-hd {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  padding: 12px 12px 10px;
  border-bottom: 2px solid var(--accent);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.announcements-empty {
  padding: 20px 14px;
  font-size: 0.78rem;
  color: var(--text3);
  line-height: 1.5;
  text-align: center;
}
.announcement-card {
  padding: 11px 14px 10px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.announcement-card:last-child { border-bottom: none; }
.announcement-card:hover { background: var(--surface2); border-left-color: var(--accent); }
.ann-link { text-decoration: none; color: inherit; }

.ann-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  gap: 6px;
}
.announcement-league {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ann-age {
  font-size: 0.60rem;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}
.ann-headline {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text1);
  line-height: 1.35;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Grouped matchup list under one event */
.ann-matchup-list {
  margin: 0 0 7px;
  padding: 0;
  list-style: none;
}
.ann-matchup-list li {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text2);
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ann-matchup-list li::before { content: '• '; color: var(--accent); }
.ann-matchup {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ann-event-date {
  display: inline-block;
  padding: 3px 8px;
  background: #ef4444;
  color: #fff;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ann-flash {
  animation: ann-flash 1.4s ease-in-out infinite;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero-search-wrap {
  padding: 28px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: 5.4rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -1.5px;
  line-height: 0.92;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.hero-title span { color: var(--accent); }
.hero-sub {
  color: var(--text3);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}
.hero-search-bar {
  display: flex;
  max-width: 820px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.hero-search-bar input {
  flex: 1;
  padding: 17px 22px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.05rem;
  outline: none;
}
.hero-search-bar input::placeholder { color: var(--text3); }
.hero-search-bar button {
  padding: 14px 32px;
  background: var(--accent);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s;
}
.hero-search-bar button:hover { background: var(--accent-dim); }

/* Search bar + selected-league badge live side by side */
.hero-search-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hero-search-row .hero-search-bar { flex: 1 1 360px; }

.hero-league-badge {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  cursor: pointer;
  transition: transform 0.18s;
  animation: heroBadgeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-league-badge:hover { transform: translateY(-1px); }
.hero-league-badge:hover .hero-league-pfp {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.hero-league-badge:hover .hlb-name { color: var(--accent); }
.hero-league-pfp {
  width: 116px; height: 116px;
  border-radius: 22px;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  border: 2px solid var(--border2);
  box-shadow: 0 3px 8px rgba(0,0,0,0.22);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.hero-league-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hlb-label {
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 700;
}
.hlb-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.05;
  letter-spacing: -0.4px;
  transition: color 0.18s;
}

@keyframes heroBadgeIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* League avatars rendered from a real YouTube thumbnail (vs. initials tile) */
.league-avatar-img,
.detail-av-img { object-fit: cover; }

/* ── Head-to-Head "Tale of the Tape" ──────────────────────────────────────── */
.rapper-compare-btn {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 7px 14px;
  border-radius: 6px;
  transition: filter 0.15s, transform 0.15s;
}
.rapper-compare-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

.vs-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 30px 20px 34px;
  margin-bottom: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(230,57,70,0.10), transparent 45%),
    radial-gradient(120% 140% at 100% 0%, rgba(59,130,246,0.10), transparent 45%),
    var(--surface);
}
.vs-fighter { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.vs-fighter .vs-av { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.4); border: 3px solid var(--border2); }
.vs-fighter .vs-av svg, .vs-fighter .vs-av img, .vs-fighter .vs-av .rapper-av-wrap { width: 104px !important; height: 104px !important; }
.vs-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  transition: color 0.15s;
}
.vs-name:hover { color: var(--accent); }
.vs-league {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
  transition: color 0.15s;
}
.vs-league:hover { color: var(--text); }
.vs-league-none { opacity: 0.5; }
.vs-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vs-badge {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.6rem;
  color: #fff;
  background: var(--accent);
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(230,57,70,0.12), 0 8px 22px rgba(0,0,0,0.4);
}
.vs-swap {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text3);
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 0.95rem;
  transition: color 0.15s, border-color 0.15s, transform 0.2s;
}
.vs-swap:hover { color: var(--accent); border-color: var(--accent); transform: rotate(180deg); }

.vs-tape {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px 22px 20px;
  margin-bottom: 30px;
}
.vs-tape-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--text3);
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.vs-stat {
  display: grid;
  grid-template-columns: 1fr 116px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.vs-stat:last-child { border-bottom: none; }
.vs-stat-side.left  { text-align: right; }
.vs-stat-side.right { text-align: left; }
.vs-stat-val {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--text);
  display: block;
  transition: color 0.15s;
}
.vs-stat-side.win .vs-stat-val { color: var(--accent); }
.vs-stat-label {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}
.vs-bar {
  position: relative;
  height: 7px;
  margin-top: 7px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
}
.vs-bar-fill {
  position: absolute; top: 0; bottom: 0;
  background: var(--border2);
  border-radius: 4px;
  animation: vsGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.vs-stat-side.left  .vs-bar-fill { right: 0; transform-origin: right; }
.vs-stat-side.right .vs-bar-fill { left: 0;  transform-origin: left; }
.vs-stat-side.win   .vs-bar-fill { background: var(--accent); }
@keyframes vsGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.vs-section { margin-top: 6px; }
.vs-empty {
  text-align: center;
  color: var(--text3);
  font-size: 0.9rem;
  padding: 26px;
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  background: var(--surface);
}
.vs-opps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.vs-opp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.vs-opp:hover { border-color: var(--border2); transform: translateY(-2px); }
.vs-opp-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.vs-opp-name { flex: 1; font-weight: 700; font-size: 0.85rem; line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-opp-counts { display: flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; flex-shrink: 0; }
.vs-opp-c { color: var(--text3); }
.vs-opp-c.lead { color: var(--accent); }
.vs-opp-dash { color: var(--text3); opacity: 0.5; }

/* Compare opponent picker modal */
.compare-modal-box { max-width: 440px; }
.cmp-results { margin-top: 6px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.cmp-result {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cmp-result:hover { border-color: var(--accent); background: var(--surface); }
.cmp-result-name { font-weight: 700; font-size: 0.9rem; }
.cmp-result-meta { font-size: 0.72rem; color: var(--text3); font-weight: 600; }
.cmp-noresult { text-align: center; color: var(--text3); font-size: 0.85rem; padding: 18px; }

@media (max-width: 560px) {
  .vs-name { font-size: 1.1rem; }
  .vs-stat-val { font-size: 1.1rem; }
  .vs-stat { grid-template-columns: 1fr 78px 1fr; gap: 8px; }
}

/* ── Stats bar ────────────────────────────────────────────────────────────── */
.stats-row {
  display: flex;
  gap: 0;
  margin-bottom: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-pill {
  flex: 1;
  padding: 18px 20px;
  background: var(--surface);
  font-size: 0.78rem;
  color: var(--text3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-pill:last-child { border-right: none; }
.stat-pill-franchise {
  cursor: pointer;
  color: var(--gold);
  gap: 2px;
  transition: background 0.15s;
}
.stat-pill-franchise:hover { background: rgba(245,200,66,0.06); }
.stat-pill-franchise strong { color: var(--gold); }
.stat-pill strong {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  display: block;
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  /* The scroll-reveal layer puts will-change:transform on .filter-bar, which
     makes it a stacking context — so the league picker panel's own z-index is
     trapped inside it and the battle grid below paints over the dropdown.
     Lift the whole bar instead. Stays under the header (200) and player (400). */
  position: relative;
  z-index: 60;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.league-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.league-pill {
  padding: 5px 13px;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.league-pill:hover { border-color: var(--text3); color: var(--text); }
.league-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sort-select {
  padding: 6px 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  margin-left: auto;
}
.league-select { min-width: 200px; margin-left: 0; }
.sort-select:focus { border-color: var(--accent); }

/* ── Searchable league picker ─────────────────────────────────────────────── */
/* Replaces a native <select>, which cannot be typed into. The button reuses
   .sort-select so it stays visually identical to the sort dropdown beside it. */
.league-combo { position: relative; }
.league-combo-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  margin-left: 0;
  text-align: left;
  font-family: inherit;
}
.league-combo-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-combo-caret { opacity: 0.6; font-size: 0.7rem; }
.league-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  width: 280px;
  max-width: 80vw;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.league-combo-panel[hidden] { display: none; }
.league-combo-search {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border2);
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
}
.league-combo-search::placeholder { color: var(--text3); }
.league-combo-list { max-height: 280px; overflow-y: auto; }
.league-combo-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.league-combo-opt[hidden] { display: none; }
.league-combo-opt:hover { background: var(--surface3, rgba(255, 255, 255, 0.06)); }
.league-combo-opt.active { color: var(--accent); font-weight: 700; }
.league-combo-opt-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-combo-opt-count { color: var(--text3); font-size: 0.75rem; }
.league-combo-empty {
  padding: 14px 12px;
  color: var(--text3);
  font-size: 0.8rem;
  text-align: center;
}
.league-combo-empty[hidden] { display: none; }

/* ── Section header ───────────────────────────────────────────────────────── */
.section-hd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
}
.section-hd h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.count-badge {
  font-size: 0.72rem;
  color: var(--text3);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.section-action-btn {
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}
.section-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.see-all-link {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.see-all-link:hover { text-decoration: underline; }

/* ── Battle grid ──────────────────────────────────────────────────────────── */
.battle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

/* Battle card */
.battle-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.battle-card:hover {
  transform: translateY(-5px);
  border-color: var(--border2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--border2);
}
.battle-card:hover .card-play-overlay { opacity: 1; }

/* Keyboard navigation focus ring */
.battle-card.kb-focused {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(244,81,30,0.18), 0 12px 40px rgba(0,0,0,0.45);
}
.battle-card.kb-focused .card-play-overlay { opacity: 1; }

/* Thumbnail */
.card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--surface2);
  overflow: hidden;
}
.card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.battle-card:hover .card-thumb img { transform: scale(1.06); }
.card-no-thumb {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  color: var(--text3);
}
.card-duration {
  position: absolute;
  bottom: 6px; right: 7px;
  background: rgba(0,0,0,0.86);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}
.card-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.card-play-btn {
  width: 56px; height: 56px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  box-shadow: 0 4px 16px rgba(230,57,70,0.5);
  transform: scale(0.9);
  transition: transform 0.15s;
}
.battle-card:hover .card-play-btn { transform: scale(1); }

/* Card body */
.card-body { padding: 14px 15px 15px; }
.card-rappers {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  line-height: 1.3;
}
.card-title {
  font-size: 0.78rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 9px;
}
.card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-views {
  font-size: 0.78rem;
  color: var(--text3);
  font-weight: 600;
}
.card-date {
  font-size: 0.76rem;
  color: var(--text3);
}
.card-save-btn {
  width: 30px; height: 30px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text3);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}
.card-save-btn:hover { color: var(--gold); border-color: var(--gold); }
.card-save-btn.saved { color: var(--gold); border-color: rgba(245,200,66,0.4); }

/* ── Leagues page ─────────────────────────────────────────────────────────── */
.leagues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.league-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.league-card:hover {
  transform: translateY(-3px);
  border-color: var(--border2);
  box-shadow: var(--shadow-sm);
}
.league-avatar {
  width: 52px; height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}
.league-card-name {
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
}
.league-card-count { color: var(--text3); font-size: 0.75rem; font-weight: 600; }
.league-card-date {
  font-size: 0.68rem;
  color: var(--text3);
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: 10px;
}
/* Top rapper pill on league cards */
.league-card-top-rapper {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(245,200,66,0.08);
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: 20px;
  padding: 3px 9px 3px 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  max-width: 100%;
}
.league-card-top-rapper:hover {
  background: rgba(245,200,66,0.15);
  border-color: rgba(245,200,66,0.4);
}
.lct-crown { font-size: 0.7rem; opacity: 0.85; flex-shrink: 0; }
.lct-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.lct-count {
  font-size: 0.65rem;
  opacity: 0.6;
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Rapper grid ──────────────────────────────────────────────────────────── */
.rappers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.rapper-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  position: relative;
}
.rapper-card:hover {
  border-color: var(--border2);
  background: var(--surface2);
  transform: translateX(3px);
}
.rapper-rank {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text3);
  width: 26px;
  flex-shrink: 0;
  text-align: right;
  line-height: 1;
}
.rapper-av {
  width: 50px; height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
}
.rapper-av svg { display: block; }
.rapper-card-info { min-width: 0; flex: 1; }
.rapper-name { font-weight: 700; font-size: 1rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rapper-count { font-size: 0.8rem; color: var(--text3); font-weight: 600; margin-top: 2px; }

/* Favorite (♥) button on rapper cards */
.rapper-save-btn {
  flex-shrink: 0;
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text3);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.12s;
}
.rapper-save-btn:hover { color: var(--accent); border-color: var(--accent); transform: scale(1.1); }
.rapper-save-btn.saved { color: var(--accent); border-color: rgba(244,81,30,0.4); background: rgba(244,81,30,0.08); }

/* Favorite button on the rapper detail page */
.rapper-fav-btn {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rapper-fav-btn:hover { border-color: var(--accent); color: var(--accent); }
.rapper-fav-btn.saved { background: rgba(244,81,30,0.12); border-color: var(--accent); color: var(--accent); }

.saved-rappers-grid { margin-bottom: 12px; }
.saved-battles-hd { margin-top: 36px; }
.empty-state-sm { padding: 28px 16px; }
.empty-state-sm .empty-icon { font-size: 2rem; }

/* ── Detail hero ──────────────────────────────────────────────────────────── */
.detail-hero {
  padding: 32px 0 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 22px;
}
.detail-av {
  width: 68px; height: 68px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.detail-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  line-height: 1;
}
.detail-sub { color: var(--text3); margin-top: 6px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.detail-delete-btn {
  margin-left: auto;
  align-self: flex-start;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.4);
  color: #ef4444;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.detail-delete-btn:hover { background: rgba(239,68,68,0.2); border-color: #ef4444; }
/* Franchise player line on league detail hero */
.detail-franchise {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  cursor: pointer;
  transition: opacity 0.15s;
}
.detail-franchise:hover { opacity: 0.75; }
.df-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(245,200,66,0.4); }
.df-count { font-size: 0.72rem; color: var(--text3); font-weight: 600; }

/* Rapper avatar image (list cards + profile hero) */
.rapper-av-img {
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  display: block;
  flex-shrink: 0;
}
.rapper-av-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.photo-verified-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #43a047;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  border: 2px solid var(--bg);
  z-index: 1;
}

/* Rapper profile picture */
.rapper-profile-pic {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid var(--surface3);
}
.rapper-real-name {
  font-size: 0.85rem;
  color: var(--text2);
  font-weight: 500;
  margin-top: 3px;
  letter-spacing: 0.01em;
}
.rapper-akas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  font-size: 0.75rem;
  color: var(--text3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rapper-aka-tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.72rem;
  color: var(--text2);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
}
.rapper-socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.rapper-social {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.rapper-social:hover { color: var(--accent); }
.social-tag {
  background: var(--surface3);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--text3);
}
.rapper-suggest-btn {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.rapper-suggest-btn:hover { color: var(--text); border-color: var(--text3); }
.admin-edit-btn { border-color: rgba(230,57,70,0.4); color: var(--accent); }
.admin-edit-btn:hover { background: rgba(230,57,70,0.08); border-color: var(--accent); color: var(--accent); }
.admin-delete-btn { border-color: rgba(230,57,70,0.3); color: var(--text3); }
.admin-delete-btn:hover { background: rgba(230,57,70,0.12); border-color: var(--accent); color: var(--accent); }

/* Admin bar tool button */
.admin-bar-tool {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 10px;
}
.admin-bar-tool:hover { background: rgba(255,255,255,0.2); }

/* False rapper fix tool */
/* overflow:visible so the absolute autocomplete dropdown isn't clipped by the
   box edge (base .modal-box uses overflow:hidden). */
/* .modal-box.false-rapper-box (two classes) beats the later .modal-box rule */
.modal-box.false-rapper-box {
  max-width: 620px;
  overflow: visible;
}
.frt-autocomplete {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 260px;
  margin-top: 2px;
  box-shadow: var(--shadow);
}
.frt-ac-item {
  padding: 9px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.frt-ac-item:hover { background: var(--surface3); }
.frt-none { color: var(--text3); cursor: default; }
.frt-battles { color: var(--text3); font-size: 0.78rem; }
.frt-loading { color: var(--text3); padding: 14px 0; font-size: 0.85rem; }
.frt-preview-header {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.frt-scan-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text3);
  margin: 8px 0 4px;
}
.frt-preview-list {
  max-height: 320px;
  overflow-y: auto;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.frt-preview-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: 6px;
}
.frt-row-nowarn { border-left: 3px solid var(--accent); }
.frt-battle-title {
  font-size: 0.74rem;
  color: var(--text3);
  line-height: 1.3;
  word-break: break-word;
}
.frt-row-inputs {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.frt-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.frt-side-label {
  font-size: 0.68rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.frt-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.frt-left-input, .frt-right-input {
  flex: 1;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 8px;
  min-width: 80px;
}
.frt-left-input:focus, .frt-right-input:focus { outline: none; border-color: var(--accent); }
.frt-other-locked {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  flex: 1;
}
.frt-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.frt-badge-ok   { background: rgba(0,200,120,0.15); color: #00c878; }
.frt-badge-new  { background: rgba(100,160,255,0.15); color: #6fa8ff; }
.frt-badge-warn { background: rgba(255,120,60,0.15); color: #ff7a3c; }
.frt-hint { font-size: 0.72rem; color: var(--text3); font-weight: 400; display: block; margin-top: 3px; }
.frt-warn { color: #ff7a3c !important; }
.frt-vs { color: var(--text3); font-size: 0.75rem; padding-top: 22px; flex-shrink: 0; }
.frt-other { color: var(--text2); flex: 1; text-align: right; }

/* Announcements manager */
.ann-mgr-box { max-width: 580px; }
.ann-form-box { max-width: 480px; }
.ann-add-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 14px;
}
.ann-add-btn:hover { opacity: 0.85; }
#ann-list { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.ann-mgr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface2);
  border-radius: 8px;
  padding: 10px 12px;
}
.ann-mgr-info { flex: 1; min-width: 0; }
.ann-mgr-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.ann-mgr-meta { font-size: 0.72rem; color: var(--text3); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.ann-mgr-league { color: var(--accent); }
.ann-mgr-date { color: #00c878; font-weight: 700; }
.ann-mgr-nodate { color: var(--text3); }
.ann-mgr-inactive { color: #ff7a3c; }
.ann-mgr-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ann-edit-btn, .ann-del-btn {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
}
.ann-edit-btn { background: var(--surface3); color: var(--text); }
.ann-del-btn  { background: rgba(220,60,60,0.15); color: #e05555; }
.ann-edit-btn:hover { background: var(--accent); color: #fff; }
.ann-del-btn:hover  { background: rgba(220,60,60,0.3); }
.ann-active-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text2);
  margin: 8px 0 4px;
  cursor: pointer;
}
.ann-link { text-decoration: none; display: block; }
.ann-link:hover { opacity: 0.85; }

/* Delete confirm modal */
.delete-confirm-box { max-width: 380px; text-align: center; padding: 36px 32px 28px; }
.delete-confirm-icon { font-size: 2.4rem; margin-bottom: 12px; }
.delete-confirm-actions { display: flex; gap: 10px; margin-top: 24px; }
.delete-confirm-btn {
  flex: 1; padding: 10px; border-radius: 8px; border: none;
  background: var(--accent); color: #fff; font-size: 0.88rem;
  font-weight: 700; cursor: pointer;
}
.delete-confirm-btn:hover { opacity: 0.85; }
.delete-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Suggest modal */
.suggest-modal-box { max-width: 420px; }

/* File upload button */
.file-upload-btn {
  display: inline-block;
  padding: 6px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text2);
  transition: background 0.15s;
}
.file-upload-btn:hover { background: var(--surface3); color: var(--text); }

/* Image cropper */
.crop-box {
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 380px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.crop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  font-weight: 700;
  font-size: 1rem;
  border-bottom: 1px solid var(--border);
}
.crop-canvas-wrap {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 20px auto 0;
  cursor: grab;
}
.crop-canvas-wrap:active { cursor: grabbing; }
#crop-canvas {
  display: block;
  border-radius: 8px;
  background: #111;
}
.crop-circle-mask {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  clip-path: circle(50% at 50% 50%);
  /* Invert: show circle, darken outside */
  pointer-events: none;
}
/* Outer dark overlay with circular cutout */
.crop-canvas-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: radial-gradient(circle 160px at center, transparent 160px, rgba(0,0,0,0.6) 160px);
  pointer-events: none;
}
/* Circle border */
.crop-canvas-wrap::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  pointer-events: none;
  z-index: 2;
}
.crop-controls {
  padding: 14px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crop-hint {
  font-size: 0.72rem;
  color: var(--text3);
  text-align: center;
}
#crop-zoom {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.crop-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px 20px;
}
.crop-cancel, .crop-confirm {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}
.crop-cancel { background: var(--surface3); color: var(--text2); }
.crop-cancel:hover { opacity: 0.8; }
.crop-confirm { background: var(--accent); color: #fff; }
.crop-confirm:hover { opacity: 0.85; }

/* Toast */
.toast-confirm {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 20px;
  z-index: 9999;
  pointer-events: none;
  animation: fadeInUp 0.2s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── "Battle synced" toast stack (top-right) ─────────────────────────────────── */
.sync-toast-stack {
  position: fixed;
  top: calc(var(--header-h) + 16px);
  right: 20px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
}
.sync-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  cursor: pointer;
  animation: syncToastIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.3s, transform 0.3s;
}
.sync-toast:hover { border-color: var(--accent); }
.sync-toast-out { opacity: 0; transform: translateX(20px); }
.sync-toast-thumb {
  width: 64px; height: 40px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
}
.sync-toast-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sync-toast-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 1rem;
}
.sync-toast-body { min-width: 0; flex: 1; }
.sync-toast-kicker {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.sync-toast-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.sync-toast-sub {
  font-size: 0.72rem;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.sync-toast-close {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 0.7rem;
  cursor: pointer;
  align-self: flex-start;
}
.sync-toast-close:hover { color: var(--text); background: var(--surface); }
@keyframes syncToastIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Rapper stats row */
.rapper-stats-row {
  display: flex;
  gap: 2px;
  margin: 24px 0 32px;
  border-radius: 10px;
  overflow: hidden;
}
.rapper-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  background: var(--surface2);
  gap: 4px;
}
.rapper-stat:first-child { border-radius: 10px 0 0 10px; }
.rapper-stat:last-child  { border-radius: 0 10px 10px 0; }
.rapper-stat-val {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
}
.rapper-stat-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}

/* Battle detail page */
.battle-page { max-width: none; margin: 0 auto; }

/* YouTube-style wide layout: let the battle page fill the viewport */
body.page-battle #app {
  max-width: 2100px;
  padding: 24px 24px 60px;
}
body.page-battle .battle-page-rappers { font-size: 2rem; }
body.page-battle .bpm-title { font-size: 1.05rem; }
body.page-battle .battle-page-metaline { font-size: 0.92rem; }
body.page-battle .battle-transcript-section,
body.page-battle .battle-lower { max-width: 1280px; }
.battle-page-back { margin-bottom: 18px; }
.back-btn {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
  transition: color 0.15s;
}
.back-btn:hover { color: var(--text); }
/* The player owns the stage, with the recommendation rail beside it. The
   scorecard used to live in this column and was moved to a strip under the
   player: it opens collapsed, so it left a dead 340px gap next to the video.
   Recommendations earn the space the scorecard couldn't — the rail is always
   full, for guests as well as signed-in visitors. */
.battle-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: 20px;
  max-width: 2100px;
}
.battle-stage .battle-video-wrap {
  min-width: 0;
}
/* Rail collapses to nothing when the recommender has nothing to say, so the
   video reclaims the full width instead of sitting beside an empty box. The
   class goes on the stage rather than using :has(), so the column actually
   disappears everywhere and not just where :has() is supported. */
.battle-stage.rail-hidden { grid-template-columns: minmax(0, 1fr); }
.battle-stage.rail-hidden .battle-rail { display: none; }

.battle-video-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.battle-video-wrap iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* ── Recommendation rail ──────────────────────────────────────────────────────
   The rail is height-matched to the player and scrolls internally. Letting it
   run to its natural height instead would make the stage as tall as 18 rows
   and strand a column of dead space to the left of the video. The absolutely
   positioned inner layer is what keeps the rail out of the grid row's height
   calculation; below the stacking breakpoint it returns to normal flow. */
.battle-rail {
  position: relative;
  min-width: 0;
  min-height: 420px;
}
.battle-rail-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.rail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface2), var(--surface));
}
.rail-head-text { min-width: 0; flex: 1; }
.rail-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.rail-sub {
  margin-top: 3px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text3);
  line-height: 1.35;
}
.rail-shuffle {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface3);
  color: var(--text2);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, transform 0.3s;
}
.rail-shuffle:hover {
  color: var(--text);
  border-color: var(--accent);
  transform: rotate(180deg);
}

/* Fade at the scroll boundary: without it the row clipped by the bottom edge
   reads as a rendering glitch rather than as "keep scrolling". */
.rail-list-wrap {
  position: relative; flex: 1; display: flex;
  min-height: 0; min-width: 0;
}
.rail-list-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  background: linear-gradient(to top, var(--surface), transparent);
  pointer-events: none;
}
.rail-list {
  flex: 1;
  min-height: 0;
  /* min-width:auto is the flexbox default and resolves to min-content — the
     nowrap reason badge and the fixed-width thumbnail then push the column
     wider than the rail. Only masked on desktop, where overflow-y:auto happens
     to force it to 0 anyway; the stacked breakpoint turns that off. */
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 6px 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.rail-list::-webkit-scrollbar { width: 8px; }
.rail-list::-webkit-scrollbar-thumb {
  background: var(--border2); border-radius: 4px;
}
.rail-list::-webkit-scrollbar-track { background: transparent; }

.rail-row {
  position: relative;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.rail-row:hover { background: var(--surface2); }
.rail-item {
  display: flex;
  gap: 10px;
  padding: 7px;
  color: inherit;
  text-decoration: none;
}
.rail-thumb {
  position: relative;
  flex-shrink: 0;
  width: 152px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface3);
}
.rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-no-thumb {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; opacity: 0.4;
}
.rail-dur {
  position: absolute;
  right: 4px; bottom: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rail-play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.rail-row:hover .rail-play { opacity: 1; }

.rail-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(0,0,0,0.55);
  display: none;
}
.rail-progress.visible { display: block; }
.rail-progress-fill { display: block; height: 100%; width: 0; background: var(--accent); }
.rail-row.is-watched .rail-thumb img { opacity: 0.55; }

.rail-info { min-width: 0; flex: 1; padding-top: 1px; }
.rail-rappers {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.18;
  color: var(--text);
  /* Two lines then ellipsis: a 4-way tag team title must not push the reason
     line out of the row and break the rhythm of the list. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-vs { color: var(--text3); font-weight: 600; }
.rail-league {
  margin-top: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-stats {
  font-size: 0.72rem;
  color: var(--text3);
  font-weight: 500;
}
/* block + fit-content rather than inline-flex: text-overflow only ellipsises a
   block container, and league names here run to "The Cookout Battle - Battle
   Rap League", which otherwise gets chopped mid-word with no ellipsis. */
.rail-reason {
  margin-top: 5px;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--surface3);
  border-left: 2px solid var(--text3);
  font-size: 0.685rem;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The reason's colour encodes how personal the pick is — a rapper you follow
   reads hotter than a generic popular battle, at a glance and without
   re-reading the label. */
.rail-reason.rk-favourite_rapper {
  border-left-color: var(--gold); color: var(--gold); background: var(--gold-dim);
}
.rail-reason.rk-same_rapper,
.rail-reason.rk-taste_rapper {
  border-left-color: var(--accent); color: #f0a8ae; background: var(--accent-glow);
}
.rail-reason.rk-same_league,
.rail-reason.rk-taste_league { border-left-color: var(--border2); }
.rail-reason.rk-trending { border-left-color: var(--green); color: #86d9a4; }

.rail-save {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border: 0; border-radius: 4px;
  background: rgba(0,0,0,0.6);
  color: var(--text2);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.rail-row:hover .rail-save, .rail-save.saved { opacity: 1; }
.rail-save:hover { color: var(--gold); }
.rail-save.saved { color: var(--gold); }

.rail-foot {
  flex-shrink: 0;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text3);
  line-height: 1.45;
}
.rail-foot a { color: var(--accent); font-weight: 800; }

/* Skeleton — same row geometry as the real thing, so the list doesn't jump
   when the response lands. */
.rail-skel { padding: 7px; display: flex; gap: 10px; pointer-events: none; }
.rail-skel .rail-thumb { background: var(--surface2); }
.rail-skel-line {
  height: 9px;
  margin-bottom: 7px;
  border-radius: 3px;
  background: var(--surface2);
}
.rail-skel-line.w80 { width: 80%; }
.rail-skel-line.w60 { width: 60%; }
.rail-skel-line.w50 { width: 50%; }
.rail-skel .rail-thumb, .rail-skel-line { animation: railPulse 1.4s ease-in-out infinite; }
@keyframes railPulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.85; } }

/* Narrow desktops: shrink the rail before dropping it, so a 1366px laptop
   still gets recommendations beside the video rather than below the fold. */
@media (max-width: 1500px) { :root { --rail-w: 344px; } .rail-thumb { width: 132px; } }
@media (max-width: 1280px) { :root { --rail-w: 300px; } .rail-thumb { width: 116px; } }

/* Stacked: the rail becomes a normal section under the player. Absolute
   positioning and the internal scroll both come off — on a phone the page
   scroll is the right scroll. */
@media (max-width: 1080px) {
  .battle-stage { grid-template-columns: minmax(0, 1fr); }
  .battle-rail { min-height: 0; margin-top: 22px; }
  .battle-rail-inner { position: static; inset: auto; }
  .rail-list-wrap::after { display: none; }
  .rail-list { overflow-y: visible; max-height: none; padding-bottom: 6px; }
  .rail-thumb { width: 168px; }
}
@media (max-width: 560px) {
  .rail-thumb { width: 132px; }
  .rail-rappers { font-size: 0.95rem; }
}

.battle-page-info { margin-top: 22px; }

/* Loud mode — amplifier control bar under the (muted) video. */
.loud-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px 18px; margin-top: 14px; padding: 12px 18px;
  background: linear-gradient(135deg, #15161b, #0c0d11);
  border: 1px solid var(--border, #2a2b31); border-radius: 10px;
  color: #e8e8ec;
}
.loud-bar-title { font-weight: 800; letter-spacing: 0.02em; }
.loud-status { font-size: 0.9rem; opacity: 0.85; line-height: 1.4; }
.loud-status a { color: var(--accent, #ff5a3c); }
.loud-slider-wrap {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
}
.loud-slider-wrap label {
  font-size: 0.82rem; letter-spacing: 0.04em;
  text-transform: uppercase; opacity: 0.85; white-space: nowrap;
}
.loud-slider-wrap label span { color: var(--accent, #ff5a3c); font-weight: 800; }
.loud-slider-wrap input[type=range] {
  width: 200px; max-width: 46vw; accent-color: var(--accent, #ff5a3c);
}
.loud-mode-btn.saved { background: var(--accent, #ff5a3c); color: #fff; }

/* Download: icon only, no chrome — it sits beside the pill buttons without
   competing with them. */
.battle-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: none;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
}
.battle-download-btn:hover { color: var(--accent, #ff5a3c); }

/* While a download is in flight the icon button becomes a labelled pill. The
   transition is on the button itself so it grows out of the icon's footprint
   instead of the row snapping to a new width. */
.battle-download-btn {
  gap: 7px;
  white-space: nowrap;
  transition: color 0.15s, opacity 0.15s, background 0.25s ease,
              padding 0.25s ease, border-radius 0.25s ease;
}
.battle-download-btn.busy,
.battle-download-btn.done {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent, #ff5a3c);
  cursor: progress;
}
.battle-download-btn.done {
  color: #4caf50;
  cursor: default;
}
.dl-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  /* The label text changes as the percentage ticks up; fading each new value
     in keeps that from flickering. */
  animation: dl-fade-in 0.3s ease;
}
@keyframes dl-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Deliberately slow — 1.4s per turn reads as "working", where a fast spinner
   reads as "hurrying" on something that legitimately takes minutes. */
.dl-spinner {
  animation: dl-spin 1.4s linear infinite;
  flex: none;
}
@keyframes dl-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .battle-download-btn { transition: none; }
  .dl-spinner { animation: dl-pulse 1.8s ease-in-out infinite; }
  .dl-label { animation: none; }
}
@keyframes dl-pulse { 50% { opacity: 0.35; } }

/* Graceful fallback when a video won't embed (age-restricted, embedding
   disabled, removed, region-blocked). Replaces YouTube's bare error. */
.yt-unavailable {
  width: 100%; height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 0%, #1f1f22 0%, #0c0c0e 70%);
  text-align: center;
  padding: 24px;
}
.yt-unavailable-inner {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.yt-unavailable-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 1.6rem;
  padding-left: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.yt-unavailable-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--text);
}
.yt-unavailable-sub {
  color: var(--text3);
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 340px;
}
.yt-unavailable-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ff0000;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 11px 22px;
  border-radius: 6px;
  transition: filter 0.15s, transform 0.15s;
}
.yt-unavailable-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ── Round Scorecard ──────────────────────────────────────────────────────── */
/* Quiet by design: it sits beside the player, so it carries almost no chrome —
   one soft panel, hairline row rules, and colour reserved for the actual vote. */
.battle-scorecard-section { margin: 22px 0 4px; }
/* Flush under the player and the same width as it. */
body.page-battle .battle-scorecard-section { max-width: 1640px; margin: 10px 0 0; }

.bsc-wrap {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.022);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Header / collapse toggle */
.bsc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background 0.15s;
}
.bsc-toggle:hover { background: rgba(255,255,255,0.03); }
.bsc-toggle:hover .bsc-title { color: var(--text); }
.bsc-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  transition: color 0.15s;
}
.bsc-voters {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text3);
  white-space: nowrap;
}
/* Chevron drawn in CSS so it stays crisp and can rotate on collapse. */
.bsc-chevron {
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-right: 1.5px solid var(--text3);
  border-bottom: 1.5px solid var(--text3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.bsc-wrap.is-collapsed .bsc-chevron { transform: rotate(-45deg) translate(-2px, -2px); }
/* Nothing below it when folded, so the rule under the header would just be a
   stray line across the strip. */
.bsc-wrap.is-collapsed .bsc-toggle { border-bottom-color: transparent; }

/* Expanded body: rounds flow into as many columns as the width allows, so a
   five-round battle is two short columns rather than one long scroll. */
.bsc-collapse {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 4px 20px;
  padding: 8px 6px 10px;
}

/* One round per cell: number, picker, split bar. */
.bsc-round {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}
.bsc-rnum {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--text3);
  cursor: default;
}
.bsc-round-body { min-width: 0; }

/* Segmented picker — the two halves read as one control, not two buttons. */
.bsc-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255,255,255,0.035);
}
.bsc-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 10px;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bsc-pick-b {
  flex-direction: row-reverse;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.06);
}
.bsc-pick-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bsc-pick-b .bsc-pick-name { text-align: right; }
.bsc-pick-pct {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.bsc-pick:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.bsc-pick.is-picked {
  color: var(--text);
  font-weight: 800;
  background: rgba(230,57,70,0.16);
}
.bsc-pick.is-picked .bsc-pick-pct { color: var(--accent); }
.bsc-pick-b.is-picked { background: rgba(90,155,255,0.16); }
.bsc-pick-b.is-picked .bsc-pick-pct { color: #5a9bff; }

/* Split bar — a hairline, so it informs without shouting. */
.bsc-bar {
  display: flex;
  height: 3px;
  margin-top: 5px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.bsc-bar i { height: 100%; transition: width 0.45s cubic-bezier(0.4,0,0.2,1); }
.bsc-bar-a { background: var(--accent); }
.bsc-bar-b { background: #5a9bff; }
.bsc-bar.is-empty { background: rgba(255,255,255,0.04); }

.bsc-loading {
  padding: 12px 14px;
  font-size: 0.72rem;
  color: var(--text3);
}

.bsc-login-hint {
  grid-column: 1 / -1;
  padding: 8px 8px 2px;
  margin: 0;
  font-size: 0.72rem;
  color: var(--text3);
  text-align: center;
}
.bsc-login-hint a { color: var(--accent); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .bsc-bar i, .bsc-chevron { transition: none; }
}

/* Lower area: comments directly under the video (main), transcript as a
   compact sticky sidebar. Collapses to one column on narrow screens. */
.battle-lower {
  display: block;
  gap: 30px;
  align-items: start;
  margin-top: 28px;
}
.battle-main-col { min-width: 0; }
.battle-main-col .comments-section { max-width: none; margin: 0; }
@media (max-width: 980px) {
  .battle-lower { gap: 22px; }
}
.battle-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.battle-page-rappers {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  min-width: 0;
}
/* Compact single line: title + league + views + duration + date */
.battle-page-metaline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text3);
  font-weight: 600;
}
.bpm-title { color: var(--text2); font-weight: 600; letter-spacing: 0.01em; }
.bm-views::before { content: '👁 '; }
.battle-page-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.battle-page-actions-under {
  margin-top: 14px;
  flex-wrap: wrap;
}
.battle-save-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.15s;
}
.battle-save-btn:hover { border-color: var(--gold); color: var(--gold); }
.battle-save-btn.saved { color: var(--gold); border-color: rgba(245,200,66,0.4); background: var(--gold-dim); }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 36px;
  flex-wrap: wrap;
}
/* Page controls are <a href> when the list is one a crawler should walk, and
   <button> when it isn't (search, saved, watched). These rules have to hold
   both shapes: a button centres its label and sizes itself for free, an
   inline anchor does neither, and would arrive underlined. */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pg-btn:disabled { cursor: not-allowed; }
.pg-btn:hover:not(:disabled) { background: var(--surface2); border-color: var(--border2); color: var(--text); }
.pg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Loading / Empty ──────────────────────────────────────────────────────── */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  color: var(--text3);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  gap: 12px;
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 80px 20px; }
.empty-icon { font-size: 2.5rem; margin-bottom: 16px; }
.empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.empty-state p { color: var(--text3); font-size: 0.88rem; }
.empty-state a { color: var(--accent); }

/* ── Import banner ────────────────────────────────────────────────────────── */
.import-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(230,57,70,0.06);
  border: 1px solid rgba(230,57,70,0.15);
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text3);
}
.import-banner .spinner { border-color: rgba(230,57,70,0.2); border-top-color: var(--accent); }

/* ── Bottom Player ────────────────────────────────────────────────────────── */
.player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(12,11,10,0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  z-index: 400;
  display: flex;
  align-items: stretch;
  height: var(--player-h);
  transition: height 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.player.hidden { display: none; }
.player.expanded { height: var(--player-h-xl); }
.player-left {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  min-width: 260px;
  max-width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
}
.player-thumb {
  width: 52px; height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface2);
  flex-shrink: 0;
}
.player-thumb img { width: 100%; height: 100%; object-fit: cover; }
.player-info { min-width: 0; }
.player-rappers {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-meta {
  font-size: 0.72rem;
  color: var(--text3);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.player-center { flex: 1; overflow: hidden; position: relative; }
.player-iframe-wrap { width: 100%; height: 100%; }
.player-iframe-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.player:not(.expanded) .player-center { display: none; }
.player-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}
.player-btn {
  width: 32px; height: 32px;
  border-radius: 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.player-btn:hover { background: var(--surface3); color: var(--text); }
.player-close:hover { background: rgba(230,57,70,0.15); color: var(--accent); border-color: rgba(230,57,70,0.3); }

/* ── Auth Modal ───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  box-shadow: var(--shadow);
  overflow: hidden;
}
body.modal-open { overflow: hidden; }

/* ── Image Manager modal ─────────────────────────────────────────────── */
#image-manager-modal .modal-box {
  padding: 20px 20px 16px;
}
#img-mgr-candidates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 6px;
  align-content: start;
}
.img-mgr-card {
  position: relative;
  background: #0a0a0a;
  border: 2px solid var(--ring, transparent);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  display: flex;
  flex-direction: column;
}
.img-mgr-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.img-mgr-card.active { cursor: default; box-shadow: 0 0 0 1px #43a047 inset; }
.img-mgr-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  display: block;
  overflow: hidden;
}
.img-mgr-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.img-mgr-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: #43a047;
  color: #fff;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.img-mgr-reject {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(200,0,0,.85);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  font-size: 12px;
  line-height: 1;
}
.img-mgr-reject:hover { background: #e53935; }
.img-mgr-meta {
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
}
.img-mgr-conf { font-weight: 700; font-size: 13px; }
.img-mgr-src  { color: var(--text3); font-size: 10px; margin-top: 2px; }
.img-mgr-card-cta {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.img-mgr-card-cta.use:hover { filter: brightness(1.15); }
.img-mgr-card-cta.active {
  background: #43a047;
  cursor: default;
}
.auth-modal-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  width: 100%;
  max-width: 380px;
  padding: 36px 30px 30px;
  position: relative;
  box-shadow: var(--shadow);
}
.modal-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 5px;
  background: var(--surface2);
  color: var(--text3);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.modal-close-btn:hover { background: var(--surface3); color: var(--text); }
.modal-pane.hidden { display: none; }
.modal-logo { font-size: 1.8rem; margin-bottom: 12px; }
.auth-modal-box h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.modal-sub { color: var(--text3); font-size: 0.84rem; margin-bottom: 24px; font-weight: 500; }
.form-field { margin-bottom: 12px; }
.form-field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 10px 13px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--accent); }
.form-error {
  font-size: 0.8rem;
  color: var(--accent);
  min-height: 18px;
  margin-bottom: 8px;
  font-weight: 600;
}
.btn-submit {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: #fff;
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s;
  margin-bottom: 16px;
}
.btn-submit:hover { background: var(--accent-dim); }
.btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.modal-switch { font-size: 0.82rem; color: var(--text3); text-align: center; }

/* Google sign-in — empty (and so invisible) when GOOGLE_CLIENT_ID is unset. */
.google-signin-wrap:empty { display: none; }
.google-signin-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 0.9rem 0 0.2rem; }
.google-signin-divider { display: flex; align-items: center; gap: 0.6rem; width: 100%; color: var(--text3); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.google-signin-divider::before,
.google-signin-divider::after { content: ''; flex: 1; height: 1px; background: var(--border, #2a2a2a); }
.modal-switch a { color: var(--accent); font-weight: 700; }
.modal-switch a:hover { text-decoration: underline; }

/* ── League tag on battle page ───────────────────────────────────────────── */
.league-tag {
  border-radius: 4px;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px !important;
  color: #fff !important;
}

/* ── Watch progress bar ──────────────────────────────────────────────────── */
@keyframes progressIn {
  from { opacity: 0; transform: scaleX(0); transform-origin: left; }
  to   { opacity: 1; transform: scaleX(1); transform-origin: left; }
}
@keyframes watchedPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.card-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
}
.card-progress.visible {
  opacity: 1;
  animation: progressIn 0.35s ease forwards;
}
.card-progress-fill {
  height: 100%;
  background: var(--accent);
  width: var(--wp, 0%);
  transition: width 0.6s ease;
  box-shadow: 0 0 6px rgba(230,57,70,0.7);
}
/* dim the fill once fully watched */
.battle-card.watched .card-progress-fill {
  background: rgba(93,204,93,0.85);
  box-shadow: 0 0 5px rgba(93,204,93,0.4);
}

/* Watched checkmark badge */
.card-watched-badge {
  position: absolute;
  bottom: 7px; left: 7px;
  background: rgba(15,20,15,0.82);
  border: 1px solid rgba(93,204,93,0.5);
  color: #5dcc5d;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  z-index: 3;
  animation: watchedPop 0.38s cubic-bezier(0.34,1.56,0.64,1) forwards;
  backdrop-filter: blur(4px);
}
.card-watched-badge svg {
  width: 9px; height: 9px;
  stroke: #5dcc5d; stroke-width: 2.5;
  fill: none; flex-shrink: 0;
}

/* ── Star save animation ──────────────────────────────────────────────────── */
@keyframes starBurst {
  0%   { transform: translate(-50%,-50%) translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(0.2); opacity: 0; }
}
.star-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  color: var(--gold);
  text-shadow: 0 0 6px rgba(245,200,66,0.8);
  animation: starBurst 0.55s cubic-bezier(0.2,0.8,0.4,1) forwards;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.card-save-btn.saved, .battle-save-btn.saved {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(245,200,66,0.4);
}
.card-save-btn, .battle-save-btn {
  transition: color 0.2s, text-shadow 0.2s, border-color 0.2s, background 0.2s;
}

/* ── Rapper links ─────────────────────────────────────────────────────────── */
.rapper-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(240,236,230,0.25);
  transition: color 0.15s, text-decoration-color 0.15s;
}
.rapper-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.vs-sep { color: var(--text3); font-weight: 400; }
.amp-sep { color: var(--gold); font-weight: 700; }
/* 2v2 team entity inside a matchup — the whole duo is one clickable unit */
.team-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(245,200,66,0.35);
  transition: color 0.15s, text-decoration-color 0.15s;
}
.team-link:hover { color: var(--gold); text-decoration-color: var(--gold); }
.team-link:hover .amp-sep { color: var(--gold); }

/* ── Admin ────────────────────────────────────────────────────────────────── */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(230, 57, 70, 0.1);
  border-bottom: 1px solid rgba(230, 57, 70, 0.25);
  padding: 6px 24px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 90;
}
.admin-bar .admin-bar-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: adminPulse 1.4s ease-in-out infinite;
}
@keyframes adminPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.admin-bar .admin-bar-exit {
  margin-left: auto;
  background: rgba(230,57,70,0.15);
  border: 1px solid rgba(230,57,70,0.35);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}
.admin-bar .admin-bar-exit:hover { background: rgba(230,57,70,0.28); }
.admin-bar .admin-bar-dashboard {
  background: rgba(99,179,255,0.15);
  border-color: rgba(99,179,255,0.4);
  color: #63b3ff;
}
.admin-bar .admin-bar-dashboard:hover { background: rgba(99,179,255,0.25); }
body.admin-mode { padding-top: calc(var(--header-h) + 30px); }
.battle-card { position: relative; }
.rapper-card { position: relative; }
.bulk-battle-bar {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 195;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: #111;
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 4px 18px rgba(0,0,0,0.55);
}
.bulk-battle-bar.bulk-bar-visible {
  display: flex;
}
body.admin-mode .bulk-battle-bar {
  top: calc(var(--header-h) + 30px);
}
body.bulk-bar-active { padding-top: calc(var(--header-h) + 44px); }
body.admin-mode.bulk-bar-active { padding-top: calc(var(--header-h) + 74px); }
.bulk-action-btn,
.bulk-clear-btn {
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-weight: 700;
  cursor: pointer;
}
.bulk-action-btn {
  background: rgba(220,38,38,0.24);
  border-color: rgba(220,38,38,0.42);
}
.bulk-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.battle-select-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.2);
}
.battle-select-box {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.battle-card.bulk-selected,
.rapper-card.bulk-selected,
.league-card.bulk-selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Drag-select rectangle */
#drag-select-rect {
  position: fixed;
  border: 2px solid var(--accent);
  background: rgba(230, 57, 70, 0.10);
  border-radius: 4px;
  pointer-events: none;
  z-index: 9000;
  display: none;
}
/* Cards touched by the drag rect before release */
.battle-card.ds-hover {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}
.catalog-select-box {
  position: absolute;
  top: 8px; left: 8px;
  width: 15px;
  height: 15px;
  margin: 0;
  z-index: 20;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 5px;
  background: rgba(0,0,0,0.28);
  opacity: 0.35;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}
.rapper-card:hover .catalog-select-box,
.league-card:hover .catalog-select-box,
.catalog-select-box:focus-visible {
  opacity: 1;
  border-color: rgba(255,255,255,0.5);
}
.catalog-select-box:hover {
  opacity: 1;
  border-color: var(--accent);
}
.catalog-select-box:checked {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
}
.catalog-select-box:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rapper-card, .league-card { position: relative; }
.admin-overlay {
  position: absolute;
  top: 6px; right: 6px;
  display: flex;
  gap: 4px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s;
}
.battle-card:hover .admin-overlay,
.rapper-card:hover .admin-overlay,
.league-card:hover .admin-overlay { opacity: 1; }
.admin-btn {
  width: 24px; height: 24px;
  border-radius: 4px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  transition: background 0.15s;
}
.admin-rename {
  background: rgba(20,18,16,0.9);
  border-color: var(--border2);
  color: var(--text3);
}
.admin-rename:hover { color: var(--text); }
.admin-delete {
  background: rgba(180,20,20,0.82);
  border-color: rgba(230,57,70,0.4);
  color: #fff;
}
.admin-delete:hover { background: var(--accent); }

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.admin-modal-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 26px 26px 20px;
  width: 340px;
  box-shadow: var(--shadow);
}
.admin-modal-box h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.admin-modal-box input {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  margin-bottom: 14px;
}
.admin-modal-box input:focus { border-color: var(--accent); }
.admin-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.admin-modal-actions button {
  padding: 7px 16px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-modal-cancel {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text3);
}
.admin-modal-cancel:hover { color: var(--text); }
.admin-modal-confirm { background: var(--accent); color: #fff; border: none; }
.admin-modal-confirm:hover { background: var(--accent-dim); }

/* ── Search results ───────────────────────────────────────────────────────── */
.search-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .home-layout { grid-template-columns: 240px 1fr; }
}
@media (max-width: 860px) {
  .home-layout { grid-template-columns: 1fr; }
  .announcements-sidebar { display: none; }
}
@media (max-width: 860px) {
  .hero-title { font-size: 2.8rem; }
  .main-nav { display: none; }
  .header-auth { gap: 6px; }
  .btn-auth { padding: 5px 11px; font-size: 0.76rem; }
  .player-left { min-width: 200px; max-width: 220px; }
  .filter-bar { align-items: stretch; }
  .filter-group { width: 100%; }
  .league-select, .sort-select { width: 100%; margin-left: 0; }
  .battle-video-wrap { min-height: 0; }
  .battle-page-rappers { font-size: 1.3rem; }
  .battle-page-head { flex-wrap: wrap; gap: 12px; }
  .battle-page-actions { width: 100%; }
  .stats-row { flex-direction: column; }
  .stat-pill { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-pill:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
  #app { padding: 20px 14px 40px; }
  .header-inner { padding: 0 14px; gap: 10px; }
  .header-search { display: none; }
  .battle-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
  .player-left { min-width: 160px; max-width: 180px; }
  .player-thumb { width: 44px; height: 44px; }
  .hero-title { font-size: 2.2rem; }
}

/* ── Events ───────────────────────────────────────────────────────────────── */
.events-group {
  margin-bottom: 40px;
}
.events-group-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  margin-bottom: 14px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--text);
}
.events-group-count {
  font-size: 0.75rem;
  color: var(--text3);
  font-weight: 500;
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.event-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.event-card:hover {
  border-color: var(--border2);
  background: var(--surface3);
  transform: translateY(-1px);
}
.event-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.event-card-body {
  min-width: 0;
}
.event-card-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-card-count {
  font-size: 0.75rem;
  color: var(--text3);
  margin-top: 2px;
}
.detail-league-link {
  color: var(--accent);
  text-decoration: none;
}
.detail-league-link:hover { text-decoration: underline; }

/* ── Suggest Event button (battle page) ─────────────────────────────────── */
.suggest-event-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text3);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin-left: 8px;
}
.suggest-event-btn:hover { border-color: var(--accent); color: var(--accent); }

.event-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin-right: 4px;
}
.event-tag:hover { border-color: var(--accent); color: var(--text); }

.esug-or {
  text-align: center;
  color: var(--text3);
  font-size: 0.82rem;
  margin: 8px 0;
}

/* ── Admin Review Panel ───────────────────────────────────────────────────── */
.review-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.review-panel {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  width: 100%;
  max-width: 760px;
  padding: 28px 28px 40px;
  position: relative;
}
.review-panel-hd {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.review-panel-hd h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-right: auto;
}
.review-tabs {
  display: flex;
  gap: 6px;
}
.review-tab {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text3);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}
.review-tab.active, .review-tab:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.review-panel-body { display: flex; flex-direction: column; gap: 16px; }
.review-empty {
  text-align: center;
  color: var(--text3);
  padding: 40px 0;
  font-size: 0.95rem;
}

.review-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rv-type {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.rv-type-rapper { background: #3b82f620; color: #60a5fa; }
.rv-type-event  { background: #8b5cf620; color: #a78bfa; }
.rv-name { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.rv-date { color: var(--text3); font-size: 0.78rem; margin-left: auto; }

.rv-changes { display: flex; flex-direction: column; gap: 6px; }
.rv-change {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text2);
}
.rv-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  min-width: 72px;
  padding-top: 2px;
}
.rv-photo { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }

.rv-battle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.rv-thumb {
  width: 100px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.rv-battle-info { min-width: 0; }
.rv-battle-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}
.rv-battle-title:hover { color: var(--accent); }
.rv-event-label { font-size: 0.85rem; color: var(--text2); margin-bottom: 4px; }
.rv-note { font-size: 0.8rem; color: var(--text3); font-style: italic; }
.rv-by { font-size: 0.75rem; color: var(--text3); margin-top: 4px; }

.rv-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rv-approve, .rv-reject {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}
.rv-approve { background: var(--green); color: #fff; }
.rv-reject  { background: var(--surface3); color: var(--text3); border: 1px solid var(--border2); }
.rv-approve:hover { opacity: 0.85; }
.rv-reject:hover  { color: var(--accent); border-color: var(--accent); }

.rv-status {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
}
.rv-status-pending  { background: #f59e0b20; color: #f59e0b; }
.rv-status-approved { background: #22c55e20; color: #22c55e; }
.rv-status-rejected { background: #ef444420; color: #ef4444; }

/* ── Transcript Panel ──────────────────────────────────────────────────────── */
.transcript-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 560px;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: transform 0.2s ease;
}
.transcript-panel.hidden { display: none; }

.transcript-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.transcript-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text2);
  flex-shrink: 0;
}
.transcript-admin-tools {
  display: flex;
  gap: 4px;
  flex: 1;
}
.tr-mode-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tr-mode-btn:hover { color: var(--text1); border-color: var(--text3); }
.tr-mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.transcript-close-btn {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  flex-shrink: 0;
}
.transcript-close-btn:hover { color: var(--text1); }

/* Split content area: transcript list + annotation sidebar */
.transcript-panel-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.transcript-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  min-width: 0;
}
.transcript-ann-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px 10px;
  background: var(--bg1);
}
.transcript-ann-sidebar-hint {
  font-size: 0.74rem;
  color: var(--text3);
  line-height: 1.5;
  text-align: center;
  padding: 16px 4px;
}
.tr-ann-sample {
  background: rgba(251,191,36,0.25);
  border-bottom: 2px solid #fbbf24;
  color: #fbbf24;
  border-radius: 2px;
  padding: 0 2px;
}
.transcript-ann-note {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 8px;
  padding: 10px;
}
.transcript-ann-note-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.transcript-ann-note-text {
  font-size: 0.8rem;
  color: var(--text1);
  line-height: 1.5;
  white-space: pre-wrap;
}
.tr-ann-delete-btn {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  cursor: pointer;
}
.tr-ann-delete-btn:hover { background: var(--accent); color: #fff; }

.transcript-seg {
  display: flex;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
  align-items: flex-start;
}
.transcript-seg:hover { background: var(--bg3); }

.transcript-ts {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 2px;
  min-width: 38px;
}
.transcript-text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text1);
}

/* Annotated highlight (Genius-style gold underline) */
.tr-ann {
  background: rgba(251,191,36,0.18);
  border-bottom: 2px solid #fbbf24;
  border-radius: 2px;
  padding: 0 1px;
  cursor: pointer;
  transition: background 0.15s;
}
.tr-ann:hover { background: rgba(251,191,36,0.35); }

/* Annotate mode: cursor hint + selection highlight */
.transcript-seg.ann-mode .transcript-text { cursor: text; user-select: text; }
.transcript-seg.has-ann { border-left: 2px solid rgba(251,191,36,0.5); padding-left: 12px; }

/* Edit mode */
.transcript-seg-edit { cursor: default; align-items: flex-start; flex-wrap: wrap; }
.transcript-edit-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.transcript-edit-area {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text1);
  font-size: 0.84rem;
  line-height: 1.45;
  padding: 6px 8px;
  resize: vertical;
  font-family: inherit;
}
.transcript-edit-area:focus { outline: none; border-color: var(--accent); }
.tr-save-btn {
  align-self: flex-end;
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}
.tr-save-btn:hover { opacity: 0.85; }
.tr-save-btn:disabled { opacity: 0.5; cursor: default; }
.tr-cancel-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.76rem;
  cursor: pointer;
}

/* Annotation popup (floats over page) */
.tr-ann-popup {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 12px;
  min-width: 260px;
  max-width: 340px;
}
.tr-ann-popup-label {
  font-size: 0.75rem;
  color: var(--text3);
  margin-bottom: 6px;
  font-style: normal;
}
.tr-ann-popup-label em { color: #fbbf24; font-style: italic; }
.tr-ann-popup-textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text1);
  font-size: 0.83rem;
  padding: 7px 9px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
}
.tr-ann-popup-textarea:focus { outline: none; border-color: #fbbf24; }
.tr-ann-popup-actions { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }

.transcript-loading,
.transcript-empty {
  padding: 24px 16px;
  color: var(--text3);
  font-size: 0.85rem;
  text-align: center;
}
.transcript-empty p { margin: 0 0 12px; }

.transcript-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.status-pending    { background: #f59e0b20; color: #f59e0b; }
.status-processing { background: #3b82f620; color: #3b82f6; }

.btn-transcript-gen {
  display: inline-block;
  padding: 7px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}
.btn-transcript-gen:hover { opacity: 0.85; }
.btn-transcript-gen.outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
}

/* Transcript button active state */
.player-btn.active { color: var(--accent); }

/* ── Transcript search hits ────────────────────────────────────────────────── */
.transcript-section-label { margin-top: 28px; }

.transcript-hits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.transcript-hit {
  display: flex;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  align-items: flex-start;
}
.transcript-hit:hover {
  border-color: var(--accent);
  background: var(--bg3);
}

.th-thumb {
  width: 100px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.th-body { flex: 1; min-width: 0; }
.th-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-ts {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 5px;
}
.th-quote {
  font-size: 0.80rem;
  color: var(--text2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
mark.hl {
  background: rgba(255, 200, 0, 0.28);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  font-weight: 600;
}

/* Player layout with transcript panel open */
#player { position: relative; }
@media (max-width: 700px) {
  .transcript-panel { width: 100%; top: auto; height: 55vh; border-left: none; border-top: 1px solid var(--border); }
  .transcript-ann-sidebar { width: 160px; }
}

/* In-player Generate Transcript button */
.player-generate-btn {
  padding: 6px 12px; margin-right: 6px;
  font-size: 0.82rem; font-weight: 700;
  background: var(--accent, #ff3b3b); color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  white-space: nowrap; transition: background 0.15s, transform 0.1s;
}
.player-generate-btn:hover:not(:disabled) { background: #ff5252; }
.player-generate-btn:active:not(:disabled) { transform: scale(0.97); }
.player-generate-btn:disabled {
  background: rgba(255,255,255,0.08); color: var(--text-dim, #999);
  cursor: default;
}
.transcript-empty .muted { color: var(--text-dim, #888); font-size: 0.85rem; }

/* ── Battle detail page: transcript section ─────────────────────────────── */
.battle-transcript-section {
  margin-top: 2rem; padding: 1.5rem;
  background: var(--bg-elevated, #161616);
  border: 1px solid var(--border, #262626); border-radius: 12px;
}
.bts-loading { color: var(--text-dim, #888); font-size: 0.95rem; }
.bts-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.bts-header h3 {
  margin: 0; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 1.35rem; text-transform: uppercase;
  letter-spacing: 0.02em;
}
.bts-meta { color: var(--text-dim, #888); font-size: 0.85rem; }

.bts-empty {
  text-align: center; padding: 1.5rem 0.5rem;
}
.bts-empty p { margin: 0.4rem 0; color: var(--text, #ddd); }
.bts-empty .muted { color: var(--text-dim, #888); font-size: 0.88rem; max-width: 480px; margin: 0.4rem auto; }
.bts-empty .muted a { color: var(--accent, #ff3b3b); text-decoration: none; font-weight: 600; }
.bts-empty .muted a:hover { text-decoration: underline; }

.bts-generate-btn {
  display: inline-block; margin-top: 0.75rem;
  padding: 0.7rem 1.4rem; font-size: 0.95rem; font-weight: 700;
  background: var(--accent, #ff3b3b); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.bts-generate-btn:hover { background: #ff5252; }
.bts-generate-btn:active { transform: scale(0.97); }

.bts-body {
  max-height: 420px; overflow-y: auto;
  border-top: 1px solid var(--border, #262626); padding-top: 0.5rem;
}
.bts-seg {
  display: flex; gap: 0.75rem; padding: 0.5rem 0.4rem;
  cursor: pointer; border-radius: 4px; line-height: 1.5;
  transition: background 0.12s;
}
.bts-seg:hover { background: rgba(255,59,59,0.08); }
.bts-ts {
  flex-shrink: 0; font-size: 0.82rem; color: var(--accent, #ff3b3b);
  font-weight: 700; font-variant-numeric: tabular-nums; width: 52px;
  padding-top: 1px;
}
.bts-text { color: var(--text, #e8e8e8); font-size: 0.95rem; }

/* ── Transcript collapse toggle ───────────────────────────────────────────── */
.bts-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
}
.bts-toggle h3 { margin: 0; }
.bts-toggle:hover h3 { color: var(--accent, #ff3b3b); }
.bts-chevron {
  color: var(--accent, #ff3b3b);
  font-size: 0.85rem;
  transition: transform 0.15s;
  display: inline-block;
  width: 14px;
}

/* ── Transcript admin tools (View / Edit / Annotate) ──────────────────────── */
.bts-tools { display: flex; gap: 0.4rem; }
.bts-mode-btn {
  background: var(--bg3, #1e1e1e);
  border: 1px solid var(--border, #333);
  color: var(--text-dim, #999);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.bts-mode-btn:hover { color: #fff; border-color: #555; }
.bts-mode-btn.active { background: var(--accent, #ff3b3b); border-color: var(--accent, #ff3b3b); color: #fff; }

/* ── Two-column layout: transcript + annotation sidebar ───────────────────── */
.bts-layout { display: flex; gap: 1rem; align-items: flex-start; }
.bts-layout .bts-body { flex: 1; min-width: 0; max-height: 520px; }
.bts-ann-sidebar {
  width: 260px;
  flex-shrink: 0;
  align-self: stretch;
  max-height: 520px;
  overflow-y: auto;
  border-left: 1px solid var(--border, #262626);
  padding: 0.5rem 0 0.5rem 1rem;
  position: sticky;
  top: 0;
}
.bts-ann-hint {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}
.bts-ann-hint span {
  display: block;
  margin-top: 0.5rem;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-dim, #999);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
}
.bts-ann-sample {
  background: rgba(251,191,36,0.22);
  border-bottom: 2px solid #fbbf24;
  color: #fbbf24;
  border-radius: 2px;
  padding: 0 2px;
}
.bts-ann-note {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 10px;
  padding: 0.85rem;
}
.bts-ann-note-label {
  font-size: 0.72rem; font-weight: 800; color: #fbbf24;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem;
}
.bts-ann-note-text {
  font-size: 0.9rem; color: var(--text, #e8e8e8);
  line-height: 1.55; white-space: pre-wrap;
}
.bts-ann-delete-btn {
  margin-top: 0.7rem; background: none;
  border: 1px solid var(--accent, #ff3b3b); color: var(--accent, #ff3b3b);
  border-radius: 5px; padding: 0.25rem 0.7rem; font-size: 0.76rem; cursor: pointer;
}
.bts-ann-delete-btn:hover { background: var(--accent, #ff3b3b); color: #fff; }

/* ── Annotated highlight in transcript text ───────────────────────────────── */
.bts-ann {
  background: rgba(251,191,36,0.18);
  border-bottom: 2px solid #fbbf24;
  border-radius: 2px;
  padding: 0 1px;
  cursor: pointer;
  transition: background 0.15s;
}
.bts-ann:hover { background: rgba(251,191,36,0.38); }
.bts-seg.has-ann { border-left: 2px solid rgba(251,191,36,0.5); padding-left: 0.5rem; }
.bts-seg.ann-mode { cursor: default; }
.bts-seg.ann-mode .bts-text { cursor: text; user-select: text; }
.bts-ts { cursor: pointer; }

/* ── Edit mode ────────────────────────────────────────────────────────────── */
.bts-seg-edit { cursor: default; align-items: flex-start; }
.bts-edit-wrap { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.bts-edit-area {
  width: 100%; box-sizing: border-box;
  background: var(--bg3, #1a1a1a); border: 1px solid var(--border, #333);
  border-radius: 6px; color: var(--text, #e8e8e8);
  font-size: 0.95rem; line-height: 1.5; padding: 0.5rem 0.6rem;
  resize: vertical; font-family: inherit;
}
.bts-edit-area:focus { outline: none; border-color: var(--accent, #ff3b3b); }
.bts-save-btn {
  align-self: flex-end; background: var(--accent, #ff3b3b); border: none; color: #fff;
  border-radius: 6px; padding: 0.35rem 1rem; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.bts-save-btn:hover { opacity: 0.88; }
.bts-save-btn:disabled { opacity: 0.5; cursor: default; }
.bts-cancel-btn {
  background: var(--bg3, #1e1e1e); border: 1px solid var(--border, #333);
  color: var(--text-dim, #999); border-radius: 6px; padding: 0.35rem 0.8rem;
  font-size: 0.8rem; cursor: pointer;
}

/* ── Annotation popup ─────────────────────────────────────────────────────── */
.bts-ann-popup {
  background: var(--bg-elevated, #161616);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  padding: 0.85rem;
  width: 340px;
  max-width: 92vw;
}
.bts-ann-popup-label { font-size: 0.8rem; color: var(--text-dim, #999); margin-bottom: 0.5rem; }
.bts-ann-popup-label em { color: #fbbf24; font-style: italic; }
.bts-ann-popup-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg3, #1a1a1a); border: 1px solid var(--border, #333);
  border-radius: 6px; color: var(--text, #e8e8e8);
  font-size: 0.9rem; padding: 0.5rem 0.6rem; resize: vertical;
  font-family: inherit; line-height: 1.45;
}
.bts-ann-popup-textarea:focus { outline: none; border-color: #fbbf24; }
.bts-ann-popup-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; justify-content: flex-end; }

@media (max-width: 720px) {
  .bts-layout { flex-direction: column; }
  .bts-ann-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border, #262626); padding: 0.8rem 0 0; position: static; max-height: none; }
}


/* ── Rapper Review Queue ──────────────────────────────────────────────────── */
.rr-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 3000; display: flex; align-items: stretch; justify-content: flex-end;
}
.rr-panel {
  background: var(--card, #1a1917); width: min(780px, 100vw);
  display: flex; flex-direction: column; height: 100vh;
  border-left: 1px solid var(--border, #333);
}
.rr-hd {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border, #333); flex-shrink: 0;
}
.rr-hd h2 { font-size: 1.05rem; font-weight: 700; color: #e8e8e8; white-space: nowrap; }
.rr-hd-left { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
.rr-count { font-size: 0.8rem; color: #888; white-space: nowrap; }
.rr-filters { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; justify-content: flex-start; }
.rr-filter-btn {
  padding: 3px 9px; font-size: 0.76rem; border-radius: 3px;
  background: #2a2927; border: 1px solid #444; color: #bbb; cursor: pointer;
  transition: background .15s;
}
.rr-filter-btn:hover { background: #3a3835; color: #fff; }
.rr-filter-btn.active { background: var(--accent,#ff3b3b); border-color: var(--accent,#ff3b3b); color: #fff; }
.rr-body { flex: 1; overflow-y: auto; padding: 6px 0; }
.rr-row {
  display: grid;
  grid-template-columns: 1fr 64px auto auto;
  align-items: center; gap: 8px;
  padding: 7px 16px; border-bottom: 1px solid #1f1e1c;
  transition: background .1s;
}
.rr-row:hover { background: #222120; }
.rr-name { font-size: 0.9rem; color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-meta { font-size: 0.75rem; color: #666; text-align: right; white-space: nowrap; }
.rr-flags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rr-flag {
  font-size: 0.68rem; padding: 1px 5px; border-radius: 3px;
  font-weight: 600; letter-spacing: .3px; white-space: nowrap;
}
.rr-flag-bad  { background: #4a1010; color: #ff7070; border: 1px solid #7a2020; }
.rr-flag-warn { background: #3a2e0a; color: #d4a017; border: 1px solid #5a4a10; }
.rr-flag-num  { background: #0e2a3a; color: #5bc4f0; border: 1px solid #1a4a6a; }
.rr-actions { display: flex; gap: 4px; }
.rr-btn {
  padding: 3px 8px; font-size: 0.74rem; border-radius: 3px;
  border: 1px solid; cursor: pointer; font-weight: 600; transition: opacity .15s;
}
.rr-btn:hover { opacity: .8; }
.rr-approve { background: #0d2a0d; border-color: #1e5a1e; color: #5dcc5d; }
.rr-rename  { background: #1a2a3a; border-color: #2a4a6a; color: #6aaddd; }
.rr-delete  { background: #2a0d0d; border-color: #5a1a1a; color: #e05050; }
.rr-empty { padding: 40px 20px; text-align: center; color: #555; font-size: 0.9rem; }
.rr-pagination {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--border,#333); flex-shrink: 0;
}
.rr-page-btn {
  padding: 5px 14px; font-size: 0.82rem; border-radius: 4px;
  background: #2a2927; border: 1px solid #444; color: #ccc; cursor: pointer;
}
.rr-page-btn:hover { background: #3a3835; }
.rr-page-info { font-size: 0.82rem; color: #666; }

/* ════════════════════════════════════════════════════════════════════════════
   UI overhaul — 2026-05-25
   Rapper rivalry enrichment + crafted micro-interactions.
   Additive only: enhances the existing dark/red editorial language.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Primary league pill (rapper hero) ─────────────────────────────────────── */
.rapper-primary-row { margin-top: 12px; }
.primary-league-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--surface2), var(--surface3));
  border: 1px solid var(--border2);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  transition: border-color 0.18s, transform 0.18s, color 0.18s;
}
.primary-league-pill:hover {
  border-color: var(--accent-dim);
  color: var(--text);
  transform: translateY(-1px);
}
.primary-league-pill .plp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  flex-shrink: 0;
}
.primary-league-pill .plp-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.primary-league-pill .plp-count {
  padding-left: 9px;
  margin-left: 2px;
  border-left: 1px solid var(--border2);
  color: var(--text3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── "Most Faced" — single top opponent card ────────────────────────────────── */
.opp-top-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.opp-top-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.opp-top-card:hover { border-color: var(--border2); background: var(--surface2); transform: translateY(-2px); }
.opp-top-card:hover::before { transform: scaleY(1); }
.opp-top-card:active { transform: translateY(0); }
.opp-top-card .opp-rank { color: var(--gold); }
.opp-top-card:hover .opp-arrow { opacity: 1; transform: translateX(0); color: var(--accent); }
.opp-meta { font-size: 0.74rem; color: var(--text3); font-weight: 600; margin-top: 3px; }
.opp-arrow {
  flex-shrink: 0; color: var(--text3); font-size: 1.1rem;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.16s, transform 0.16s, color 0.16s;
}

/* ── "Most Faced" — collapsible ranked list with proportional battle bars ───── */
.rivalry-hd { margin-top: 4px; }
.opp-details {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.opp-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
.opp-summary::-webkit-details-marker { display: none; }
.opp-summary:hover { background: var(--surface2); }
.opp-summary-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.opp-summary-hint {
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-chevron {
  flex-shrink: 0;
  color: var(--text3);
  font-size: 0.9rem;
  transition: transform 0.2s ease, color 0.15s;
}
.opp-details[open] .opp-chevron { transform: rotate(180deg); color: var(--accent); }
.opp-details[open] .opp-summary { border-bottom: 1px solid var(--border); }
.opp-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
}
.opp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}
.opp-row:hover { background: var(--surface2); }
.opp-row:active { background: var(--surface3); }
.opp-rank {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text3);
  min-width: 26px;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.opp-row:nth-child(1) .opp-rank { color: var(--gold); }
.opp-row:hover .opp-rank { color: var(--accent); }
.opp-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.opp-top { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.opp-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-leagues {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  padding: 2px 7px;
  border-radius: 999px;
}
.opp-bar-track {
  display: block;
  height: 5px;
  width: 100%;
  background: var(--surface3);
  border-radius: 999px;
  overflow: hidden;
}
.opp-bar {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transform-origin: left;
}
/* Bars fill in each time the dropdown is opened */
.opp-details[open] .opp-bar {
  animation: oppBarFill 0.65s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: calc(var(--opp-i, 0) * 0.04s);
}
@keyframes oppBarFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.opp-num { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.opp-num-v {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--text);
}
.opp-num-l {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 4px;
}

/* ── Crafted micro-interactions (site-wide, additive) ──────────────────────── */
/* Section headings get a short accent rule — editorial signature */
.section-hd h2 { position: relative; padding-left: 14px; }
.section-hd h2::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 0.92em;
  border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent-dim));
}

/* Tactile press feedback on the primary buttons + cards */
.btn-submit:active { transform: translateY(1px); }
.battle-card:active { transform: translateY(-2px) scale(0.997); }
.rapper-card:active { transform: translateX(1px); }
.stat-pill { transition: transform 0.18s, color 0.18s; }
.stat-pill:hover { transform: translateY(-1px); }

/* Accessible, on-brand focus ring (keyboard nav) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.opp-row:focus-visible,
.primary-league-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Scroll-reveal (self-contained: classes only added by JS) ───────────────── */
.reveal-init {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s cubic-bezier(0.22,1,0.36,1),
    transform 0.55s cubic-bezier(0.22,1,0.36,1);
  transition-delay: calc(var(--reveal-i, 0) * 0.05s);
  will-change: opacity, transform;
}
.reveal-init.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* Branded text selection + custom scrollbar — small human details */
::selection { background: var(--accent); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* Gentle fade-in for each page swap (the JS reveal handles per-item stagger) */
#app { animation: appFade 0.32s ease both; }
@keyframes appFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #app { animation: none; }
  .reveal-init { opacity: 1; transform: none; transition: none; }
  .opp-details[open] .opp-bar { animation: none; }
  .opp-chevron { transition: none; }
}

/* ── Team (2v2 duo) page ─────────────────────────────────────────────────────── */
.team-hero {
  padding: 30px 0 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.team-kicker {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.team-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  line-height: 1.02;
}
.team-title .team-amp { color: var(--gold); }
.team-sub {
  color: var(--text3);
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.team-members {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.team-members-amp {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gold);
}
.team-member {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.16s, transform 0.16s, background 0.16s;
}
.team-member:hover {
  border-color: var(--border2);
  background: var(--surface2);
  transform: translateY(-2px);
}
.team-member-av { display: flex; flex-shrink: 0; }
.team-member-av svg, .team-member-av img { border-radius: 50%; }
.team-member-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.team-member-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.1;
}
.team-member-sub { font-size: 0.7rem; color: var(--text3); font-weight: 600; }

@media (max-width: 600px) {
  .team-title { font-size: 1.9rem; }
  .team-members { gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Comments — battle page discussion (threaded, likes, moderation)
   ════════════════════════════════════════════════════════════════════════════ */
.comments-section { max-width: 860px; margin: 32px auto 0; }
.cm-loading, .cm-empty {
  color: var(--text3); font-size: 0.9rem; padding: 18px 0;
}
.cm-header {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 18px;
}
.cm-header h3 {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.cm-sort { display: flex; gap: 4px; }
.cm-sort-btn {
  font-size: 0.78rem; font-weight: 700; color: var(--text3);
  padding: 5px 12px; border-radius: 999px; transition: color 0.15s, background 0.15s;
}
.cm-sort-btn:hover { color: var(--text); }
.cm-sort-btn.active { color: var(--text); background: var(--surface2); }

/* Avatar */
.cm-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.9rem;
  color: #fff; text-transform: uppercase; user-select: none;
}

/* Composer */
.cm-composer { display: flex; gap: 12px; margin-bottom: 26px; }
.cm-composer-main { flex: 1; min-width: 0; }
.cm-textarea {
  width: 100%; resize: none; overflow: hidden;
  background: transparent; color: var(--text);
  border: none; border-bottom: 1px solid var(--border2);
  padding: 6px 2px; font-size: 0.92rem; line-height: 1.5;
  transition: border-color 0.15s;
}
.cm-textarea:focus { outline: none; border-bottom-color: var(--accent); }
.cm-composer-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; justify-content: flex-end;
}
.cm-hint { margin-right: auto; font-size: 0.72rem; color: var(--text3); }
.cm-btn {
  font-size: 0.82rem; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.cm-cancel { color: var(--text2); }
.cm-cancel:hover { background: var(--surface2); }
.cm-submit { background: var(--accent); color: #fff; }
.cm-submit:hover { background: var(--accent-dim); }
.cm-login-prompt {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 24px;
  color: var(--text2); font-size: 0.9rem;
}
.cm-login-prompt a { color: var(--accent); font-weight: 700; }

/* List + items */
.cm-list { display: flex; flex-direction: column; gap: 20px; }
.cm-item { display: flex; gap: 12px; }
.cm-body-wrap { flex: 1; min-width: 0; }
.cm-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-author { font-size: 0.84rem; font-weight: 700; }
.cm-badge {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--accent); border: 1px solid var(--accent-dim);
  padding: 1px 6px; border-radius: 999px;
}
.cm-time, .cm-edited { font-size: 0.74rem; color: var(--text3); }
.cm-text {
  margin-top: 3px; font-size: 0.92rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.cm-removed { color: var(--text3); font-style: italic; font-size: 0.88rem; padding: 4px 0; }

/* Actions */
.cm-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cm-like {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--text3);
  padding: 4px 8px; border-radius: 999px; transition: color 0.15s, background 0.15s;
}
.cm-like:hover { background: var(--surface2); color: var(--text); }
.cm-like .cm-like-ico { font-size: 0.95rem; line-height: 1; }
.cm-like.liked { color: var(--accent); }
.cm-like.liked .cm-like-ico { transform: scale(1.05); }
.cm-act {
  font-size: 0.78rem; font-weight: 700; color: var(--text3);
  padding: 4px 8px; border-radius: 999px; transition: color 0.15s, background 0.15s;
}
.cm-act:hover { background: var(--surface2); color: var(--text); }
.cm-act-del:hover { color: var(--accent); }

/* Reply box + replies */
.cm-reply-box { margin-top: 10px; }
.cm-toggle-replies {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 0.8rem; font-weight: 700; color: var(--accent);
  padding: 5px 10px; border-radius: 999px; transition: background 0.15s;
}
.cm-toggle-replies:hover { background: var(--accent-glow); }
.cm-tr-ico { transition: transform 0.2s; }
.cm-toggle-replies.open .cm-tr-ico { transform: rotate(180deg); }
.cm-replies { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.cm-reply .cm-avatar { width: 30px; height: 30px; font-size: 0.75rem; }

.cm-more { margin-top: 22px; }
.cm-loadmore {
  font-size: 0.82rem; font-weight: 700; color: var(--accent);
  padding: 9px 18px; border-radius: 999px; transition: background 0.15s;
}
.cm-loadmore:hover { background: var(--accent-glow); }

.cm-reply-box.hidden, .cm-replies.hidden { display: none; }

/* Clickable league tag on the battle page */
.league-tag-link { cursor: pointer; transition: filter 0.15s, transform 0.15s; }
.league-tag-link:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* Tag-team result card in search */
.team-result-av {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold-dim); color: var(--gold);
  font-family: var(--font-display); font-weight: 900; font-size: 1.1rem;
  flex-shrink: 0;
}
.team-result-card:hover { border-color: var(--gold); }

@media (max-width: 600px) {
  .comments-section { margin-top: 24px; }
  .cm-hint { display: none; }
}

/* ── Account settings page ──────────────────────────────────────────────────── */
.settings-page { max-width: 640px; margin: 0 auto; }
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.settings-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.settings-avatar-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.user-av-initials {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display); font-weight: 900; color: #fff;
  text-transform: uppercase; flex-shrink: 0;
}
.user-av-img { display: block; flex-shrink: 0; }
.settings-avatar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.settings-upload-btn { cursor: pointer; display: inline-flex; }
.settings-hint { font-size: 0.74rem; color: var(--text3); }
.settings-card .form-field { margin-bottom: 16px; }
.settings-card .form-field label {
  display: block; font-size: 0.78rem; font-weight: 700;
  color: var(--text2); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.settings-card .form-field input {
  width: 100%; padding: 10px 12px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-size: 0.92rem; transition: border-color 0.15s;
}
.settings-card .form-field input:focus { outline: none; border-color: var(--accent); }
.settings-card .form-error { color: var(--accent); font-size: 0.82rem; margin-bottom: 12px; min-height: 1em; }

.team-admin-row { margin-top: 16px; }
.page-back { margin-bottom: 16px; }

/* ── Suggest Page ──────────────────────────────────────────────────────────── */
.suggest-page {
  max-width: 1060px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}
.suggest-page-hd {
  margin-bottom: 36px;
}
.suggest-page-hd h1 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.suggest-page-hd h1 span { color: var(--accent); }
.suggest-page-hd p {
  color: var(--text2);
  font-size: 0.93rem;
  max-width: 540px;
}
.suggest-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .suggest-cards { grid-template-columns: 1fr; }
}
.suggest-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 26px 22px 22px;
}
.suggest-card-icon {
  font-size: 1.9rem;
  margin-bottom: 10px;
  line-height: 1;
}
.suggest-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.suggest-card-desc {
  color: var(--text2);
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.suggest-card .btn-submit {
  margin-top: 4px;
  margin-bottom: 0;
}

/* ── In-page search bar ────────────────────────────────────────────────────── */
.page-search-wrap {
  display: flex;
  gap: 0;
  margin: 0 0 22px;
  max-width: 500px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  overflow: hidden;
}
.page-search-wrap:focus-within {
  border-color: var(--accent);
}
.page-search-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 14px;
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  min-width: 0;
}
.page-search-wrap input::placeholder { color: var(--text3, #666); }
.page-search-wrap input:focus { outline: none; }
.page-search-wrap button {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text2);
  padding: 0 14px;
  cursor: pointer;
  font-size: 1rem;
  transition: color 0.15s;
}
.page-search-wrap button:hover { color: var(--accent); }

/* ── Auth pages (verify-email, forgot-password, reset-password) ── */
.auth-page-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - 80px);
  padding: 40px 16px;
}
.auth-page-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.auth-page-icon { font-size: 2.5rem; margin-bottom: 12px; }
.auth-page-box h2 { margin: 0 0 10px; font-size: 1.5rem; }
.auth-page-box p  { color: var(--text2); margin: 0 0 20px; line-height: 1.5; }
.auth-page-box .form-field { text-align: left; margin-bottom: 14px; }
.auth-page-box .btn-submit { width: 100%; margin-top: 6px; }

/* Off-screen until focused, then pinned over the header. Not `display:none` —
   that would remove it from the tab order entirely, defeating the point. */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 10000;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }

#site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px 40px;
  color: var(--text2);
  font-size: 0.85rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}
/* Selectable so the address can be copied even where mailto: goes nowhere. */
.footer-contact { user-select: text; }
.footer-legal {
  color: var(--text3);
  font-size: 0.78rem;
  text-align: center;
  max-width: 40rem;
}
#site-footer a {
  color: var(--text2);
  text-decoration: none;
}
#site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}
/* Discovery pages */
.discovery-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: -18px 0 26px;
}
.discovery-strip a,
.discovery-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.discovery-strip a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
}
.discovery-strip a:hover,
.discovery-tab:hover,
.discovery-tab.active {
  border-color: var(--accent);
  background: var(--surface2);
  transform: translateY(-1px);
}
.discovery-strip span,
.discovery-kicker {
  color: var(--text3);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.discovery-strip strong {
  font-size: 1rem;
}
.discovery-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.discovery-hero h1 {
  margin: 4px 0;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.95;
  text-transform: uppercase;
}
.discovery-hero p {
  margin: 0;
  color: var(--text2);
}
.discovery-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.discovery-tab {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 800;
}

@media (max-width: 720px) {
  .discovery-strip {
    grid-template-columns: 1fr;
    margin-top: -16px;
  }
  .discovery-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .discovery-tabs {
    justify-content: flex-start;
  }
  .discovery-hero h1 {
    font-size: 2.2rem;
  }
}

/* ── Crawlable card links ──────────────────────────────────────────────────
   Card thumbnails and titles are real <a href> elements rather than divs with
   click handlers, so search engines can follow them and users can middle-click
   to open in a new tab. The SPA's onclick still intercepts ordinary clicks, so
   navigation behaviour is unchanged — these rules only stop the browser's
   default anchor styling from changing how the cards look.

   Card containers are deliberately still divs: they contain these anchors, and
   an <a> nested inside another <a> is invalid HTML that browsers silently tear
   apart, which would lose links rather than gain them. */
.card-thumb,
.rapper-name,
.league-card-name,
.event-card-name {
  color: inherit;
  text-decoration: none;
}
/* Anchors are inline by default; these replaced block elements whose layout
   (aspect-ratio on the thumb, text-overflow ellipsis on the names) only works
   on a block box. */
.card-thumb,
.rapper-name,
.league-card-name,
.event-card-name {
  display: block;
}

/* ── Head-to-head links on the rapper page ─────────────────────────────────
   Compare pages are the long-tail search asset, but nothing linked to them —
   they were reachable only by typing the URL. These chips give each rapper
   page a set of real links into the pages for their most-faced opponents,
   which both surfaces the feature to readers and lets crawlers find it. */
.h2h-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.h2h-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s;
}
.h2h-link:hover {
  border-color: var(--border2);
  background: var(--surface2);
}
.h2h-vs {
  color: var(--text3);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Settings toggle row ───────────────────────────────────────────────── */
.settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 4px 0;
}
.settings-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.settings-toggle > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.settings-toggle strong {
  font-size: 0.92rem;
  font-weight: 600;
}

/* ── Desktop scale ─────────────────────────────────────────────────────────────
   On a large monitor the layout read as too small at browser 100% — everything
   was sized for roughly a 1.25x view. Rather than retune every font size,
   padding and fixed width, the whole page is scaled on wide viewports only.

   `zoom` on the root element is deliberate, not `transform: scale()`: zoom
   participates in layout, so the ~28 `position: fixed` elements (header,
   player bar, modals) keep sizing against a correctly scaled viewport. A
   transform would leave their containing block at the unscaled size and push
   the header 25% wider than the window.

   The media query reads the real viewport, which root zoom does not change, so
   there is no feedback loop between the query and the scale it applies.

   1700px threshold: a 1920-wide desktop scales (effective width 1536px, still
   above the 1500px rail breakpoint so no layout reflows), while 1366–1600
   laptops, iPads and phones are untouched. */
@media (min-width: 1700px) {
  :root { zoom: 1.25; }
}