/* =========================================================================
   World Cup 2026 — SA-MP betting event. Theme: GTA-SA luxury gold on dark.
   No icon fonts: visuals use real images (flags, gold ball, stadium) + CSS.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.cdnfonts.com/css/pricedown');

:root{
  --bg-0:#0b0805; --bg-1:#15100a; --panel:#1b140c; --panel-2:#241a0f;
  --gold-1:#ffe9a8; --gold-2:#f6c659; --gold-3:#d4a017; --gold-4:#9c6f12;
  --cream:#f3e9d6; --cream-ink:#2a2018;
  --green-1:#3fc06a; --green-2:#1c7a3c;
  --red:#e0503f; --red-2:#b5392b;
  --line:rgba(246,198,89,.16); --line-2:rgba(246,198,89,.32);
  --txt:#f1e7d3; --txt-dim:#b6a684; --txt-mut:#8a7c61;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --r:16px;
  --display:'Pricedown','Anton',sans-serif;
  --head:'Oswald',sans-serif;
  --body:'Be Vietnam Pro',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--body); color:var(--txt); background:var(--bg-0);
  min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
::selection{background:var(--gold-3);color:#1a1208}

/* ---------- Animated stadium background ---------- */
#bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:var(--bg-0)}
#bg .photo{
  position:absolute;inset:-6%;
  background:url('/assets/stadium.jpg') center/cover no-repeat;
  filter:brightness(.34) saturate(.85) contrast(1.05);
  animation:kenburns 38s ease-in-out infinite alternate;
}
#bg .grad{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(246,198,89,.16), transparent 55%),
    radial-gradient(90% 70% at 90% 110%, rgba(212,160,23,.12), transparent 60%),
    linear-gradient(180deg, rgba(8,6,3,.55), rgba(8,6,3,.86) 60%, rgba(6,4,2,.97));
}
#bg .spot{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;mix-blend-mode:screen}
#bg .s1{width:540px;height:540px;left:-120px;top:-140px;background:radial-gradient(circle,#f6c659,transparent 70%);animation:drift1 24s ease-in-out infinite alternate}
#bg .s2{width:460px;height:460px;right:-120px;top:30%;background:radial-gradient(circle,#c9882a,transparent 70%);animation:drift2 30s ease-in-out infinite alternate}
#bg .grain{position:absolute;inset:0;opacity:.05;background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-1.5%, -1.5%)}}
@keyframes drift1{from{transform:translate(0,0)}to{transform:translate(80px,60px)}}
@keyframes drift2{from{transform:translate(0,0)}to{transform:translate(-70px,-50px)}}

/* ---------- Shared bits ---------- */
.gold-text{
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 45%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ball{display:inline-block;background:url('/assets/ball_gold.png') center/contain no-repeat}
.wrap{width:100%;max-width:1460px;margin:0 auto;padding:0 18px}
.hidden{display:none !important}

/* gold button */
.btn-gold{
  position:relative;border-radius:12px;padding:13px 20px;font-family:var(--head);
  font-weight:700;letter-spacing:.5px;color:#3a2708;
  background:linear-gradient(180deg,#ffe7a0,#f3c050 38%,#cf971f);
  box-shadow:0 6px 18px rgba(180,120,20,.4), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(120,80,10,.5);
  transition:transform .12s, box-shadow .2s, filter .2s; text-transform:uppercase;
}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-gold:active{transform:translateY(1px) scale(.99)}
.btn-gold:disabled{filter:grayscale(.6) brightness(.7);cursor:not-allowed;transform:none}
.btn-green{
  background:linear-gradient(180deg,#5fe089,#34b25e 40%,#178a3c);
  color:#06230f;box-shadow:0 8px 22px rgba(20,140,60,.45), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-ghost{
  border:1px solid var(--line-2);border-radius:12px;padding:12px 18px;color:var(--gold-1);
  font-family:var(--head);font-weight:600;background:rgba(246,198,89,.05);transition:.2s;text-transform:uppercase;letter-spacing:.5px;
}
.btn-ghost:hover{background:rgba(246,198,89,.12);border-color:var(--gold-2)}

/* ============================ LOGIN ============================ */
#login{min-height:100vh;display:grid;place-items:center;padding:30px 16px;position:relative}
.login-card{
  width:min(420px,94vw);background:linear-gradient(180deg,rgba(34,26,15,.92),rgba(18,13,7,.96));
  border:1px solid var(--line-2);border-radius:24px;padding:34px 30px 30px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.4);backdrop-filter:blur(10px);
  animation:fadeUp .6s cubic-bezier(.2,.8,.2,1);
}
.brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:22px}
.brand .ball{width:74px;height:74px;filter:drop-shadow(0 10px 20px rgba(246,198,89,.4));animation:floatBall 4s ease-in-out infinite}
.brand h1{font-family:var(--display);font-size:34px;line-height:.95;letter-spacing:1px;text-align:center}
.brand .sub{font-family:var(--head);font-weight:600;letter-spacing:3px;font-size:12px;color:var(--txt-dim);text-transform:uppercase}
@keyframes floatBall{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(6deg)}}

