/* ═══════════════════════════════════════════════
   pages.css — Page-specific component styles:
   hero banner, fixture cards, team cards,
   player rows, media grid, standings table
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   DASHBOARD HERO
   ═══════════════════════════════════════════════ */
.hero {
  background: linear-gradient(135deg, #0a3d20 0%, var(--green-d) 40%, var(--green) 100%);
  border-radius: var(--radius-lg);
  padding: 30px 32px 28px;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15, 82, 40, 0.22);
}
/* decorative circles */
.hero::after {
  content: '';
  position: absolute;
  right: -50px; top: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.hero::before {
  content: '';
  position: absolute;
  right: 80px; bottom: -70px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 0;    /* title now inside button — spacing handled by selector */
}

/* ── Season selector in hero ── */
.hero-season-selector {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
}
.hero-season-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px 2px 0;
  color: inherit;
  border-radius: 6px;
  transition: background .15s;
}
.hero-season-btn:hover {
  background: rgba(255,255,255,.08);
}
.hero-season-chevron {
  width: 15px;
  height: 10px;
  color: rgba(255,255,255,.7);
  flex-shrink: 0;
  transition: transform .22s cubic-bezier(.34,1.2,.64,1);
  position: relative;
  top: 4px;          /* align with middle of big title */
}
.hero-season-btn[aria-expanded="true"] .hero-season-chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

/* Panel */
.hero-season-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: rgba(5, 38, 18, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 6px;
  min-width: 230px;
  z-index: 220;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.2,.64,1);
}
.hero-season-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Option rows */
.hero-season-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.hero-season-opt:hover {
  background: rgba(255,255,255,.1);
}
.hero-season-opt-icon { font-size: 22px; flex-shrink: 0; }
.hero-season-opt-info { flex: 1; display: flex; flex-direction: column; }
.hero-season-opt-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.hero-season-opt-sub  { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }
.hero-season-opt-check {
  margin-left: auto;
  color: var(--gold);
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}
.hero-sub {
  color: rgba(255,255,255,.7);
  font-size: 13px;
}
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 22px;
  flex-wrap: wrap;
  background: rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 10px 0;
  width: fit-content;
}
.hero-stat {
  text-align: center;
  padding: 0 22px;
}
.hero-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}
.hero-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  color: var(--gold);
  line-height: 1;
}
.hero-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════
   DASHBOARD LAYOUT — main grid + analytics row
   ═══════════════════════════════════════════════ */
.dash-main-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

/* Shared dashboard card header */
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.dash-card-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dash-card-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.dash-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: .8px;
  color: var(--text);
  white-space: nowrap;
}
.dash-card-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-card-body {
  /* fixture list sits flush inside the card */
}
.dash-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Analytics row — Top Rated + Top Fans side by side */
.dash-analytics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.dash-analytics-card { overflow: hidden; }

/* ═══════════════════════════════════════════════
   TOP SCORERS LIST
   ═══════════════════════════════════════════════ */
.scorer-list { padding: 4px 0; }
.scorer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  overflow: hidden;    /* CRITICAL — keeps row in box */
}
.scorer-row:last-child { border-bottom: none; }
.scorer-row:hover { background: rgba(26,122,60,.04); }
.scorer-rank {
  font-size: 16px;
  flex-shrink: 0;
  width: 26px;
  text-align: center;
}
.scorer-info {
  flex: 1;
  min-width: 0;        /* CRITICAL — allows text truncation */
  overflow: hidden;
}
.scorer-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scorer-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.scorer-goals {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: var(--green);
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;   /* centre-align number + ball */
  gap: 4px;
}
.scorer-goals-label {
  font-size: 20px;       /* match the number visually */
  line-height: 1;
  display: flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════
   TOP RATED PLAYERS card
   ═══════════════════════════════════════════════ */
.tr-list { padding: 4px 0; }
.tr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  overflow: hidden;   /* CRITICAL */
}
.tr-row:last-child { border-bottom: none; }
.tr-row:hover { background: rgba(26,122,60,.04); }
.tr-rank {
  font-size: 16px;
  width: 26px;
  flex-shrink: 0;
  text-align: center;
}
.tr-rank.r1 { color: #d4a017; }
.tr-rank.r2 { color: #9ba4b5; }
.tr-rank.r3 { color: #b87333; }
.tr-info {
  flex: 1;
  min-width: 0;       /* CRITICAL */
  overflow: hidden;
}
.tr-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.tr-badge-wrap {
  flex-shrink: 0;     /* CRITICAL — never squish the badge */
  text-align: center;
  min-width: 44px;
}
.tr-badge {
  background: linear-gradient(135deg, var(--green-d), var(--green));
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  line-height: 1;
  padding: 3px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.tr-badge-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════
   TOP FANS card
   ═══════════════════════════════════════════════ */
.tf-list { padding: 4px 0; }
.tf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;   /* CRITICAL */
}
.tf-row:last-child { border-bottom: none; }
.tf-medal {
  font-size: 18px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.tf-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid transparent;
}
.tf-avatar.gold-ring   { border-color: #d4a017; }
.tf-avatar.silver-ring { border-color: #9ba4b5; }
.tf-avatar.bronze-ring { border-color: #b87333; }
.tf-info {
  flex: 1;
  min-width: 0;       /* CRITICAL */
  overflow: hidden;
}
.tf-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-stats {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  color: var(--green);
  flex-shrink: 0;     /* CRITICAL */
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.tf-score-label {
  font-size: 11px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}

/* ════════════════════════════════════════════════
   STANDINGS PAGE — full system
   ════════════════════════════════════════════════ */

/* ── Shared table atoms (also used by dashboard mini-table) ── */
.stand-pos {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--muted);
  width: 28px;
  display: inline-block;
}
.stand-pos.t1 { color: #d4a017; }
.stand-pos.t2 { color: #9ba4b5; }
.stand-pos.t3 { color: #b87333; }
.stand-team       { display: flex; align-items: center; gap: 8px; }
.stand-team-link  { cursor: pointer; transition: opacity .15s; }
.stand-team-link:hover .stand-name { color: var(--green); text-decoration: underline; }
.stand-logo {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.stand-dot   { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.stand-name  { font-weight: 600; font-size: 13px; transition: color .15s; }
.stand-pts   { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--green); }

/* ── Standings table layout ── */
.stand-table .tc        { text-align: center; }
.stand-table-compact th,
.stand-table-compact td { padding: 8px 10px; }

/* Club cell: logo + name on first line, form strip on second */
.stand-td-club    { vertical-align: middle; }
.stand-club-wrap  { display: flex; align-items: center; gap: 8px; }

/* ── Zone colour indicators (left border on row) ── */
.stand-row { border-left: 3px solid transparent; transition: border-color .15s; }
.stand-row.zone-champ { border-left-color: #d4a017; }
.stand-row.zone-promo { border-left-color: var(--green); }
.stand-row.zone-rel   { border-left-color: var(--red); }

/* ── Form strip (W / D / L pips) ── */
.stand-form-strip { display: flex; gap: 3px; margin-top: 4px; }
.sfp {
  width: 17px; height: 17px;
  border-radius: 3px;
  font-size: 9px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.sfp-w { background: var(--green); }
.sfp-d { background: var(--gold-d); }
.sfp-l { background: var(--red); }
.stand-form-leg {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
  margin-top: 10px; padding: 0 2px;
}
.stand-form-leg-note { font-size: 11px; color: var(--muted); margin-left: 4px; }

/* ── Tournament header in standings ── */
.stand-tn-head   { margin-bottom: 16px; }
.stand-tn-type   { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.stand-tn-name   { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; line-height: 1.2; }
.stand-tn-sub    { display: flex; align-items: center; gap: 10px; }
.stand-tn-teams  { font-size: 12px; color: var(--muted); }

/* ── Section label (Group Stage / Knockout Stage) ── */
.stand-section-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted);
  padding-bottom: 8px; border-bottom: 2px solid var(--border);
  margin: 0 0 14px;
}

/* ── Group tables grid ── */
.stand-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.stand-group-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stand-group-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted);
  padding: 10px 14px 8px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

/* ── Advancement note ── */
.stand-adv-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
  margin-top: 10px;
}
.stand-adv-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* ── Empty state ── */
.stand-empty       { text-align: center; padding: 52px 20px; }
.stand-empty-icon  { font-size: 48px; margin-bottom: 12px; }
.stand-empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.stand-empty-sub   { font-size: 13px; color: var(--muted); }

/* ════════════════════════════════════════════════
   KNOCKOUT BRACKET
   ════════════════════════════════════════════════ */

.bracket-scroll {
  overflow-x: auto;
  padding: 4px 0 20px;
}
.bracket-grid {
  display: flex;
  flex-direction: column;
}
.bracket-hdr-row {
  display: flex;
  flex-shrink: 0;
}
.bracket-col-hdr {
  flex-shrink: 0;
  padding: 9px 14px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.7px;
  color: #fff;
  background: var(--green);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.15);
}
.bracket-col-hdr:last-child { border-right: none; }
/* Alternate column header shade */
.bracket-col-hdr:nth-child(even) { background: var(--green-d); }

.bracket-body-row {
  display: flex;
  position: relative;
}
.bracket-col {
  flex-shrink: 0;
  position: relative;
}
.bracket-cell {
  position: relative;
  box-sizing: border-box;
  padding: 4px 14px;
  display: flex;
  align-items: center;
}

/* ── Connector spans ── */
/* All absolutely positioned, pointer-events none so they don't block clicks */
.bk-left, .bk-right, .bk-v {
  position: absolute;
  pointer-events: none;
  background: var(--border);
}
/* Left incoming horizontal connector (not first column) */
.bk-left  { left: 0;  top: calc(50% - 1px); width: 14px; height: 2px; }
/* Right outgoing horizontal connector (not last column) */
.bk-right { right: 0; top: calc(50% - 1px); width: 14px; height: 2px; }
/* Vertical bracket line — first of pair goes DOWN, second goes UP */
.bk-v-down { right: 0; top:    50%; width: 2px; height: 50%; }
.bk-v-up   { right: 0; bottom: 50%; width: 2px; height: 50%; }

/* ── Match card ── */
.bk-card {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .15s, border-color .15s;
}
.bk-card:hover   { box-shadow: 0 3px 10px rgba(0,0,0,.12); border-color: var(--green); cursor: pointer; }
.bk-card.bk-done { border-color: var(--green); }

.bk-team {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  transition: background .12s;
}
.bk-divider { height: 1px; background: var(--border); }

.bk-team.bk-win  { background: rgba(26,122,60,.09); font-weight: 700; }
.bk-team.bk-loss { opacity: 0.5; }

.bk-card-logo {
  width: 16px; height: 16px;
  border-radius: 3px;
  object-fit: contain;
  flex-shrink: 0;
}
.bk-card-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bk-tname {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-tbd   { color: var(--muted); font-style: italic; }
.bk-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: var(--muted);
  min-width: 16px;
  text-align: right;
  flex-shrink: 0;
}
.bk-score.bk-score-w { color: var(--green); }
.bk-date {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  padding: 4px 8px;
  background: var(--bg3);
  border-top: 1px solid var(--border);
}

/* ── Champion banner ── */
.bk-champion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #fffbea, #fef3c7);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  animation: slideUp .3s ease;
}
.bk-champ-trophy { font-size: 32px; line-height: 1; }
.bk-champ-logo   { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; flex-shrink: 0; }
.bk-champ-dot    { width: 36px; height: 36px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.bk-champ-label  { font-size: 11px; font-weight: 700; color: var(--gold-d); text-transform: uppercase; letter-spacing: 0.5px; }
.bk-champ-name   { font-size: 20px; font-weight: 800; color: var(--text); }

/* ── Fixture card ── */
.fixture-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 10px;
  position: relative;
}
.fixture-card:hover {
  border-color: var(--green);
  box-shadow: 0 4px 16px rgba(26, 122, 60, 0.1);
}
/* When fixture cards live inside a dash-card, render as bordered rows, not floating cards */
.dash-card-body .fixture-card {
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.dash-card-body .fixture-card:last-child { border-bottom: none; }
.dash-card-body .fixture-card:hover { background: rgba(26,122,60,.03); border-color: var(--border); box-shadow: none; }

/* Team sides */
.team-side            { flex: 1; display: flex; align-items: center; gap: 10px; }
.team-side.right      { flex-direction: row-reverse; }
.team-badge-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}
.team-label { font-size: 14px; font-weight: 600; }

/* Score center block */
.score-center {
  background: var(--green);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  padding: 6px 18px;
  border-radius: 8px;
  letter-spacing: 3px;
  min-width: 80px;
  text-align: center;
}
.score-center.upcoming {
  background: var(--gold);
  color: #1a1a1a;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  padding: 7px 14px;
}
.score-center.live {
  background: var(--red);
  animation: liveBg 2s infinite;
}

/* ── Team card ── */
.team-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.team-card:hover {
  border-color: var(--green);
  box-shadow: 0 6px 20px rgba(26, 122, 60, 0.12);
}
.team-card-stripe { height: 7px; }
.team-card-body   { padding: 16px; }
.team-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}
.team-card-name  { font-size: 15px; font-weight: 600; }
.team-card-meta  { font-size: 12px; color: var(--muted); margin-top: 3px; }
.team-card-stats {
  display: flex;
  gap: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tcs              { flex: 1; text-align: center; border-right: 1px solid var(--border); }
.tcs:last-child   { border-right: none; }
.tcs-num   { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--green); }
.tcs-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Player row ── */
.player-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.player-row:last-child { border-bottom: none; }
.player-row:hover      { background: var(--bg); }

.p-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: var(--green);
  flex-shrink: 0;
}
.p-name { font-size: 14px; font-weight: 600; }
.p-meta { font-size: 12px; color: var(--muted); }
.p-stat {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  margin-left: auto;
  padding-left: 12px;
}

/* ── Media hub grid ── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.media-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.media-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }
.media-thumb {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.play-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.15s;
}
.play-btn:hover     { transform: scale(1.08); }
.play-btn::after {
  content: '';
  border-left: 13px solid var(--green);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}
.media-info  { padding: 10px 12px; }
.media-title { font-size: 13px; font-weight: 600; line-height: 1.4; }
.media-date  { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ai-tag {
  background: var(--gold-l);
  color: var(--gold-d);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

/* ════════════════════════════════════════════════
   TOURNAMENT STYLES
   ════════════════════════════════════════════════ */

/* Tournament mini card (dashboard widget) */
.tournament-mini-card {
  flex-shrink: 0;
  min-width: 175px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
}
.tournament-mini-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Tournament full card (tournaments page) */
.tournament-card {
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
  margin-bottom: 12px;
}
.tournament-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Group label above a cluster of tournament cards */
.tn-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 16px 0 10px;
}
.tn-group-label:first-child { margin-top: 0; }

/* Section label inside the tournament detail modal */
.tn-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* Team checkbox row in create-tournament modal */
.tn-team-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.tn-team-check:hover { background: var(--bg); }

/* ════════════════════════════════════════════════
   TOURNAMENT DASHBOARD CARDS (rich version)
   ════════════════════════════════════════════════ */
.tn-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 4px;
}
.tn-dash-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tn-dash-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--green);
}
.tn-dc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tn-dc-type-pill {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .3px;
}
.tn-dc-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}
.tn-dc-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 3px;
}
.tn-dc-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
}
.tn-dc-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  flex: 1;
}
.tn-dc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  min-height: 18px;
}
.tn-dc-row-lbl {
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
  width: 100px;
}
.tn-dc-row-val {
  color: var(--text);
  font-weight: 500;
  font-size: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tn-dc-footer {
  font-size: 11px;
  font-weight: 700;
  margin-top: 12px;
  text-align: right;
  opacity: .75;
}

/* ════════════════════════════════════════════════
   DASHBOARD CARD — generic expandable button
   ════════════════════════════════════════════════ */
.dash-expand-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, background .15s;
  font-family: 'DM Sans', sans-serif;
}
.dash-expand-btn:hover { color: var(--green); background: rgba(26,122,60,.03); }

