/* Champion's Corner — isolated stylesheet, loaded only on this page (extra_head block).
   Standard spacing/color/layout is done with the site's existing Tailwind utility classes and
   sitewide helpers (.hover-card, .reveal-on-scroll, .testimonial-carousel, bg-primary /
   border-secondary.text-secondary buttons) directly in the template — everything below is only
   the handful of visual primitives Tailwind utilities can't express. All classes are prefixed
   `cc-` so nothing here can collide with global site styles. */

/* ---------- procedural "arena" bokeh backdrop — no downloaded/hotlinked photography ---------- */
.cc-bokeh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cc-bokeh span { position: absolute; border-radius: 50%; filter: blur(46px); }
.cc-bokeh .cc-b1 { width: 340px; height: 340px; top: -90px; right: 6%; background: rgba(231,0,0,0.22); }
.cc-bokeh .cc-b2 { width: 260px; height: 260px; bottom: -60px; left: 10%; background: rgba(91,185,195,0.16); }
.cc-bokeh .cc-b3 { width: 200px; height: 200px; top: 30%; left: 42%; background: rgba(255,176,32,0.10); }
.cc-bokeh .cc-b4 { width: 180px; height: 180px; bottom: 10%; right: 20%; background: rgba(91,185,195,0.10); }

.cc-hero-trophy-mark {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: min(46vw, 620px); height: min(46vw, 620px); opacity: 0.05; color: #FFFFFF;
  pointer-events: none;
}
.cc-hero-grid {
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent 75%);
}