.field-label{font-size:12px;color:var(--txt-dim);font-weight:600;letter-spacing:.5px;margin:0 0 7px 3px;text-transform:uppercase}
.field{
  width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line-2);border-radius:13px;
  padding:15px 16px;color:var(--txt);font-size:17px;font-weight:600;letter-spacing:.5px;transition:.2s;
}
.field:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(246,198,89,.16)}
.field::placeholder{color:var(--txt-mut)}

/* underline-only input with a line that grows from the centre outwards on focus */
.field-line-wrap{position:relative}
.field-line{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-2);border-radius:0;padding:13px 4px;color:var(--txt);font-size:18px;font-weight:600;letter-spacing:.5px;text-align:center}
.field-line:focus{outline:none}
.field-line::placeholder{color:var(--txt-mut)}
.field-line-wrap::after{content:'';position:absolute;left:50%;right:50%;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-1),var(--gold-2),var(--gold-3));transition:left .35s cubic-bezier(.2,.8,.2,1),right .35s cubic-bezier(.2,.8,.2,1)}
.field-line-wrap:focus-within::after{left:0;right:0}

.login-step{animation:fadeUp .45s cubic-bezier(.2,.8,.2,1)}
.login-err{min-height:20px;color:var(--red);font-size:13.5px;font-weight:600;text-align:center;margin-top:12px}

/* passcode */
.pass-user{text-align:center;color:var(--txt-dim);font-size:13px;margin-bottom:4px}
.pass-user b{color:var(--gold-1)}
.pass-title{text-align:center;font-family:var(--head);font-weight:600;font-size:18px;margin-bottom:18px;color:var(--cream)}
.dots{display:flex;justify-content:center;gap:18px;margin:6px 0 26px}
.dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);background:transparent;transition:.18s}
.dot.on{background:linear-gradient(180deg,var(--gold-1),var(--gold-3));border-color:var(--gold-2);box-shadow:0 0 12px rgba(246,198,89,.6);animation:dotPop .22s}
.dots.err .dot{border-color:var(--red)}
.dots.err{animation:shake .4s}
@keyframes dotPop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

.pad{display:grid;grid-template-columns:repeat(3,84px);gap:18px 22px;justify-content:center;margin:0 auto}
.key{
  width:84px;height:84px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:31px;font-weight:600;color:var(--cream);
  background:radial-gradient(circle at 50% 35%,rgba(246,198,89,.14),rgba(255,255,255,.04));
  border:1px solid var(--line);transition:.12s;user-select:none;position:relative;overflow:hidden;
}
.key:hover{border-color:var(--gold-2);color:var(--gold-1)}
.key:active{transform:scale(.92);background:radial-gradient(circle,rgba(246,198,89,.3),transparent)}
.key.fn{width:auto;height:auto;padding:8px 6px;border-radius:10px;font-size:14px;font-weight:600;background:transparent;border-color:transparent;color:var(--txt-dim);letter-spacing:.5px}
.key.fn:hover{color:var(--gold-1)}
.key.empty{visibility:hidden}

/* ============================ APP ============================ */
#app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(16,11,6,.92),rgba(16,11,6,.7));
  border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.topbar .row{display:flex;align-items:center;gap:14px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo .ball{width:40px;height:40px;filter:drop-shadow(0 6px 12px rgba(246,198,89,.4));animation:floatBall 5s ease-in-out infinite}
.brand .logo-mark{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));animation:logoBob 4.5s ease-in-out infinite}
@keyframes logoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.logo .ttl{font-family:var(--display);font-size:24px;line-height:.9;letter-spacing:.5px}
.brand-x{font-family:var(--head);font-weight:300;font-size:20px;color:var(--txt-mut);opacity:.7}
.brand-logo{height:38px;width:auto;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.brand-vn{font-family:var(--head);font-weight:700;font-size:13px;line-height:1.05;letter-spacing:1.5px;color:var(--gold-1);text-transform:uppercase;white-space:nowrap;text-align:right}
.spacer{flex:1}

/* login brand lockup (WC 2026 × SA-MP VN) */
.brand-lock{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px}
.brand-lock .brand-wc{font-family:var(--display);font-size:20px;letter-spacing:.5px}
.brand-lock .brand-logo{height:40px}
.brand-lock .brand-samp{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:1.5px;line-height:1.15;color:var(--txt-dim)}

/* music toggle — animated equaliser bars (no icon font) */
.music-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:11px;background:rgba(246,198,89,.06);color:var(--txt-dim);font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.5px;transition:.2s}
.music-btn:hover{background:rgba(246,198,89,.14);color:var(--gold-1)}
.music-btn .eq{display:flex;align-items:flex-end;gap:2px;height:15px}
.music-btn .eq i{width:3px;height:6px;border-radius:2px;background:var(--gold-2)}
.music-btn.playing .eq i{animation:eq 0.9s ease-in-out infinite}
.music-btn.playing .eq i:nth-child(1){animation-delay:0s}
.music-btn.playing .eq i:nth-child(2){animation-delay:.25s}
.music-btn.playing .eq i:nth-child(3){animation-delay:.5s}
.music-btn:not(.playing) .eq i{height:4px;opacity:.5}
@keyframes eq{0%,100%{height:5px}50%{height:15px}}