/* ════════════════════════════════════════════════
   BUDDY SYSTEM
   ════════════════════════════════════════════════ */
.buddy-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--green);
  color: var(--green);
  background: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.buddy-btn:hover, .buddy-btn.sent { background: var(--green); color: #fff; border-color: var(--green); }
.buddy-btn.accepted { background: var(--green-l); color: var(--green-d); border-color: var(--green); cursor: default; }
/* ── Clickable buddy card ── */
.buddy-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, transform .15s;
  border-bottom: 1px solid var(--border);
  margin: 0 -14px;
}
.buddy-card:last-child { border-bottom: none; }
.buddy-card:hover { background: rgba(26,122,60,.06); transform: translateX(2px); }
.buddy-card-av { flex-shrink: 0; }
.buddy-card-arrow {
  font-size: 18px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .15s;
}
.buddy-card:hover .buddy-card-arrow { transform: translateX(3px); color: var(--green); }

.buddy-request-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.buddy-req-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.buddy-req-accept {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
  border: none;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}
.buddy-req-reject {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--red);
  color: var(--red);
  background: none;
  cursor: pointer;
}

/* ════════════════════════════════════════════════
   DASHBOARD — REGISTER AS PLAYER CTA
   ════════════════════════════════════════════════ */
.dash-register-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #0a3d20 0%, var(--green-d) 60%, var(--green) 100%);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(15, 82, 40, 0.25);
  position: relative;
  overflow: hidden;
}
.dash-register-cta::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.dash-register-cta-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}
.dash-register-cta-icon {
  font-size: 42px;
  line-height: 1;
  flex-shrink: 0;
}
.dash-register-cta-text { min-width: 0; }
.dash-register-cta-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  color: #fff;
  line-height: 1.1;
}
.dash-register-cta-sub {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  margin-top: 4px;
  line-height: 1.45;
}
.dash-register-cta-btn {
  background: #fff;
  color: var(--green-d);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.dash-register-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}

/* ════════════════════════════════════════════════
   PLAYER SELF-REGISTRATION MODAL
   ════════════════════════════════════════════════ */
.sreg-modal-box {
  max-width: 480px;
}
.sreg-body {
  padding: 20px 24px 24px;
}
.sreg-photo-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  padding: 16px 18px;
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.sreg-photo-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--bg3);
  border: 2.5px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--green-l);
}
.sreg-photo-placeholder {
  font-size: 28px;
  line-height: 1;
}
.sreg-photo-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sreg-upload-btn {
  display: inline-block;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 14px;
}
.sreg-photo-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.sreg-photo-hint-req {
  color: var(--green);
  font-weight: 500;
}
/* Clickable photo circle */
.sreg-photo-clickable {
  cursor: pointer;
  transition: box-shadow .18s, transform .15s;
}
.sreg-photo-clickable:hover,
.sreg-photo-clickable:focus {
  box-shadow: 0 0 0 6px var(--green-l), 0 0 0 9px rgba(34,197,94,.18);
  transform: scale(1.04);
}
/* Shake animation when photo not uploaded and user tries to submit */
@keyframes sregShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px) rotate(-3deg); }
  40%      { transform: translateX(6px)  rotate( 3deg); }
  60%      { transform: translateX(-4px) rotate(-2deg); }
  80%      { transform: translateX(4px)  rotate( 2deg); }
}
.sreg-photo-shake {
  animation: sregShake .55s ease;
}
.sreg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.sreg-full { grid-column: 1 / -1; }
.sreg-note {
  font-size: 12px;
  color: var(--muted);
  background: var(--bg2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-left: 3px solid var(--green);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════
   PLAYERS PAGE — REGISTER CTA BAR
   ════════════════════════════════════════════════ */
.plr-reg-cta-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, var(--green) 0%, #16a34a 100%);
  color: #fff;
  padding: 11px 18px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  transition: opacity .18s, transform .15s;
  user-select: none;
}
.plr-reg-cta-bar:hover { opacity: .92; transform: translateY(-1px); }
.plr-reg-cta-bar:active { transform: scale(.99); }
.plr-reg-cta-icon { font-size: 20px; flex-shrink: 0; }
.plr-reg-cta-text { flex: 1; }

/* ════════════════════════════════════════════════
   FAN PROFILE WELCOME TOAST
   ════════════════════════════════════════════════ */
.fan-welcome-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 490;
  background: var(--green);
  color: #fff;
  padding: 12px 16px;
  border-radius: 32px;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.fan-welcome-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
.fan-welcome-toast-msg { flex: 1; }
.fan-welcome-toast-btn {
  background: rgba(255,255,255,.22);
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  padding: 5px 13px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background .15s;
  white-space: nowrap;
}
.fan-welcome-toast-btn:hover { background: rgba(255,255,255,.35); }
.fan-welcome-toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .fan-welcome-toast {
    bottom: 70px;
    left: 12px;
    right: 12px;
    transform: translateY(120px);
    white-space: normal;
    border-radius: 16px;
  }
  .fan-welcome-toast-visible { transform: translateY(0); }
}

