/* ── FLAG COMPONENT ──────────────────────────────────────────── */
/* Code shows instantly; CDN image loads on top when available   */
.flag-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--navy-light);
  overflow: hidden;
  vertical-align: middle;
  line-height: 1;
}
.flag-box-lg { border-radius: 6px; }
.flag-code {
  font-weight: 700;
  color: var(--w60);
  letter-spacing: -0.5px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.flag-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Hide broken image icon — only shows properly when loaded */
.flag-img[src=""] { display: none; }
/* ============================================================
   MATCHDAY — WORLD CUP 2026  |  COMPLETE STYLESHEET
   ============================================================ */

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

:root {
  --navy-deep:  #020810;
  --navy:       #060e1f;
  --navy-mid:   #0b1930;
  --navy-card:  #0f2040;
  --navy-light: #162550;
  --gold:       #c9a227;
  --gold-hi:    #f0c842;
  --gold-lo:    #8b6914;
  --gold-glow:  rgba(201,162,39,.18);
  --gold-dim:   rgba(201,162,39,.25);
  --gold-line:  rgba(201,162,39,.12);
  --white:      #ffffff;
  --w80:        rgba(255,255,255,.80);
  --w60:        rgba(255,255,255,.60);
  --w40:        rgba(255,255,255,.40);
  --w15:        rgba(255,255,255,.15);
  --w08:        rgba(255,255,255,.08);
  --w04:        rgba(255,255,255,.04);
  --green:      #00e676;
  --green-dim:  rgba(0,230,118,.12);
  --green-b:    rgba(0,230,118,.3);
  --amber:      #ffab00;
  --amber-dim:  rgba(255,171,0,.12);
  --red:        #ef5350;
  --red-dim:    rgba(239,83,80,.1);
  --r:          10px;
  --r-sm:       6px;
  --t:          .22s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }
body { font-family:'Barlow Condensed',sans-serif; background:var(--navy-deep); color:var(--white); min-height:100vh; overflow-x:hidden; }

/* ── SCROLLBAR ─────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--navy-mid); }
::-webkit-scrollbar-thumb { background:var(--gold-dim); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* ── UTILS ──────────────────────────────────── */
.page { display:none; animation:fadeUp .28s ease both; }
.page.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.page-title { font-family:'Bebas Neue',sans-serif; font-size:34px; letter-spacing:4px; color:var(--gold); margin-bottom:4px; }
.page-sub { font-size:12px; color:var(--w40); letter-spacing:3px; text-transform:uppercase; margin-bottom:24px; }
.glass { background:rgba(15,32,64,0.95); border:1px solid var(--w08); border-radius:var(--r); }
.glass-gold { background:linear-gradient(135deg,rgba(201,162,39,.1),rgba(15,32,64,0.95)); border:1px solid var(--gold-dim); border-radius:var(--r); }
.btn { padding:11px 22px; border-radius:var(--r-sm); border:none; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all var(--t); }
.btn-gold { background:var(--gold); color:var(--navy-deep); }
.btn-gold:hover { background:var(--gold-hi); transform:translateY(-1px); }
.btn-outline { background:none; border:1px solid var(--w40); color:var(--w60); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-danger { background:var(--red); color:#fff; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:1.5px; padding:3px 8px; border-radius:20px; text-transform:uppercase; }
.badge-green { background:var(--green); color:var(--navy-deep); }
.badge-amber { background:var(--amber); color:var(--navy-deep); }
.badge-red { background:var(--red-dim); color:var(--red); border:1px solid rgba(239,83,80,.3); }

/* ═══════════════════════════════════════════════
   ONBOARDING
═══════════════════════════════════════════════ */
.onboarding-wrap { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 26%, rgba(201,162,39,.12), transparent 58%), var(--navy-deep); overflow:hidden; }
.onboard-canvas { position:absolute; inset:0; pointer-events:none; }
.onboard-inner { position:relative; z-index:2; width:100%; max-width:860px; padding:16px 20px; overflow-y:auto; max-height:100vh; }
.onboard-step { display:none; text-align:center; animation:fadeUp .4s ease both; }
.onboard-step.active { display:block; }
#ob-step1.active { display:flex; flex-direction:column; align-items:center; }

/* Step 1 — Welcome */
.ob-badge { font-size:9px; letter-spacing:4px; color:var(--gold); text-transform:uppercase; margin-bottom:14px; padding:5px 14px; border:1px solid var(--gold-dim); border-radius:20px; display:inline-block; flex-shrink:0; }
.ob-logo { margin-bottom:8px; }
.ob-logo-icon { font-size:clamp(36px,6vw,56px); display:block; animation:float 3s ease-in-out infinite; filter:drop-shadow(0 0 16px rgba(201,162,39,.6)); }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.ob-logo-text { font-family:'Bebas Neue',sans-serif; font-size:clamp(52px,11vw,100px); line-height:1; background:linear-gradient(110deg,var(--gold-lo) 0%,var(--gold) 35%,#fff8e0 50%,var(--gold) 65%,var(--gold-lo) 100%); background-size:250% 100%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:6px; animation:obShine 6s linear infinite; }
@keyframes obShine { 0%{background-position:180% 0} 100%{background-position:-60% 0} }
.ob-tagline { font-size:15px; color:var(--w60); letter-spacing:3px; margin-bottom:6px; }
.ob-dates { font-size:11px; color:var(--w40); letter-spacing:2px; margin-bottom:12px; }
.ob-hype { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:5px; color:var(--gold); text-transform:uppercase; margin-bottom:8px; }
.ob-opener { font-size:12px; color:var(--w60); letter-spacing:.5px; margin-bottom:20px; }
.ob-opener::before { content:''; display:block; width:40px; height:1px; background:var(--gold-line); margin:0 auto 12px; }
/* Countdown — horizontal strip */
.ob-countdown-display { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.ob-cd-block { display:flex; align-items:baseline; gap:4px; }
.ob-cd-num { font-family:'Bebas Neue',sans-serif; font-size:clamp(34px,6.5vw,58px); color:var(--gold-hi); line-height:1; text-shadow:0 0 24px rgba(240,200,66,.45); animation:obCdGlow 2.4s ease-in-out infinite; }
@keyframes obCdGlow { 0%,100%{text-shadow:0 0 18px rgba(240,200,66,.35)} 50%{text-shadow:0 0 32px rgba(240,200,66,.7)} }
.ob-cd-unit { font-size:10px; letter-spacing:2px; color:var(--w40); text-transform:uppercase; }
.ob-cd-sep { font-family:'Bebas Neue',sans-serif; font-size:32px; color:var(--gold-dim); line-height:1; }
.ob-cta-btn { font-family:'Bebas Neue',sans-serif; font-size:clamp(18px,3vw,22px); letter-spacing:4px; padding:14px 40px; background:linear-gradient(135deg,var(--gold) 0%,var(--gold-hi) 100%); color:var(--navy-deep); border:none; border-radius:50px; cursor:pointer; transition:all .3s; box-shadow:0 0 30px rgba(201,162,39,.4); animation:pulse-btn 2s ease-in-out infinite; flex-shrink:0; }
@keyframes pulse-btn { 0%,100%{box-shadow:0 0 20px rgba(201,162,39,.4)} 50%{box-shadow:0 0 50px rgba(201,162,39,.8)} }
.ob-cta-btn:hover { transform:scale(1.04); box-shadow:0 0 60px rgba(201,162,39,.9); }
.ob-skip { margin-top:14px; font-size:11px; color:var(--w40); cursor:pointer; letter-spacing:1px; text-decoration:underline; }
.ob-skip:hover { color:var(--w60); }

/* Step 2 — Nation Picker */
.ob-pick-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(32px,6vw,60px); letter-spacing:6px; color:var(--gold); margin-bottom:6px; }
.ob-pick-sub { font-size:13px; color:var(--w60); letter-spacing:1.5px; margin-bottom:18px; line-height:1.5; }
.ob-nation-grid-wrap {
  width: 100%;
  max-height: 62vh;
  overflow-y: auto;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.ob-nation-grid-wrap::-webkit-scrollbar { width: 4px; }
.ob-nation-grid-wrap::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

.ob-group-section { margin-bottom: 20px; }
.ob-group-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--gold);
  text-align: left;
  padding: 6px 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--gold-line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ob-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-line);
}
.ob-group-teams {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 600px) { .ob-group-teams { grid-template-columns: repeat(2, 1fr); } }

.ob-nation-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 10px 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ob-nation-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,162,39,0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.2s;
}
.ob-nation-card:hover,
.ob-nation-card:active {
  border-color: var(--gold);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 20px rgba(201,162,39,0.25);
  background: rgba(201,162,39,0.08);
}
.ob-nation-card:hover::before,
.ob-nation-card:active::before { opacity: 1; }
.ob-nation-card:active { transform: translateY(-1px) scale(1.01); }

.ob-nation-flag {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  display: block;
  position: relative;
  z-index: 1;
}
.ob-nation-flag-fallback {
  width: 72px;
  height: 48px;
  border-radius: 5px;
  background: var(--navy-light);
  border: 1px solid var(--w08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.ob-nation-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--w80);
  letter-spacing: 0.3px;
  line-height: 1.2;
  text-align: center;
  position: relative;
  z-index: 1;
}
.ob-nation-rank {
  font-size: 10px;
  color: var(--w40);
  position: relative;
  z-index: 1;
}
.ob-nation-card:hover .ob-nation-name { color: var(--gold-hi); }
.ob-scroll-hint {
  font-size: 11px;
  color: var(--w40);
  letter-spacing: 1px;
  margin-top: 8px;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* Step 3 — Celebration */
.confetti-canvas { position:absolute; inset:0; pointer-events:none; }
.ob-celebrate-flag { font-size:clamp(80px,18vw,160px); margin-bottom:16px; animation:zoomIn .5s cubic-bezier(.175,.885,.32,1.275); }
@keyframes zoomIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.ob-celebrate-name { font-family:'Bebas Neue',sans-serif; font-size:clamp(48px,10vw,100px); letter-spacing:6px; background:linear-gradient(135deg,var(--gold-hi),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:12px; }
.ob-celebrate-msg { font-size:14px; color:var(--w60); letter-spacing:4px; text-transform:uppercase; margin-bottom:6px; }
.ob-celebrate-sub { font-size:13px; color:var(--w40); margin-bottom:32px; }
.ob-enter-btn { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:4px; padding:16px 42px; background:linear-gradient(135deg,var(--gold),var(--gold-hi)); color:var(--navy-deep); border:none; border-radius:50px; cursor:pointer; transition:all .3s; box-shadow:0 0 40px var(--gold-glow); }
.ob-enter-btn:hover { transform:scale(1.05); }

/* ═══════════════════════════════════════════════
   AD SLOTS
═══════════════════════════════════════════════ */
.ad-bar { background:rgba(0,0,0,.4); border-bottom:1px solid var(--gold-line); }
.ad-inner { display:flex; align-items:center; justify-content:center; gap:16px; padding:8px 20px; min-height:44px; }
.ad-label { font-size:9px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; opacity:.7; flex-shrink:0; }
.ad-placeholder-text { font-size:12px; color:var(--w40); }
.ad-advertise { font-size:12px; color:var(--w60); text-decoration:none; letter-spacing:.5px; transition:color var(--t); }
.ad-advertise:hover { color:var(--gold); }
/* Ad slots are hidden until AdSense is approved & live (no empty boxes at
   launch). To re-enable: remove the `display:none` overrides below and wire
   the ad units / Auto ads. The gold "Advertise here" sponsor bar stays. */
.ad-sidebar { display:none !important; }
.ad-sidebar-inner { position:sticky; top:100px; padding:12px; background:var(--w04); border:1px solid var(--w08); border-radius:var(--r); text-align:center; min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--w40); font-size:11px; }
.ad-mobile-sticky { position:fixed; bottom:0; left:0; right:0; z-index:500; background:rgba(6,14,31,.95); border-top:1px solid var(--gold-line); padding:6px 12px; display:none; align-items:center; gap:10px; min-height:44px; }
.ad-close-btn { background:none; border:none; color:var(--w60); font-size:18px; cursor:pointer; padding:0 4px; }

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.site-header { display:flex; align-items:center; gap:16px; padding:10px 24px; background:rgba(6,14,31,.98); border-bottom:1px solid var(--gold-line); position:sticky; top:0; z-index:200; }
.header-brand { display:flex; align-items:center; gap:10px; cursor:pointer; flex-shrink:0; }
.brand-svg { width:36px; height:36px; }
.brand-words { line-height:1; }
.brand-name { display:block; font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:4px; background:linear-gradient(135deg,var(--gold-hi),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.brand-edition { display:block; font-size:9px; letter-spacing:3px; color:var(--w40); text-transform:uppercase; }
.header-search-wrap { flex:1; max-width:460px; margin:0 auto; position:relative; }
.gsearch-input { width:100%; padding:8px 16px; background:var(--w08); border:1px solid var(--w15); border-radius:24px; color:var(--white); font-family:'Barlow Condensed',sans-serif; font-size:14px; outline:none; transition:all var(--t); }
.gsearch-input:focus { border-color:var(--gold); background:var(--navy-mid); }
.gsearch-input::placeholder { color:var(--w40); }
.gsearch-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--navy-card); border:1px solid var(--gold-dim); border-radius:var(--r); overflow:hidden; z-index:500; display:none; box-shadow:0 12px 40px rgba(0,0,0,.6); }
.gsearch-results.open { display:block; }
.gsearch-result { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--w04); font-size:13px; transition:background var(--t); }
.gsearch-result:hover { background:var(--gold-glow); }
.gsearch-result img { width:24px; height:16px; object-fit:cover; border-radius:2px; }
.gsearch-result .gr-name { flex:1; font-weight:500; }
.gsearch-result .gr-meta { font-size:11px; color:var(--w40); }
.header-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.fav-badge { cursor:pointer; }
.fav-badge img { width:32px; height:22px; object-fit:cover; border-radius:3px; border:2px solid var(--gold); box-shadow:0 0 10px var(--gold-glow); }
.header-hosts { display:flex; gap:4px; }
.header-hosts img { width:22px; height:15px; object-fit:cover; border-radius:2px; opacity:.75; }

/* ═══════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════ */
.site-nav { display:flex; align-items:stretch; gap:0; background:rgba(6,14,31,.97); border-bottom:1px solid var(--w08); position:sticky; top:57px; z-index:100; }
/* flex:0 1 auto = size to content on desktop (so "More" sits right after the
   core buttons, no gap), but still shrink + scroll on narrow phones. */
.nav-scroll { display:flex; flex:0 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.nav-scroll::-webkit-scrollbar { display:none; }
/* "More" dropdown for secondary pages — keeps the bar short on phone & desktop */
.nav-more { position:relative; flex-shrink:0; display:flex; align-items:stretch; border-left:1px solid var(--w08); }
.nav-more-btn { background:none; border:none; color:var(--w40); font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:13px 18px; cursor:pointer; white-space:nowrap; transition:color var(--t); }
.nav-more-btn:hover, .nav-more-btn.active { color:var(--gold); }
.nav-more-menu { position:absolute; top:100%; right:0; min-width:190px; background:var(--navy-card); border:1px solid var(--w15); border-radius:0 0 var(--r-sm) var(--r-sm); box-shadow:0 14px 40px rgba(0,0,0,.55); display:none; flex-direction:column; padding:6px; z-index:300; }
.nav-more-menu.open { display:flex; }
.nav-more-menu .nav-btn { width:100%; justify-content:flex-start; padding:11px 14px; border-radius:var(--r-sm); }
.nav-more-menu .nav-btn:hover { background:var(--w04); }
.nav-more-menu .nav-btn::after, .nav-more-btn::after { display:none; }
@media(max-width:760px) {
  .nav-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .nav-btn { padding:13px 14px; font-size:11.5px; letter-spacing:1px; }
  .nav-more-btn { padding:13px 14px; font-size:11.5px; }
}
.nav-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--w40); font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:13px 16px; cursor:pointer; transition:color var(--t); position:relative; white-space:nowrap; }
.nav-ico { width:15px; height:15px; flex-shrink:0; }
.nav-btn::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transition:transform var(--t); }
.nav-btn:hover { color:var(--w80); }
.nav-btn.active { color:var(--gold); }
.nav-btn.active::after { transform:scaleX(1); }
/* Desktop: stretch the tabs so the bar fills its full width — no left-hug,
   and "More" sits flush as the final tab. Mobile keeps natural widths + scroll. */