.balances{display:flex;gap:9px}
.bal{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1;
  background:linear-gradient(180deg,rgba(246,198,89,.08),rgba(0,0,0,.28));
  border-radius:11px;padding:8px 13px;min-width:78px;transition:.25s;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.bal .k{font-size:9.5px;letter-spacing:1.5px;color:var(--txt-mut);font-weight:700;text-transform:uppercase}
.bal .v{font-family:var(--head);font-weight:700;font-size:17px;color:var(--gold-1);margin-top:3px}
.bal.flash{animation:balFlash .8s}
@keyframes balFlash{0%{background:rgba(246,198,89,.35);transform:scale(1.06)}100%{background:rgba(0,0,0,.34);transform:scale(1)}}

.user-chip{display:flex;align-items:center;gap:9px}
.user-chip .nm{font-weight:700;color:var(--cream);font-size:14px}
.logout{font-size:11px;color:var(--txt-dim);border:1px solid var(--line);border-radius:9px;padding:7px 10px;transition:.2s;font-weight:600;letter-spacing:.3px}
.logout:hover{color:var(--red);border-color:var(--red-2)}

/* tabs */
.tabs{display:flex;gap:8px;padding:14px 0 6px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  white-space:nowrap;font-family:var(--head);font-weight:600;font-size:13.5px;letter-spacing:.6px;
  color:var(--txt-dim);padding:9px 16px;border-radius:11px;border:1px solid transparent;transition:.2s;text-transform:uppercase;
}
.tab:hover{color:var(--gold-1)}
.tab.active{color:#3a2708;background:linear-gradient(180deg,#ffe7a0,#e9b53f);box-shadow:0 6px 16px rgba(200,140,30,.35)}
.tab .badge{display:inline-block;margin-left:6px;background:rgba(0,0,0,.25);border-radius:20px;padding:1px 7px;font-size:11px}
.tab.active .badge{background:rgba(58,39,8,.25)}

.section-banner{
  margin:18px 0 2px;padding:15px 20px;border-radius:16px;display:flex;align-items:center;gap:14px;
  background:linear-gradient(100deg,rgba(44,31,15,.75),rgba(20,14,8,.55));overflow:hidden;position:relative;
  box-shadow:inset 0 0 0 1px rgba(246,198,89,.06);
}
.section-banner .hero{position:absolute;inset:0;background:url('/assets/pitch.jpg') center/cover;opacity:.16;filter:saturate(.7)}
.section-banner h2{position:relative;font-family:var(--display);font-size:22px;letter-spacing:.5px}
.section-banner p{position:relative;color:var(--txt-dim);font-size:13px;margin-left:auto;text-align:right}

/* match grid */
.matches{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px;padding:16px 0 110px;align-items:start}
.card{
  background:linear-gradient(180deg,rgba(36,27,15,.86),rgba(18,12,7,.92));
  border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .18s, box-shadow .25s;
  animation:fadeUp .5s both;position:relative;
}
.card::after{content:'';position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(246,198,89,.08);pointer-events:none}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(246,198,89,.22)}
.card .chead{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid rgba(246,198,89,.08);font-size:12px;color:var(--txt-dim)}
.card .chead .grp{font-family:var(--head);font-weight:700;color:var(--gold-1);background:rgba(246,198,89,.1);border-radius:7px;padding:2px 9px;letter-spacing:.5px}
.card .chead .when{font-weight:600}
.card .chead .place{margin-left:auto;color:var(--txt-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}

.status-pill{font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:20px;text-transform:uppercase}
.st-open{color:#062;background:linear-gradient(180deg,#7fe6a0,#37b25f)}
.st-scheduled{color:var(--txt-dim);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.st-closed{color:#fff;background:rgba(180,90,40,.5)}
.st-settled{color:#3a2708;background:linear-gradient(180deg,#ffe7a0,#e0ad3a)}
.st-void{color:#fff;background:rgba(120,120,120,.4)}
.st-early{color:#3a2708;background:linear-gradient(180deg,#ffd87a,#e7a93b)}

.teams{display:flex;align-items:stretch;padding:16px 14px 6px;gap:8px}
.team{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;min-width:0}
.flag{width:62px;height:62px;border-radius:50%;object-fit:cover;border:2px solid var(--line-2);
  box-shadow:0 8px 18px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.3);background:#222}
.team .nm{font-weight:700;font-size:14.5px;color:var(--cream);line-height:1.15;word-break:break-word}
.vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 4px}
.vs .v{font-family:var(--display);font-size:20px;color:var(--gold-3);opacity:.8}
.vs .ko{font-size:10px;color:var(--txt-mut);font-weight:600}

.odds-row{display:flex;gap:12px;padding:10px 14px 16px}
.odds{
  flex:1;position:relative;border:none;cursor:pointer;overflow:hidden;border-radius:16px;
  padding:15px 10px 13px;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .14s, filter .2s, box-shadow .2s;
}
.odds::before{content:'';position:absolute;left:0;right:0;top:0;height:48%;background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);pointer-events:none;opacity:.55}
/* inner angular (octagonal) frame line — the "plaque" look from the reference */
.odds::after{content:'';position:absolute;inset:7px;z-index:1;pointer-events:none;
  clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)}
.odds-home::after{box-shadow:inset 0 0 0 2px rgba(255,246,210,.6)}
.odds-away::after{box-shadow:inset 0 0 0 2px rgba(255,206,172,.32)}
.odds-home{
  background:linear-gradient(180deg,#fdecaa 0%,#f2cd66 15%,#dca630 52%,#ba831d 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75), inset 0 -4px 8px rgba(120,80,10,.45), 0 8px 18px rgba(180,120,20,.35);
}
.odds-away{
  background:linear-gradient(180deg,#834236 0%,#5d2a22 34%,#3a1812 74%,#270e07 100%);
  box-shadow:inset 0 2px 0 rgba(255,190,160,.28), inset 0 -4px 8px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.4);
}
.odds:not(.disabled):hover{transform:translateY(-3px);filter:brightness(1.07)}
.odds:not(.disabled):active{transform:translateY(0) scale(.98)}
.odds.disabled{cursor:default}
.odds.lose{filter:grayscale(.6) brightness(.55);opacity:.75}
.odds.win{box-shadow:inset 0 0 0 2px var(--green-1), 0 0 22px rgba(63,192,106,.5)}
/* corner odds-ratio badge (home top-right, away top-left) */
.o-ratio{position:absolute;top:0;z-index:2;font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.5px;padding:4px 11px}
.odds-home .o-ratio{right:0;border-radius:0 16px 0 12px;background:rgba(58,39,8,.6);color:#ffe9a8}
.odds-away .o-ratio{left:0;border-radius:16px 0 12px 0;background:rgba(0,0,0,.42);color:#ffd6ad}
/* big embossed pick label */
.o-pick{position:relative;z-index:2;font-family:var(--head);font-weight:700;font-size:23px;letter-spacing:1.5px;line-height:1;margin-top:8px;white-space:nowrap;text-transform:uppercase}
.odds-home .o-pick{color:#3a2708;text-shadow:0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(120,80,10,.4);transform:translateX(-9px)}
.odds-away .o-pick{color:#ffe6d6;text-shadow:0 2px 5px rgba(0,0,0,.6);transform:translateX(9px)}
/* per-currency pool — vertical list */
.o-pool{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;width:100%;max-width:140px;margin-top:4px;font-family:var(--head);font-weight:700;font-size:11.5px;letter-spacing:.2px}
.o-pool span{display:flex;justify-content:space-between;gap:10px}
.o-pool em{font-style:normal}
.odds-home .o-pool{color:#7a5413}
.odds-home .o-pool em{color:#3a2708}
.odds-away .o-pool{color:#c9a48f}
.odds-away .o-pool em{color:#ffe6d6}

.result-line{padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--txt-dim);display:flex;align-items:center;gap:8px}
.result-line b{color:var(--gold-1)}

/* empty / loading */
.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--txt-dim)}
.empty .ball{width:54px;height:54px;opacity:.4;margin-bottom:14px;animation:floatBall 4s ease-in-out infinite}
.loader{grid-column:1/-1;display:flex;justify-content:center;padding:60px}
.spinner{width:46px;height:46px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold-2);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* my bets */
.bet-list{display:flex;flex-direction:column;gap:11px;padding:16px 0 90px}
.bet-item{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,rgba(33,25,14,.8),rgba(20,14,8,.9));border:1px solid var(--line);border-radius:14px;padding:13px 16px;animation:fadeUp .4s both}
.bet-item .mn{flex:1;min-width:0}
.bet-item .mn .t{font-weight:700;color:var(--cream);font-size:14px}
.bet-item .mn .d{font-size:12px;color:var(--txt-dim);margin-top:2px}
.bet-item .amt{text-align:right;font-family:var(--head);font-weight:700}
.bet-item .amt .s{color:var(--gold-1);font-size:16px}
.bet-item .amt .c{font-size:11px;color:var(--txt-mut)}
.bet-tag{font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:1px;padding:4px 9px;border-radius:20px;text-transform:uppercase}
.tag-pending{color:#3a2708;background:linear-gradient(180deg,#ffe7a0,#e0ad3a)}
.tag-won{color:#062;background:linear-gradient(180deg,#7fe6a0,#37b25f)}
.tag-lost{color:#fff;background:var(--red-2)}
.tag-refunded{color:#fff;background:rgba(120,120,120,.5)}

/* ============================ BET SLIP ============================ */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(4,3,1,.7);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;animation:fade .25s}
@media(min-width:640px){.overlay{align-items:center}}
.slip{
  width:min(460px,100vw);background:linear-gradient(180deg,#241a0f,#140d07);
  border:1px solid var(--line-2);border-radius:22px 22px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.7);
  animation:slipUp .35s cubic-bezier(.2,.9,.2,1);max-height:92vh;overflow:auto;
}
@media(min-width:640px){.slip{border-radius:22px}}
.slip-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:linear-gradient(180deg,#241a0f,#241a0fee);z-index:2}
.slip-head .ball{width:26px;height:26px}
.slip-head h3{font-family:var(--display);font-size:22px;letter-spacing:1px;flex:1}
.x-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);position:relative;transition:.2s}
.x-btn:hover{border-color:var(--red);background:rgba(224,80,63,.1)}
.x-btn::before,.x-btn::after{content:'';position:absolute;left:50%;top:50%;width:15px;height:2px;background:var(--txt-dim);border-radius:2px}
.x-btn::before{transform:translate(-50%,-50%) rotate(45deg)}
.x-btn::after{transform:translate(-50%,-50%) rotate(-45deg)}
.x-btn:hover::before,.x-btn:hover::after{background:var(--red)}

.slip-match{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px}
.slip-match .side{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;opacity:.45;transition:.25s;border-radius:12px;padding:8px 8px 16px}
.slip-match .side.sel{opacity:1;background:rgba(246,198,89,.08);box-shadow:0 0 0 1px var(--line-2)}
/* chips tossed onto a side, piled up */
.chip-stack{position:absolute;left:50%;bottom:6px;width:0;height:0;z-index:6;pointer-events:none}
.stack-chip{position:absolute;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;
  background:repeating-conic-gradient(var(--chip) 0 18deg,#fdfdfd 18deg 36deg);
  box-shadow:0 3px 7px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.35);display:grid;place-items:center;animation:stackDrop .22s ease-out}
.stack-chip::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--chip);
  background-image:radial-gradient(circle at 50% 30%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.stack-chip>span{position:relative;z-index:1;font-family:var(--head);font-weight:700;font-size:8.5px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.55)}
.stack-chip.light>span{color:#2a2018}
.stack-chip.chip-all{background:repeating-conic-gradient(#b8881f 0 18deg,#241a0c 18deg 36deg)}
.stack-chip.chip-all::before{background:radial-gradient(circle at 50% 33%,#ffe9a8,#c8911f)}
.stack-chip.chip-all>span{color:#3a2708;font-size:7px}
@keyframes stackDrop{from{transform:translateX(-50%) scale(1.5);opacity:.4}to{transform:translateX(-50%) scale(1);opacity:1}}
.slip-match .side img{width:54px;height:54px;border-radius:50%;border:2px solid var(--line-2);object-fit:cover}
.slip-match .side .nm{font-weight:700;font-size:13px;text-align:center;color:var(--cream)}
.slip-match .side .od{font-family:var(--head);font-weight:700;color:var(--gold-1);font-size:18px}
.slip-match .mid{font-family:var(--display);color:var(--gold-3);font-size:18px}

.slip-body{padding:0 18px 20px}
.lbl{font-size:11px;letter-spacing:1px;color:var(--txt-dim);font-weight:700;text-transform:uppercase;margin:14px 3px 8px}
.cur-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.cur{border:1px solid var(--line-2);border-radius:12px;padding:11px 6px;text-align:center;transition:.18s;background:rgba(0,0,0,.25)}
.cur:hover{border-color:var(--gold-2)}
.cur.sel{background:linear-gradient(180deg,rgba(246,198,89,.2),rgba(0,0,0,.2));border-color:var(--gold-2);box-shadow:0 0 0 1px var(--gold-3)}
.cur .cn{font-family:var(--head);font-weight:700;font-size:14px;color:var(--gold-1)}
.cur .cb{font-size:11px;color:var(--txt-mut);margin-top:3px;font-weight:600}

.stake-box{display:flex;align-items:center;gap:8px;margin-top:8px}
.stake-box .field{flex:1;font-family:var(--head);font-size:22px;text-align:right}
/* casino poker chips */
.clear-link{float:right;font-size:11px;color:var(--txt-mut);cursor:pointer;font-weight:600;letter-spacing:.5px;text-transform:none}
.clear-link:hover{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:14px}
.chip{position:relative;width:56px;height:56px;border-radius:50%;flex:0 0 auto;cursor:pointer;
  background:repeating-conic-gradient(var(--chip) 0 18deg, #fdfdfd 18deg 36deg);
  box-shadow:0 6px 14px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35);
  display:grid;place-items:center;transition:transform .14s, filter .2s;}
.chip::before{content:'';position:absolute;inset:7px;border-radius:50%;
  background:var(--chip);
  background-image:radial-gradient(circle at 50% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45), inset 0 -3px 7px rgba(0,0,0,.35);}
.chip span{position:relative;z-index:1;font-family:var(--head);font-weight:700;font-size:13px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);letter-spacing:.3px}
.chip.light span{color:#2a2018;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.chip:hover{transform:translateY(-3px) scale(1.05);filter:brightness(1.06)}
.chip:active{transform:scale(.9)}
.chip.pressed{animation:chipPop .32s}
@keyframes chipPop{0%{transform:scale(.86)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.chip-all{width:60px;height:60px;background:repeating-conic-gradient(#b8881f 0 18deg,#241a0c 18deg 36deg);animation:allinGlow 1.8s ease-in-out infinite}
.chip-all::before{background:radial-gradient(circle at 50% 33%,#ffe9a8,#c8911f);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.chip-all span{color:#3a2708;font-size:12px;text-shadow:none}
@keyframes allinGlow{0%,100%{box-shadow:0 6px 14px rgba(0,0,0,.55),0 0 6px rgba(246,198,89,.5)}50%{box-shadow:0 6px 14px rgba(0,0,0,.55),0 0 18px rgba(246,198,89,.95)}}
/* chip tossed onto the selected side */
.fly-chip{filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));border-radius:50%;animation:none !important}
.slip-match .side.hit{animation:sidePop .4s ease-out}
@keyframes sidePop{0%{transform:scale(1)}38%{transform:scale(1.09)}100%{transform:scale(1)}}

.payout{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:14px 16px;border-radius:13px;background:linear-gradient(100deg,rgba(40,28,14,.8),rgba(20,14,8,.7));border:1px solid var(--line)}
.payout .pl{font-size:12px;color:var(--txt-dim);font-weight:600}
.payout .pl small{display:block;color:var(--txt-mut);font-size:10.5px;margin-top:2px}
.payout .pv{font-family:var(--head);font-weight:700;font-size:26px;color:var(--green-1);transition:.2s}
.slip-err{min-height:18px;color:var(--red);font-size:13px;font-weight:600;text-align:center;margin-top:10px}
.place{width:100%;margin-top:14px;font-size:18px;padding:16px}
.slip-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:10.5px;line-height:1.55;color:var(--txt-mut);text-align:center}

/* ============================ TOAST ============================ */
#toasts{position:fixed;right:18px;top:18px;z-index:80;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{
  display:flex;gap:12px;align-items:flex-start;
  background:linear-gradient(180deg,#251b10,#160e07);border-radius:14px;
  padding:13px 16px 13px 13px;box-shadow:var(--shadow),inset 0 0 0 1px rgba(246,198,89,.14);
  animation:toastIn .4s cubic-bezier(.2,.9,.2,1);font-size:13.5px;font-weight:500;
}
.toast .t-ball{width:32px;height:32px;flex:0 0 auto;margin-top:1px;
  background:url('/assets/ball_gold.png') center/contain no-repeat;
  filter:drop-shadow(0 3px 7px rgba(246,198,89,.5));animation:floatBall 3.5s ease-in-out infinite}
.toast .t-body{flex:1;min-width:0}
.toast.ok{box-shadow:var(--shadow),inset 0 0 0 1px rgba(63,192,106,.4)}
.toast.err{box-shadow:var(--shadow),inset 0 0 0 1px rgba(224,80,63,.45)}
.toast .tt{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.5px;margin-bottom:2px;color:var(--gold-1)}
.toast.ok .tt{color:var(--green-1)}.toast.err .tt{color:var(--red)}
.toast.out{animation:toastOut .3s forwards}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slipUp{from{transform:translateY(60px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes toastIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(120%);opacity:0}}

/* responsive */
@media(max-width:620px){
  .topbar .row{flex-wrap:wrap;row-gap:10px}
  .balances{order:5;width:100%}
  .balances .bal{flex:1;min-width:0;align-items:center;padding:7px 8px}
  .bal .v{font-size:15px}
}
@media(max-width:560px){
  .logo .ttl{font-size:18px}
  .logo .brand-logo{height:30px}
  .logo .brand-x{font-size:16px}
  .music-btn .mtxt{display:none}
  .music-btn{padding:8px 10px}
  .user-chip .nm{display:none}
  .teams{padding-top:12px}
  .flag{width:54px;height:54px}
  .brand-lock .brand-samp{display:none}
}

/* =========================================================================
   v2 layout: stage with side banners · match-unit (card + top bettors) ·
   corner status tag · live badge/score · anonymity toggle
   ========================================================================= */

/* anonymity toggle (header) */
.pill-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:11px;background:rgba(246,198,89,.06);color:var(--txt-dim);font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.5px;transition:.2s}
.pill-btn:hover{background:rgba(246,198,89,.13);color:var(--gold-1)}
.pill-btn .sw{width:30px;height:17px;border-radius:20px;background:rgba(255,255,255,.12);position:relative;transition:.2s}
.pill-btn .sw::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--txt-dim);transition:.2s}
.pill-btn.on{color:var(--gold-1)}
.pill-btn.on .sw{background:linear-gradient(180deg,#ffe7a0,#d4a017)}
.pill-btn.on .sw::after{left:15px;background:#3a2708}

/* stage: left banner | center | right banner */
.stage{width:100%;max-width:1460px;margin:0 auto;padding:0 18px;display:flex;gap:20px;align-items:flex-start}
.center{flex:1;min-width:0}

/* matches become a vertical list of units (card + bettors side by side) */
.matches{display:flex;flex-direction:column;gap:15px;padding:14px 0 110px;align-items:stretch}
/* card + history panel joined seamlessly into one unit */
.match-unit{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:0;align-items:stretch;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);position:relative;animation:fadeUp .45s both}
.match-unit::after{content:'';position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(246,198,89,.1);pointer-events:none;z-index:6}
.match-unit.live{box-shadow:var(--shadow),0 0 24px rgba(63,192,106,.22)}
/* open-for-betting cards: pulsing golden glowing border (fade in/out) */
.match-unit.open{box-shadow:var(--shadow),0 0 14px rgba(246,198,89,.22)}
/* border flare line: quick bright bloom, then slow fade-out */
.match-unit.open::after{animation:openGlow 1.3s ease-out infinite}
@keyframes openGlow{
  0%{box-shadow:inset 0 0 0 1px rgba(246,198,89,.25), inset 0 0 4px rgba(246,198,89,.05)}
  8%{box-shadow:inset 0 0 0 2px rgba(246,220,150,.7), inset 0 0 28px rgba(246,198,89,.4)}
  62%{box-shadow:inset 0 0 0 1px rgba(246,198,89,.3), inset 0 0 8px rgba(246,198,89,.08)}
  100%{box-shadow:inset 0 0 0 1px rgba(246,198,89,.25), inset 0 0 4px rgba(246,198,89,.05)}
}
/* honeycomb hexagon flare: gold hex cells bloom in from the edges, fading toward the centre */
.match-unit.open::before{
  content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%23f6c659'/%3E%3C/svg%3E");
  background-size:24px 42px;
  -webkit-mask:radial-gradient(140% 135% at 50% 50%, transparent 14%, #000 74%);
  mask:radial-gradient(140% 135% at 50% 50%, transparent 14%, #000 74%);
  mix-blend-mode:screen;opacity:0;
  animation:hexFlare 1.3s ease-out infinite;
}
@keyframes hexFlare{
  0%{opacity:0}
  8%{opacity:.38}
  62%{opacity:.05}
  100%{opacity:0}
}
.match-unit .card{border-radius:0;box-shadow:none;background:linear-gradient(180deg,rgba(38,28,16,.9),rgba(22,15,9,.94));animation:none;transition:none}
.match-unit .card::after{display:none}
.match-unit .card:hover{transform:none;box-shadow:none}

/* compact card tweaks */
.teams{padding:13px 14px 4px}
.odds-row{padding:8px 13px 14px}

/* corner status tag — flush to card's rounded top-left, only bottom-right rounded */
.status-tag{position:absolute;top:0;left:0;z-index:3;font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:5px 13px 6px;border-radius:0 0 13px 0;box-shadow:2px 2px 6px rgba(0,0,0,.3)}

/* live badge top-right */
.live-badge{position:absolute;top:0;right:0;z-index:3;display:flex;align-items:center;gap:6px;font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#06240f;background:linear-gradient(180deg,#5fe089,#22a44e);padding:6px 12px;border-radius:0 0 0 13px}
.live-badge .ld{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 7px #fff;animation:livePulse 1s infinite}
.live-badge b{font-size:11px;margin-left:2px}
.live-badge.ft{background:rgba(110,110,110,.6);color:#fff}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}
.is-live::after{box-shadow:inset 0 0 0 1px rgba(63,192,106,.5)}
.is-live{box-shadow:var(--shadow),0 0 22px rgba(63,192,106,.18)}

/* centered meta row (group · time · stadium) flanked by the corner tags */
.cmeta{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:34px;padding:8px 14px 8px 98px;font-size:11.5px;color:var(--txt-dim);border-bottom:1px solid rgba(246,198,89,.07);overflow:hidden}
.cmeta .grp{font-family:var(--head);font-weight:700;color:var(--gold-1);flex-shrink:0}
.cmeta .when{flex-shrink:0}
.cmeta .sep{opacity:.45;flex-shrink:0}
.cmeta .place{color:var(--txt-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* live score in the centre */
.vs.live{gap:2px}
.vs.live .score{font-family:var(--head);font-weight:700;font-size:26px;color:#fff;display:flex;align-items:center;gap:7px;line-height:1}
.vs.live .score i{color:var(--gold-3);font-style:normal;font-size:16px}

/* top-bettors panel */
.bettors{background:linear-gradient(180deg,rgba(14,9,4,.95),rgba(7,4,2,.97));border-radius:0;border-left:1px solid rgba(246,198,89,.13);display:flex;flex-direction:column;overflow:hidden}
.bettors-head{padding:12px 14px 0}
.bt-title{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:1px;color:var(--gold-1);text-transform:uppercase}
.bt-tabs{display:flex;gap:5px;margin-top:10px}
.bt-tab{flex:1;font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.5px;color:var(--txt-dim);padding:7px 4px;border-radius:8px 8px 0 0;transition:.15s}
.bt-tab:hover{color:var(--gold-1)}
.bt-tab.active{color:#3a2708;background:linear-gradient(180deg,#ffe7a0,#e0ad3a)}
.bt-list{padding:9px 12px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.bt-row{display:flex;align-items:center;gap:10px;font-size:13px}
.bt-rank{width:21px;height:21px;flex:0 0 auto;display:grid;place-items:center;border-radius:6px;font-family:var(--head);font-weight:700;font-size:11px;background:rgba(255,255,255,.06);color:var(--txt-dim)}
.bt-rank.r1{background:linear-gradient(180deg,#ffe7a0,#d4a017);color:#3a2708}
.bt-rank.r2{background:linear-gradient(180deg,#e8e8ee,#a9aab2);color:#222}
.bt-rank.r3{background:linear-gradient(180deg,#e8a972,#bb6e34);color:#2a160a}
.bt-name{flex:1;min-width:0;font-weight:600;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-name.anon{color:var(--txt-mut);font-style:italic}
.bt-amt{font-family:var(--head);font-weight:700;color:var(--gold-1);font-size:13px;flex:0 0 auto}
.bt-empty{color:var(--txt-mut);font-size:12px;text-align:center;padding:26px 8px}

/* animated FIFA skyscraper banners */
.sky{flex:0 0 220px;width:220px;position:sticky;top:143px;height:calc(100vh - 164px);max-height:780px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow),inset 0 0 0 1px rgba(246,198,89,.18)}
/* blurred backdrop fills the banner (no empty space) */
.sky-blur{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(18px) brightness(.42) saturate(.95);transform:scale(1.15);animation:bgDrift 22s ease-in-out infinite alternate}
/* sharp FULL trophy shown with contain so the whole cup is visible */
.sky-cup{position:absolute;left:8px;right:8px;top:14px;height:64%;background-position:center top;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));z-index:2}
.sky-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,3,.2) 0%,transparent 28%,rgba(8,6,3,.5) 60%,rgba(8,6,3,.96) 100%)}
.sky-text{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:16px 14px 18px;text-align:center}
.sky-k{font-family:var(--head);font-weight:700;letter-spacing:3px;font-size:11px;color:var(--gold-2);text-transform:uppercase}
.sky-h{font-family:var(--display);font-size:38px;line-height:.92;letter-spacing:.5px;margin-top:3px;text-shadow:0 3px 14px rgba(0,0,0,.7)}
.sky-y{font-family:var(--display);font-size:27px;color:var(--cream)}
.sky-cta{display:inline-block;margin-top:13px;font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:1px;color:#3a2708;background:linear-gradient(180deg,#ffe7a0,#e0ad3a);border-radius:9px;padding:8px 14px;animation:ctaGlow 2.2s ease-in-out infinite}
.sky-cta.alt{color:var(--gold-1);background:rgba(246,198,89,.14);box-shadow:inset 0 0 0 1px rgba(246,198,89,.3);animation:none}

/* LEFT banner — trophy on the pitch: slow zoom + diagonal shine sweep */
.sky-blur.trophy,.sky-cup.trophy{background-image:url('/assets/trophy_v.jpg')}
.sky-left .sky-cup{animation:cupFloat 5s ease-in-out infinite}
.sky-shine{position:absolute;top:-30%;left:-70%;width:55%;height:160%;z-index:3;transform:rotate(18deg);filter:blur(7px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shineSweep 5.5s ease-in-out infinite}

/* RIGHT banner — lifting the cup: sway + radial glow + falling confetti */
.sky-poster{position:absolute;inset:0;background:url('/assets/banner2.webp') center/cover;animation:posterPan 18s ease-in-out infinite alternate}
.sky-pulse{position:absolute;top:32%;left:50%;width:170px;height:170px;margin:-85px 0 0 -85px;z-index:2;border-radius:50%;background:radial-gradient(circle,rgba(246,198,89,.55),transparent 62%);mix-blend-mode:screen;animation:glowPulse 3s ease-in-out infinite}
.sky-confetti{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.sky-confetti i{position:absolute;top:-14px;width:7px;height:11px;border-radius:1px;opacity:.9;animation:confFall linear infinite}
.sky-confetti i:nth-child(1){left:10%;background:#f6c659;animation-duration:6.2s;animation-delay:0s}
.sky-confetti i:nth-child(2){left:24%;background:#fff;animation-duration:7.4s;animation-delay:1.1s}
.sky-confetti i:nth-child(3){left:38%;background:#e0503f;animation-duration:5.6s;animation-delay:.4s}
.sky-confetti i:nth-child(4){left:52%;background:#3fc06a;animation-duration:8s;animation-delay:2s}
.sky-confetti i:nth-child(5){left:66%;background:#f6c659;animation-duration:6.8s;animation-delay:.8s}
.sky-confetti i:nth-child(6){left:80%;background:#2f86d4;animation-duration:7s;animation-delay:1.6s}
.sky-confetti i:nth-child(7){left:90%;background:#fff;animation-duration:5.9s;animation-delay:2.4s}
.sky-confetti i:nth-child(8){left:16%;background:#cf4f9e;animation-duration:8.4s;animation-delay:3s}
.sky-confetti i:nth-child(9){left:72%;background:#f6c659;animation-duration:6.5s;animation-delay:3.6s}

@keyframes bgDrift{from{transform:scale(1.15)}to{transform:scale(1.26) translateY(-3%)}}
@keyframes cupFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes posterPan{0%{background-position:16% 36%}100%{background-position:84% 64%}}
@keyframes shineSweep{0%{left:-70%}50%{left:130%}100%{left:130%}}
@keyframes glowPulse{0%,100%{transform:scale(.8);opacity:.45}50%{transform:scale(1.18);opacity:.85}}
@keyframes confFall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(640px) rotate(420deg)}}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 0 rgba(246,198,89,0)}50%{box-shadow:0 0 16px rgba(246,198,89,.75)}}

@media(max-width:1180px){ .sky{display:none} }
@media(max-width:880px){
  .match-unit{grid-template-columns:1fr}
  .match-unit .bettors{border-left:none;border-top:1px solid rgba(246,198,89,.13)}
  .cmeta{padding:8px 14px 8px 92px}
}
@media(max-width:560px){
  .cmeta{padding:7px 12px 7px 84px;gap:5px;font-size:11px}
  .live-badge{font-size:9px;padding:5px 9px}
  .live-badge b{font-size:10px}
  .pill-btn .ptxt{display:none}
  .pill-btn{padding:8px 10px}
}