/* ═══════════════════════════════════════
    RESET & TOKENS
═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --background-color:#06080f;--background-secondary-color:#0c1018;--background-third-color:#101520;
    --border:rgba(255,255,255,.065);
    --primary-color:#00d4ff;--primary-color-rgb:0,212,255;
    --secondary-color:#ff3060;--secondary-color-rgb:255,48,96;
    --third-color:#ffd000;
    --fourth-color:#dce6f0;--fifth-color:#4e6070;--live:#ff3060;
    --font-family:'Barlow Condensed',sans-serif;
    --secondary-font-family:'Barlow',sans-serif;
    --r:14px;
}
html{scroll-behavior:smooth}
body{
    background:var(--background-color);color:var(--fourth-color);font-family:var(--secondary-font-family);
    min-height:100vh;overflow-x:hidden;
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
}

/* ── canvas + overlays ── */
#bgCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");background-size:512px;opacity:.7}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,transparent 50%,rgba(0,0,0,.65) 100%)}
header,#partnerBar,.hero,.scoreboard,.section-header,.filters,.games-grid,.empty,.page-end,#notifBanner,#extSlider{position:relative;z-index:10}

/* ═══════════════════════════════════════
    NOTIFICATION BANNER
═══════════════════════════════════════ */
#notifBanner{
    position:fixed;top:0;left:0;right:0;z-index:300;
    background:linear-gradient(135deg,rgba(10,15,26,.97),rgba(14,20,34,.97));
    border-bottom:1px solid rgba(var(--primary-color-rgb),.15);
    backdrop-filter:blur(16px);padding:14px 16px;
    display:flex;align-items:flex-start;gap:12px;
    transform:translateY(-110%);transition:transform .5s cubic-bezier(.32,0,.15,1.1);
    box-shadow:0 8px 40px rgba(0,0,0,.6);
}
#notifBanner.show{transform:translateY(0)}
.nb-icon{width:36px;height:36px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,var(--primary-color),rgba(0,212,255,.4));display:flex;align-items:center;justify-content:center}
.nb-icon svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:2;stroke-linecap:round}
.nb-body{flex:1}
.nb-title{font-family:var(--font-family);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px}
.nb-sub{font-size:12px;color:var(--primary-color);line-height:1.45}
.nb-actions{display:flex;gap:8px;margin-top:10px}
.nb-yes{flex:1;background:var(--background-color);border:none;border-radius:8px;font-family:var(--font-family);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary-color);padding:8px 12px;cursor:pointer;transition:opacity .2s}
.nb-yes:hover{opacity:.85}
.nb-no{background:transparent;border:1px solid var(--border);border-radius:8px;font-family:var(--font-family);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-color);padding:8px 12px;cursor:pointer}
.nb-close{background:none;border:none;color:var(--fifth-color);font-size:var(--secondary-font-size, 18px);cursor:pointer;flex-shrink:0;padding:2px}

/* ═══════════════════════════════════════
    HEADER
═══════════════════════════════════════ */
header{padding:18px 20px 0;display:flex;align-items:center;justify-content:center;opacity:0;animation:fadeDown .6s .08s forwards}
.logo{display:flex;align-items:center;justify-content:center}
.logo-mark{width:50vw;display:flex;align-items:center;justify-content:center}
.logo-mark svg{width:100%;height:auto}
.logo-mark img{width:100%;height:auto;object-fit:contain}
.header-right{display:flex;align-items:center;gap:8px}
.lang-switcher{list-style:none;margin:1rem 0 0;padding:0;display:flex;align-items:center;justify-content:center;gap:6px}
.lang-switcher li a{display:block;line-height:0}
.lang-switcher li img{width:45px;height:45px;border-radius:50%;object-fit:cover;transition:opacity .2s,transform .2s;cursor:pointer;border: 5px solid var(--primary-color);}
.lang-switcher li img:hover{opacity:1;transform:scale(1.12)}
.bell-btn{position:relative;background:var(--background-secondary-color);border:1px solid var(--border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s;flex-shrink:0}
.bell-btn svg{width:16px;height:16px;fill:none;stroke:var(--primary-color);stroke-width:2;stroke-linecap:round;transition:stroke .2s}
.bell-btn.granted{border-color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}
.bell-btn.granted svg{stroke:var(--primary-color)}
.bell-btn.denied{opacity:.4;cursor:default}
.bell-badge{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--live);border:2px solid var(--background-color);display:none}
.bell-btn.has-badge .bell-badge{display:block}