@media (min-width:761px) {
  .nav-scroll { flex:1 1 auto; }
  .nav-scroll .nav-btn { flex:1 1 0; justify-content:center; }
}

/* ── MOBILE BOTTOM TAB BAR + "MORE" SHEET ───────────────────── */
.bottom-nav { display:none; }
.nav-sheet { display:none; position:fixed; inset:0; z-index:700; background:rgba(2,8,16,.62); }
.nav-sheet.open { display:block; }
.nav-sheet-panel {
  position:absolute; left:0; right:0; bottom:0; background:var(--navy-card);
  border-top:1px solid var(--gold-line); border-radius:18px 18px 0 0;
  padding:16px 14px calc(18px + env(safe-area-inset-bottom));
  max-height:82vh; overflow-y:auto; animation:sheetUp .22s ease;
}
@keyframes sheetUp { from{ transform:translateY(100%) } to{ transform:translateY(0) } }
.nav-sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.nav-sheet-head span { font-family:'Bebas Neue',sans-serif; font-size:19px; letter-spacing:2px; color:var(--gold); }
.nav-sheet-x { background:none; border:none; color:var(--w60); font-size:28px; line-height:1; cursor:pointer; padding:0 4px; }
.nav-sheet-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.nav-sheet-item {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--w04); border:1px solid var(--w08); border-radius:13px; padding:15px 6px;
  color:var(--w80); font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase; cursor:pointer; text-align:center;
}
.nav-sheet-item:active { background:var(--w08); border-color:var(--gold-dim); }
.nav-sheet-item .si-ico { font-size:23px; line-height:1; }

@media (max-width:760px) {
  .site-nav { display:none; }            /* replace the scrolling top bar… */
  .bottom-nav {                          /* …with a fixed bottom tab bar */
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:600;
    background:rgba(6,14,31,.98); border-top:1px solid var(--w08);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 24px rgba(0,0,0,.4);
  }
  .bnav-item {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; color:var(--w40); cursor:pointer;
    padding:8px 2px 7px; font-family:'Barlow Condensed',sans-serif;
    font-size:9.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  }
  .bnav-item .bnav-ico { font-size:19px; line-height:1; filter:grayscale(.3); }
  .bnav-item.active { color:var(--gold); }
  .bnav-item.active .bnav-ico { filter:none; }
  .site-footer { margin-bottom:62px; }   /* clear the fixed bar */
  .ad-mobile-sticky { bottom:60px; }
}

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
.app-layout { display:block; max-width:1280px; margin:0 auto; padding:24px 24px 60px; }
.site-main { width:100%; }

/* ═══════════════════════════════════════════════
   TOURNAMENT HUB — HERO
═══════════════════════════════════════════════ */
.hub-hero { position:relative; border-radius:var(--r); overflow:hidden; padding:56px 40px; margin-bottom:24px; background:linear-gradient(135deg,#000d20 0%,#061428 50%,#0a1e38 100%); border:1px solid var(--gold-line); text-align:center; }
.hub-hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(201,162,39,.12) 0%,transparent 70%); pointer-events:none; }
.hub-hero-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hub-particle { position:absolute; border-radius:50%; background:var(--gold); animation:rise linear infinite; opacity:0; }
@keyframes rise { 0%{transform:translateY(100%) scale(0);opacity:0} 20%{opacity:.6} 80%{opacity:.2} 100%{transform:translateY(-120px) scale(1);opacity:0} }
.hub-badge { font-size:10px; letter-spacing:5px; color:var(--gold); text-transform:uppercase; margin-bottom:16px; opacity:.8; }
.hub-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(48px,8vw,90px); line-height:1; background:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 60%,var(--gold-lo) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:6px; margin-bottom:10px; }
.hub-sub { font-size:14px; color:var(--w60); letter-spacing:3px; margin-bottom:28px; }
.hub-countdown { display:flex; justify-content:center; gap:24px; margin-bottom:24px; }
.cd-block { text-align:center; }
.cd-num { font-family:'Bebas Neue',sans-serif; font-size:clamp(40px,6vw,72px); color:var(--gold-hi); line-height:1; display:block; }
.cd-lbl { font-size:10px; color:var(--w40); letter-spacing:2px; text-transform:uppercase; }
.cd-sep { font-family:'Bebas Neue',sans-serif; font-size:60px; color:var(--gold-dim); line-height:1; padding-top:4px; }
.hub-kickoff { font-size:13px; color:var(--w60); letter-spacing:2px; }
.hub-kickoff strong { color:var(--gold); }
.hub-fav-bar { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:24px; padding:14px 24px; background:var(--gold-glow); border:1px solid var(--gold-dim); border-radius:var(--r); display:inline-flex; cursor:pointer; transition:all var(--t); }
.hub-fav-bar:hover { background:rgba(201,162,39,.25); }
.hub-fav-bar img { width:32px; height:22px; object-fit:cover; border-radius:2px; }
.hub-fav-bar .fav-label { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:3px; color:var(--gold); }
.hub-fav-bar .fav-name { font-size:13px; color:var(--w80); font-weight:600; }

/* Hub grid sections */
.hub-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
@media(max-width:900px) { .hub-grid-2 { grid-template-columns:1fr; } }

.hub-section-title { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:3px; color:var(--gold); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--gold-line); display:flex; align-items:center; gap:8px; }
.hub-section-title span { font-size:11px; color:var(--w40); font-family:'Barlow Condensed',sans-serif; letter-spacing:2px; font-weight:400; }

/* Today's Matches */
.match-card { padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--w08); background:var(--w04); transition:all var(--t); }
.match-card:hover { border-color:var(--gold-dim); background:var(--gold-glow); }
.match-card + .match-card { margin-top:8px; }
.mc-teams { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mc-team { display:flex; align-items:center; gap:8px; flex:1; }
.mc-team.right { flex-direction:row-reverse; }
.mc-team img { width:28px; height:19px; object-fit:cover; border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.mc-team-name { font-size:14px; font-weight:600; }
.mc-score { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:2px; color:var(--gold); min-width:52px; text-align:center; }
.mc-score.tba { font-size:14px; color:var(--w40); font-family:'Barlow Condensed',sans-serif; font-weight:400; }
.mc-meta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--w40); }
.mc-time { color:var(--gold); font-weight:600; }

/* Live Stories */
.story-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--w04); }
.story-item:last-child { border-bottom:none; }
.story-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.story-text { font-size:13px; color:var(--w80); line-height:1.5; }
.story-time { font-size:10px; color:var(--w40); margin-top:2px; }
.no-stories { padding:20px; text-align:center; color:var(--w40); font-size:13px; }

/* Stats mini strip */
.hub-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
@media(max-width:700px) { .hub-stats { grid-template-columns:repeat(2,1fr); } }
.hub-stat { padding:16px 12px; text-align:center; background:var(--w04); border:1px solid var(--w08); border-radius:var(--r); }
.hub-stat-num { font-family:'Bebas Neue',sans-serif; font-size:36px; color:var(--gold-hi); line-height:1; }
.hub-stat-label { font-size:10px; color:var(--w40); letter-spacing:2px; text-transform:uppercase; margin-top:4px; }