/* ════════════════════════════════════════════════
   TOPBAR — HELP BUTTON
   ════════════════════════════════════════════════ */
.guide-help-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s;
  flex-shrink: 0;
}
.guide-help-btn:hover {
  background: rgba(255,255,255,.28);
}

/* ════════════════════════════════════════════════
   FIRST-TIME USER GUIDE MODAL
   ════════════════════════════════════════════════ */
.guide-modal-box {
  max-width: 520px;
  padding: 0;
  overflow: hidden;       /* clips border-radius */
  display: flex;
  flex-direction: column;
  max-height: 90vh;       /* cap total height so footer stays on screen */
}
.guide-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;         /* never squish the header */
}
.guide-logo {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.guide-progress-track {
  height: 4px;
  background: var(--bg3);
  margin: 0;
  flex-shrink: 0;         /* never squish the progress bar */
}
.guide-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green-d), var(--green));
  border-radius: 2px;
  transition: width .35s ease;
  width: 14.28%;  /* 1/7 */
}
.guide-slides {
  padding: 24px 28px 16px;
  flex: 1;                /* take all remaining height between header and footer */
  overflow-y: auto;       /* scroll tall slides — header & footer stay fixed */
  min-height: 0;          /* crucial: lets flex child shrink below content size */
  overscroll-behavior: contain;
}
.guide-slide {
  display: none;
  animation: guideFadeIn .28s ease;
}
.guide-slide.active { display: block; }
@keyframes guideFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.guide-slide-icon {
  font-size: 44px;
  margin-bottom: 12px;
  line-height: 1;
}
.guide-slide-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  color: var(--text);
  margin-bottom: 10px;
}
.guide-slide-body {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: 14px;
}
.guide-feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.guide-feature-chip {
  background: var(--green-l);
  color: var(--green-d);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(15,82,40,.12);
}
.guide-tip-box {
  background: var(--bg2);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}
.guide-step-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.guide-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text2);
}
.guide-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;             /* never squish the footer — stays pinned at bottom */
}
.guide-nav-btn {
  min-width: 90px;
  font-size: 14px;
  padding: 9px 18px;
}
.guide-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.guide-dot.active {
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.25);
}
.guide-dot:hover:not(.active) {
  background: var(--green-l);
}

/* "Try it now" action button inside guide slides */
.guide-try-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 9px 18px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .15s;
  box-shadow: 0 2px 10px rgba(15,82,40,.25);
}
.guide-try-btn:hover {
  background: var(--green-d);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════
   GUIDE — SLIDE MOCKUPS
   Mini illustrated previews of each section
   ════════════════════════════════════════════════ */
.guide-mockup {
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  font-size: 11px;
}

/* Hero mockup */
.guide-mockup-hero {
  background: linear-gradient(135deg, #0a3d20, var(--green));
  padding: 14px 16px;
  color: #fff;
}
.gm-eyebrow {
  font-size: 8px;
  letter-spacing: 2px;
  opacity: .6;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.gm-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.gm-stats-row {
  display: flex;
  gap: 0;
  background: rgba(0,0,0,.2);
  border-radius: 8px;
  padding: 6px 0;
}
.gm-stat {
  flex: 1;
  text-align: center;
}
.gm-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  line-height: 1;
}
.gm-lbl {
  font-size: 8px;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Dashboard mockup */
.guide-mockup-dash {
  background: var(--bg2);
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.gm-card-row {
  display: flex;
  gap: 8px;
}
.gm-mini-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.gm-mini-card.gm-green { border-left: 3px solid var(--green); }
.gm-mini-card.gm-gold  { border-left: 3px solid var(--gold); }
.gm-mini-icon { font-size: 14px; }
.gm-mini-lbl  { font-size: 10px; font-weight: 600; color: var(--text2); }

/* Fixtures mockup */
.guide-mockup-fix {
  background: var(--bg2);
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.gm-tab-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.gm-tab {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--bg3);
  color: var(--muted);
  font-weight: 600;
}
.gm-tab.active {
  background: var(--green);
  color: #fff;
}
.gm-fix-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.gm-fix-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  color: var(--green-d);
}
.gm-fix-vs {
  font-size: 9px;
  color: var(--muted);
}
.gm-fix-card.gm-upcoming { opacity: .7; }
.gm-fix-team { font-size: 10px; max-width: 80px; text-align: center; }

/* Standings mockup */
.guide-mockup-stand {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
}
.gm-table-head {
  display: flex;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg2);
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.gm-table-head span:first-child { flex: 3; }
.gm-table-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--text2);
}
.gm-table-row span { min-width: 18px; text-align: center; }
.gm-row-1 { background: rgba(15,82,40,.04); }
.gm-rank  { font-size: 12px; width: 16px; text-align: center; }
.gm-team-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Players mockup */
.guide-mockup-plr {
  background: var(--bg2);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.gm-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 6px;
  padding: 5px 8px;
  margin-top: 6px;
  border: 1px solid var(--border);
}
.gm-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gm-av2 { background: #1d6fa5; }
.gm-plr-info { flex: 1; min-width: 0; }
.gm-plr-name { font-size: 10px; font-weight: 700; }
.gm-plr-meta { font-size: 9px; color: var(--muted); }
.gm-plr-stat { font-size: 10px; font-weight: 700; color: var(--green-d); }

/* Tournament mockup */
.guide-mockup-tn {
  background: linear-gradient(135deg, #1a2e1a, #2a4a2a);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
}
.gm-tn-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.gm-tn-badge { font-size: 22px; }
.gm-tn-name { font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: 1px; }
.gm-tn-type { font-size: 9px; opacity: .7; margin-top: 1px; }
.gm-tn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 10px;
}
.gm-tn-lbl { opacity: .6; }
.gm-tn-val { font-weight: 700; color: #a3e4b0; }

/* Register mockup */
.guide-mockup-reg {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  overflow: hidden;
}
.gm-reg-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0a3d20, var(--green));
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  color: #fff;
}
.gm-reg-icon { font-size: 22px; flex-shrink: 0; }
.gm-reg-title { font-size: 11px; font-weight: 700; }
.gm-reg-sub   { font-size: 9px;  opacity: .75; margin-top: 2px; }
.gm-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.gm-form-lbl { color: var(--muted); font-weight: 600; }
.gm-form-val { color: var(--text2); }

/* Fan mockup */
.guide-mockup-fan {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.gm-fan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
}
.gm-fan-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #7b2fa3;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gm-fan-info { flex: 1; }
.gm-fan-name { font-size: 11px; font-weight: 700; }
.gm-fan-team { font-size: 9px;  color: var(--muted); }
.gm-fan-badge {
  font-size: 9px;
  background: var(--green-l);
  color: var(--green-d);
  border-radius: 10px;
  padding: 2px 7px;
  font-weight: 700;
}
.gm-rate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
}
.gm-rate-lbl   { flex: 1; font-weight: 600; }
.gm-rate-stars { display: flex; gap: 1px; }
.gm-star       { font-size: 10px; color: var(--border); }
.gm-star.active{ color: var(--gold); }
.gm-rate-num   { font-size: 10px; font-weight: 700; color: var(--green-d); }
.gm-post-preview {
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .dash-main-grid      { grid-template-columns: 1fr; }
  .dash-analytics-row  { grid-template-columns: 1fr; }
}
/* ── Tablet / large phones (≤ 768 px) ── */
@media (max-width: 768px) {
  /* ── Hero ── */
  .hero                { padding: 20px; }
  .hero-stats          { width: 100%; justify-content: space-between; }
  .hero-stat           { padding: 0 12px; }
  .hero-stat-num       { font-size: 26px; }

  /* ── Pi-Media ── */
  .media-grid          { grid-template-columns: 1fr 1fr; }
  #posts-feed          { grid-template-columns: 1fr; }

  /* ── Tournaments dashboard ── */
  .tournament-mini-card{ min-width: 150px; }
  .tn-dash-grid        { grid-template-columns: 1fr; }
  .dash-card-head      { padding: 12px 16px 10px; }

  /* ── Row padding ── */
  .scorer-row,
  .tr-row,
  .tf-row              { padding: 9px 14px; }

  /* ── Register CTA ── */
  .dash-register-cta   { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; }
  .dash-register-cta-btn { width: 100%; text-align: center; }

  /* ── Self-registration form ── */
  .sreg-grid           { grid-template-columns: 1fr; }
  .sreg-full           { grid-column: 1; }

  /* ── Guide modal ── */
  .guide-modal-box     { max-width: 100%; margin: 12px; border-radius: var(--radius-lg); }
  .guide-slides        { padding: 20px 20px 8px; min-height: 0; }
  .guide-footer        { padding: 12px 16px 16px; }

  /* ── Standings ── */
  .stand-group-grid    { grid-template-columns: 1fr; }   /* groups stack vertically */

  /* ── Bracket: allow horizontal scroll, prevent expansion beyond page ── */
  .bracket-scroll      { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bracket-col-hdr,
  .bracket-col         { min-width: 160px; }

  /* ── Data tables: tighter cells ── */
  .data-table th,
  .data-table td       { padding: 9px 10px; font-size: 12px; }

  /* ── Ensure all cards don't overflow ── */
  .card                { overflow: hidden; }

  /* ── Tab rows: scrollable, no wrapping ── */
  .tab-row             { overflow-x: auto; flex-wrap: nowrap; }
}

/* ── Small phones (≤ 480 px) ── */
@media (max-width: 480px) {
  /* ── Pi-Media ── */
  .media-grid          { grid-template-columns: 1fr; }

  /* ── Tournament teams grid ── */
  #tn-teams-grid       { grid-template-columns: 1fr !important; }

  /* ── Hero stats ── */
  .hero-stats          { gap: 0; }
  .hero-stat           { padding: 0 8px; }
  .hero-stat-divider   { height: 24px; }

  /* ── Register CTA ── */
  .dash-register-cta-title { font-size: 19px; }

  /* ── Standings table: hide GF + GA on very small screens
        (GD already shows the net; keeps table readable) ── */
  .stand-table:not(.stand-table-compact) th:nth-child(7),
  .stand-table:not(.stand-table-compact) th:nth-child(8),
  .stand-table:not(.stand-table-compact) td:nth-child(7),
  .stand-table:not(.stand-table-compact) td:nth-child(8) { display: none; }

  /* ── Standings page: tighten text ── */
  .stand-tn-name       { font-size: 18px; }
  .stand-pts           { font-size: 18px; }
  .stand-pos           { font-size: 17px; }

  /* ── Bracket: narrower columns on phone ── */
  .bracket-col-hdr,
  .bracket-col         { min-width: 140px; }

  /* ── Champion banner ── */
  .bk-champion         { padding: 10px 14px; gap: 10px; }
  .bk-champ-trophy     { font-size: 24px; }

  /* ── Data table cells: very compact ── */
  .data-table th,
  .data-table td       { padding: 8px 8px; font-size: 12px; }

  /* ── Fixture cards ── */
  .fixture-team-name   { font-size: 13px; }
}

/* ── Very small phones (≤ 360 px) ── */
@media (max-width: 360px) {
  /* Bracket columns minimum — anything smaller just scrolls */
  .bracket-col-hdr,
  .bracket-col         { min-width: 130px; }

  /* Standings: also hide W/D/L columns, keep only P and Pts */
  .stand-table th:nth-child(4),
  .stand-table th:nth-child(5),
  .stand-table th:nth-child(6),
  .stand-table td:nth-child(4),
  .stand-table td:nth-child(5),
  .stand-table td:nth-child(6) { display: none; }
}

/* ════════════════════════════════════════════════
   PLAYER / TEAM DETAIL PAGES
   ════════════════════════════════════════════════ */

/* Back navigation button */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  margin-bottom: 20px;
}
.back-btn:hover { border-color: var(--green); color: var(--green); }