/* ---------- stat tiles (hero row) + countdown variant ---------- */
.cc-stat-tile {
  background: rgba(18,18,18,0.75); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
  padding: 0.95rem 1.35rem; min-width: 128px; text-align: center; backdrop-filter: blur(4px);
}
.cc-stat-tile .cc-n { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.cc-stat-tile .cc-l { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 0.25rem; }
.cc-stat-tile.cc-countdown { border-color: rgba(255,176,32,0.4); background: linear-gradient(160deg, rgba(255,176,32,0.10), rgba(18,18,18,0.75)); }
.cc-stat-tile.cc-countdown .cc-n { color: #FFB020; font-variant-numeric: tabular-nums; }
.cc-stat-tile.cc-countdown .cc-l { display: flex; align-items: center; justify-content: center; gap: 0.32rem; }
.cc-stat-tile.cc-countdown .cc-l svg { width: 11px; height: 11px; }

/* ---------- filter pills (leaderboard / game rankings / tournament tabs) ---------- */
.cc-pill {
  font-size: 0.82rem; font-weight: 500; padding: 0.45rem 0.95rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18); background: transparent; color: rgba(255,255,255,0.72);
  transition: all 0.15s ease; white-space: nowrap;
}
.cc-pill:hover { border-color: rgba(91,185,195,0.5); color: #FFFFFF; }
.cc-pill.cc-active { background: #5BB9C3; border-color: #5BB9C3; color: #000000; font-weight: 600; }

/* ---------- rank chip — circular numbered badge ---------- */
.cc-rank-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(255,255,255,0.06);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.85rem; color: rgba(255,255,255,0.72);
}
.cc-rank-1 .cc-rank-chip, tr.cc-top1 .cc-rank-chip { background: #FFB020; color: #000000; }
.cc-rank-2 .cc-rank-chip, tr.cc-top2 .cc-rank-chip { background: rgba(255,255,255,0.16); color: #FFFFFF; }
.cc-rank-3 .cc-rank-chip, tr.cc-top3 .cc-rank-chip { background: rgba(91,185,195,0.22); color: #5BB9C3; }

/* ---------- "photo card" avatar — vignette + silhouette placeholder, no real photo yet ----------
   Reads as "a photo goes here" (roster page before headshots are uploaded) rather than a generic
   colored-initials circle. Phase 2 swaps the silhouette for an uploaded image in the same frame. */
.cc-avatar-photo {
  position: relative; border-radius: 50%; overflow: hidden; flex: none;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,0.14), transparent 55%),
    linear-gradient(165deg, #1e1e1e, #070707);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
}
.cc-avatar-photo svg { width: 52%; height: 52%; opacity: 0.4; color: #FFFFFF; }
.cc-avatar-photo.cc-gold { border-color: rgba(255,176,32,0.55); box-shadow: 0 0 0 3px rgba(255,176,32,0.10); }
.cc-avatar-photo.cc-silver { border-color: rgba(255,255,255,0.4); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
.cc-avatar-photo.cc-bronze { border-color: rgba(91,185,195,0.55); box-shadow: 0 0 0 3px rgba(91,185,195,0.10); }

.cc-medal-badge {
  position: absolute; bottom: -3px; right: -3px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid #000000;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
}
.cc-medal-badge.cc-gold { background: #FFB020; color: #000000; }
.cc-medal-badge.cc-silver { background: #e4e4e4; color: #000000; }
.cc-medal-badge.cc-bronze { background: #5BB9C3; color: #000000; }

/* ---------- Hall of Fame card rank treatment ---------- */
.cc-hof-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cc-hof-card:hover { transform: translateY(-4px); }
.cc-hof-card.cc-rank-1 { border-color: rgba(255,176,32,0.45) !important; box-shadow: 0 0 0 1px rgba(255,176,32,0.12), 0 18px 46px -18px rgba(255,176,32,0.35); }
.cc-hof-card.cc-rank-2 { border-color: rgba(255,255,255,0.22) !important; }
.cc-hof-card.cc-rank-3 { border-color: rgba(91,185,195,0.35) !important; }

/* ---------- performance bar strip — Hall of Fame #1 spotlight card only ---------- */
.cc-perf-bars { display: flex; align-items: flex-end; gap: 0.7rem; height: 78px; }
.cc-perf-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.cc-perf-bar .cc-val { font-size: 0.66rem; color: #5BB9C3; font-weight: 600; margin-bottom: 0.3rem; }
.cc-perf-bar .cc-fill { width: 100%; max-width: 24px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, rgba(91,185,195,0.95), rgba(91,185,195,0.3)); }
.cc-perf-bar .cc-lbl { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); margin-top: 0.45rem; }

/* ---------- leaderboard table ---------- */
.cc-lb-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cc-lb-table thead th {
  text-align: left; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); padding: 0.9rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); white-space: nowrap;
}
.cc-lb-table thead th.cc-num, .cc-lb-table td.cc-num { text-align: right; }
.cc-lb-table tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); vertical-align: middle; }
.cc-lb-table tbody tr:last-child td { border-bottom: none; }
.cc-lb-table tbody tr { transition: background 0.15s ease; }
.cc-lb-table tbody tr:hover { background: rgba(255,255,255,0.025); cursor: pointer; }
.cc-lb-table tbody tr.cc-top1 { background: linear-gradient(90deg, rgba(255,176,32,0.09), transparent 70%); }
.cc-lb-table tbody tr.cc-top2 { background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent 70%); }
.cc-lb-table tbody tr.cc-top3 { background: linear-gradient(90deg, rgba(91,185,195,0.08), transparent 70%); }
.cc-winrate { color: #22C55E; font-weight: 600; }
.cc-streak { display: inline-flex; align-items: center; gap: 0.3rem; color: #FFB020; font-weight: 600; }
.cc-streak svg { width: 13px; height: 13px; }
.cc-streak.cc-zero { color: rgba(255,255,255,0.55); font-weight: 400; }

.cc-lb-cards { display: none; flex-direction: column; gap: 0.75rem; }
@media (max-width: 760px) {
  .cc-lb-table-wrap { display: none; }
  .cc-lb-cards { display: flex; }
}

/* ---------- badge / achievement chip ---------- */
.cc-badge-icon {
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); flex: none;
}
.cc-badge-icon svg { width: 15px; height: 15px; }
.cc-badge-icon.cc-gold { color: #FFB020; border-color: rgba(255,176,32,0.3); }
.cc-badge-icon.cc-teal { color: #5BB9C3; border-color: rgba(91,185,195,0.3); }

/* ---------- tournament bracket (simplified 3-round mock) ---------- */
.cc-bracket-round { position: relative; padding-left: 1.1rem; }
.cc-bracket-round::before { content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px; background: rgba(255,255,255,0.12); }
.cc-bracket-match + .cc-bracket-match { margin-top: 0.6rem; }

/* ---------- community pick vote bars ---------- */
.cc-vote-bar-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.cc-vote-bar-fill { height: 100%; background: linear-gradient(90deg, #5BB9C3, rgba(91,185,195,0.6)); border-radius: 999px; transition: width 0.5s ease; }
.cc-vote-option { cursor: pointer; transition: border-color 0.15s ease; }
.cc-vote-option:hover { border-color: rgba(91,185,195,0.5) !important; }
.cc-vote-option.cc-voted { border-color: #5BB9C3 !important; background: rgba(91,185,195,0.06); }

/* ---------- modals ---------- */
.cc-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(3px);
  z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem;
}
.cc-modal-overlay.cc-open { display: flex; }
.cc-modal-panel {
  background: #121212; border: 1px solid rgba(255,255,255,0.14); border-radius: 20px;
  max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative;
}
@media (max-width: 640px) {
  .cc-modal-overlay { padding: 0; align-items: flex-end; }
  .cc-modal-panel { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; }
}
.cc-modal-close {
  position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center; color: #FFFFFF; z-index: 2;
}
.cc-modal-close:hover { background: rgba(255,255,255,0.16); }

/* ---------- champion moments gallery placeholder tile ---------- */
.cc-moment-tile {
  aspect-ratio: 4/3; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);
  background: radial-gradient(circle at 30% 20%, rgba(91,185,195,0.10), transparent 60%), #121212;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 1rem; flex: none; width: 78%; scroll-snap-align: start;
}
@media (min-width: 640px) { .cc-moment-tile { width: 300px; } }
.cc-moment-tile svg { width: 28px; height: 28px; color: rgba(91,185,195,0.6); margin-bottom: 0.6rem; }

/* ---------- empty state ---------- */
.cc-empty { text-align: center; padding: 3rem 1rem; color: rgba(255,255,255,0.55); font-size: 0.92rem; }

.cc-reveal-tag {
  position: sticky; top: 76px; z-index: 20;
}