:root{
  --bg:#050b18; --panel:#0b1428; --txt:#e7eefb; --muted:#9fb0d1;
  --accent:#00e5ff; --cta:#ff6b6b; --ok:#16a34a; --bad:#ef4444; --logout:#4b5563;
}

/* ===== Reset / Base ===== */
*{box-sizing:border-box}
html,body{height:-webkit-fill-available}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--txt);background:var(--bg)}
a{color:#bfe8ff}
.hidden{display:none!important}

/* ===== Background layers ===== */
.bg{
  position:fixed; inset:0;
  background:url('https://images.unsplash.com/photo-1522778119026-d647f0596c20?q=80&w=1600&auto=format&fit=crop') center/cover;
  filter:brightness(.28); z-index:-2;
}
.scrim{position:fixed; inset:0; background:linear-gradient(180deg,rgba(5,11,24,.7),rgba(5,11,24,.9)); z-index:-1}

/* ===== Domestic League Background Themes ===== */
#domestic.epl, #domestic.laliga, #domestic.seriea{position:relative}
#domestic.epl{
  background: radial-gradient(circle at center, rgba(60,0,100,.6) 0%, rgba(30,0,60,.9) 70%, #000 100%);
}
#domestic.epl::before{
  content:""; position:absolute; inset:0; background:url("assets/epl-lion.png") center/40% no-repeat;
  opacity:.10; filter:drop-shadow(0 0 25px rgba(180,0,255,.6)); pointer-events:none; z-index:0;
}
#domestic.laliga{
  background: radial-gradient(circle at center, rgba(120,0,0,.65) 0%, rgba(60,0,0,.9) 70%, #000 100%);
}
#domestic.laliga::before{
  content:""; position:absolute; inset:0; background:url("assets/laliga-logo.png") center/40% no-repeat;
  opacity:.12; filter:drop-shadow(0 0 25px rgba(255,0,0,.6)); pointer-events:none; z-index:0;
}
#domestic.seriea{
  background: radial-gradient(circle at center, rgba(0,30,0,.65) 0%, rgba(0,15,0,.9) 70%, #000 100%);
}
#domestic.seriea::before{
  content:""; position:absolute; inset:0; background:url("assets/seriea-logo.png") center/40% no-repeat;
  opacity:.12; filter:drop-shadow(0 0 25px rgba(0,255,100,.5)); pointer-events:none; z-index:0;
}

/* ===== Header ===== */
.header{max-width:1200px;margin:0 auto;padding:16px 14px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.logo{height:52px}
.title{margin:0;font-size:30px;letter-spacing:.3px;text-shadow:2px 2px 0 rgba(0,0,0,.45),0 0 20px rgba(0,230,255,.25)}
.subtitle{margin:6px 0 0;color:var(--muted);text-align:center}

/* ===== Header Dropdown (Login/Signup) ===== */
.header-actions{display:flex;align-items:center;gap:12px;position:relative}
.dropdown{position:relative}
.dropbtn{
  background:var(--cta); color:#00111a; padding:9px 12px; border-radius:10px; border:none; cursor:pointer;
  font-weight:700; display:flex; align-items:center; gap:6px; transition:background .25s, transform .2s;
}
.dropbtn:hover{filter:brightness(.9)}
.dropbtn.active{transform:translateY(-2px)}
.dropdown-content{
  position:absolute; top:120%; right:0; min-width:160px; background:#0b1428;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.4);
  transform-origin:top center; transform:scaleY(0); opacity:0; max-height:0; transition:transform .25s, opacity .25s; z-index:100;
}
.dropdown-content.show{transform:scaleY(1);opacity:1;max-height:500px}
.dropdown-content a{display:block;padding:10px 14px;text-decoration:none;color:var(--txt);font-size:14px}
.dropdown-content a:hover{background:rgba(255,255,255,.08)}

/* ===== Navigation ===== */
.nav{
  max-width:1200px;margin:0 auto;display:flex;gap:8px;justify-content:center;
  padding:8px 14px 14px;flex-wrap:wrap;
}
.tab{
  padding:10px 14px;border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  border-radius:999px;color:#bfe8ff;cursor:pointer;transition:all .2s ease;
}
.tab.active,.tab:hover{
  background:linear-gradient(180deg,rgba(0,229,255,.9),rgba(0,180,255,.7));
  color:#00111a;font-weight:700;transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,229,255,.4);
}

/* Nav user status + logout */
#logout-nav-box{display:flex;align-items:center;gap:8px}
#logout-nav-box .tiny{font-size:13px;color:var(--muted)}
#logout-nav-box button{
  padding:6px 10px;font-size:13px;border-radius:8px;background:var(--logout);color:#fff;border:none;cursor:pointer;transition:background .2s;
}
#logout-nav-box button:hover{background:#374151}