/* Profile hero banner */
.profile-hero {
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.profile-hero::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.profile-hero::before {
  content: '';
  position: absolute;
  right: 60px;
  bottom: -60px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

/* Photo / logo wrapper */
.profile-photo-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.profile-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.35);
  display: block;
}
.profile-photo-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 3px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: #fff;
}
.profile-photo-upload-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.15s;
  line-height: 1;
}
.profile-photo-upload-btn:hover { transform: scale(1.12); }
.profile-photo-upload-input     { display: none; }

/* Hero info */
.profile-hero-info     { flex: 1; min-width: 0; }
.profile-hero-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 34px;
  letter-spacing: 1.5px;
  line-height: 1;
  margin-bottom: 6px;
}
.profile-hero-sub  { color: rgba(255,255,255,0.8); font-size: 14px; margin-bottom: 8px; }
.profile-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.profile-tag {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* Section card */
.profile-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.profile-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border);
}

/* Bio info grid */
.bio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.bio-item {
  padding: 14px 20px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.bio-item:nth-child(2n)    { border-right: none; }
.bio-item:last-child,
.bio-item:nth-last-child(2):nth-child(2n+1) { border-bottom: none; }
.bio-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.bio-value { font-size: 14px; font-weight: 600; }

/* Stat grid that stays 2×2 on mobile (unlike grid-4 which collapses to 1 col) */
.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .profile-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Rating block inside profile section */
.rating-block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.rating-cell {
  padding: 16px 12px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.rating-cell:last-child { border-right: none; }
.rating-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  line-height: 1;
}
.rating-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .profile-hero       { padding: 20px; gap: 16px; }
  .profile-hero-name  { font-size: 26px; }
  .profile-photo-wrap,
  .profile-photo,
  .profile-photo-placeholder { width: 78px; height: 78px; }
  .profile-photo-placeholder { font-size: 26px; }
  .rating-block       { grid-template-columns: repeat(2, 1fr); }
  .rating-cell:nth-child(2) { border-right: none; }
  .rating-cell:nth-child(3) { border-right: 1px solid var(--border); border-top: 1px solid var(--border); }
  .rating-cell:nth-child(4) { border-right: none; border-top: 1px solid var(--border); }
}
@media (max-width: 480px) {
  .profile-hero { flex-direction: column; align-items: flex-start; }
  .bio-grid     { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════
   MATCH DETAIL MODAL
   Full result page: score header, events, stats
   ═══════════════════════════════════════════════ */

/* Modal box overrides */
.md-modal-box { border-radius: var(--radius-lg) !important; overflow: hidden !important; }

/* ── Header (green) ── */
.md-header {
  background: linear-gradient(135deg, var(--green-d), var(--green));
  color: #fff;
  padding: 0 12px 14px;
}

/* Close button row — sits flush at the top-right, always fully visible */
.md-close-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  padding-bottom: 2px;
}
.md-close-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255,255,255,.9);
  font-size: 18px;
  line-height: 1;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.md-close-btn:hover { background: rgba(255,255,255,.28); color: #fff; }

.md-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.md-team-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 4px 6px;
}
.md-team-col.md-winner .md-team-clickable { background: rgba(255,255,255,.18); }
/* Clickable team badge + name area */
.md-team-clickable {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-radius: 8px;
  padding: 6px 4px 8px;
  cursor: pointer;
  transition: background .15s;
}
.md-team-clickable:hover { background: rgba(255,255,255,.12); }
.md-team-name {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  line-height: 1.2;
}

/* ── Header goal scorers (below team name in header) ── */
.md-header-scorers {
  width: 100%;
  padding: 4px 6px 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.md-header-scorer {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 0;
  line-height: 1.3;
  transition: opacity .12s;
}
.md-header-scorer:hover { opacity: .8; }
/* Home: name → balls, left-aligned */
.md-header-scorers:not(.md-header-scorers--away) .md-header-scorer {
  justify-content: flex-start;
}
/* Away: balls → name, right-aligned */
.md-header-scorers--away { align-items: flex-end; }
.md-header-scorers--away .md-header-scorer {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.md-scorer-nm {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.95);
  white-space: nowrap;
}
.md-scorer-balls {
  font-size: 10px;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.md-scorer-tag {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  margin-left: 1px;
  vertical-align: super;
}
/* Medium team badge (larger than fixture card sm badge) */
.team-badge-md {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.35);
}
.md-score-col {
  text-align: center;
  min-width: 110px;
  flex-shrink: 0;
}
.md-score-big {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 4px;
}
.md-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}
.md-live { background: var(--red);           color: #fff; }
.md-ft   { background: rgba(255,255,255,.2); color: #fff; }
.md-up   { background: rgba(255,255,255,.15);color: #fff; }
.md-meta { font-size: 10px; opacity: .75; margin-top: 5px; }
.md-venue{ font-size: 10px; opacity: .6; }

/* ── Body ── */
.md-body {
  padding: 0 16px 20px;
  overflow-y: auto;
  max-height: 60vh;
}
.md-section {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}
.md-section:first-child { border-top: none; }
.md-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── Goals / Assists (home | away split) ── */
.md-events-row {
  display: flex;
  gap: 0;
}
.md-events-home, .md-events-away {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.md-events-away { align-items: flex-end; text-align: right; }
.md-divider {
  width: 1px;
  background: var(--border);
  margin: 0 10px;
  flex-shrink: 0;
}
.md-event {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
  max-width: 100%;
}
.md-event:hover    { background: var(--muted-bg); }
.md-event-icon     { font-size: 14px; flex-shrink: 0; }
.md-event-name     { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-event-min      { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.md-nil            { font-size: 13px; color: var(--muted); padding: 3px 6px; }
.md-string-event   { font-size: 14px; font-weight: 600; }
.md-string-sub     { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── MOTM ── */
.md-motm-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--muted-bg);
  cursor: pointer;
  transition: background .12s;
}
.md-motm-row:hover { background: var(--border); }
.md-motm-str {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-d);
  text-align: center;
}

/* ── Cards / Discipline ── */
.md-cards-list { display: flex; flex-direction: column; gap: 4px; }
.md-card-event { cursor: pointer; }
.md-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.md-event-team { font-size: 11px; }

/* ── Match Stats bars ── */
.md-stats-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 10px;
}
.md-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.md-stat-val {
  width: 34px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  flex-shrink: 0;
}
.md-stat-centre {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.md-bars {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--muted-bg);
}
.md-bar-h {
  height: 100%;
  border-radius: 4px 0 0 4px;
  transition: width .4s ease;
}
.md-bar-gap { width: 2px; background: var(--bg); flex-shrink: 0; }
.md-bar-a {
  height: 100%;
  border-radius: 0 4px 4px 0;
  transition: width .4s ease;
  margin-left: auto;
}
.md-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ── Admin panel ── */
.md-admin { border-top: 2px dashed var(--green-l); }
.md-event-section {
  margin-bottom: 10px;
}
.md-event-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.md-add-btn {
  background: var(--green-l);
  color: var(--green-d);
  border: none;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.md-add-btn:hover { background: var(--green); color: #fff; }
.md-row-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

/* ── Score modal enhancements ── */
.sc-divider {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin: 14px 0 10px;
}

@media (max-width: 480px) {
  .md-score-big   { font-size: 30px; }
  .team-badge-md  { width: 42px; height: 42px; font-size: 13px; }
  .md-team-name   { font-size: 11px; }
  .md-body        { max-height: 55vh; }
}

/* ══════════════════════════════════════════════════
   FAN SYSTEM STYLES
   ══════════════════════════════════════════════════ */

/* ── Fan topbar pill ── */
.fan-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.fan-pill:hover { background: rgba(255,255,255,.25); }

/* ══════════════════════════════════════════
   UNIFIED AUTH MODAL
   ══════════════════════════════════════════ */
.auth-modal { max-width: 460px !important; padding: 0 !important; overflow: hidden; }

/* Choose screen — two big option cards */
.auth-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 24px;
}
@media (max-width: 480px) { .auth-choices { grid-template-columns: 1fr; } }

.auth-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, box-shadow .15s;
  color: var(--text);
}
.auth-choice-btn:hover {
  border-color: var(--green);
  background: #f0faf3;
  box-shadow: 0 4px 14px rgba(26,122,60,.12);
}
.auth-choice-admin:hover { border-color: #4f46e5; background: #f5f3ff; box-shadow: 0 4px 14px rgba(79,70,229,.12); }
.auth-choice-icon  { font-size: 36px; line-height: 1; }
.auth-choice-label { font-size: 14px; font-weight: 700; color: var(--text); }
.auth-choice-sub   { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Back button */
.auth-back-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 2px 4px; border-radius: 6px;
  transition: color .12s, background .12s;
  flex-shrink: 0;
}
.auth-back-btn:hover { color: var(--green); background: var(--muted-bg); }

/* Fan form (shared by choose→fan and pill→edit) */
.fan-reg-body  { padding: 0 20px 24px; }
.fan-reg-grid  { display: flex; flex-direction: column; gap: 2px; }
.fan-reg-submit {
  margin-top: 18px;
  font-size: 14px; font-weight: 700; padding: 12px;
  letter-spacing: .3px;
}
.req { color: var(--red); }

/* Profile photo upload row */
.fan-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 14px;
}
.fan-photo-circle {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-d), var(--green));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 3px solid var(--border);
}
.fan-photo-meta { display: flex; flex-direction: column; gap: 4px; }
.fan-photo-label {
  display: inline-block;
  background: var(--green);
  color: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.fan-photo-label:hover { background: var(--green-d); }
.fan-photo-hint { font-size: 11px; color: var(--muted); }

/* ── Fans page — logged out ── */
.fan-guest-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}
.fan-guest-banner {
  background: linear-gradient(135deg, var(--green-d), var(--green));
  border-radius: var(--radius-lg);
  color: #fff;
  text-align: center;
  padding: 40px 24px 32px;
  margin-bottom: 20px;
}
.fan-guest-ball { font-size: 52px; line-height: 1; margin-bottom: 12px; }
.fan-guest-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.fan-guest-sub {
  font-size: 13px;
  opacity: .85;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}
.fan-perks {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.fan-perks-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin-bottom: 12px;
}
.fan-perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.fan-perk-item:last-child { border-bottom: none; }
.fan-perk-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }

