/* ===== MY PREDICTOR · Liquid Glass components (uses tokens.css; loaded after styles.css on every page) =====
   Real backdrop blur only on the nav bars / sticky scroller and an open dialog's backdrop (≤2 blurred layers on screen).
   Cards are glass made of layered gradients, a 1px luminous border and an inset highlight — no per-card blur, GPU-cheap. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
html{background:var(--bg-navy)}
body{font-family:var(--font);background:var(--bg-navy);color:var(--text);letter-spacing:.004em}
.num,.pct,.pt,.cd span,time,.tnum{font-variant-numeric:tabular-nums}
::selection{background:rgba(139,92,246,.45)}
a{color:var(--primary-blue)}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--primary-blue);outline-offset:3px}
/* ambient light: soft gradient blobs, transform-only drift (no filter blur) */
.bg{background:radial-gradient(1100px 620px at 6% -10%,rgba(0,212,255,.13),transparent 62%),radial-gradient(900px 560px at 108% 6%,rgba(139,92,246,.17),transparent 60%),radial-gradient(900px 700px at 50% 118%,rgba(6,182,212,.10),transparent 60%),var(--bg-navy)}
.bg .orb{filter:none!important;opacity:.6;will-change:transform;animation:mpdrift 28s ease-in-out infinite alternate}
.bg .o1{width:540px;height:540px;left:-220px;top:-200px;background:radial-gradient(circle,rgba(0,212,255,.30),transparent 65%)}
.bg .o2{width:480px;height:480px;right:-200px;top:26%;background:radial-gradient(circle,rgba(139,92,246,.34),transparent 65%);animation-duration:34s}
.bg .o3{width:580px;height:580px;left:16%;bottom:-320px;background:radial-gradient(circle,rgba(6,182,212,.20),transparent 65%);animation-duration:40s}
.bg .grid{opacity:.28}
@keyframes mpdrift{to{transform:translate3d(70px,60px,0) scale(1.12)}}
/* glass surfaces */
.glass,.card,.mc,.lncard,.wcard,.slip,.mpcard{position:relative;background:var(--glass-fill);border:1px solid var(--glass-border);border-radius:var(--r-lg);box-shadow:var(--spec),var(--depth);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.glass::before,.card::before,.mc::before,.mpcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 30%,transparent 72%,rgba(139,92,246,.06))}
.card>*,.mc>*,.mpcard>*{position:relative}
.mc,.lncard,.mpcard{transition:transform var(--t-med) var(--ease),border-color var(--t-fast),box-shadow var(--t-med) var(--ease)}
@media(hover:hover){.mc:hover,.lncard:hover,.mpcard:hover{transform:translate3d(0,-3px,0);border-color:var(--glass-light);box-shadow:var(--spec),var(--glow-blue)}}
.mc:active,.mpcard:active{transform:scale(.99)}
.sheen{overflow:hidden}
.sheen::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);transform:skewX(-18deg);opacity:0}
@media(hover:hover){.sheen:hover::after{animation:mpsheen .9s var(--ease) forwards}}
@keyframes mpsheen{0%{left:-60%;opacity:1}100%{left:130%;opacity:0}}
.slip{border-color:rgba(0,212,255,.26);background:linear-gradient(160deg,rgba(0,212,255,.09),rgba(255,255,255,.02) 50%),rgba(15,23,42,.6)}
.slip.safe{border-color:rgba(139,92,246,.32);background:linear-gradient(160deg,rgba(139,92,246,.13),rgba(255,255,255,.02) 50%),rgba(15,23,42,.6)}
.next{background:var(--grad-brand)!important;background-size:200% 200%!important;animation:mpgrad 9s ease-in-out infinite alternate!important;box-shadow:0 20px 50px -25px rgba(0,212,255,.6)}
.next .in{background:linear-gradient(180deg,rgba(15,23,42,.97),rgba(5,11,24,.98))!important}
@keyframes mpgrad{to{background-position:100% 0}}
.cd span{background:var(--glass-fill-2);border-color:var(--glass-border);box-shadow:var(--spec)}
.pill{background:var(--glass-fill);border-color:var(--glass-border);box-shadow:var(--spec);color:var(--text-3)}
.pill.live i{background:var(--warning-orange)}
.h{font-style:normal;letter-spacing:-.01em;font-weight:800}
.h span{background:linear-gradient(90deg,var(--text),#cbf6ff 45%,var(--primary-blue));-webkit-background-clip:text;background-clip:text}
h1{font-style:normal!important;letter-spacing:-.02em;font-weight:800}
.t-pred{background:linear-gradient(90deg,var(--text),var(--primary-blue),var(--secondary-purple),var(--text))!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important}
.logo svg{filter:drop-shadow(0 0 12px rgba(0,212,255,.45))}
.day{color:var(--text-2)}
.bar{background:rgba(255,255,255,.07)}
.bar i{background:var(--grad-pred)}
.bar.toss i{background:linear-gradient(90deg,var(--text-3),var(--secondary-purple))}
.hit,.mc.done .teams .win{color:var(--success-green)!important;text-shadow:none!important}
.mc:not(.done) .teams .win{color:var(--primary-blue)!important;text-shadow:none!important}
.miss{color:var(--danger-red)!important}
.mc.islive{border-color:rgba(245,158,11,.55)!important;box-shadow:0 0 0 1px rgba(245,158,11,.22),0 0 24px rgba(245,158,11,.14)!important}
.pk b{color:var(--secondary-purple)}.pk .pct{color:#c4b5fd}
.btn{color:#04121a;background:var(--grad-brand);box-shadow:0 8px 24px -8px rgba(0,212,255,.6),var(--spec)}
.btn.ghost{color:var(--text);background:var(--glass-fill);border-color:var(--glass-border)}
.chips button{background:var(--glass-fill);border-color:var(--glass-border);color:var(--text-2);transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--ease)}
.chips button:active{transform:scale(.96)}
.chips button[aria-pressed=true]{background:linear-gradient(180deg,rgba(0,212,255,.30),rgba(0,212,255,.12)),var(--glass-dark);color:var(--text);border-color:rgba(0,212,255,.6);box-shadow:var(--glow-blue)}
.pt tr.q{background:linear-gradient(90deg,rgba(16,185,129,.10),transparent)}
.pt tr.q td:first-child{color:var(--success-green)}
.pt td.pts{color:var(--primary-blue)}
.crown{border-color:rgba(139,92,246,.35)}
.crown .lbl{color:#c4b5fd}
.mcd,.lnd{background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(5,11,24,.99))!important;border:1px solid var(--glass-light)!important;box-shadow:0 -20px 60px -20px rgba(0,212,255,.35),var(--spec)}
.mcd::backdrop{background:rgba(5,11,24,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mcd .x{background:var(--glass-fill-2)!important;border-color:var(--glass-light)!important}
select,input[type=search],input[type=text]{font:inherit;color:var(--text);background:var(--glass-fill);border:1px solid var(--glass-border);border-radius:12px;padding:8px 12px;box-shadow:var(--spec)}
select option{background:var(--glass-dark)}
.tabs{background:var(--glass-bar)!important;backdrop-filter:var(--blur)!important;-webkit-backdrop-filter:var(--blur)!important;border-bottom:1px solid var(--glass-border)!important}
.tabs a{background:transparent;border-color:transparent;color:var(--text-3)}
.tabs a:hover,.tabs a.on{background:linear-gradient(180deg,rgba(0,212,255,.24),rgba(0,212,255,.08))!important;border-color:rgba(0,212,255,.45)!important;color:var(--text)}
/* ===== site navigation (floating glass navbar · mobile bottom bar) ===== */
.gnav{position:relative;z-index:30;max-width:1180px;margin:12px auto 0;padding:0 12px}
.gnav .nb{display:flex;align-items:center;gap:10px;height:var(--nav-h);padding:0 8px 0 14px;border-radius:999px;background:var(--glass-bar);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-light);box-shadow:var(--spec),0 16px 40px -20px rgba(0,0,0,.9)}
.gnav .bk{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:800;letter-spacing:-.01em;white-space:nowrap;font-size:16px}
.gnav .bk svg{filter:drop-shadow(0 0 10px rgba(0,212,255,.5))}
.gnav .bk b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.gnav .links{position:relative;display:flex;gap:2px;margin-left:auto}
.gnav .links a{position:relative;z-index:1;text-decoration:none;color:var(--text-3);font-weight:700;font-size:14px;padding:9px 14px;border-radius:999px;transition:color var(--t-fast)}
.gnav .links a:hover,.gnav .links a[aria-current=page]{color:var(--text)}
.gnav .ind,.bnav .ind{position:absolute;z-index:0;left:0;top:0;height:100%;border-radius:999px;background:linear-gradient(180deg,rgba(0,212,255,.30),rgba(0,212,255,.10));border:1px solid rgba(0,212,255,.5);box-shadow:var(--spec),0 6px 20px -8px rgba(0,212,255,.7);transition:transform .45s var(--ease),width .45s var(--ease),opacity .2s;pointer-events:none}
.bnav{display:none}
@media(max-width:760px){
  .gnav .links{display:none}
  .gnav.home{display:none}
  .gnav{margin-top:10px}
  .gnav .nb{height:52px}
  .bnav{display:flex;position:fixed;z-index:40;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:var(--bnav-h);border-radius:22px;background:var(--glass-bar);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-light);box-shadow:var(--spec),0 18px 40px -16px rgba(0,0,0,.95);padding:6px}
  .bnav a{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--text-3);font-size:10.5px;font-weight:700;border-radius:16px;transition:color var(--t-fast)}
  .bnav a span{font-size:19px;line-height:1}
  .bnav a[aria-current=page]{color:var(--text)}
  .bnav .ind{top:6px;height:auto;bottom:6px;border-radius:16px}
  body{padding-bottom:calc(var(--bnav-h) + 22px + env(safe-area-inset-bottom))}
}
/* two-way scroll reveal */
.gr{opacity:0;transform:translate3d(0,18px,0) scale(.985);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.gr.gin{opacity:1;transform:none}
/* skeleton shimmer */
.skel{position:relative;overflow:hidden;border-radius:var(--r-md);background:rgba(255,255,255,.05);min-height:64px;margin-bottom:10px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:mpshim 1.3s infinite}
@keyframes mpshim{to{transform:translateX(100%)}}
.mpfoot{max-width:1180px;margin:40px auto 0;padding:22px 16px 34px;color:var(--text-3);font-size:12.5px;border-top:1px solid var(--glass-border)}
.mpfoot a{color:var(--text-2)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .gr{opacity:1!important;transform:none!important}
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .gnav .nb,.bnav,.tabs,.pmside{background:var(--glass-solid)!important}
}
/* home: all-sports teaser card */
.teaser{display:grid;gap:4px;padding:18px;text-decoration:none;color:var(--text);border-color:rgba(0,212,255,.3)}
.teaser .tk{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-cyan);font-weight:800}
.teaser .tt{font-size:22px;font-weight:800}.teaser .tt b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.teaser .ts{color:var(--text-2);font-size:13.5px}.teaser .tsc{font-size:20px;letter-spacing:4px;margin:4px 0 8px}
.teaser .btn{justify-self:start}