/* ═══════════════════════════════════════
    HERO
═══════════════════════════════════════ */
.hero{padding:24px 20px 18px;opacity:0;animation:fadeDown .6s .22s forwards;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-eyebrow{display:none;align-items:center;gap:7px;margin-bottom:8px}
.hero-dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live);animation:blink 1.2s ease-in-out infinite}
.hero-eyebrow-text{font-family:var(--font-family);font-size:var(--secondary-font-size, 11px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--primary-color)}
.hero-title{font-family:var(--font-family);font-size:var(--font-size, clamp(38px,11vw,58px));font-weight:900;line-height:.92;letter-spacing:-.01em;text-transform:uppercase;color:var(--primary-color);font-style:italic;text-shadow: 3px 1px 2px var(--secondary-color);}
.hero-title em{font-style:normal;background:linear-gradient(90deg,var(--primary-color) 0%,#7b6fff 50%,var(--secondary-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{margin-bottom:0.5rem;font-size:var(--secondary-font-size, 13px);color:var(--primary-color);line-height:var(--secondary-font-size);max-width:280px;margin-top:2rem;text-shadow: 3px 1px 2px var(--secondary-color);}

/* ═══════════════════════════════════════
    SCOREBOARD
═══════════════════════════════════════ */
.scoreboard{
    margin:4px 20px 22px;position:relative;overflow:hidden;
    background:var(--background-secondary-color);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;
    display:flex;align-items:center;justify-content:space-between;
    opacity:0;animation:fadeUp .6s .35s forwards;
}
.scoreboard::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--primary-color-rgb),.05) 0%,transparent 55%);pointer-events:none}
.scoreboard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--primary-color-rgb),.3),transparent)}
.team{text-align:center;flex:1}
.team-name{font-family:var(--font-family);font-size:var(--secondary-font-size, 12px);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fifth-color);margin-bottom:4px}
.team-score{font-family:var(--font-family);font-size:var(--font-size, 48px);font-weight:900;line-height:1;transition:color .3s}
.team--home .team-score{color:var(--primary-color);text-shadow:0 0 24px rgba(var(--primary-color-rgb),.3)}
.vs-block{text-align:center;padding:0 8px}
.vs-period{font-family:var(--font-family);font-size:var(--secondary-font-size, 11px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fifth-color);margin-bottom:6px}
.live-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(var(--secondary-color-rgb),.12);border:1px solid rgba(var(--secondary-color-rgb),.28);border-radius:20px;padding:4px 10px;font-family:var(--font-family);font-size:var(--secondary-font-size, 11px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--live)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--live);animation:blink 1s ease-in-out infinite}
.vs-clock{font-size:var(--secondary-font-size, 11px);color:var(--fifth-color);font-family:var(--font-family);letter-spacing:.05em;margin-top:5px}