/* ═══════════════════════════════════════════════
   CUSTOM SEARCHABLE SELECT (SearchSelect)
═══════════════════════════════════════════════ */
.ss-wrap { position:relative; width:100%; }
.ss-trigger { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--navy-mid); border:1px solid var(--w15); border-radius:var(--r-sm); cursor:pointer; font-size:14px; font-family:'Barlow Condensed',sans-serif; transition:all var(--t); user-select:none; min-height:42px; }
.ss-trigger:hover { border-color:var(--gold); }
.ss-trigger.open { border-color:var(--gold); border-radius:var(--r-sm) var(--r-sm) 0 0; background:var(--navy-card); }
.ss-selected-display { display:flex; align-items:center; gap:8px; flex:1; }
.ss-selected-display img { width:22px; height:15px; object-fit:cover; border-radius:2px; }
.ss-placeholder { color:var(--w40); }
.ss-arrow { margin-left:auto; color:var(--gold); font-size:11px; transition:transform var(--t); }
.ss-trigger.open .ss-arrow { transform:rotate(180deg); }
.ss-dropdown { position:absolute; top:100%; left:0; right:0; background:#0c1a35; border:1px solid var(--gold-dim); border-top:none; border-radius:0 0 var(--r-sm) var(--r-sm); z-index:9000; box-shadow:0 16px 48px rgba(0,0,0,.85); display:none; }
.ss-dropdown.open { display:block; }
.ss-search-box { padding:8px 10px; border-bottom:1px solid var(--w08); background:#0c1a35; }
.ss-search-box input { width:100%; padding:7px 12px; background:#162040; border:1px solid var(--w15); border-radius:var(--r-sm); color:var(--white); font-family:'Barlow Condensed',sans-serif; font-size:13px; outline:none; }
.ss-search-box input:focus { border-color:var(--gold); }
.ss-search-box input::placeholder { color:var(--w40); }
.ss-list { max-height:240px; overflow-y:auto; background:#0c1a35; }
.ss-option { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid rgba(255,255,255,.04); transition:background var(--t); background:#0c1a35; }
.ss-option:hover { background:#162040; }
.ss-option.active { background:rgba(201,162,39,.12); }
.ss-option:last-child { border-bottom:none; }
.ss-option img { width:22px; height:15px; object-fit:cover; border-radius:2px; }
.ss-option-name { flex:1; font-weight:500; }
.ss-option-meta { font-size:10px; color:var(--w40); }
.ss-no-result { padding:14px; text-align:center; color:var(--w40); font-size:13px; }

/* ═══════════════════════════════════════════════
   GROUPS PAGE
═══════════════════════════════════════════════ */
.groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:18px; }
.group-card { border-radius:var(--r); overflow:hidden; border:1px solid var(--w08); background:var(--w04); transition:border-color var(--t),transform var(--t); }
.group-card:hover { border-color:var(--gold-dim); transform:translateY(-2px); }
.group-hdr { padding:11px 14px; background:linear-gradient(135deg,rgba(201,162,39,.15),rgba(201,162,39,.04)); border-bottom:1px solid var(--gold-line); display:flex; align-items:center; justify-content:space-between; }
.group-hdr-name { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:3px; color:var(--gold); }
.group-hdr-played { font-size:11px; color:var(--w40); }
.g-thead { display:grid; grid-template-columns:1fr 26px 22px 22px 22px 36px 22px 30px; padding:5px 12px; font-size:10px; color:var(--w40); letter-spacing:1px; text-transform:uppercase; text-align:center; border-bottom:1px solid var(--w04); }
.g-thead .c-team { text-align:left; }
.g-row { display:grid; grid-template-columns:1fr 26px 22px 22px 22px 36px 22px 30px; padding:8px 12px; align-items:center; text-align:center; border-bottom:1px solid var(--w04); transition:background var(--t); position:relative; cursor:pointer; }
.g-row:last-child { border-bottom:none; }
.g-row:hover { background:var(--w04); }
.g-row.qualify { background:var(--green-dim); border-left:3px solid var(--green); }
.g-row.third-q { background:var(--amber-dim); border-left:3px solid var(--amber); }
.g-row.out { opacity:.5; }
.g-team { display:flex; align-items:center; gap:7px; text-align:left; }
.g-team img { width:22px; height:15px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.g-team-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-col { font-size:12px; font-weight:500; }
.g-pts { font-weight:700; color:var(--gold-hi); font-size:14px; }
.g-gd.pos { color:var(--green); }
.g-gd.neg { color:var(--red); }

/* ═══════════════════════════════════════════════
   BRACKET
═══════════════════════════════════════════════ */
.bracket-scroll { overflow-x:auto; padding-bottom:16px; }
.bracket-outer { display:flex; align-items:center; min-width:1440px; }
.bracket-col { display:flex; flex-direction:column; justify-content:space-around; flex:1; }
.bracket-col-label { font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:2px; color:var(--gold); text-align:center; margin-bottom:10px; padding:5px; background:rgba(201,162,39,.07); border-radius:4px; }
.b-slot { padding:3px 6px; display:flex; flex-direction:column; justify-content:center; }
.b-match { border:1px solid var(--w08); border-radius:var(--r-sm); overflow:hidden; background:var(--w04); width:152px; transition:border-color var(--t); cursor:pointer; }
.b-match:hover { border-color:var(--gold-dim); }
.b-match.winner-set { border-color:rgba(201,162,39,.3); }
.b-team { display:flex; align-items:center; gap:5px; padding:7px 8px; font-size:11px; font-weight:500; border-bottom:1px solid var(--w04); min-height:32px; transition:background var(--t); }
.b-team:last-child { border-bottom:none; }
.b-team.won { background:rgba(201,162,39,.1); color:var(--gold-hi); font-weight:700; }
.b-team.lost { opacity:.3; }
.b-team.empty { color:var(--w40); font-style:italic; font-size:10px; }
.b-team.seed .b-team-name { color:var(--w40); font-weight:700; letter-spacing:1px; }
.b-team img { width:19px; height:13px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.b-team-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.b-score { font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--gold); min-width:12px; text-align:right; }
.final-col { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:10px 8px; min-width:170px; }
.final-trophy { font-size:44px; filter:drop-shadow(0 0 16px rgba(201,162,39,.7)); animation:trophyGlow 3s ease-in-out infinite; }
@keyframes trophyGlow { 0%,100%{filter:drop-shadow(0 0 8px rgba(201,162,39,.5))} 50%{filter:drop-shadow(0 0 24px rgba(201,162,39,.9))} }
.champion-display { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--gold-hi); letter-spacing:2px; text-align:center; }

/* ═══════════════════════════════════════════════
   TEAMS PAGE
═══════════════════════════════════════════════ */
.teams-filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.teams-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.team-card { border-radius:var(--r); border:1px solid var(--w08); background:var(--w04); padding:20px 16px; text-align:center; cursor:pointer; transition:all var(--t); }
.team-card:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,.4); }
.team-card.fav { border-color:var(--gold); background:var(--gold-glow); }
.team-card img { width:56px; height:38px; object-fit:cover; border-radius:4px; margin-bottom:10px; box-shadow:0 4px 12px rgba(0,0,0,.4); }
.team-card-name { font-size:14px; font-weight:700; margin-bottom:4px; }
.team-card-group { font-size:11px; color:var(--w40); letter-spacing:1px; }
.team-card-rank { font-size:11px; color:var(--gold); margin-top:4px; }

/* ═══════════════════════════════════════════════
   TEAM DETAIL PAGE
═══════════════════════════════════════════════ */
.team-hero { padding:30px 28px; margin-bottom:20px; position:relative; overflow:hidden; }
.team-hero-bg { position:absolute; inset:0; opacity:.08; background-size:cover; background-position:center; filter:blur(2px); }
.team-hero-inner { position:relative; display:flex; align-items:center; gap:24px; }
.team-hero-flag { width:80px; height:54px; object-fit:cover; border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.5); flex-shrink:0; }
.team-hero-info .team-name-full { font-family:'Bebas Neue',sans-serif; font-size:40px; letter-spacing:4px; color:var(--gold); line-height:1; }
.team-hero-info .team-meta-row { display:flex; gap:16px; margin-top:8px; font-size:12px; color:var(--w60); flex-wrap:wrap; }
.team-hero-info .team-meta-row strong { color:var(--white); }
.team-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
@media(max-width:700px) { .team-stats-grid { grid-template-columns:repeat(2,1fr); } }
.team-stat-block { padding:16px 12px; text-align:center; background:var(--w04); border:1px solid var(--w08); border-radius:var(--r); }
.team-stat-val { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--gold-hi); }
.team-stat-lbl { font-size:10px; color:var(--w40); letter-spacing:1.5px; text-transform:uppercase; margin-top:4px; }

/* Player Cards (FIFA style) */
.squad-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.player-card { border-radius:var(--r); overflow:hidden; border:1px solid var(--w08); background:var(--w04); cursor:pointer; transition:all var(--t); position:relative; aspect-ratio:3/4; display:flex; flex-direction:column; }
.player-card:hover { border-color:var(--gold); transform:translateY(-3px) scale(1.02); box-shadow:0 12px 36px rgba(0,0,0,.5); }
.pc-top { position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pc-gradient { position:absolute; inset:0; }
.pc-gradient.GK { background:linear-gradient(160deg,#c47300,#7a4800); }
.pc-gradient.CB,.pc-gradient.RB,.pc-gradient.LB,.pc-gradient.DEF { background:linear-gradient(160deg,#1a4a8a,#0d2b52); }
.pc-gradient.DM,.pc-gradient.CM,.pc-gradient.AM,.pc-gradient.MID { background:linear-gradient(160deg,#0d6b3a,#064028); }
.pc-gradient.ST,.pc-gradient.LW,.pc-gradient.RW,.pc-gradient.FWD { background:linear-gradient(160deg,#8a1a1a,#520d0d); }
.pc-silhouette { position:relative; z-index:1; width:75%; opacity:.9; }
.pc-rating { position:absolute; top:8px; left:8px; font-family:'Bebas Neue',sans-serif; font-size:22px; color:rgba(255,255,255,.9); line-height:1; z-index:2; }
.pc-pos { position:absolute; top:30px; left:10px; font-size:9px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,.7); z-index:2; }
.pc-flag { position:absolute; top:8px; right:8px; width:24px; height:16px; object-fit:cover; border-radius:2px; z-index:2; }
.pc-bottom { padding:8px; background:rgba(0,0,0,.4); }
.pc-name { font-size:12px; font-weight:700; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.pc-club { font-size:10px; color:var(--w40); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:6px; }
.pc-stats { display:flex; justify-content:space-around; }
.pc-stat { text-align:center; }
.pc-stat-val { font-family:'Bebas Neue',sans-serif; font-size:13px; color:var(--gold-hi); }
.pc-stat-lbl { font-size:8px; color:var(--w40); letter-spacing:1px; }
/* SVG Silhouette */
.silhouette-svg { width:100%; height:auto; }

/* ═══════════════════════════════════════════════
   STADIUMS PAGE
═══════════════════════════════════════════════ */
.stadiums-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.stadium-card { border-radius:var(--r); overflow:hidden; border:1px solid var(--w08); background:var(--w04); cursor:pointer; transition:all var(--t); }
.stadium-card:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.5); }
.stadium-visual { height:140px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.stadium-art { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.stadium-art-svg { width:85%; opacity:.7; }
.stadium-country-flag { position:absolute; top:10px; right:10px; width:28px; height:19px; object-fit:cover; border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.stadium-role-badge { position:absolute; top:10px; left:10px; font-size:9px; font-weight:700; letter-spacing:1.5px; padding:3px 8px; border-radius:10px; text-transform:uppercase; }
.stadium-role-badge.final { background:var(--gold); color:var(--navy-deep); }
.stadium-role-badge.sf { background:var(--navy-light); border:1px solid var(--gold-dim); color:var(--gold); }
.stadium-role-badge.group { background:var(--w08); color:var(--w60); }
.stadium-info { padding:14px; }
.stadium-name { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:var(--white); margin-bottom:4px; }
.stadium-city { font-size:12px; color:var(--gold); margin-bottom:6px; }
.stadium-cap { font-size:12px; color:var(--w60); display:flex; align-items:center; gap:4px; }

/* ═══════════════════════════════════════════════
   THIRD PLACE
═══════════════════════════════════════════════ */
.tp-table { display:flex; flex-direction:column; gap:6px; }
.tp-hdr,.tp-row { display:grid; grid-template-columns:40px 1fr 32px 32px 32px 48px 32px 48px 90px; gap:6px; align-items:center; padding:8px 14px; text-align:center; }
.tp-hdr { font-size:10px; color:var(--w40); letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid var(--w08); padding-bottom:10px; }
.tp-hdr .c-left { text-align:left; }
.tp-row { background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm); }
.tp-row.q { background:var(--green-dim); border-left:3px solid var(--green); }
.tp-rank { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--w40); }
.tp-rank.top { color:var(--gold); }
.tp-team { display:flex; align-items:center; gap:8px; text-align:left; }
.tp-team img { width:22px; height:15px; object-fit:cover; border-radius:2px; }

/* ═══════════════════════════════════════════════
   ROAD TO THE FINAL
═══════════════════════════════════════════════ */
.rtf-layout { display:grid; grid-template-columns:260px 1fr; gap:20px; align-items:start; }
@media(max-width:800px) { .rtf-layout { grid-template-columns:1fr; } }
.rtf-pick { padding:20px; }
.rtf-pick-label { font-size:11px; color:var(--gold); letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; display:block; }
.rtf-team-hero { padding:16px; background:var(--gold-glow); border:1px solid var(--gold-dim); border-radius:var(--r); display:flex; align-items:center; gap:14px; margin-top:14px; }
.rtf-team-hero img { width:56px; height:38px; object-fit:cover; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,.4); }
.rtf-team-name { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:2px; color:var(--gold-hi); }
.rtf-team-pos { font-size:12px; color:var(--w60); margin-top:2px; }
.rtf-timeline { display:flex; flex-direction:column; gap:12px; }
.rtf-round { padding:16px; border-radius:var(--r-sm); border:1px solid var(--w08); background:var(--w04); position:relative; }
.rtf-round.current { border-color:var(--gold); background:var(--gold-glow); }
.rtf-round.completed-w { border-left:3px solid var(--green); }
.rtf-round.completed-l { border-left:3px solid var(--red); opacity:.6; }
.rtf-round-title { font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:2px; color:var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.rtf-round-prob { font-size:11px; color:var(--w40); font-family:'Barlow Condensed',sans-serif; letter-spacing:1px; font-weight:400; margin-left:auto; }
.rtf-opponents { display:flex; flex-wrap:wrap; gap:8px; }
.rtf-opp { display:flex; align-items:center; gap:6px; padding:5px 10px; background:var(--w04); border:1px solid var(--w08); border-radius:20px; font-size:12px; }
.rtf-opp img { width:20px; height:13px; object-fit:cover; border-radius:2px; }
.rtf-opp.confirmed { border-color:var(--gold-dim); background:var(--gold-glow); color:var(--gold-hi); }
.rtf-no-path { padding:40px; text-align:center; color:var(--red); font-size:14px; }

/* ═══════════════════════════════════════════════
   RIVALRY ANALYSER
═══════════════════════════════════════════════ */
.rivalry-selectors { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin-bottom:24px; }
@media(max-width:700px) { .rivalry-selectors { grid-template-columns:1fr; } }
.rivalry-vs { font-family:'Bebas Neue',sans-serif; font-size:36px; color:var(--gold-dim); text-align:center; }
.rivalry-result { padding:24px; }
.rivalry-empty { text-align:center; padding:40px; color:var(--w40); font-size:14px; }

.rivalry-verdict { text-align:center; padding:20px; border-radius:var(--r); margin-bottom:20px; }
.rivalry-verdict.possible { background:var(--green-dim); border:1px solid var(--green-b); }
.rivalry-verdict.impossible { background:var(--red-dim); border:1px solid rgba(239,83,80,.3); }
.rv-icon { font-size:36px; margin-bottom:6px; }
.rv-title { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:3px; }
.rv-title.yes { color:var(--green); }
.rv-title.no { color:var(--red); }
.rv-sub { font-size:14px; color:var(--w80); margin-top:6px; }
.rv-earliest { font-size:11px; color:var(--w40); letter-spacing:2px; text-transform:uppercase; margin-top:10px; }
.rv-round { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--gold-hi); letter-spacing:2px; }

.rivalry-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media(max-width:700px) { .rivalry-cards { grid-template-columns:1fr; } }
.rivalry-team-card { padding:16px; border-radius:var(--r-sm); border:1px solid var(--w08); background:var(--w04); }
.rivalry-team-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rivalry-team-header img { width:32px; height:22px; object-fit:cover; border-radius:3px; }
.rivalry-team-header .rt-name { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; }
.rivalry-stat-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--w04); font-size:12px; }
.rivalry-stat-row:last-child { border-bottom:none; }
.rivalry-stat-label { color:var(--w40); }
.rivalry-stat-val { color:var(--white); font-weight:600; }

.h2h-bar { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.h2h-team { font-size:11px; color:var(--w60); width:70px; }
.h2h-team.right { text-align:right; }
.h2h-track { flex:1; height:8px; background:var(--w08); border-radius:4px; overflow:hidden; display:flex; }
.h2h-fill-1 { height:100%; background:var(--gold); }
.h2h-fill-d { height:100%; background:var(--w40); }
.h2h-fill-2 { height:100%; background:var(--navy-light); border:1px solid var(--w40); }

.prediction-box { padding:16px; border-radius:var(--r-sm); border:1px solid var(--gold-dim); background:var(--gold-glow); text-align:center; margin-top:16px; }
.pred-title { font-size:10px; color:var(--gold); letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
.pred-score { font-family:'Bebas Neue',sans-serif; font-size:42px; color:var(--gold-hi); letter-spacing:4px; }
.pred-desc { font-size:12px; color:var(--w60); margin-top:6px; }
.pred-probs { display:flex; justify-content:space-around; margin-top:12px; }
.pred-prob { text-align:center; }
.pred-prob-val { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--white); }
.pred-prob-lbl { font-size:10px; color:var(--w40); }

/* Retirement notice for rivalry page */
.rivalry-retired { padding:20px; text-align:center; background:var(--gold-glow); border:1px solid var(--gold-dim); border-radius:var(--r); }
.rivalry-retired p { font-size:14px; color:var(--w80); line-height:1.7; }

/* ═══════════════════════════════════════════════
   MATCH ENTRY
═══════════════════════════════════════════════ */
.me-layout { display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; }
@media(max-width:800px) { .me-layout { grid-template-columns:1fr; } }
.me-filters { padding:18px; }
.me-filter-title { font-size:10px; color:var(--gold); letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
.me-filter-btns { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.me-fbtn { padding:5px 11px; border-radius:16px; border:1px solid var(--w15); background:none; color:var(--w40); font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600; letter-spacing:1px; cursor:pointer; transition:all var(--t); }
.me-fbtn:hover { border-color:var(--gold); color:var(--gold); }
.me-fbtn.active { background:var(--gold); border-color:var(--gold); color:var(--navy-deep); }
.me-list { display:flex; flex-direction:column; gap:7px; max-height:520px; overflow-y:auto; }
.me-item { padding:11px 14px; border-radius:var(--r-sm); border:1px solid var(--w08); background:var(--w04); cursor:pointer; transition:all var(--t); }
.me-item:hover,.me-item.selected { border-color:var(--gold); background:var(--gold-glow); }
.me-item.played { border-left:3px solid var(--green); }
.me-teams { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.me-team { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; }
.me-team.r { flex-direction:row-reverse; }
.me-team img { width:16px; height:11px; object-fit:cover; border-radius:2px; }
.me-score-disp { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--gold); text-align:center; min-width:44px; }
.me-score-disp.pending { font-family:'Barlow Condensed',sans-serif; font-size:12px; color:var(--w40); font-weight:400; }
.me-badge { font-size:10px; color:var(--w40); text-align:center; margin-top:5px; }
.me-panel { padding:28px; min-height:320px; }
.me-panel-empty { text-align:center; padding:60px 20px; }
.me-empty-icon { font-size:48px; opacity:.3; margin-bottom:12px; }
.score-entry-teams { display:flex; align-items:center; justify-content:center; gap:20px; margin:20px 0; }
.se-team { text-align:center; flex:1; }
.se-flag { width:64px; height:43px; object-fit:cover; border-radius:5px; margin-bottom:10px; box-shadow:0 4px 16px rgba(0,0,0,.4); }
.se-name { font-size:15px; font-weight:600; }
.se-vs { font-family:'Bebas Neue',sans-serif; font-size:30px; color:var(--w15); letter-spacing:4px; }
.score-inputs { display:flex; align-items:center; justify-content:center; gap:14px; margin:16px 0; }
.si-wrap { text-align:center; }
.si-label { font-size:10px; color:var(--w40); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.si-input { width:76px; height:60px; background:var(--navy-mid); border:2px solid var(--w15); border-radius:var(--r-sm); color:var(--white); font-family:'Bebas Neue',sans-serif; font-size:38px; text-align:center; outline:none; transition:border-color var(--t); -moz-appearance:textfield; }
.si-input::-webkit-outer-spin-button,.si-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.si-input:focus { border-color:var(--gold); }
.si-dash { font-family:'Bebas Neue',sans-serif; font-size:38px; color:var(--w15); }
.score-btn-row { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.me-data-row { display:flex; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--w08); flex-wrap:wrap; }

/* ═══════════════════════════════════════════════
   SIMULATOR
═══════════════════════════════════════════════ */
.sim-top { padding:20px; margin-bottom:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sim-note { font-size:12px; color:var(--w40); flex:1; }
.sim-results-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:900px) { .sim-results-grid { grid-template-columns:1fr; } }
.sim-chart { padding:22px; }
.sim-chart-title { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:3px; color:var(--gold); margin-bottom:18px; }
.sim-row { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.sim-team { display:flex; align-items:center; gap:7px; width:150px; flex-shrink:0; font-size:13px; }
.sim-team img { width:22px; height:15px; object-fit:cover; border-radius:2px; }
.sim-track { flex:1; height:22px; background:var(--w08); border-radius:11px; overflow:hidden; }
.sim-bar { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-hi)); border-radius:11px; transition:width .9s cubic-bezier(.4,0,.2,1); }
.sim-bar.blue { background:linear-gradient(90deg,#2a7ae2,#5ba4f5); }
.sim-pct { width:42px; font-family:'Bebas Neue',sans-serif; font-size:15px; color:var(--gold); text-align:right; }
.sim-pct.blue { color:#5ba4f5; }
.sim-running { text-align:center; padding:50px; }
.sim-spin { font-size:36px; animation:spin 1s linear infinite; display:inline-block; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ═══════════════════════════════════════════════
   FOOTER + MODAL + TOAST
═══════════════════════════════════════════════ */
.site-footer { background:rgba(0,0,0,.4); border-top:1px solid var(--gold-line); padding:24px 32px; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-brand { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:3px; color:var(--gold); }
.footer-links { display:flex; gap:20px; }
.footer-links a { font-size:12px; color:var(--w40); text-decoration:none; letter-spacing:1px; transition:color var(--t); }
.footer-links a:hover { color:var(--gold); }
.footer-note { font-size:10px; color:var(--w40); letter-spacing:1px; }

.modal-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-box { background:var(--navy-card); border:1px solid var(--gold-dim); border-radius:var(--r); padding:28px; max-width:500px; width:100%; position:relative; max-height:80vh; overflow-y:auto; }
.modal-close { position:absolute; top:12px; right:14px; background:none; border:none; color:var(--w60); font-size:22px; cursor:pointer; }
.modal-close:hover { color:var(--white); }

.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy-card); border:1px solid var(--gold-dim); color:var(--white); padding:11px 22px; border-radius:40px; font-size:13px; font-weight:500; opacity:0; transition:all .3s; pointer-events:none; z-index:9999; white-space:nowrap; box-shadow:0 8px 32px rgba(0,0,0,.5); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:768px) {
  .app-layout { padding:16px 14px 80px; }
  .site-header { padding:8px 14px; }
  .brand-name { font-size:18px; }
  .gsearch-input { font-size:13px; }
  .hub-hero { padding:36px 20px; }
  .hub-countdown { gap:12px; }
  .cd-num { font-size:36px; }
  .groups-grid { grid-template-columns:1fr; }
  .squad-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .teams-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .stadiums-grid { grid-template-columns:1fr 1fr; }
  .rtf-layout,.me-layout { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .stadiums-grid { grid-template-columns:1fr; }
  .rivalry-cards { grid-template-columns:1fr; }
  .rivalry-selectors { grid-template-columns:1fr; }
  .rivalry-vs { display:none; }
}

/* ── FIXTURE DISPLAY ────────────────────────────────────────── */
.fixture-time-badge {
  font-size:10px; color:var(--gold); letter-spacing:1px; text-transform:uppercase;
  background:rgba(201,162,39,.1); border:1px solid var(--gold-line);
  border-radius:4px; padding:2px 7px; white-space:nowrap;
}
.fixture-date-label { font-size:10px; color:var(--w40); margin-top:4px; letter-spacing:.5px; }
.me-item-date { font-size:10px; color:var(--gold); margin-top:4px; letter-spacing:.5px; }
.me-item-note { font-size:9px; color:var(--amber); letter-spacing:1px; text-transform:uppercase; }

/* ── STADIUM PAGE V2 ────────────────────────────────────────── */
/* ── STADIUMS — host-city journey map ───────────────────────── */
.stad-map-panel {
  border:1px solid var(--w08); border-radius:var(--r); overflow:hidden;
  background:radial-gradient(circle at 50% 38%, rgba(56,189,248,.06), transparent 60%), #0a1226;
  margin-bottom:18px;
}
.stad-map-canvas { position:relative; width:100%; display:flex; justify-content:center; }
.stad-map-svg { display:block; width:100%; height:auto; max-height:440px; max-width:100%; }
/* Real continent silhouette behind the venue markers */
.stad-landmass path {
  fill:rgba(120,150,200,.07);
  stroke:rgba(140,175,230,.32);
  stroke-width:1; stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.stad-mk { cursor:pointer; outline:none; transition:transform .15s ease; transform-box:fill-box; transform-origin:center; }
.stad-mk:hover, .stad-mk:focus-visible { transform:scale(1.35); }
.stad-mk .stad-mk-dot { transition:filter .15s ease; }
.stad-mk:hover .stad-mk-dot { filter:drop-shadow(0 0 5px currentColor); }
.stad-mk-final { animation:stadFinalPulse 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes stadFinalPulse { 0%,100%{filter:drop-shadow(0 0 3px rgba(255,211,77,.5))} 50%{filter:drop-shadow(0 0 10px rgba(255,211,77,.95))} }
.stad-final-lbl { font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:1.5px; fill:#ffd34d; dominant-baseline:middle; pointer-events:none; }
.stad-tip {
  position:absolute; pointer-events:none; width:188px; overflow:hidden;
  background:rgba(8,14,28,.97); border:1px solid var(--gold-dim); border-radius:9px;
  text-align:center; z-index:5;
  opacity:0; transition:opacity .12s ease; box-shadow:0 10px 28px rgba(0,0,0,.6);
}
.stad-tip.show { opacity:1; }
.stad-tip-img { width:100%; height:96px; background:var(--w08); }
.stad-tip-img img { width:100%; height:100%; object-fit:cover; display:block; }
.stad-tip-body { padding:7px 10px 9px; }
.stad-tip-name { font-family:'Bebas Neue',sans-serif; font-size:15px; letter-spacing:1px; color:var(--gold-hi); line-height:1.1; }
.stad-tip-city { font-size:11px; color:var(--w60); margin-top:1px; }
.stad-tip-meta { font-size:10px; color:var(--w40); margin-top:2px; }
.stad-tip-final { font-size:10px; color:var(--gold); margin-top:4px; font-weight:600; letter-spacing:.5px; }
.stad-map-legend {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:10px 16px; border-top:1px solid var(--w08); background:rgba(0,0,0,.2);
}
.stad-leg { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--w60); letter-spacing:.5px; }
.stad-leg i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.stad-leg i.stad-leg-star { width:auto; height:auto; border-radius:0; color:#ffd34d; font-size:13px; line-height:1; }
.stad-map-hint { margin-left:auto; font-size:10px; color:var(--w40); letter-spacing:.5px; font-style:italic; }
.stad-credit { font-size:9px; color:var(--w40); margin:-12px 0 22px; opacity:.7; }

.stad-stat-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:26px;
}
.stad-stat {
  background:var(--w04); border:1px solid var(--w08); border-radius:10px;
  padding:12px 8px; text-align:center;
}
.stad-stat-num { display:block; font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:1px; color:var(--gold); line-height:1; }
.stad-stat-lbl { display:block; font-size:9px; letter-spacing:1px; color:var(--w40); text-transform:uppercase; margin-top:5px; }

.stad-region { margin-bottom:30px; }
.stad-region-head {
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  padding-bottom:8px; border-bottom:1px solid var(--gold-line);
}
.stad-region-dot { width:11px; height:11px; border-radius:50%; background:var(--rc); box-shadow:0 0 10px var(--rc); flex-shrink:0; }
.stad-region-name { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:3px; color:var(--white); }
.stad-region-desc { font-size:11px; color:var(--w40); letter-spacing:.5px; }
.stad-region-count { margin-left:auto; font-size:10px; letter-spacing:1px; color:var(--w40); text-transform:uppercase; }

.stadiums-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }

.stadium-card-v2 {
  border-radius:var(--r); overflow:hidden; border:1px solid var(--w08);
  background:#0f2040; transition:border-color var(--t),transform var(--t),box-shadow var(--t); cursor:default;
  border-top:3px solid var(--rc);
}
.stadium-card-v2:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.5); }
.stadium-card-v2.flash { animation:stadFlash 1.4s ease; }
@keyframes stadFlash { 0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,0)} 25%{box-shadow:0 0 0 3px rgba(201,162,39,.7),0 12px 40px rgba(0,0,0,.5)} }

.stad-card-top { padding:16px 18px 12px; display:flex; flex-direction:column; gap:5px; position:relative; }
.stad-card-toprow { display:flex; align-items:center; }
.stad-card-toprow .stadium-role-badge { position:static; }
.stad-flag { width:24px; height:16px; object-fit:cover; border-radius:2px; margin-left:auto; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.stad-name { font-family:'Bebas Neue',sans-serif; font-size:23px; letter-spacing:1.5px; color:var(--white); line-height:1.05; }
.stad-fifaname { font-size:10px; color:var(--w40); letter-spacing:.3px; }
.stad-city-row { display:flex; align-items:center; gap:8px; }
.stad-city-text { font-size:12px; color:var(--w60); }

.stad-facts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--w08); border-bottom:1px solid var(--w08); }
.stad-fact { padding:10px 6px; text-align:center; border-right:1px solid var(--w04); }
.stad-fact:last-child { border-right:none; }
.stad-fact-n { display:block; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px; color:var(--gold-hi); line-height:1.1; }
.stad-fact-l { display:block; font-size:9px; letter-spacing:1px; color:var(--w40); text-transform:uppercase; margin-top:3px; }

.stad-fixtures-section { padding:12px 18px 16px; }
.stad-fixtures-title {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:10px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:8px;
}
.stad-tznow { font-size:9px; color:var(--w40); letter-spacing:.5px; text-transform:none; white-space:nowrap; }
.stad-fixture-row {
  display:flex; align-items:center; gap:8px; padding:7px 0;
  border-bottom:1px solid var(--w04); font-size:12px;
}
.stad-fixture-row:last-child { border-bottom:none; }
.stad-fixture-teams { display:flex; align-items:center; gap:6px; flex:1; flex-wrap:wrap; font-weight:500; }
.stad-fixture-teams img { width:16px; height:11px; object-fit:cover; border-radius:2px; }
.stad-vs { color:var(--w40); margin:0 2px; }
.stad-fixture-right { flex-shrink:0; text-align:right; }
.stad-fixture-time { font-size:10px; color:var(--gold); letter-spacing:.5px; white-space:nowrap; }
.stad-score { font-family:'Bebas Neue',sans-serif; font-size:15px; color:var(--gold); }
.stad-no-fixtures { font-size:12px; color:var(--w40); font-style:italic; padding:8px 0; }

.stadium-role-badge.ko { background:var(--navy-light); border:1px solid var(--w08); color:var(--w80); }
.stadium-role-badge.opening { background:linear-gradient(90deg,var(--gold),var(--gold-hi)); color:var(--navy-deep); }

.stad-fanzone {
  display:flex; align-items:flex-start; gap:14px; margin-top:8px;
  background:linear-gradient(135deg,rgba(201,162,39,.08),rgba(201,162,39,.02));
  border:1px solid var(--gold-line); border-radius:var(--r); padding:16px 18px;
}
.stad-fanzone-icon { font-size:28px; line-height:1; flex-shrink:0; }
.stad-fanzone-title { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:var(--gold); margin-bottom:4px; }
.stad-fanzone-text { font-size:12.5px; color:var(--w60); line-height:1.5; }

@media (max-width:560px) {
  .stad-stat-strip { grid-template-columns:repeat(2,1fr); }
  .stad-region-desc { display:none; }
  .stad-map-hint { display:none; }
}

/* ── HUB MATCH CARDS ─────────────────────────────────────────── */
.hub-match-time { font-size:11px; color:var(--gold); font-weight:700; }
.hub-match-stadium { font-size:10px; color:var(--w40); }
.hub-match-note { font-size:9px; color:var(--amber); letter-spacing:1px; text-transform:uppercase; }
.hub-no-matches { padding:20px; text-align:center; color:var(--w40); font-size:13px; }

/* ── SCHEDULE PAGE ──────────────────────────────────────────── */
.sched-progress-bar {
  height:6px; background:var(--w08); border-radius:3px; margin-bottom:18px;
  position:relative; overflow:hidden;
}
.sched-progress-fill {
  height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  border-radius:3px; transition:width 1s ease;
}
.sched-progress-label {
  position:absolute; right:0; top:8px; font-size:10px;
  color:var(--w40); letter-spacing:1px;
}
.schedule-days { display:flex; flex-direction:column; gap:24px; }
.sched-day-label {
  font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:3px;
  color:var(--gold); padding:8px 0; border-bottom:1px solid var(--gold-line);
  margin-bottom:10px;
}
.sched-day-matches { display:flex; flex-direction:column; gap:8px; }

.sched-match {
  background:#0f2040; border:1px solid var(--w08); border-radius:var(--r);
  padding:14px 16px; cursor:pointer; transition:all var(--t);
}
.sched-match:hover { border-color:var(--gold-dim); background:#162550; transform:translateX(2px); }
.sched-match.played { border-left:3px solid var(--green); }
.sched-match.live { border-left:3px solid var(--red); animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{border-color:var(--red)} 50%{border-color:rgba(239,83,80,.4)} }

.sched-match-meta {
  display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap;
}
.sched-group-badge { font-size:10px; color:var(--w40); letter-spacing:1px; text-transform:uppercase; }
.sched-status {
  font-size:9px; font-weight:700; letter-spacing:2px; padding:2px 8px;
  border-radius:10px; text-transform:uppercase;
}
.sched-status.ft     { background:var(--green-dim); color:var(--green); border:1px solid var(--green-b); }
.sched-status.live   { background:rgba(239,83,80,.15); color:var(--red); border:1px solid rgba(239,83,80,.3); }
.sched-status.soon   { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(255,171,0,.3); }
.sched-status.opening{ background:var(--gold-glow); color:var(--gold); border:1px solid var(--gold-dim); }
.sched-status.simul  { background:rgba(90,90,200,.15); color:#aab; border:1px solid rgba(90,90,200,.3); }

.sched-match-body {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:12px;
}
.sched-team {
  display:flex; align-items:center; gap:10px;
}
.sched-team.right { flex-direction:row-reverse; }
.sched-team-name { font-size:15px; font-weight:600; }
.sched-scorers { font-size:11px; color:var(--w40); }
.sched-score-center { text-align:center; }
.sched-score {
  font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:3px;
  color:var(--gold-hi); line-height:1;
}
.sched-time {
  font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:2px;
  color:var(--w60); line-height:1;
}
.sched-stadium { font-size:10px; color:var(--w40); margin-top:4px; letter-spacing:.5px; }

/* ── GOLDEN BOOT ────────────────────────────────────────────── */
.gb-table { display:flex; flex-direction:column; gap:6px; }
.gb-header {
  display:grid; grid-template-columns:44px 1fr 180px 60px 1fr;
  padding:6px 14px; font-size:10px; color:var(--w40); letter-spacing:1.5px;
  text-transform:uppercase; border-bottom:1px solid var(--w08); margin-bottom:4px;
}
.gb-row {
  display:grid; grid-template-columns:44px 1fr 180px 60px 1fr;
  align-items:center; padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--w08); background:var(--w04); transition:all var(--t);
}
.gb-row:hover { border-color:var(--gold-dim); background:var(--gold-glow); }
.gb-row.gold   { border-left:3px solid #ffd700; background:rgba(255,215,0,.06); }
.gb-row.silver { border-left:3px solid #c0c0c0; background:rgba(192,192,192,.04); }
.gb-row.bronze { border-left:3px solid #cd7f32; background:rgba(205,127,50,.04); }
.gb-rank { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--w60); }
.gb-player-name { font-size:15px; font-weight:700; }
.gb-team-col { display:flex; align-items:center; }
.gb-goals-num { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--gold-hi); }
.gb-min {
  display:inline-block; background:var(--w08); border-radius:4px;
  padding:1px 5px; font-size:10px; color:var(--w60); margin:2px;
}
@media(max-width:700px) {
  .gb-header,.gb-row { grid-template-columns:36px 1fr 80px 50px; }
  .gb-minutes { display:none; }
}

/* ── GOALSCORER ENTRY ───────────────────────────────────────── */
.gs-section {
  margin-top:20px; padding:16px; background:rgba(201,162,39,.05);
  border:1px solid var(--gold-line); border-radius:var(--r);
}
.gs-title {
  font-family:'Bebas Neue',sans-serif; font-size:15px; letter-spacing:2px;
  color:var(--gold); margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.gs-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px) { .gs-columns { grid-template-columns:1fr; } }
.gs-col-header {
  display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--white); margin-bottom:8px;
}
.gs-list { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; min-height:28px; }
.gs-item {
  display:flex; align-items:center; gap:6px; font-size:12px;
  background:var(--w04); padding:4px 8px; border-radius:4px;
}
.gs-player { flex:1; font-weight:500; }
.gs-min { font-size:10px; color:var(--gold); letter-spacing:.5px; }
.gs-remove {
  background:none; border:none; color:var(--red); cursor:pointer;
  font-size:14px; padding:0 2px; line-height:1; opacity:.7;
}
.gs-remove:hover { opacity:1; }
.gs-add-row { display:flex; gap:6px; align-items:center; }
.gs-input {
  flex:1; padding:6px 10px; background:var(--navy-mid); border:1px solid var(--w15);
  border-radius:var(--r-sm); color:var(--white); font-family:'Barlow Condensed',sans-serif;
  font-size:13px; outline:none;
}
.gs-input:focus { border-color:var(--gold); }
.gs-input::placeholder { color:var(--w40); }
.gs-input-min {
  width:52px; padding:6px 8px; background:var(--navy-mid); border:1px solid var(--w15);
  border-radius:var(--r-sm); color:var(--white); font-family:'Barlow Condensed',sans-serif;
  font-size:13px; outline:none; -moz-appearance:textfield;
  text-align:center;
}
.gs-input-min::-webkit-outer-spin-button,
.gs-input-min::-webkit-inner-spin-button { -webkit-appearance:none; }
.gs-input-min:focus { border-color:var(--gold); }
.gs-add-btn {
  width:32px; height:32px; border-radius:50%; background:var(--gold); border:none;
  color:var(--navy-deep); font-size:20px; cursor:pointer; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all var(--t);
}
.gs-add-btn:hover { background:var(--gold-hi); transform:scale(1.1); }

/* ── RESULT SAVED ANIMATION ─────────────────────────────────── */
@keyframes resultFlash {
  0%   { box-shadow: 0 0 0 rgba(0,230,118,0); }
  30%  { box-shadow: 0 0 40px rgba(0,230,118,0.6); }
  100% { box-shadow: 0 0 0 rgba(0,230,118,0); }
}
.me-panel.saved { animation: resultFlash 0.8s ease; }

/* ── PREDICTIONS PAGE ───────────────────────────────────────── */
.pred-card {
  background:#0f2040; border:1px solid var(--w08); border-radius:var(--r-sm);
  padding:12px 14px; transition:all var(--t);
}
.pred-card:hover { border-color:var(--gold-dim); }
.pred-card.pred-exact  { border-left:3px solid var(--gold); background:rgba(201,162,39,.06); }
.pred-card.pred-correct{ border-left:3px solid var(--green); background:var(--green-dim); }
.pred-card.pred-wrong  { border-left:3px solid var(--red); opacity:.7; }
.pred-card-meta { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.pred-pts { font-size:11px; font-weight:700; letter-spacing:1px; padding:2px 8px; border-radius:10px; }
.pred-pts.exact   { background:var(--gold); color:var(--navy-deep); }
.pred-pts.correct { background:var(--green); color:var(--navy-deep); }
.pred-pts.wrong   { background:var(--red-dim); color:var(--red); border:1px solid rgba(239,83,80,.3); }
.pred-card-body {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:12px;
}
.pred-team { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.pred-team.right { flex-direction:row-reverse; }
.pred-inputs { display:flex; align-items:center; gap:8px; justify-content:center; }
.pred-input {
  width:48px; height:44px; background:var(--navy-mid); border:1px solid var(--w20);
  border-radius:var(--r-sm); color:var(--white); font-family:'Bebas Neue',sans-serif;
  font-size:26px; text-align:center; outline:none; transition:border-color var(--t);
  -moz-appearance:textfield;
}
.pred-input::-webkit-outer-spin-button,.pred-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.pred-input:focus { border-color:var(--gold); box-shadow:0 0 12px var(--gold-glow); }
.pred-input:disabled { opacity:.5; cursor:not-allowed; }

/* ── ANIMATED SIM OVERLAY ───────────────────────────────────── */
.anim-sim-overlay {
  position:fixed; inset:0; z-index:5000;
  background:rgba(2,8,16,.95); display:flex;
  align-items:center; justify-content:center; padding:20px;
}
.aso-card {
  background:#0c1a35; border:1px solid var(--gold-dim);
  border-radius:16px; padding:32px; width:100%;
  max-width:560px; max-height:85vh; overflow-y:auto;
  box-shadow:0 0 80px rgba(201,162,39,.2);
}
.aso-round {
  font-family:'Bebas Neue',sans-serif; font-size:14px; letter-spacing:4px;
  color:var(--gold); text-align:center; margin-bottom:20px;
  text-transform:uppercase;
}
.aso-match { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; margin-bottom:20px; }
.aso-team { display:flex; flex-direction:column; align-items:center; gap:8px; }
.aso-flag { font-size:40px; }
.aso-tname { font-size:15px; font-weight:700; text-align:center; }
.aso-center { text-align:center; }
.aso-score {
  font-family:'Bebas Neue',sans-serif; font-size:52px; letter-spacing:4px;
  color:var(--gold-hi); line-height:1;
}
.aso-min { font-size:13px; color:var(--w40); letter-spacing:2px; margin-top:4px; }
.aso-events {
  max-height:180px; overflow-y:auto; margin-bottom:16px;
  border-top:1px solid var(--w08); padding-top:12px;
}
.aso-event {
  font-size:13px; color:var(--w80); padding:4px 0;
  border-bottom:1px solid var(--w04); line-height:1.4;
}
.aso-event:last-child { border-bottom:none; }
.aso-ft { color:var(--gold); font-weight:700; }
.aso-goal-icon { font-size:14px; }
.aso-btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:4px; }
.aso-progress { text-align:center; font-size:11px; color:var(--w40); letter-spacing:1px; margin-top:12px; }

/* ── HUB PREDICTION WIDGET ───────────────────────────────────── */
.pred-widget {
  cursor:pointer; transition:all var(--t);
}
.pred-widget:hover { border-color:var(--gold); transform:translateY(-2px); }

/* ── ANIMATED SIM OVERLAY V2 ─────────────────────────────────── */
.aso-scoreboard {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:12px; margin-bottom:20px;
}
.aso-team-col { display:flex; flex-direction:column; align-items:center; gap:8px; }
.aso-bigflag { font-size:52px; line-height:1; }
.aso-bignation { font-family:'Bebas Neue',sans-serif; font-size:clamp(13px,3vw,18px); letter-spacing:1px; color:var(--w80); text-align:center; line-height:1.2; }
.aso-center-col { text-align:center; }
.aso-score {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(44px,8vw,68px);
  letter-spacing:4px; color:var(--gold-hi); line-height:1;
  transition:transform .3s,color .3s;
}
.aso-min-badge {
  display:inline-block; margin-top:6px; padding:3px 12px;
  background:var(--w08); border-radius:20px;
  font-size:13px; letter-spacing:2px; color:var(--w60);
}
.aso-events-wrap {
  max-height:200px; overflow-y:auto; margin-bottom:16px;
  border-top:1px solid var(--w08); padding-top:12px;
  scrollbar-width:thin;
}
.aso-event { font-size:13px; color:var(--w80); padding:6px 0; border-bottom:1px solid var(--w04); line-height:1.4; }
.aso-event:last-child { border-bottom:none; }
.aso-goal-event { color:var(--gold); }
.aso-ft { color:var(--green); font-weight:700; }
.aso-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.aso-progress { text-align:center; font-size:11px; color:var(--w40); letter-spacing:1px; margin-top:12px; }

@keyframes goalFlash {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.3); color:var(--gold-hi); }
}

/* ── SIM RESULTS SCREEN ─────────────────────────────────────── */
.aso-results { max-height:90vh; overflow-y:auto; padding:20px; }
.aso-results-header {
  display:flex; align-items:center; gap:16px; margin-bottom:20px;
  padding-bottom:16px; border-bottom:1px solid var(--gold-line);
}
.aso-results-header > div { flex:1; }
.aso-results-tabs {
  display:flex; gap:4px; margin-bottom:16px;
  border-bottom:1px solid var(--w08); padding-bottom:4px;
}
.aso-tab {
  padding:8px 20px; border:none; border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:none; color:var(--w40); font-family:'Barlow Condensed',sans-serif;
  font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; transition:all var(--t); border-bottom:2px solid transparent;
}
.aso-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.aso-tab-content { }

/* Group results grid */
.sim-groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.sim-result-group {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 10px; background:var(--w04); border-radius:var(--r-sm);
  border:1px solid var(--w08); font-size:12px;
}
.srg-label { font-family:'Bebas Neue'; font-size:14px; color:var(--gold); min-width:52px; }
.srg-team { display:flex; align-items:center; gap:4px; }
.srg-team.q1 { color:var(--white); font-weight:600; }
.srg-team.q2 { color:var(--w60); }

/* KO results */
.sim-result-round { margin-bottom:16px; }
.srr-label { font-family:'Bebas Neue'; font-size:16px; letter-spacing:2px; color:var(--gold); margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid var(--gold-line); display:block; }
.srr-matches { display:flex; flex-direction:column; gap:5px; }
.srr-match {
  display:grid; grid-template-columns:1fr 56px 1fr;
  align-items:center; gap:8px; padding:7px 10px;
  background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm);
  font-size:12px;
}
.srr-match.done { border-left:2px solid var(--green); }
.srr-team { display:flex; align-items:center; gap:5px; }
.srr-team.right { flex-direction:row-reverse; }
.srr-team.won { color:var(--gold-hi); font-weight:700; }
.srr-score { font-family:'Bebas Neue'; font-size:18px; color:var(--gold); text-align:center; }

/* ── SIMULATOR PAGE ─────────────────────────────────────────── */
.sim-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
@media(max-width:700px) { .sim-mode-grid { grid-template-columns:1fr; } }
.sim-mode-card {
  padding:28px 24px; text-align:center; border-radius:var(--r);
  border:1px solid var(--w08); background:var(--w04);
  cursor:pointer; transition:all .25s;
}
.sim-mode-card:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.4); }
.sim-mode-card.primary { background:var(--gold-glow); border-color:var(--gold-dim); }
.sim-mode-icon { font-size:48px; margin-bottom:14px; }
.sim-mode-title { font-family:'Bebas Neue'; font-size:26px; letter-spacing:3px; color:var(--gold); margin-bottom:10px; }
.sim-mode-desc { font-size:13px; color:var(--w60); line-height:1.6; margin-bottom:16px; }

/* ════════════════════════════════════════════════════════════════
   CINEMATIC TOURNAMENT BROADCAST OVERLAY
═══════════════════════════════════════════════════════════════════ */
.bc-overlay {
  position:fixed; inset:0; z-index:3000;
  background:radial-gradient(circle at 50% 28%, #0a1a3a 0%, #05101f 55%, #020810 100%);
  display:flex; flex-direction:column;
  animation:bcFade .35s ease;
}
@keyframes bcFade { from{opacity:0} to{opacity:1} }
.bc-confetti { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }

/* Top bar */
.bc-bar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:1px solid var(--w08);
  background:rgba(3,8,16,.6); backdrop-filter:blur(6px); position:relative; z-index:10;
}
.bc-phase { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:3px; color:var(--gold); }
.bc-dots { display:flex; gap:6px; flex:1; }
.bc-dot { width:9px; height:9px; border-radius:50%; background:var(--w15); transition:all .3s; }
.bc-dot.done { background:var(--gold-lo); }
.bc-dot.on { background:var(--gold-hi); box-shadow:0 0 10px var(--gold); transform:scale(1.25); }
.bc-controls { display:flex; gap:8px; }
.bc-btn {
  background:var(--w08); border:1px solid var(--w15); color:var(--w80);
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:1px;
  padding:8px 14px; border-radius:var(--r-sm); cursor:pointer; transition:all var(--t); white-space:nowrap;
}
.bc-btn:hover { border-color:var(--gold); color:var(--white); }
.bc-btn-x:hover { border-color:var(--red); color:var(--red); }

/* Stage */
.bc-stage {
  flex:1; overflow-y:auto; overflow-x:hidden; position:relative; z-index:6;
  padding:28px 22px 48px; display:flex; flex-direction:column; align-items:center;
}
.bc-section-title { font-family:'Bebas Neue',sans-serif; font-size:34px; letter-spacing:5px; color:var(--white); text-align:center; margin-bottom:6px; }
.bc-section-title.gold { color:var(--gold-hi); text-shadow:0 0 30px var(--gold-glow); }
.bc-section-sub { font-size:12px; color:var(--w60); letter-spacing:1px; margin-bottom:22px; display:flex; align-items:center; gap:6px; justify-content:center; flex-wrap:wrap; }
.bc-leg { width:11px; height:11px; border-radius:3px; display:inline-block; }
.bc-leg.q { background:var(--green); } .bc-leg.q3 { background:var(--amber); } .bc-leg.out { background:rgba(239,83,80,.5); }

/* Pop-in animation for staggered reveals */
.bc-pop { opacity:0; transform:translateY(14px) scale(.96); animation:bcPop .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes bcPop { to { opacity:1; transform:translateY(0) scale(1); } }

/* Intro */
.bc-intro { text-align:center; margin:auto; animation:bcPop .6s ease forwards; }
.bc-intro-ball { font-size:84px; animation:bcSpin 2.4s linear infinite; }
@keyframes bcSpin { to { transform:rotate(360deg); } }
.bc-intro-badge { font-family:'Barlow Condensed'; letter-spacing:7px; color:var(--gold); font-size:14px; margin-top:10px; }
.bc-intro-title { font-family:'Bebas Neue',sans-serif; font-size:60px; line-height:.95; letter-spacing:4px; color:var(--white); margin:10px 0; text-shadow:0 0 40px rgba(201,162,39,.3); }
.bc-intro-sub { color:var(--w60); font-size:15px; letter-spacing:2px; }

/* Groups grid */
.bc-groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; width:100%; max-width:1100px; }
.bc-group { background:var(--w04); border:1px solid var(--w08); border-radius:var(--r); overflow:hidden; }
.bc-group-hd { font-family:'Bebas Neue'; letter-spacing:2px; font-size:14px; color:var(--gold); padding:8px 12px; background:var(--gold-line); border-bottom:1px solid var(--w08); }
.bc-grow { display:flex; align-items:center; gap:8px; padding:7px 12px; font-size:13px; border-bottom:1px solid var(--w04); }
.bc-grow:last-child { border-bottom:none; }
.bc-grow-pos { width:16px; color:var(--w40); font-size:11px; text-align:center; }
.bc-grow-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-grow-pts { font-weight:700; color:var(--gold-hi); }
.bc-grow.q { background:rgba(0,230,118,.07); }
.bc-grow.q .bc-grow-pos { color:var(--green); font-weight:700; }
.bc-grow.q3 { background:rgba(255,171,0,.06); }
.bc-grow.out { opacity:.5; }

/* Knockout grid */
.bc-ko-grid { display:grid; gap:12px; width:100%; max-width:1000px; }
.bc-ko-grid.r32 { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.bc-ko-grid.r16 { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.bc-ko-grid.qf  { grid-template-columns:repeat(2,1fr); max-width:680px; }
.bc-ko-grid.sf  { grid-template-columns:repeat(2,1fr); max-width:760px; }
.bc-match { background:var(--w04); border:1px solid var(--w08); border-radius:var(--r); padding:10px 14px; }
.bc-match.big { padding:18px 22px; }
.bc-mteam { display:flex; align-items:center; gap:9px; padding:5px 0; font-size:14px; }
.bc-match.big .bc-mteam { font-size:18px; padding:8px 0; }
.bc-mname { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-mscore { font-family:'Bebas Neue'; font-size:20px; color:var(--w60); min-width:18px; text-align:right; }
.bc-mteam.won { color:var(--gold-hi); font-weight:600; }
.bc-mteam.won .bc-mscore { color:var(--gold-hi); }
.bc-mteam.lost { opacity:.5; }

/* The Final */
.bc-final { display:flex; align-items:center; justify-content:center; gap:24px; width:100%; max-width:820px; margin-top:14px; flex-wrap:nowrap; }
.bc-fteam { flex:1; text-align:center; transition:all .3s; }
.bc-fflag { display:flex; justify-content:center; filter:drop-shadow(0 8px 24px rgba(0,0,0,.5)); }
.bc-fname { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:2px; margin-top:12px; }
.bc-fcenter { text-align:center; min-width:140px; }
.bc-fscore { font-family:'Bebas Neue',sans-serif; font-size:58px; color:var(--white); line-height:1; }
.bc-fscore.pulse { animation:bcScorePulse .5s ease; }
.bc-fscore.ft { color:var(--green); }
@keyframes bcScorePulse { 0%{transform:scale(1)} 40%{transform:scale(1.35);color:var(--gold-hi)} 100%{transform:scale(1)} }
.bc-fmin { font-size:13px; letter-spacing:2px; color:var(--gold); margin-top:8px; }
.bc-fevents { width:100%; max-width:520px; margin:26px auto 0; display:flex; flex-direction:column; gap:7px; }
.bc-fev { background:var(--w04); border-left:2px solid var(--w15); border-radius:var(--r-sm); padding:9px 14px; font-size:13px; animation:bcSlide .4s ease; }
.bc-fev.goal { border-left-color:var(--gold); }
.bc-fev.ft { border-left-color:var(--green); color:var(--green); font-weight:600; text-align:center; }
.bc-fev-team { color:var(--w40); }
@keyframes bcSlide { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:translateX(0)} }

/* Champion */
.bc-champion { text-align:center; margin:auto; animation:bcPop .6s ease forwards; }
.bc-trophy { font-size:80px; animation:bcTrophy 2.2s ease-in-out infinite; }
@keyframes bcTrophy { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.bc-champ-badge { font-family:'Barlow Condensed'; letter-spacing:5px; color:var(--gold); font-size:13px; margin-top:6px; }
.bc-champ-flag { display:flex; justify-content:center; margin:16px 0 6px; filter:drop-shadow(0 10px 30px rgba(201,162,39,.4)); }
.bc-champ-name { font-family:'Bebas Neue',sans-serif; font-size:56px; letter-spacing:4px; color:var(--gold-hi); text-shadow:0 0 40px var(--gold-glow); }
.bc-champ-chips { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:22px 0; }
.bc-chip { background:var(--w04); border:1px solid var(--w08); border-radius:var(--r); padding:10px 16px; }
.bc-chip span { display:block; font-size:10px; letter-spacing:1.5px; color:var(--w40); text-transform:uppercase; margin-bottom:4px; }
.bc-chip b { font-size:14px; color:var(--white); display:flex; align-items:center; gap:6px; justify-content:center; }
.bc-champ-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* Full results summary */
.bc-sum-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:18px; }
.bc-sum-tab { background:var(--w04); border:1px solid var(--w08); color:var(--w60); font-family:'Barlow Condensed'; font-size:13px; letter-spacing:1px; padding:8px 18px; border-radius:var(--r-sm); cursor:pointer; }
.bc-sum-tab.active { background:var(--gold-glow); border-color:var(--gold-dim); color:var(--gold); }
.bc-sum-pane { width:100%; max-width:920px; }
.bc-sum-groups { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.bc-sum-group { background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm); padding:8px 12px; }
.bc-sum-glabel { font-family:'Bebas Neue'; font-size:13px; letter-spacing:1px; color:var(--gold); display:block; margin-bottom:4px; }
.bc-sum-team { display:flex; align-items:center; gap:6px; font-size:13px; padding:2px 0; }
.bc-sum-team.q1 { color:var(--gold-hi); }
.bc-sum-round { margin-bottom:16px; }
.bc-sum-rlabel { font-family:'Bebas Neue'; letter-spacing:2px; color:var(--gold); font-size:15px; margin-bottom:8px; }
.bc-sum-matchwrap { margin-bottom:5px; }
.bc-sum-match { display:flex; align-items:center; gap:10px; background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm); padding:7px 12px; font-size:13px; cursor:pointer; transition:border-color var(--t); }
.bc-sum-match:hover { border-color:var(--gold-dim); }
.bc-sum-mt { flex:1; display:flex; align-items:center; gap:6px; }
.bc-sum-mt.r { flex-direction:row-reverse; }
.bc-sum-mt.won { color:var(--gold-hi); font-weight:600; }
.bc-sum-ms { font-family:'Bebas Neue'; font-size:16px; color:var(--gold); }
.bc-sum-exp { color:var(--w40); font-size:11px; flex-shrink:0; }

/* Match-detail panel (scorers + stats) in Full Results */
.bc-sum-detail { background:rgba(0,0,0,.25); border:1px solid var(--w08); border-top:none; border-radius:0 0 var(--r-sm) var(--r-sm); padding:12px 14px; margin:-4px 0 6px; }
.bc-sum-detail-hd { font-size:10px; letter-spacing:1.5px; color:var(--gold); text-transform:uppercase; margin:4px 0 8px; }
.bc-sc-list { display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:6px; }
.bc-sc { display:flex; align-items:center; gap:6px; font-size:13px; }
.bc-sc-min { color:var(--gold-hi); font-family:'Bebas Neue',sans-serif; font-size:14px; min-width:24px; }
.bc-sc-none { font-size:12px; color:var(--w40); }
.bc-stats { display:flex; flex-direction:column; gap:5px; }
.bc-stat { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font-size:13px; }
.bc-stat .bc-stat-a { text-align:right; color:var(--w80); }
.bc-stat .bc-stat-b { text-align:left; color:var(--w80); }
.bc-stat label { color:var(--w40); font-size:11px; text-align:center; padding:0 12px; }
.bc-mscorers { font-size:11px; color:var(--w40); margin-top:6px; text-align:center; white-space:normal; }

@media(max-width:600px) {
  .bc-section-title { font-size:26px; letter-spacing:3px; }
  .bc-intro-title { font-size:42px; }
  .bc-champ-name { font-size:40px; }
  .bc-fscore { font-size:44px; }
  .bc-fname { font-size:19px; }
  .bc-final { gap:10px; }
  .bc-fcenter { min-width:96px; }
  .bc-phase { font-size:16px; }
  .bc-ko-grid.qf, .bc-ko-grid.sf { grid-template-columns:1fr; }
}

/* ── ADAPTIVE SIMULATION: injuries, actual-result badges, status ── */
.pc-out { opacity:.55; }
.pc-out .pc-rating { filter:grayscale(1); }
.pc-out-badge {
  position:absolute; top:8px; left:8px; z-index:3;
  background:var(--red); color:#fff; font-size:9px; font-weight:700; letter-spacing:1px;
  padding:3px 7px; border-radius:8px;
}
.player-card { position:relative; }
.pc-avail {
  width:100%; margin-top:10px; background:var(--w04); border:1px solid var(--w08);
  color:var(--w60); font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.5px;
  padding:7px 8px; border-radius:var(--r-sm); cursor:pointer; transition:all var(--t);
}
.pc-avail:hover { border-color:var(--red); color:var(--red); }
.pc-avail.out { background:var(--green-dim); border-color:var(--green-b); color:var(--green); }
.pc-avail.out:hover { border-color:var(--green); }

.bc-match.actual { border-color:var(--green-b); box-shadow:0 0 0 1px rgba(0,230,118,.15) inset; }
.bc-actual {
  display:inline-block; font-size:8.5px; font-weight:700; letter-spacing:1.5px;
  color:var(--green); background:var(--green-dim); border:1px solid var(--green-b);
  padding:2px 6px; border-radius:6px; margin-bottom:6px;
}

.sim-adapt {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:var(--gold-glow); border:1px solid var(--gold-dim); border-radius:var(--r);
  padding:11px 16px; margin:4px 0 22px; font-size:13px; color:var(--w80); line-height:1.5;
}
.sim-adapt.muted { background:var(--w04); border-color:var(--w08); color:var(--w60); }
.sim-adapt b { color:var(--gold-hi); }
.sim-adapt.muted b { color:var(--w80); }
.sim-adapt-dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); flex-shrink:0; animation:simPulse 1.6s ease-in-out infinite; }
.sim-adapt-dot.off { background:var(--w40); box-shadow:none; animation:none; }
@keyframes simPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── HUB LIVE STRIP (official feed) ──────────────────────────── */
.hub-live-wrap { margin:0 0 20px; }
.hub-live-head {
  display:flex; align-items:center; gap:8px; font-family:'Bebas Neue',sans-serif;
  letter-spacing:2px; font-size:14px; color:var(--gold); margin-bottom:10px;
}
.hub-live-head .live-src { margin-left:auto; font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px; font-size:10px; color:var(--w40); text-transform:none; }
.hub-live-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.live-card {
  background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm);
  padding:10px 12px; transition:border-color var(--t);
}
.live-card.on { border-color:var(--green-b); box-shadow:0 0 0 1px rgba(0,230,118,.15) inset; }
.live-card.ft { opacity:.85; }
.live-status {
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  letter-spacing:1px; color:var(--w60); margin-bottom:7px;
}
.live-card.on .live-status { color:var(--green); }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:simPulse 1.2s ease-in-out infinite; }
.live-teams { display:flex; align-items:center; gap:8px; font-size:13px; }
.live-team { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.live-team span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-team.r { flex-direction:row-reverse; text-align:right; }
.live-score { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--gold-hi); flex-shrink:0; }

/* ── HUB: stories grid + quick actions grid ─────────────────── */
.hub-stories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:8px; }
/* Single premium primary CTA on the hub (replaces the old quick-action grid) */
.hub-cta {
  display:flex; align-items:center; gap:18px; width:100%; box-sizing:border-box;
  padding:20px 24px; border-radius:var(--r); cursor:pointer; text-decoration:none;
  background:linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 58%, #ffe9a8 100%);
  color:var(--navy-deep); border:1px solid var(--gold-hi);
  box-shadow:0 8px 30px rgba(201,162,39,.22);
  transition:transform var(--t), box-shadow var(--t);
}
.hub-cta:hover { transform:translateY(-2px); box-shadow:0 14px 46px rgba(201,162,39,.4); }
.hub-cta:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.hub-cta-icon { font-size:30px; line-height:1; flex-shrink:0; }
.hub-cta-body { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.hub-cta-title { font-family:'Bebas Neue',sans-serif; font-size:25px; letter-spacing:1.5px; line-height:1; }
.hub-cta-sub { font-size:12.5px; font-weight:500; color:rgba(6,14,31,.82); line-height:1.4; }
.hub-cta-arrow { font-family:'Bebas Neue',sans-serif; font-size:30px; flex-shrink:0; transition:transform var(--t); }
.hub-cta:hover .hub-cta-arrow { transform:translateX(5px); }
@media(max-width:560px){
  .hub-cta { padding:16px 18px; gap:13px; }
  .hub-cta-icon { font-size:24px; }
  .hub-cta-title { font-size:21px; }
  .hub-cta-sub { font-size:11.5px; }
}

/* ── FAVOURITES TRACKER (hub) ───────────────────────────────── */
.fav-empty { text-align:center; padding:24px 10px; }
.fav-row {
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:var(--r-sm);
  background:var(--w04); border:1px solid var(--w08); margin-bottom:8px; cursor:pointer; transition:all var(--t);
}
.fav-row:hover { border-color:var(--gold-dim); transform:translateX(2px); }
.fav-row.main { background:var(--gold-glow); border-color:var(--gold-dim); }
.fav-row-info { flex:1; min-width:0; }
.fav-row-top { display:flex; align-items:center; gap:7px; }
.fav-star { color:var(--gold-hi); }
.fav-row-name { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fav-row-line { font-size:12px; color:var(--w60); margin-top:3px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.fav-st { margin-left:auto; font-size:10px; letter-spacing:.5px; color:var(--w40); padding:2px 7px; border:1px solid var(--w08); border-radius:8px; white-space:nowrap; }
.fav-st.q { color:var(--green); border-color:var(--green-b); }
.fav-st.out { color:var(--red); border-color:rgba(239,83,80,.4); }
.fav-tag { font-size:9px; font-weight:700; letter-spacing:1px; padding:1px 6px; border-radius:5px; }
.fav-tag.next { background:var(--gold-line); color:var(--gold); }
.fav-tag.W { background:var(--green-dim); color:var(--green); }
.fav-tag.L { background:var(--red-dim); color:var(--red); }
.fav-tag.D { background:var(--w08); color:var(--w60); }
.fav-subhead { font-size:10px; letter-spacing:2px; color:var(--w40); text-transform:uppercase; margin:14px 0 8px; }
.fav-prow { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm); background:var(--w04); border:1px solid var(--w08); margin-bottom:6px; cursor:pointer; font-size:13px; }
.fav-prow:hover { border-color:var(--gold-dim); }
.fav-prow-name { font-weight:600; }
.fav-prow-team { color:var(--w40); font-size:11px; }
.fav-prow-goals { color:var(--gold-hi); font-weight:700; font-size:12px; }
.fav-remove { margin-left:auto; background:none; border:none; color:var(--w40); font-size:18px; cursor:pointer; line-height:1; }
.fav-remove:hover { color:var(--red); }
.fav-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.fav-actions .btn { flex:1; font-size:12px; padding:8px; }

/* ── PLAYER CARD FAVOURITE STAR ─────────────────────────────── */
.pc-fav {
  position:absolute; top:8px; right:8px; z-index:4; width:26px; height:26px;
  background:rgba(2,8,16,.55); border:1px solid var(--w15); border-radius:50%;
  color:var(--w60); font-size:14px; cursor:pointer; transition:all var(--t); line-height:1;
}
.pc-fav:hover { border-color:var(--gold); color:var(--gold-hi); transform:scale(1.12); }
.pc-fav.on { color:var(--gold-hi); border-color:var(--gold); background:var(--gold-glow); }

/* ── HEADER FAVOURITE-TEAM FLAG (glowing, click to change) ──── */
.fav-badge {
  position:relative; width:30px; height:21px; border-radius:3px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:transform var(--t);
}
.fav-badge:hover { transform:scale(1.08); }
.fav-badge img { width:30px; height:21px; object-fit:cover; border-radius:3px; display:block; }
.fav-badge.set { box-shadow:0 0 0 2px var(--gold), 0 0 12px var(--gold-glow); }
.fav-badge .fav-badge-ring { position:absolute; inset:-3px; border-radius:5px; border:1px solid var(--gold-dim); animation:simPulse 2s ease-in-out infinite; pointer-events:none; }
.fav-badge-add {
  display:flex; align-items:center; justify-content:center; width:30px; height:21px;
  border:1px dashed var(--gold-dim); border-radius:3px; color:var(--gold); font-size:16px; line-height:1;
}

/* ── ROAD TO FINAL: meeting predictor verdict ───────────────── */
.rtf-meet-empty { font-size:12px; color:var(--w40); margin-top:10px; line-height:1.5; }
.rtf-meet-verdict { margin-top:12px; padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--w08); }
.rtf-meet-verdict.final { background:var(--gold-glow); border-color:var(--gold-dim); }
.rtf-meet-verdict.pre { background:rgba(255,171,0,.08); border-color:var(--amber-dim); }
.rtf-meet-verdict.no { background:var(--red-dim); border-color:rgba(239,83,80,.35); }
.rtf-meet-r { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; color:var(--gold-hi); margin-bottom:5px; }
.rtf-meet-verdict.pre .rtf-meet-r { color:var(--amber); }
.rtf-meet-verdict.no .rtf-meet-r { color:var(--red); }
.rtf-meet-sub { font-size:12.5px; color:var(--w80); line-height:1.55; }
.rtf-meet-sub b { color:var(--white); }

/* ── HUB NEWS (real headlines, links out) ───────────────────── */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.news-card {
  display:flex; gap:12px; text-decoration:none; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--w04); border:1px solid var(--w08); transition:all var(--t);
}
.news-card:hover { border-color:var(--gold-dim); background:var(--w08); transform:translateY(-2px); }
.news-thumb { width:88px; height:66px; flex-shrink:0; border-radius:6px; overflow:hidden; background:var(--w08); }
.news-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.news-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.news-title { font-size:14px; color:var(--white); line-height:1.4; font-weight:500; }
.news-meta { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px; font-size:11px; }
.news-src { color:var(--gold); font-weight:700; letter-spacing:.5px; }
.news-time { color:var(--w40); }
.news-arrow { margin-left:auto; color:var(--w40); }
.news-card:hover .news-arrow { color:var(--gold); }

/* ── PREDICTIONS: winner/draw picks + exact-score bonus + lock ── */
.pred-card { background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm); padding:12px 14px; }
.pred-card.locked { opacity:.92; }
.pred-card.pred-exact { border-color:var(--gold-dim); }
.pred-card.pred-correct { border-color:var(--green-b); }
.pred-card.pred-wrong { border-color:rgba(239,83,80,.3); }
.pred-card-meta { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:11px; }
.pred-grp { color:var(--w40); letter-spacing:.5px; }
.pred-time { color:var(--w40); }
.pred-lock { color:var(--amber); font-weight:700; }
.pred-ft { color:var(--green); font-weight:700; }
.pred-pts { margin-left:auto; font-family:'Bebas Neue',sans-serif; font-size:16px; padding:1px 8px; border-radius:6px; }
.pred-pts.exact { background:var(--gold-glow); color:var(--gold-hi); }
.pred-pts.correct { background:var(--green-dim); color:var(--green); }
.pred-pts.wrong { background:var(--red-dim); color:var(--red); }

.pred-pickrow { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; }
.pred-pick {
  display:flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:8px 10px;
  background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm); cursor:pointer;
  color:var(--w80); font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:500; transition:all var(--t);
}
.pred-pick:hover:not([disabled]) { border-color:var(--gold-dim); color:var(--white); }
.pred-pick.on { background:var(--gold-glow); border-color:var(--gold); color:var(--gold-hi); box-shadow:0 0 0 1px var(--gold) inset; }
.pred-pick[disabled] { cursor:not-allowed; }
.pred-pick.on[disabled] { opacity:1; }
.pp-side { display:flex; align-items:center; gap:7px; min-width:0; }
.pp-side.r { flex-direction:row-reverse; }
.pp-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-draw { font-family:'Bebas Neue',sans-serif; letter-spacing:2px; font-size:14px; padding:0 4px; }