/* ===== Layout & Cards ===== */
.container{width:95%;max-width:1200px;margin:16px auto 40px;display:grid;gap:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{font-size:12px;padding:4px 8px;border-radius:20px;background:#0d213f;border:1px solid rgba(255,255,255,.12);color:#b7faff}

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%) scale(.9);
  background:rgba(5,11,24,.95); color:#e7eefb; padding:.8rem 1.4rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.15); opacity:0; transition:all .3s ease; z-index:9999; font-weight:600;
}
.toast.show{opacity:1; transform:translateX(-50%) scale(1)}
.toast.ok{border-color:#22c55e}
.toast.bad{border-color:#ef4444}

/* ===== Auth status messages ===== */
#auth-status{padding:10px 14px;margin-bottom:12px;border-radius:8px;font-weight:600;text-align:center;transition:opacity .8s,transform .8s;opacity:1}
#auth-status.success{background:rgba(22,163,74,.15);border:1px solid var(--ok);color:var(--ok)}
#auth-status.error{background:rgba(239,68,68,.15);border:1px solid var(--bad);color:var(--bad)}
#auth-status.fade-out{opacity:0;transform:translateY(-6px)}

/* ===== Tabs (helper) ===== */
.tabpane{opacity:1;transition:opacity .35s}
.tabpane.hidden{display:none!important;opacity:0}

/* ===== Buttons ===== */
.btn{background:var(--cta);color:#00111a;border:none;border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer}
.btn:hover{filter:brightness(.9)}
.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:10px;padding:9px 12px;font-weight:700;cursor:pointer;transition:.2s}
.btn-outline:hover{background:var(--accent);color:#00111a}
.btn-forward{background:var(--ok);color:#fff;border:none;border-radius:10px;padding:9px 12px;font-weight:800}
.btn-forward:hover{background:#15803d}
.btn-back{background:#6c757d;color:#fff;border:none;border-radius:10px;padding:9px 12px;font-weight:800}
.btn-back:hover{background:#5a6268}
#logout-btn{background:var(--logout);color:#fff;border:none;border-radius:10px;padding:9px 12px;font-weight:700;margin-top:10px;transition:background .2s}
#logout-btn:hover{background:#374151}

/* ===== Admin button ===== */
.admin-btn{
  background:linear-gradient(90deg,#ffd700,#ffa500); color:#000; font-weight:700; border:none; border-radius:12px;
  padding:10px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; box-shadow:0 4px 10px rgba(255,215,0,.4);
  transition:transform .2s, filter .2s;
}
.admin-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.admin-btn i{font-size:14px}

/* ===== Grid / Helpers ===== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rowline{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.08);transition:background .2s,box-shadow .2s}
.rowline.sep{border-bottom:2px solid var(--accent);margin:6px 0}
.rowline.highlight{background:linear-gradient(90deg,rgba(0,229,255,.25),rgba(0,229,255,.05));border-left:4px solid var(--accent);border-radius:6px}
.rowline.qualified{background:linear-gradient(90deg,rgba(22,163,74,.25),rgba(22,163,74,.05));border-left:4px solid var(--ok);box-shadow:0 0 10px rgba(22,163,74,.25);border-radius:6px}
.legend{font-size:13px;color:#9ef7c1;margin-top:6px;text-align:right;font-style:italic}

/* ===== Hero + Countdown ===== */
.hero{max-width:1200px;margin:10px auto 0;padding:0 14px;text-align:center}
.countdown{display:flex;justify-content:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.cd{background:linear-gradient(180deg,rgba(0,229,255,.15),rgba(0,229,255,.05));border:1px solid rgba(0,229,255,.25);padding:8px 10px;border-radius:12px;min-width:68px;text-align:center;box-shadow:0 2px 6px rgba(0,229,255,.15)}
.cd div:first-child{font-size:18px;font-weight:700;color:var(--accent)}
.cd div:last-child{font-size:11px;color:var(--muted)}
.tiny{font-size:12px;color:var(--accent);font-weight:600;margin-top:2px}
.tiny.urgent{color:#ff4d6d;font-weight:700;animation:pulse-urgent 1s infinite alternate}
@keyframes pulse-urgent{0%{text-shadow:0 0 4px rgba(255,77,109,.4);opacity:1}100%{text-shadow:0 0 12px rgba(255,77,109,.9);opacity:.8}}
.socials{display:flex;gap:12px;justify-content:center;margin-top:8px}

/* ===== Stats / Progress ===== */
.stat{display:flex;align-items:center;gap:10px;margin:6px 0}
.progress{flex:1;height:10px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,#00e5ff,#00b4ff)}
.chartbar{display:flex;align-items:center;gap:8px;margin:6px 0}
.chartbar .label{width:90px}
.chartbar .meter{flex:1;height:10px;background:rgba(255,255,255,.1);border-radius:8px;overflow:hidden}
.chartbar .meter>span{display:block;height:100%;background:linear-gradient(90deg,#00e5ff,#007bff)}

/* ===== Flash highlight ===== */
.flash{animation:flash-bg 1.6s ease-out}
@keyframes flash-bg{0%{background:rgba(0,229,255,.25)}40%{background:rgba(0,229,255,.15)}80%{background:rgba(0,229,255,.05)}100%{background:transparent}}

/* ===== Accordion (unified) ===== */
.accordion{margin-top:1rem}
.accordion-header{
  width:100%;text-align:left;padding:14px 16px;font-weight:700;font-size:1rem;background:linear-gradient(135deg,#1e3c72,#2a5298);
  color:#fff;cursor:pointer;border:none;display:flex;justify-content:space-between;align-items:center;transition:background .3s
}
.accordion-header:hover{filter:brightness(1.1)}
.accordion-header::after{content:'+';font-size:1.2rem;transition:transform .3s}
.accordion-header.active::after{content:'–';transform:rotate(180deg)}
.accordion-content{
  max-height:0;overflow:hidden;background:#0b1428;transition:max-height .35s ease,padding .35s ease,opacity .25s ease; opacity:.98;
}
.accordion-content.open,.accordion-content.show{max-height:800px;padding:14px 16px}

/* ===== LIVE matches block (kept) ===== */
.live-card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;margin-bottom:12px;box-shadow:0 0 12px rgba(0,0,0,.25);transition:all .25s}
.live-card.active{border-color:var(--accent);box-shadow:0 0 15px rgba(0,229,255,.25)}
.live-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.live-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--accent);margin-bottom:8px}
.live-league{font-size:.95rem;text-shadow:0 0 6px rgba(0,229,255,.35)}
.live-time{font-size:.85rem;font-weight:500}
.live-pill{background:var(--bad);color:#fff;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:700}
.status-pill{background:rgba(255,255,255,.08);color:var(--txt);padding:2px 8px;border-radius:999px;font-size:.75rem;text-transform:uppercase}
.live-teams{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:center}
.live-teams .team{display:flex;flex-direction:column;align-items:center;width:30%}
.live-teams .team img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 3px rgba(255,255,255,.2))}
.live-teams .team span{margin-top:4px;font-weight:600;font-size:.9rem}
.live-teams .score{font-size:1.6rem;font-weight:800;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.25)}
.score-flash{animation:scoreFlash 1.5s ease}@keyframes scoreFlash{0%{color:var(--ok);text-shadow:0 0 12px var(--ok)}100%{color:#fff;text-shadow:none}}
.goal-badge{background:var(--cta);color:#fff;font-size:.7rem;padding:2px 6px;border-radius:6px;position:absolute;transform:translateY(-28px);opacity:1;animation:pulseBadge 3s ease forwards}
.goal-badge.fade{opacity:0}
@keyframes pulseBadge{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:0}}
.possession-bar{display:flex;height:6px;margin:6px 0 8px;border-radius:6px;overflow:hidden}
.possession-bar .home{background:var(--ok);transition:width .6s}
.possession-bar .away{background:var(--bad);transition:width .6s}
.live-meta{font-size:.8rem;color:var(--muted);margin-bottom:6px;line-height:1.3}
.live-actions{display:flex;justify-content:flex-end;gap:6px}
.live-actions .btn{background:var(--accent);color:#000;font-size:.8rem;padding:4px 10px;border-radius:6px;border:none;cursor:pointer;transition:background .25s}
.live-actions .btn:hover{background:#00bcd4}

/* ===== MATCH DETAILS MODAL (unified with auth modal container) ===== */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:9999}
.modal.show{display:flex}
.modal-content{background:var(--panel); padding:20px; border-radius:14px; width:90%; max-width:720px; max-height:90vh; overflow-y:auto; position:relative}
.modal-close{position:absolute; top:8px; right:12px; font-size:1.4rem; background:transparent; color:var(--txt); border:none; cursor:pointer}
.modal-section{margin-bottom:20px}
.modal-section h3{margin-bottom:10px;font-size:1.1rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:4px}
.goal-timeline{display:flex;flex-direction:column;gap:4px}
.goal-item{display:flex;gap:8px;align-items:center;font-size:.9rem}
.goal-min{background:var(--ok);color:#000;padding:2px 6px;border-radius:4px;font-weight:700}
.goal-team{color:var(--accent)}
.goal-player{flex:1}
.goal-detail{color:var(--muted);font-size:.8rem}
.chart-row{margin-bottom:6px}
.chart-label{font-size:.85rem;color:var(--muted)}
.chart-bars{display:flex;height:6px;border-radius:6px;overflow:hidden;margin:4px 0}
.chart-bar.home{background:var(--ok);height:6px}
.chart-bar.away{background:var(--bad);height:6px}
.chart-values{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}
.details-table{width:100%;border-collapse:collapse;font-size:.8rem}
.details-table th,.details-table td{border:1px solid rgba(255,255,255,.08);padding:4px 6px;text-align:center}
.details-table th{background:rgba(255,255,255,.05);color:var(--accent)}
@media (max-width:600px){
  .modal-content{padding:14px;width:95%}
  .goal-item{font-size:.8rem}
  .chart-label{font-size:.75rem}
  .details-table th,.details-table td{font-size:.7rem;padding:3px}
}

/* ===== MATCHES & PREDICTIONS (canonical, all pages) ===== */
.matches{display:grid;gap:12px}
.match{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 10px;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  max-width:500px; margin:1rem auto; box-shadow:0 0 10px rgba(0,0,0,.3);
}
.match.locked{opacity:.85}
.match .teams{display:flex; align-items:center; gap:10px; min-width:0}
.match .team{display:inline-flex; align-items:center; gap:6px; min-width:0}
.match .team span{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw}
.match .vs{opacity:.8; font-weight:700}
/* Crest sizing (single source of truth) */
.match .team img,
#ucl-matches .team img,#domestic-matches .team img,#live-matches .team-logo,.team-logo-small{
  width:22px!important; height:22px!important; min-width:22px!important; min-height:22px!important; max-width:22px!important; max-height:22px!important;
  object-fit:contain; display:inline-block; vertical-align:middle; border-radius:4px; background:rgba(255,255,255,.06);
}
.matches .teams img{width:22px!important;height:22px!important}
.match .meta{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:.8rem; color:#bfe8ff; opacity:.95}
.pts-badge{margin-left:auto; font-weight:800}
.predict-inputs{display:inline-flex; align-items:center; gap:6px; justify-content:center}
.score-input{
  width:36px; height:36px; padding:0; line-height:36px; text-align:center; font-size:16px; font-weight:900;
  border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#e7eefb;
}
.colon{font-weight:900; opacity:.9}
.predict-submit{
  width:100%; margin-top:8px; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(0,245,165,.55); background:linear-gradient(180deg,rgba(0,245,165,.20),rgba(0,0,0,.25)); color:#eafff7; font-weight:900; cursor:pointer; transition:opacity .2s;
}
.predict-submit:hover{opacity:.85}
.timezone-notice{margin-top:10px; font-size:.8rem; color:var(--muted); text-align:center; opacity:.9}

@media(max-width:640px){
  .match{padding:10px; gap:6px 8px; transform:scale(.95)}
  .match .team span{max-width:38vw}
  .match .meta span{font-size:.75rem}
  .score-input{width:34px; height:34px; line-height:34px; font-size:15px}
}
@media(max-width:420px){
  .match .team span{max-width:35vw}
  .match .meta{gap:4px 8px}
  .match .meta span:nth-child(2){display:none} /* hide venue on tiny screens */
}

/* ===== Footer ===== */
.footer{max-width:1200px;margin:12px auto 28px;padding:0 14px;text-align:center;color:var(--muted)}

/* ===== Quiz / GameCenter ===== */
.quiz-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;margin-bottom:16px}
.quiz-card h3{margin:0 0 12px;font-size:1.1rem;color:var(--accent)}
.quiz-card .options{display:grid;gap:10px}
.quiz-card .opt{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px;cursor:pointer;text-align:left;transition:.2s}
.quiz-card .opt:hover{background:var(--accent);color:#00111a;font-weight:600}
.quiz-card .opt.correct{background:rgba(22,163,74,.3);border-color:var(--ok)}
.quiz-card .opt.wrong{background:rgba(239,68,68,.3);border-color:var(--bad)}
.quiz-results{padding:12px;background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.25);border-radius:12px;margin-top:16px;text-align:center;font-weight:700;color:var(--accent)}
.ad-placeholder{text-align:center;padding:20px;border:1px dashed var(--accent);border-radius:12px;background:rgba(0,229,255,.05);margin-top:16px}
.ad-placeholder p{margin:0 0 12px;font-size:.95rem;color:var(--muted)}
#gamecenter button{margin-top:12px;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:700;background:var(--cta);color:#00111a}
#gamecenter button:hover{filter:brightness(.9)}

/* ===== Mini Leagues ===== */
.mini-league-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;margin-bottom:16px}
.mini-league-header{display:flex;justify-content:space-between;align-items:center}
.mini-league-members{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mini-league-members span{background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.25);border-radius:8px;padding:4px 8px;font-size:13px;color:var(--accent)}
.mini-league-chat{margin-top:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px;font-size:13px;color:var(--muted)}
.mini-league-optin{margin-top:10px;padding:8px;border-radius:10px;background:rgba(22,163,74,.12);border:1px solid var(--ok);color:var(--ok);font-weight:600;text-align:center}

/* Teaser tiles */
.teaser{border-radius:14px;overflow:hidden;background-size:cover;background-position:center;height:220px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.8);position:relative}
.teaser::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.6))}
.teaser span{position:relative;z-index:1}
.teaser.bg1{background-image:url("https://images.unsplash.com/photo-1508609349937-5ec4ae374ebf?w=1200&q=80")}
.teaser.bg2{background-image:url("https://images.unsplash.com/photo-1505849867827-681f17a8d1e7?w=1200&q=80")}
.teaser.bg3{background-image:url("https://images.unsplash.com/photo-1517927033932-b3d18e61fb3a?w=1200&q=80")}
.teaser.bg4{background-image:url("https://images.unsplash.com/photo-1521412644187-c49fa049e84d?w=1200&q=80")}

/* ===== Digest & Spotlight ===== */
#soccer-digest{display:flex;flex-direction:column;gap:1rem}
.digest-item{display:flex;gap:1rem;align-items:flex-start;background:var(--panel);border-radius:8px;padding:.75rem}
.digest-item img{width:80px;height:60px;border-radius:6px;object-fit:cover}
.digest-content h4{margin:0;font-size:.95rem}
.digest-content p{font-size:.8rem;color:var(--muted);margin:.2rem 0 0}

#player-spotlight{--spotlight-bg:none;padding:.75rem;background:var(--panel);border-radius:12px;box-shadow:0 0 12px rgba(0,0,0,.3)}
.spotlight-card{position:relative;overflow:hidden;border-radius:12px;padding:1rem;min-height:180px;display:grid;grid-template-columns:120px 1fr;gap:1rem}
.spotlight-card::before{content:"";position:absolute;inset:0;background:var(--spotlight-bg) center/cover no-repeat;filter:blur(6px) brightness(.6);transform:scale(1.08)}
.spotlight-card>*{position:relative;z-index:1}
.spotlight-avatar{width:120px;height:120px;object-fit:cover;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.spotlight-card .info h3{margin:0;font-size:1.2rem;color:var(--accent);text-shadow:0 2px 8px rgba(0,0,0,.4)}
.spotlight-card .info p{margin:.25rem 0}
.spotlight-card .bio{margin-top:.35rem;color:var(--muted);font-size:.92rem}
.spotlight-card a{color:var(--cta);font-size:.85rem}

/* ===== Modal Auth (uses .modal container) ===== */
.modal.hidden{display:none}
.modal-content.auth-box{background:var(--panel);padding:24px;border-radius:16px;width:90%;max-width:360px;text-align:center;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.modal-close{top:10px;right:12px}
.auth-tabs{display:flex;justify-content:space-around;margin-bottom:12px}
.auth-tab{flex:1;background:none;border:none;color:var(--muted);font-weight:700;cursor:pointer;padding:8px;border-bottom:2px solid transparent}
.auth-tab.active{color:var(--accent);border-color:var(--accent)}
.auth-view input{width:100%;margin-bottom:10px;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08);color:var(--txt);font-size:16px}
.auth-view input::placeholder{color:var(--muted)}
.modal-content{-webkit-overflow-scrolling:touch}
.btn,.btn-inline{min-height:44px}

/* ===== Friends / Find Friends ===== */
#find-friends{margin-top:16px}
#friend-search-box{display:flex;margin:8px 0 12px}
#friend-search-input{flex:1;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:var(--txt);font-size:.95rem}
#friend-search-input:focus{outline:none;border-color:var(--accent)}
.friend-results{display:flex;flex-direction:column;gap:8px}
.friend-result{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:10px}
.friend-result .info{display:flex;align-items:center;gap:10px}
.friend-result img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.friend-result button{background:var(--accent);color:#000;border:none;border-radius:6px;padding:5px 10px;cursor:pointer;font-weight:600;transition:.2s}
.friend-result button:hover{filter:brightness(1.15)}
#friends-list .friend-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
#friends-list .friend-item:hover{background:rgba(255,255,255,.08)}
#friends-list img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
#friends-list .friend-info{flex:1;display:flex;flex-direction:column}
#friends-list .friend-info .tiny{opacity:.8}

/* ===== Fixture Admin (admin page) ===== */
#fixture-admin-panel{background:var(--panel);padding:1rem;border-radius:1rem;margin-top:1rem}
.fixture-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:.5rem;align-items:center;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.fixture-row button{font-size:.8rem;padding:.2rem .6rem;border:none;border-radius:.4rem;cursor:pointer}
.fixture-row .edit{background:#3b82f6;color:#fff}
.fixture-row .delete{background:#ef4444;color:#fff}
#fixture-form{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
#fixture-form input,#fixture-form select{flex:1;min-width:160px;padding:.4rem;border-radius:.4rem;border:1px solid rgba(255,255,255,.1)}
#fx-save{background:var(--accent);color:#000;font-weight:600}

/* ===== Home card variants kept ===== */
.home-card--mini{background:linear-gradient(180deg,rgba(0,255,170,.16),rgba(0,0,0,.55)),url('https://images.unsplash.com/photo-1600054904718-73d3e445df11?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;display:flex;align-items:center;justify-content:center;text-align:center}
.home-card--mini .content{position:relative;z-index:1;padding:12px;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.home-card--mini .content h3{margin:0 0 6px;font-size:1.3rem;font-weight:800;color:#e7eefb}
.home-card--mini .content p{margin:0 0 12px;font-weight:600;color:#bfe8ff;font-size:.9rem}
.home-card--mini .btn{background:#00f5a5;color:#012016;border:none;padding:.6rem 1.2rem;border-radius:10px;font-weight:900;cursor:pointer;box-shadow:0 4px 14px rgba(0,245,165,.35)}
.home-card--mini .btn:hover{filter:brightness(.95)}
.home-card--minileague{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85)),url("assets/mini-league-bg.jpg") center/cover no-repeat}
.home-card--digest{background:linear-gradient(180deg,rgba(0,255,170,.16),rgba(0,0,0,.70)),url("assets/pitch-texture.jpg") center/cover no-repeat,#061124}
.digest-thumb{width:64px;height:64px;border-radius:10px;margin-top:8px;object-fit:cover;border:1px solid rgba(255,255,255,.2);box-shadow:0 6px 16px rgba(0,0,0,.35)}
/* Inline SVG pitch variant */
:root{--pitch-soccer:url('data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90"><rect width="160" height="90" fill="%230b7a3b"/><rect x="2" y="2" width="156" height="86" fill="none" stroke="white" stroke-width="1.2"/><line x1="80" y1="2" x2="80" y2="88" stroke="white" stroke-width="1.2"/><circle cx="80" cy="45" r="9" fill="none" stroke="white" stroke-width="1.2"/><rect x="2" y="27" width="16" height="36" fill="none" stroke="white" stroke-width="1.2"/><rect x="142" y="27" width="16" height="36" fill="none" stroke="white" stroke-width="1.2"/><rect x="2" y="35" width="6" height="20" fill="none" stroke="white" stroke-width="1.2"/><rect x="152" y="35" width="6" height="20" fill="none" stroke="white" stroke-width="1.2"/><circle cx="12" cy="45" r="0.8" fill="white"/><circle cx="148" cy="45" r="0.8" fill="white"/></svg>')}
.home-card--digest{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.65)),var(--pitch-soccer) center/cover no-repeat,#072b1a;border:1px solid rgba(255,255,255,.12);aspect-ratio:2.2/1;grid-column:1 / -1}
.home-card--digest .content h3{font-size:1.05rem}
.home-card--digest .content p{font-size:.85rem;color:#d6fff1}
@media (max-width:640px){
  .home-card--digest{aspect-ratio:1/1;grid-column:auto}
}
/* Keep digest tile square inside homepage grid (non-destructive) */
.homepage-grid .grid-box.home-card--digest{aspect-ratio:1/1!important;grid-column:auto!important}

/* ===== Fan Insight ===== */
#fi-acc-ring{--p:0;width:110px;height:110px;border-radius:50%;background:conic-gradient(#00f5a5 calc(var(--p)*1%),rgba(255,255,255,.12) 0);display:grid;place-items:center;margin:6px auto 2px;-webkit-mask:radial-gradient(circle 46% at 50% 50%,transparent 99%,black 100%);mask:radial-gradient(circle 46% at 50% 50%,transparent 99%,black 100%);box-shadow:0 0 20px rgba(0,245,165,.15) inset}
#fi-acc-num{font-weight:900;color:#e7eefb;text-shadow:0 0 10px rgba(0,245,165,.25)}
#fi-heatmap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.fi-heatcell{aspect-ratio:1/1;border-radius:4px;border:1px solid rgba(255,255,255,.08)}
.fi-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.fi-list li{display:flex;gap:8px;align-items:center;font-size:14px}
.fi-list img{width:20px;height:20px;object-fit:contain;background:#fff;border-radius:50%}
.fi-feed{display:grid;gap:8px;min-height:120px}
.fi-item{display:flex;gap:8px;align-items:center;padding:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px}
.fi-dot{width:10px;height:10px;border-radius:50%}
body.sv-dark .card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.fi-ring{--p:0;width:84px;height:84px;border-radius:50%;background:conic-gradient(#00f5a5 calc(var(--p)*1%),rgba(255,255,255,.12) 0),radial-gradient(circle 36px,#061124 97%,transparent 0);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 8px 24px rgba(0,0,0,.35)}
.fi-heatmap{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;padding:6px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-height:90px}
.fi-heatmap .fi-heatcell{aspect-ratio:1/1;border-radius:6px}
.fi-picks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.fi-picks li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.fi-picks img{width:24px;height:24px;border-radius:50%;background:#fff;object-fit:cover;border:1px solid rgba(255,255,255,.3)}
#fi-feed{display:grid;gap:8px}
#fi-feed .fi-item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
#fi-feed .fi-dot{width:10px;height:10px;border-radius:50%}

/* ===== LIVE Accordion/fixtures compact rows ===== */
.country-section{margin-bottom:20px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03);overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.country-header{font-size:1.2rem;font-weight:800;color:#00ffd5;padding:10px 16px;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.1)}
.league-group{border-top:1px solid rgba(255,255,255,.08);transition:background .3s}
.league-header{background:#101a33;padding:.7rem 1rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:space-between;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.06)}
.league-header:hover{background:#142042;color:var(--accent)}
.league-content{position:relative;overflow:hidden;max-height:0;transition:max-height .4s ease;background:#0d162d}
.league-content.show{max-height:1500px}
.match-card{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.05)}
.match-card img{width:28px;height:28px;object-fit:contain;margin:0 6px}
.match-teams{flex:1;display:flex;align-items:center;justify-content:center;text-align:center}
.match-score{font-weight:700;color:var(--accent);margin-left:.8rem}
.marquee{border:1px solid gold;box-shadow:0 0 12px rgba(255,215,0,.3);animation:marqueePulse 1.4s infinite}
@keyframes marqueePulse{0%{box-shadow:0 0 6px rgba(255,215,0,.2)}50%{box-shadow:0 0 20px rgba(255,215,0,.6)}100%{box-shadow:0 0 6px rgba(255,215,0,.2)}}

/* ===== Account / Friends preview limiter ===== */
.account-profile-card{background:var(--panel);padding:1rem;border-radius:12px;margin-bottom:1rem;border:1px solid rgba(255,255,255,.1)}
.account-profile-card h3{margin-top:0;color:var(--accent)}
#friends-preview{max-height:320px;overflow:auto;border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:8px;background:rgba(255,255,255,.04)}

/* ===== Responsive ===== */
@media (max-width:768px){
  .container{grid-template-columns:1fr}
  .nav{flex-direction:column}
  .teaser{height:160px;font-size:1rem}
  .spotlight-card{grid-template-columns:1fr;text-align:center}
  .spotlight-avatar{margin:0 auto}
}

/* ===========================
   My Predictions (Account)
=========================== */
.predictions-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .predictions-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.predictions-box {
  background: rgba(255,255,255,0.03);
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
}

.predictions-box h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--accent);
}

.predictions-list .match {
  background: rgba(255,255,255,0.02);
  border-radius: 0.6rem;
  margin-bottom: 0.6rem;
  padding: 0.6rem;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.predictions-list .match:hover {
  background: rgba(255,255,255,0.07);
}

.predictions-list .teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.predictions-list .teams span {
  flex: 1;
  text-align: center;
  font-weight: 700;
}

.predictions-list input[type="number"] {
  width: 2.5rem;
  text-align: center;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--txt);
  font-weight: bold;
  border-radius: 0.3rem;
}

.predictions-list .status {
  font-size: 0.75rem;
  margin-top: 0.4rem;
  color: var(--muted);
}

.predictions-list .pts {
  text-align: right;
  margin-top: 0.3rem;
  font-size: 0.8rem;
}

.pred-summary {
  text-align: center;
  margin-top: 1rem;
}

.stats-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-weight: bold;
}

.pred-share {
  text-align: center;
  margin-top: 1rem;
}

/* ============================
   My Predictions Styling
============================ */
.predictions-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}
.predictions-box {
  flex: 1 1 360px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
}
.predictions-box h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: #00f5a5;
}

.predictions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pred-row {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 10px;
}
.pred-row.locked {
  opacity: 0.6;
  pointer-events: none;
}
.pred-row .teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-weight: 600;
}
.pred-row .scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
}
.pred-row input {
  width: 44px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #e7eefb;
  font-weight: 700;
  padding: 4px 0;
}
.pred-row .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #9fb0d1;
}

.pred-row .pts {
  font-weight: 700;
  color: #00f5a5;
}

.pred-summary {
  margin-top: 20px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 10px;
}
.stats-grid {
  display: flex;
  justify-content: space-around;
  font-weight: 700;
  margin-top: 6px;
}
.stats-grid span {
  display: block;
  font-size: 1.2rem;
  color: #00f5a5;
}

.pred-share {
  text-align: center;
  margin-top: 16px;
}

.match .pick {
  display: inline-flex; align-items: center; gap: 8px;
}
.match .pick input {
  width: 54px; padding: 8px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); color: #e7eefb;
  text-align: center; font-weight: 800;
}
.match .pick .save {
  border: 0; border-radius: 10px; padding: 8px 12px; cursor: pointer;
  background: linear-gradient(135deg, #00f5a5, #00b7ff);
  color: #04121f; font-weight: 900; box-shadow: 0 6px 20px rgba(0,180,255,0.25);
  transition: transform .08s ease, filter .08s ease;
}
.match .pick .save:hover { transform: translateY(-1px); filter: brightness(1.05); }
.match .pick .save:disabled { opacity: .5; cursor: default; filter: grayscale(0.2); }
.toast { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(7,18,38,0.92); border:1px solid rgba(255,255,255,.12);
  padding: 10px 14px; border-radius: 10px; color: #e7eefb; z-index: 3000;
}
.toast.fade { opacity: 0; transition: opacity .6s ease; }

.btn.small { padding: 6px 10px; font-size: .9rem; border-radius: 8px; }
.match .pick { display:flex; align-items:center; gap:8px; }
.match .crest { width:26px; height:26px; border-radius:50%; }
.match .live-score { font-weight:800; margin-top:6px; }