/* ═══════════════════════════════════════
    SECTION & FILTERS
═══════════════════════════════════════ */
.section-header{padding:0 20px 11px;display:flex;align-items:baseline;justify-content:space-between;opacity:0;animation:fadeUp .6s .45s forwards}
.section-title{font-family:var(--font-family);font-size:var(--font-size, 21px);font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.section-count{font-family:var(--font-family);font-size:var(--secondary-font-size, 13px);color:var(--fifth-color);font-weight:600;letter-spacing:.05em}
.section-right{display:flex;align-items:center;gap:10px}
.section-header{align-items:center}
.filters{padding:0 20px 16px;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;opacity:0;animation:fadeUp .6s .5s forwards}
.filters::-webkit-scrollbar{display:none}
.filter-btn{flex-shrink:0;font-family:var(--font-family);font-size:var(--secondary-font-size, 12px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--background-secondary-color);border:1px solid var(--border);border-radius:20px;color:var(--primary-color);padding:6px 14px;cursor:pointer;transition:all .2s;white-space:nowrap}
.filter-btn.active,.filter-btn:hover{background:var(--primary-color);border-color:var(--primary-color);color:#000}

/* ═══════════════════════════════════════
    GAME CARDS — CORE STRUCTURE
═══════════════════════════════════════ */
.games-grid{padding:0 20px;display:flex;flex-direction:column;gap:10px}

.game-card{
    position:relative;overflow:hidden;border-radius:var(--r);
    border:1px solid var(--border);cursor:pointer;
    opacity:0;
    transform:translateY(32px) scale(.97);
    transition:
    opacity .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1),
    box-shadow .18s,
    border-color .18s;
}
/* scroll-reveal — JS adds this class via IntersectionObserver */
.game-card.appear{
    opacity:1;
    transform:translateY(0) scale(1);
}
.game-card:active{transform:scale(.975) !important}
.game-card:hover{border-color:rgba(var(--primary-color-rgb),.28);box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 1px rgba(var(--primary-color-rgb),.07)}
.game-card[data-closed="1"]{opacity:.38 !important;cursor:default;transform:none !important}
.game-card[data-closed="1"]:hover{border-color:var(--border);box-shadow:none}

/* ── card layers ── */
.card-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(135deg,var(--background-secondary-color),var(--background-third-color));     background: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .3) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
    animation: pulseGlow 3s ease-in-out infinite;
}
.card-body{position:relative;z-index:2;padding:15px 15px 13px;display:flex;align-items:center;gap:13px}
.card-footer{position:relative;z-index:2;padding:9px 15px 13px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.06)}

/* ── emoji icon ── */
.card-emoji{font-size:2.5rem;flex-shrink:0;line-height:1}

/* ── text ── */
.card-info{flex:1;min-width:0}
.card-name{font-family:var(--font-family);font-size:var(--secondary-font-size, 22px);font-weight:900;letter-spacing:.02em;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-desc{font-size:var(--secondary-font-size, 12px);color:rgba(255,255,255,.48);margin-top:4px;line-height:1.35}
.card-name img{max-width: 150px;}
/* ── arrow ── */
.card-arrow{width:30px;height:30px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,1);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s}
.card-arrow svg{width:12px;height:12px;fill:none;stroke:rgba(255,255,255,.4);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.game-card:hover .card-arrow{background:var(--primary-color);border-color:var(--primary-color);transform:translateX(2px)}
.game-card:hover .card-arrow svg{stroke:#000}

/* ── chips ── */
.card-meta{display:flex;align-items:center;gap:6px}
.chip{font-family:var(--font-family);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:5px;padding:3px 7px}
.chip-players{background:rgba(255,255,255,.07);color:rgba(255,255,255,.38)}
.chip-open  {background:#00d97a;color:#003a20}
.chip-live  {background:var(--secondary-color);animation:pulseBg 1.4s ease-in-out infinite}
.chip-soon  {background:var(--third-color);color:#2a1e00}
.chip-closed{background:rgba(255,255,255,.1);color:rgba(255,255,255,.28)}
.card-prize{font-family:var(--font-family);font-size:var(--secondary-font-size, 12px);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--third-color)}

/* ═══════════════════════════════════════
    CARD BACKGROUND ART — animated per module
    All animations are CSS-only, zero JS.
    ::before = primary fx  ::after = secondary fx
═══════════════════════════════════════ */

/* ── QUIZ — spinning conic burst + breathing aurora ── */
@keyframes quizSpin   {from{--quiz-angle:0deg} to{--quiz-angle:360deg}}
@keyframes quizPulse  {0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.12)}}
@property --quiz-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

.bg-quiz{background:var(--background-color)}
.bg-quiz::before{
    content:'';position:absolute;inset:0;
    background:conic-gradient(from var(--quiz-angle,0deg) at 18% 50%,
    transparent 0deg,rgba(255,255,255,.12) 3deg,transparent 6deg 22deg,
    rgba(255,255,255,.06) 24deg,transparent 27deg 50deg,
    rgba(255,255,255,.08) 52deg,transparent 55deg 90deg,
    rgba(255,255,255,.04) 92deg,transparent 95deg 180deg,
    rgba(255,255,255,.03) 182deg,transparent 185deg 360deg);
    animation:quizSpin 18s linear infinite;
}
.bg-quiz::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 100px 70px at 18% 50%,rgba(255,255,255,.15) 0%,transparent 65%);
    animation:quizPulse 3s ease-in-out infinite;
}