/* ── Fan profile card (logged in) ── */
.fan-profile-hero {
  background: linear-gradient(135deg, var(--green-d), var(--green));
  border-radius: var(--radius-lg);
  color: #fff;
  padding: 24px 20px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.fan-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.4);
  overflow: hidden;
}
.fan-profile-name  { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.fan-profile-meta  { font-size: 12px; opacity: .8; line-height: 1.5; }
.fan-fav-team      { font-size: 12px; font-weight: 600; margin-top: 4px; opacity: .9; }
.fan-profile-edit  {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.fan-profile-edit:hover { background: rgba(255,255,255,.32); }

/* ── Fan sections ── */
.fan-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.fan-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin-bottom: 10px;
}
.fan-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.fan-result-row:last-child { border-bottom: none; }
.fan-result-badge {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.fan-signout-btn {
  width: 100%;
  margin-top: 20px;
  padding: 11px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fan-signout-btn:hover { background: #fdecea; color: var(--red); border-color: var(--red); }

/* ── Fans page (logged-in) enhanced layout ── */
.fans-page-wrap { max-width: 600px; margin: 0 auto; padding: 16px; }
.fan-avatar-wrap { flex-shrink: 0; }
.fan-avatar-img  { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.4); display: block; }

.fan-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fan-section-header .fan-section-title { margin-bottom: 0; }

.fan-section-sub {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin: 12px 0 6px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* Mini stats grid inside fan section */
.fan-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
@media (max-width: 380px) { .fan-sub-grid { grid-template-columns: repeat(3, 1fr); } }
.fan-mini-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 8px;
  text-align: center;
}
.fan-mini-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
}
.fan-mini-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--muted);
  margin-top: 2px;
}

/* Rateable fixture row */
.fan-rate-fixture-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  border-radius: 6px;
  padding-left: 4px;
  padding-right: 4px;
}
.fan-rate-fixture-row:last-child { border-bottom: none; }
.fan-rate-fixture-row:hover { background: var(--muted-bg); }

/* ── Match detail: admin header with delete button ── */
.md-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.btn-danger-sm {
  background: #fdecea;
  color: var(--red, #c62828);
  border: 1px solid #f5c6c4;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-danger-sm:hover { background: var(--red, #c62828); color: #fff; }

/* ── Match detail: competition label ── */
.md-competition-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 6px;
}
.md-competition-tournament {
  background: rgba(26,82,150,.18);
  color: #1a5296;
}
.md-competition-friendly {
  background: rgba(100,116,139,.12);
  color: #64748b;
}

/* ══════════════════════════════════════════════════
   SOCIAL POSTS FEED
   ══════════════════════════════════════════════════ */

/* Media page layout */
.media-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.media-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .5px;
}
.posts-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
}
.posts-empty-icon { font-size: 40px; margin-bottom: 12px; }

/* ════════════════════════════════════════════════
   MEDIA / POSTS FEED — compact 2-column card grid
   ════════════════════════════════════════════════ */
#posts-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.post-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: box-shadow .2s, transform .15s;
  display: flex;
  flex-direction: column;
}
.post-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-1px);
}

