:root{
  --bg:#060a14; --bg2:#0a1226; --card:#101a33; --card2:#131e3d; --line:#1e2a4a;
  --nav:#070d1f; --muted:#8a94b0; --text:#e6ebf5; --accent:#3b82f6; --gold:#f59e0b;
  --green:#10b981; --red:#ef4444; --radius:16px; --radius-sm:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter, ui-sans-system, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* header */
.header{position:sticky;top:0;z-index:30;background:rgba(6,10,20,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:0.06em}
.logo-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#3b82f6,#60a5fa);display:grid;place-items:center;font-size:14px}
.logo span{font-size:16px}
.header-actions{display:flex;gap:8px;align-items:center}
.icon-btn{width:36px;height:36px;border-radius:999px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.badge-pro{font-size:10px;letter-spacing:0.08em;background:#1e293b;border:1px solid #334155;padding:4px 8px;border-radius:999px;color:#94a3b8}

/* nav */
.nav{position:sticky;top:56px;z-index:20;background:var(--nav);border-bottom:1px solid var(--line);display:flex;gap:6px;padding:8px 12px;overflow:auto;white-space:nowrap;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:0.04em;color:var(--muted);border:1px solid transparent}
.nav a.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.subnav{margin:12px 0;display:flex;gap:6px;overflow:auto;padding-bottom:2px}
.subnav button{padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:0.05em;border:1px solid var(--line);background:var(--card);color:var(--muted);white-space:nowrap}
.subnav button.active{background:var(--text);color:var(--bg);border-color:var(--text)}

/* layout */
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.section-title{font-size:12px;letter-spacing:0.08em;color:var(--muted);font-weight:800;margin:14px 2px 8px}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){ .grid-2{grid-template-columns:1fr} }
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;position:relative}
.card:hover{border-color:#2a3a64}
.league-line{font-size:11px;letter-spacing:0.07em;color:var(--muted);font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.teams{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}
.team{display:flex;align-items:center;gap:8px;flex:1}
.team.right{justify-content:flex-end;text-align:right}
.badge-team{width:32px;height:32px;border-radius:999px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:800}
.vs{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:0.1em}
.meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:var(--muted)}
.pick-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pick-label{font-size:10px;letter-spacing:0.08em;color:var(--muted);font-weight:800}
.pick-val{font-weight:900;letter-spacing:0.04em}
.tier{padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:0.06em;border:1px solid}
.tier-standard{background:#1e293b;color:#93c5fd;border-color:#3b82f6}
.tier-strong{background:#172554;color:#93c5fd;border-color:#2563eb}
.tier-high{background:#1e1b4b;color:#c4b5fd;border-color:#7c3aed}
.tier-elite{background:#422006;color:#fde68a;border-color:#f59e0b}
.tier-premium{background:#431407;color:#fed7aa;border-color:#f97316}
.tier-gold{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#1f1300;border-color:#f59e0b}
.tier-none{background:#1f2937;color:#9ca3af;border-color:#334155}
.value-box{margin-top:10px;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.25);border-radius:12px;padding:10px;display:flex;justify-content:space-between;align-items:center}
.value-box.none{background:rgba(148,163,184,0.06);border-color:var(--line)}
.value-label{font-size:10px;letter-spacing:0.08em;color:var(--muted);font-weight:800}
.value-main{font-weight:900}
.value-odds{font-size:11px;color:var(--muted)}
.dot{width:6px;height:6px;border-radius:999px;background:var(--green);display:inline-block;margin-right:6px}
.date-nav{display:flex;gap:8px;margin:10px 0}
.date-nav button{flex:1;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:800;letter-spacing:0.06em;font-size:12px}
.date-nav button.active{background:var(--text);color:var(--bg);border-color:var(--text)}

/* live / results */
.live-dot{width:8px;height:8px;border-radius:999px;background:var(--red);box-shadow:0 0 0 6px rgba(239,68,68,0.15);display:inline-block}
.score{font-weight:900;font-size:16px}
.frozen{font-size:10px;letter-spacing:0.06em;background:#0b1226;border:1px dashed #24324d;padding:6px 8px;border-radius:8px;color:var(--muted);margin-top:8px}
.won{color:var(--green);font-weight:900}
.lost{color:var(--red);font-weight:900}

/* live page cards */
.live-grid{display:grid;gap:14px}
.live-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 14px 12px;display:flex;flex-direction:column;transition:border-color .15s}
.live-card:hover{border-color:#2a3a64}
.live-top{display:flex;justify-content:space-between;align-items:center}
.live-league{font-size:11px;font-weight:800;letter-spacing:0.08em;color:var(--muted)}
.live-status-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:0.08em;color:var(--red)}
.live-status-badge .live-dot{width:7px;height:7px;box-shadow:0 0 0 4px rgba(239,68,68,0.15)}
.live-match-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 8px}
.live-match-team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;flex:1}
.live-match-team.right{align-items:center}
.live-team-name{font-size:12px;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.live-score{display:flex;align-items:center;gap:8px;font-size:36px;font-weight:900;line-height:1;letter-spacing:0.02em;flex-shrink:0}
.live-score-sep{color:var(--muted);font-weight:300;font-size:22px}
.live-divider{height:1px;background:var(--line);margin:2px 0}
.live-pick-wrap{text-align:center;padding:8px 0 2px}
.live-pick-label{font-size:9px;letter-spacing:0.12em;color:var(--muted);font-weight:800}
.live-pick-value{font-size:18px;font-weight:900;letter-spacing:0.04em;margin-top:3px}
.live-odds{font-size:11px;color:var(--muted);text-align:center;margin-top:2px}
.live-frozen-note{font-size:9px;letter-spacing:0.06em;color:var(--muted);text-align:center;margin-top:4px}
.live-also-value{font-size:10px;font-weight:800;letter-spacing:0.08em;color:var(--green);text-align:center;margin-top:6px}
.live-value-alt{margin-top:6px;padding:6px 8px;background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:8px}
.live-value-alt-label{font-size:8px;letter-spacing:0.1em;color:var(--muted);font-weight:800}
.live-value-alt-main{font-size:11px;font-weight:700;margin-top:2px}
.live-value-signal{margin-top:6px;padding:6px 8px;background:rgba(245,158,11,0.05);border:1px solid rgba(245,158,11,0.15);border-radius:8px}
.live-value-signal-label{font-size:8px;letter-spacing:0.1em;color:#f59e0b;font-weight:800}
.live-value-signal-main{font-size:11px;font-weight:700;margin-top:2px}

/* results page */
.results-summary{display:flex;gap:12px;margin:12px 0 14px}
.results-stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;align-items:center;gap:2px}
.results-stat-k{font-size:9px;letter-spacing:0.1em;color:var(--muted);font-weight:800}
.results-stat-v{font-size:20px;font-weight:900}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 14px 12px;display:flex;flex-direction:column;transition:border-color .15s}
.result-card:hover{border-color:#2a3a64}
.result-top{display:flex;justify-content:space-between;align-items:center}
.result-league{font-size:11px;font-weight:800;letter-spacing:0.08em;color:var(--muted)}
.result-final{font-size:10px;font-weight:800;letter-spacing:0.1em;color:var(--muted);background:rgba(255,255,255,0.04);padding:3px 8px;border-radius:6px}
.result-match-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 8px}
.result-match-team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;flex:1}
.result-match-team.right{align-items:center}
.result-team-name{font-size:12px;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.result-score{display:flex;align-items:center;gap:8px;font-size:36px;font-weight:900;line-height:1;letter-spacing:0.02em;flex-shrink:0}
.result-score-sep{color:var(--muted);font-weight:300;font-size:22px}
.result-pick-wrap{text-align:center;padding:8px 0 4px}
.result-state{font-size:13px;font-weight:900;letter-spacing:0.1em;text-align:center;padding:8px 0;border-radius:8px;margin-top:4px}
.result-state.result-won{color:var(--green);background:rgba(16,185,129,0.08)}
.result-state.result-lost{color:var(--red);background:rgba(239,68,68,0.08)}

/* track record */
.track-demo-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:0.12em;color:#f59e0b;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);padding:3px 8px;border-radius:6px;margin:0 0 8px}
.track-tier-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.track-tier-left{display:flex;align-items:center;gap:8px}
.track-tier-count{font-size:11px;color:var(--muted)}
.track-tier-right{display:flex;gap:16px}
.track-tier-stat{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:44px}
.track-tier-label{font-size:8px;letter-spacing:0.1em;color:var(--muted);font-weight:800}
.track-tier-val{font-size:14px;font-weight:900}

/* value page */
.value-edu-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.value-edu-title{font-size:13px;font-weight:800;letter-spacing:0.04em;margin-bottom:6px}
.value-edu-text{font-size:12px;color:var(--muted);line-height:1.6}
.value-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 14px 12px;display:flex;flex-direction:column;transition:border-color .15s}
.value-card:hover{border-color:#2a3a64}
.value-top{display:flex;justify-content:space-between;align-items:center}
.value-league{font-size:11px;font-weight:800;letter-spacing:0.08em;color:var(--muted)}
.value-kick{font-size:11px;font-weight:700;color:var(--muted)}
.value-teams-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 8px}
.value-match-team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;flex:1}
.value-match-team.right{align-items:center}
.value-team-name{font-size:12px;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.value-vs{font-size:11px;font-weight:700;color:var(--muted)}
.value-hero{text-align:center;padding:10px 0 8px}
.value-hero-label{font-size:9px;letter-spacing:0.12em;color:var(--green);font-weight:800}
.value-hero-outcome{font-size:22px;font-weight:900;letter-spacing:0.04em;margin-top:4px;line-height:1.1}
.value-hero-odds{font-size:13px;font-weight:700;color:var(--muted);margin-top:4px}
.value-secondary{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:rgba(255,255,255,0.02);border:1px solid var(--line);border-radius:10px;margin-top:4px}
.value-sec-left{display:flex;flex-direction:column;gap:2px}
.value-sec-label{font-size:8px;letter-spacing:0.1em;color:var(--muted);font-weight:800}
.value-sec-outcome{font-size:13px;font-weight:800}
.value-sec-right{display:flex;align-items:center}
.value-same-note{font-size:9px;letter-spacing:0.06em;color:var(--green);text-align:center;margin-top:8px}
.value-diff-note{font-size:10px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.5}

/* leagues */
.country{margin-top:18px}
.country:first-child{margin-top:0}
.country h3{font-size:12px;letter-spacing:0.08em;color:var(--muted);margin:0 0 8px}
.league-sub{font-size:13px;color:var(--muted);margin-top:-8px;margin-bottom:14px}
.league-search{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:13px;margin-bottom:10px;box-sizing:border-box}
.league-search::placeholder{color:var(--muted)}
.league-filter-tabs{display:flex;gap:6px;margin-bottom:14px}
.league-filter-tabs button{padding:7px 16px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:0.04em;cursor:pointer;transition:all .15s}
.league-filter-tabs button.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.league-row{display:flex;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:background .15s}
.league-row:hover{background:rgba(255,255,255,0.03)}
.league-logo-ph{width:28px;height:28px;border-radius:6px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--muted);flex-shrink:0;margin-right:12px}
.league-row-info{flex:1;min-width:0}
.league-row-name{font-size:14px;font-weight:700}
.league-row-country{font-size:11px;color:var(--muted);margin-top:1px}
.league-star{font-size:18px;padding:4px 8px;cursor:pointer;transition:color .15s;flex-shrink:0}
.league-star.on{color:var(--gold)}
.league-star.off{color:#334155}
.league-chevron{font-size:14px;color:var(--muted);margin-left:4px;flex-shrink:0}
.league-empty{text-align:center;color:var(--muted);font-size:13px;padding:30px 0}
.league-detail-header{margin-bottom:16px}
.league-back{background:none;border:none;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;padding:0;margin-bottom:12px}
.league-back:hover{color:var(--text)}
.league-detail-title{font-size:20px;font-weight:900}
.league-detail-country{font-size:12px;color:var(--muted);margin-top:2px}
.league-detail-sub{font-size:12px;letter-spacing:0.08em;color:var(--muted);margin-bottom:10px}

/* profile */
.prof-header{display:flex;flex-direction:column;align-items:center;padding:20px 0 10px}
.avatar{width:64px;height:64px;border-radius:999px;background:linear-gradient(135deg,#3b82f6,#06b6d4);display:grid;place-items:center;font-weight:900;font-size:20px;flex-shrink:0}
.prof-name{font-size:18px;font-weight:900;margin-top:10px}
.prof-email{font-size:13px;color:var(--muted);margin-top:2px}
.prof-plan-badge{margin-top:8px;padding:4px 14px;border-radius:20px;background:#1e293b;color:#93c5fd;border:1px solid #3b82f6;font-size:11px;font-weight:800;letter-spacing:0.06em}
.prof-edit-btn{margin-top:12px;padding:8px 20px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.prof-edit-btn:hover{background:rgba(255,255,255,0.04)}
.prof-section{margin-top:20px}
.prof-section-title{font-size:11px;letter-spacing:0.1em;color:var(--muted);font-weight:800;margin-bottom:10px}
.prof-subsection{margin-bottom:14px}
.prof-sub-head{font-size:12px;font-weight:800;margin-bottom:8px}
.prof-plan-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.prof-plan-name{font-size:20px;font-weight:900;margin-bottom:6px}
.prof-plan-perks{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.prof-perk{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.prof-perk-check{color:var(--green);font-weight:700}
.prof-plan-btn{width:100%;padding:10px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px;font-weight:700;cursor:not-allowed;opacity:0.5}
.prof-plan-note{text-align:center;font-size:11px;color:var(--muted);margin-top:4px;opacity:0.7}
.prof-fav-empty{font-size:13px;color:var(--muted);padding:10px 0}
.prof-fav-row{display:flex;align-items:center;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:6px}
.prof-fav-badge{width:24px;height:24px;border-radius:999px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;margin-right:10px;flex-shrink:0}
.prof-fav-badge img{width:100%;height:100%;object-fit:contain;border-radius:999px;background:#fff;padding:2px}
.prof-fav-name{flex:1;font-size:13px;font-weight:600}
.prof-fav-remove{font-size:14px;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,0.04);line-height:1}
.prof-fav-remove:hover{color:#ef4444;background:rgba(239,68,68,0.1)}
.prof-manage-btn{background:none;border:none;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;padding:8px 0;margin-top:4px}
.prof-manage-btn:hover{color:var(--text)}
.prof-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.prof-toggle-row:last-child{border-bottom:none}
.prof-toggle-label{font-size:13px}
.prof-toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.prof-toggle input{opacity:0;width:0;height:0}
.prof-toggle-slider{position:absolute;inset:0;background:#334155;border-radius:24px;cursor:pointer;transition:background .2s}
.prof-toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:999px;transition:transform .2s}
.prof-toggle input:checked + .prof-toggle-slider{background:#22c55e}
.prof-toggle input:checked + .prof-toggle-slider::before{transform:translateX(20px)}
.prof-pref-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.prof-pref-row:last-child{border-bottom:none}
.prof-pref-label{font-size:13px}
.prof-pref-value{font-size:13px;font-weight:700;color:var(--muted)}
.prof-email-val{font-size:12px}
.prof-acct-btns{display:flex;gap:8px;margin-top:10px}
.prof-acct-btn{flex:1;padding:10px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:12px;font-weight:700;cursor:pointer}
.prof-acct-btn:hover{background:rgba(255,255,255,0.04)}
.prof-logout-btn{width:100%;padding:13px;border-radius:12px;border:1px solid #ef4444;background:transparent;color:#ef4444;font-size:14px;font-weight:800;cursor:pointer;margin-top:24px}
.prof-logout-btn:hover{background:rgba(239,68,68,0.08)}
.prof-footer{text-align:center;font-size:11px;color:var(--muted);margin-top:16px;padding-bottom:20px}
.prof-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.prof-edit-form{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:24px;width:100%;max-width:380px}
.prof-edit-title{font-size:18px;font-weight:900;margin-bottom:16px}
.prof-edit-field{margin-bottom:12px}
.prof-edit-label{font-size:11px;letter-spacing:0.08em;color:var(--muted);font-weight:700;margin-bottom:4px}
.prof-edit-input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:14px;box-sizing:border-box}
.prof-edit-actions{display:flex;gap:8px;margin-top:16px}
.prof-edit-save{flex:1;padding:10px;border-radius:10px;border:0;background:var(--text);color:var(--bg);font-size:13px;font-weight:800;cursor:pointer}
.prof-edit-cancel{padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.prof-viewall-btn{background:none;border:none;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;padding:6px 0;margin-top:4px}
.prof-viewall-btn:hover{color:var(--text)}
.profile-card{display:flex;gap:14px;align-items:center}
.list{margin-top:10px}
.list a{display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:13px;font-weight:600}
.list a span{color:var(--muted);font-weight:500}

/* track */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:700px){ .stats-grid{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.stat .k{font-size:11px;letter-spacing:0.08em;color:var(--muted);font-weight:800}
.stat .v{font-size:20px;font-weight:900;margin-top:4px}

/* auth */
.auth-wrap{max-width:380px;margin:24px auto}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);margin:8px 0}
.btn{width:100%;padding:12px;border-radius:12px;border:0;background:var(--text);color:var(--bg);font-weight:900;letter-spacing:0.04em;margin-top:10px}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.muted{color:var(--muted);font-size:12px;text-align:center;margin-top:10px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;place-items:center;padding:16px;z-index:50}
.modal.open{display:grid}
.sheet{background:var(--bg2);border:1px solid var(--line);border-radius:16px;max-width:560px;width:100%;padding:16px;max-height:90vh;overflow:auto}
.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.close{width:32px;height:32px;border-radius:999px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center}
.modal-back{font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-bottom:10px}
.modal-back:hover{color:var(--text)}
.modal-league{font-size:11px;letter-spacing:0.08em;color:var(--muted);font-weight:800;text-transform:uppercase;text-align:center;margin:4px 0 12px}
.modal-teams{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 10px}
.modal-team{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.modal-badge{width:64px;height:64px;border-radius:999px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:14px;font-weight:900;overflow:hidden}
.modal-badge img{width:100%;height:100%;object-fit:contain;object-position:center}
.modal-team-name{font-size:15px;font-weight:900;letter-spacing:0.02em}
.modal-vs{font-size:11px;color:var(--muted);font-weight:900;letter-spacing:0.14em}
.modal-pick{text-align:center;margin:10px 0}
.modal-pick-label{font-size:10px;letter-spacing:0.12em;color:var(--muted);font-weight:800}
.modal-pick-value{font-size:22px;font-weight:900;letter-spacing:0.04em;margin-top:4px}
.modal-odds{text-align:center;font-size:13px;color:var(--muted);font-weight:700;margin-top:4px}
.modal-divider{height:1px;background:var(--line);margin:14px 0}
.why-title{font-size:11px;letter-spacing:0.10em;color:var(--muted);font-weight:800;margin-bottom:10px}
.why-block{margin-bottom:14px}
.why-label{font-size:10px;letter-spacing:0.08em;color:var(--muted);font-weight:800;margin-bottom:6px}
.why-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(30,42,74,0.5);font-size:13px}
.why-row:last-child{border-bottom:none}
.why-team{color:var(--text);font-weight:600}
.why-val{color:var(--text);font-weight:800}
.why-form{display:flex;gap:4px}
.form-badge{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:900;border:1px solid var(--line)}
.form-w{background:rgba(16,185,129,0.18);color:#6ee7b7;border-color:rgba(16,185,129,0.35)}
.form-d{background:rgba(148,163,184,0.12);color:#cbd5e1;border-color:rgba(148,163,184,0.25)}
.form-l{background:rgba(239,68,68,0.15);color:#fca5a5;border-color:rgba(239,68,68,0.30)}
.analysis-text{font-size:13px;line-height:1.5;color:var(--muted)}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--muted);cursor:pointer;padding:6px 0;margin-bottom:8px}
.back-link:hover{color:var(--text)}
.match-hero{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:18px 16px;text-align:center}
.match-hero-league{font-size:11px;letter-spacing:0.08em;color:var(--muted);font-weight:800}
/* ── Match Details HERO density polish ─────────────────────────────
   Hero-only presentation: bigger crests (natural proportions kept
   via the shared .crest-img slot rules), larger team names, teams
   drawn slightly toward centre, tighter vertical rhythm, slightly
   stronger prediction value. Background/tint untouched. */
.match-hero-teams{display:flex;align-items:center;justify-content:center;gap:56px;margin:10px 0 8px}
.match-hero-team{flex:0 1 auto;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.match-hero-badge{width:106px;height:106px;border-radius:999px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:22px;font-weight:900}
.match-hero-badge img:not(.crest-img){width:100%;height:100%;object-fit:contain;object-position:center}
.match-hero-name{font-size:20px;font-weight:900;line-height:1.15;padding:0 4px}
.match-hero-vs{font-size:12px;color:var(--muted);font-weight:900;letter-spacing:0.12em}
.match-hero .modal-pick{margin:8px 0 2px}
.match-hero .modal-pick-value{font-size:27px;margin-top:2px}
@media(max-width:900px){
  .match-hero-teams{gap:24px;margin:8px 0 6px}
  .match-hero-team{max-width:180px;gap:8px}
  .match-hero-badge{width:84px;height:84px;font-size:18px}
  .match-hero-name{font-size:17px}
}
.match-odds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.odds-card{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px;text-align:center}
.odds-card.active{border-color:var(--accent);background:rgba(59,130,246,0.10);box-shadow:0 0 0 1px rgba(59,130,246,0.25)}
.odds-card-label{font-size:10px;letter-spacing:0.08em;color:var(--muted);font-weight:800}
.odds-card-value{font-size:15px;font-weight:900;margin-top:4px}
.insights-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){ .insights-grid{grid-template-columns:1fr} }

/* ── MATCH INSIGHTS — premium analytics panels ─────────────────────
   Presentation only: same data, same calculations, same order of
   meetings/ranks. Panels reuse the hero's dark navy language; the
   label bar picks up a whisper of the home-team accent. No stadium
   image inside these panels. */
.insights-2x2{grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
@media(max-width:900px){ .insights-2x2{grid-template-columns:1fr} }
.insight-card{
  background:linear-gradient(180deg, rgba(19,26,44,.82), rgba(10,15,30,.92));
  border:1px solid rgba(42,58,100,.45);
  border-radius:14px;
  padding:13px 13px 11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 8px 22px rgba(2,6,16,.35);
  min-width:0;
}
.insight-label{
  font-size:9px;letter-spacing:.16em;color:#8fa3c8;font-weight:800;
  margin-bottom:10px;display:flex;align-items:center;gap:7px;text-transform:uppercase
}
.insight-label::before{
  content:'';width:3px;height:10px;border-radius:2px;flex-shrink:0;
  background:color-mix(in srgb, var(--home-accent, #33518a) 55%, transparent)
}
.insight-muted{color:var(--muted);font-size:11px;padding:2px 0}
.insight-foot{display:flex;justify-content:space-between;color:rgba(143,163,200,.75);font-size:9px;margin-top:8px}

/* recent form */
.form-team-row{margin-bottom:12px}
.form-team-row:last-of-type{margin-bottom:0}
.form-team-name{font-size:12px;font-weight:900;color:var(--text);letter-spacing:.03em;margin-bottom:6px;text-transform:uppercase}
.form-line{display:flex;align-items:center;gap:8px}
.form-chips{display:flex;align-items:center;gap:4px}
.form-chips .form-badge{width:25px;height:25px;border-radius:7px;font-size:11px}
.form-ppg{margin-left:auto;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}
.form-ppg span{font-size:9px;font-weight:700;opacity:.8;margin-left:2px}

/* head to head scoreboard */
.h2h-score{display:flex;align-items:stretch;justify-content:center;gap:10px;margin-bottom:8px}
.h2h-side{flex:1;background:rgba(9,14,28,.5);border:1px solid rgba(42,58,100,.35);border-radius:10px;padding:8px 6px;text-align:center;min-width:0}
.h2h-name{font-size:10px;font-weight:900;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.h2h-num{font-size:22px;font-weight:900;line-height:1.1;color:var(--text)}
.h2h-cap{font-size:8px;letter-spacing:.1em;color:var(--muted);font-weight:800;margin-top:2px;text-transform:uppercase}
.h2h-mid{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 4px}
.h2h-mid .h2h-num.draws{font-size:18px;color:#cbd5e1}
.h2h-meta{font-size:9px;color:var(--muted);text-align:center;margin-bottom:8px;letter-spacing:.04em}
.h2h-list{border-top:1px solid rgba(42,58,100,.35);padding-top:7px}
.h2h-meeting{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#b9c6de;padding:3px 0}
.h2h-meeting + .h2h-meeting{border-top:1px solid rgba(42,58,100,.18)}
.h2h-date{color:var(--muted);white-space:nowrap}

/* form rank shields */
.rank-duo{display:flex;gap:10px}
.rank-card{
  flex:1;border:1px solid rgba(42,58,100,.5);border-radius:11px;
  padding:10px 8px 9px;text-align:center;
  background:linear-gradient(180deg, rgba(9,14,28,.55), rgba(9,14,28,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  min-width:0
}
.rank-team{font-size:10px;font-weight:900;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.03em}
.rank-val{font-size:21px;font-weight:900;color:var(--text);margin-top:4px;line-height:1.1}
.rank-val.na{color:var(--muted)}

/* best value panel */
.bv-card.positive{border-color:rgba(34,197,94,.28)}
.bv-main{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px}
.bv-outcome{font-size:17px;font-weight:900;letter-spacing:.03em;color:var(--text)}
.bv-card.positive .bv-outcome{color:#86efac}
.bv-odds{display:flex;align-items:baseline;gap:5px}
.bv-num{font-size:24px;font-weight:900;color:var(--text)}
.bv-sub{font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:800;text-transform:uppercase}
.bv-note{font-size:10.5px;color:var(--muted);line-height:1.45}
.bv-note.ok{color:var(--green);font-size:11px;font-weight:700}
.bv-note b{color:#cdd8ee}
.recent-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){ .recent-grid{grid-template-columns:1fr} .match-odds-grid{grid-template-columns:1fr} }

/* ===== HOME — new premium match card ===== */
/* HOME-TEAM TINT SYSTEM (rolled out):
   every Home card carries --home-accent (inline, from
   teamAccents.js resolveTeamAccent(home)). It drives ONLY the
   atmospheric layers: edge glow, border accent, faint lighting.
   Unmapped teams fall back to the KickLive default navy/blue.
   Tier colours (gold/elite/premium), value green and prediction
   semantics are untouched. Background treatment is the shared,
   approved dark stadium photo — never team-specific. */
.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:900px){ .home-grid{grid-template-columns:1fr} }
.home-group{margin-top:20px}
.home-group-head{margin:18px 2px 8px}
.home-group-country{font-size:11px;letter-spacing:0.12em;color:var(--muted);font-weight:800}
.home-group-league{font-size:13px;font-weight:900;letter-spacing:0.04em;color:var(--text);margin-top:2px}
.home-card{
  --home-accent:#33518a;
  isolation:isolate;
  background:linear-gradient(168deg,#131a2c 0%,#0b1120 45%,#070c18 100%);
  border:1px solid color-mix(in srgb, var(--home-accent) 25%, transparent);
  border-radius:20px;padding:14px 13px;display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden;transition:border-color .15s, box-shadow .15s;
}
/* Match Details HERO reuses the approved Home stadium/tint system.
   .hero-visual is added by the renderer with --home-accent resolved
   from the HOME team (teamAccents.js). Result semantics (WON/LOST)
   stay on the result strip and never influence the tint. */
.match-hero.hero-visual{
  isolation:isolate;position:relative;overflow:hidden;
  background:linear-gradient(168deg,#131a2c 0%,#0b1120 45%,#070c18 100%);
  border-color:color-mix(in srgb, var(--home-accent) 25%, transparent);
}
.home-card::before,
.match-hero.hero-visual::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background-image:
    /* darker centre band behind pick / tier / odds content */
    radial-gradient(105% 68% at 50% 60%, rgba(4,8,18,.52) 0%, rgba(4,8,18,.30) 46%, transparent 72%),
    /* heavy dark navy overlay */
    linear-gradient(180deg, rgba(8,13,27,.66) 0%, rgba(8,13,27,.44) 48%, rgba(5,9,20,.74) 100%),
    /* shared stadium atmosphere photo */
    url('assets/card-backgrounds/premier-test.jpeg'),
    /* fine grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size:auto, auto, cover, 180px 180px;
  background-position:center, center, center 38%, top left;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
}
/* edge vignette + faint home-team-tint light accents (edges only) */
.home-card::after,
.match-hero.hero-visual::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background-image:
    radial-gradient(85% 55% at -6% 12%, color-mix(in srgb, var(--home-accent) 11%, transparent), transparent 55%),
    radial-gradient(60% 35% at 105% -8%, color-mix(in srgb, var(--home-accent) 7%, transparent), transparent 60%),
    radial-gradient(120% 95% at 50% 58%, transparent 34%, rgba(4,7,16,.42) 78%, rgba(3,6,14,.62) 100%);
}
.home-card:hover{border-color:color-mix(in srgb, var(--home-accent) 40%, transparent)}
.home-card.gold{border-color:rgba(245,158,11,0.55);box-shadow:0 0 0 1px rgba(245,158,11,0.18), 0 10px 28px rgba(245,158,11,0.14);background:linear-gradient(180deg, rgba(245,158,11,0.06), rgba(16,26,51,1) 45%)}
.home-card.gold::after{content:"★";position:absolute;top:10px;right:12px;left:auto;bottom:auto;width:auto;height:auto;background:none;background-image:none;border-radius:0;display:block;z-index:auto;font-size:10px;color:#fbbf24;opacity:0.9;letter-spacing:0}
.home-card.elite{border-color:rgba(245,158,11,0.30)}
.home-card.premium{border-color:rgba(249,115,22,0.32)}
.home-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:0.08em;color:var(--muted);font-weight:800;text-transform:uppercase}
.home-top strong{color:var(--muted);font-weight:800}
.home-kick{color:var(--text);font-weight:800;letter-spacing:0.04em}
.home-teams{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:10px 0 4px}
.home-team{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.home-badge-lg{width:60px;height:60px;border-radius:999px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:900;overflow:hidden;position:relative}
.home-badge-lg img:not(.crest-img){width:100%;height:100%;object-fit:contain;object-position:center}
.home-team-name{font-size:14px;font-weight:900;letter-spacing:0.02em;line-height:1.2}
.home-vs{font-size:11px;color:var(--muted);font-weight:900;letter-spacing:0.14em;padding-top:16px}
.home-pick{text-align:center;margin:5px 0 2px}
.home-pick-label{font-size:10px;letter-spacing:0.12em;color:var(--muted);font-weight:800}
.home-pick-value{font-size:20px;font-weight:900;letter-spacing:0.04em;margin-top:3px}
.home-pick-value.no-tip{color:var(--muted);font-size:16px}
.home-tier{display:flex;justify-content:center;margin:4px 0}
.home-tier-badge{padding:5px 11px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:0.06em;border:1px solid;display:inline-flex;align-items:center;gap:6px}
.home-tier-badge.tier-standard{background:#1e293b;color:#93c5fd;border-color:#3b82f6}
.home-tier-badge.tier-strong{background:#172554;color:#93c5fd;border-color:#2563eb}
.home-tier-badge.tier-high{background:#1e1b4b;color:#c4b5fd;border-color:#7c3aed}
.home-tier-badge.tier-elite{background:#422006;color:#fde68a;border-color:#f59e0b}
.home-tier-badge.tier-premium{background:#431407;color:#fed7aa;border-color:#f97316}
.home-tier-badge.tier-gold{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#1f1300;border-color:#f59e0b;box-shadow:0 2px 10px rgba(245,158,11,0.25)}
.home-tier-badge.tier-none{background:#1f2937;color:#9ca3af;border-color:#334155}
.home-odds{text-align:center;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:0.04em;margin-top:1px}
.home-odds strong{color:var(--text);font-weight:900}
.home-no-tip-note{text-align:center;font-size:11px;color:var(--muted);margin-top:3px}
.home-value{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.home-value-label{font-size:10px;letter-spacing:0.08em;color:var(--muted);font-weight:800;text-transform:uppercase}
.home-value-main{font-weight:800;color:var(--text)}
.home-value-link{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap}
.home-value-empty{font-size:11px;color:var(--muted);font-style:italic}
.home-card + .home-card{ /* spacing via grid gap */ }

/* compact fixture list — ALL TODAY'S MATCHES */
.fixture-list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fixture-row{display:flex;flex-direction:column;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);transition:background .12s}
.fixture-row:last-child{border-bottom:none}
.fixture-row:hover{background:rgba(255,255,255,0.02)}
.fixture-main{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fixture-teams{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.fixture-badge{width:24px;height:24px;border-radius:999px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:9px;font-weight:900;flex-shrink:0;overflow:hidden}
.fixture-badge img:not(.crest-img){width:100%;height:100%;object-fit:contain;object-position:center}

/* ── natural crests: dedicated fixed display slots ─────────────────
   The SLOT is a fixed-size area (same for both teams on a card, so
   team names always align). The CREST inside keeps width/height auto,
   natural aspect ratio, object-fit:contain, transparent background,
   no border-radius. An 88% inset guarantees the crest can never touch
   the slot edge — and therefore never the team name below it.
   Initials placeholders keep the original circular treatment. */
.crest-img{display:block;width:auto;height:auto;max-width:88%;max-height:88%;
  object-fit:contain;object-position:center;border-radius:0;background:transparent}
.badge-team:has(> .crest-img),
.home-badge-lg:has(> .crest-img),
.fixture-badge:has(> .crest-img),
.match-hero-badge:has(> .crest-img),
.modal-badge:has(> .crest-img){
  background:transparent;border:none;border-radius:0;padding:0;overflow:visible
}

/* ── TEMPORARY single-card premium experiment ──────────────────────
   Applied ONLY to the Hull City vs Manchester United Best Picks card
   (class injected in bestPickCard). Layered via one pseudo-element:
   base gradient (element bg) → ::before = noise texture + glows.
   Texture ≈6% visible, glows 5–12%. Content untouched; crests, text,
   layout and spacing identical to normal cards. */
.card-exp{
  isolation:isolate;
  background:linear-gradient(168deg,#111c3a 0%,#0c142e 42%,#070c1b 100%);
  border-color:rgba(128,152,204,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(2,6,16,.45);
}
.card-exp::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background-image:
    radial-gradient(130% 85% at 88% -12%, rgba(96,132,255,.11), transparent 55%),
    radial-gradient(85% 55% at 8% -18%, rgba(255,255,255,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
/* subtle green atmospheric accent near the bottom — only when the card shows ALSO POSITIVE VALUE */
.card-exp.card-exp-value::before{
  background-image:
    radial-gradient(120% 42% at 50% 112%, rgba(34,197,94,.13), transparent 62%),
    radial-gradient(130% 85% at 88% -12%, rgba(96,132,255,.11), transparent 55%),
    radial-gradient(85% 55% at 8% -18%, rgba(255,255,255,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

.fixture-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.fixture-vs{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:0.08em}
.fixture-time{font-size:12px;font-weight:800;color:var(--text);white-space:nowrap}
.fixture-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.fixture-meta b{color:var(--text)}
@media(max-width:700px){
  .fixture-name{max-width:90px;font-size:12px}
  .fixture-meta{font-size:10px}
}

/* footer nav mobile */
.bottom-nav{display:none}
@media(max-width:700px){
  .nav{display:none}
  .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(7,13,31,0.96);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 4px;z-index:40}
  .bottom-nav a{font-size:10px;letter-spacing:0.06em;color:var(--muted);text-align:center;padding:6px}
  .bottom-nav a.active{color:var(--text)}
  .wrap{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
  .home-teams{gap:8px}
  .home-badge-lg{width:56px;height:56px}
}

/* ── MATCH DETAILS HERO — compact mode (phones only, <=700px) ──────
   Same content, same information, same stadium/tint layers.
   Only spacing + moderate crest/name scaling. Desktop >=901px and
   tablets (701–900px) are unaffected. */
@media(max-width:700px){
  .match-hero{padding:10px 10px 9px}
  .match-hero-league{font-size:9px}
  .match-hero-teams{margin:5px 0 3px;gap:16px}
  .match-hero-team{gap:3px}
  .match-hero-badge{width:62px;height:62px;font-size:13px}
  .match-hero-name{font-size:15px;line-height:1.1;padding:0 2px}
  .match-hero-vs{font-size:10px;letter-spacing:.08em}
  .match-hero .modal-pick{margin:3px 0 0}
  .match-hero .modal-pick-label{font-size:9px}
  .match-hero .modal-pick-value{font-size:21px;margin-top:1px}
  .match-hero .home-tier{margin:2px 0}
  .match-hero .home-tier-badge{padding:3px 9px;font-size:10px}
  .match-hero .modal-odds{font-size:11px;margin-top:1px}
  /* frozen note / result banner / final score use inline margins in
     markup — tighten them here without editing markup */
  .match-hero div[style*="margin-top:6px"],
  .match-hero div[style*="margin-top:8px"],
  .match-hero div[style*="margin-top:4px"]{margin-top:2px !important;font-size:10px}
  .match-hero .result-state{padding:4px 0;font-size:12px;margin-top:3px;border-radius:7px}
}

/* ── COMPACT RESULTS CARDS (phones only, <=700px) ──────────────────
   Same information, tighter vertical rhythm. Desktop untouched.
   .match-hero .result-state keeps its own hero-specific rule. */
@media(max-width:700px){
  .result-card{padding:10px 10px 8px;border-radius:14px}
  .result-league{font-size:10px}
  .result-final{font-size:9px;padding:2px 6px}
  .result-match-row{margin:8px 0 4px;gap:10px}
  .result-team-name{font-size:11px;max-width:76px}
  .result-score{font-size:26px}
  .result-score-sep{font-size:15px}
  .result-pick-wrap{padding:3px 0 2px}
  .result-state{padding:5px 0;font-size:12px;margin-top:2px;border-radius:7px}
}