/* RootBet games: Weekend Predictor + RootBet Spin (loaded after styles.css) */
.gpage{max-width:1240px;margin:0 auto;padding:16px}
.ghero{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);padding:30px 34px;min-height:220px;display:flex;align-items:center}
.ghero .copy{position:relative;z-index:2;max-width:560px}
.ghero h1{margin:0 0 10px;font:italic 800 52px/.95 var(--display);text-transform:uppercase}
.ghero h1 em{font-style:inherit;color:var(--accent)}
.ghero p{margin:0 0 16px;color:#b7c3d8;font-size:15px;max-width:500px}
.ghero .art{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:1}
.gh-pred{background:radial-gradient(600px 300px at 85% 45%,rgba(31,224,143,.24),transparent 60%),linear-gradient(110deg,#0a1324 40%,#0b2a24)}
.gh-spin{background:radial-gradient(600px 320px at 85% 50%,rgba(255,197,61,.24),transparent 60%),linear-gradient(110deg,#0a1324 40%,#2a220b)}
.gh-spin .eyebrow,.gh-spin h1 em{color:var(--gold)}
.ghero-meta{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 12px;line-height:1.3;border-radius:20px;background:rgba(5,9,18,.55);border:1px solid rgba(255,255,255,.12);font-size:12.5px;font-weight:700;color:#d6deeb}
.pill .ic{width:15px;height:15px}
.pill.prize{color:var(--gold);border-color:rgba(255,197,61,.35)}
.pill.live{color:var(--accent);border-color:rgba(31,224,143,.35)}

.glayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;margin-top:16px}
.gside{display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(var(--hdr) + 16px)}
.ghead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.gnote{margin-left:auto;font-size:12px;color:var(--faint);font-weight:600}
.gfoot{display:flex;align-items:center;gap:14px;padding:14px;border-top:1px solid var(--line);background:var(--bg-2);border-radius:0 0 var(--r) var(--r);position:sticky;bottom:0}
.gfoot .btn{margin-left:auto;min-width:200px}
.gstatus{font-size:12.5px;color:var(--muted);font-weight:600}
.gstatus.warn{color:var(--gold)}
.gstatus.ok{color:var(--accent)}

/* predictor fixtures */
.pf{padding:14px;border-top:1px solid var(--line)}
.pf:first-child{border-top:0}
.pf-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:10px;flex-wrap:wrap}
.pf-meta b{color:var(--text);font-weight:600}
.pf-state{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:var(--panel-3);color:var(--muted)}
.pf-state.open{background:var(--accent-soft);color:var(--accent)}
.pf-state.pts3{background:var(--accent);color:var(--accent-ink)}
.pf-state.pts1{background:rgba(255,197,61,.16);color:var(--gold)}
.pf-state.pts0{background:rgba(255,84,112,.12);color:var(--down)}
.pf-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.pf-team{font-weight:700;font-size:15px;min-width:0;overflow-wrap:anywhere}
.pf-team.home{text-align:right}
.pf-score{display:flex;align-items:center;gap:10px}
.pf-score .dash{color:var(--faint);font-weight:800}
.stepper{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2);overflow:hidden}
.stepper button{width:34px;height:46px;border:0;background:none;color:var(--muted);font-size:20px;font-weight:600;line-height:1}
.stepper button:hover{color:var(--text);background:var(--panel-2)}
.stepper input{width:40px;height:46px;border:0;outline:0;background:none;text-align:center;font:italic 800 26px/1 var(--display);color:var(--text);padding:0}
.stepper input::placeholder{color:var(--faint)}
.stepper:focus-within{border-color:rgba(31,224,143,.6)}
.pf.set .stepper{border-color:rgba(31,224,143,.35)}
.pf.locked .stepper{opacity:.55}
.pf.locked .stepper button{visibility:hidden;width:10px}
.pf-result{margin-top:8px;text-align:center;font-size:12px;color:var(--muted)}
.pf-result b{color:var(--text)}

/* leaderboard */
.lb{padding:14px 16px}
.lb .card-title .ic{color:var(--accent)}
.lb .meta{margin-left:auto;font-size:11.5px;color:var(--faint);font-weight:600}
.lb ol{list-style:none;margin:0;padding:0}
.lb li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.lb li:first-child{border-top:0}
.lb .rk{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--panel-3);color:var(--muted);font-weight:800;font-size:12px;flex:none}
.lb li:nth-child(1) .rk{background:var(--gold);color:#1d1400}
.lb li:nth-child(2) .rk{background:#cfd8e8;color:#10182a}
.lb li:nth-child(3) .rk{background:#d9975b;color:#2a1604}
.lb .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .pt{font-weight:800;font-variant-numeric:tabular-nums}
.lb .pt small{color:var(--faint);font-weight:600;margin-left:4px}
.lb li.you{background:var(--accent-soft);margin:0 -8px;padding:8px;border-radius:10px;border-top-color:transparent}
.lb .empty-lb{color:var(--muted);font-size:13px;padding:6px 0}
.lb .me-row{margin-top:8px;padding-top:10px;border-top:1px dashed var(--line-2);font-size:13px;color:var(--muted)}
.lb .me-row b{color:var(--text)}
.howto{padding:14px 16px}
.howto h4{margin:0 0 8px;font-size:14px}
.howto ul{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.7}
.howto p{margin:10px 0 0;font-size:12px;color:var(--faint)}
.me-chip{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line-2);font-weight:700;font-size:13.5px}
.me-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* spin machine */
.machine{padding:18px;display:flex;flex-direction:column;align-items:center;gap:16px;background:radial-gradient(420px 220px at 50% 38%,rgba(255,197,61,.08),transparent 70%),var(--panel)}
.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:520px}
.m-stats div{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center}
.m-stats small{display:block;font-size:11px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.m-stats b{font:italic 800 26px/1.1 var(--display)}
.reels-wrap{position:relative;padding:12px;border-radius:22px;background:linear-gradient(180deg,#1c2a47,#0c1426);border:1px solid #2c3d62;box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.reels{--cell:104px;display:grid;grid-template-columns:repeat(3,var(--cell));gap:8px}
.reel{height:calc(var(--cell) * 3);overflow:hidden;border-radius:14px;background:linear-gradient(180deg,#0a1120,#101a2e 50%,#0a1120);position:relative}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:22px;z-index:2;pointer-events:none}
.reel::before{top:0;background:linear-gradient(#0a1120,transparent)}
.reel::after{bottom:0;background:linear-gradient(transparent,#0a1120)}
.strip{will-change:transform}
.sym{height:var(--cell);display:grid;place-items:center}
.sym svg{width:68%;height:68%;transition:transform .25s}
.sym.win svg{animation:symWin .9s ease-in-out 2}
@keyframes symWin{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.lines{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);pointer-events:none;z-index:3}
.lines polyline{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 6px rgba(255,197,61,.8));transition:opacity .2s}
.lines polyline.on{opacity:.9}
.m-result{min-height:26px;font-weight:700;font-size:15px;color:var(--muted);text-align:center}
.m-result.win{color:var(--accent)}
.m-result.big{color:var(--gold);font:italic 800 26px/1 var(--display);text-transform:uppercase}
.spin-btn{width:100%;max-width:360px;height:60px;border-radius:16px;font:italic 800 26px/1 var(--display);text-transform:uppercase;letter-spacing:1px;background:linear-gradient(180deg,#ffd466,#f5b21e);color:#231700;box-shadow:0 10px 26px rgba(255,197,61,.28)}
.spin-btn:hover{filter:brightness(1.05)}
.spin-btn[disabled]{background:var(--panel-3);color:var(--muted);box-shadow:none;opacity:1}
.paytable{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%;max-width:560px}
.paytable div{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:8px 4px;text-align:center}
.paytable svg{width:34px;height:34px;display:block;margin:0 auto 4px}
.paytable b{display:block;font-size:13px}
.paytable small{font-size:10.5px;color:var(--faint);font-weight:600}
.fine{font-size:12px;color:var(--faint);text-align:center;max-width:520px;margin:0}

/* shared bits */
[hidden]{display:none!important}
.mnav a{text-decoration:none}
.new{font-size:9.5px;background:var(--gold);color:#1d1400;border-radius:20px;padding:1px 6px;font-weight:800;letter-spacing:.3px}
.join-note{margin:10px 0 0;font-size:12px;color:var(--faint);text-align:center}

@media (max-width:980px){
  .glayout{grid-template-columns:minmax(0,1fr)}
  .gside{position:static}
  .gpage{padding:12px}
}
@media (max-width:680px){
  .ghero{padding:22px 20px;min-height:0}
  .ghero h1{font-size:40px}
  .ghero p{font-size:13.5px}
  .ghero .art{width:60%;opacity:.35}
  .gfoot{flex-wrap:wrap;bottom:calc(64px + env(safe-area-inset-bottom))}
  .gfoot .btn{width:100%;margin-left:0}
  .pf-row{gap:8px}
  .pf-team{font-size:13.5px}
  .stepper button{width:26px;height:42px;font-size:18px}
  .stepper input{width:32px;height:42px;font-size:24px}
  .pf-score{gap:6px}
  .reels{--cell:88px;gap:6px}
  .reels-wrap{padding:10px}
  .lines{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
  .paytable{grid-template-columns:repeat(3,1fr)}
  .m-stats b{font-size:22px}
}
@media (max-width:360px){.reels{--cell:78px}}