/* ── Reset & base ── */
.crl-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; font-family: system-ui, -apple-system, sans-serif; color: #1a1a2e; }

/* ── Hero ── */
.crl-hero { text-align: center; padding: 3rem 1rem 2rem; background: linear-gradient(135deg, #0f1b3d 0%, #1a3a6b 100%); border-radius: 16px; margin-bottom: 2.5rem; color: #fff; }
.crl-hero__title { font-size: 2.2rem; font-weight: 800; margin: 0 0 .5rem; letter-spacing: -1px; }
.crl-hero__sub { font-size: 1rem; opacity: .75; margin: 0; }

/* ── Team hero ── */
.crl-team-hero { text-align: center; padding: 2.5rem 1rem 2rem; background: linear-gradient(135deg, #0f1b3d 0%, #1a3a6b 100%); border-radius: 16px; margin-bottom: 2.5rem; color: #fff; }
.crl-team-hero__pos { font-size: 1rem; opacity: .6; margin-bottom: .25rem; }
.crl-team-hero__name { font-size: 2rem; font-weight: 800; margin: 0 0 .75rem; }
.crl-team-hero__range { font-size: .95rem; opacity: .8; margin: 0; }
.crl-team-hero__range strong { color: #f0c040; }

/* ── Back link ── */
.crl-back { margin-bottom: 1.25rem; }
.crl-back a { color: #1a3a6b; font-weight: 600; text-decoration: none; font-size: .95rem; }
.crl-back a:hover { text-decoration: underline; }

/* ── Section ── */
.crl-section { margin-bottom: 3rem; }
.crl-section__title { font-size: 1.3rem; font-weight: 700; color: #0f1b3d; margin: 0 0 1.25rem; padding-bottom: .5rem; border-bottom: 2px solid #e8edf5; }

/* ── Pyramid ── */
.crl-pyramid-svg-wrap { margin-bottom: 2.5rem; margin-top: .5rem; overflow-x: auto; }

.crl-svg-card { cursor: pointer; text-decoration: none; }
.crl-svg-card .crl-svg-rect { transition: fill .15s, stroke .15s; }
.crl-svg-card:hover .crl-svg-rect { stroke: #1a3a6b; stroke-width: 2; }

.crl-svg-card--self .crl-svg-rect { fill: #1a3a6b !important; stroke: #1a3a6b !important; }
.crl-svg-card--self text { fill: #fff !important; }
.crl-svg-card--target .crl-svg-rect { fill: #fff0f0 !important; stroke: #e74c3c !important; stroke-width: 2 !important; }
.crl-svg-card--target text { fill: #c0392b !important; }
.crl-svg-card--dim { opacity: .3; }

/* ── Challenges ── */
.crl-challenges { display: flex; flex-direction: column; gap: .75rem; }
.crl-challenge-row { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: #f7f9fc; border: 1px solid #e3e9f3; border-radius: 10px; flex-wrap: wrap; }
.crl-challenge-row__teams { flex: 1; display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; flex-wrap: wrap; }
.crl-challenge-row__teams a { color: #1a3a6b; text-decoration: none; display: inline !important; }
.crl-challenge-row__teams a:hover { text-decoration: underline; }
.crl-challenge-row__vs { color: #c0392b; font-size: 1rem; }
.crl-challenge-row__role { font-size: .8rem; font-weight: 600; color: #4a5568; min-width: 110px; }
.crl-challenge-row__opponent { font-weight: 700; color: #1a3a6b; text-decoration: none; font-size: .9rem; }
.crl-challenge-row__opponent:hover { text-decoration: underline; }
.crl-challenge-row__date { font-size: .8rem; color: #8896b3; margin-left: auto; }
.crl-challenge-row__winner { font-weight: 700; color: #0a5c36; font-size: .85rem; }
.crl-challenge-row__score { font-weight: 400; color: #4a5568; }

/* ── Badge ── */
.crl-badge { display: inline-block; padding: .2rem .6rem; border-radius: 20px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.crl-badge--pending   { background: #fff3cd; color: #856404; }
.crl-badge--accepted  { background: #d1e7dd; color: #0a5c36; }
.crl-badge--completed { background: #cfe2ff; color: #084298; }
.crl-badge--expired   { background: #f8d7da; color: #842029; }
.crl-badge--rejected  { background: #e2e3e5; color: #41464b; }

/* ── Table ── */
.crl-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.crl-table thead th { background: #0f1b3d; color: #fff; padding: .75rem 1rem; text-align: left; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.crl-table thead th:first-child { border-radius: 8px 0 0 0; }
.crl-table thead th:last-child { border-radius: 0 8px 0 0; }
.crl-table tbody tr { border-bottom: 1px solid #e8edf5; transition: background .1s; }
.crl-table tbody tr:hover { background: #f0f4fb; }
.crl-table tbody td { padding: .7rem 1rem; }
.crl-table tbody a { color: #1a3a6b; font-weight: 600; text-decoration: none; display: inline !important; }
.crl-table tbody a:hover { text-decoration: underline; }
.crl-table__pos { font-weight: 800; color: #0f1b3d; }

/* ── Members ── */
.crl-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.crl-member { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; background: #fff; border: 1px solid #e3e9f3; border-radius: 12px; transition: box-shadow .15s; }
.crl-member:hover { box-shadow: 0 4px 16px rgba(26,58,107,.1); }
.crl-member__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.crl-member__photo--placeholder { width: 48px; height: 48px; border-radius: 50%; background: #1a3a6b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; flex-shrink: 0; }
.crl-member__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.crl-member__name { font-weight: 700; font-size: .9rem; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crl-member__role { font-size: .75rem; color: #6b7a99; }
.crl-member__captain { color: #c89000; font-weight: 700; }

/* ── Empty state ── */
.crl-empty { color: #8896b3; font-style: italic; padding: 1rem 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .crl-wrap { padding: 1rem .5rem; }
  .crl-hero { padding: 1.5rem .75rem 1.25rem; border-radius: 12px; margin-bottom: 1.5rem; }
  .crl-hero__title { font-size: 1.3rem; }
  .crl-hero__sub { font-size: .85rem; }
  .crl-section__title { font-size: 1.1rem; }
  .crl-challenge-row { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .7rem .75rem; }
  .crl-challenge-row__date { margin-left: 0; }
  .crl-members { grid-template-columns: 1fr 1fr; }
  .crl-table { font-size: .8rem; }
  .crl-table thead th, .crl-table tbody td { padding: .5rem .6rem; }
  .crl-pyramid-mobile-note { display: none; }
  .crl-league-list-card { align-items: flex-start; gap: .85rem; padding: 1.1rem 1rem; }
  .crl-league-list-card__icon { font-size: 1.75rem; }
  .crl-league-list-card__name { font-size: 1rem; }
  .crl-league-list-card__meta { gap: .4rem .75rem; }
  .crl-challenge-row__teams { gap: .4rem !important; }
  .crl-challenge-row__teams a,
  .crl-table tbody a,
  .crl-section__title,
  .crl-table thead th,
  .crl-table tbody td {
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }
  .crl-challenge-row__teams a,
  .crl-table tbody a { display: inline !important; white-space: normal !important; }
}

.crl-event-section { margin-bottom: 4rem; }
.crl-event-header { text-align: center; margin-bottom: .5rem; }
.crl-event-header__name { font-size: 1.6rem; font-weight: 800; color: #0f1b3d; margin: 0 0 .25rem; }
.crl-event-header__meta { font-size: .9rem; color: #6b7a99; margin: 0; }

.crl-leagues-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.crl-league-list-card { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem;
  background: #fff; border: 1.5px solid #e3e9f3; border-radius: 14px;
  text-decoration: none; color: #1a1a2e; transition: all .15s; }
.crl-league-list-card:hover { border-color: #1a3a6b;
  box-shadow: 0 6px 24px rgba(26,58,107,.12); transform: translateY(-1px); }
.crl-league-list-card__icon { font-size: 2.5rem; flex-shrink: 0; }
.crl-league-list-card__body { flex: 1; min-width: 0; }
.crl-league-list-card__name { font-size: 1.2rem; font-weight: 700;
  color: #0f1b3d; margin: 0 0 .5rem; line-height: 1.3; overflow-wrap: anywhere; }
.crl-league-list-card__meta { display: flex; gap: 1rem; font-size: .85rem;
  color: #6b7a99; flex-wrap: wrap; align-items: center; }

.crl-site-nav { position: fixed !important; top: 0 !important;
  left: 0 !important; right: 0 !important; z-index: 99999 !important;
  background: rgba(15,27,61,.97) !important; backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  height: 64px !important; width: 100% !important;
  margin: 0 !important; padding: 0 !important; }

.crl-site-nav__inner { max-width: 1100px !important; margin: 0 auto !important;
  padding: 0 1.5rem !important; display: flex !important;
  align-items: center !important; justify-content: space-between !important;
  height: 64px !important; }

.crl-site-nav__logo { display: flex !important; align-items: center !important;
  text-decoration: none !important; }
.crl-site-nav__logo svg { display: block !important; height: 32px !important; width: auto !important; }

.crl-site-nav__links { display: flex !important; align-items: center !important;
  gap: 2rem !important; list-style: none !important; margin: 0 !important;
  padding: 0 !important; background: transparent !important; }

.crl-site-nav__links li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.crl-site-nav__links a { color: rgba(255,255,255,.85) !important;
  text-decoration: none !important; font-size: .9rem !important;
  font-weight: 500 !important; background: none !important;
  padding: 0 !important; border: none !important; }

.crl-site-nav__links a:hover { color: #f0c040 !important; }

.crl-site-nav__cta { background: #f0c040 !important; color: #0f1b3d !important;
  padding: .4rem 1rem !important; border-radius: 20px !important;
  font-weight: 700 !important; font-size: .85rem !important; }

.crl-site-nav__burger { display: none !important; flex-direction: column !important;
  gap: 5px !important; background: none !important; border: none !important;
  cursor: pointer !important; padding: .5rem !important;
  box-shadow: none !important; }

.crl-site-nav__burger span { display: block !important; width: 22px !important;
  height: 2px !important; background: #fff !important; border-radius: 2px !important; }

/* Push content below fixed nav on CRL pages */
.crl-wrap { padding-top: 80px; }

@media (max-width: 768px) {
  .crl-site-nav__links { display: none !important; position: fixed !important;
    top: 64px !important; left: 0 !important; right: 0 !important;
    background: #0f1b3d !important; flex-direction: column !important;
    padding: 1.5rem !important; gap: 1.25rem !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    z-index: 99998 !important; height: auto !important; }
  .crl-site-nav__links--open { display: flex !important; }
  .crl-site-nav__burger { display: flex !important; }
  .crl-site-nav__links a { font-size: 1rem !important; padding: .25rem 0 !important; }
}

.crl-delta { display: inline-block; font-size: .75rem; font-weight: 700;
  padding: .1rem .35rem; border-radius: 4px; margin-left: .4rem; vertical-align: middle; }
.crl-delta--up   { background: #d1e7dd; color: #0a5c36; }
.crl-delta--down { background: #f8d7da; color: #842029; }

.crl-last5 { display: flex; gap: 4px; align-items: center; }
.crl-last5__dot { display: inline-block; width: 18px; height: 18px;
  border-radius: 50%; flex-shrink: 0; }
.crl-last5__dot--win  { background: #0a5c36; }
.crl-last5__dot--loss { background: #842029; }
.crl-last5__dot--none { background: #d0daea; }

@media (max-width: 768px) {
  .crl-col-last5 { display: table-cell !important; }
  .crl-table { font-size: .75rem; }
  .crl-table thead th, .crl-table tbody td { padding: .5rem .4rem; }
  .crl-table tbody a { white-space: normal; word-break: break-word; }
  .crl-last5 { gap: 2px; }
  .crl-last5__dot { width: 14px; height: 14px; }
}