/* ============================================================
   WC2026 Sweepstake v2 — style.css
   ============================================================ */

:root {
  --g900: #052e16; --g800: #14532d; --g700: #15803d; --g600: #16a34a;
  --g100: #dcfce7; --g50: #f0fdf4;
  --a400: #fbbf24; --a500: #f59e0b; --a100: #fef3c7;
  --w: #fff;
  --s50: #f9fafb; --s100: #f3f4f6; --s200: #e5e7eb; --s300: #d1d5db;
  --s400: #9ca3af; --s500: #6b7280; --s700: #374151; --s900: #111827;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --sh: 0 1px 4px rgba(0,0,0,.07);
  --sh-md: 0 4px 16px rgba(0,0,0,.10);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--s50); color:var(--s900); -webkit-font-smoothing:antialiased; }
a { color:var(--g700); }

/* ── Layout ── */
.container { max-width:1020px; margin:0 auto; padding:0 1.25rem; }

/* ── Header ── */
.site-header { background:var(--g900); color:var(--w); position:sticky; top:0; z-index:200; border-bottom:3px solid var(--a400); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:1rem 0 0.75rem; gap:1rem; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-icon { font-size:1.8rem; }
.brand-title { font-family:'Sora',sans-serif; font-size:1.35rem; font-weight:800; letter-spacing:-.03em; }
.brand-sub { font-size:.7rem; color:rgba(255,255,255,.55); margin-top:2px; letter-spacing:.02em; }
.header-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stage-chip { font-family:'Sora',sans-serif; font-size:.7rem; font-weight:700; background:var(--a400); color:var(--g900); padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.updated-at { font-size:.65rem; color:rgba(255,255,255,.4); }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--g600); display:none; }
.live-dot.on { display:block; animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }

/* ── Tab bar ── */
.tab-bar { background:rgba(0,0,0,.25); border-top:1px solid rgba(255,255,255,.08); }
.tab-inner { display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tab-inner::-webkit-scrollbar { display:none; }
.tab { font-family:'Sora',sans-serif; font-size:.8rem; font-weight:700; padding:.7rem 1.1rem; background:none; border:none; color:rgba(255,255,255,.55); cursor:pointer; border-bottom:3px solid transparent; transition:all .15s; letter-spacing:.02em; white-space:nowrap; flex:0 0 auto; }
.tab:hover { color:rgba(255,255,255,.85); }
.tab.active { color:var(--w); border-bottom-color:var(--a400); }

/* ── Tab panels ── */
.tab-panel { display:none; padding:1.5rem 0 3rem; }
.tab-panel.active { display:block; }

/* ── Section label ── */
.section-label { font-family:'Sora',sans-serif; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--s400); margin-bottom:.75rem; }

/* ── Search box ── */
.search-box { font-size:.8rem; padding:6px 12px; border:1px solid var(--s200); border-radius:8px; background:var(--w); color:var(--s900); width:200px; outline:none; }
.search-box:focus { border-color:var(--g600); }

/* ── Avatar (used in players list) ── */
.avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:600; flex-shrink:0; }

/* ── Status text (used in My Team stage badge) ── */
.lb-status { font-size:.72rem; font-weight:500; }
.s-in { color:var(--g700); } .s-out { color:var(--s400); }