.pred-exact-row { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--w04); }
.pred-exact-row.dim { opacity:.5; }
.pred-exact-lbl { font-size:11px; color:var(--w40); margin-right:auto; }
.pred-bonus { color:var(--gold); font-weight:700; margin-left:4px; }
.pred-dash { color:var(--w40); font-weight:bold; }
.pred-input { width:46px; height:38px; text-align:center; background:var(--w04); border:1px solid var(--w15); border-radius:var(--r-sm); color:var(--white); font-size:18px; font-family:'Bebas Neue',sans-serif; }
.pred-input:focus { outline:none; border-color:var(--gold); }
@media(max-width:560px){
  .pred-pickrow { grid-template-columns:1fr; }
  .pp-side.r { flex-direction:row; }
}

/* ── METHODOLOGY EXPLAINER (modal) ──────────────────────────── */
.method-block { margin-bottom:18px; }
.method-block h3 { font-size:16px; color:var(--gold-hi); margin-bottom:6px; font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px; font-weight:600; }
.method-block p { color:var(--w80); font-size:13.5px; line-height:1.6; margin-bottom:6px; }
.method-block ul { margin:6px 0 8px 18px; }
.method-block li { color:var(--w80); font-size:13px; line-height:1.55; margin-bottom:5px; }
.method-formula { background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm); padding:9px 10px; font-family:'Courier New',monospace; font-size:12.5px; color:var(--gold-hi); text-align:center; }
.method-link { background:none; border:1px solid var(--w15); color:var(--w60); font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.5px; padding:5px 11px; border-radius:var(--r-sm); cursor:pointer; transition:all var(--t); }
.method-link:hover { border-color:var(--gold); color:var(--gold); }

