/* ── CSS VARIABLES (dark mode default) ── */
:root {
  --razi:    #1a6fd4;
  --zhur:    #22c55e;
  --battuta: #f59e0b;
  --sina:    #ef4444;
  --dark:    #0a0e1a;
  --card:    #111827;
  --card2:   #1a2236;
  --border:  rgba(255,255,255,0.08);
  --text:    #e2e8f0;
  --muted:   #64748b;
  --input-bg:#1a2236;
  --modal-bg:#0f172a;
  --header-bg:rgba(10,14,26,0.96);
  --qualify-dot:#22c55e;
}

/* ── LIGHT THEME ── */
body.light {
  --dark:    #f1f5f9;
  --card:    #ffffff;
  --card2:   #f8fafc;
  --border:  rgba(0,0,0,0.1);
  --text:    #0f172a;
  --muted:   #64748b;
  --input-bg:#f1f5f9;
  --modal-bg:#ffffff;
  --header-bg:rgba(241,245,249,0.96);
}
body.light .bg-pattern { opacity:0.3; }
body.light .score-input { color:#0f172a; }
body.light .auth-card { background:#fff; }
body.light .btn-google { box-shadow:0 2px 8px rgba(0,0,0,0.12); }
body.light nav button.active { color:#0f172a; background:rgba(0,0,0,0.08); }
body.light nav button { color:var(--muted); }
body.light nav button:hover { color:var(--text); background:rgba(0,0,0,0.05); }
body.light .filter-btn.active { background:#0f172a; color:#fff; border-color:#0f172a; }
body.light .standings-table td { color:#334155; }
body.light .standings-table tr.qualify td { color:#0f172a; }
body.light .group-card { background:#f8fafc; border-color:rgba(0,0,0,0.08); }
body.light .modal-box { background:#fff; border-color:rgba(0,0,0,0.1); }
body.light .ps-card { background:#f1f5f9; }
body.light .profile-group { background:#f1f5f9; }
body.light .profile-pred-row { background:#f1f5f9; }
body.light .pred-pct-track { background:#e2e8f0; }
body.light .gm-score { background:rgba(0,0,0,0.05); color:#0f172a; }
body.light .score-input { background:#f1f5f9; border-color:rgba(0,0,0,0.12); }
body.light .save-btn { background:rgba(34,197,94,0.08); }
body.light .house-bar-track { background:#e2e8f0; }
body.light .lb-row { background:#fff; }
body.light .lb-row.me { background:#f8fafc; }
body.light .user-pill { background:#f1f5f9; }

/* ── COLORBLIND MODE ── */
body.colorblind {
  --zhur:    #0077bb;   /* blue replaces green */
  --battuta: #ee7733;   /* orange (ok for most) */
  --sina:    #cc3311;   /* red stays but deeper */
  --qualify-dot:#0077bb;
}
body.colorblind .pred-seg.home { background:#0077bb; }
body.colorblind .pred-seg.draw { background:#bbbbbb; }
body.colorblind .pred-seg.away { background:#ee7733; }
body.colorblind .pred-pct-labels span:nth-child(1) { color:#0077bb; }
body.colorblind .pred-pct-labels span:nth-child(3) { color:#ee7733; }
body.colorblind .result-bar.exact   { background:rgba(238,119,51,0.15); color:#ee7733; border-color:rgba(238,119,51,0.3); }
body.colorblind .result-bar.correct { background:rgba(0,119,187,0.12);  color:#0077bb; border-color:rgba(0,119,187,0.3); }
body.colorblind .save-btn  { color:#0077bb; border-color:rgba(0,119,187,0.3); }
body.colorblind .qualify-dot { background:#0077bb; }
body.colorblind .badge-green { background:rgba(0,119,187,0.15); color:#0077bb; }
body.colorblind .stat-num.green { color:#0077bb; }
body.colorblind .ps-num.green { color:#0077bb; }

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Outfit',sans-serif; background:var(--dark); color:var(--text); min-height:100vh; overflow-x:hidden; transition:background .2s,color .2s; }

.bg-pattern {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(26,111,212,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(239,68,68,0.08) 0%, transparent 60%),
    repeating-linear-gradient(0deg,  transparent, transparent 40px, rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 41px);
}

/* ── ACCESSIBILITY BUTTONS UNDER LOGO ── */
.logo-acc-btns { display:flex; gap:5px; margin-top:5px; }
.acc-btn {
  border:1px solid var(--border); background:var(--card2); color:var(--text);
  border-radius:6px; padding:3px 8px; font-size:10px; font-weight:600;
  cursor:pointer; font-family:'Outfit',sans-serif; transition:all .2s;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
}
.acc-btn:hover { background:var(--card); border-color:rgba(255,255,255,0.2); }
.acc-btn.on { border-color:#f59e0b; color:#f59e0b; background:rgba(245,158,11,0.08); }

/* ── HEADER ── */
header { position:relative; z-index:10; background:var(--header-bg); border-bottom:1px solid var(--border); backdrop-filter:blur(20px); padding:0 20px; }
.header-inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px; }
.logo { display:flex; align-items:center; gap:10px; }
.header-logo-img { height:44px; width:auto; object-fit:contain; filter:brightness(1.1); }
.logo-text { font-size:13px; font-weight:600; white-space:nowrap; }
.logo-sub  { font-size:11px; color:var(--muted); }

/* ── LIVE TICKER ── */
.live-ticker { display:flex; align-items:center; gap:8px; background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2); border-radius:100px; padding:6px 14px; font-size:12px; font-weight:500; max-width:380px; overflow:hidden; white-space:nowrap; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#ef4444; flex-shrink:0; }
.live-dot.pulsing { animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.3)} }

nav { display:flex; gap:4px; }
nav button { background:none; border:none; padding:8px 14px; border-radius:8px; font-family:'Outfit',sans-serif; font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; transition:all 0.2s; white-space:nowrap; }
nav button:hover { color:var(--text); background:rgba(255,255,255,0.05); }
nav button.active { color:white; background:rgba(255,255,255,0.1); }

.user-pill { display:flex; align-items:center; gap:8px; background:var(--card2); border:1px solid var(--border); border-radius:100px; padding:6px 12px 6px 6px; cursor:pointer; font-size:13px; flex-shrink:0; }
.user-photo  { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.user-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:white; }
.logout-icon { color:var(--muted); font-size:12px; }

/* ── PAGES ── */
.page { display:none; }
.page.active { display:block; position:relative; z-index:1; }

/* ── AUTH ── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; z-index:100; pointer-events:auto; }
.auth-card { background:rgba(10,14,26,0.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:40px; width:100%; max-width:440px; box-shadow:0 25px 60px rgba(0,0,0,0.6); position:relative; z-index:101; pointer-events:auto; }
body.light .auth-card { background:rgba(255,255,255,0.82); border-color:rgba(255,255,255,0.6); }
.auth-logo { text-align:center; margin-bottom:32px; }
.gwa-logo-img { max-width:220px; width:100%; height:auto; margin-bottom:16px; filter:brightness(1.05) drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.auth-logo h1 { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:2px; background:linear-gradient(135deg,#fff,#94a3b8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.auth-logo p { color:var(--muted); font-size:13px; margin-top:4px; }
.divider-text { text-align:center; color:var(--muted); font-size:13px; margin-bottom:20px; }
.btn-google { width:100%; padding:14px; border-radius:12px; background:white; border:none; color:#1f2937; font-family:'Outfit',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-google:hover { box-shadow:0 4px 20px rgba(255,255,255,0.2); transform:translateY(-1px); }
.auth-msg  { font-size:13px; color:#f87171; text-align:center; margin-top:10px; min-height:20px; }
.auth-note { font-size:12px; color:var(--muted); text-align:center; margin-top:10px; }

/* ── HOUSE PICKER ── */
.house-prompt { color:var(--text); font-size:14px; margin-bottom:16px; text-align:center; }
.house-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.house-card { border:2px solid var(--border); border-radius:12px; padding:14px; cursor:pointer; transition:all 0.2s; text-align:center; }
.house-card:hover { transform:translateY(-2px); }
.house-card.selected { border-color:currentColor; }
.house-card.razi    { color:var(--razi); }    .house-card.razi.selected    { background:rgba(26,111,212,0.15); }
.house-card.zhur    { color:var(--zhur); }    .house-card.zhur.selected    { background:rgba(34,197,94,0.15); }
.house-card.battuta { color:var(--battuta); } .house-card.battuta.selected { background:rgba(245,158,11,0.15); }
.house-card.sina    { color:var(--sina); }    .house-card.sina.selected    { background:rgba(239,68,68,0.15); }
.house-icon { font-size:28px; margin-bottom:4px; }
.house-name { font-size:15px; font-weight:700; }
.house-sub  { font-size:11px; opacity:0.7; margin-top:2px; }
.btn-primary { width:100%; padding:14px; background:linear-gradient(135deg,#1a6fd4,#2563eb); border:none; border-radius:12px; color:white; font-family:'Outfit',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(26,111,212,0.4); }

/* ── MAIN ── */
.main-wrap { max-width:1200px; margin:0 auto; padding:32px 24px; }
.page-title { font-family:'Bebas Neue',sans-serif; font-size:42px; letter-spacing:2px; margin-bottom:4px; }
.page-sub   { color:var(--muted); font-size:14px; margin-bottom:32px; }

/* ── STATS BAR ── */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:32px; }
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
.stat-num  { font-family:'Bebas Neue',sans-serif; font-size:36px; }
.stat-num.yellow { color:#f59e0b; } .stat-num.green { color:#4ade80; } .stat-num.blue { color:#60a5fa; }
.stat-label { font-size:12px; color:var(--muted); margin-top:2px; }

/* ── FILTER BAR ── */
.filter-bar { display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap; }
.filter-btn { padding:6px 12px; border-radius:100px; border:1px solid var(--border); background:none; font-family:'Outfit',sans-serif; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; transition:all 0.2s; }
.filter-btn:hover { color:var(--text); border-color:rgba(255,255,255,0.2); }
.filter-btn.active { background:white; color:#0a0e1a; border-color:white; }

/* ── MATCH CARDS ── */
.group-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); border-left:3px solid var(--muted); padding-left:10px; margin:28px 0 12px; }
.matches-grid { display:grid; gap:12px; }
.match-card { background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:border-color 0.2s; }
.match-card:hover  { border-color:rgba(255,255,255,0.15); }
.match-card.predicted  { border-color:rgba(34,197,94,0.3); }
.match-card.live-match { border-color:rgba(239,68,68,0.4); box-shadow:0 0 20px rgba(239,68,68,0.1); }
.match-header { padding:10px 16px; background:var(--card2); display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--muted); gap:8px; flex-wrap:wrap; }
.match-uae-time { font-size:11px; color:#60a5fa; font-weight:600; }
.match-body   { padding:16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.team         { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.team-flag    { font-size:32px; }
.team-name    { font-size:13px; font-weight:600; }
.score-inputs { display:flex; align-items:center; gap:6px; }
.score-input  { width:44px; height:44px; background:var(--input-bg); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:'Bebas Neue',sans-serif; font-size:22px; text-align:center; outline:none; transition:border-color 0.2s; }
.score-input:focus    { border-color:rgba(255,255,255,0.4); }
.score-input:disabled { opacity:0.5; cursor:not-allowed; }
.score-sep { color:var(--muted); font-weight:700; font-size:20px; }
.save-btn { margin:0 16px 14px; padding:10px; width:calc(100% - 32px); background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.25); border-radius:10px; color:#4ade80; font-family:'Outfit',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.save-btn:hover { background:rgba(34,197,94,0.2); }
.save-btn.saved { color:#86efac; }
.result-bar { margin:0 16px 14px; padding:10px 14px; border-radius:10px; font-size:13px; font-weight:600; text-align:center; }
.result-bar.exact   { background:rgba(245,158,11,0.15); color:#fbbf24; border:1px solid rgba(245,158,11,0.3); }
.result-bar.correct { background:rgba(34,197,94,0.12);  color:#4ade80; border:1px solid rgba(34,197,94,0.3); }
.result-bar.wrong   { background:rgba(239,68,68,0.08);  color:#f87171; border:1px solid rgba(239,68,68,0.2); }
.locked-msg { margin:0 16px 14px; padding:10px; text-align:center; font-size:12px; color:var(--muted); }

/* ── PREDICTION % BAR ── */
.pred-pct-bar { margin:0 16px 6px; padding:0 2px; }
.pred-pct-labels { display:flex; justify-content:space-between; font-size:11px; font-weight:600; margin-bottom:5px; }
.pred-pct-track { display:flex; height:8px; border-radius:20px; overflow:hidden; background:#1e293b; gap:1px; }
.pred-seg { height:100%; transition:width .4s ease; }
.pred-seg.home { background:#4ade80; border-radius:20px 0 0 20px; }
.pred-seg.draw { background:#94a3b8; }
.pred-seg.away { background:#f87171; border-radius:0 20px 20px 0; }
.pred-pct-count { font-size:10px; color:#475569; margin-top:4px; text-align:center; }

/* ── LEADERBOARD ── */
.lb-header { display:grid; grid-template-columns:50px 1fr 80px 80px 80px 60px; padding:10px 20px; margin-bottom:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); }
.lb-row    { display:grid; grid-template-columns:50px 1fr 80px 80px 80px 60px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 20px; margin-bottom:8px; align-items:center; transition:all 0.2s; }
.lb-row:hover { border-color:rgba(255,255,255,0.15); }
.lb-row.me    { border-color:rgba(255,255,255,0.2); background:var(--card2); }
.rank { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--muted); }
.rank.top { color:#f59e0b; }
.lb-user   { display:flex; align-items:center; gap:10px; }
.lb-photo  { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.lb-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:white; }
.lb-name   { font-size:14px; font-weight:600; }
.lb-house  { font-size:11px; }
.lb-stat   { font-size:16px; font-weight:600; text-align:center; }
.lb-stat.pts { color:#f59e0b; }
.center { text-align:center; }

/* ── HOUSE CHART ── */
.chart-section { margin-bottom:8px; }
.chart-title   { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:1px; margin-bottom:20px; }
.house-bars    { display:grid; gap:14px; }
.house-bar-row { display:grid; grid-template-columns:90px 1fr 60px; align-items:center; gap:14px; }
.house-bar-label { font-size:14px; font-weight:700; }
.house-bar-track { height:28px; background:var(--card2); border-radius:100px; overflow:hidden; }
.house-bar-fill  { height:100%; border-radius:100px; transition:width 0.8s cubic-bezier(0.34,1.56,0.64,1); display:flex; align-items:center; padding-left:12px; font-size:12px; font-weight:700; color:rgba(0,0,0,0.75); }
.house-bar-pts   { font-size:14px; font-weight:700; text-align:right; }

/* ── BADGES ── */
.badge        { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:100px; font-size:11px; font-weight:600; }
.badge-green  { background:rgba(34,197,94,0.15);  color:#4ade80; }
.badge-yellow { background:rgba(245,158,11,0.15); color:#fbbf24; }
.badge-blue   { background:rgba(96,165,250,0.15); color:#60a5fa; }
.badge-red    { background:rgba(239,68,68,0.15);  color:#f87171; animation:fadepulse 1.5s infinite; }
@keyframes fadepulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ── TOAST ── */
.toast { position:fixed; bottom:24px; right:24px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 18px; font-size:14px; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:9999; transform:translateY(80px); opacity:0; transition:all 0.3s; display:flex; align-items:center; gap:10px; }
.toast.show { transform:translateY(0); opacity:1; }

/* ── GROUPS TAB ── */
.groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; margin-top:8px; }
.group-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; overflow:hidden; }
.group-card-title { font-family:'Bebas Neue',sans-serif; font-size:22px; color:#f59e0b; margin-bottom:12px; letter-spacing:1px; }
.standings-table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:14px; }
.standings-table th { color:var(--muted); font-weight:600; text-align:center; padding:4px 3px; border-bottom:1px solid var(--border); font-size:10px; text-transform:uppercase; }
.standings-table td { text-align:center; padding:6px 3px; border-bottom:1px solid var(--border); color:var(--text); }
.standings-table td.team-cell { text-align:left; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.standings-table td.pts-cell { font-weight:700; color:#f59e0b; }
.standings-table tr.qualify td { color:var(--text); font-weight:500; }
.qualify-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--qualify-dot); display:inline-block; }
.qualify-dot.out { background:transparent; border:1px solid var(--muted); }
.group-matches { margin-top:4px; display:flex; flex-direction:column; gap:4px; }
.group-match-row { display:flex; align-items:center; justify-content:space-between; font-size:11px; padding:5px 0; border-top:1px solid var(--border); }
.gm-team { color:var(--muted); flex:1; }
.gm-team.right { text-align:right; }
.gm-score { font-weight:700; color:var(--text); min-width:60px; text-align:center; background:rgba(255,255,255,.05); border-radius:6px; padding:2px 8px; }
.gm-time { font-size:10px; color:#60a5fa; font-weight:600; min-width:70px; text-align:center; }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; }
.modal-box { background:var(--modal-bg); border:1px solid var(--border); border-radius:18px; padding:28px; max-width:720px; width:100%; position:relative; margin:auto; }
.modal-close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,.08); border:none; color:var(--muted); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:rgba(255,255,255,.15); color:var(--text); }

/* ── PROFILE ── */
.profile-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.profile-photo { width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid var(--border); }
.profile-avatar { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; color:#fff; flex-shrink:0; }
.profile-name { font-size:22px; font-weight:700; color:var(--text); }
.profile-house { font-size:13px; margin-top:3px; font-weight:500; }
.profile-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; }
.ps-card { background:var(--card2); border-radius:10px; padding:12px; text-align:center; }
.ps-num { font-size:24px; font-weight:700; color:var(--text); }
.ps-num.yellow { color:#f59e0b; } .ps-num.green { color:#4ade80; } .ps-num.blue { color:#60a5fa; }
.ps-lbl { font-size:11px; color:var(--muted); margin-top:3px; }
.profile-section-title { font-size:13px; font-weight:700; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
.profile-groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:6px; }
.profile-group { background:var(--card2); border-radius:10px; padding:14px; }
.profile-group-title { font-family:'Bebas Neue',sans-serif; font-size:18px; color:#f59e0b; margin-bottom:8px; }
.standings-table.mini td,.standings-table.mini th { padding:4px 2px; font-size:11px; }
.profile-preds { display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto; padding-right:4px; }
.profile-pred-row { display:flex; align-items:center; gap:10px; background:var(--card2); border-radius:8px; padding:8px 12px; font-size:12px; }
.pp-date { font-size:10px; color:#60a5fa; font-weight:600; min-width:52px; }
.pp-match { flex:1; color:var(--muted); }
.pp-score { font-weight:700; color:var(--text); min-width:44px; text-align:center; }
.profile-tab-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.profile-tab-btn { padding:6px 14px; border-radius:20px; border:1px solid var(--border); background:none; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; font-family:'Outfit',sans-serif; transition:all .2s; }
.profile-tab-btn.active { background:var(--text); color:var(--dark); border-color:var(--text); }

/* ── MISC ── */
.empty-state   { color:var(--muted); text-align:center; padding:40px; }
.loading-state { color:var(--muted); text-align:center; padding:60px; font-size:18px; }

/* ── RESPONSIVE ── */
@media (max-width:900px) { .live-ticker { display:none; } }
@media (max-width:640px) {
  .access-bar { padding:6px 8px; gap:4px; }
  .acc-btn { font-size:10px; padding:4px 7px; }
  .stats-bar { grid-template-columns:1fr 1fr; }
  .lb-header, .lb-row { grid-template-columns:40px 1fr 70px; }
  .hide-mobile { display:none; }
  .house-bar-row { grid-template-columns:70px 1fr 50px; }
  .page-title { font-size:30px; }
  .header-inner { flex-wrap:wrap; height:auto; padding:10px 0; gap:8px; }
  .groups-grid { grid-template-columns:1fr; }
  .profile-stats { grid-template-columns:repeat(2,1fr); }
  .profile-groups-grid { grid-template-columns:1fr; }
}

/* ── GOLD 3RD PLACE IN STANDINGS ─────────────────────────────────────── */
.standings-table tr.third-gold td { color:#f59e0b; font-weight:600; }
.standings-table tr.third-gold td.pts-cell { color:#f59e0b; }
.standings-table tr.third-gold { background:rgba(245,158,11,0.06); }
.third-place-note {
  font-size:10px; color:#f59e0b; margin-top:6px; padding:5px 8px;
  background:rgba(245,158,11,0.08); border-radius:6px; border-left:2px solid #f59e0b;
}

/* ── KNOCKOUT TAB ─────────────────────────────────────────────────────── */
.ko-rounds { display:flex; flex-direction:column; gap:32px; }
.ko-round { }
.ko-round-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.ko-round-name { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:1px; color:var(--text); }
.ko-round-dates { font-size:12px; color:var(--muted); background:var(--card2); padding:4px 12px; border-radius:20px; border:1px solid var(--border); }
.ko-matches-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }

.ko-match-card { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .2s; }
.ko-match-card.ko-predicted { border-color:rgba(245,158,11,0.4); }
.ko-match-header { padding:8px 14px; background:var(--card2); font-size:11px; color:var(--muted); display:flex; justify-content:space-between; }
.ko-match-body { padding:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ko-team { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; text-align:center; }
.ko-team.ko-winner .ko-team-name { color:#f59e0b; font-weight:700; }
.ko-team.ko-winner .ko-flag { filter:drop-shadow(0 0 6px rgba(245,158,11,0.6)); }
.ko-flag { font-size:28px; }
.ko-team-name { font-size:12px; font-weight:600; }
.ko-vs { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--muted); }
.ko-pick-row { padding:0 14px 12px; display:flex; flex-direction:column; gap:7px; }
.ko-pick-btns { display:flex; gap:7px; }
.ko-pick-btn { flex:1; padding:7px 6px; background:var(--card2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:11px; font-weight:600; cursor:pointer; transition:all .2s; font-family:'Outfit',sans-serif; }
.ko-pick-btn:hover { border-color:rgba(245,158,11,0.4); color:#f59e0b; }
.ko-pick-btn.picked { background:rgba(245,158,11,0.15); border-color:#f59e0b; color:#f59e0b; }
.ko-tbd-msg { padding:0 14px 12px; font-size:11px; color:var(--muted); text-align:center; }

/* ── BEST THIRDS TABLE ───────────────────────────────────────────────── */
.ko-thirds-table { background:var(--card); border:1px solid rgba(245,158,11,0.25); border-radius:14px; padding:18px; margin-bottom:8px; }
.ko-thirds-title { font-family:'Bebas Neue',sans-serif; font-size:20px; color:#f59e0b; margin-bottom:4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ko-thirds-sub { font-size:11px; font-family:'Outfit',sans-serif; color:var(--muted); font-weight:400; letter-spacing:0; }
.thirds-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin-top:14px; }
.third-card { border-radius:10px; padding:12px; border:1px solid var(--border); transition:all .2s; }
.third-card.qualifies { background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.3); }
.third-card.eliminated { background:rgba(239,68,68,0.05); border-color:rgba(239,68,68,0.2); opacity:.7; }
.third-rank { font-size:11px; font-weight:700; margin-bottom:5px; }
.third-card.qualifies .third-rank { color:#f59e0b; }
.third-card.eliminated .third-rank { color:#f87171; }
.third-team { font-size:14px; font-weight:700; color:var(--text); margin-bottom:2px; }
.third-group { font-size:11px; color:var(--muted); margin-bottom:4px; }
.third-stats { font-size:11px; color:var(--muted); }
.third-card.qualifies .third-stats { color:#f59e0b; }

@media(max-width:600px){
  .ko-matches-grid { grid-template-columns:1fr; }
  .thirds-grid { grid-template-columns:1fr 1fr; }
}

/* ── LOGO THEME FILTER ───────────────────────────────────────────────── */
/* Dark mode: invert the dark logo if needed; light mode: use original */
body.light #headerLogo { filter:none; }
body:not(.light) #headerLogo { filter:brightness(1.1); }

/* ── BRACKET LAYOUT ──────────────────────────────────────────────────── */
.bracket-wrap { overflow-x:auto; padding-bottom:16px; }
.bracket-title { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:2px; text-align:center; color:var(--text); margin-bottom:4px; }
.bracket-subtitle { font-size:12px; color:var(--muted); text-align:center; margin-bottom:24px; }
.bracket-grid {
  display:grid;
  grid-template-columns: 1fr 0.8fr 0.65fr 0.55fr 0.9fr 0.55fr 0.65fr 0.8fr 1fr;
  gap:8px;
  min-width:1100px;
  align-items:center;
}
.bracket-col { display:flex; flex-direction:column; gap:8px; height:100%; justify-content:space-around; }
.bracket-centre { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.bk-col-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); text-align:center; margin-bottom:4px; padding:4px 6px; background:var(--card2); border-radius:6px; }
.bk-group-pair { display:flex; flex-direction:column; gap:4px; flex:1; justify-content:center; }
.bk-sf-wrap, .bk-final-wrap, .bk-bronze-wrap { width:100%; }

/* ── BRACKET MATCH CARD ───────────────────────────────────────────────── */
.bk-match {
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  overflow:hidden; transition:border-color .2s; font-size:12px;
}
.bk-match.bk-done { border-color:rgba(245,158,11,0.35); }
.bk-match.bk-final { border-color:rgba(245,158,11,0.6); box-shadow:0 0 20px rgba(245,158,11,0.15); }
.bk-match.bk-bronze { border-color:rgba(180,120,60,0.4); }
.bk-match-label { font-size:9px; text-align:center; color:var(--muted); padding:3px 6px; background:var(--card2); letter-spacing:1px; text-transform:uppercase; }
.bk-match.bk-final .bk-match-label { color:#f59e0b; background:rgba(245,158,11,0.1); }
.bk-match.bk-bronze .bk-match-label { color:#cd7f32; background:rgba(205,127,50,0.1); }

.bk-team {
  display:flex; align-items:center; gap:5px; padding:6px 8px;
  border-bottom:1px solid var(--border); cursor:default; transition:background .15s;
}
.bk-team:last-child { border-bottom:none; }
.bk-team.bk-winner { background:rgba(245,158,11,0.1); }
.bk-team.bk-winner .bk-name { color:#f59e0b; font-weight:700; }
.bk-flag { font-size:16px; flex-shrink:0; }
.bk-name { flex:1; font-size:11px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-pick {
  font-size:9px; padding:2px 6px; border-radius:4px; border:1px solid var(--border);
  background:none; color:var(--muted); cursor:pointer; font-family:'Outfit',sans-serif;
  font-weight:600; transition:all .15s; flex-shrink:0;
}
.bk-pick:hover { border-color:var(--gold,#f59e0b); color:#f59e0b; }
.bk-pick.on { background:rgba(245,158,11,0.2); border-color:#f59e0b; color:#f59e0b; }

.r32-col .bk-match { font-size:11px; }
.r32-col .bk-team { padding:5px 6px; }
.r32-col .bk-flag { font-size:14px; }

/* Mobile scroll hint */
.bracket-scroll-hint { font-size:11px; color:var(--muted); text-align:center; margin-bottom:8px; }
@media(max-width:900px){ .bracket-scroll-hint { display:block; } }

/* ── BRACKET SCORE INPUTS ──────────────────────────────────────────────── */
.bk-score-row {
  display:flex; align-items:center; gap:4px; padding:6px 8px;
  background:var(--card2); border-top:1px solid var(--border);
}
.bk-score-team { font-size:14px; }
.bk-score-team.right { margin-left:auto; }
.bk-score-input {
  width:34px; height:30px; background:var(--dark); border:1px solid var(--border);
  border-radius:6px; color:var(--text); font-family:'Bebas Neue',sans-serif;
  font-size:16px; text-align:center; outline:none; transition:border .2s;
}
.bk-score-input:focus { border-color:var(--gold,#f59e0b); }
body.light .bk-score-input { background:#f1f5f9; color:#0f172a; }
.bk-score-sep { font-weight:700; color:var(--muted); font-size:14px; }
.bk-score-btn {
  background:rgba(245,158,11,0.15); border:1px solid rgba(245,158,11,0.3);
  border-radius:6px; color:#f59e0b; cursor:pointer; padding:3px 7px;
  font-size:12px; transition:all .15s; margin-left:2px;
}
.bk-score-btn:hover { background:rgba(245,158,11,0.25); }
.bk-saved-dot { color:#4ade80; font-size:10px; margin-left:4px; }

/* ── PROFILE KNOCKOUT TAB ─────────────────────────────────────────────── */
.profile-ko-list { display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; padding-right:4px; }
.profile-ko-row { background:var(--card2); border-radius:10px; padding:12px 14px; }
.pko-round { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.pko-match { display:flex; align-items:center; gap:8px; font-size:13px; }
.pko-team { flex:1; font-weight:600; }
.pko-team:last-child { text-align:right; }
.pko-team.pko-win { color:#f59e0b; }
.pko-score { font-family:'Bebas Neue',sans-serif; font-size:18px; min-width:50px; text-align:center; color:var(--text); }
.pko-winner { font-size:11px; color:#f59e0b; margin-top:5px; padding-top:5px; border-top:1px solid var(--border); }

/* ── LB VIEW BUTTON ───────────────────────────────────────────────────── */
.lb-view-btn {
  font-size:11px; padding:4px 10px; border-radius:6px;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  color:var(--muted); cursor:pointer; font-family:'Outfit',sans-serif;
  font-weight:600; transition:all .15s; white-space:nowrap;
}
.lb-view-btn:hover { border-color:rgba(245,158,11,0.4); color:#f59e0b; }

/* ── TROPHY CENTRE ───────────────────────────────────────────────────── */
.trophy-centre {
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:16px; position:relative;
}
.bracket-trophy {
  width:140px; height:auto;
  filter:drop-shadow(0 0 30px rgba(201,168,76,0.6)) drop-shadow(0 0 60px rgba(201,168,76,0.3));
  animation:trophyGlow 3s ease-in-out infinite alternate;
  cursor:default;
}
@keyframes trophyGlow {
  from { filter:drop-shadow(0 0 20px rgba(201,168,76,0.5)) drop-shadow(0 0 40px rgba(201,168,76,0.2)); }
  to   { filter:drop-shadow(0 0 40px rgba(201,168,76,0.9)) drop-shadow(0 0 80px rgba(201,168,76,0.5)); }
}
.trophy-label {
  font-family:'Bebas Neue',sans-serif;
  font-size:14px;
  letter-spacing:3px;
  color:#f59e0b;
  margin-top:8px;
  text-align:center;
  text-shadow:0 0 20px rgba(245,158,11,0.6);
}
body.light .bracket-trophy {
  filter:drop-shadow(0 0 20px rgba(201,168,76,0.4));
}

/* ── BRACKET GRID UPDATE FOR TROPHY CENTRE ───────────────────────────── */
.bracket-centre {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; padding:0 8px;
}

/* ── PENALTIES ROW ───────────────────────────────────────────────────── */
.bk-pen-row {
  display:flex; align-items:center; gap:5px; padding:6px 8px 8px;
  background:rgba(96,165,250,0.08); border-top:1px dashed rgba(96,165,250,0.3);
  flex-wrap:wrap;
}
.bk-pen-label { font-size:10px; color:#60a5fa; font-weight:700; letter-spacing:1px; flex-basis:100%; margin-bottom:4px; }
.bk-pen-input {
  width:32px; height:28px; background:var(--dark); border:1px solid rgba(96,165,250,0.4);
  border-radius:6px; color:#60a5fa; font-family:'Bebas Neue',sans-serif;
  font-size:15px; text-align:center; outline:none;
}
.bk-pen-input:focus { border-color:#60a5fa; }
body.light .bk-pen-input { background:#e8f0fe; color:#1a56db; }

/* ── REAL BRACKET ────────────────────────────────────────────────────── */
.real-bracket-wrap { display:flex; flex-direction:column; gap:28px; }
.real-info-box {
  background:rgba(96,165,250,0.08); border:1px solid rgba(96,165,250,0.25);
  border-radius:10px; padding:14px 16px; font-size:13px; color:#94a3b8; line-height:1.6;
}
.real-info-box strong { color:#60a5fa; }
.real-round { }
.real-round-title {
  font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:1px;
  margin-bottom:12px; display:flex; align-items:center; gap:10px;
}
.real-round-title span { font-size:12px; font-family:'Outfit',sans-serif; color:var(--muted); font-weight:400; letter-spacing:0; }
.real-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.real-match-card {
  background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
}
.real-match-label { font-size:10px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:8px; font-weight:700; }
.real-slot {
  font-size:13px; font-weight:600; color:var(--text); padding:6px 8px;
  background:var(--card2); border-radius:6px; margin-bottom:4px;
}
.real-vs { font-size:10px; color:var(--muted); text-align:center; margin:2px 0; letter-spacing:2px; }