:root {
  --bg:     #0a0a0a; --bg2: #111111; --bg3: #1a1a1a;
  --accent: #f5c518; --green: #2ecc71; --red: #e74c3c; --blue: #3498db;
  --text:   #f0f0f0; --muted: #888888; --border: #2a2a2a; --radius: 12px;
}
/* iOS OLED: --border #2a2a2a is invisible against #0a0a0a — brighten to make all section dividers/borders visible */
.ios { --border: rgba(255,255,255,.18); }
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; background:var(--bg); overscroll-behavior-x:none; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; overflow-x:hidden; overscroll-behavior-x:none; }
a { text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; outline:0; }
a:focus, a:focus-visible { outline:none; background:none; }
img { display:block; }

/* BUTTONS */
.btn { padding:.6rem 1.4rem; border-radius:7px; font-family:'Inter',sans-serif; font-size:.88rem; font-weight:500; cursor:pointer; border:none; transition:all .18s; -webkit-tap-highlight-color:transparent; outline:0; touch-action:manipulation; user-select:none; }
.btn:focus, .btn:focus-visible { outline:none !important; box-shadow:none !important; }
.btn-outline { background:none; border:1px solid rgba(245,197,24,.35); color:var(--accent); font-weight:500; }
.btn-outline:active, .btn-outline:focus { background:none !important; border-color:rgba(245,197,24,.35) !important; color:var(--accent) !important; outline:none !important; box-shadow:none !important; }
.btn-gold { background:var(--accent); color:#000; font-weight:600; }
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { background:var(--accent); color:#000; border-color:var(--accent); }
  .btn-gold:hover { background:#ffd700; transform:translateY(-1px); }
}
.btn-lg { padding:.95rem 2.5rem; font-size:1rem; border-radius:9px; }
.btn-full { width:100%; padding:.65rem; font-size:1rem; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:1rem 2.5rem; padding-top:calc(1rem + env(safe-area-inset-top)); min-height:72px; background:rgba(10,10,10,.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.nav-logo { font-family:'Oswald',sans-serif; font-size:1.4rem; font-weight:700; color:var(--accent); letter-spacing:3px; text-decoration:none; }
.nav-side { flex:1; display:flex; align-items:center; }
.nav-side-left { justify-content:flex-start; }
.nav-side-right { justify-content:flex-end; }
.nav-links { display:flex; gap:.75rem; }
.nav-links > a { display:flex; width:80px; }
.nav-links .btn { width:100%; padding:.6rem 8px; text-align:center; }

/* HERO */
#hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:5rem 1.2rem 3rem; background:radial-gradient(ellipse 80% 60% at 50% 0%, #1f0d00 0%, var(--bg) 70%); position:relative; }
#hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px); background-size:40px 40px; pointer-events:none; }
.hero-trophy-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.07; mix-blend-mode:screen; pointer-events:none; z-index:0; }
#hero > *:not(.hero-trophy-bg) { position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(245,197,24,.12); border:1px solid rgba(245,197,24,.35); color:var(--accent); padding:.4rem 1.2rem; border-radius:50px; font-size:.82rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:1.8rem; }
.hero-title { font-family:'Oswald',sans-serif; font-size:clamp(3.5rem,9vw,7rem); font-weight:700; line-height:.95; letter-spacing:-1px; margin-bottom:.6rem; }
.hero-title .gold { color:var(--accent); }
.hero-sub { font-size:clamp(.95rem,2vw,1.2rem); color:var(--muted); font-weight:300; margin-bottom:3.5rem; }

/* COUNTDOWN */
.countdown { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; width:100%; max-width:520px; }
.cd-block { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 0; text-align:center; flex:0 0 88px; }
.cd-sep { flex-shrink:0; }
.cd-num { display:block; font-family:'Oswald',sans-serif; font-size:2.6rem; font-weight:700; color:var(--accent); line-height:1; }
.cd-label { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:2px; margin-top:.4rem; }
.cd-sep { font-family:'Oswald',sans-serif; font-size:2.5rem; color:var(--accent); opacity:.4; margin-top:-.8rem; }
.kickoff-bar { display:flex; align-items:center; gap:.9rem; background:rgba(245,197,24,.07); border:1px solid rgba(245,197,24,.22); border-radius:10px; padding:.7rem 1.4rem; margin:0 auto 2.4rem; width:100%; max-width:520px; }
.kb-icon { flex-shrink:0; width:42px; height:42px; border-radius:50%; background:rgba(245,197,24,.09); border:1px solid rgba(245,197,24,.22); display:flex; align-items:center; justify-content:center; }
.kb-icon img { width:24px; height:24px; }
.kb-main { font-size:.88rem; font-weight:600; color:var(--text); }
.kb-detail { font-size:.76rem; color:var(--muted); margin-top:.2rem; letter-spacing:.3px; }
.hero-cta { display:flex; gap:1rem; justify-content:center; }
.hero-cta > a { display:flex; }
.hero-cta > a .btn, .hero-cta > .btn { width:13rem; }
.scroll-hint { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); color:var(--muted); font-size:1.4rem; animation:bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* SECTIONS */
.section { padding:6rem 2rem; max-width:1200px; margin:0 auto; }
.section-pill { display:inline-block; color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; margin-bottom:.5rem; }
.section-title { font-family:'Oswald',sans-serif; font-size:clamp(2rem,4vw,2.8rem); font-weight:700; margin-bottom:.8rem; }
.section-desc { color:var(--muted); font-size:1.02rem; line-height:1.75; max-width:580px; margin-bottom:3rem; }

/* HOSTS — hero row */
.hero-hosts { display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; }
.host-card { display:flex; flex-direction:row; align-items:center; gap:.9rem; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:14px; padding:1rem 1.4rem; cursor:pointer; transition:border-color .2s, background .2s, transform .18s; min-width:220px; }
.host-card:hover { border-color:var(--accent); background:rgba(245,197,24,.08); transform:translateY(-4px); }
.host-card-flag { width:58px; height:43px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.host-info { text-align:left; }
.host-name { font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:600; line-height:1.2; }
.host-detail { color:var(--muted); font-size:.78rem; margin-top:.3rem; }
.host-detail strong { color:var(--accent); }

/* STATS */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); background:var(--border); gap:1px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:3.5rem; }
.stat-item { background:var(--bg2); padding:2rem; text-align:center; }
.stat-num { font-family:'Oswald',sans-serif; font-size:2.4rem; font-weight:700; color:var(--accent); }
.stat-desc { color:var(--muted); font-size:.82rem; margin-top:.25rem; }

/* FORMAT */
.format-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.format-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; }
.format-icon { width:46px; height:46px; border-radius:10px; background:rgba(245,197,24,.1); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem; }
.format-title { font-weight:600; margin-bottom:.4rem; font-size:.95rem; }
.format-desc { color:var(--muted); font-size:.84rem; line-height:1.65; }

/* GROUPS */
#groups-section { background:var(--bg2); padding:6rem 2rem; }
.groups-header { text-align:center; margin-bottom:3rem; }
.groups-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; max-width:1200px; margin:0 auto; }
.group-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.group-header { background:var(--accent); color:#000; padding:.6rem 1rem; font-family:'Oswald',sans-serif; font-size:1rem; font-weight:700; letter-spacing:2px; display:flex; align-items:center; justify-content:space-between; }
.group-teams { padding:.5rem; }
.group-team { display:flex; align-items:center; gap:.65rem; padding:.5rem .5rem; border-radius:6px; transition:background .15s; cursor:pointer; }
.group-team:hover { background:rgba(255,255,255,.07); }
.group-team img { width:34px; height:25px; border-radius:3px; object-fit:cover; flex-shrink:0; border:1px solid rgba(255,255,255,.12); }
.team-placeholder { width:34px; height:25px; border-radius:3px; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:.65rem; color:var(--muted); flex-shrink:0; }
.team-info { flex:1; min-width:0; }
.team-name-sm { font-size:.78rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-conf-sm { font-size:.62rem; color:var(--muted); }
.badge-host { font-size:.55rem; background:rgba(245,197,24,.15); border:1px solid rgba(245,197,24,.4); color:var(--accent); padding:.1rem .3rem; border-radius:3px; flex-shrink:0; }
.badge-tbd { font-size:.55rem; background:rgba(100,100,100,.2); border:1px solid var(--border); color:var(--muted); padding:.1rem .3rem; border-radius:3px; flex-shrink:0; }

/* GLOBE */
#globe-section { background:var(--bg); padding:5rem 0; }
.globe-header { text-align:center; padding:0 2rem 2.5rem; }
#globe-container { width:100%; height:660px; position:relative; overflow:hidden; border-radius:14px; background:#0a0a0a; }
#globe-container img.map-bg { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:fill; pointer-events:none; z-index:0; }
.globe-legend { text-align:center; padding:1.5rem 2rem 0; color:var(--muted); font-size:.8rem; }

/* MODAL */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:1000; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg3); border:1px solid var(--border); border-radius:18px; padding:2rem; width:100%; max-width:440px; position:relative; animation:pop .2s ease; max-height:92vh; overflow-y:auto; }
@keyframes pop { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.modal-close { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.07); border:none; color:var(--muted); font-size:1.1rem; width:30px; height:30px; border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.modal-close:hover { background:rgba(255,255,255,.15); color:var(--text); }
.modal-flag-img { width:90px; height:68px; border-radius:8px; margin:0 auto .8rem; object-fit:cover; border:2px solid var(--border); }
.modal-name { font-family:'Oswald',sans-serif; font-size:1.6rem; font-weight:700; text-align:center; margin-bottom:.3rem; }
.modal-badges { display:flex; justify-content:center; gap:.5rem; margin-bottom:.8rem; flex-wrap:wrap; }
.conf-tag { padding:.22rem .7rem; border-radius:20px; font-size:.72rem; font-weight:600; background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.3); color:var(--accent); }
.group-tag { padding:.22rem .7rem; border-radius:20px; font-size:.72rem; font-weight:600; background:rgba(52,152,219,.1); border:1px solid rgba(52,152,219,.3); color:var(--blue); }
.host-row { display:flex; align-items:center; gap:.4rem; justify-content:center; background:rgba(46,204,113,.1); border:1px solid rgba(46,204,113,.3); color:var(--green); padding:.35rem 1rem; border-radius:8px; font-size:.8rem; font-weight:600; margin-bottom:.8rem; }
.modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.modal-stat { background:var(--bg2); border-radius:10px; padding:.9rem; }
.modal-stat.full { grid-column:1/-1; }
.mstat-label { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:.25rem; }
.mstat-value { font-weight:600; font-size:.88rem; line-height:1.4; }
.mstat-value.gold { color:var(--accent); }
.modal-section-label { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; text-align:center; margin:1rem 0 .6rem; padding-top:.8rem; border-top:1px solid var(--border); }
.mstat-value.fact { font-size:.84rem; line-height:1.5; }

