/* ── KICKWIZ — Dark (only mode) ── */
:root{
  --ac:#F5C518;--adk:#D4A017;--abg2:rgba(245,197,24,.09);--agl:rgba(245,197,24,.28);
  --bg:#0A0A0A;--surf:#111111;--surf2:#1A1A1A;--bdr:#262626;--bdr2:#333333;
  --text:#FFFFFF;--muted:rgba(255,255,255,.8);--muted2:#2A2A2A;
  --glow:radial-gradient(ellipse at top,rgba(245,197,24,.06) 0%,transparent 65%);
  --hdr-bg:rgba(0,0,0,.97);--nav-bg:rgba(0,0,0,.97);
  --card-shadow:0 1px 4px rgba(0,0,0,.5);
  --green:var(--ac);--gdk:var(--adk);--gbg:var(--abg2);
  --amber:#F5C518;--abg:rgba(245,197,24,.08);
  --red:#EF4444;--rbg:rgba(239,68,68,.08);
  --gold:#F5C518;--silver:#C0C0C0;--bronze:#CD7F32;
  --hd:'Barlow Condensed',sans-serif;
  --bd:'Barlow',sans-serif;
  --mn:'JetBrains Mono',monospace;
  --r:14px;--rsm:9px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px}
body{background:var(--bg);color:var(--text);font-family:var(--bd);min-height:100vh;max-width:480px;margin:0 auto;padding-bottom:76px;overflow-x:hidden;transition:background .2s,color .2s}
body::before{content:'';position:fixed;top:0;left:50%;transform:translateX(-50%);width:600px;height:280px;background:var(--glow);pointer-events:none;z-index:0}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* Utilities */
.tourn-opt{padding:10px 14px;font-size:12px;cursor:pointer;color:var(--text);transition:background .15s;font-family:var(--bd)}
.tourn-opt:hover,.tourn-opt.on{background:var(--abg2);color:var(--ac)}
#tourn-drop.open,#picks-tourn-drop.open,#live-match-drop.open,#rank-tourn-drop.open,#ph-tourn-drop.open{display:block!important}
.sp{width:32px;height:32px;border:3px solid var(--bdr2);border-top-color:var(--ac);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
.sp-sm{width:13px;height:13px;border:2px solid var(--bdr2);border-top-color:var(--ac);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}

/* Buttons */
.btn{display:block;width:100%;padding:13px;background:var(--ac);color:#000;font-family:var(--hd);font-size:16px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;border:none;border-radius:var(--r);cursor:pointer;transition:opacity .15s,transform .1s;margin-top:6px}
.btn:active{transform:scale(.97);opacity:.85}
.btn:not(.sec):not(.ghost):not(.danger):hover{opacity:.9;box-shadow:0 4px 14px var(--agl)}
.btn.sec{background:var(--surf2);color:var(--text);border:1px solid var(--bdr);font-size:13px}
.btn.ghost{background:transparent;color:var(--adk);border:1px solid var(--adk);font-size:13px}
.btn.danger{background:transparent;color:var(--red);border:1px solid var(--red);font-size:13px}
.btn.amber{background:var(--amber);color:#000}
.btn.sm{font-size:12px;padding:7px 13px;width:auto;border-radius:8px;margin-top:0}
.btn:disabled{opacity:.4;pointer-events:none}

/* Inputs */
.flabel{font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;display:block}
.finput{width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rsm);color:var(--text);font-family:var(--bd);font-size:15px;outline:none;transition:border-color .2s;-webkit-appearance:none}
.finput:focus{border-color:var(--adk)}
.finput::placeholder{color:var(--muted)}
.field{display:flex;flex-direction:column;gap:4px}
.err{background:var(--rbg);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--red);display:none;line-height:1.5}
.note{background:var(--abg2);border:1px solid var(--agl);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--adk);line-height:1.7}