/* ── WHEEL — rotating arc segments + breathing ring ── */
@keyframes wheelSpin  {from{transform:translateY(-50%) rotate(0deg)} to{transform:translateY(-50%) rotate(360deg)}}
@keyframes wheelGlow  {0%,100%{box-shadow:0 0 0 8px rgba(255,255,255,.03),inset 0 0 28px rgba(255,255,255,.03)} 50%{box-shadow:0 0 0 14px rgba(255,255,255,.05),inset 0 0 40px rgba(255,255,255,.06)}}
@keyframes conicSpin  {from{--conic-start:10deg} to{--conic-start:370deg}}
@property --conic-start{syntax:'<angle>';initial-value:10deg;inherits:false}

.bg-wheel{background:var(--background-color)}
.bg-wheel::before{
    content:'';position:absolute;inset:0;
    background:conic-gradient(from var(--conic-start,10deg) at 110% 50%,
    rgba(255,255,255,.12) 0deg,rgba(255,255,255,.06) 48deg,
    transparent 49deg 95deg,rgba(255,255,255,.08) 96deg,
    rgba(255,255,255,.04) 140deg,transparent 141deg 185deg,
    rgba(255,255,255,.06) 186deg,transparent 225deg 275deg,
    rgba(255,255,255,.03) 276deg 320deg,transparent 321deg 360deg);
    animation:conicSpin 8s linear infinite;
}
.bg-wheel::after{
    content:'';position:absolute;right:-28px;top:50%;transform:translateY(-50%);
    width:110px;height:110px;border-radius:50%;
    border:16px solid rgba(255,255,255,.06);
    animation:wheelGlow 2.5s ease-in-out infinite;
}

/* ── PREDICT — pulsing rings + scanning sweep ── */
@keyframes ringPulse  {0%,100%{box-shadow:0 0 0 18px rgba(255,255,255,.03),0 0 0 36px rgba(255,255,255,.02),0 0 0 54px rgba(255,255,255,.01)} 50%{box-shadow:0 0 0 26px rgba(255,255,255,.05),0 0 0 48px rgba(255,255,255,.03),0 0 0 70px rgba(255,255,255,.01)}}
@keyframes scanSweep  {0%{opacity:0;transform:translateY(-50%) rotate(0deg)} 10%{opacity:1} 90%{opacity:1} 100%{opacity:0;transform:translateY(-50%) rotate(360deg)}}

.bg-predict{background:var(--background-color)}
.bg-predict::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 50%,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 32%,transparent 60%)}
.bg-predict::after{
    content:'';position:absolute;left:-22px;top:50%;transform:translateY(-50%);
    width:110px;height:110px;border-radius:50%;border:1px solid rgba(255,255,255,.08);
    animation:ringPulse 3s ease-in-out infinite;
}

/* ── FAN CAM — iris breathe + shutter flicker ── */
@keyframes irisBreath {0%,100%{transform:translateY(-50%) scale(1);opacity:.22} 50%{transform:translateY(-50%) scale(1.18);opacity:.38}}
@keyframes radFlicker {0%,100%{opacity:1} 45%{opacity:.65} 47%{opacity:1} 80%{opacity:.8} 82%{opacity:1}}

.bg-cam{background:var(--background-color)}
.bg-cam::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 85px 55px at 16% 50%,rgba(255,255,255,.12) 0%,transparent 65%),
            linear-gradient(100deg,rgba(255,255,255,.02) 0%,transparent 40%);
    animation:radFlicker 4s ease-in-out infinite;
}
.bg-cam::after{
    content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);
    width:80px;height:80px;border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 0 20px rgba(255,255,255,.04);
    animation:irisBreath 2.8s ease-in-out infinite;
}

/* ── JACKPOT — drifting stripes + jackpot throb ── */
@keyframes stripeDrift{from{background-position:0 0} to{background-position:40px 40px}}
@keyframes jackpotGlow{0%,100%{opacity:.38;transform:scaleX(1)} 50%{opacity:.62;transform:scaleX(1.08)}}