/* SCHEDULE IN MODAL */
.sched-divider { display:flex; align-items:center; gap:.6rem; margin:1.2rem 0 .8rem; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; white-space:nowrap; }
.sched-divider::before, .sched-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.sched-row { display:grid; grid-template-columns:auto 1fr auto; gap:.5rem; align-items:center; padding:.65rem .75rem; border-radius:8px; background:var(--bg2); margin-bottom:.5rem; }
.sched-left { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.sched-phase { font-size:.6rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.sched-phase.group { color:var(--blue); }
.sched-phase.knockout { color:var(--accent); }
.sched-date { font-size:.68rem; color:var(--muted); }
.sched-middle { display:flex; align-items:center; gap:.5rem; min-width:0; }
.sched-middle img { width:26px; height:20px; border-radius:2px; object-fit:cover; border:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.sched-opponent { font-size:.8rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-tbd-flag { width:26px; height:20px; border-radius:2px; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:.6rem; color:var(--muted); flex-shrink:0; }
.sched-venue { font-size:.62rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; grid-column:1/-1; margin-top:.1rem; padding-left:0; }
.sched-right { text-align:right; flex-shrink:0; }
.sched-idt { font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:700; color:var(--accent); line-height:1; }
.sched-idt-label { font-size:.58rem; color:var(--muted); margin-top:.1rem; }

/* REGISTER */
#register-section { padding:6rem 2rem; max-width:500px; margin:0 auto; }
.reg-header { text-align:center; margin-bottom:2.5rem; }
.reg-card { background:var(--bg3); border:1px solid var(--border); border-radius:18px; padding:2.5rem; }
.reg-title { font-family:'Oswald',sans-serif; font-size:1.7rem; font-weight:700; text-align:center; margin-bottom:.35rem; }
.reg-sub { color:var(--muted); text-align:center; font-size:.88rem; margin-bottom:2rem; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:.82rem; font-weight:500; color:var(--muted); margin-bottom:.4rem; }
.form-group input { width:100%; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; color:var(--text); font-family:'Inter',sans-serif; font-size:.93rem; outline:none; transition:border-color .18s; }
.form-group input:focus { border-color:var(--accent); }
.form-group input::placeholder { color:#444; }
.form-footer { text-align:center; margin-top:1.4rem; color:var(--muted); font-size:.88rem; }
.form-footer a { color:var(--accent); font-weight:500; }

/* HOST SCHEDULE MODAL */
.host-sched-modal { max-width:700px; padding:0; overflow-y:auto; max-height:92vh; }
.hs-header { display:flex; align-items:center; gap:1.5rem; padding:1.8rem 2rem 1.5rem; background:linear-gradient(135deg,rgba(245,197,24,.09) 0%,transparent 65%); border-bottom:1px solid var(--border); }
.hs-flag-img { width:110px; height:82px; border-radius:10px; object-fit:cover; border:2px solid rgba(245,197,24,.45); flex-shrink:0; box-shadow:0 6px 24px rgba(0,0,0,.5); }
.hs-meta { flex:1; min-width:0; }
.hs-country-name { font-family:'Oswald',sans-serif; font-size:2.2rem; font-weight:700; line-height:1; letter-spacing:1px; }
.hs-stats-row { display:inline-flex; align-items:center; gap:.4rem; background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.25); color:var(--accent); font-size:.78rem; font-weight:600; padding:.25rem .7rem; border-radius:20px; margin-top:.6rem; }
.hs-cities-row { color:var(--muted); font-size:.75rem; margin-top:.5rem; line-height:1.5; }
#hs-games-container { padding:0; }

/* HOST SCHEDULE TABLE */
.hs-table-wrap { padding:.5rem 1rem 1rem; overflow-x:auto; }
.hs-table { width:100%; border-collapse:collapse; font-size:.82rem; min-width:520px; }
.hs-table th { text-align:left; font-size:.63rem; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; padding:.55rem .65rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.hs-table td { padding:.6rem .65rem; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; line-height:1.3; }
.hs-table tbody tr:hover td { background:rgba(255,255,255,.025); }
.hs-table .td-teams { display:flex; align-items:center; gap:.35rem; min-width:180px; }
.hs-table .td-flag { width:22px; height:16px; border-radius:2px; object-fit:cover; border:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.hs-table .td-flag-ph { width:22px; height:16px; border-radius:2px; background:var(--border); flex-shrink:0; }
.hs-table .td-vs { color:var(--muted); font-size:.7rem; flex-shrink:0; padding:0 .1rem; }
.hs-table .td-time { font-family:'Oswald',sans-serif; color:var(--accent); font-size:1rem; line-height:1; }
.hs-table .td-tbd { color:#555; font-size:.78rem; }
.hs-phase-hdr td { background:rgba(245,197,24,.04); padding:.4rem .65rem; font-size:.63rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--accent); border-top:1px solid rgba(245,197,24,.15); }
.hs-divider { display:flex; align-items:center; gap:.7rem; margin:1.3rem 0 .7rem; font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:2px; white-space:nowrap; }
.hs-divider::before, .hs-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.hs-game { border-radius:10px; background:var(--bg2); border:1px solid transparent; margin-bottom:.5rem; overflow:hidden; transition:border-color .15s, background .15s; }
.hs-game:hover { border-color:rgba(245,197,24,.25); background:#181818; }
.hs-game.is-summary { background:transparent; border:1px dashed var(--border); opacity:.75; }
.hs-meta-row { display:flex; align-items:center; justify-content:space-between; padding:.55rem .9rem .3rem; border-bottom:1px solid rgba(255,255,255,.04); }
.hs-tag { font-size:.6rem; font-weight:700; padding:.18rem .55rem; border-radius:4px; letter-spacing:.3px; }
.hs-tag.group { background:rgba(52,152,219,.15); color:var(--blue); border:1px solid rgba(52,152,219,.3); }
.hs-tag.knockout { background:rgba(245,197,24,.12); color:var(--accent); border:1px solid rgba(245,197,24,.3); }
.hs-date { font-size:.65rem; color:var(--muted); margin-left:.4rem; }
.hs-time-block { text-align:right; }
.hs-idt-val { font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:700; color:var(--accent); line-height:1; }
.hs-idt-day { font-size:.58rem; color:var(--muted); }
.hs-matchup-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem; padding:.6rem .9rem; }
.hs-team-l { display:flex; align-items:center; gap:.55rem; }
.hs-team-r { display:flex; align-items:center; gap:.55rem; flex-direction:row-reverse; }
.hs-fl { width:32px; height:24px; border-radius:4px; object-fit:cover; border:1px solid rgba(255,255,255,.15); flex-shrink:0; }
.hs-fl-ph { width:32px; height:24px; border-radius:4px; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:.6rem; color:var(--muted); flex-shrink:0; }
.hs-tn { font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.hs-vs-badge { background:var(--border); color:var(--muted); font-size:.62rem; font-weight:700; letter-spacing:1px; padding:.22rem .5rem; border-radius:5px; flex-shrink:0; }
.hs-venue-row { padding:.25rem .9rem .55rem; font-size:.65rem; color:#666; }
.hs-foot-note { padding:.8rem 1.5rem 1.2rem; font-size:.62rem; color:#555; border-top:1px solid var(--border); line-height:1.6; }

/* TOAST */
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(120px); background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:.9rem 1.8rem; font-size:.88rem; z-index:9999; display:flex; align-items:center; gap:.7rem; transition:transform .3s cubic-bezier(.34,1.56,.64,1); white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.success { border-color:var(--green); color:var(--green); }
.toast.error   { border-color:var(--red);   color:var(--red); }

/* RESPONSIVE */
@media(max-width:1024px) { .groups-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px)  { .hosts-grid{grid-template-columns:1fr} .stats-bar{grid-template-columns:repeat(2,1fr)} .format-grid{grid-template-columns:1fr} .groups-grid{grid-template-columns:repeat(2,1fr)} .countdown{gap:.3rem;width:100%;max-width:100%} .cd-block{padding:.8rem 0;flex:1} .cd-num{font-size:2rem} .cd-sep{font-size:1.5rem;margin-top:-.4rem} .kickoff-bar{padding:.6rem 1rem;max-width:100%} .kb-detail{font-size:.72rem} nav{padding:.75rem 1rem} #globe-container{height:520px;min-width:1100px} }
@media(max-width:480px)  { .groups-grid{grid-template-columns:1fr} .hero-cta{flex-direction:column;align-items:center} }

/* GROUP MAP BUTTON */
.grp-map-btn { background:rgba(0,0,0,.25); border:1px solid rgba(0,0,0,.3); border-radius:6px; cursor:pointer; font-size:1.1rem; padding:.15rem .4rem; line-height:1; flex-shrink:0; transition:background .15s; }
.grp-map-btn:hover, .grp-map-btn:active { background:rgba(0,0,0,.45); }

/* GLOBE FILTER BAR */
#globe-filter-bar { display:flex; align-items:center; justify-content:center; gap:.8rem; padding:.5rem 1rem; background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.25); border-radius:8px; margin:0 auto 1rem; max-width:280px; font-size:.82rem; color:var(--accent); }

/* GLOBE — horizontal scroll on mobile */
#globe-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px; width:100%; max-width:100%; touch-action:pan-x pan-y; }
.globe-scroll-hint { display:none; text-align:center; color:var(--muted); font-size:.78rem; padding:.6rem 0 0; }
@media(max-width:768px) { .globe-scroll-hint { display:block; } }

/* GROUPS ACCORDION — mobile only */
@media(max-width:768px) {
  .group-teams { display:none; }
  .group-card.open .group-teams { display:block; }
  .group-header { cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; }
  .group-header::after { content:'▾'; font-size:.75rem; opacity:.7; }
  .group-card.open .group-header::after { content:'▴'; }
}

/* HERO desktop restore */
@media(min-width:769px) {
  #hero { padding:7rem 2rem 5rem; }
}

/* HERO mobile fixes */
@media(max-width:768px) {
  nav { padding-top: calc(.75rem + env(safe-area-inset-top)); }
  #hero { background:radial-gradient(ellipse 160% 55% at 50% 0%, #2d1400 0%, var(--bg) 65%); }
  .hero-trophy-bg { width:100%; left:50%; right:auto; transform:translateX(-50%) translateY(-12%); }
  #globe-section { overflow-x:hidden; }
  .hero-hosts { gap:.7rem; flex-direction:column; }
  .host-card { min-width:0; width:100%; }
  .host-card-flag { width:44px; height:33px; }
}

/* MOBILE REGISTRATION FIXES */
@media(max-width:768px) {
  #register-section { padding:3rem 1.2rem; }
  .reg-card { padding:1.5rem; }
  .form-group label { font-size:.88rem; }
  .form-group input { font-size:1rem; padding:1rem; } /* 1rem = 16px — prevents iOS auto-zoom */
  .btn-full { padding:.65rem; font-size:1rem; }
}

/* WEB-ONLY overrides (>768px) */
@media(min-width:769px) { .grp-map-btn { display:none; } .legend-mobile { display:none; } }
@media(max-width:768px) { .hint-hover { display:none; } }

/* PAGE SHELL */
.page-shell { min-height:100vh; position:relative; }
.side-deco { display:none; }
.page-nav { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.2rem; min-height:72px; background:rgba(10,10,10,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.12); }
.ios .page-nav { backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid rgba(255,255,255,.18); box-shadow:none; }
.page-back { display:flex; align-items:center; gap:.5rem; color:var(--accent); font-size:.9rem; font-weight:600; cursor:pointer; background:none; border:none; padding:.3rem 0; }
.page-back:hover { opacity:.75; }
.page-body { padding-top:76px; min-height:100vh; }

/* TEAM PAGE TABS */
.team-tabs { display:flex; border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:56px; z-index:10; }
.team-tab { flex:1; padding:.9rem .5rem; background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); font-family:'Inter',sans-serif; font-size:.88rem; font-weight:600; cursor:pointer; transition:color .18s, border-color .18s; }
.team-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* TEAM PAGE */
.team-hero { display:flex; flex-direction:column; align-items:center; padding:2.5rem 1.5rem 2rem; background:radial-gradient(ellipse 80% 60% at 50% 0%, #1a1000 0%, var(--bg) 70%); text-align:center; }
.team-flag-lg { width:120px; height:90px; border-radius:12px; object-fit:cover; border:3px solid var(--border); box-shadow:0 8px 32px rgba(0,0,0,.6); margin-bottom:1.2rem; }
.team-name-lg { font-family:'Oswald',sans-serif; font-size:2.2rem; font-weight:700; line-height:1.1; margin-bottom:.6rem; }
.team-badges { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-bottom:.5rem; }
.team-host-badge { background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.35); color:var(--green); padding:.3rem .9rem; border-radius:20px; font-size:.75rem; font-weight:700; letter-spacing:.5px; }
.page-section { padding:1.5rem 1.2rem; border-top:1px solid var(--border); }
.page-section-title { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:2px; font-weight:700; margin-bottom:1rem; }
.stat-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.stat-grid-2 .full { grid-column:1/-1; }
.stat-box { background:var(--bg2); border-radius:10px; padding:1rem; }
.stat-box-label { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:.35rem; }
.stat-box-val { font-weight:600; font-size:.92rem; line-height:1.4; }
.stat-box-val.gold { color:var(--accent); }
.fact-text { font-size:.87rem; line-height:1.6; color:var(--text); }

/* TEAM SCHEDULE (host teams) */
.team-sched-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:.9rem 1rem; margin-bottom:.6rem; }
.sched-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.55rem; }
.sched-card-phase { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.sched-card-phase.group { color:var(--blue); }
.sched-card-phase.knockout { color:var(--accent); }
.sched-card-date { font-size:.65rem; color:var(--muted); }
.sched-card-matchup { display:flex; align-items:center; gap:.5rem; }
.sched-card-flag { width:28px; height:21px; border-radius:3px; object-fit:cover; border:1px solid rgba(255,255,255,.15); flex-shrink:0; }
.sched-card-vs { font-size:.7rem; color:var(--muted); font-weight:600; flex-shrink:0; }
.sched-card-opp { font-size:.88rem; font-weight:500; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-card-time { font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:700; color:var(--accent); flex-shrink:0; }
.sched-card-venue { font-size:.65rem; color:var(--muted); margin-top:.4rem; }

/* HOST PAGE */
.host-hero { display:flex; align-items:center; gap:1.2rem; padding:2rem 1.2rem 1.5rem; background:radial-gradient(ellipse 80% 60% at 50% 0%, #1a1000 0%, var(--bg) 70%); }
.host-flag-lg { width:90px; height:68px; border-radius:10px; object-fit:cover; border:2.5px solid rgba(245,197,24,.5); flex-shrink:0; box-shadow:0 6px 24px rgba(0,0,0,.5); }
.host-hero-meta { flex:1; min-width:0; }
.host-hero-name { font-family:'Oswald',sans-serif; font-size:1.9rem; font-weight:700; line-height:1; }
.host-hero-tag { display:inline-flex; align-items:center; gap:.4rem; background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.3); color:var(--accent); font-size:.75rem; font-weight:600; padding:.25rem .7rem; border-radius:20px; margin-top:.5rem; }
.host-hero-cities { color:var(--muted); font-size:.75rem; margin-top:.4rem; }
.phase-divider { display:flex; align-items:center; gap:.7rem; margin:1.5rem 1.2rem .8rem; font-size:.65rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:2px; white-space:nowrap; }
.phase-divider::before, .phase-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.host-game-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; margin:0 1.2rem .55rem; padding:.8rem 1rem; }
.host-game-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.host-game-round { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:.18rem .55rem; border-radius:4px; }
.host-game-round.group { background:rgba(52,152,219,.15); color:var(--blue); border:1px solid rgba(52,152,219,.3); }
.host-game-round.knockout { background:rgba(245,197,24,.12); color:var(--accent); border:1px solid rgba(245,197,24,.3); }
.host-game-date { font-size:.65rem; color:var(--muted); }
.host-game-matchup { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; }
.hg-team { display:flex; align-items:center; gap:.5rem; }
.hg-team.right { flex-direction:row-reverse; }
.hg-flag { width:30px; height:22px; border-radius:3px; object-fit:cover; border:1px solid rgba(255,255,255,.15); flex-shrink:0; }
.hg-flag-ph { width:30px; height:22px; border-radius:3px; background:var(--border); flex-shrink:0; }
.hg-name { font-size:.82rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px; }
.hg-vs { background:var(--border); color:var(--muted); font-size:.6rem; font-weight:700; padding:.2rem .4rem; border-radius:4px; text-align:center; flex-shrink:0; }
.host-game-meta { display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; }
.host-game-venue { font-size:.63rem; color:var(--muted); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.host-game-time { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:700; color:var(--accent); flex-shrink:0; margin-left:.5rem; }

/* BOTTOM NAV (React app only) */
.bottom-nav { position:fixed; top:auto; bottom:0; left:0; right:0; z-index:200; display:flex; background:rgba(10,10,10,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom); }
.bottom-nav-tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.55rem .25rem; color:var(--muted); text-decoration:none; transition:color .15s; gap:.2rem; -webkit-tap-highlight-color:transparent; }
.bottom-nav-tab.active { color:var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .bottom-nav-tab:hover { color:var(--text); }
}
.bottom-nav-icon { font-size:1.25rem; line-height:1; width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.bottom-nav-label { font-family:'Inter',sans-serif; font-size:.62rem; font-weight:500; letter-spacing:.3px; }
/* Adjust page-body padding for fixed top + bottom nav */
.page-body { padding-top:calc(76px + env(safe-area-inset-top)); padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
/* iOS overrides */
.ios .bottom-nav { bottom:0; min-height:unset; height:calc(56px + env(safe-area-inset-bottom)); box-sizing:border-box; padding-bottom:8px; backdrop-filter:none; -webkit-backdrop-filter:none; }
.standalone.ios .bottom-nav { padding-bottom:48px; }
.ios .bottom-nav::after { display:none; }
.ios .bottom-nav-tab { padding:.25rem .25rem; transition:none; }
.ios .bottom-nav-icon { width:26px; height:26px; }
.ios .bottom-nav-icon svg { width:26px; height:26px; }

/* GROUP SELECTOR (Dashboard / AI Feed) */
.group-selector { background:var(--bg2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'Inter',sans-serif; font-size:1rem; padding:.5rem .9rem; cursor:pointer; outline:none; }
.group-selector:focus { border-color:var(--accent); }

/* PAGE NAV + BACK BUTTON */
.page-nav { padding:.85rem 1.2rem; padding-top:calc(.85rem + env(safe-area-inset-top)); }
.nav-spacer { width:72px; }
.page-back { background:none; border:none; color:var(--muted); font-size:.88rem; cursor:pointer; padding:.35rem .6rem; border-radius:6px; font-family:'Inter',sans-serif; transition:color .15s,background .15s; }
.page-back:hover { color:var(--text); background:rgba(255,255,255,.06); }
.page-nav-signout { background:none; border:1px solid var(--border); color:var(--muted); font-size:.72rem; cursor:pointer; padding:.3rem .75rem; min-height:40px; border-radius:6px; font-family:'Inter',sans-serif; transition:all .15s; white-space:nowrap; }
.page-nav-signout:hover { border-color:var(--accent); color:var(--accent); }
.btn-nav-sm { font-size:.72rem; padding:.3rem .75rem; min-height:40px; border-radius:6px; font-weight:600; white-space:nowrap; }
.nav-home-link { font-size:1.1rem; min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center; border-radius:6px; transition:background .15s; }
.nav-home-link:hover { background:rgba(255,255,255,.06); }
.dash-nav-right { display:flex; align-items:center; gap:.25rem; }
@media(max-width:768px) { .dash-nav-right .nav-home-link { display:none; } }

/* DASHBOARD — HERO */
.dash-hero { background:radial-gradient(ellipse 160% 140% at 40% 0%, #1f0e00 0%, #0f0800 40%, var(--bg) 72%); padding:1.2rem 1.4rem; border-bottom:1px solid var(--border); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.5rem; margin-top:-4px; }
.dash-hero-progress { display:flex; flex-direction:column; gap:.25rem; padding-top:.5rem; border-top:1px solid rgba(255,255,255,.06); margin-top:.1rem; }
.dash-progress-track { width:100%; height:3px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.dash-progress-fill { height:100%; background:var(--accent); border-radius:2px; }
.dash-progress-row1 { display:flex; justify-content:space-between; align-items:center; }
.dash-progress-row2 { display:flex; justify-content:space-between; align-items:center; }
.dash-progress-label { font-family:'Inter',sans-serif; font-size:.72rem; font-weight:500; color:var(--muted); }
.dash-progress-sep { color:var(--border); font-size:.8rem; }
.dash-progress-final { font-family:'Oswald',sans-serif; font-size:.82rem; font-weight:700; color:rgba(245,197,24,.85); letter-spacing:.5px; white-space:nowrap; }
.dash-progress-date { font-family:'Inter',sans-serif; font-size:.72rem; font-weight:500; color:var(--muted); white-space:nowrap; }
.dash-progress-clock { font-family:'Oswald',sans-serif; font-size:.82rem; font-weight:700; color:var(--accent); letter-spacing:.5px; white-space:nowrap; }
.dash-hero::before { display:none; }
/* DASHBOARD — 3-COL BODY LAYOUT */
.dash-layout { display:grid; grid-template-columns:1fr; }
/* Mobile stacking order: Stats → Games → Leaderboard */
.dash-col-left   { min-width:0; order:2; }
.dash-col-center { min-width:0; order:0; }
.dash-col-right  { padding:0 1.2rem 1.2rem; order:1; }
/* left controls row — buttons stack full-width */
.dash-left-controls { display:flex; flex-direction:column; gap:.5rem; padding:.85rem 1.2rem 0; }
.dash-left-controls .btn { width:100%; justify-content:center; }
/* Group cards — horizontal snap scroll on mobile */
.dash-group-cards { display:flex; flex-direction:column; gap:.75rem; padding:0 0 .5rem; }
.dash-group-cards::-webkit-scrollbar { display:none; }
.dash-group-card { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius); padding:.85rem 1rem; scroll-snap-align:start; flex-shrink:0; min-width:240px; flex:1; }
.dash-gc-rpc-error { font-size:.7rem; color:var(--red); margin-bottom:.4rem; }
.dash-gc-name { font-family:'Oswald',sans-serif; font-size:.9rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--accent); margin-bottom:.6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-gc-ranks { display:flex; align-items:center; gap:.5rem; }
.dash-gc-rank-item { display:flex; flex-direction:column; align-items:center; flex:1; gap:.15rem; }
.dash-gc-rank-val { font-family:'Oswald',sans-serif; font-size:1.6rem; font-weight:700; color:var(--accent); line-height:1; }
.dash-gc-rank-label { font-family:'Inter',sans-serif; font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.dash-gc-divider { width:1px; height:2.2rem; background:var(--border); flex-shrink:0; }
.dash-gc-divider-h { height:1px; background:var(--border); margin:.65rem 0; }
.dash-lb-empty-hint { font-family:'Inter',sans-serif; font-size:.8rem; color:var(--muted); padding:0 1.5rem 1.5rem; margin:0; }
.dash-countdown-row { display:flex; align-items:center; gap:1rem; }
.dash-trophy-img { width:60px; height:60px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(245,197,24,.5)); flex-shrink:0; }
.dash-cd-block { display:flex; align-items:baseline; gap:.5rem; }
.dash-cd-days { font-family:'Oswald',sans-serif; font-size:5rem; font-weight:700; color:var(--accent); line-height:1; text-shadow:0 0 40px rgba(245,197,24,.4), 0 0 80px rgba(245,197,24,.12); }
.dash-cd-right { display:flex; flex-direction:column; gap:.05rem; }
.dash-cd-time { font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:600; color:var(--accent); line-height:1; letter-spacing:1px; }
.dash-cd-label { font-family:'Oswald',sans-serif; font-size:.6rem; font-weight:400; color:var(--muted); text-transform:uppercase; letter-spacing:2.5px; }
.dash-greeting { font-family:'Oswald',sans-serif; font-size:1.35rem; font-weight:400; color:var(--muted); margin:0; }
.dash-greeting-name { color:var(--text); font-weight:700; }
.dash-rank-badge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.3); color:var(--accent); font-family:'Inter',sans-serif; font-size:.78rem; font-weight:600; padding:.3rem .9rem; border-radius:50px; align-self:flex-start; }
/* RIGHT — stats card */
.dash-stats-card { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.dash-stats-header { font-family:'Oswald',sans-serif; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--accent); margin-bottom:.75rem; }
.dash-stats-rows { display:flex; flex-direction:column; gap:.5rem; }
.dash-stats-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.dash-stats-label { font-family:'Inter',sans-serif; font-size:.75rem; color:var(--muted); flex-shrink:0; width:5.5rem; text-align:right; }
.dash-stats-val { font-family:'Inter',sans-serif; font-size:.8rem; font-weight:600; color:var(--text); }
.dash-stats-empty { color:var(--muted); font-weight:400; }
.dash-stats-pick { display:flex; align-items:center; gap:.4rem; }
.dash-stats-flag { width:22px; height:16px; border-radius:2px; object-fit:cover; border:1px solid rgba(255,255,255,.15); }
.dash-stats-cta { background:none; border:1px solid rgba(245,197,24,.3); color:var(--accent); font-family:'Inter',sans-serif; font-size:.72rem; padding:.2rem .6rem; border-radius:4px; cursor:pointer; }
.dash-stats-divider { height:1px; background:var(--border); margin:.6rem 0; }
/* Group rank rows */
.dash-group-ranks { margin-bottom:.2rem; }
.dash-group-ranks-head { display:grid; grid-template-columns:1fr auto auto; gap:.5rem; padding:.2rem 0 .3rem; font-family:'Inter',sans-serif; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); border-bottom:1px solid var(--border); margin-bottom:.3rem; }
.dash-group-ranks-head span:not(:first-child) { text-align:center; min-width:36px; }
.dash-group-rank-row { display:grid; grid-template-columns:1fr auto auto; gap:.5rem; align-items:center; padding:.3rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.dash-group-rank-row:last-child { border-bottom:none; }
.dash-gr-name { font-family:'Inter',sans-serif; font-size:.78rem; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-gr-val { font-family:'Oswald',sans-serif; font-size:.9rem; font-weight:700; color:var(--accent); text-align:center; min-width:36px; }
/* W/D/L inline outcome row */
.dash-wdl-inline { display:flex; align-items:center; gap:.25rem; font-family:'Oswald',sans-serif; font-weight:600; font-size:.95rem; }
.dash-wdl-w { color:var(--green); }
.dash-wdl-d { color:var(--muted); }
.dash-wdl-l { color:var(--red); }
.dash-wdl-sep { color:var(--border); font-size:.8rem; }

.dash-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; margin-top:.1rem; }
.dash-metric { display:flex; flex-direction:column; align-items:center; gap:.2rem; background:rgba(245,197,24,.05); border:1px solid rgba(245,197,24,.1); border-radius:8px; padding:.5rem .25rem; }
.dash-metric-val { font-family:'Oswald',sans-serif; font-size:1.2rem; font-weight:700; color:var(--accent); line-height:1; }
.dash-metric-label { font-family:'Inter',sans-serif; font-size:.6rem; color:var(--muted); text-align:center; }

/* DASHBOARD — ERROR */
.dash-error { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:1rem 1.2rem 0; background:rgba(231,76,60,.08); border:1px solid rgba(231,76,60,.25); border-radius:var(--radius); padding:.75rem 1rem; font-size:.84rem; color:var(--red); }
.dash-error button { background:none; border:1px solid rgba(231,76,60,.3); color:var(--red); font-family:'Inter',sans-serif; font-size:.78rem; padding:.25rem .6rem; border-radius:6px; cursor:pointer; }

/* DASHBOARD — CONTROLS */
.dash-controls { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.85rem 1.2rem; border-bottom:1px solid var(--border); }
.dash-toggle { display:flex; background:var(--bg2); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.dash-toggle-btn { background:none; border:none; color:var(--muted); font-family:'Inter',sans-serif; font-size:.82rem; font-weight:500; padding:.6rem 1.1rem; min-height:44px; cursor:pointer; transition:all .15s; }
.dash-toggle-btn.active { background:var(--accent); color:#000; font-weight:600; }
.dash-toggle-btn:disabled { opacity:.35; cursor:default; }

.dash-section { padding:1.2rem 1.2rem 0; }
.dash-section-label { font-family:'Inter',sans-serif; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--accent); margin:0 0 .9rem; display:flex; align-items:center; gap:.5rem; }
.dash-section-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(245,197,24,.2) 0%, transparent 100%); }

/* LEADERBOARD */
.lb-table { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem; }
.lb-row { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem 1rem; transition:border-color .15s; }
.lb-row--me { background:rgba(245,197,24,.07); border-color:rgba(245,197,24,.35); }
.lb-row-top { display:flex; align-items:center; gap:.75rem; }
.lb-rank { font-family:'Oswald',sans-serif; font-size:1rem; font-weight:700; min-width:1.8rem; flex-shrink:0; }
.lb-name { flex:1; font-family:'Inter',sans-serif; font-size:.88rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-champ-flag { width:24px; height:18px; border-radius:2px; object-fit:cover; border:1px solid rgba(255,255,255,.15); flex-shrink:0; }
.lb-pts { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:700; color:var(--accent); flex-shrink:0; }
.lb-pts-label { font-family:'Inter',sans-serif; font-size:.62rem; font-weight:400; color:var(--muted); }
.lb-team-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.55rem; padding-top:.55rem; border-top:1px solid var(--border); }
.lb-team-name { font-family:'Inter',sans-serif; font-size:.75rem; font-weight:600; color:var(--text); flex-shrink:0; }
.lb-stats-pills { display:flex; gap:.3rem; flex-wrap:wrap; }
.lb-stat-pill { font-family:'Inter',sans-serif; font-size:.68rem; color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:4px; padding:.12rem .45rem; white-space:nowrap; }
.lb-stat-pill.lb-stat-green { color:var(--green); border-color:rgba(46,204,113,.25); }
.lb-stat-pill.lb-stat-gold  { color:var(--accent); border-color:rgba(245,197,24,.25); }
.lb-stat-pill.lb-stat-fire  { color:#ff7043; border-color:rgba(255,112,67,.25); }
.lb-stat-pill.lb-stat-muted { color:var(--muted); font-style:italic; }
.lb-show-more { display:block; width:100%; padding:.55rem; margin-top:.35rem; background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--muted); font-family:'Inter',sans-serif; font-size:.78rem; cursor:pointer; text-align:center; transition:color .15s,border-color .15s; }
.lb-show-more:hover { color:var(--text); border-color:var(--accent); }

/* NEXT GAME DAY */
.today-games { display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.4rem; }
.today-game-card { width:100%; text-align:left; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .15s; }
.today-game-card:hover { border-color:rgba(245,197,24,.4); }
.tg-card-main { padding:.9rem 1rem; cursor:pointer; }
.tg-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; }
.tg-team { display:flex; align-items:center; gap:.5rem; min-width:0; }
.tg-team--right { flex-direction:row-reverse; }
.tg-flag { width:28px; height:21px; border-radius:3px; object-fit:cover; border:1px solid rgba(255,255,255,.12); flex-shrink:0; }
.tg-name { font-family:'Inter',sans-serif; font-size:.82rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tg-vs-col { display:flex; flex-direction:column; align-items:center; gap:.1rem; flex-shrink:0; }
.tg-kickoff { font-family:'Oswald',sans-serif; font-size:.95rem; font-weight:700; color:var(--accent); }
.tg-live-badge { font-family:'Oswald',sans-serif; font-size:.85rem; font-weight:700; color:#fff; background:#e00; border-radius:4px; padding:.1rem .35rem; animation:livePulse 1.2s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.tg-vs { font-family:'Inter',sans-serif; font-size:.58rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.tg-score { font-family:'Oswald',sans-serif; font-size:1.3rem; font-weight:700; color:var(--text); text-align:center; flex-shrink:0; }
.tg-score-col { display:flex; flex-direction:column; align-items:center; gap:.1rem; flex-shrink:0; }
.tg-score-extra { font-size:.6rem; color:var(--muted); text-align:center; white-space:nowrap; }
.tg-venue { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.55rem; flex-wrap:wrap; }
.tg-venue-round { font-family:'Inter',sans-serif; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent); }
.tg-venue-info { font-family:'Inter',sans-serif; font-size:.65rem; color:var(--muted); }
.tg-pred { font-family:'Inter',sans-serif; font-size:.75rem; color:var(--muted); margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--border); text-align:center; }
.tg-pred--cta { color:var(--accent); }
.tg-group-preds { display:flex; gap:.45rem; flex-wrap:wrap; justify-content:center; padding:.55rem .9rem .7rem; border-top:1px solid var(--border); }
.tg-group-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .65rem; border-radius:20px; border:1.5px solid var(--border); background:var(--bg3); cursor:pointer; font-family:'Inter',sans-serif; font-size:.78rem; min-height:34px; transition:border-color .15s, background .15s; white-space:nowrap; }
.tg-group-chip:hover { border-color:rgba(245,197,24,.35); background:var(--bg2); }
.tg-group-chip--predicted { border-color:var(--accent); background:rgba(245,197,24,.06); }
.tg-chip-group { color:var(--muted); font-weight:500; }
.tg-chip-score { color:var(--accent); font-family:'Oswald',sans-serif; font-weight:600; font-size:.85rem; }
.tg-chip-cta { color:var(--muted); font-size:.8rem; }

/* EMPTY / SKELETON */
.dash-empty { display:flex; flex-direction:column; align-items:center; gap:.85rem; text-align:center; padding:2.5rem 1.4rem 2rem; margin-bottom:1rem; background:radial-gradient(ellipse 100% 80% at 50% 0%, rgba(245,197,24,.05) 0%, transparent 70%); border:1px solid rgba(245,197,24,.1); border-radius:var(--radius); }
.dash-empty-icon { font-size:2.8rem; filter:grayscale(.3); }
.dash-empty-title { font-family:'Oswald',sans-serif; font-size:1.3rem; font-weight:600; margin:0; }
.dash-empty-sub { font-family:'Inter',sans-serif; font-size:.84rem; color:var(--muted); max-width:260px; line-height:1.5; margin:0; }
.dash-skeletons { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem; }
.dash-skeleton { height:58px; background:linear-gradient(90deg, var(--bg2) 25%, rgba(255,255,255,.04) 50%, var(--bg2) 75%); background-size:200% 100%; border-radius:var(--radius); border:1px solid var(--border); animation:shimmer 1.4s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* DASHBOARD — DESKTOP */
@media(min-width:769px) {
  .page-body { max-width:860px; margin:0 auto; }
  /* Hero: compact single row */
  .dash-hero { flex-direction:row; align-items:center; justify-content:space-between; padding:1rem 2rem; gap:1.5rem; margin:0 1.5rem; flex-wrap:wrap; }
  .dash-hero-progress { flex-direction:row; align-items:center; gap:.75rem; padding-top:.6rem; margin-top:0; }
  .dash-progress-track { flex:0 0 140px; width:auto; order:0; }
  .dash-progress-row1 { display:contents; }
  .dash-progress-row2 { display:contents; }
  .dash-progress-label { order:1; }
  .dash-progress-final { order:2; }
  .dash-progress-date  { order:3; }
  .dash-progress-clock { order:4; }
  .dash-trophy-img { width:52px; height:52px; }
  .dash-cd-days { font-size:4rem; }
  .dash-cd-time { font-size:1.4rem; }
  .dash-greeting { font-size:1.3rem; margin:0; }
  .dash-rank-badge { align-self:auto; }
  /* stacked single-column layout: Games → My Stats → Leaderboard */
  .dash-layout { grid-template-columns:1fr; }
  .dash-col-center { order:0; padding-top:1.5rem; }
  .dash-col-right  { order:1; padding:0 1.5rem 1.5rem; }
  .dash-col-left   { order:2; }
  /* group cards row on desktop */
  .dash-group-cards { flex-direction:row; overflow-x:auto; padding:.5rem 0 .75rem; gap:1rem; }
  .dash-group-card { min-width:220px; flex:1; }
  /* stats rows full-width on desktop */
  .dash-stats-rows { width:100%; margin:0; }
  .dash-stats-row { justify-content:space-between; }
  .dash-left-controls { padding:.75rem 1.5rem 0; flex-direction:row; gap:.5rem; }
  .dash-left-controls .btn { flex:1; }
  .dash-section { padding:0 1.5rem 1rem; }
  .lb-row { padding:.75rem 1rem; }
  .today-game-card { padding:1rem; }
  .dash-empty { padding:2rem 1.5rem; }
  .dash-empty-icon { font-size:2.5rem; }
  .dash-empty-title { font-size:1.2rem; }
  .dash-stats-label-pad { padding:.75rem 0 .5rem; }
  .dash-gc-skeleton { padding:0 0 .75rem; }
  /* Side decorative text panels */
  .side-deco {
    position:fixed;
    top:0;
    bottom:0;
    width:max(0px, calc(50vw - 430px));
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    z-index:0;
    overflow:visible;
  }
  .side-deco-left  {
    left:0;
    background:
      radial-gradient(ellipse 160% 50% at 100% 15%, rgba(245,197,24,.22) 0%, rgba(245,197,24,.07) 40%, transparent 70%),
      radial-gradient(ellipse 100% 25% at 90% 8%, rgba(255,220,80,.14) 0%, transparent 55%);
  }
  .side-deco-right {
    right:0;
    background:
      radial-gradient(ellipse 160% 50% at 0% 15%, rgba(245,197,24,.22) 0%, rgba(245,197,24,.07) 40%, transparent 70%),
      radial-gradient(ellipse 100% 25% at 10% 8%, rgba(255,220,80,.14) 0%, transparent 55%);
  }
  .side-deco span {
    display:block;
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem, 2.2vw, 2.4rem);
    color:rgba(245,197,24,.5);
    letter-spacing:.4em;
    white-space:nowrap;
    line-height:1;
  }
  .side-deco-left  span { transform:rotate(-90deg); }
  .side-deco-right span { transform:rotate(90deg); }
}
/* btn-sm — min 44px touch target */
.btn-sm { font-size:.78rem; padding:.45rem .9rem; min-height:44px; }
/* stats label padding via class */
.dash-stats-label-pad { padding:1.2rem 0 .6rem; }
/* group card skeleton */
.dash-gc-skeleton { padding:0 1.2rem 1rem; }
.dash-skeleton--tall { height:180px; border-radius:var(--radius); }
.bottom-nav-icon svg { display:block; width:22px; height:22px; }

/* ═══════════════════════════════════════════════════════════════
   Groups.jsx — Group management page
═══════════════════════════════════════════════════════════════ */

/* btn-xs — small secondary button for card actions (min 44px touch target) */
.btn-xs { font-size:.72rem; padding:.4rem .75rem; min-height:44px; border-radius:6px; font-weight:500; white-space:nowrap; }

/* modal-title — heading inside modals */
.modal-title { font-family:'Oswald',sans-serif; font-size:1.3rem; font-weight:600; color:var(--text); margin:0 0 1.2rem; padding-right:2rem; }
.modal-form  { display:flex; flex-direction:column; gap:.1rem; }
.grp-modal-note { font-size:.72rem; color:var(--muted); text-align:center; margin:.75rem 0 0; }

/* ── Page shell ── */
.grp-page { max-width:640px; margin:0 auto; padding:1.25rem 1rem 5rem; }

/* ── Page header ── */
.grp-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; gap:.75rem; }
.grp-page-title  { font-family:'Oswald',sans-serif; font-size:1.45rem; font-weight:700; color:var(--text); margin:0; }
.grp-header-actions { display:flex; gap:.5rem; flex-shrink:0; }

/* ── Error banner ── */
.grp-error { display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:rgba(231,76,60,.12); border:1px solid rgba(231,76,60,.3); border-radius:var(--radius); padding:.85rem 1rem; margin-bottom:1rem; font-size:.85rem; color:var(--red); }
.grp-error-retry { background:none; border:1px solid var(--red); color:var(--red); border-radius:6px; padding:.4rem .75rem; font-size:.78rem; cursor:pointer; min-height:44px; flex-shrink:0; }

/* ── Loading skeletons ── */
.grp-loading { display:flex; flex-direction:column; gap:.75rem; }

/* ── Empty state ── */
.grp-empty { text-align:center; padding:3rem 1.5rem; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); }
.grp-empty-icon  { font-size:2.5rem; margin-bottom:.75rem; }
.grp-empty-title { font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:600; color:var(--text); margin:0 0 .4rem; }
.grp-empty-sub   { font-size:.85rem; color:var(--muted); margin:0 0 1.4rem; line-height:1.5; max-width:320px; margin-left:auto; margin-right:auto; }
.grp-empty-actions { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* ── Groups list ── */
.grp-list { display:flex; flex-direction:column; gap:.9rem; }

/* ── Group card ── */
.grp-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.grp-card-top   { padding:1rem; display:flex; flex-direction:column; gap:.75rem; }

.grp-card-title-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.grp-card-name  { font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:600; color:var(--text); margin:0; flex:1 1 auto; }
.grp-member-badge { font-family:'Oswald',sans-serif; font-size:.82rem; font-weight:700; color:var(--accent); background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.25); border-radius:20px; padding:.12rem .55rem; white-space:nowrap; flex-shrink:0; }
.grp-member-badge-cap { font-weight:400; color:var(--muted); font-size:.72rem; }
.grp-captain-badge { font-size:.68rem; font-weight:600; background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.25); color:var(--accent); border-radius:20px; padding:.12rem .5rem; white-space:nowrap; flex-shrink:0; }

.grp-invite-row  { display:flex; align-items:center; gap:.5rem; }
.grp-code-label  { font-size:.7rem; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.8px; flex-shrink:0; }
.grp-code-val    { font-family:'Oswald',sans-serif; font-size:.95rem; font-weight:700; color:var(--text); letter-spacing:.12em; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:.15rem .6rem; }

.grp-card-actions { display:flex; gap:.45rem; flex-wrap:wrap; }
.grp-toggle-btn.active { color:var(--accent); border-color:rgba(245,197,24,.4); }

/* ── Members list ── */
.grp-members-list  { border-top:1px solid var(--border); padding:.75rem 1.1rem; display:flex; flex-direction:column; gap:0; }
.grp-members-empty { font-size:.82rem; color:var(--muted); text-align:center; padding:.5rem 0; margin:0; }

.grp-member-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.grp-member-row:last-of-type { border-bottom:none; }
.grp-member-inactive { opacity:.5; }

.grp-member-info  { display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; }
.grp-member-name  { font-size:.88rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grp-member-you   { font-size:.78rem; color:var(--muted); font-weight:400; }
.grp-member-cap   { font-size:.82rem; }
.grp-inactive-tag { font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); background:rgba(255,255,255,.07); border:1px solid var(--border); border-radius:20px; padding:.1rem .45rem; flex-shrink:0; }

/* Captain inactive toggle */
.grp-inactive-btn { background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--muted); flex-shrink:0; }
.grp-inactive-btn:hover { background:rgba(255,255,255,.1); color:var(--text); }
.grp-inactive-btn--on { background:rgba(245,197,24,.08); border-color:rgba(245,197,24,.3); color:var(--accent); }
.grp-inactive-btn--on:hover { background:rgba(245,197,24,.15); }
.grp-inactive-btn--confirm { background:rgba(231,76,60,.12); border-color:rgba(231,76,60,.4); color:var(--red); }

/* Footer notes inside members list */
.grp-inactive-hint { font-size:.72rem; color:var(--muted); line-height:1.4; margin:.75rem 0 0; padding:.6rem .75rem; background:rgba(245,197,24,.04); border:1px solid rgba(245,197,24,.12); border-radius:8px; }
.grp-members-note  { font-size:.7rem; color:var(--muted); line-height:1.4; margin:.6rem 0 0; text-align:center; opacity:.7; }

/* ── Max groups / bottom notes ── */
.grp-max-note { font-size:.78rem; color:var(--muted); text-align:center; margin-top:.75rem; }

/* ── Section inside card ── */
.grp-section { border-top:1px solid var(--border); padding:.75rem 1rem; }
.grp-section-label { font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; font-weight:600; margin-bottom:.6rem; }
.grp-section-skeleton { height:3rem; border-radius:6px; margin:.25rem 0; }
.grp-section-empty { font-size:.82rem; color:var(--muted); margin:.25rem 0 0; }
.grp-game-section { }

/* ── Per-group leaderboard table ── */
.grp-lb { display:flex; flex-direction:column; gap:0; }
/* 5 cols: rank | name | champion flag | top scorer | pts */
.grp-lb-row {
  display:grid;
  grid-template-columns: 2rem 1fr 1.75rem 1fr 2.5rem;
  gap:.5rem;
  align-items:center;
  padding:.4rem .5rem .4rem .25rem;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.grp-lb-row:last-of-type { border-bottom:none; }
.grp-lb-row--me { background:rgba(245,197,24,.06); border-radius:6px; }
.grp-lb-rank  { font-size:.85rem; text-align:center; flex-shrink:0; }
.grp-lb-name  { font-size:.82rem; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grp-lb-champ { display:flex; align-items:center; }
.grp-lb-flag  { width:24px; height:18px; border-radius:2px; object-fit:cover; border:1px solid rgba(255,255,255,.12); }
.grp-lb-dash  { font-size:.78rem; color:var(--muted); }
.grp-lb-scorer { font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grp-lb-pts   { font-family:'Oswald',sans-serif; font-size:.92rem; font-weight:700; color:var(--accent); text-align:right; }
.grp-lb-pts--muted { color:var(--muted); }
.grp-lb-row--pre { opacity:.8; }
.grp-lb-pretournament { font-size:.68rem; color:var(--muted); text-align:center; margin:.5rem 0 0; padding-top:.5rem; border-top:1px solid rgba(255,255,255,.04); }
/* column label row — below data */
.grp-lb-col-labels {
  display:grid;
  grid-template-columns: 2rem 1fr 1.75rem 1fr 2.5rem;
  gap:.5rem;
  padding:.3rem .5rem 0 .25rem;
  font-size:.58rem;
  color:var(--muted);
  opacity:.7;
  border-top:1px solid rgba(255,255,255,.04);
  margin-top:.15rem;
}
.grp-lb-col-labels span:first-child { text-align:center; }
.grp-lb-col-labels span:nth-child(3) { text-align:center; }
.grp-lb-col-labels span:last-child { text-align:right; }

/* ── Next game matchup block ── */
.grp-ng-game { background:var(--bg3); border-radius:10px; padding:.75rem; margin-bottom:.75rem; }
.grp-ng-teams { display:flex; align-items:center; gap:.25rem; }
.grp-ng-team { display:flex; align-items:center; gap:.4rem; flex:1; min-width:0; }
.grp-ng-team--right { flex-direction:row-reverse; }
.grp-ng-flag { width:28px; height:20px; border-radius:3px; object-fit:cover; border:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.grp-ng-name { font-size:.8rem; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grp-ng-center { display:flex; flex-direction:column; align-items:center; gap:.15rem; flex-shrink:0; padding:0 .5rem; }
.grp-ng-vs    { font-family:'Oswald',sans-serif; font-size:.88rem; color:var(--muted); }
.grp-ng-score { font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:700; color:var(--accent); }
.grp-ng-extra { font-size:.58rem; color:var(--muted); text-align:center; white-space:nowrap; }
.grp-ng-time  { font-size:.6rem; color:var(--muted); white-space:nowrap; text-align:center; line-height:1.3; }
.grp-predict-btn { margin-top:0; }
.grp-predict-note { font-size:.65rem; color:var(--muted); text-align:center; margin:.45rem 0 0; opacity:.7; }

/* ── Predictions list (after KO) ── */
.grp-preds-list { display:flex; flex-direction:column; gap:0; margin-bottom:.75rem; }
.grp-pred-row { display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.grp-pred-row:last-child { border-bottom:none; }
.grp-pred-user  { font-size:.82rem; font-weight:500; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grp-auto-badge { font-size:.6rem; font-weight:600; text-transform:uppercase; background:rgba(52,152,219,.12); border:1px solid rgba(52,152,219,.3); color:var(--blue); border-radius:4px; padding:.1rem .4rem; flex-shrink:0; letter-spacing:.3px; }
.grp-pred-score { font-family:'Oswald',sans-serif; font-size:.92rem; font-weight:700; color:var(--text); flex-shrink:0; min-width:2.5rem; text-align:right; }

/* ── W/D/L + goals distribution ── */
.grp-dist { }
.grp-dist-bar { display:flex; height:11px; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.06); margin-bottom:.5rem; min-width:100%; }
.grp-dist-home { background:#999; transition:width .4s; }
.grp-dist-draw { background:var(--accent); transition:width .4s; }
.grp-dist-away { background:var(--text); transition:width .4s; }
.grp-dist-labels { display:flex; justify-content:space-between; gap:.25rem; margin-bottom:.5rem; flex-wrap:wrap; }
.grp-dist-label { font-size:.78rem; color:#bbb; }
.grp-dist-label--home { color:#aaa; }
.grp-dist-label--draw { color:var(--accent); }
.grp-dist-label--away { color:var(--text); }
.grp-dist-section-label { font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.35rem; }
.grp-dist-stats { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:var(--muted); padding-top:.4rem; border-top:1px solid rgba(255,255,255,.05); }
.grp-dist-stats strong { color:var(--text); }
.grp-dist-total { font-size:.75rem; }

/* ── Desktop: wider card layout ── */
@media(min-width:769px) {
  .grp-page { padding:1.5rem 1.5rem 5rem; }
  .grp-card-top { padding:1.25rem 1.5rem; }
  .grp-section { padding:.875rem 1.5rem; }
  .grp-members-list { padding:1rem 1.5rem; }
  .grp-card-name { font-size:1.2rem; }
  .grp-page-title { font-size:1.6rem; }
  .grp-lb-row { grid-template-columns: 2.25rem 1fr 2rem 1.2fr 3rem; gap:.75rem; }
  .grp-lb-col-labels { grid-template-columns: 2.25rem 1fr 2rem 1.2fr 3rem; gap:.75rem; }
  .grp-lb-name  { font-size:.88rem; }
  .grp-lb-scorer { font-size:.78rem; }
  .grp-lb-pts { font-size:1rem; }
}

/* ── Template preview card (empty state) ── */
.grp-card--template { opacity:.75; pointer-events:none; position:relative; }
.grp-template-label { font-size:.68rem; color:var(--muted); text-align:center; padding:.5rem 1rem .25rem; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.06); }
.grp-skeleton-text { background:rgba(255,255,255,.08); border-radius:4px; color:transparent; display:inline-block; }
.grp-tpl-flag { width:28px; height:20px; background:rgba(255,255,255,.1); border-radius:3px; flex-shrink:0; }

/* ── Dual stats block (Group vs Global) ── */
.grp-stats-dual { display:flex; flex-direction:column; gap:.75rem; margin-top:.75rem; }
.grp-stats-block { background:rgba(255,255,255,.03); border-radius:8px; padding:1rem; }
.grp-stats-title { font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }

/* ── Game venue line ── */
.grp-ng-venue { font-size:.65rem; color:var(--muted); margin-top:.2rem; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ── Goals distribution bar ── */
.grp-dist-g01 { background: #999; border-radius: 3px 0 0 3px; height: 100%; }
.grp-dist-g23 { background: var(--accent); height: 100%; }
.grp-dist-g4p { background: var(--text); border-radius: 0 3px 3px 0; height: 100%; }
.grp-dist-label--g01 { color: #aaa; }
.grp-dist-label--g23 { color: var(--accent); }
.grp-dist-label--g4p { color: var(--text); }

/* ── Leaderboard top scorer column ── */
.lb-top-scorer { font-size:.72rem; color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lb-champ-empty { color:var(--muted); font-size:.85rem; flex-shrink:0; }

/* ── Dashboard leaderboard header ── */
.lb-section-header { padding:.75rem 1rem .5rem; border-bottom:1px solid rgba(255,255,255,.07); }
.lb-section-title { font-family:'Oswald',sans-serif; font-size:1rem; font-weight:600; color:var(--accent); letter-spacing:.04em; display:block; margin-bottom:.5rem; }
.lb-col-labels { display:grid; grid-template-columns:2rem 1fr 1.5rem 1fr 3rem; gap:.5rem; font-size:.65rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; padding:0 .25rem; }
.dash-group-select { font-size:.8rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text); border-radius:6px; padding:.3rem .6rem; font-family:'Inter',sans-serif; }

/* ── Leaderboard header (Dashboard) ── */
.lb-header { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem .5rem; }
.lb-header-title { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:600; color:var(--accent); letter-spacing:.04em; }
.lb-header-right { display:flex; align-items:center; gap:.5rem; }
.lb-toggle-btn { font-size:.72rem; font-family:'Inter',sans-serif; background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--muted); border-radius:6px; padding:.3rem .65rem; cursor:pointer; white-space:nowrap; min-height:36px; }
.lb-toggle-btn:hover { border-color:var(--accent); color:var(--accent); }
.lb-col-labels { display:grid; grid-template-columns:2.25rem 1fr 1.75rem 1fr 3rem; gap:.5rem; font-size:.65rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; padding:.25rem 1rem .4rem; border-bottom:1px solid rgba(255,255,255,.06); }

/* ── Global Leaderboard title + columns ── */
.lb-global-title { font-family:'Oswald',sans-serif; font-size:.95rem; font-weight:600; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; text-align:center; border:1px solid rgba(245,197,24,.35); border-radius:8px; padding:.55rem 1.25rem; margin:.5rem 1.2rem .75rem; user-select:none; }
@media(min-width:769px) { .lb-global-title { margin:.5rem 1.5rem .75rem; } }
.lb-col-header { display:grid; grid-template-columns:1.75rem .9fr .75fr 2rem 1.2fr 2.5rem; gap:.4rem; font-size:.62rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; padding:.5rem 1rem .4rem; border-bottom:1px solid rgba(255,255,255,.06); }
.lb-row-top { display:grid; grid-template-columns:1.75rem .9fr .75fr 2rem 1.2fr 2.5rem; gap:.4rem; align-items:center; }
@media(min-width:769px) {
  .lb-col-header { grid-template-columns:1.75rem .9fr .6fr 2.8rem 1.15fr 2.5rem; }
  .lb-row-top    { grid-template-columns:1.75rem .9fr .6fr 2.8rem 1.15fr 2.5rem; }
}
.lb-group-name { font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lb-champ-flag { width:28px; height:20px; border-radius:3px; object-fit:cover; border:1px solid rgba(255,255,255,.15); flex-shrink:0; }

/* ════════════════════════════════════════════════
   GAME PAGE  (src/pages/Game.jsx)
   ════════════════════════════════════════════════ */

.gm-page { max-width:640px; margin:0 auto; padding:1rem 1rem 5rem; }

/* ── Header card ── */
.gm-header { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:.85rem; }
.gm-header-body { padding:1.25rem 1rem 1rem; }

/* Prediction rows — all groups */
.gm-all-group-preds { width:100%; border-top:1px solid var(--border); margin-top:.65rem; }
.gm-pred-group-name { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.1rem; }

/* Prediction row inside header */
.gm-header-pred { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.7rem 1rem .55rem; border-bottom:1px solid rgba(255,255,255,.04); }
.gm-header-pred:last-child { border-bottom:none; }
.gm-all-group-preds + * { border-top:1px solid var(--border); }
.gm-header-pred-main { display:flex; align-items:center; gap:.6rem; }
.gm-header-pred .gm-my-pick-label { flex:unset; }
.gm-header-pred-result { font-size:.78rem; font-weight:600; }
.gm-header-pred-result.gm-my-result--exact { color:var(--accent); }
.gm-header-pred-result.gm-my-result--correct { color:#4caf50; }
.gm-header-pred-result.gm-my-result--miss { color:var(--muted); }
.gm-header-extra { display:flex; justify-content:center; gap:1rem; font-size:.75rem; color:var(--muted); padding:.4rem 1rem 0; }
.gm-header-events { padding:.5rem 1rem .75rem; border-top:1px solid var(--border); margin-top:.5rem; }

/* Teams row */
.gm-header-teams { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.85rem; }
.gm-team { display:flex; flex-direction:column; align-items:center; gap:.45rem; flex:1; min-width:0; }
.gm-team--right { }
.gm-flag { width:56px; height:40px; border-radius:5px; object-fit:cover; border:1px solid rgba(255,255,255,.14); flex-shrink:0; }
.gm-flag-ph { width:56px; height:40px; border-radius:5px; background:rgba(255,255,255,.08); flex-shrink:0; }
.gm-team-name { font-size:.78rem; font-weight:600; color:var(--text); text-align:center; line-height:1.2; max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Center col */
.gm-center { display:flex; flex-direction:column; align-items:center; gap:.2rem; flex-shrink:0; padding:0 .35rem; }
.gm-center-vs    { font-family:'Oswald',sans-serif; font-size:1.05rem; color:var(--muted); }
.gm-center-live  { font-family:'Oswald',sans-serif; font-size:.85rem; font-weight:700; color:var(--green); letter-spacing:.08em; }
.gm-score-display { font-family:'Oswald',sans-serif; font-size:1.9rem; font-weight:700; color:var(--accent); letter-spacing:.04em; line-height:1; }
.gm-center-label  { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* Events timeline (goals + red cards) */
.gm-events { padding:.4rem 0 .1rem; }
.gm-event-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.35rem; padding:.18rem .25rem; font-size:.72rem; line-height:1.3; }
.gm-event-home { text-align:right; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-event-icon { font-size:.8rem; text-align:center; flex-shrink:0; }
.gm-event-away { text-align:left; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Meta row */
.gm-meta { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; justify-content:center; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.06); }
.gm-phase-tag { font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; background:rgba(52,152,219,.1); border:1px solid rgba(52,152,219,.2); color:var(--blue); border-radius:20px; padding:.2rem .6rem; flex-shrink:0; }
.gm-phase-tag--ko { background:rgba(245,197,24,.1); border-color:rgba(245,197,24,.2); color:var(--accent); }
.gm-meta-sep  { font-size:.7rem; color:rgba(255,255,255,.2); flex-shrink:0; }
.gm-meta-text { font-size:.65rem; color:var(--muted); }
.gm-meta-date { font-size:.63rem; color:var(--muted); width:100%; text-align:center; margin-top:.2rem; }

/* ── Section cards ── */
.gm-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:.85rem; }
.gm-section-head { padding:.7rem 1rem .55rem; border-bottom:1px solid rgba(255,255,255,.06); }
.gm-section-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); display:flex; align-items:center; gap:.5rem; }
.gm-pred-form-group { color:var(--accent); font-size:.65rem; letter-spacing:.04em; }
.gm-section-body { padding:.85rem 1rem; }

/* ── Result (finished) ── */
.gm-result { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.9rem 1rem .75rem; }
.gm-result-label { font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.gm-result-score { font-family:'Oswald',sans-serif; font-size:2.8rem; font-weight:700; color:var(--text); letter-spacing:.04em; line-height:1.1; }
.gm-result-extra { display:flex; align-items:center; gap:.5rem; margin-top:.15rem; }
.gm-result-extra-label { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.gm-result-extra-score { font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:600; color:var(--muted); }
.gm-my-result { display:flex; align-items:center; gap:.65rem; padding:.6rem 1rem; background:rgba(255,255,255,.025); border-top:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }
.gm-my-result--exact   .gm-my-result-pick,
.gm-my-result--exact   .gm-my-result-text { color:var(--accent); }
.gm-my-result--correct .gm-my-result-pick,
.gm-my-result--correct .gm-my-result-text { color:var(--green); }
.gm-my-result--miss    .gm-my-result-text { color:var(--muted); }
.gm-my-result-pick { font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:700; }
.gm-my-result-text { font-size:.8rem; flex:1; }

/* ── Prediction entry ── */
.gm-predict-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.gm-predict-team { font-size:.72rem; color:var(--muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.gm-predict-inputs { display:flex; align-items:center; gap:.45rem; flex-shrink:0; }
.gm-input { width:2.6rem; height:2.6rem; background:var(--bg3); border:1.5px solid var(--border); border-radius:9px; color:var(--text); font-family:'Oswald',sans-serif; font-size:1.3rem; font-weight:700; text-align:center; -moz-appearance:textfield; appearance:textfield; transition:border-color .15s; }
.gm-input::-webkit-outer-spin-button, .gm-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.gm-input:focus { border-color:var(--accent); outline:none; }
.gm-input-sep { font-family:'Oswald',sans-serif; font-size:1.4rem; color:var(--muted); flex-shrink:0; user-select:none; }
.gm-predict-actions { display:flex; gap:.5rem; }
.gm-predict-actions .btn-outline { flex-shrink:0; }
.gm-pick-box { width:3.2rem; height:3.2rem; background:var(--bg3); border:1.5px solid var(--border); border-radius:9px; font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:700; color:var(--accent); display:flex; align-items:center; justify-content:center; }
.gm-my-pick { display:flex; align-items:center; gap:.6rem; padding:.45rem 0; flex-wrap:wrap; }
.gm-my-pick-score { font-family:'Oswald',sans-serif; font-size:1.55rem; font-weight:700; color:var(--text); }
.gm-my-pick-label { font-size:.78rem; color:var(--muted); flex:1; }
.gm-locked-msg { font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.gm-reveal-msg { font-size:.78rem; color:var(--muted); text-align:center; padding:.5rem 0; margin:0; }

/* ── Odds ── */
.gm-odds { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.75rem; }
.gm-odds-ou { display:grid; grid-template-columns:1fr 2fr 2fr 1fr; gap:.75rem; margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--border); }
.gm-odds-item { text-align:center; }
.gm-odds-label { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.35rem; }
.gm-odds-val { font-family:'Oswald',sans-serif; font-size:1.55rem; font-weight:600; color:var(--text); }
.gm-odds-val--home { color:var(--green); }
.gm-odds-val--draw { color:var(--muted); }
.gm-odds-val--away { color:var(--blue); }

/* ── Team stats ── */
.gm-stats-cols { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.gm-stats-col { }
.gm-stats-col-title { font-size:.68rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; display:flex; align-items:center; gap:.3rem; }
.gm-stat-row { display:flex; justify-content:space-between; align-items:center; padding:.32rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.76rem; }
.gm-stat-row:last-child { border-bottom:none; }
.gm-stat-label { color:var(--muted); }
.gm-stat-val { font-family:'Oswald',sans-serif; font-size:.88rem; font-weight:600; color:var(--text); }
.gm-no-stats { text-align:center; padding:.85rem .5rem; font-size:.82rem; color:var(--muted); margin:0; }
.gm-gstat-head { display:flex; justify-content:space-between; align-items:center; padding:.2rem 0 .5rem; font-size:.68rem; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.gm-gstat-row { display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:center; padding:.3rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.78rem; }
.gm-gstat-row:last-child { border-bottom:none; }
.gm-gstat-label { color:var(--muted); font-size:.7rem; text-align:center; }
.gm-gstat-val { font-family:'Oswald',sans-serif; font-size:.86rem; font-weight:600; color:var(--text); }
.gm-form { display:flex; flex-wrap:wrap; gap:.2rem; }
.gm-gstat-val--right .gm-form { justify-content:flex-end; }
.gm-form-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.2rem; height:1.2rem; padding:0 .25rem; border-radius:3px; font-size:.62rem; font-weight:700; font-family:'Inter',sans-serif; }
.gm-form-badge--w, .gm-form-badge--wet, .gm-form-badge--wp { background:#1a7a3a; color:#fff; }
.gm-form-badge--l, .gm-form-badge--let, .gm-form-badge--lp { background:#a01c1c; color:#fff; }
.gm-form-badge--d { background:#555; color:#fff; }
.gm-gstat-val--right { text-align:right; }
.gm-gstat-name { font-size:.74rem; font-weight:400; color:var(--text); line-height:1.35; }
.gm-gstat-name--right { text-align:right; }

/* ── Predictions list (post-KO) ── */
.gm-preds-list { display:flex; flex-direction:column; gap:0; margin-bottom:.75rem; }
.gm-pred-row { display:flex; align-items:center; gap:.5rem; padding:.42rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.gm-pred-row:last-child { border-bottom:none; }
.gm-pred-row--me { background:rgba(245,197,24,.06); border-radius:5px; padding:.42rem .4rem; }
.gm-pred-user { font-size:.82rem; font-weight:500; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-pred-score { font-family:'Oswald',sans-serif; font-size:.92rem; font-weight:700; color:var(--text); flex-shrink:0; min-width:2.5rem; text-align:right; }
.gm-pred-exact  { font-size:.8rem; flex-shrink:0; color:var(--accent); }
.gm-pred-correct { font-size:.8rem; flex-shrink:0; color:var(--green); }

/* ── Distribution stats row ── */
.gm-dist-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; margin-top:.65rem; padding-top:.5rem; border-top:1px solid rgba(255,255,255,.05); }
.gm-dist-stat { text-align:center; }
.gm-dist-stat-label { font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.2rem; }
.gm-dist-stat-val { font-family:'Oswald',sans-serif; font-size:1rem; font-weight:600; color:var(--text); }

/* ── Desktop tweaks ── */
@media(min-width:769px) {
  .gm-page { padding:1.5rem 1.5rem 5rem; }
  .gm-header-body { padding:1.5rem 1.5rem 1.1rem; }
  .gm-section-body { padding:1rem 1.5rem; }
  .gm-section-head { padding:.75rem 1.5rem .6rem; }
  .gm-flag  { width:64px; height:46px; }
  .gm-flag-ph { width:64px; height:46px; }
  .gm-team-name { font-size:.85rem; max-width:120px; }
  .gm-score-display { font-size:2.4rem; }
  .gm-result-score { font-size:3.5rem; }
  .gm-my-result { padding:.7rem 1.5rem; }
  .gm-pred-form { max-width:380px; margin-left:auto; margin-right:auto; }
}

/* ═══════════════════════════════════════════════════════════════
   Picks.jsx — Champion + Top Scorer picks
═══════════════════════════════════════════════════════════════ */

.pk-page { padding:1rem 1rem 1.5rem; max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }

/* Group selector tabs */
.pk-group-tabs { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.pk-group-tabs::-webkit-scrollbar { display:none; }
.pk-pills-wrap { position:relative; display:flex; align-items:center; gap:0; }
.pk-pills-wrap .pk-group-tabs { flex:1; min-width:0; }
.pk-pills-arrow { display:none; background:none; border:none; color:var(--muted); font-size:.85rem; line-height:1; cursor:pointer; padding:.1rem .3rem; border-radius:4px; flex-shrink:0; transition:color .15s; }
.pk-pills-arrow:hover { color:var(--accent); }
@media(min-width:769px) { .pk-pills-arrow { display:flex; align-items:center; } }
.pk-group-tab { flex-shrink:0; padding:.45rem .9rem; border-radius:20px; border:1.5px solid var(--border); background:var(--bg2); color:var(--muted); font-family:'Inter',sans-serif; font-size:.82rem; font-weight:600; cursor:pointer; transition:color .15s, border-color .15s, background .15s; white-space:nowrap; min-height:36px; }
.pk-group-tab:hover { border-color:rgba(245,197,24,.35); color:var(--text); }
.pk-group-tab--active { border-color:var(--accent); background:rgba(245,197,24,.08); color:var(--accent); }

/* Group tab skeleton */
.pk-skeleton-tabs { display:flex; gap:.5rem; }
.pk-skeleton-tab { height:36px; width:96px; background:var(--bg3); border-radius:20px; animation:pk-pulse 1.4s ease-in-out infinite; }

/* Lock warning bar */
.pk-lock-bar { display:flex; align-items:flex-start; gap:.7rem; background:rgba(245,197,24,.07); border:1px solid rgba(245,197,24,.22); border-radius:10px; padding:.75rem 1rem; }
.pk-lock-icon { font-size:1rem; flex-shrink:0; line-height:1.5; }
.pk-lock-text { font-size:.8rem; color:var(--muted); line-height:1.5; margin:0; }
.pk-lock-text strong { color:var(--accent); font-weight:600; }

/* ── Tournament result cards ── */
.pk-result-cards { display:grid; grid-template-columns:1fr; gap:.75rem; }
.pk-result-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:.85rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.pk-result-card-title { font-family:'Oswald',sans-serif; font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.pk-result-card-val { display:flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:600; color:var(--text); }
.pk-result-card-scorers { display:flex; flex-direction:column; gap:.35rem; max-height:calc(4 * 1.25rem + 3 * .35rem); overflow-y:auto; }
.pk-result-card-empty { font-size:.78rem; color:var(--muted); font-style:italic; }
.pk-result-card-skeleton { height:1.2rem; border-radius:6px; background:var(--bg3); animation:sk-pulse 1.4s ease-in-out infinite; }
.pk-result-rank { font-size:.72rem; color:var(--muted); font-weight:700; min-width:1rem; text-align:center; }
.pk-result-goals { font-size:.75rem; color:var(--accent); font-weight:700; margin-left:auto; }
@media (min-width:640px) {
  .pk-result-cards { grid-template-columns:1fr 1fr; }
}

/* Section card */
.pk-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.pk-section-head { display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid var(--border); }
.pk-section-title { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:600; color:var(--text); margin:0; }
.pk-locked-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:6px; padding:.25rem .55rem; }

/* Locked pick display */
.pk-my-pick-display { display:flex; align-items:center; gap:.85rem; padding:1rem 1rem; }
.pk-my-pick-label { font-size:.72rem; color:var(--muted); margin-bottom:.2rem; }
.pk-my-pick-val { font-family:'Oswald',sans-serif; font-size:1.15rem; color:var(--accent); font-weight:600; }
.pk-no-pick-msg { padding:1rem; color:var(--muted); font-size:.85rem; margin:0; }

/* Team grid — grouped by A–L */
.pk-team-groups { padding:.75rem .75rem 0; display:flex; flex-direction:column; gap:.6rem; }
.pk-team-group { display:flex; flex-direction:column; gap:.3rem; }
.pk-group-label { font-size:.62rem; color:var(--muted); font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:.1rem .2rem; }
.pk-team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; }
.pk-team-tile { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.55rem .3rem; border-radius:8px; border:1.5px solid transparent; background:var(--bg3); cursor:pointer; transition:border-color .15s, background .15s; min-height:64px; }
.pk-team-tile:hover:not(:disabled) { border-color:rgba(245,197,24,.35); background:rgba(245,197,24,.05); }
.pk-team-tile--selected { border-color:var(--accent); background:rgba(245,197,24,.1); }
.pk-team-tile--tbd { opacity:.4; cursor:default; pointer-events:none; }
.pk-flag { width:36px; height:27px; object-fit:cover; border-radius:3px; flex-shrink:0; }
.pk-flag-ph { width:36px; height:27px; background:var(--border); border-radius:3px; flex-shrink:0; }
.pk-flag-lg { width:44px; height:33px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.pk-flag-lg-ph { width:44px; height:33px; background:var(--border); border-radius:4px; flex-shrink:0; }
.pk-team-name { font-size:.6rem; color:var(--muted); text-align:center; font-weight:500; line-height:1.25; }
.pk-team-name--sel { color:var(--accent); font-weight:600; }

/* Save row */
.pk-save-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem 1rem; border-top:1px solid var(--border); }
.pk-current-pick { font-size:.78rem; color:var(--muted); margin:0; min-width:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pk-current-pick strong { color:var(--text); font-weight:500; }
.pk-save-row .btn { flex-shrink:0; white-space:nowrap; }

/* Top scorer body */
.pk-section-body { padding:.75rem 1rem .25rem; }
.pk-group-note { font-size:.75rem; color:var(--muted); margin:0 0 .6rem; line-height:1.4; }
.pk-player-search { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'Inter',sans-serif; font-size:1rem; padding:.6rem .85rem; outline:none; margin-bottom:.5rem; }
.pk-player-search:focus { border-color:var(--accent); }
.pk-player-list { display:flex; flex-direction:column; gap:2px; max-height:210px; overflow-y:auto; }
.pk-player-row { display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border-radius:8px; border:1.5px solid transparent; background:var(--bg3); cursor:pointer; transition:border-color .15s, background .15s; width:100%; text-align:left; min-height:48px; }
.pk-player-row:hover { border-color:rgba(245,197,24,.25); background:rgba(245,197,24,.04); }
.pk-player-row--selected { border-color:var(--accent); background:rgba(245,197,24,.08); }
.pk-player-row--tbd { opacity:.4; cursor:default; }
.pk-player-flag { width:26px; height:19px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.pk-player-flag-ph { width:26px; height:19px; background:var(--border); border-radius:2px; flex-shrink:0; }
.pk-player-name { font-weight:500; font-size:.9rem; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pk-player-name--sel { color:var(--accent); }
.pk-player-team { font-size:.75rem; color:var(--muted); flex-shrink:0; }
.pk-champ-odds { font-size:13px; color:var(--accent); flex-shrink:0; min-width:3.5rem; text-align:center; }
.pk-champ-list-header { display:flex; align-items:center; gap:.65rem; padding:.2rem .7rem; position:sticky; top:0; background:var(--bg2); z-index:1; }
.pk-champ-list-header-spacer { display:block; flex:1; padding-left:26px; }
.pk-champ-list-header-odds { font-size:11px; color:var(--muted); flex-shrink:0; min-width:3.5rem; text-align:center; }
.pk-champ-list-header-group { font-size:11px; color:var(--muted); flex-shrink:0; }
@media (min-width:640px) {
  .pk-champ-odds { flex:none; width:7rem; min-width:0; text-align:center; }
  .pk-champ-list .pk-player-team { flex:none; width:5rem; text-align:center; }
  .pk-champ-list-header-odds { flex:none; width:7rem; min-width:0; text-align:center; }
  .pk-champ-list-header-group { flex:none; width:5rem; min-width:0; text-align:center; }
}

/* Loading skeletons */
.pk-skeleton-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; padding:.75rem; }
.pk-skeleton-tile { height:64px; background:var(--bg3); border-radius:8px; animation:pk-pulse 1.4s ease-in-out infinite; }
.pk-skeleton-rows { display:flex; flex-direction:column; gap:4px; padding:.75rem 1rem; }
.pk-skeleton-row { height:48px; background:var(--bg3); border-radius:8px; animation:pk-pulse 1.4s ease-in-out infinite; }
@keyframes pk-pulse { 0%,100%{opacity:.6} 50%{opacity:.25} }

@media(min-width:640px) {
  .pk-team-grid { grid-template-columns:repeat(6,1fr); }
  .pk-skeleton-grid { grid-template-columns:repeat(6,1fr); }
  .pk-page { max-width:700px; }
}

/* ── Picks page — tab switcher ───────────────────────────────── */
.pk-tab-sw { display:flex; gap:.4rem; }
.grp-group-tabs { margin-bottom:.75rem; }
.pk-tab-btn { flex:1; padding:.6rem 1rem; border-radius:8px; border:1.5px solid var(--border); background:var(--bg2); color:var(--muted); font-family:'Inter',sans-serif; font-size:.88rem; font-weight:600; cursor:pointer; transition:color .15s, border-color .15s, background .15s; min-height:48px; }
.pk-tab-btn:hover { border-color:rgba(245,197,24,.35); color:var(--text); }
.pk-tab-btn--active { border-color:var(--accent); background:rgba(245,197,24,.08); color:var(--accent); }

/* ── Predictions tab ─────────────────────────────────────────── */
.pd-context-label { font-size:.78rem; color:var(--muted); margin:0; }
.pd-context-label strong { color:var(--text); font-weight:500; }
.pd-progress { font-size:.78rem; color:var(--muted); margin:0; }

.pd-games { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }

.pd-phase-head { padding:.5rem 1rem; background:var(--bg3); border-bottom:1px solid var(--border); font-family:'Oswald',sans-serif; font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; }

.pd-row { padding:.6rem 1rem; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; }
.pd-row:last-child { border-bottom:none; }
.pd-row:hover { background:rgba(255,255,255,.025); }
.pd-row:focus { outline:2px solid var(--accent); outline-offset:-2px; }
.pd-row--locked { cursor:pointer; }

/* Match line: home — inputs — away */
.pd-match { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.pd-team { display:flex; align-items:center; gap:.35rem; flex:1; min-width:0; }
.pd-team--away { flex-direction:row-reverse; }
.pd-tname { font-size:.82rem; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-team--away .pd-tname { text-align:right; }

/* Score input area */
.pd-vs { display:flex; align-items:center; gap:.3rem; flex-shrink:0; }
.pd-inp { width:40px; height:40px; background:var(--bg3); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:'Oswald',sans-serif; font-size:1rem; text-align:center; -moz-appearance:textfield; outline:none; transition:border-color .15s; }
.pd-inp::-webkit-outer-spin-button,.pd-inp::-webkit-inner-spin-button { -webkit-appearance:none; }
.pd-inp:focus { border-color:var(--accent); }
.pd-vsep { font-family:'Oswald',sans-serif; font-size:.9rem; color:var(--muted); flex-shrink:0; }

/* Locked score area */
.pd-vs-locked { display:flex; flex-direction:column; align-items:center; gap:.1rem; flex-shrink:0; min-width:56px; }
.pd-actual-result { display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.pd-act-score { font-family:'Oswald',sans-serif; font-size:1.05rem; color:var(--text); font-weight:600; white-space:nowrap; }
.pd-act-extra { font-size:.68rem; color:var(--muted); white-space:nowrap; }
.pd-my-score { font-family:'Oswald',sans-serif; font-size:.95rem; color:var(--text); font-weight:500; white-space:nowrap; }
.pd-pick-label { font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; line-height:1; }
.pd-my-pick-note { font-size:.72rem; color:var(--muted); flex-shrink:0; white-space:nowrap; }
.pd-no-pred { font-size:.85rem; color:var(--muted); }
.pd-auto { font-size:.58rem; color:var(--muted); background:rgba(255,255,255,.06); border-radius:3px; padding:.1rem .3rem; letter-spacing:.3px; line-height:1.4; }

/* Meta row: time + action */
.pd-meta { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.pd-kickoff { font-size:.72rem; color:var(--muted); text-align:center; grid-column:2; }
.pd-save-btn { justify-self:end; grid-column:3; padding:.5rem .9rem; font-size:.82rem; border-radius:6px; background:var(--accent); color:#000; font-weight:600; border:none; cursor:pointer; min-height:44px; flex-shrink:0; white-space:nowrap; font-family:'Inter',sans-serif; transition:background .15s; }
.pd-save-btn:hover:not(:disabled) { background:#ffd700; }
.pd-save-btn:disabled { opacity:.4; cursor:not-allowed; }
.pd-result { font-family:'Oswald',sans-serif; font-size:.85rem; color:var(--green); font-weight:600; flex-shrink:0; }
.pd-live { font-size:.72rem; color:var(--accent); font-weight:600; flex-shrink:0; background:rgba(245,197,24,.1); border-radius:4px; padding:.15rem .4rem; }
.pd-meta-tbd { grid-column:1 / -1; display:flex; justify-content:center; align-items:center; gap:.4rem; }
.pd-lock-note { font-size:.72rem; color:var(--muted); }
.pd-scoring-note { font-size:.75rem; color:var(--muted); padding:.25rem 1rem .5rem; line-height:1.4; }
.pd-result-row { display:flex; align-items:center; gap:1rem; padding:.3rem 1rem .45rem; justify-content:center; }
.pd-res-item { display:flex; align-items:center; gap:.3rem; }
.pd-res-label { font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.pd-res-val { font-family:'Oswald',sans-serif; font-size:.88rem; color:var(--text); font-weight:500; min-width:1.8ch; }
.pd-stats-btn { font-size:.68rem; color:var(--muted); background:none; border:1px solid var(--border); border-radius:4px; padding:.15rem .45rem; cursor:pointer; }
.pd-stats-btn:hover { color:var(--accent); border-color:var(--accent); }
.pd-stats-panel { margin:.4rem -1rem 0; padding:.6rem 1rem; background:rgba(255,255,255,.03); border-top:1px solid var(--border); }
.pd-stats-head { display:flex; justify-content:space-between; font-size:.7rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem; }
.pd-stats-row { display:grid; grid-template-columns:1fr auto 1fr; gap:.4rem; align-items:center; padding:.2rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.pd-stats-row:last-child { border-bottom:none; }
.pd-stats-label { font-size:.68rem; color:var(--muted); text-align:center; text-transform:uppercase; letter-spacing:.04em; }
.pd-stats-val { font-size:.82rem; color:var(--text); font-weight:500; }
.pd-stats-row .pd-stats-val:first-child { text-align:left; }
.pd-stats-row .pd-stats-val:last-child { text-align:right; }

/* Predictions sub-tabs */
.pd-subtab-sw { display:flex; gap:.4rem; padding:.5rem 0 .25rem; }
.pd-subtab-btn { flex:1; padding:.5rem; font-size:.82rem; font-weight:600; border-radius:8px; border:1.5px solid var(--border); background:var(--bg2); color:var(--muted); cursor:pointer; transition:background .15s,color .15s,border-color .15s; font-family:'Inter',sans-serif; }
.pd-subtab-btn--active { border-color:var(--accent); background:rgba(245,197,24,.08); color:var(--accent); }
.pd-subtab-btn:hover { border-color:rgba(245,197,24,.35); color:var(--text); }
.pd-subtab-count { display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); border-radius:10px; font-size:.65rem; padding:.05rem .35rem; margin-left:.3rem; }
/* History sort controls */
.pd-sort-row { display:flex; align-items:center; gap:.5rem; padding:.4rem 1rem .25rem; }
.pd-sort-label { font-size:.72rem; color:var(--muted); }
.pd-sort-btn { padding:.3rem .65rem; font-size:.75rem; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:background .15s,color .15s,border-color .15s; font-family:'Inter',sans-serif; white-space:nowrap; }
.pd-sort-btn--active { background:var(--bg3); color:var(--text); border-color:var(--accent); }
/* Outcome badges */
.pd-outcome-badge { display:inline-block; font-size:.58rem; font-weight:700; border-radius:3px; padding:.1rem .35rem; letter-spacing:.3px; line-height:1.4; text-transform:uppercase; }
.pd-outcome-badge--exact   { background:rgba(245,197,24,.18); color:var(--accent); }
.pd-outcome-badge--correct { background:rgba(34,197,94,.15);  color:#4ade80; }
.pd-outcome-badge--wrong   { background:rgba(239,68,68,.12);  color:#f87171; }

/* ── AI Feed ─────────────────────────────────────────── */
.af-selector-row { margin-bottom:1.25rem; }
.af-group-label { font-family:'Oswald',sans-serif; font-size:.85rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:1rem; }
.af-list { display:flex; flex-direction:column; gap:.75rem; }
.af-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1rem; overflow:hidden; }
.af-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.75rem; }
.af-card-date { font-family:'Oswald',sans-serif; font-size:1rem; font-weight:600; color:var(--accent); line-height:1.2; }
.af-card-games { font-size:.7rem; color:var(--muted); background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:.2rem .55rem; white-space:nowrap; flex-shrink:0; }
.af-card-content { font-size:.88rem; color:var(--text); line-height:1.65; white-space:pre-wrap; word-break:break-word; }
.af-card-footer { margin-top:.85rem; padding-top:.65rem; border-top:1px solid var(--border); font-size:.7rem; color:var(--muted); }
.af-empty { text-align:center; padding:3rem 1.5rem; }
.af-empty-icon { font-size:2.5rem; line-height:1; margin-bottom:.75rem; }
.af-empty-text { font-size:.88rem; color:var(--muted); line-height:1.55; }
.af-skeleton { background:var(--bg3); border-radius:6px; animation:sk-pulse 1.4s ease-in-out infinite; }

/* ── AI Feed v2 ──────────────────────────────────────── */
.af-tabs { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.1rem; scrollbar-width:none; width:100%; min-width:0; }
.af-tabs::-webkit-scrollbar { display:none; }
.af-tab { padding:.45rem .8rem; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--muted); font-family:'Inter',sans-serif; font-size:.82rem; cursor:pointer; white-space:nowrap; transition:all .15s; min-height:38px; max-width:120px; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.af-tab.active { background:var(--accent); border-color:var(--accent); color:#000; font-weight:600; }
.af-tab:hover:not(.active) { border-color:var(--muted); color:var(--text); }
/* NOTE: header is NOT position:sticky — an opaque sticky header inside .af-card{overflow:hidden} overlapped/hid the summary text while scrolling (2026-05-27 fix). Keep it in normal flow. */
.af-card-header { background:var(--bg2); margin:-1.25rem -1rem .75rem; padding:.75rem 1rem; border-radius:var(--radius) var(--radius) 0 0; border-bottom:1px solid rgba(255,255,255,.05); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.af-new-badge { font-size:.6rem; font-weight:700; background:var(--accent); color:#000; border-radius:20px; padding:.1rem .45rem; letter-spacing:.4px; margin-left:.45rem; vertical-align:middle; flex-shrink:0; }
.af-read-more { display:block; background:none; border:none; color:var(--accent); font-size:.82rem; cursor:pointer; padding:.45rem 0 0; font-family:'Inter',sans-serif; transition:opacity .15s; }
.af-read-more:hover { opacity:.75; }
.af-card-footer { margin-top:.85rem; padding-top:.65rem; border-top:1px solid var(--border); font-size:.7rem; color:var(--muted); display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.af-footer-left { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.af-share-btn { background:none; border:none; color:var(--muted); font-size:.75rem; cursor:pointer; padding:.25rem .4rem; border-radius:4px; font-family:'Inter',sans-serif; transition:color .15s; display:flex; align-items:center; gap:.2rem; min-height:32px; white-space:nowrap; }
.af-share-btn:hover { color:var(--text); }
.af-table-share-row { display:flex; justify-content:flex-end; padding:.35rem 0 0; }
.af-reactions { display:flex; gap:.25rem; }
.af-reaction-btn { background:none; border:1px solid var(--border); border-radius:20px; padding:.15rem .45rem; cursor:pointer; font-size:.82rem; transition:all .15s; min-height:32px; min-width:40px; line-height:1; }
.af-reaction-btn:hover { border-color:var(--muted); }
.af-reaction-btn.selected { background:rgba(245,197,24,.12); border-color:var(--accent); }
.af-next-hint { text-align:center; padding:.85rem 1rem; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); font-size:.82rem; color:var(--muted); }
.af-page { padding:1.25rem 1rem 5rem; max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; overflow-x:hidden; width:100%; box-sizing:border-box; }
.af-standings-row { display:flex; gap:.5rem; border-top:1px solid var(--border); margin-top:.75rem; padding-top:.55rem; }
.af-daily-toggle { flex:1; background:none; border:none; color:var(--muted); font-size:.75rem; font-family:'Inter',sans-serif; padding:0; cursor:pointer; text-align:left; transition:color .15s; }
.af-daily-toggle:hover { color:var(--text); }
.af-daily-table { margin-top:.6rem; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.af-daily-table table { width:100%; border-collapse:collapse; font-size:.78rem; }
.af-daily-table th { background:var(--bg3); color:var(--muted); font-weight:500; padding:.4rem .7rem; text-align:left; font-family:'Inter',sans-serif; }
.af-daily-table th:last-child { text-align:right; }
.af-daily-table td { padding:.4rem .7rem; border-top:1px solid var(--border); color:var(--text); }
.af-daily-table td:first-child { width:2rem; }
.af-daily-table td:last-child { text-align:right; }
.af-daily-pts { font-family:'Oswald',sans-serif; font-size:.9rem; color:var(--accent); font-weight:600; }
.af-daily-top td { background:rgba(245,197,24,.05); }
.af-daily-loading { text-align:center; padding:.75rem; font-size:.78rem; color:var(--muted); }
@media(max-width:768px) {
  .af-page { padding:1.25rem 1.2rem 5rem; max-width:none; }
  .af-card { padding:.6rem .75rem; }
  .af-card-header { margin:-.6rem -.75rem .5rem; padding:.5rem .75rem; }
  .af-card-content { font-size:.83rem; line-height:1.45; }
  .af-card-footer { margin-top:.55rem; padding-top:.45rem; }
  .af-list { gap:.6rem; }
}

/* ── Profile bottom sheet ──────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.prof-gear-btn { background:none; border:none; color:var(--muted); font-size:1.1rem; cursor:pointer; padding:.25rem .5rem; min-height:44px; min-width:44px; display:flex; align-items:center; justify-content:center; transition:color .15s; }
.prof-gear-btn:hover { color:var(--text); }
.prof-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:199; }
.prof-sheet { position:fixed; top:58px; right:.75rem; left:.75rem; z-index:200; background:var(--bg2); border-radius:var(--radius); padding:0 1.25rem 1.5rem; max-height:calc(100vh - 130px); overflow-y:auto; overflow-x:hidden; box-sizing:border-box; transform:translateY(-8px) scale(.98); opacity:0; transition:transform .2s ease, opacity .2s ease; box-shadow:0 8px 32px rgba(0,0,0,.6); }
.prof-sheet.open { transform:translateY(0) scale(1); opacity:1; }
.prof-sheet-handle { display:none; }
.prof-sheet-header { display:flex; align-items:center; justify-content:space-between; padding:.6rem 0 .75rem; border-bottom:1px solid var(--border); margin-bottom:.25rem; }
.prof-sheet-title { font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:600; color:var(--text); }
.prof-sheet-close { background:none; border:none; color:var(--muted); font-size:1rem; cursor:pointer; min-height:44px; min-width:44px; display:flex; align-items:center; justify-content:center; transition:color .15s; }
.prof-sheet-close:hover { color:var(--text); }
.prof-section { padding:.9rem 0; }
.prof-section-title { font-size:.7rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.65rem; }
.prof-field { display:flex; gap:.5rem; align-items:center; width:100%; box-sizing:border-box; }
.prof-input { flex:1; min-width:0; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:.65rem .75rem; color:var(--text); font-family:'Inter',sans-serif; font-size:1rem; outline:none; min-height:48px; box-sizing:border-box; }
.prof-input:focus { border-color:var(--accent); }
.prof-input:disabled { opacity:.5; }
.prof-save-btn { flex-shrink:0; padding:.6rem 1rem; min-height:48px; }
.prof-error { font-size:.78rem; color:var(--red); margin-top:.45rem; }
.prof-lock-note { font-size:.75rem; color:var(--muted); margin-top:.5rem; }
.prof-divider { height:1px; background:var(--border); }
.prof-danger-title { color:var(--red) !important; }
.prof-delete-btn { width:100%; background:transparent; border:1px solid var(--red); color:var(--red); border-radius:8px; padding:.75rem; font-family:'Inter',sans-serif; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .15s; min-height:48px; }
.prof-delete-btn--confirm { background:var(--red); color:#fff; }
.prof-delete-btn:disabled { opacity:.5; cursor:not-allowed; }
.prof-delete-confirm { font-size:.8rem; color:var(--red); margin-bottom:.6rem; }
.prof-cancel-link { background:none; border:none; color:var(--muted); font-size:.8rem; cursor:pointer; padding:.5rem 0; font-family:'Inter',sans-serif; display:block; margin-top:.35rem; min-height:40px; }
@media(max-width:768px) {
  .prof-sheet { pointer-events:none; }
  .prof-sheet.open { pointer-events:auto; }
}
@media(min-width:769px) {
  .prof-sheet { left:auto; width:380px; }
}

/* ─── FEEDBACK ──────────────────────────────────────────────── */
.feedback-fab { position:fixed; bottom:calc(64px + env(safe-area-inset-bottom) + 12px); right:16px; z-index:300; width:48px; height:48px; border-radius:50%; background:var(--accent); color:#000; border:none; font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.5); transition:transform .18s, box-shadow .18s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
@media(hover:hover) and (pointer:fine) { .feedback-fab:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(0,0,0,.6); } }
.feedback-fab:active { transform:scale(.95); }

.feedback-step { direction:rtl; text-align:right; padding-top:.25rem; }
.feedback-title { font-family:'Oswald',sans-serif; font-size:1.4rem; font-weight:700; margin-bottom:.3rem; }
.feedback-subtitle { color:var(--muted); font-size:.9rem; margin-bottom:1.4rem; }
.feedback-back { background:none; border:none; color:var(--muted); font-size:.82rem; cursor:pointer; padding:0; margin-bottom:.9rem; font-family:'Inter',sans-serif; direction:rtl; }
@media(hover:hover) and (pointer:fine) { .feedback-back:hover { color:var(--text); } }

.feedback-category-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:.5rem; }
.feedback-cat-btn { display:flex; flex-direction:column; align-items:center; gap:.4rem; background:var(--bg2); border:2px solid var(--border); border-radius:var(--radius); padding:1.4rem 1rem; cursor:pointer; transition:border-color .18s, background .18s, transform .15s; font-family:'Inter',sans-serif; color:var(--text); -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
@media(hover:hover) and (pointer:fine) { .feedback-cat-btn:hover { border-color:var(--accent); background:rgba(245,197,24,.07); } }
.feedback-cat-btn:active { transform:scale(.97); }
.feedback-cat-icon  { font-size:2rem; line-height:1; }
.feedback-cat-label { font-weight:700; font-size:1.05rem; }
.feedback-cat-desc  { font-size:.75rem; color:var(--muted); }

.feedback-label { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:700; margin:1rem 0 .5rem; }

.feedback-priority-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.feedback-priority-pill { padding:.45rem 1.1rem; border-radius:20px; border:1.5px solid var(--border); background:var(--bg2); color:var(--muted); font-family:'Inter',sans-serif; font-size:.85rem; font-weight:600; cursor:pointer; transition:all .15s; -webkit-tap-highlight-color:transparent; }
@media(hover:hover) and (pointer:fine) { .feedback-priority-pill:hover { border-color:var(--text); color:var(--text); } }
.feedback-priority-pill.active.priority-low    { border-color:var(--green);  color:var(--green);  background:rgba(46,204,113,.1); }
.feedback-priority-pill.active.priority-medium { border-color:var(--accent); color:var(--accent); background:rgba(245,197,24,.1); }
.feedback-priority-pill.active.priority-high   { border-color:var(--red);    color:var(--red);    background:rgba(231,76,60,.1); }

.feedback-textarea { width:100%; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; color:var(--text); font-family:'Inter',sans-serif; font-size:.92rem; outline:none; resize:vertical; min-height:96px; transition:border-color .18s; direction:rtl; }
.feedback-textarea:focus { border-color:var(--accent); }
.feedback-textarea::placeholder { color:var(--muted); }

.feedback-file-label { display:block; cursor:pointer; }
.feedback-file-input { display:none; }
.feedback-file-btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--bg2); border:1px dashed var(--border); border-radius:8px; padding:.7rem 1rem; font-size:.85rem; color:var(--muted); transition:border-color .18s, color .18s; width:100%; font-family:'Inter',sans-serif; }
@media(hover:hover) and (pointer:fine) { .feedback-file-label:hover .feedback-file-btn { border-color:var(--accent); color:var(--accent); } }

.feedback-warn { font-size:.78rem; color:var(--red); margin-top:.4rem; }

.feedback-success { display:flex; flex-direction:column; align-items:center; text-align:center; padding:1.5rem 0; gap:1.2rem; }
.feedback-success-icon { font-size:3rem; line-height:1; }
.feedback-success-msg  { font-size:1.05rem; font-weight:500; line-height:1.6; color:var(--text); direction:rtl; }

/* ─── HOW TO PLAY ────────────────────────────────────────────── */
.htp-icon-btn { background:none; border:none; cursor:pointer; padding:.25rem .4rem; min-height:44px; min-width:36px; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; transition:opacity .15s; }
.htp-icon-btn:hover { opacity:.7; }
.htp-icon-i { width:22px; height:22px; border-radius:50%; background:rgba(245,197,24,.15); border:1.8px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-style:normal; font-weight:900; font-family:'Inter',sans-serif; line-height:1; flex-shrink:0; color:var(--accent); }

.htp-overlay { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:1200; display:flex; align-items:flex-end; justify-content:center; }
@media(min-width:600px) { .htp-overlay { align-items:center; } }

.htp-modal { background:var(--bg2); width:100%; max-width:640px; max-height:92vh; border-radius:20px 20px 0 0; display:flex; flex-direction:column; overflow:hidden; animation:htp-slide-up .25s ease; }
@media(min-width:600px) { .htp-modal { border-radius:20px; max-height:88vh; } }
@keyframes htp-slide-up { from { transform:translateY(40px); opacity:0; } to { transform:translateY(0); opacity:1; } }

.htp-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--bg2); position:sticky; top:0; z-index:1; }
.htp-header-title { font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:700; color:var(--accent); letter-spacing:1px; }
.htp-close { background:rgba(255,255,255,.07); border:none; color:var(--muted); font-size:1rem; width:32px; height:32px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; flex-shrink:0; }
.htp-close:hover { background:rgba(255,255,255,.15); color:var(--text); }

.htp-body { overflow-y:auto; padding:1.2rem 1.2rem 2rem; display:flex; flex-direction:column; gap:0; -webkit-overflow-scrolling:touch; }

.htp-tagline { font-size:.92rem; color:var(--muted); line-height:1.65; margin-bottom:1.4rem; }

.htp-section { padding:1.1rem 0; border-bottom:1px solid var(--border); }
.htp-section:last-child { border-bottom:none; }

.htp-section-title { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:.65rem; letter-spacing:.3px; }
.htp-desc { font-size:.87rem; color:var(--muted); line-height:1.6; margin-bottom:.8rem; }
.htp-sub-label { font-size:.8rem; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:1px; margin-bottom:.5rem; }
.htp-note { font-size:.8rem; color:var(--muted); margin-top:.65rem; font-style:italic; }
.htp-private { font-size:.78rem; color:var(--muted); font-weight:400; font-style:italic; }

.htp-table { width:100%; border-collapse:collapse; margin:.2rem 0 .5rem; font-size:.87rem; }
.htp-table th { text-align:left; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:1px; padding:.4rem .6rem; border-bottom:1px solid var(--border); font-weight:500; }
.htp-table td { padding:.55rem .6rem; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text); }
.htp-table tr:last-child td { border-bottom:none; }
.htp-pts { font-weight:700; color:var(--accent); text-align:right; white-space:nowrap; }

.htp-list { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.htp-list li { font-size:.87rem; color:var(--muted); line-height:1.6; padding-left:1rem; position:relative; }
.htp-list li::before { content:'·'; position:absolute; left:0; color:var(--accent); font-weight:700; }
.htp-list li strong { color:var(--text); }

.htp-callout { background:rgba(245,197,24,.07); border:1px solid rgba(245,197,24,.2); border-radius:10px; padding:.75rem 1rem; font-size:.85rem; color:var(--muted); line-height:1.6; margin-top:.8rem; }
.htp-callout strong { color:var(--text); }
.htp-callout--warn { background:rgba(231,76,60,.07); border-color:rgba(231,76,60,.25); }
.htp-callout--warn strong { color:#e88; }

.htp-deadlines { display:flex; flex-direction:column; gap:.6rem; }
.htp-deadline-row { display:grid; grid-template-columns:auto 1fr; gap:.6rem 1rem; align-items:start; padding:.6rem .8rem; background:var(--bg3); border-radius:10px; }
.htp-deadline-date { font-size:.8rem; font-weight:700; color:var(--accent); white-space:nowrap; }
.htp-deadline-desc { font-size:.82rem; color:var(--muted); line-height:1.5; }

.htp-footer { padding-top:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.htp-footer p { font-size:.84rem; color:var(--muted); line-height:1.65; }
.htp-footer-cta { font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:700; color:var(--accent); letter-spacing:.5px; margin-top:.4rem; }

/* ── Skeleton placeholders ─────────────────────────────────────────── */
@keyframes wc-skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  display: block;
  background: linear-gradient(90deg, #1a1a1a 0%, #232323 50%, #1a1a1a 100%);
  background-size: 800px 100%;
  border-radius: 6px;
  animation: wc-skeleton-shimmer 1.4s linear infinite;
}
.skeleton-row { height: 1.4rem; margin: .55rem 0; }
.skeleton-row.short { width: 55%; }
.skeleton-row.medium { width: 75%; }
.skeleton-card {
  height: 5.5rem;
  margin: .6rem 0;
  border-radius: 12px;
}
.skeleton-stack { padding: .4rem 0; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}