/* Compact header */
.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
}
.post-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-d), var(--green));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.post-author { font-size: 12px; font-weight: 700; line-height: 1.3; }
.post-date   { font-size: 10px; color: var(--muted); }
.post-delete-btn {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  font-size: 15px; opacity: .4; padding: 3px;
  border-radius: 50%;
  transition: opacity .12s, background .12s;
}
.post-delete-btn:hover { opacity: 1; background: #fdecea; }

/* Post caption — capped at 3 lines */
.post-caption {
  padding: 4px 12px 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.post-caption-inner {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Media: fixed-height container; image fully visible (no crop) ── */
.post-media-wrap {
  width: 100%;
  height: 220px;           /* consistent card height across the grid */
  overflow: hidden;
  background: #f5f5f5;     /* neutral fill for letterbox/pillarbox areas */
  display: flex;
  align-items: center;
  justify-content: center;
  order: -1;               /* media above caption */
  border-bottom: 1px solid var(--border);
}
.post-media-img {
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;     /* full image always visible, no cropping */
  display: block;
  transition: transform .25s;
}
.post-card:hover .post-media-img { transform: scale(1.03); }

.post-video-wrap {
  width: 100%;
  height: 220px;
  background: #000;
  overflow: hidden;
  order: -1;
}
.post-video-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}
.post-video-link {
  display: block;
  padding: 10px 12px;
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}

/* Compact action bar */
.post-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.post-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px;
  font-size: 12px; cursor: pointer;
  color: var(--text);
  transition: background .12s, color .12s, border-color .12s;
  font-weight: 500;
  white-space: nowrap;
}
.post-action-btn:hover  { background: var(--muted-bg); }
.post-action-btn.active { background: #e8f5e9; color: var(--green); border-color: var(--green); }
.post-action-btn.active-red { background: #fdecea; color: var(--red); border-color: var(--red); }
.post-toggle-comments { margin-left: auto; }
.post-comment-count { margin-left: auto; font-size: 12px; color: var(--muted); }

.post-comments {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--muted-bg);
}
.post-comment {
  padding: 7px 0 3px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.post-comment:last-child { border-bottom: none; }
.post-comment-body {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.post-comment-author { font-weight: 700; flex-shrink: 0; color: var(--green); }
.post-comment-text   { color: var(--text); line-height: 1.45; flex: 1; }
/* Per-comment action row */
.post-comment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-left: 0;
}
.post-comment-react {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 8px;
  font-size: 12px; cursor: pointer; color: var(--text);
  transition: background .12s, color .12s, border-color .12s;
}
.post-comment-react:hover { background: var(--muted-bg); }
.post-comment-react.active-like { background: #e8f5e9; color: var(--green); border-color: var(--green); }
.post-comment-react.active-dislike { background: #fdecea; color: var(--red); border-color: var(--red); }
.post-comment-reply-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--muted); padding: 2px 6px;
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.post-comment-reply-btn:hover { color: var(--green); background: var(--muted-bg); }
/* Nested replies */
.post-replies {
  margin-top: 6px;
  margin-left: 18px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.post-reply {
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.post-reply:last-child { border-bottom: none; }
.post-reply-body { display: flex; gap: 6px; }
.post-reply-author { font-weight: 700; color: var(--green); flex-shrink: 0; font-size: 12px; }
.post-reply-text   { color: var(--text); line-height: 1.4; }
.post-reply-input-row {
  display: flex; gap: 6px; margin-top: 6px;
}
.post-reply-input {
  flex: 1; border: 1px solid var(--border);
  border-radius: 16px; padding: 5px 12px;
  font-size: 12px; background: var(--card-bg);
  color: var(--text); outline: none;
}
.post-reply-input:focus { border-color: var(--green); }
.post-reply-send {
  background: var(--green); color: #fff;
  border: none; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer;
  font-size: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.post-reply-send:hover { background: var(--green-d); }
.post-comment-show-replies {
  font-size: 12px; color: var(--green); cursor: pointer;
  background: none; border: none; padding: 2px 0 0;
  font-weight: 600;
}
.post-comment-show-replies:hover { text-decoration: underline; }
.post-comment-input-row {
  display: flex; gap: 8px; margin-top: 10px;
}
.post-comment-input {
  flex: 1; border: 1px solid var(--border);
  border-radius: 20px; padding: 7px 14px;
  font-size: 13px; background: var(--card-bg);
  color: var(--text);
  outline: none;
}
.post-comment-input:focus { border-color: var(--green); }
.post-comment-send {
  background: var(--green); color: #fff;
  border: none; border-radius: 50%;
  width: 34px; height: 34px; cursor: pointer;
  font-size: 15px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.post-comment-send:hover { background: var(--green-d); }
.post-comment-login-hint {
  font-size: 12px; color: var(--muted);
  text-align: center; padding: 8px 0;
  cursor: pointer;
}
.post-comment-login-hint:hover { color: var(--green); }

/* Post type selector buttons */
.post-type-btn {
  flex: 1; padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px; background: none;
  font-size: 13px; cursor: pointer;
  transition: background .12s, color .12s;
  color: var(--text);
  font-weight: 500;
}
.post-type-btn.active {
  background: var(--green); color: #fff; border-color: var(--green);
}

/* ══════════════════════════════════════════════════
   FAN MATCH RATINGS (inside match detail modal)
   ══════════════════════════════════════════════════ */

.md-fan-rating-login {
  margin-bottom: 12px;
  text-align: center;
}
.fan-rate-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fan-rate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fan-rate-player {
  display: flex; align-items: center; gap: 8px;
  min-width: 120px; flex-shrink: 0;
}
.fan-rate-avg {
  min-width: 52px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
.fan-avg-num   { display: block; font-weight: 700; font-size: 16px; color: var(--gold-d); }
.fan-avg-votes { display: block; font-size: 10px; }
.fan-rate-btns {
  display: flex; gap: 3px; flex-wrap: wrap;
}
.fan-rate-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--muted-bg);
  font-size: 11px; font-weight: 700;
  cursor: pointer; color: var(--text);
  transition: background .1s, color .1s;
  display: flex; align-items: center; justify-content: center;
}
.fan-rate-btn:hover   { background: var(--green-l, #e8f5e9); }
.fan-rate-btn.selected {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* ══════════════════════════════════════════════════
   PLAYER FAN RATING BLOCK (player detail page)
   ══════════════════════════════════════════════════ */

.fan-rating-loading {
  font-size: 13px; color: var(--muted);
  padding: 8px 20px;
}
.fan-rating-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 20px 16px;
}
.fan-rating-card {
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
}
.fan-rating-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--gold-d);
  line-height: 1;
}
.fan-rating-lbl  { font-size: 11px; color: var(--muted); margin-top: 4px; }
.fan-rating-cnt  { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ══════════════════════════════════════════════════
   TOURNAMENT SYSTEM OVERHAUL — v5
   Full-page detail, team grid, group allocation,
   stage flow, card teams, setup wizard, KO bracket
   ══════════════════════════════════════════════════ */

/* ── Tournament Detail Full Page ── */
#page-tournament-detail { padding: 0; }

.tn-detail-back {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.tn-detail-back-btn {
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--green);
  display: flex; align-items: center; gap: 5px; padding: 4px 8px;
  border-radius: var(--radius); transition: background .15s;
}
.tn-detail-back-btn:hover { background: var(--green-l); }

.tn-detail-header {
  padding: 22px 20px 20px;
  color: #fff;
}
.tn-detail-header-type {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(255,255,255,.75);
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.tn-detail-header-status {
  font-size: 10px; font-weight: 700; background: rgba(255,255,255,.25);
  padding: 2px 10px; border-radius: 20px; color: #fff;
}
.tn-detail-header-name {
  font-size: 22px; font-weight: 700; margin-bottom: 4px; line-height: 1.2;
}
.tn-detail-header-meta { font-size: 12px; color: rgba(255,255,255,.75); }

.tn-detail-body { padding: 20px 16px; }

/* ── Stage Flow Pills ── */
.tn-stage-flow {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.tn-stage-pill {
  padding: 5px 16px; border-radius: 20px;
  font-size: 12px; font-weight: 600; border: 1.5px solid;
  cursor: default;
}
.tn-stage-pill.done    { background: #f0faf4; color: var(--green); border-color: var(--green); }
.tn-stage-pill.active  { background: var(--green); color: #fff; border-color: var(--green); }
.tn-stage-pill.pending { color: var(--muted); border-color: var(--border); background: #fff; }
.tn-stage-arrow { font-size: 16px; color: var(--muted); }

/* ── Section Labels ── */
.tn-section-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted);
  margin-bottom: 10px; margin-top: 4px;
}

/* ── Team Grid (detail page) ── */
.tn-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.tn-team-tile {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; cursor: pointer; padding: 10px 6px;
  border-radius: 10px; border: 1px solid var(--border);
  text-align: center; transition: background .15s, border-color .15s;
  background: #fff;
}
.tn-team-tile:hover { background: var(--green-l); border-color: var(--green); }
.tn-tile-logo {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--border);
}
.tn-tile-dot {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 14px; color: #fff;
  flex-shrink: 0;
}
.tn-tile-name {
  font-size: 11px; font-weight: 600; line-height: 1.2;
  word-break: break-word; color: var(--text);
}

/* ── Group Allocation Grid ── */
.tn-group-alloc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.tn-group-alloc-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; background: #fff;
}
.tn-group-alloc-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); margin-bottom: 8px;
}
.tn-group-team-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; cursor: pointer;
  font-size: 12px; font-weight: 600; transition: color .15s;
}
.tn-group-team-row:hover { color: var(--green); }
.tn-group-team-badge {
  width: 22px; height: 22px; border-radius: 50%;
  flex-shrink: 0; object-fit: cover;
}

/* ── Tournament Card Team Row ── */
.tn-card-teams {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 10px 16px 12px; border-top: 1px solid var(--border);
}
.tn-card-team {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 4px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; cursor: pointer;
  transition: border-color .15s; text-decoration: none;
}
.tn-card-team:hover { border-color: var(--green); }
.tn-card-team-logo {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
}
.tn-card-team-dot  {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
}
.tn-card-team-name { font-size: 11px; font-weight: 600; color: var(--text); }

/* ── Setup Wizard ── */
.setup-wizard-step {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px;
}
.setup-wizard-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); margin-bottom: 10px;
}
.setup-cnt-btn, .setup-adv-btn {
  min-width: 40px; font-weight: 700; transition: all .15s;
}
.setup-cnt-btn.active, .setup-adv-btn.active {
  background: var(--green) !important;
  color: #fff !important; border-color: var(--green) !important;
}

/* ── Group Assign Modal Rows ── */
.group-assign-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.group-assign-row:last-child { border-bottom: none; }
.group-assign-badge {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 11px; color: #fff;
  flex-shrink: 0; object-fit: cover;
}

/* ── Admin Controls (detail page) ── */
.tn-admin-panel {
  border-top: 2px solid var(--border);
  padding-top: 20px; margin-top: 8px;
}
.tn-admin-section { margin-bottom: 20px; }
.tn-admin-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); margin-bottom: 10px;
}
.tn-team-manage-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.tn-team-manage-row:last-child { border-bottom: none; }
.tn-remove-team-btn {
  background: none; border: none; cursor: pointer;
  color: var(--red); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 4px; transition: background .15s;
  margin-left: auto; flex-shrink: 0;
}
.tn-remove-team-btn:hover { background: rgba(192,57,43,.1); }

/* ── Fixture Page Group Strip ── */
.fix-tournament-filter {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.fix-tournament-filter select {
  flex: 1; min-width: 0;
}
.fix-group-strip {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px;
}
.fix-group-strip-title {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
}
.fix-group-tbl { width: 100%; font-size: 11px; border-collapse: collapse; }
.fix-group-tbl td { padding: 3px 4px; }
.fix-group-tbl .fgt-num { text-align: right; min-width: 22px; font-variant-numeric: tabular-nums; }
.fix-group-tbl .fgt-pts { text-align: right; min-width: 24px; font-weight: 700; color: var(--green); }
.fix-group-tbl .fgt-team { display: flex; align-items: center; gap: 5px; }
.fix-group-tbl .fgt-badge { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.fgt-adv { color: var(--green); font-size: 10px; font-weight: 700; }

/* ── Knockout bracket improvements ── */
.bk-tbd-label {
  color: var(--muted); font-style: italic; font-size: 11px;
}

/* ── Group standings improvements ── */
.stand-adv-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 9px;
  font-weight: 700; margin-left: 4px; flex-shrink: 0;
}

/* ── Empty state for tournament detail ── */
.tn-setup-prompt {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 24px; text-align: center; margin-bottom: 20px;
}
.tn-setup-prompt-icon { font-size: 36px; margin-bottom: 8px; }
.tn-setup-prompt-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.tn-setup-prompt-sub { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

/* ── KO Seeding matchup rows ── */
.ko-seed-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.ko-seed-row:last-child { border-bottom: none; }
.ko-seed-vs { color: var(--muted); font-weight: 700; flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .tn-team-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
  .tn-group-alloc-grid { grid-template-columns: repeat(2, 1fr); }
  .bracket-scroll { -webkit-overflow-scrolling: touch; }
  .tn-card-teams { padding: 8px 12px 10px; }
  .tn-detail-header { padding: 18px 16px 16px; }
  .tn-detail-body { padding: 16px 12px; }
}
@media (max-width: 480px) {
  .tn-team-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
  .tn-tile-logo, .tn-tile-dot { width: 36px; height: 36px; }
  .tn-tile-name { font-size: 10px; }
  .tn-group-alloc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tn-detail-header-name { font-size: 18px; }
  .fan-rating-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════
   MOBILE POLISH — fixture cards, hero, team grid
   (supplements the breakpoints above)
   ════════════════════════════════════════════════ */

/* ── Tablet / large phones (≤ 768 px) ── */
@media (max-width: 768px) {
  /* Hero: slightly smaller title for clean proportions */
  .hero-title                { font-size: 28px; letter-spacing: 1px; }

  /* Fixture card: tighter padding so it's more compact */
  .fixture-card              { padding: 10px 12px; gap: 8px; }
  .team-badge-sm             { width: 28px; height: 28px; font-size: 11px; }
  .team-side                 { gap: 7px; min-width: 0; }
  /* Prevent team names from wrapping to next line */
  .team-label                { font-size: 12px; white-space: nowrap;
                               overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .score-center              { font-size: 18px; padding: 5px 10px;
                               min-width: 60px; letter-spacing: 2px; }
  .score-center.upcoming     { font-size: 10px; padding: 5px 8px; line-height: 1.4; }

  /* Teams page: 2-column grid instead of full-width 1 column */
  #teams-grid                { grid-template-columns: 1fr 1fr !important; }
  .team-avatar               { width: 38px; height: 38px; font-size: 14px; }
  .team-card-name            { font-size: 13px; }
  .team-card-meta            { font-size: 10px; }
  .tcs-num                   { font-size: 16px; }
  .tcs-label                 { font-size: 9px; }
}

/* ── Small phones (≤ 480 px) ── */
@media (max-width: 480px) {
  /* Hero: compact but still impactful */
  .hero                      { padding: 14px 16px; }
  .hero-title                { font-size: 22px; }

  /* Fixture cards: even tighter on small phones */
  .fixture-card              { padding: 8px 10px; gap: 5px; }
  .team-badge-sm             { width: 24px; height: 24px; font-size: 9px; }
  .score-center              { font-size: 15px; padding: 4px 8px;
                               min-width: 50px; letter-spacing: 1px; }
  .score-center.upcoming     { font-size: 9px; padding: 4px 6px; }

  /* Team cards: tighter body padding on small phones */
  .team-card-body            { padding: 10px 10px; }
  .team-avatar               { width: 32px; height: 32px; font-size: 12px; margin-bottom: 6px; }
  .team-card-name            { font-size: 12px; }
  .team-card-stats           { margin-top: 8px; padding-top: 8px; }
}

/* ── Very small phones (≤ 360 px) ── */
@media (max-width: 360px) {
  .hero-title                { font-size: 19px; }
  .hero                      { padding: 12px; }
  /* Revert teams to 1 column on truly tiny screens */
  #teams-grid                { grid-template-columns: 1fr !important; }
  .fixture-card              { padding: 6px 8px; gap: 4px; }
  .team-badge-sm             { width: 22px; height: 22px; }
}

/* ════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — v10
   Elegant, classy, professional sports-grade UI
   ════════════════════════════════════════════════════════════ */

/* ── Enhanced shadow & lift tokens ── */
:root {
  --shadow-sm:    0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.06);
  --shadow-green: 0 6px 24px rgba(26,122,60,.25);
  --lift:         translateY(-3px);
}

/* ── Page fade-in ── */
@keyframes pageFade {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.page.active { animation: pageFade 0.22s ease both; }

/* ════════════════════════════════════════════════════════════
   PREMIUM TEAM CARD  (tc-*)
   Colored top band with floating logo, white stats body
   ════════════════════════════════════════════════════════════ */
.tc-premium {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: visible;            /* logo pops above the card */
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.22s, border-color 0.2s;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
}
.tc-premium:hover {
  box-shadow: var(--shadow-lg);
  transform: var(--lift);
  border-color: transparent;
}
.tc-header {
  height: 90px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* No overflow:hidden — allows logo to float below the band */
}
.tc-header::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.18));
  pointer-events: none;
}
/* Decorative dot pattern */
.tc-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
}
.tc-logo-wrap {
  position: relative;
  z-index: 2;
  transform: translateY(34px);
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--bg2);
  box-shadow: 0 6px 22px rgba(0,0,0,.26);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 3px solid var(--bg2);
  flex-shrink: 0;
}
.tc-logo-wrap img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.tc-logo-initials { font-family:'Bebas Neue',sans-serif; font-size:24px; line-height:1; }
.tc-body {
  padding: 42px 14px 14px;
  text-align: center;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--bg2);
}
.tc-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.tc-meta {
  font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-stats {
  display: flex; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tc-stat { flex:1; text-align:center; border-right:1px solid var(--border); }
.tc-stat:last-child { border-right: none; }
.tc-stat-num {
  font-family: 'Bebas Neue', sans-serif; font-size: 20px;
  color: var(--green); line-height: 1;
}
.tc-stat-lbl {
  font-size: 9px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px; margin-top: 1px;
}

/* ════════════════════════════════════════════════════════════
   PREMIUM PROFILE HERO  (ph-*)
   Two-band: identity + stats ribbon — no logo overlap ever
   ════════════════════════════════════════════════════════════ */
.ph-wrap {
  margin-bottom: 22px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ph-band {
  display: flex; align-items: center; gap: 22px;
  padding: 28px 32px;
  color: #fff; position: relative; overflow: hidden;
}
/* Decorative circles */
.ph-band::after {
  content: '';
  position: absolute; right: -50px; top: -50px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.06); pointer-events: none;
}
.ph-band::before {
  content: '';
  position: absolute; right: 80px; bottom: -70px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.04); pointer-events: none;
}
/* Dot pattern on hero */
.ph-band-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 18px 18px;
  z-index: 0;
}
.ph-photo-wrap {
  flex-shrink: 0; width: 96px; height: 96px;
  position: relative; z-index: 1;
}
.ph-photo {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 3px solid rgba(255,255,255,.45);
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.ph-placeholder {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 3px solid rgba(255,255,255,.4);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: #fff;
}
.ph-upload-btn {
  position: absolute; bottom: 2px; right: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  transition: transform .15s; line-height: 1; z-index: 2;
}
.ph-upload-btn:hover { transform: scale(1.12); }
.ph-info {
  flex: 1; min-width: 0; position: relative; z-index: 1;
}
.ph-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px; letter-spacing: 1.5px; line-height: 1; margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-fullname { color: rgba(255,255,255,.75); font-size: 13px; margin-bottom: 2px; }
.ph-sub { color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.5; }
.ph-phone { color: rgba(255,255,255,.65); font-size: 12px; margin-top: 3px; }
.ph-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ph-tag {
  padding: 3px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  color: #fff; white-space: nowrap;
}

/* ── Team logo tag inside ph-tags (player hero, replaces pos badge) ── */
.ph-tag-team {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 14px 4px 5px;
  border-radius: 24px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.38);
  cursor: pointer;
  transition: background .16s, transform .16s;
}
.ph-tag-team:hover { background: rgba(255,255,255,.3); transform: scale(1.04); }
.ph-tag-team-logo {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 2px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.ph-tag-team-ini {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 12px; color: #fff;
  border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
}
.ph-tag-team-name {
  font-size: 13px; font-weight: 700; letter-spacing: .3px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}

/* ── Positions row (below tags inside team hero ph-info) ── */
.ph-positions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
  position: relative; z-index: 1;
}
.ph-pos-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  transition: background .16s, transform .16s;
}
.ph-pos-chip-tn { cursor: pointer; }
.ph-pos-chip-tn:hover { background: rgba(0,0,0,.42); transform: scale(1.04); }
.ph-pos-chip-rank {
  font-family: 'Bebas Neue', sans-serif; font-size: 15px; line-height: 1;
}
.ph-pos-chip-lbl {
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
  color: rgba(255,255,255,.7); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100px;
}