.bg-jackpot{background:var(--background-color)}
.bg-jackpot::before{
    content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(-52deg,transparent 0px,transparent 13px,rgba(255,255,255,.03) 13px,rgba(255,255,255,.03) 15px);
    background-size:40px 40px;
    animation:stripeDrift 3s linear infinite;
}
.bg-jackpot::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 120px 65px at 16% 50%,rgba(255,255,255,.12) 0%,transparent 60%);
    animation:jackpotGlow 2s ease-in-out infinite;
}

/* ── LIVE POLL — morphing waveform + glow pulse ── */
@keyframes waveMorph{
    0%,100%{clip-path:polygon(0 55%,14% 15%,28% 40%,42% 5%,56% 28%,70% 12%,84% 20%,100% 8%,100% 100%,0 100%)}
    25%    {clip-path:polygon(0 40%,14% 22%,28% 55%,42% 18%,56% 8%,70%  25%,84% 10%,100% 30%,100% 100%,0 100%)}
    50%    {clip-path:polygon(0 60%,14% 10%,28% 30%,42% 45%,56% 15%,70% 35%,84% 5%,100% 20%,100% 100%,0 100%)}
    75%    {clip-path:polygon(0 45%,14% 30%,28% 12%,42% 35%,56% 50%,70%  8%,84% 30%,100% 14%,100% 100%,0 100%)}
}
@keyframes pollGlow   {0%,100%{opacity:.38} 50%{opacity:.58}}

.bg-poll{background:var(--background-color)}
.bg-poll::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 75px 55px at 14% 60%,rgba(255,255,255,.12) 0%,transparent 65%);
    animation:pollGlow 2.2s ease-in-out infinite;
}
.bg-poll::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:60%;
    background:linear-gradient(to top,rgba(255,255,255,.04),transparent);
    clip-path:polygon(0 55%,14% 15%,28% 40%,42% 5%,56% 28%,70% 12%,84% 20%,100% 8%,100% 100%,0 100%);
    animation:waveMorph 5s ease-in-out infinite;
}

/* ── TRIVIA — electric flicker + bolt strobe ── */
@keyframes triviaFlash{0%,100%{opacity:.42} 10%{opacity:.18} 12%{opacity:.55} 40%{opacity:.42} 60%{opacity:.22} 62%{opacity:.48} 90%{opacity:.42}}
@keyframes boltDrift  {0%,100%{transform:translateY(-50%) rotate(-6deg) scaleY(1)} 50%{transform:translateY(-52%) rotate(-4deg) scaleY(1.1)}}

.bg-trivia{background:var(--background-color)}
.bg-trivia::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(130deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.06) 35%,transparent 60%),
            radial-gradient(ellipse 90px 55px at 15% 42%,rgba(255,255,255,.1) 0%,transparent 62%);
    animation:triviaFlash 3.5s ease-in-out infinite;
}
.bg-trivia::after{
    content:'';position:absolute;left:-4px;top:50%;
    transform:translateY(-50%) rotate(-6deg);
    width:0;height:0;
    border-left:22px solid transparent;border-right:22px solid transparent;border-bottom:50px solid rgba(255,255,255,.04);
    filter:blur(2px);
    animation:boltDrift 2.4s ease-in-out infinite;
}