/* Header */
header{position:sticky;top:0;z-index:50;background:var(--hdr-bg);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);padding:9px 13px;display:flex;align-items:center;justify-content:space-between;height:52px;box-shadow:0 1px 6px rgba(0,0,0,.5)}
/* Force child elements to look right on the black header/nav */
header,nav{--surf2:rgba(255,255,255,.1);--bdr:rgba(255,255,255,.1);--muted:rgba(255,255,255,.8);--text:#fff}
.kw-badge{width:34px;height:34px;background:var(--ac);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--hd);font-size:13px;font-weight:900;color:#000;letter-spacing:-0.5px;flex-shrink:0;position:relative;overflow:hidden}
.kw-badge::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.4);border-radius:2px 2px 0 0}
.logo{font-family:var(--hd);font-size:20px;font-weight:900;letter-spacing:.5px;display:flex;align-items:center;gap:8px;line-height:1}
.logo-kick{color:var(--text)}
.logo-wiz{color:var(--ac)}
.logo-dot{font-size:13px;color:var(--muted);font-weight:600}
.pill{display:flex;align-items:center;gap:5px;background:var(--surf2);border:1px solid var(--bdr);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer}
.mbtn{width:32px;height:32px;background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.mbtn span{width:13px;height:1.5px;background:var(--muted);border-radius:2px;transition:all .2s;display:block}
.mbtn.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);background:var(--text)}
.mbtn.open span:nth-child(2){opacity:0}
.mbtn.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);background:var(--text)}
.theme-btn{width:32px;height:32px;background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:background .15s}
.theme-btn:hover{background:var(--bdr)}
.live-badge{display:inline-flex;align-items:center;gap:4px;background:var(--rbg);border:1px solid rgba(239,68,68,.3);border-radius:20px;padding:3px 8px;font-size:12px;font-weight:700;letter-spacing:1px;color:var(--red);cursor:pointer}
.ldot{width:5px;height:5px;background:var(--red);border-radius:50%;animation:pulse .8s infinite}

/* Nav */
nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--nav-bg);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.08);display:flex;z-index:100;box-shadow:0 -1px 10px rgba(0,0,0,.5)}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;background:none;border:none;color:var(--muted);font-family:var(--bd);font-size:11px;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:color .15s;position:relative}
.nb svg{width:20px;height:20px;stroke:currentColor}
.nb.active{color:var(--ac)}
.nb.active svg{filter:drop-shadow(0 0 4px var(--agl))}
.ndot{position:absolute;top:7px;right:calc(50% - 11px);width:6px;height:6px;background:var(--red);border-radius:50%;display:none}
.nb.has-notif .ndot{display:block}

/* Drawer */
.dov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none}
.dov.open{display:block}
.drw{position:fixed;top:0;left:0;bottom:0;width:250px;background:var(--bg);border-right:1px solid var(--bdr);z-index:201;transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.1)}
.drw.open{transform:translateX(0)}
.dh{padding:16px 13px 11px;border-bottom:1px solid var(--bdr)}
.db{flex:1;overflow-y:auto;padding:5px 0}
.ds{padding:3px 0}
.dlbl{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);padding:8px 13px 3px;background:var(--surf)}
.di{padding:11px 13px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:9px;transition:background .1s;color:var(--text)}
.di:hover,.di.on{background:var(--abg2);color:var(--adk)}
.dico{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.df{padding:9px 13px;border-top:1px solid var(--bdr)}

/* Onboarding */
#onboard{position:fixed;inset:0;background:var(--bg);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 16px;gap:13px;overflow-y:auto}
.ob-logo{font-family:var(--hd);font-size:52px;font-weight:900;color:var(--ac);letter-spacing:2px;text-align:center;line-height:.95}
.ob-sub{font-size:12px;color:var(--muted);letter-spacing:4px;text-transform:uppercase;margin-top:-4px}
.ob-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:18px;width:100%;display:flex;flex-direction:column;gap:11px;box-shadow:var(--card-shadow)}
.ob-card h2{font-family:var(--hd);font-size:18px;font-weight:800;color:var(--adk);letter-spacing:1px}
.combo-wrap{position:relative}
.cdrop{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rsm);z-index:200;max-height:150px;overflow-y:auto;display:none;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.cdrop.open{display:block}
.copt{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--bdr);transition:background .1s}
.copt:last-child{border-bottom:none}
.copt:hover{background:var(--abg2);color:var(--adk)}
.gi{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rsm);padding:10px 12px;cursor:pointer;transition:border-color .15s;margin-bottom:6px}
.gi:hover{border-color:var(--adk)}