/* Stage pills */
.pill { display:inline-block; font-size:.65rem; font-weight:600; padding:2px 8px; border-radius:20px; letter-spacing:.02em; white-space:nowrap; }
.pill-gs  { background:#e0f2fe; color:#0369a1; }
.pill-r32 { background:#dcfce7; color:#15803d; }
.pill-qf  { background:#ede9fe; color:#6d28d9; }
.pill-sf  { background:#fef3c7; color:#b45309; }
.pill-f   { background:#fee2e2; color:#b91c1c; }
.pill-w   { background:#052e16; color:#fbbf24; }
.pill-live{ background:#16a34a; color:#fff; }

.empty-msg { font-size:.85rem; color:var(--s400); padding:1.25rem 0; }

/* ── Today tab ── */
.fixtures-list { display:flex; flex-direction:column; gap:12px; }
.fixture-card { background:var(--w); border:1px solid var(--s200); border-radius:var(--r-lg); padding:1rem 1.25rem; box-shadow:var(--sh); }
.fixture-card.is-live { border-color:var(--g600); box-shadow:0 0 0 2px rgba(22,163,74,.15); }
.fixture-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; font-size:.7rem; color:var(--s400); }
.fixture-round { font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.fixture-venue { font-size:.68rem; }
.fixture-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; }
.fixture-team { display:flex; flex-direction:column; align-items:center; gap:4px; }
.fixture-team.home { align-items:flex-end; text-align:right; }
.fixture-team.away { align-items:flex-start; text-align:left; }
.fixture-flag { font-size:2rem; }
.fixture-name { font-size:.85rem; font-weight:500; color:var(--s700); }
.fixture-name.highlight { color:var(--g700); font-weight:600; }
.participant-tag { font-size:.65rem; background:var(--g100); color:var(--g700); padding:2px 6px; border-radius:4px; }
.fixture-score { text-align:center; }
.score-display { font-family:'Sora',sans-serif; font-size:1.8rem; font-weight:800; color:var(--s900); white-space:nowrap; }
.score-time { font-size:.75rem; color:var(--s400); margin-top:2px; }
.score-ko { font-size:.85rem; font-weight:500; color:var(--s500); }

/* Win-Draw-Win bar */
.wdw-bar { margin-top:1rem; padding-top:.875rem; border-top:1px solid var(--s100); }
.wdw-labels { display:flex; justify-content:space-between; font-size:.7rem; color:var(--s500); margin-bottom:5px; }
.wdw-labels span:last-child { text-align:right; }
.wdw-track { display:flex; height:8px; border-radius:4px; overflow:hidden; gap:2px; }
.wdw-home { background:var(--g600); border-radius:4px 0 0 4px; transition:width .5s ease; }
.wdw-draw { background:var(--s300); transition:width .5s ease; }
.wdw-away { background:#dc2626; border-radius:0 4px 4px 0; transition:width .5s ease; }
.wdw-pcts { display:flex; justify-content:space-between; font-size:.7rem; font-weight:600; margin-top:4px; }
.wdw-pcts .home-pct { color:var(--g700); }
.wdw-pcts .draw-pct { color:var(--s500); text-align:center; }
.wdw-pcts .away-pct { color:#dc2626; text-align:right; }
.wdw-loading { font-size:.72rem; color:var(--s400); margin-top:.75rem; font-style:italic; }
.odds-btn { font-size:.7rem; padding:4px 10px; border:1px solid var(--s200); border-radius:6px; background:var(--s50); color:var(--s500); cursor:pointer; transition:all .15s; margin-top:.5rem; }
.odds-btn:hover { border-color:var(--g600); color:var(--g700); }
.no-fixtures { background:var(--w); border:1px solid var(--s200); border-radius:var(--r-lg); padding:2rem; text-align:center; color:var(--s400); font-size:.9rem; }

/* ── Bracket tab ── */
.bracket-stage { margin-bottom:2rem; }
.bracket-stage-title { font-family:'Sora',sans-serif; font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--g800); margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:2px solid var(--g100); }
.bracket-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.bracket-match { background:var(--w); border:1px solid var(--s200); border-radius:var(--r-md); padding:.75rem 1rem; box-shadow:var(--sh); }
.bracket-match.is-live { border-color:var(--g600); }
.bm-teams { display:flex; flex-direction:column; gap:6px; }
.bm-team { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bm-team-name { font-size:.82rem; font-weight:500; display:flex; align-items:center; gap:6px; flex:1; }
.bm-team-name.winner { color:var(--g700); font-weight:600; }
.bm-goal { font-family:'Sora',sans-serif; font-size:.9rem; font-weight:700; color:var(--s900); }
.bm-divider { height:1px; background:var(--s100); margin:2px 0; }
.bm-meta { font-size:.65rem; color:var(--s400); margin-top:.4rem; }

/* Groups */
.groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.group-card { background:var(--w); border:1px solid var(--s200); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); }
.group-title { background:var(--g900); color:var(--a400); font-family:'Sora',sans-serif; font-size:.8rem; font-weight:700; padding:.6rem 1rem; letter-spacing:.05em; }
.group-table { width:100%; border-collapse:collapse; font-size:.75rem; }
.group-table th { background:var(--s50); color:var(--s400); font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:5px 8px; text-align:center; }
.group-table th:first-child { text-align:left; }
.group-table td { padding:7px 8px; border-top:1px solid var(--s100); text-align:center; color:var(--s700); }
.group-table td:first-child { text-align:left; font-weight:500; color:var(--s900); }
.group-table tr.qualified td:first-child { border-left:3px solid var(--g600); }
.group-table tr.qualified td { background:var(--g50); }

/* ── My Team tab ── */
.myteam-header { margin-bottom:1.5rem; }
.myteam-label { display:block; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--s400); margin-bottom:.4rem; }

/* ── Custom dropdown (shows flag images, unlike a native select) ── */
.custom-select { position:relative; width:100%; max-width:380px; }
.cs-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; font:inherit; font-size:.9rem; text-align:left;
  padding:.6rem 1rem; border:1px solid var(--s200); border-radius:var(--r-md);
  background:var(--w); color:var(--s900); cursor:pointer; outline:none;
}
.cs-trigger:focus-visible { border-color:var(--g600); box-shadow:0 0 0 3px rgba(22,163,74,.15); }
.cs-trigger[aria-expanded="true"] { border-color:var(--g600); }
.cs-value { display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; }
.cs-value:not(.has-value) { color:var(--s400); }
.cs-val-name { font-weight:600; white-space:nowrap; }
.cs-val-teams, .cs-opt-teams { display:flex; align-items:center; gap:6px; color:var(--s600); white-space:nowrap; }
.cs-team { font-size:.85em; }
.cs-plus { color:var(--s300); margin:0 2px; font-weight:600; }
.cs-chevron { color:var(--s400); flex-shrink:0; transition:transform .15s; }
.cs-trigger[aria-expanded="true"] .cs-chevron { transform:rotate(180deg); }

.cs-panel {
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
  max-height:340px; overflow-y:auto; margin:0; padding:4px; list-style:none;
  background:var(--w); border:1px solid var(--s200); border-radius:var(--r-md);
  box-shadow:0 10px 40px rgba(0,0,0,.15);
}
.cs-option {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:.55rem .7rem; border-radius:8px; cursor:pointer;
}
.cs-option:hover, .cs-option.kb { background:var(--s50); }
.cs-option.active { background:#f0fdf4; }
.cs-opt-name { font-weight:600; font-size:.9rem; flex-shrink:0; }
.cs-opt-teams { font-size:.82rem; flex-wrap:wrap; justify-content:flex-end; }
.myteam-hero { background:var(--g900); border-radius:var(--r-lg); padding:1.5rem; color:var(--w); margin-bottom:1rem; display:flex; align-items:center; gap:1.25rem; }
.myteam-flag { font-size:3.5rem; }
.myteam-info { flex:1; }
.myteam-teamname { font-family:'Sora',sans-serif; font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.myteam-stage { margin-top:.5rem; }
.myteam-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:1rem; }
.myteam-card { background:var(--w); border:1px solid var(--s200); border-radius:var(--r-lg); padding:1rem 1.25rem; box-shadow:var(--sh); }
.myteam-card-title { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--s400); margin-bottom:.75rem; }
.fixtures-mini { display:flex; flex-direction:column; gap:8px; }
.fixture-mini-row { display:flex; align-items:center; justify-content:space-between; font-size:.78rem; }
.fm-teams { display:flex; align-items:center; gap:6px; font-weight:500; flex-wrap:wrap; }
.fm-owner { font-size:.68rem; color:var(--g600); font-weight:600; background:var(--s100); padding:1px 6px; border-radius:10px; }
.fm-score { font-family:'Sora',sans-serif; font-weight:700; font-size:.85rem; color:var(--s900); }
.fm-date { font-size:.65rem; color:var(--s400); }
.topscorers-list { display:flex; flex-direction:column; gap:8px; }
.ts-row { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; }
.ts-player { display:flex; align-items:center; gap:8px; }
.ts-num { font-family:'Sora',sans-serif; font-weight:700; color:var(--s300); font-size:.75rem; width:16px; }
.ts-goals { font-family:'Sora',sans-serif; font-weight:800; color:var(--g800); }
.ts-assists { font-size:.7rem; color:var(--s400); }
.squad-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-top:.5rem; }
.squad-player { background:var(--s50); border-radius:var(--r-sm); padding:6px 8px; font-size:.72rem; }
.squad-pos { font-size:.6rem; color:var(--s400); text-transform:uppercase; letter-spacing:.05em; }
.squad-name { font-weight:500; margin-top:1px; }

/* ── Footer ── */
.site-footer { border-top:1px solid var(--s200); background:var(--w); padding:1rem 0; margin-top:2rem; }
.site-footer p { font-size:.72rem; color:var(--s400); text-align:center; }

/* ── Responsive ── */
@media (max-width:680px) {
  .tab { font-size:.72rem; padding:.65rem .75rem; }
  .myteam-grid { grid-template-columns:1fr; }
  .fixture-name { font-size:.75rem; }
  .score-display { font-size:1.4rem; }
  .search-box { width:160px; }
}

@media (max-width:420px) {
  .tab { font-size:.65rem; padding:.6rem .6rem; }
  .brand-title { font-size:1.1rem; }
}

@media (max-width:360px) {
  .tab { font-size:.62rem; padding:.55rem .5rem; }
}

/* ── Error banner ── */
.error-banner {
  background: #7f1d1d;
  color: #fecaca;
  padding: .7rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: .82rem;
  border-bottom: 1px solid #991b1b;
}
.error-banner[hidden] { display: none; }
.error-retry {
  background: #fecaca;
  color: #7f1d1d;
  border: none;
  border-radius: 6px;
  padding: 4px 14px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.error-retry:hover { background: #fff; }

/* ── Skeleton loading shimmer ── */
.skeleton-row {
  height: 52px;
  border-top: 1px solid var(--s100);
  background: linear-gradient(90deg, #f3f4f6 25%, #e9ebee 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Screen-reader only ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Schedule: day groupings & states ── */
.day-group { margin-bottom: 1.5rem; }
.day-heading {
  font-family:'Sora',sans-serif; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--s500);
  padding:.4rem 0 .6rem; border-bottom:1px solid var(--s200); margin-bottom:.75rem;
}
.day-heading.day-today { color:var(--g700); }
.day-group .fixture-card { margin-bottom:10px; }

/* Finished games greyed out */
.fixture-card.is-finished { opacity:.55; }
.fixture-card.is-finished:hover { opacity:.8; }

/* The next upcoming match — highlighted */
.fixture-card.is-next {
  border-color: var(--a400);
  box-shadow: 0 0 0 2px rgba(251,191,36,.25);
}
.pill-next { background:var(--a400); color:var(--g900); }

/* ── Players list (home page) ── */
.players-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1rem;
}
.players-head .section-label { margin:0; }
.players-head .search-box { max-width:260px; }

.players-list {
  display:flex; flex-direction:column; gap:8px;
}
.player-row {
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left; cursor:pointer;
  background:var(--card,#fff); border:1px solid var(--s200);
  border-radius:14px; padding:.85rem 1.1rem;
  font:inherit; transition:all .15s;
}
.player-row:hover {
  border-color:var(--g500,#16a34a);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.player-name {
  font-weight:700; font-size:.95rem; color:var(--s900,#111);
  min-width:130px; flex-shrink:0;
}
.player-teams {
  display:flex; flex-wrap:wrap; gap:6px 14px; flex:1;
}
.player-team {
  font-size:.9rem; color:var(--s700,#374151); white-space:nowrap;
}
.player-team.team-out {
  color:var(--s400,#9ca3af); text-decoration:line-through;
}
.player-chevron {
  font-size:1.4rem; color:var(--s300,#cbd5e1); flex-shrink:0;
  line-height:1;
}
/* Whole row greyed when ALL teams are out */
.player-row.out { opacity:.5; }
.player-row.out:hover { opacity:.75; }
.player-row.out .player-name { color:var(--s500,#6b7280); }

.players-note {
  margin-top:1.25rem; font-size:.78rem; color:var(--s500,#6b7280);
  text-align:center;
}

/* ── My Team: multi-team support ── */
.myteam-owner-head {
  font-family:'Sora',sans-serif; font-size:1.15rem; font-weight:800;
  color:var(--s900,#111); margin-bottom:1rem;
}
.myteam-team-section { margin-bottom:1.5rem; }
.myteam-hero.hero-out { opacity:.78; }

@media (max-width:560px){
  .player-name { min-width:0; }
  .player-row { flex-wrap:wrap; }
  .player-teams { width:100%; padding-left:48px; }
}

/* ════ KNOCKOUTS ════ */
/* Rounds stack vertically as labelled bands. Within a band, matches sit in a
   responsive grid. Each card states where its winner advances — no connector
   lines to trace, no horizontal scroll. Reads top-to-bottom on any device. */
.ko-rounds { display:flex; flex-direction:column; gap:1.75rem; padding:4px 0 20px; }

.ko-band { }
.ko-band-title {
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:'Sora',sans-serif; font-weight:800; font-size:.95rem;
  color:var(--g700,#15803d); margin:0 0 .85rem;
  padding-bottom:.5rem; border-bottom:2px solid var(--a400,#fbbf24);
}
.ko-band-count {
  font-size:.7rem; font-weight:600; color:var(--s400,#9ca3af);
  text-transform:uppercase; letter-spacing:.06em; flex-shrink:0;
}
.ko-band-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:14px;
}

.ko-card {
  background:#fff; border:1px solid var(--s200,#e5e7eb); border-radius:14px;
  padding:.7rem .85rem; box-shadow:0 1px 4px rgba(0,0,0,.05);
  display:flex; flex-direction:column; gap:.1rem;
}
.ko-card.is-live { border-color:#dc2626; box-shadow:0 0 0 2px rgba(220,38,38,.15); }
.ko-card.is-done { border-color:var(--g600,#16a34a); }
.ko-card-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
  margin-bottom:.5rem;
}
.ko-card-num {
  font-family:'Sora',sans-serif; font-weight:800; font-size:.78rem;
  color:var(--s900,#111);
}
.ko-card-when {
  font-size:.62rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--s400,#9ca3af); text-align:right;
}
.ko-team {
  display:flex; align-items:center; gap:9px; padding:.32rem .15rem;
  font-size:.86rem;
}
.ko-team + .ko-team { border-top:1px solid var(--s100,#f3f4f6); }
.ko-flag { flex-shrink:0; }
.ko-name { flex:1; color:var(--s800,#1f2937); }
.ko-name small { color:var(--g600,#16a34a); font-size:.66rem; }
.ko-team.tbd .ko-name { color:var(--s400,#9ca3af); font-style:italic; }
.ko-team.winner .ko-name { font-weight:800; color:var(--s900,#111); }
.ko-goal { font-weight:800; font-size:.95rem; color:var(--s900,#111); flex-shrink:0; }
.ko-team.winner .ko-goal { color:var(--g700,#15803d); }

.ko-pens-note {
  font-size:.7rem; color:var(--a600,#d97706); font-weight:600;
  margin-top:.4rem; padding-top:.4rem; border-top:1px dashed var(--s200,#e5e7eb);
}
.ko-advances {
  font-size:.7rem; color:var(--s500,#6b7280); margin-top:.5rem;
  padding-top:.45rem; border-top:1px solid var(--s100,#f3f4f6);
}
.ko-advances strong { color:var(--g700,#15803d); }
.ko-advances-final {
  color:var(--a600,#d97706); font-weight:700; text-align:center;
}

/* Entrance animation — bands fade and slide in, staggered. Only on first render. */
@keyframes ko-enter {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.ko-rounds.animate .ko-band {
  animation:ko-enter .5s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:var(--ko-delay, 0ms);
}
@media (prefers-reduced-motion: reduce){
  .ko-rounds.animate .ko-band { animation:none; }
}

/* Awaiting-result pill (kicked off, feed hasn't posted score yet) */
.pill-await { background:#fde68a; color:#92400e; }

/* ════ WINNER CELEBRATION ════ */
.celebration {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(20,83,45,.92), rgba(6,12,20,.96));
  opacity:0; transition:opacity .4s ease;
  padding:1.5rem;
}
.celebration.show { opacity:1; }
.celebration[hidden] { display:none; }

.confetti-canvas {
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
}

.celebrate-card {
  position:relative; z-index:2; text-align:center;
  max-width:440px; width:100%;
  padding:2.5rem 2rem 2.75rem;
  background:rgba(10,22,40,.55);
  border:1px solid rgba(251,191,36,.35);
  border-radius:24px;
  backdrop-filter:blur(8px);
  box-shadow:0 20px 80px rgba(0,0,0,.5), 0 0 60px rgba(251,191,36,.15);
  animation:celebrate-pop .6s cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes celebrate-pop {
  0% { transform:scale(.7) translateY(30px); opacity:0; }
  100% { transform:scale(1) translateY(0); opacity:1; }
}

.celebrate-close {
  position:absolute; top:12px; right:16px;
  background:none; border:none; color:rgba(255,255,255,.5);
  font-size:1.8rem; line-height:1; cursor:pointer; padding:4px;
  transition:color .15s;
}
.celebrate-close:hover { color:#fff; }

.celebrate-label {
  font-family:'Sora',sans-serif; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.22em; color:var(--a400,#fbbf24);
  margin-bottom:.5rem;
}

.celebrate-trophy {
  width:120px; height:auto; margin:0 auto .75rem;
  display:block;
  filter:drop-shadow(0 8px 24px rgba(251,191,36,.45));
  animation:trophy-float 3s ease-in-out infinite;
}
@keyframes trophy-float {
  0%,100% { transform:translateY(0) rotate(-1deg); }
  50% { transform:translateY(-10px) rotate(1deg); }
}

.celebrate-winner {
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:.5rem;
}
.celebrate-flag { font-size:2.4rem; line-height:1; }
.celebrate-team {
  font-family:'Sora',sans-serif; font-size:2.2rem; font-weight:800;
  color:#fff; letter-spacing:-.03em;
}
.celebrate-owner {
  font-size:1.15rem; font-weight:700; color:var(--a400,#fbbf24);
  margin-top:.75rem;
}
.celebrate-sub {
  font-size:.85rem; color:rgba(255,255,255,.65); margin-top:.35rem;
}

@media (max-width:480px){
  .celebrate-team { font-size:1.7rem; }
  .celebrate-trophy { width:96px; }
}

/* Subtle match numbers (lets "Winner of match 73" be cross-referenced) */
.fixture-num, .ko-num {
  font-weight:700; color:var(--s500,#6b7280);
}


/* ── Flag images (local SVGs — render on every OS incl. Windows) ── */
.flag {
  display:inline-block;
  width:1.5em; height:1.12em;       /* 4:3 ratio */
  vertical-align:-0.18em;
  border-radius:2px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);   /* subtle edge so white flags show */
}
/* Larger contexts */
.fixture-flag .flag { width:2.4rem; height:1.8rem; vertical-align:middle; }
.myteam-flag .flag { width:4.2rem; height:3.15rem; border-radius:4px; }
.celebrate-flag .flag { width:3rem; height:2.25rem; vertical-align:middle; border-radius:3px; }
.player-team .flag { width:1.4rem; height:1.05rem; }
.ko-flag .flag { width:1.3rem; height:.98rem; }

/* Penalty note in My Team results */
.fm-pens { font-size:.7rem; color:var(--a600,#d97706); font-weight:600; }