/* ── RESULTS (read-only list) ───────────────────────────────── */
.results-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:8px; }
.result-row { background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm); padding:10px 14px; }
.result-row.played { border-color:var(--gold-line); }
.rr-badge { font-size:10px; letter-spacing:1px; color:var(--w40); text-transform:uppercase; margin-bottom:7px; }
.rr-body { display:flex; align-items:center; gap:10px; }
.rr-team { flex:1; display:flex; align-items:center; gap:7px; min-width:0; font-size:14px; }
.rr-team span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rr-team.r { flex-direction:row-reverse; text-align:right; }
.rr-score { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--gold-hi); flex-shrink:0; min-width:54px; text-align:center; }
.rr-score.pending { font-family:'Barlow Condensed',sans-serif; font-size:12px; color:var(--w40); font-weight:500; }

/* ── PLAYER BROWSER ─────────────────────────────────────────── */
.ps-controls { padding:14px; margin-bottom:16px; }
.ps-search { width:100%; height:42px; background:var(--w04); border:1px solid var(--w15); border-radius:var(--r-sm); color:var(--white); font-size:15px; padding:0 14px; font-family:'Barlow Condensed',sans-serif; }
.ps-search:focus { outline:none; border-color:var(--gold); }
.ps-row { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; align-items:center; }
.ps-select { height:38px; background:var(--navy-card); border:1px solid var(--w15); border-radius:var(--r-sm); color:var(--white); font-family:'Barlow Condensed',sans-serif; font-size:14px; padding:0 10px; }
.ps-chips { display:flex; gap:6px; flex-wrap:wrap; }
.ps-chip { background:var(--w04); border:1px solid var(--w08); color:var(--w60); font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.5px; padding:7px 12px; border-radius:var(--r-sm); cursor:pointer; transition:all var(--t); }
.ps-chip:hover { border-color:var(--gold-dim); color:var(--white); }
.ps-chip.active { background:var(--gold-glow); border-color:var(--gold); color:var(--gold-hi); }
.ps-count { font-size:12px; color:var(--w40); margin-bottom:10px; letter-spacing:.5px; }
.ps-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:6px; }
.ps-prow { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--w04); border:1px solid var(--w08); border-radius:var(--r-sm); cursor:pointer; transition:all var(--t); }
.ps-prow:hover { border-color:var(--gold-dim); transform:translateX(2px); }
.ps-pos { font-size:10px; font-weight:700; letter-spacing:.5px; width:36px; text-align:center; padding:3px 0; border-radius:4px; flex-shrink:0; }
.ps-pos.GK { background:rgba(196,115,0,.25); color:#ffb74d; }
.ps-pos.DEF { background:rgba(26,74,138,.4); color:#7eb6ff; }
.ps-pos.MID { background:rgba(13,107,58,.35); color:#6ee7a0; }
.ps-pos.FWD { background:rgba(138,26,26,.35); color:#ff8a8a; }
.ps-name { font-weight:600; font-size:14px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ps-team { font-size:12px; color:var(--w60); white-space:nowrap; }
.ps-age { font-size:12px; color:var(--w40); flex-shrink:0; min-width:46px; text-align:right; }

/* ── LEADERBOARD ────────────────────────────────────────────── */
.lb-soon { padding:30px 24px; text-align:center; }
.lb-soon-icon { font-size:36px; margin-bottom:8px; }
.lb-soon-title { font-family:'Bebas Neue',sans-serif; font-size:25px; letter-spacing:2px; color:var(--gold); }
.lb-soon-text { font-size:13px; color:var(--w60); margin:10px auto 18px; max-width:460px; line-height:1.6; }
.lb-you { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; margin-bottom:18px; }
.lb-you-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--w40); }
.lb-you-score { font-family:'Bebas Neue',sans-serif; font-size:46px; line-height:1; color:var(--gold-hi); }
.lb-you-score span { font-size:18px; color:var(--w40); }
.lb-you-meta { font-size:12px; color:var(--w60); margin-top:4px; }
.lb-join { display:flex; gap:8px; align-items:center; flex:1; min-width:240px; justify-content:flex-end; }
.lb-name-input { background:var(--w08); border:1px solid var(--w15); border-radius:var(--r-sm); color:var(--white); padding:11px 13px; font-size:14px; font-family:inherit; max-width:200px; flex:1; }
.lb-name-input:focus { outline:none; border-color:var(--gold-dim); }
.lb-board { padding:6px 0; }
.lb-head, .lb-row { display:grid; grid-template-columns:44px 1fr 64px 56px; align-items:center; gap:8px; padding:0 18px; }
.lb-head { height:34px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--w40); border-bottom:1px solid var(--w08); }
.lb-head span:nth-child(3), .lb-head span:nth-child(4), .lb-row .lb-picks, .lb-row .lb-pts { text-align:right; }
.lb-row { height:48px; border-bottom:1px solid var(--w04); font-size:14px; }
.lb-row:last-child { border-bottom:none; }
.lb-row.me { background:var(--gold-glow); }
.lb-rank { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--w40); text-align:center; }
.lb-rank.top { color:var(--navy-deep); background:var(--w40); border-radius:50%; width:26px; height:26px; line-height:26px; margin:0 auto; }
.lb-rank.r1 { background:linear-gradient(135deg,#ffd34d,#c9a227); }
.lb-rank.r2 { background:linear-gradient(135deg,#e6e6e6,#a8a8a8); }
.lb-rank.r3 { background:linear-gradient(135deg,#e0a060,#a3672e); color:#fff; }
.lb-who { display:flex; align-items:center; gap:9px; min-width:0; }
.lb-who img { width:18px; height:12px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.lb-noflag { width:18px; height:12px; border-radius:2px; background:var(--w08); flex-shrink:0; display:inline-block; }
.lb-who .lb-name { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-youtag { font-size:8px; font-weight:700; letter-spacing:1px; background:var(--gold); color:var(--navy-deep); padding:2px 5px; border-radius:8px; flex-shrink:0; }
.lb-picks { color:var(--w40); font-size:12px; }
.lb-pts { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--gold); }
.lb-loading { padding:24px 18px; text-align:center; color:var(--w40); font-size:13px; }
@media(max-width:560px){ .lb-join { justify-content:flex-start; } }

/* ── PLAYER PROFILE MODAL ───────────────────────────────────── */
.player-card { cursor:pointer; }
.pm-card { text-align:center; }
.pm-head { position:relative; height:120px; border-radius:var(--r) var(--r) 0 0; margin:-4px -4px 0; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; background:var(--w08); }
.pm-head.GK  { background:linear-gradient(160deg,#3a2600,#1a1000); }
.pm-head.DEF { background:linear-gradient(160deg,#0a1f44,#0a1020); }
.pm-head.MID { background:linear-gradient(160deg,#0a3a20,#0a1812); }
.pm-head.FWD { background:linear-gradient(160deg,#3a0a0a,#1a0808); }
.pm-head .silhouette-svg { height:108px; opacity:.9; }
.pm-photo-slot { display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; }
.pm-photo-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; animation:pmPhotoFade .35s ease; }
@keyframes pmPhotoFade { from{opacity:0} to{opacity:1} }
.pm-pos { position:absolute; top:10px; left:12px; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:var(--gold-hi); }
.pm-flag { position:absolute; top:10px; right:12px; width:30px; height:20px; object-fit:cover; border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.pm-name { font-family:'Bebas Neue',sans-serif; font-size:30px; letter-spacing:1px; color:var(--white); margin-top:14px; }
.pm-meta { font-size:13px; color:var(--w60); display:flex; align-items:center; gap:6px; justify-content:center; margin-top:4px; }
.pm-note { font-size:12.5px; color:var(--w60); line-height:1.55; margin:16px 0; }
.pm-actions { display:flex; flex-direction:column; gap:9px; }
.pm-actions .btn { width:100%; text-decoration:none; }

/* ── ACCESSIBILITY: respect reduced-motion ──────────────────── */
/* Users who ask for less motion get the layout without the decorative
   shine/glow/pulse/shimmer loops and snap (not smooth) scrolling. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}