/* Stats ribbon (band 2) */
.ph-ribbon {
  display: flex; padding: 12px 32px; gap: 0;
  align-items: center;
}
.ph-ribbon-stat {
  flex: 1; text-align: center; position: relative;
}
.ph-ribbon-stat:not(:last-child)::after {
  content: ''; position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 28px; background: rgba(255,255,255,.2);
}
.ph-ribbon-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px; color: #fff; line-height: 1;
}
.ph-ribbon-num.gold { color: var(--gold); }
.ph-ribbon-num.red  { color: rgba(255,150,150,1); }
.ph-ribbon-lbl {
  font-size: 9px; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .5px; margin-top: 1px;
}

/* Footer strip */
.ph-footer {
  padding: 7px 32px 9px;
  font-size: 11px; color: rgba(255,255,255,.6);
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ════════════════════════════════════════════════════════════
   PREMIUM PLAYER ROW  (plr-*)
   ════════════════════════════════════════════════════════════ */
.plr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.plr-row:last-child { border-bottom: none; }
.plr-row:hover { background: rgba(26,122,60,.04); }
.plr-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 18px;
}
.plr-avatar img { width:100%; height:100%; object-fit:cover; }
.plr-info { flex: 1; min-width: 0; }
.plr-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plr-meta {
  font-size: 11px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Card badges on player rows */
.plr-cards {
  display: flex; gap: 5px; align-items: center; flex-shrink: 0;
}
.plr-card-badge {
  display: flex; align-items: center; gap: 2px;
  font-family: 'Bebas Neue', sans-serif; font-size: 14px;
  padding: 2px 7px; border-radius: 6px; line-height: 1;
}
.plr-card-badge.goals   { background: #e8f5ee; color: #1a7a3c; border: 1px solid #2d9d55; }
.plr-card-badge.assists { background: #fef6e4; color: #b87a0a; border: 1px solid #f5a623; }
.plr-card-badge.yellow  { background: #fff8e1; color: #c47d0a; border: 1px solid #f5a623; }
.plr-card-badge.red     { background: #fef2f2; color: #c0392b; border: 1px solid #e74c3c; }

/* ── Clickable team logo badge (replaces pos badge in player rows) ── */
.plr-team-logo {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .18s, box-shadow .18s;
  display: block;
}
.plr-team-logo:hover { transform: scale(1.14); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.plr-team-logo-ini {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px; color: #fff;
  border: 2px solid rgba(255,255,255,.3);
}

/* ════════════════════════════════════════════════════════════
   FAN RATINGS — Golden hero band  (fr-*)
   ════════════════════════════════════════════════════════════ */
.fr-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 0;  /* sits inside .profile-section which has its own spacing */
}
.fr-band {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 28px;
  background: linear-gradient(145deg, #7a5200, #b87a0a, #d4a017);
  color: #fff; position: relative; overflow: hidden;
}
.fr-band::after {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.08); pointer-events: none;
}
.fr-band::before {
  content: '';
  position: absolute;
  background-image: radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 16px 16px;
  inset: 0; pointer-events: none;
}
.fr-icon {
  font-size: 36px; line-height: 1; flex-shrink: 0; position: relative; z-index: 1;
}
.fr-info { position: relative; z-index: 1; }
.fr-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 1.5px; line-height: 1; margin-bottom: 3px;
}
.fr-sub { font-size: 12px; color: rgba(255,255,255,.75); }
.fr-ribbon {
  display: flex;
  background: linear-gradient(to right, #5c3d00, #7a5200);
  padding: 12px 28px;
}
.fr-stat {
  flex: 1; text-align: center; position: relative;
}
.fr-stat:not(:last-child)::after {
  content: ''; position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 30px; background: rgba(255,255,255,.2);
}
.fr-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px; color: var(--gold); line-height: 1;
}
.fr-stat-lbl { font-size: 11px; color: rgba(255,255,255,.8); margin-top: 2px; font-weight: 600; }
.fr-stat-votes { font-size: 10px; color: rgba(255,255,255,.55); margin-top: 1px; }
.fr-loading {
  background: linear-gradient(to right, #5c3d00, #7a5200);
  color: rgba(255,255,255,.6); font-size: 13px;
  padding: 16px 28px; text-align: center;
}

/* ════════════════════════════════════════════════════════════
   ENHANCED FIXTURE CARD (overrides existing)
   ════════════════════════════════════════════════════════════ */
.fixture-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s, transform .18s;
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
}
.fixture-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(26,122,60,.22);
  transform: translateY(-1px);
}
.fixture-card.live-card {
  border-color: var(--red);
  box-shadow: 0 0 0 1.5px var(--red), var(--shadow-sm);
}

/* ════════════════════════════════════════════════════════════
   PROFILE SECTION HEADERS — premium left-stripe style
   ════════════════════════════════════════════════════════════ */
.profile-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.profile-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px; letter-spacing: 1px; color: var(--text);
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to right, rgba(26,122,60,.04), transparent);
  display: flex; align-items: center; gap: 8px;
}
.profile-section-title::before {
  content: ''; width: 3px; height: 14px;
  background: var(--green); border-radius: 2px; flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD CARD POLISH
   ════════════════════════════════════════════════════════════ */
.card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow-md); }