/* ── DANCE — waveform bars animate heights ── */
@keyframes waveShift{
    0%,100%{box-shadow:7px -6px 0 #fff,14px 4px 0 #fff,21px -9px 0 #fff}
    25%    {box-shadow:7px  4px 0 #fff,14px -8px 0 #fff,21px  2px 0 #fff}
    50%    {box-shadow:7px -10px 0 #fff,14px 2px 0 #fff,21px -4px 0 #fff}
    75%    {box-shadow:7px  0px 0 #fff,14px -6px 0 #fff,21px  8px 0 #fff}
}
@keyframes danceGlow  {0%,100%{opacity:.42} 50%{opacity:.7}}

.bg-dance{background:var(--background-color)}
.bg-dance::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 85px 48px at 15% 50%,rgba(255,255,255,.12) 0%,transparent 62%),
            linear-gradient(90deg,rgba(255,255,255,.02) 0%,transparent 50%);
    animation:danceGlow 2s ease-in-out infinite;
}
.bg-dance::after{
    content:'';position:absolute;left:45px;right:0;top:50%;transform:translateY(-50%);
    height:2px;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent);
    box-shadow:0 -11px 0 1px rgba(255,255,255,.06),0 11px 0 1px rgba(255,255,255,.04),0 -22px 0 1px rgba(255,255,255,.02),0 22px 0 1px rgba(255,255,255,.02);
}
.icon-dance-unused{
    display:none;
}

/* ═══════════════════════════════════════
    EMPTY + SPACER
═══════════════════════════════════════ */
.empty{text-align:center;padding:40px 20px;display:none;position:relative;z-index:10}
.empty-line{width:40px;height:3px;background:var(--border);border-radius:2px;margin:0 auto 14px}
.empty-text{font-family:var(--font-family);font-size:var(--font-size, 17px);font-weight:700;color:var(--fifth-color);text-transform:uppercase;letter-spacing:.06em}
.page-end{height:28px}

/* ═══════════════════════════════════════
    EXTERNAL LINKS SLIDER
═══════════════════════════════════════ */
#extSlider{
    position:fixed;bottom:0;left:0;right:0;z-index:150;
    padding:6px 0 calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,rgba(6,8,15,.98) 55%,rgba(6,8,15,.3) 100%);
    backdrop-filter:blur(16px);border-top:1px solid var(--border);
    transform:translateY(110%);transition:transform .55s cubic-bezier(.32,0,.15,1.1);
}
#extSlider.show{transform:translateY(0)}
.slider-lbl{font-family:var(--font-family);font-size:var(--secondary-font-size, 9px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fifth-color);padding:0 20px 5px}
.slider-viewport{overflow:hidden;padding:2px 0 3px;cursor:grab;user-select:none}
.slider-viewport:active{cursor:grabbing}
.slider-track{display:flex;gap:8px;padding:0 20px;will-change:transform}
.ext-card{flex-shrink:0;display:flex;align-items:center;gap:9px;background:var(--background-third-color);border:1px solid var(--border);border-radius:12px;padding:9px 14px;text-decoration:none;min-width:145px;transition:border-color .2s,transform .15s,box-shadow .2s;position:relative;overflow:hidden}
.ext-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--ec-bg,rgba(255,255,255,.03)),transparent)}
.ext-card:hover{border-color:var(--ec,rgba(255,255,255,.2));box-shadow:0 4px 20px rgba(0,0,0,.4)}
.ext-card:active{transform:scale(.95)}
.ext-card-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0;background:var(--ec-bg,rgba(255,255,255,.08));display:flex;align-items:center;justify-content:center}
.ext-card-icon svg{width:16px;height:16px;fill:none;stroke:var(--ec,#fff);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ext-info{min-width:0}
.ext-name{font-family:var(--font-family);font-size:var(--secondary-font-size, 13px);color:var(--primary-color);font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ext-sub{font-size:var(--secondary-font-size, 10px);color:var(--fifth-color);white-space:nowrap;margin-top:1px}

/* ═══════════════════════════════════════
    SCAN / QR CODE OVERLAY
═══════════════════════════════════════ */
body.scan header .logo{display:none}
.scan-overlay{display:flex;flex-direction:row;height:100vh;position:fixed;inset:0;z-index:50}
.scan-qr{width:50%;display:flex;align-items:center;justify-content:center;padding:20px}
.scan-qr img{width:calc(var(--qr-size,12vw) * 4);min-width:350px;max-width:90%;height:auto;border-radius:12px}
.scan-text{width:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}
.scan-logo{display:block;max-width:280px;max-height:200px;width:auto;height:auto;object-fit:contain;margin:0 auto 2rem}
.scan-title{font-family:var(--font-family);font-size:clamp(2rem,4vw,4rem);font-weight:900;text-transform:uppercase;color:var(--primary-color);font-style:italic;line-height:.95;text-shadow:3px 1px 2px var(--secondary-color);text-align:center}
.scan-intro{margin-top:1rem;font-size:clamp(1.1rem,2vw,2rem);color:var(--primary-color);line-height:1.3;text-align:center}
@media(max-width:768px){
  .scan-overlay{display:none;flex-direction:column;height:auto;position:relative}
  .scan-qr,.scan-text{width:100%}
  .scan-qr img{min-width:250px;width:60vw}
}

/* ═══════════════════════════════════════
    MODAL
═══════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
    width:100%;background:var(--background-third-color);border-radius:22px 22px 0 0;
    border-top:1px solid var(--border);
    padding:0;
    transform:translateY(100%);transition:transform .32s cubic-bezier(.32,0,.15,1.1);
    max-height:92vh;overflow-y:auto;position:relative;z-index:201;
}
.modal-overlay.open .modal{transform:translateY(0)}

/* ── Full-width art banner at top of modal ── */
.modal-banner{
    position:relative;width:100%;height:160px;
    overflow:hidden;flex-shrink:0;
}
/* handle sits above the banner */
.modal-handle{
    position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;
    width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);
}
/* the art background fills the banner */
.modal-banner-bg{
    position:absolute;inset:0;z-index:0;
}
/* large centered icon inside the banner */
.modal-banner-icon{
    position:absolute;inset:0;z-index:2;
    display:flex;align-items:center;justify-content:center;
}
/* subtle bottom fade from banner into modal body */
.modal-banner::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:50px;z-index:3;
    background:linear-gradient(to bottom,transparent,var(--background-third-color));
}
/* bottom-left badge overlay on banner */
.modal-banner-status{
    position:absolute;bottom:16px;left:16px;z-index:4;
    display:flex;align-items:center;gap:6px;
}
/* modal content body below banner */
.modal-body{padding:4px 20px calc(36px + env(safe-area-inset-bottom,0px))}

.modal-title{font-family:var(--font-family);font-size:var(--font-size, 30px);font-weight:900;letter-spacing:.02em;text-transform:uppercase;margin-bottom:5px}
.modal-desc{font-size:var(--secondary-font-size, 13px);color:var(--fifth-color);line-height:1.6;margin-bottom:18px}
.modal-stats{display:flex;gap:8px;margin-bottom:22px}
.modal-stat{flex:1;background:var(--background-color);border:1px solid var(--border);border-radius:11px;padding:11px;text-align:center}
.stat-val{font-family:var(--font-family);font-size:var(--font-size, 21px);font-weight:900;color:var(--primary-color)}
.stat-label{font-size:var(--secondary-font-size, 10px);color:var(--primary-color);margin-top:2px;letter-spacing:.05em}
.modal-cta{width:100%;border:none;border-radius:13px;font-family:var(--font-family);font-size:var(--secondary-font-size, 16px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:var(--background-secondary-color);color:var(--secondary-color);padding:16px;cursor:pointer;transition:opacity .2s,transform .15s;margin:0 0 0}
.modal-cta:active{transform:scale(.97);opacity:.9}
.modal-bg-close{position:absolute;inset:0;z-index:200}

/* ═══════════════════════════════════════
    KEYFRAMES — global
═══════════════════════════════════════ */
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes fadeUp  {from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}
@keyframes blink   {0%,100%{opacity:1}50%{opacity:.22}}
@keyframes pulseBg {0%,100%{opacity:1}50%{opacity:.72}}
@keyframes bellRing{0%,100%{transform:rotate(0)}20%{transform:rotate(17deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}80%{transform:rotate(-5deg)}}
.bell-btn.ring{animation:bellRing .65s ease}

/* Shimmer sweep — plays once on card appear */
@keyframes cardShimmer{
    0%  {transform:translateX(-100%) skewX(-12deg);opacity:0}
    15% {opacity:1}
    100%{transform:translateX(250%) skewX(-12deg);opacity:0}
}
.card-shimmer{
    position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:var(--r);
}
.card-shimmer::after{
    content:'';position:absolute;top:0;left:0;width:45%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
    transform:translateX(-100%) skewX(-12deg);
    animation:cardShimmer .9s ease forwards;
}

/* ═══════════════════════════════════════
    SPORTS WIDGET
═══════════════════════════════════════ */
.sports-widget{width:100%;border-radius:14px;background:rgba(255,255,255,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);margin:12px 20px;overflow:hidden;opacity:0;animation:fadeDown .5s .3s forwards;font-family:var(--font-family);text-transform:uppercase;max-width:calc(100% - 40px)}
.sw-tabs{display:flex;gap:2px;padding:4px;background:rgba(0,0,0,.15)}
.sw-tab{flex:1;padding:6px 8px;border:none;border-radius:8px;background:transparent;color:rgba(255,255,255,.5);font-size:1.5rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;text-transform:uppercase;letter-spacing:.03em}
.sw-tab:hover{color:rgba(255,255,255,.8)}
.sw-tab.active{background:rgba(255,255,255,.12);color:#fff}
.sw-content{padding:6px;min-height:60px}
.sw-loading{display:flex;align-items:center;justify-content:center;padding:18px 0;color:rgba(255,255,255,.4);font-size:1.5rem;gap:8px}
.sw-loading::after{content:'';width:14px;height:14px;border:2px solid rgba(255,255,255,.15);border-top-color:rgba(255,255,255,.6);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sw-empty{text-align:center;padding:14px 8px;color:rgba(255,255,255,.35);font-size:.95rem}
.sw-game{display:flex;align-items:center;padding:6px 8px;border-radius:8px;transition:background .15s}
.sw-game+.sw-game{margin-top:2px}
.sw-game:hover{background:rgba(255,255,255,.04)}
.sw-team{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.sw-team.away{flex-direction:row-reverse;text-align:right}
.sw-team img{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.sw-team .name{font-size:1.5rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.9)}
.sw-center{display:flex;flex-direction:column;align-items:center;flex-shrink:0;padding:0 6px}
.sw-status{font-size:1.5rem;font-weight:700;text-transform:uppercase;line-height:1;margin-bottom:1px}
.sw-status.live{color:#22c55e}
.sw-status.finished{color:rgba(255,255,255,.35)}
.sw-status.scheduled{color:var(--primary-color)}
.sw-scores{display:flex;align-items:center;gap:4px;font-size:1.5rem;font-weight:700;color:var(--primary-color)}
.sw-scores .sep{color:rgba(255,255,255,.25);font-weight:300;font-size:.7rem}
.sw-standings{width:100%;border-collapse:collapse}
.sw-standings th{padding:4px 6px;font-size:1.5rem;font-weight:700;text-transform:uppercase;color:rgba(255,255,255,.3);text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
.sw-standings th:nth-child(2){text-align:left}
.sw-standings td{padding:5px 6px;font-size:1.5rem;text-align:center;color:rgba(255,255,255,.8)}
.sw-standings td:nth-child(2){text-align:left}
.sw-standings tr+tr td{border-top:1px solid rgba(255,255,255,.04)}
.sw-standings .sw-rank{font-weight:700;color:rgba(255,255,255,.4);width:20px}
.sw-standings .sw-team-cell{display:flex;align-items:center;gap:6px}
.sw-standings .sw-team-cell img{width:16px;height:16px;object-fit:contain;flex-shrink:0}
.sw-standings .sw-team-cell .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.sw-standings .sw-pts{font-weight:700;color:#fff}
.sw-pool-header{font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:10px 8px 4px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:2px}
.sw-pool-header:not(:first-child){margin-top:12px}
.sw-race{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px}
.sw-race+.sw-race{margin-top:2px}
.sw-race:hover{background:rgba(255,255,255,.04)}
.sw-race-round{font-size:1.5rem;font-weight:700;color:rgba(255,255,255,.3);min-width:22px;text-align:center}
.sw-race-name{flex:1;font-size:1.5rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.9)}
.sw-race-date{font-size:1.5rem;font-weight:600;color:rgba(255,255,255,.5);white-space:nowrap}
.sw-more{display:block;width:100%;text-align:center;margin-top:6px;font-size:1.5rem;font-weight:700;background:rgba(255,255,255,.1);border:none;border-top:1px solid rgba(255,255,255,.1);cursor:pointer;letter-spacing:.03em;font-family:inherit;transition:all .2s;border-radius:0 0 10px 10px}
.sw-more:hover{background:rgba(255,255,255,.16)}
.sw-more::after{content:' \25BE';font-size:1.5rem;margin-left:4px}
.sw-more.expanded::after{content:' \25B4'}

.section-header, .filters{ display: none; }