/* Club crests */
.club-crest{height:1.4em;width:1.4em;object-fit:contain;vertical-align:middle;display:inline-block;flex-shrink:0}
.mp-flag .club-crest{height:75px;width:75px;display:block}
[style*="height:52px"] .club-crest{height:48px;width:48px;display:block}
.page{display:none;padding:0 13px 18px;position:relative;z-index:1}
.page.active{display:block;animation:fadeUp .2s ease}
#page-feed.active{display:flex;flex-direction:column;padding:0;height:calc(100dvh - 52px - 60px - 50px)}
#page-live.active{display:flex;flex-direction:column;padding:0;height:calc(100dvh - 52px - 60px)}
#page-feed.active #gchat-msgs{padding-bottom:8px}
.phdr{padding:12px 0 9px;font-family:var(--hd);font-size:24px;font-weight:400;letter-spacing:1px;color:var(--text)}

/* Stage filter tabs */
.ftabs{display:flex;gap:5px;margin-bottom:10px;overflow-x:auto;padding-bottom:2px}
.ftabs::-webkit-scrollbar{height:0}
.ftab{flex-shrink:0;padding:5px 10px;background:var(--surf);border:1px solid var(--bdr);border-radius:20px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .12s}
.ftab.on{background:var(--abg2);border-color:var(--adk);color:var(--adk)}

/* Match card */
.mc{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:12px;margin-bottom:9px;position:relative;overflow:hidden;animation:fadeUp .2s ease;box-shadow:var(--card-shadow)}
.mc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.mc.open-card::before{background:linear-gradient(90deg,var(--ac),transparent)}
.mc.closed-card::before{background:linear-gradient(90deg,rgba(245,197,24,.35),transparent)}
.mc.live-card::before{background:linear-gradient(90deg,var(--red),transparent);animation:pulse .8s infinite}
.mc.done-card::before{background:linear-gradient(90deg,var(--bdr2),transparent)}
.mm{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.mstage{font-size:12px;color:var(--muted);background:var(--surf2);padding:2px 7px;border-radius:5px;font-weight:600}
.mteams{display:flex;align-items:center;justify-content:space-between;margin:7px 0}
.team{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1}
.tf{font-size:24px;line-height:1}
.tn{font-family:var(--hd);font-size:14px;font-weight:800;letter-spacing:.3px;text-align:center;line-height:1.1}
.vs{font-family:var(--mn);font-size:12px;color:var(--muted);padding:0 7px;flex-shrink:0}
.dsep{font-family:var(--hd);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text);padding:14px 0 7px;opacity:.6}

/* Slider */
.sw{margin:11px 0 5px;position:relative}
.slbls{display:flex;justify-content:space-between;font-size:13px;font-family:var(--hd);font-weight:700;margin-bottom:4px;color:var(--muted)}
.slbls .sla,.slbls .slb{color:var(--text);max-width:38%}
.slbls .slb{text-align:right}
.slbls .sld{color:var(--muted);text-align:center;flex:1;padding:0 4px}
.sl{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--ac) 0%,rgba(245,197,24,.4) 50%,var(--ac) 100%)}
.sl::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--ac);border:3px solid #fff;cursor:pointer;box-shadow:0 0 10px var(--agl),0 2px 6px rgba(0,0,0,.4)}
.sl.locked{opacity:.4;pointer-events:none}
.si{text-align:center;font-family:var(--hd);font-size:13px;font-weight:700;margin-top:3px;min-height:18px;color:var(--text)}
.mypick{display:inline-flex;align-items:center;gap:4px;background:var(--abg2);border:1px solid var(--agl);border-radius:20px;padding:3px 9px;font-size:12px;font-weight:600;color:var(--adk)}
.resbar{text-align:center;padding:7px;background:var(--surf2);border-radius:7px;font-family:var(--hd);font-size:14px;font-weight:800;color:var(--ac);margin-top:5px}
.distbar{font-size:12px;color:var(--muted);font-family:var(--mn);margin-top:4px}

/* Champion card */
.champ{background:linear-gradient(135deg,var(--abg2),var(--surf));border:1px solid var(--agl);border-radius:var(--r);padding:13px;margin-bottom:12px;cursor:pointer}