/* Enhanced dashboard hero */
.hero {
  box-shadow: var(--shadow-green);
  background: linear-gradient(145deg, #073d1a 0%, #0f5228 40%, #1a7a3c 100%);
}

/* Subtle football pitch lines on hero */
.hero::after {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0) 32%,
      rgba(255,255,255,.03) 32%, rgba(255,255,255,.03) 34%,
      rgba(255,255,255,0) 34%
    ),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 100%),
    rgba(255,255,255,.05);
  right: -50px; top: -50px; width: 240px; height: 240px;
}

/* Scorer row hover polish */
.scorer-row:hover { background: rgba(26,122,60,.05); }

/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — premium classes
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ph-band { padding: 20px 18px; gap: 14px; }
  .ph-photo-wrap, .ph-photo, .ph-placeholder { width: 78px; height: 78px; }
  .ph-placeholder { font-size: 26px; }
  .ph-name { font-size: 26px; }
  .ph-ribbon { padding: 10px 18px; }
  .ph-ribbon-num { font-size: 22px; }
  .ph-footer { padding: 7px 18px; }
  /* Team card: smaller logo on tablet */
  .tc-header { height: 76px; }
  .tc-logo-wrap { width: 58px; height: 58px; transform: translateY(29px); }
  .tc-logo-initials { font-size: 20px; }
  .tc-body { padding: 36px 10px 12px; }
  /* Fan ratings */
  .fr-band { padding: 16px 18px; gap: 12px; }
  .fr-icon { font-size: 28px; }
  .fr-title { font-size: 18px; }
  .fr-ribbon { padding: 10px 18px; }
  .fr-stat-num { font-size: 26px; }
}
@media (max-width: 480px) {
  .ph-band { padding: 16px 14px; gap: 12px; }
  .ph-photo-wrap, .ph-photo, .ph-placeholder { width: 64px; height: 64px; }
  .ph-placeholder { font-size: 22px; }
  .ph-name { font-size: 22px; }
  .ph-sub { font-size: 11px; }
  .ph-ribbon { padding: 8px 14px; }
  .ph-ribbon-num { font-size: 20px; }
  .ph-ribbon-lbl { font-size: 8px; }
  .ph-footer { padding: 6px 14px; }
  /* Team card: compact on small phones */
  .tc-header { height: 68px; }
  .tc-logo-wrap { width: 52px; height: 52px; transform: translateY(26px); }
  .tc-logo-initials { font-size: 18px; }
  .tc-body { padding: 32px 10px 12px; }
  .fr-band { padding: 14px; gap: 10px; }
  .fr-icon { font-size: 24px; }
  .fr-title { font-size: 16px; }
  .fr-ribbon { padding: 8px 14px; }
  .fr-stat-num { font-size: 24px; }
  .fr-stat-lbl { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════
   IMAGE CROP MODAL — always renders above all other modals
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   TOURNAMENT FIXTURE ROWS — enhanced layout
   ════════════════════════════════════════════════════════════ */

/* Round section header */
.tn-round-header {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
  padding: 6px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}

/* Each fixture row */
.tn-fx-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px; border-bottom: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 2px;
  transition: background .12s;
}
.tn-fx-row:hover { background: var(--bg); }

/* Next match highlight */
.tn-fx-row-next {
  background: var(--bg);
  border: 1.5px solid var(--green);
  border-radius: 10px;
  border-bottom: 1.5px solid var(--green);
}
.tn-fx-row-next:hover { background: var(--green-l, #eaf5ee); }

/* Team name with logo */
.tn-fx-team-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Centre column (round badge + score/date) */
.tn-fx-centre {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  min-width: 96px; text-align: center;
}

/* Round / group badge inside the card */
.tn-fx-round-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; padding: 2px 7px; border-radius: 10px;
  white-space: nowrap;
}
.tn-fx-round-group {
  background: rgba(16, 130, 50, 0.10);
  color: var(--green);
  border: 1px solid rgba(16, 130, 50, 0.20);
}
.tn-fx-round-ko {
  background: rgba(26, 58, 124, 0.10);
  color: #1a3a7c;
  border: 1px solid rgba(26, 58, 124, 0.18);
}

/* Match number badge (M1, M2 … M21) */
.tn-fx-match-no {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--muted);
  background: var(--bg3);
  border-radius: 6px;
  padding: 1px 5px;
  margin-bottom: 2px;
  display: inline-block;
}

/* Score text */
.tn-fx-score { line-height: 1.3; }

/* Score button */
.tn-fx-score-btn {
  font-size: 10px; padding: 4px 8px; flex-shrink: 0;
}

/* Next Match banner */
.tn-next-match-banner {
  border-radius: 10px; margin-bottom: 16px;
  padding: 10px 10px 4px;
  background: var(--green-l, #eaf5ee);
  border: 1.5px solid var(--green);
}
.tn-next-match-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; color: var(--green);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px;
}
.tn-next-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  animation: pulse 1.2s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 480px) {
  .tn-fx-team-name { font-size: 12px; }
  .tn-fx-centre    { min-width: 78px; }
  .tn-fx-round-badge { font-size: 8px; padding: 1px 5px; }
}

#modal-image-crop {
  z-index: 650; /* above standard modal z-index: 500 */
}

/* ══════════════════════════════════════════════
   PI SOCIAL — Poll cards, tags, mini posts
   ══════════════════════════════════════════════ */

/* Post type pill (shown in poll card header) */
.post-type-pill {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 10px; background: var(--green-l); color: var(--green);
  margin-left: 6px; vertical-align: middle;
}

/* Player / Team tag badges on post cards */
.post-tag-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 16px 0;
}
.post-tag-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  cursor: pointer; transition: opacity .15s;
}
.post-tag-badge:hover { opacity: .75; }
.post-tag-player {
  background: rgba(26,122,60,.1); color: var(--green);
  border: 1px solid rgba(26,122,60,.25);
}
.post-tag-team {
  background: rgba(26,82,150,.1); color: #1a5296;
  border: 1px solid rgba(26,82,150,.25);
}

/* Poll question */
.post-poll-question {
  font-size: 14px; font-weight: 700;
  padding: 12px 16px 6px; line-height: 1.4;
}

/* Poll options wrapper */
.poll-options-wrap {
  padding: 8px 16px 12px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Individual poll option button */
.poll-option-btn {
  width: 100%; text-align: left;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  cursor: pointer; transition: border-color .15s, background .15s;
  position: relative; overflow: hidden;
}
.poll-option-btn:hover { border-color: var(--green); }
.poll-option-btn.poll-opt-selected {
  border-color: var(--green);
  background: var(--green-l, #eaf5ee);
}
.poll-opt-top {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  position: relative; z-index: 1;
}
.poll-opt-label { font-size: 13px; font-weight: 600; }
.poll-opt-count { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Vote bar */
.poll-opt-bar-bg {
  margin-top: 8px; height: 4px; border-radius: 3px;
  background: var(--border); overflow: hidden;
}
.poll-opt-bar-fill {
  height: 100%; background: var(--green); border-radius: 3px;
  transition: width .4s ease;
}

/* Total vote count */
.poll-total-votes {
  font-size: 11px; color: var(--muted); text-align: right;
  margin-top: 4px;
}

/* Poll type toggle (in modal) */
#poll-type-single.active, #poll-type-multi.active {
  background: var(--green); color: #fff; border-color: var(--green);
}

/* Poll option rows in the modal */
.poll-option-row input {
  display: block; width: 100%;
}

/* Player search autocomplete */
.player-search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 200; max-height: 220px; overflow-y: auto;
}
.player-search-item {
  padding: 10px 14px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.player-search-item:last-child { border-bottom: none; }
.player-search-item:hover { background: var(--bg); }

/* Tagged player pill (after selection in modal) */
.post-player-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--green-l); color: var(--green);
  border: 1px solid var(--green); border-radius: 20px;
  padding: 4px 10px;
}

/* Pi Social section grid in team/player detail */
.pi-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 12px 16px;
}

/* Mini post card */
.mini-post-card {
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; cursor: pointer; transition: border-color .15s;
  background: var(--surface);
}
.mini-post-card:hover { border-color: var(--green); }
.mini-post-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}
.mini-post-poll-badge {
  padding: 16px 10px; text-align: center;
  font-size: 11px; font-weight: 700; color: var(--green);
  background: var(--green-l);
}
.mini-post-caption {
  font-size: 11px; padding: 6px 8px 2px;
  line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-post-meta {
  font-size: 10px; color: var(--muted); padding: 3px 8px 8px;
}

/* Responsive */
@media (max-width: 480px) {
  .pi-social-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
}

/* ═══════════════════════════════════════════════
   NOTIFICATIONS & ACTIVITY FEED
   ═══════════════════════════════════════════════ */

/* Badge on Fans nav link */
.notif-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e53935;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  margin-left: 4px;
  line-height: 1;
  vertical-align: middle;
}

/* Unread count badge inside the notification section header */
.notif-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* Individual notification item */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }

/* Unread highlight */
.notif-item.notif-unread { background: var(--green-l); }
.notif-item.notif-unread:hover { background: #d4edda; }

/* Read/unread dot indicator */
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  margin-top: 5px;
}
.notif-dot.notif-dot-read {
  background: var(--border);
}

/* Notification text */
.notif-message {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
  padding-right: 22px;
}
.notif-item.notif-unread .notif-message { font-weight: 600; }

/* Timestamp */
.notif-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* Delete × button */
.notif-delete-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .15s;
}
.notif-item:hover .notif-delete-btn { opacity: 1; }
.notif-delete-btn:hover { background: var(--bg3); color: #e53935; }

/* Empty state */
.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Activity feed items */
.activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.activity-item:last-child { border-bottom: none; }
.activity-text {
  color: var(--text);
  flex: 1;
  line-height: 1.4;
}
.activity-time {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Section header inside fan page */
.fan-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.fan-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .5px;
}

@media (max-width: 480px) {
  .notif-item { padding: 10px 12px; }
  .notif-message { font-size: 12px; }
}