/* ── PRE-MATCH REPORT ── */
.mp-report-wrap{background:var(--surf2);border:1px solid var(--bdr);border-radius:10px;margin:6px 0;overflow:hidden;animation:fadeUp .2s ease}
.mp-report-hdr{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--bdr);font-family:var(--hd);font-size:13px;font-weight:700;letter-spacing:.5px;color:var(--ac)}
.mp-report-body{padding:10px 12px;font-size:12px;line-height:1.7;color:var(--text);max-height:220px;overflow-y:auto}
.mp-report-body::-webkit-scrollbar{width:2px}
.mp-report-body::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px}
.mp-report-body p{margin-bottom:8px}
.mp-report-body p:last-child{margin-bottom:0}
.mp-report-body strong{color:var(--ac)}
/* Markdown */
.md-body{font-size:14px;line-height:1.75;color:var(--text)}
.md-body h1,.md-body h2,.md-body h3,.md-body h4,.md-body h5,.md-body h6{font-family:var(--hd);font-weight:800;color:var(--adk);margin:14px 0 5px;letter-spacing:.3px;line-height:1.3}
.md-body h1{font-size:17px}.md-body h2{font-size:16px}.md-body h3{font-size:15px}
.md-body h4{font-size:14px}.md-body h5,.md-body h6{font-size:13px}
.md-body h1:first-child,.md-body h2:first-child,.md-body h3:first-child,.md-body h4:first-child,.md-body h5:first-child,.md-body h6:first-child{margin-top:0}
.md-body p{margin:0 0 10px}
.md-body p:last-child{margin-bottom:0}
.md-body strong{color:var(--text);font-weight:700}
.md-body em{color:var(--muted);font-style:italic}
.md-body ul,.md-body ol{margin:4px 0 10px;padding-left:18px}
.md-body li{margin-bottom:3px;line-height:1.6}
.md-body hr{border:none;border-top:1px solid var(--bdr);margin:12px 0}
.mp-report-section{margin-bottom:10px}
.mp-report-section-title{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.mp-report-fact{display:flex;align-items:flex-start;gap:6px;font-size:13px;color:var(--text);margin-bottom:3px}
.mp-report-fact::before{content:'▸';color:var(--ac);flex-shrink:0;margin-top:1px}
.mp-report-footer{padding:7px 12px;border-top:1px solid var(--bdr);font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
.mp-report-loading{padding:20px;text-align:center;color:var(--muted);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:8px}

/* Match Panel */
#match-panel-overlay{position:fixed;inset:0;z-index:800;background:var(--bg);display:none;flex-direction:column}
#match-panel-overlay.open{display:flex}
.mp-header{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex-shrink:0;background:var(--bg);border-bottom:1px solid var(--bdr);position:relative;z-index:2;box-shadow:var(--card-shadow)}
.mp-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--agl),transparent)}
.mp-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:6px;line-height:1}
.mp-counter{font-family:var(--mn);font-size:13px;color:var(--muted)}
.mp-scroll{flex:1;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mp-scroll::-webkit-scrollbar{display:none}
.mp-panel{height:calc(100dvh - 52px - 60px);min-height:calc(100dvh - 52px - 60px);scroll-snap-align:start;scroll-snap-stop:always;padding:16px 14px 10px;display:flex;flex-direction:column;border-bottom:1px solid var(--bdr);position:relative;overflow:hidden}
.mp-peek{position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(0deg,var(--bg) 0%,transparent 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;pointer-events:none;z-index:1}
.mp-arrow{font-size:18px;color:var(--muted);animation:mp-bounce .9s ease-in-out infinite}
@keyframes mp-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.mp-teams{display:flex;align-items:center;justify-content:space-between;padding:10px 0 8px}
.mp-team{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.mp-flag{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:48px;line-height:1}
.mp-tname{font-family:var(--hd);font-size:16px;font-weight:700;letter-spacing:1.5px;text-align:center;color:#fff;text-transform:uppercase}
.mp-vs{font-family:var(--hd);font-size:22px;font-weight:900;color:var(--muted);padding:0 10px}
.mp-meta{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.mp-stage-badge{font-size:12px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:1px}
.mp-time{font-family:var(--mn);font-size:13px;color:var(--muted)}
.mp-result{text-align:center;font-family:var(--hd);font-size:26px;font-weight:900;color:var(--ac);padding:8px;background:var(--abg2);border-radius:10px;margin:4px 0 8px;letter-spacing:1px}
.mp-divider{height:1px;background:var(--bdr);margin:8px 0}
.mp-slider-wrap{padding:4px 0 6px}
.mp-slider-label{text-align:center;font-family:var(--hd);font-size:15px;font-weight:700;color:var(--ac);margin-top:4px;min-height:20px}
.mp-actions{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding-top:8px}
.mp-btn{padding:9px 18px;background:var(--surf2);border:1px solid var(--bdr);border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;text-align:center;transition:all .12s;font-family:var(--bd);white-space:nowrap}
.mp-btn:active{transform:scale(.96)}
.mp-btn.accent{background:var(--abg2);border-color:var(--agl);color:var(--adk)}
.mp-content{flex:1;overflow-y:auto;margin:6px 0}
.mp-content::-webkit-scrollbar{width:2px}
.mp-content::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px}
.mp-live-score{display:flex;align-items:center;justify-content:center;gap:16px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:10px;padding:10px;margin:6px 0}
.mp-score-num{font-family:var(--hd);font-size:40px;font-weight:900;line-height:1}
.mp-score-sep{font-family:var(--hd);font-size:24px;color:var(--muted)}
.champ-title{font-family:var(--hd);font-size:17px;font-weight:800;color:var(--amber);letter-spacing:1px;margin-bottom:3px}
.champ-cd{font-family:var(--mn);font-size:12px;color:var(--muted);margin-top:3px}

/* Feed */
.fc{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:9px;overflow:hidden;animation:fadeUp .2s ease;box-shadow:var(--card-shadow)}
.fc.rwin{border-color:rgba(201,162,39,.4)}
.fc.rmiss{border-color:rgba(239,68,68,.2)}
.fc.streak{border-color:rgba(245,197,24,.3)}
.fc-head{padding:10px 12px;display:flex;align-items:flex-start;gap:8px}
.fc-av{width:33px;height:33px;border-radius:50%;background:var(--surf2);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;color:var(--muted)}
.fc-body{flex:1}
.fc-user{font-size:12px;font-weight:700;color:var(--text)}
.fc-time{font-size:12px;color:var(--muted);font-family:var(--mn);margin-left:auto;flex-shrink:0}
.fc-text{font-size:13px;color:var(--text);line-height:1.5;margin-top:2px}
.fc-sub{font-size:13px;color:var(--muted);margin-top:2px}
.rxrow{padding:6px 12px;border-top:1px solid var(--bdr);display:flex;gap:5px;flex-wrap:wrap}
.rxb{background:var(--bg);border:1px solid var(--bdr);border-radius:20px;padding:3px 7px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:2px}
.rxb.mine{border-color:var(--adk);background:var(--abg2)}
.rxb .rc{font-size:13px;color:var(--muted);font-family:var(--mn)}

/* Rankings */
.lbtabs{display:flex;background:var(--surf2);border:1px solid var(--bdr);border-radius:9px;overflow:hidden;margin-bottom:12px}
.lbt{flex:1;padding:9px;background:none;border:none;color:var(--muted);font-family:var(--bd);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.lbt.on{background:var(--ac);color:#000;font-weight:700}
.rc-card{display:flex;align-items:center;gap:9px;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:10px 12px;margin-bottom:7px;box-shadow:var(--card-shadow)}
.rc-card.me{border-color:var(--adk);background:var(--abg2)}
.rnum{font-family:var(--hd);font-size:24px;font-weight:900;width:30px;text-align:center;color:var(--muted);line-height:1;flex-shrink:0}
.rnum.gold{color:var(--gold)}.rnum.silver{color:var(--silver)}.rnum.bronze{color:var(--bronze)}
.rnat{font-size:17px;flex-shrink:0}
.ri{flex:1;min-width:0}
.rname{font-size:13px;font-weight:700;margin-bottom:2px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.rtitle{font-size:11px;font-weight:700;padding:1px 5px;border-radius:3px;background:var(--abg2);color:var(--adk)}
.rrec{font-family:var(--mn);font-size:12px;color:var(--muted)}
.rgrp{font-size:13px;color:var(--muted);margin-top:1px}
.rpts{text-align:right;flex-shrink:0}
.rpn{font-family:var(--hd);font-size:21px;font-weight:900;line-height:1;color:var(--ac)}
.rpl{font-size:11px;color:var(--muted);letter-spacing:1px}

/* Chat */
.chat-msgs{display:flex;flex-direction:column;gap:5px;overflow-y:auto;padding:4px 0}
.cmsg{display:flex;flex-direction:column;max-width:82%}
.cmsg.mine{align-self:flex-end;align-items:flex-end}
.cmsg.theirs{align-self:flex-start;align-items:flex-start}
.cbub{padding:8px 11px;border-radius:13px;font-size:13px;line-height:1.5;word-break:break-word}
.cmsg.mine .cbub{background:var(--ac);color:#000;border-bottom-right-radius:3px}
.cmsg.theirs .cbub{background:var(--surf2);color:var(--text);border-bottom-left-radius:3px}
.cmsg.bot .cbub{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:var(--amber)}
.csender{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px}
.ctime{font-size:11px;color:var(--muted);font-family:var(--mn);margin-top:2px}
.cimg{max-width:200px;border-radius:9px;display:block}
.cdate{text-align:center;font-size:11px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;padding:6px 0}
.cbar{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--surf);border-top:1px solid var(--bdr);display:none;flex-direction:column;z-index:50}
.cgif{display:none;padding:7px 10px;border-bottom:1px solid var(--bdr)}
.cgif-res{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;max-height:130px;overflow-y:auto}
.gthumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;cursor:pointer}
.crow{display:flex;align-items:center;gap:5px;padding:7px 9px}
.cinput{flex:1;background:var(--bg);border:1px solid var(--bdr);border-radius:8px;padding:8px 10px;font-family:var(--bd);font-size:13px;color:var(--text);outline:none;-webkit-appearance:none}
.cinput:focus{border-color:var(--adk)}
.csend{background:var(--ac);border:none;border-radius:8px;padding:7px 12px;font-family:var(--hd);font-size:13px;font-weight:700;color:#000;cursor:pointer;flex-shrink:0}
.mdrop{display:none;border-bottom:1px solid var(--bdr);background:var(--surf2);max-height:130px;overflow-y:auto}
.mdi{padding:9px 13px;font-size:13px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:7px}
.mdi:hover{background:var(--abg2);color:var(--adk)}

/* Live chat */
.lmsg{display:flex;align-items:flex-start;gap:7px;padding:5px 0;border-bottom:1px solid var(--bdr)}
.lmsg:last-child{border-bottom:none}
.lav{width:26px;height:26px;border-radius:50%;background:var(--surf2);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;color:var(--muted)}
.lb{flex:1}
.luser{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:5px;margin-bottom:1px}
.ltime{font-size:11px;color:var(--muted);font-family:var(--mn);margin-left:auto}
.ltext{font-size:12px;color:var(--text);line-height:1.5}
.lmsg.bot .luser{color:var(--amber)}
.lmsg.bot .ltext{color:var(--amber);font-weight:600}

/* Live question card */
.lqc{background:var(--abg2);border:1px solid var(--agl);border-radius:var(--r);padding:11px 12px;margin:7px 0;animation:popIn .3s ease}
.lqt{font-family:var(--hd);font-size:12px;font-weight:700;color:var(--ac);margin-bottom:7px;letter-spacing:.3px}
.lqopts{display:flex;gap:5px;flex-wrap:wrap}
.lqo{padding:5px 10px;background:var(--surf);border:1px solid var(--bdr);border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s}
.lqo:active{transform:scale(.95)}
.lqo.ans{border-color:var(--adk);background:var(--abg2);color:var(--adk);pointer-events:none}
.lqo.correct{border-color:var(--adk);background:var(--abg2);color:var(--adk)}
.lqo.wrong{border-color:var(--red);background:var(--rbg);color:var(--red)}
.lqexp{font-size:12px;color:var(--muted);font-family:var(--mn);margin-top:5px}

/* AI bots */
.bc{background:var(--surf);border:1px solid var(--bdr);border-radius:11px;padding:10px 12px;margin-bottom:7px;display:flex;align-items:center;gap:10px;box-shadow:var(--card-shadow)}
.bav{width:38px;height:38px;border-radius:50%;background:var(--surf2);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.bn{font-size:12px;font-weight:700}
.bs{font-size:13px;color:var(--muted);margin-top:1px}

/* Fixtures */
.stg{margin-bottom:16px}
.stgh{font-family:var(--hd);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--adk);padding:6px 0 5px;border-bottom:2px solid var(--ac);margin-bottom:6px}
.fxr{display:flex;align-items:center;padding:7px 0;border-bottom:1px solid var(--bdr);gap:6px}
.fxr:last-child{border-bottom:none}
.fxt{flex:1;font-size:12px;font-weight:600}
.fxvs{color:var(--muted);font-size:12px;margin:0 3px}
.fxrt{font-family:var(--mn);font-size:12px;color:var(--muted);text-align:right;flex-shrink:0}
.fxres{font-size:12px;font-weight:800;color:var(--ac);flex-shrink:0}
.fxmy{font-size:12px;color:var(--adk);margin-left:2px}

/* Admin */
.asec{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:13px;margin-bottom:10px;box-shadow:var(--card-shadow)}
.atitle{font-family:var(--hd);font-size:15px;font-weight:700;letter-spacing:1px;color:var(--adk);margin-bottom:10px}
.mrow{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--bdr);font-size:13px}
.mrow:last-child{border-bottom:none}
.rmb{background:none;border:1px solid var(--red);color:var(--red);border-radius:5px;padding:3px 7px;font-size:12px;cursor:pointer}
.ibox{background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;padding:9px;font-family:var(--mn);font-size:13px;color:var(--adk);word-break:break-all;margin-bottom:6px}
.rrow{display:flex;gap:6px;align-items:center;margin-top:6px}
.rsel{flex:1;background:var(--bg);border:1px solid var(--bdr);border-radius:7px;color:var(--text);font-family:var(--bd);font-size:12px;padding:6px 8px;outline:none}

/* Nat/team grids */
.ngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-height:300px;overflow-y:auto;padding:2px}
.nt{background:var(--surf);border:1px solid var(--bdr);border-radius:9px;padding:9px 3px;text-align:center;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:var(--card-shadow)}
.nt:active{transform:scale(.93)}
.nt.on{border-color:var(--ac);background:var(--abg2)}
.nf{font-size:20px}.nn{font-size:11px;font-weight:600;color:var(--muted)}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:300px;overflow-y:auto;padding:2px}
.tt{background:var(--surf);border:1px solid var(--bdr);border-radius:9px;padding:8px 3px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:var(--card-shadow)}
.tt:active{transform:scale(.93)}
.tt.picked{border-color:var(--amber);background:var(--abg)}

/* Modal */
.mov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;display:flex;align-items:flex-end;justify-content:center}
.mov.hidden{display:none}
.modal{background:var(--bg);border-radius:16px 16px 0 0;width:100%;max-width:480px;padding:18px 15px 34px;display:flex;flex-direction:column;gap:11px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 -4px 24px rgba(0,0,0,.1)}
.mtitle{font-family:var(--hd);font-size:18px;font-weight:800;color:var(--adk);letter-spacing:1px}
.mclose{position:absolute;top:12px;right:13px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer}

/* Toast */
#toast{position:fixed;bottom:82px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--surf);border:1px solid var(--bdr);border-radius:9px;padding:9px 14px;font-size:13px;z-index:9000;opacity:0;transition:all .22s;pointer-events:none;white-space:nowrap;max-width:90%;box-shadow:0 4px 16px rgba(0,0,0,.1)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{border-color:var(--adk);color:var(--adk)}
#toast.err{border-color:var(--red);color:var(--red)}
#sav{position:fixed;bottom:82px;left:50%;transform:translateX(-50%);background:var(--surf);border:1px solid var(--adk);border-radius:9px;padding:7px 14px;font-size:12px;color:var(--adk);z-index:9001;display:none;align-items:center;gap:6px;box-shadow:0 4px 16px rgba(0,0,0,.1)}
#sav.show{display:flex}

/* Install banner */
#ib{display:none;position:fixed;bottom:76px;left:50%;transform:translateX(-50%);width:calc(100% - 26px);max-width:454px;background:var(--surf);border:1px solid var(--agl);border-radius:12px;padding:10px 12px;z-index:400;align-items:center;gap:8px;box-shadow:var(--card-shadow)}
#ib.show{display:flex}

/* Sign-up promo banner */
#signup-banner{display:none;position:fixed;bottom:76px;left:50%;transform:translateX(-50%);width:calc(100% - 26px);max-width:454px;background:linear-gradient(135deg,var(--surf),rgba(245,197,24,.07));border:1px solid rgba(245,197,24,.45);border-radius:12px;padding:10px 12px;z-index:400;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(245,197,24,.15),var(--card-shadow)}
#signup-banner.show{display:flex}

/* Social footer */
.sfoot{padding:18px 0 7px;text-align:center;border-top:1px solid var(--bdr);margin-top:18px}
.slinks{display:flex;justify-content:center;gap:11px;margin:9px 0}
.slink{width:33px;height:33px;border-radius:50%;background:var(--surf2);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;font-weight:700}
.slink:hover{border-color:var(--ac);color:var(--adk)}
.empty{text-align:center;padding:40px 16px;color:var(--muted);font-size:13px;line-height:2}
.ei{font-size:36px;margin-bottom:7px}

/* Promo pages (Employee Groups / Fan Groups) */
.promo-hero{background:linear-gradient(135deg,rgba(245,197,24,.13),rgba(245,197,24,.04));border:1px solid rgba(245,197,24,.28);border-radius:var(--r);padding:20px 16px;margin-bottom:16px;text-align:center}
.promo-hero-emoji{font-size:42px;line-height:1;margin-bottom:10px}
.promo-hero-title{font-family:var(--hd);font-size:26px;font-weight:400;color:var(--ac);letter-spacing:.5px;line-height:1.1;margin-bottom:10px}
.promo-hero-body{font-size:13px;color:var(--muted);line-height:1.75}
.promo-section{margin-bottom:16px}
.promo-sec-title{font-family:var(--hd);font-size:15px;font-weight:400;color:var(--text);letter-spacing:.5px;margin-bottom:9px}
.promo-why{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rsm);padding:4px 0;margin-bottom:0}
.promo-why-item{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border-bottom:1px solid var(--bdr);font-size:13px;color:var(--muted);line-height:1.55}
.promo-why-item:last-child{border-bottom:none}
.promo-why-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.promo-can{display:flex;flex-direction:column;gap:6px}
.promo-can-item{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rsm);padding:10px 13px;font-size:13px;color:var(--text);display:flex;align-items:center;gap:10px}
.promo-steps{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rsm);padding:2px 13px}
.promo-step-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--bdr);font-size:13px;color:var(--muted);line-height:1.55}
.promo-step-row:last-child{border-bottom:none}
.promo-cta-banner{background:linear-gradient(135deg,var(--ac),var(--adk));border-radius:var(--r);padding:20px 16px;text-align:center;margin:16px 0}
.promo-cta-tagline{font-family:var(--hd);font-size:22px;font-weight:400;color:#000;letter-spacing:2px;margin-bottom:8px}
.promo-cta-sub{font-size:13px;color:rgba(0,0,0,.72);line-height:1.6}
.promo-contact{background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--rsm);padding:14px 13px;text-align:center;font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:16px}

/* FAQ */
.faq-section-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--adk);padding:14px 0 5px}
.faq-section-label:first-child{padding-top:2px}
.faq-item{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rsm);margin-bottom:6px;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s;color:var(--text);gap:8px}
.faq-q:hover{background:var(--surf2)}
.faq-q.open{background:var(--abg2);color:var(--adk)}
.faq-arr{font-size:10px;color:var(--muted);transition:transform .2s;flex-shrink:0}
.faq-q.open .faq-arr{transform:rotate(180deg);color:var(--adk)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease;font-size:13px;color:var(--muted);line-height:1.75;padding:0 13px}
.faq-a.open{max-height:500px;padding:0 13px 13px}
/* Terms */
.tc-clause{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rsm);padding:13px;margin-bottom:8px}
.tc-h{font-family:var(--hd);font-size:14px;font-weight:700;color:var(--adk);margin-bottom:5px;letter-spacing:.3px}
.tc-p{font-size:13px;color:var(--muted);line-height:1.75}

/* Ad overlay */
.ad-ov{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);z-index:9999;display:flex;align-items:center;justify-content:center;padding:12px}
.ad-ov.hidden{display:none}
.ad-box{position:relative;max-width:420px;width:100%;border-radius:14px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.ad-img{width:100%;display:block}
.ad-close{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);border:none;color:#fff;font-size:16px;line-height:1;width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ad-signup-btn{position:absolute;bottom:14px;right:14px;background:var(--ac);color:#000;border:none;border-radius:22px;padding:10px 20px;font-size:14px;font-weight:700;font-family:var(--bd);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:opacity .15s}
.ad-signup-btn:hover{opacity:.88}

/* Hero slideshow */
.hero-ss{position:relative;width:100%;overflow:hidden;background:#000;flex-shrink:0}
.hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;will-change:opacity}
.hero-slide.active{opacity:1}
.hero-dots{position:absolute;bottom:16px;left:14px;display:flex;gap:7px;z-index:2}
.hero-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .3s,transform .3s;cursor:pointer}
.hero-dot.active{background:var(--ac);transform:scale(1.25)}