/* ============================================================
   VFL TOURNAMENT UI CSS
   Mobile-first layout. Telegram Mini App safe area.
   ============================================================ */

.tournament-screen {
  position: fixed; inset: 0; z-index: 9000;
  background: linear-gradient(180deg, #07111f 0%, #0d1f3a 60%, #0a1730 100%);
  color: #e7eef8;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.tournament-screen.hidden { display: none; }

/* Top bar */
.tourn-top {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px 10px; background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0;
}
.tourn-title {
  font-size: 18px; font-weight: 800; letter-spacing: 2px;
  color: #fcd116; flex: 1;
}
.tourn-wallet {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px;
}
.wallet-coins { background: rgba(252,209,22,0.12); padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(252,209,22,0.3); }
.wallet-coins .coin { color: #fcd116; margin-right: 4px; }
.wallet-bp { background: rgba(100,200,255,0.12); padding: 6px 10px; border-radius: 12px; color: #7fd0ff; }
.wallet-streak { background: rgba(255,100,50,0.15); padding: 6px 10px; border-radius: 12px; color: #ff8f66; }
.tourn-close {
  background: transparent; color: #fff; border: none; font-size: 28px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}

/* Tabs */
.tourn-tabs {
  display: flex; gap: 0; background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tourn-tab {
  flex: 1; background: none; border: none; color: #8fa3be;
  padding: 12px 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; border-bottom: 3px solid transparent;
  transition: all .15s;
}
.tourn-tab.active { color: #fcd116; border-bottom-color: #fcd116; background: rgba(252,209,22,0.05); }

/* Body */
.tourn-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.tourn-footer {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.35); border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; gap: 10px;
}
.tourn-footer button { flex: 1; }

.btn-primary {
  background: linear-gradient(180deg, #fcd116, #f0a500);
  color: #0a1628; border: none; padding: 14px 18px;
  font-size: 15px; font-weight: 800; border-radius: 10px;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(252,209,22,0.35);
}
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-secondary {
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  padding: 14px 18px; font-size: 14px; font-weight: 600; border-radius: 10px; cursor: pointer;
}

/* Intro / team picker */
.tourn-intro { max-width: 900px; margin: 0 auto; padding: 8px 4px; }
.tourn-intro h2 { font-size: 26px; margin: 4px 0 10px; color: #fff; }
.tourn-sub { font-size: 14px; color: #9fb6cd; line-height: 1.5; margin-bottom: 18px; }
.prize-pool {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 24px;
}
.prize {
  background: linear-gradient(180deg, rgba(252,209,22,0.18), rgba(252,209,22,0.05));
  border: 1px solid rgba(252,209,22,0.35); border-radius: 12px;
  padding: 14px 8px; text-align: center;
}
.prize-place { display: block; font-size: 13px; color: #fcd116; font-weight: 700; }
.prize-amt { display: block; font-size: 22px; font-weight: 800; margin-top: 4px; }

.picker-title { font-size: 14px; color: #9fb6cd; margin: 14px 0 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.team-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 8px;
}
.picker-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 10px 6px; cursor: pointer; text-align: center;
  transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.picker-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.picker-card.selected {
  background: rgba(252,209,22,0.15); border-color: #fcd116;
  box-shadow: 0 0 0 2px rgba(252,209,22,0.3);
}
.mini-flag {
  display: inline-block; width: 28px; height: 20px; overflow: hidden;
  border-radius: 3px; vertical-align: middle; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.mini-flag svg { width: 100%; height: 100%; display: block; }
.picker-card .mini-flag { width: 40px; height: 28px; }
.pc-name { font-size: 13px; font-weight: 700; }
.pc-meta { display: flex; gap: 8px; font-size: 11px; color: #9fb6cd; }
.pc-ovr { color: #fcd116; font-weight: 700; }

.picker-foot {
  display: flex; gap: 8px; margin-top: 14px;
  flex-wrap: wrap;
}
.picker-foot input {
  flex: 1; min-width: 180px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; padding: 14px 12px; border-radius: 10px; font-size: 15px;
}

/* Groups */
.groups-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.group-block {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 10px 12px;
}
.group-block.my-group { border-color: #fcd116; box-shadow: 0 0 0 1px rgba(252,209,22,0.2); }
.group-head { font-size: 12px; color: #fcd116; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 6px; }
.group-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.group-table th { text-align: left; color: #8fa3be; font-weight: 500; padding: 4px 2px; font-size: 10px; }
.group-table td { padding: 5px 2px; border-top: 1px solid rgba(255,255,255,0.05); }
.group-table td.pos { color: #8fa3be; width: 14px; font-size: 11px; }
.group-table td.tid { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.group-table td.tid .mini-flag { width: 20px; height: 14px; }
.group-table tr.advancing td { background: rgba(80,200,120,0.08); }
.group-table tr.advancing td.pos { color: #3ed28f; }
.group-table tr.my-row { font-weight: 700; }
.group-table tr.my-row td { color: #fcd116; }

/* Upcoming */
.upcoming-head { font-size: 12px; color: #8fa3be; letter-spacing: 2px; margin: 18px 0 8px; font-weight: 700; }
.upcoming-list { display: flex; flex-direction: column; gap: 6px; }
.match-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 10px 12px; position: relative;
}
.match-row.played { opacity: 0.7; }
.match-row .side { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.match-row .side.home { justify-content: flex-start; }
.match-row .side.away { justify-content: flex-end; }
.match-row .vs { color: #8fa3be; font-size: 12px; }
.match-row .score { font-weight: 800; font-size: 16px; color: #fcd116; }
.mini-odds {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin-top: 8px;
}
.mini-odds .odd {
  background: rgba(252,209,22,0.08); color: #fcd116;
  padding: 6px 8px; border-radius: 6px; text-align: center;
  font-weight: 700; font-size: 13px; cursor: pointer;
  border: 1px solid rgba(252,209,22,0.2); transition: all .1s;
}
.mini-odds .odd:hover { background: rgba(252,209,22,0.2); }

.stage-done { text-align: center; padding: 20px; color: #9fb6cd; }

/* Bet slip */
.betslip {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #0d1f3a; border-top: 2px solid #fcd116;
  border-radius: 20px 20px 0 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  z-index: 9100; box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
  animation: slip-in .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes slip-in { from { transform: translateY(100%); } to { transform: none; } }
.betslip.hidden { display: none; }
.slip-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.slip-title { font-size: 15px; font-weight: 700; }
.slip-x { background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }
.slip-match { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.slip-pick { font-size: 14px; color: #fcd116; margin-bottom: 12px; }
.slip-score-grid { margin: 10px 0; }
.slip-sub { font-size: 11px; color: #8fa3be; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.score-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.score-chip {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff;
  padding: 8px 4px; border-radius: 8px; font-size: 12px; cursor: pointer;
}
.score-chip.on { background: rgba(252,209,22,0.2); border-color: #fcd116; color: #fcd116; }
.slip-stake { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.slip-stake label { font-size: 13px; color: #8fa3be; }
.slip-stake input {
  flex: 1; min-width: 100px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); color: #fff;
  padding: 10px 12px; border-radius: 8px; font-size: 16px; font-weight: 700;
}
.stake-quick { display: flex; gap: 4px; }
.stake-quick button {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff;
  padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.slip-potential { text-align: center; font-size: 14px; color: #fcd116; margin: 10px 0 12px; }

/* Bracket */
.bracket-wrap {
  display: flex; gap: 12px; overflow-x: auto; padding: 8px 4px;
}
.bracket-col {
  min-width: 180px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: space-around; gap: 10px;
}
.bracket-head {
  font-size: 11px; color: #fcd116; font-weight: 800; letter-spacing: 1.5px;
  text-align: center; padding-bottom: 6px; border-bottom: 1px solid rgba(252,209,22,0.2);
}
.bracket-match {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 6px 8px;
}
.bm-side {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 6px; padding: 5px 2px;
  font-size: 13px; color: #cfd9e8;
}
.bm-side + .bm-side { border-top: 1px solid rgba(255,255,255,0.06); }
.bm-side.winner { color: #fcd116; font-weight: 700; }
.bm-side b { color: #fff; }
.bm-pens { font-size: 10px; color: #9fb6cd; text-align: center; margin-top: 4px; font-style: italic; }

.champion-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #fcd116, #f0a500);
  color: #0a1628; padding: 18px 22px; border-radius: 14px; margin-top: 18px;
  box-shadow: 0 8px 30px rgba(252,209,22,0.4);
}
.champion-banner .mini-flag { width: 80px; height: 56px; }
.champ-label { font-size: 12px; letter-spacing: 2px; font-weight: 700; opacity: 0.7; }
.champ-name { font-size: 28px; font-weight: 900; }

/* Bets tab */
.bets-block { max-width: 700px; margin: 0 auto; }
.bets-head { font-size: 12px; color: #8fa3be; letter-spacing: 2px; margin: 14px 0 6px; font-weight: 700; }
.ticket {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: 6px; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 6px;
  background: rgba(255,255,255,0.04); border-left: 3px solid transparent;
}
.ticket.won { border-left-color: #3ed28f; background: rgba(62,210,143,0.08); }
.ticket.lost { border-left-color: #f45162; opacity: 0.7; }
.ticket.open { border-left-color: #fcd116; }
.tk-match { font-weight: 700; }
.tk-pick { color: #9fb6cd; }
.tk-status { font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.empty { text-align: center; color: #8fa3be; padding: 20px; font-size: 13px; }

/* Leaderboard */
.lb-wrap { max-width: 700px; margin: 0 auto; }
.lb-head { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.lb-prize { font-size: 13px; color: #fcd116; margin-bottom: 14px; }
.lb-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.lb-table th { text-align: left; color: #8fa3be; font-weight: 500; font-size: 11px; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.lb-table td { padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.lb-table tr.me { background: rgba(252,209,22,0.08); }
.lb-table tr.me td { color: #fcd116; }

.bracket-locked { text-align: center; padding: 60px 20px; color: #8fa3be; font-size: 15px; }
.empty-round { color: #4a5f7a; font-size: 11px; text-align: center; padding: 10px; }

/* Toast */
.vfl-toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  background: #1e3a5f; color: #fff; padding: 12px 20px; border-radius: 24px;
  font-size: 14px; font-weight: 600; z-index: 9999;
  animation: toast-in .2s ease;
  border: 1px solid rgba(252,209,22,0.3);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.vfl-toast.err { border-color: #f45162; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }

/* Entry button on main screen */
#tournamentEntryBtn {
  position: fixed; top: 14px; right: 14px; z-index: 8000;
  background: linear-gradient(135deg, #fcd116, #f0a500);
  color: #0a1628; border: none;
  padding: 10px 16px; border-radius: 22px;
  font-weight: 800; font-size: 13px; letter-spacing: 0.5px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(252,209,22,0.4);
  display: flex; align-items: center; gap: 6px;
}
#tournamentEntryBtn:hover { transform: translateY(-1px); }
#tournamentEntryBtn .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #f45162; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* My-Team HUD during live match */
#myTeamHud {
  position: fixed; top: env(safe-area-inset-top, 0); left: 14px; z-index: 100;
  background: rgba(252,209,22,0.95); color: #0a1628;
  padding: 6px 12px; border-radius: 0 0 12px 12px;
  font-weight: 700; font-size: 12px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
#myTeamHud .mini-flag { width: 24px; height: 16px; }

/* Mobile */
@media (max-width: 520px) {
  .tourn-title { font-size: 14px; letter-spacing: 1px; }
  .tourn-wallet { font-size: 11px; gap: 6px; }
  .wallet-coins, .wallet-bp, .wallet-streak { padding: 4px 8px; }
  .groups-grid { grid-template-columns: 1fr; }
  .picker-foot { flex-direction: column; }
  .picker-foot input { width: 100%; }
  .prize-pool .prize-amt { font-size: 18px; }
  .team-picker { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
  .picker-card { padding: 8px 4px; }
  .picker-card .mini-flag { width: 32px; height: 22px; }
}

/* ============================================================
   v5.1: HOME, ENTRY FLOW, BET GATE, SKIP-TO-RESULT, SPONSOR
   ============================================================ */

/* ----- SPONSOR BANNER (top of every screen) ----- */
#sponsorBanner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(90deg, #1ad977 0%, #14b45e 100%);
  color: #051d0d;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  padding-top: calc(8px + env(safe-area-inset-top));
}
#sponsorBanner .sponsor-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 2px 6px; background: rgba(0,0,0,0.18); border-radius: 3px;
}
#sponsorBanner .sponsor-brand { font-size: 15px; font-weight: 900; }
#sponsorBanner .sponsor-offer { margin-left: auto; font-weight: 600; }
#sponsorBanner .sponsor-offer b {
  font-weight: 800; padding: 2px 6px; background: rgba(0,0,0,0.85); color: #1ad977;
  border-radius: 3px; letter-spacing: 1px; font-family: 'JetBrains Mono', monospace;
}
@media (max-width: 620px) {
  #sponsorBanner { font-size: 11px; gap: 8px; padding-left: 10px; padding-right: 10px; }
  #sponsorBanner .sponsor-offer { font-size: 11px; }
  #sponsorBanner .sponsor-label { display: none; }
}
/* Push content below sponsor banner */
body { padding-top: 44px; }
#tournamentEntryBtn { top: calc(52px + env(safe-area-inset-top)); }
.team-select { padding-top: 52px; }
.tournament-screen { padding-top: calc(44px + env(safe-area-inset-top)); }

/* Back to WC link on practice-match screen */
.ts-back-to-wc {
  background: transparent; color: #fcd116; border: 1px solid rgba(252,209,22,0.4);
  padding: 6px 14px; border-radius: 20px; font-size: 13px; cursor: pointer;
  margin-top: 8px;
}
.ts-back-to-wc:hover { background: rgba(252,209,22,0.12); }

/* ----- HOME SCREEN ----- */
.home-screen {
  padding: 14px 14px 60px;
  display: flex; flex-direction: column; gap: 14px;
}
.home-hud {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: rgba(255,255,255,0.04); border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
}
.hud-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 20px; font-weight: 800; color: #fff;
}
.hud-cell .hud-label {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: #8fa8c3; font-weight: 600;
}
.hud-cell.hud-coins { color: #fcd116; }
.hud-cell.hud-coins .coin { margin-right: 4px; }

.home-section-title {
  font-size: 13px; font-weight: 800; color: #fcd116;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.home-next, .home-hot, .home-daily, .home-loan {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 14px;
}
.home-hot { background: linear-gradient(135deg, rgba(255,107,53,0.18) 0%, rgba(252,209,22,0.12) 100%); border-color: rgba(252,209,22,0.3); }
.hn-teams { font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.hn-teams b { color: #fcd116; }
.hn-stage { font-size: 11px; color: #8fa8c3; letter-spacing: 1px; margin-top: 4px; }
.hn-bet-ok { color: #1ad977; font-weight: 700; font-size: 13px; margin-top: 8px; }
.hn-bet-req { color: #ff9a3c; font-size: 13px; margin-top: 8px; }
.hn-teams .mini-flag { width: 22px; }
.home-next .btn-primary { width: 100%; margin-top: 10px; }
.hot-note { font-size: 12px; color: #d0e1f5; margin-top: 6px; font-style: italic; }

.home-claim {
  width: 100%;
  background: linear-gradient(135deg, #fcd116 0%, #f39c12 100%);
  color: #1a1a1a; border: 0; padding: 12px; border-radius: 10px;
  font-weight: 800; font-size: 15px; cursor: pointer;
}
.home-claim-lock { color: #8fa8c3; font-size: 13px; }
.home-streak { font-size: 12px; color: #ff6b35; margin-top: 6px; font-weight: 700; }

.home-loan.active { border-color: rgba(26,217,119,0.3); background: rgba(26,217,119,0.08); }
.home-loan.offer { border-color: rgba(255,107,53,0.35); background: rgba(255,107,53,0.08); }
.home-loan button { margin-top: 8px; width: 100%; }

/* ----- ENTRY FLOW ----- */
.entry-header { text-align: center; margin-bottom: 16px; }
.entry-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.entry-step {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #8fa8c3;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.entry-step.active { background: #fcd116; color: #1a1a1a; }
.entry-step.done { background: #1ad977; color: #051d0d; }

.entry-brackets .stage-block { margin-bottom: 18px; }
.stage-title {
  font-size: 14px; font-weight: 800; color: #fff; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 8px;
}
.stage-title .stage-req { color: #8fa8c3; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; }
.stage-grid, .champ-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px;
}
.stage-toggle, .champ-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #d0e1f5; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.stage-toggle .mini-flag, .champ-btn .mini-flag { width: 20px; }
.stage-toggle.on, .champ-btn.on {
  background: #fcd116; color: #1a1a1a; border-color: #fcd116;
}
.entry-winner-block { margin-top: 14px; }
.entry-name-row { margin-top: 14px; }
.entry-name-row input {
  width: 100%; padding: 14px 16px; font-size: 18px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; color: #fff; font-weight: 600;
}
.confirm-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 16px; margin-top: 10px;
}
.cc-row {
  display: flex; gap: 14px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 14px;
}
.cc-row:last-child { border-bottom: 0; }
.cc-row span { color: #8fa8c3; min-width: 80px; }
.cc-row b { color: #fff; }
.cc-row.cc-wrap { flex-wrap: wrap; align-items: flex-start; }
.cc-row.cc-wrap b { font-weight: 600; font-size: 13px; flex: 1; }
.cc-row.cc-wrap .mini-flag { width: 18px; margin-right: 2px; }

.entry-hint { color: #8fa8c3; font-size: 13px; text-align: center; padding: 10px; width: 100%; }

/* ----- BET GATE ----- */
.match-gate {
  width: 100%;
  padding: 12px;
  background: rgba(255,154,60,0.1);
  border: 1px solid rgba(255,154,60,0.4);
  border-radius: 10px;
}
.gate-msg { color: #ff9a3c; font-weight: 700; font-size: 14px; margin-bottom: 8px; text-align: center; }
.gate-odds {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.gate-odds .odd {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 8px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #d0e1f5; font-size: 12px; font-weight: 600; cursor: pointer;
}
.gate-odds .odd b { color: #fcd116; font-size: 16px; }
.hot-tag {
  text-align: center; margin-top: 8px;
  padding: 4px; font-size: 12px; font-weight: 700; color: #ff6b35;
  letter-spacing: 1px;
}

.user-match-actions { display: flex; gap: 8px; width: 100%; }
.user-match-actions button { flex: 1; }

/* ----- BET SLIP STORY ----- */
.slip-story {
  background: rgba(252,209,22,0.06); border: 1px solid rgba(252,209,22,0.18);
  border-radius: 8px; padding: 10px; margin: 10px 0;
}
.story-head { font-size: 13px; font-weight: 800; color: #fcd116; margin-bottom: 4px; }
.story-body { font-size: 13px; color: #d0e1f5; line-height: 1.4; }
.story-hook { font-size: 12px; color: #d0e1f5; line-height: 1.4; margin: 4px 0; }
.story-hook b { color: #fcd116; }
.slip-hot {
  padding: 6px 10px; margin: 8px 0;
  background: linear-gradient(90deg, rgba(255,107,53,0.2), rgba(252,209,22,0.15));
  border-left: 3px solid #ff6b35;
  color: #ff9a3c; font-size: 13px; font-weight: 700;
  border-radius: 4px;
}

/* ----- SKIP-TO-RESULT CARD ----- */
.skip-result-card {
  position: fixed; inset: 0; z-index: 10500;
  background: radial-gradient(ellipse at center, rgba(7,17,31,0.95) 0%, rgba(3,8,16,0.98) 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
  font-family: 'Inter', sans-serif;
}
.skip-result-card.show { opacity: 1; }
.src-inner {
  background: linear-gradient(180deg, #0d1f3a 0%, #07111f 100%);
  border: 2px solid rgba(252,209,22,0.35);
  border-radius: 16px; padding: 28px 24px;
  min-width: 340px; max-width: 420px; width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(252,209,22,0.1);
}
.src-tag {
  font-size: 11px; letter-spacing: 2.5px; color: #fcd116;
  font-weight: 800; margin-bottom: 4px;
}
.src-stage {
  font-size: 12px; color: #8fa8c3; letter-spacing: 1.5px; margin-bottom: 18px;
}
.src-teams {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px; margin-bottom: 18px;
}
.src-team { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.src-team .mini-flag { width: 48px; height: auto; }
.src-name { font-size: 14px; font-weight: 700; color: #e7eef8; }
.src-score { font-size: 56px; font-weight: 900; color: #fcd116; font-family: 'Oswald', sans-serif; line-height: 1; }
.src-vs { font-size: 28px; color: #8fa8c3; font-weight: 700; }
.src-xg {
  background: rgba(255,255,255,0.04); border-radius: 8px; padding: 10px;
  margin-bottom: 14px;
}
.src-xg-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 3px 0; color: #8fa8c3;
}
.src-xg-row b { color: #d0e1f5; font-family: 'JetBrains Mono', monospace; }
.src-settle {
  padding: 10px; border-radius: 8px;
  background: rgba(255,255,255,0.04); font-size: 14px; color: #8fa8c3;
}
.src-settle.won { background: rgba(26,217,119,0.15); color: #1ad977; }
.src-settle.lost { background: rgba(239,71,111,0.15); color: #ef476f; }

@media (max-width: 620px) {
  .home-hud { grid-template-columns: repeat(2, 1fr); }
  .home-hud .hud-cell { font-size: 18px; }
  .stage-grid, .champ-picker { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .stage-toggle, .champ-btn { font-size: 11px; padding: 5px 8px; }
  .src-score { font-size: 42px; }
}

/* ========== v5.2 SQUAD BUILDER / LEGENDS MODE ========== */
.squad-builder-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
}
.sb-backdrop {
  position: absolute; inset: 0;
  background: rgba(3,6,10,0.82);
  backdrop-filter: blur(6px);
}
.sb-card {
  position: relative; z-index: 1;
  width: min(1060px, 96vw); max-height: 94vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0d1520, #0a1018);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  overflow: hidden;
}
.sb-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 28px 16px;
  background: linear-gradient(180deg, rgba(255,46,76,0.08), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sb-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: #ff2e4c; letter-spacing: 0.25em; margin-bottom: 6px;
}
.sb-head h2 { font-family: 'Oswald', sans-serif; font-size: 26px; letter-spacing: 0.05em; color: #fff; margin: 0 0 4px; }
.sb-sub { margin: 0; color: #8fa8c3; font-size: 13px; max-width: 640px; }
.sb-x {
  background: transparent; color: #8fa8c3; border: 1px solid rgba(255,255,255,0.12);
  width: 34px; height: 34px; border-radius: 8px; font-size: 20px; cursor: pointer;
}
.sb-x:hover { background: rgba(255,255,255,0.06); color: #fff; }

.sb-meters {
  display: flex; gap: 14px; padding: 14px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.sb-meter {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 16px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  min-width: 130px;
}
.sb-meter-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #8fa8c3; letter-spacing: 0.2em; }
.sb-meter-val { font-size: 13px; color: #d0e1f5; }
.sb-meter-val b { color: #fff; font-size: 20px; font-family: 'Oswald', sans-serif; margin-right: 4px; }
.sb-meter-split { flex: 1; flex-direction: row; gap: 18px; align-items: center; justify-content: space-around; }
.sb-meter-split span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8fa8c3; letter-spacing: 0.1em; }
.sb-meter-split b { color: #ffd54f; margin-left: 4px; font-family: 'Oswald', sans-serif; font-size: 16px; }

.sb-body {
  flex: 1; overflow: hidden;
  display: grid; grid-template-columns: 340px 1fr; gap: 0;
}
.sb-xi {
  background: #070b12;
  padding: 16px; overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 8px;
}
.sb-slot {
  display: grid; grid-template-columns: 50px 1fr auto;
  grid-template-areas: "pos name price" "pos ovr price";
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: background .2s, border-color .2s;
}
.sb-slot:hover { background: rgba(255,255,255,0.05); }
.sb-slot.slot-icon {
  background: linear-gradient(135deg, rgba(255,213,79,0.15), rgba(255,46,76,0.08));
  border-color: rgba(255,213,79,0.35);
}
.sb-slot-pos {
  grid-area: pos;
  font-family: 'Oswald', sans-serif; font-size: 12px; color: #ffd54f;
  letter-spacing: 0.1em; text-align: center;
}
.sb-slot-name { grid-area: name; font-family: 'Oswald', sans-serif; color: #fff; font-size: 15px; letter-spacing: 0.03em; }
.sb-slot-ovr  { grid-area: ovr;  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8fa8c3; }
.sb-slot-price { grid-area: price; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #d0e1f5; text-align: right; }

.sb-market {
  overflow-y: auto;
  padding: 16px 22px;
}
.sb-market-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.sb-market-head h3 {
  font-family: 'Oswald', sans-serif; color: #fff; font-size: 18px; letter-spacing: 0.08em; margin: 0;
}
.sb-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-filter-btn {
  background: rgba(255,255,255,0.04); color: #8fa8c3; border: 1px solid rgba(255,255,255,0.08);
  padding: 5px 12px; border-radius: 6px; font-size: 11px; letter-spacing: 0.1em;
  font-family: 'JetBrains Mono', monospace; cursor: pointer;
}
.sb-filter-btn.on { background: #ff2e4c; color: #fff; border-color: #ff2e4c; }

.sb-market-list {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.sb-card-legend {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s, border-color .2s;
}
.sb-card-legend:hover { transform: translateY(-2px); border-color: rgba(255,46,76,0.5); }
.sb-card-legend.dim { opacity: 0.55; }
.sb-card-legend.icon {
  background: linear-gradient(135deg, rgba(255,213,79,0.08), rgba(255,46,76,0.04));
  border-color: rgba(255,213,79,0.3);
}
.sb-cl-top { display: flex; gap: 8px; align-items: center; }
.sb-cl-ovr { background: #ff2e4c; color: #fff; font-family: 'Oswald', sans-serif; font-size: 14px; padding: 2px 8px; border-radius: 6px; }
.sb-card-legend.icon .sb-cl-ovr { background: linear-gradient(135deg, #ffd54f, #ff8c42); color: #1a1a1a; }
.sb-cl-pos { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #8fa8c3; letter-spacing: 0.1em; }
.sb-cl-tag {
  margin-left: auto; font-family: 'Oswald', sans-serif; font-size: 10px;
  color: #ffd54f; letter-spacing: 0.2em;
}
.sb-cl-name { font-family: 'Oswald', sans-serif; color: #fff; font-size: 16px; letter-spacing: 0.03em; }
.sb-cl-era  { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #8fa8c3; letter-spacing: 0.1em; }
.sb-cl-attrs { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #d0e1f5; line-height: 1.5; }
.sb-cl-buy {
  margin-top: 4px; padding: 8px 12px; border-radius: 6px; border: none;
  background: #ff2e4c; color: #fff; font-family: 'Oswald', sans-serif; font-size: 13px;
  letter-spacing: 0.08em; cursor: pointer;
}
.sb-card-legend.dim .sb-cl-buy { background: #3a3a3a; color: #888; cursor: not-allowed; }
.sb-cl-buy:hover:not(:disabled) { filter: brightness(1.1); }

.sb-foot {
  padding: 14px 28px; display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.sb-foot .btn-primary { min-width: 220px; }

.sb-empty { padding: 40px; text-align: center; color: #8fa8c3; font-size: 13px; }

/* Swap picker */
.sb-swap-picker { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.sb-swap-backdrop { position: absolute; inset: 0; background: rgba(3,6,10,0.75); }
.sb-swap-card {
  position: relative; z-index: 1;
  background: #0d1520; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 22px; min-width: 380px; max-width: 90vw;
}
.sb-swap-card h3 { margin: 0 0 6px; color: #fff; font-family: 'Oswald', sans-serif; letter-spacing: 0.05em; }
.sb-swap-card p { margin: 0 0 14px; color: #8fa8c3; font-size: 13px; }
.sb-swap-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sb-swap-opt {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: #fff; cursor: pointer; text-align: left;
}
.sb-swap-opt:hover:not(:disabled) { border-color: #ff2e4c; background: rgba(255,46,76,0.08); }
.sb-swap-opt.dim { opacity: 0.45; cursor: not-allowed; }
.sb-swap-opt-name { font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 0.03em; }
.sb-swap-opt-name small { color: #8fa8c3; font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.sb-swap-opt-ovr { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8fa8c3; }
.sb-swap-opt-net { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #ffd54f; }
.sb-swap-foot { display: flex; justify-content: flex-end; }

@media (max-width: 760px) {
  .sb-body { grid-template-columns: 1fr; }
  .sb-xi { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); max-height: 240px; }
  .sb-meters { flex-wrap: wrap; padding: 12px 18px; }
  .sb-meter-split { width: 100%; justify-content: space-between; }
}

/* ========== v5.2 LEGENDS MODE – intro & confirm ========== */
.legends-intro .prize-pool { grid-template-columns: repeat(3, 1fr); }
.legends-nation-card {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 22px;
  background: linear-gradient(135deg, rgba(255,46,76,0.12), rgba(255,213,79,0.06));
  border: 1px solid rgba(255,213,79,0.3);
  border-radius: 14px;
  max-width: 420px; margin: 20px auto 0;
}
.legends-nation-card .flag { width: 56px; height: 42px; border-radius: 6px; }
.legends-nation-card .pc-name { font-family: 'Oswald', sans-serif; font-size: 22px; color: #fff; letter-spacing: 0.05em; }
.legends-nation-card .pc-meta {
  display: flex; gap: 12px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #8fa8c3; letter-spacing: 0.12em; margin-top: 4px;
}
.legends-nation-card .pc-ovr { color: #ffd54f; }

.legends-build { padding-bottom: 20px; }
.legends-empty { text-align: center; padding: 36px 20px; }
.legends-empty p { color: #8fa8c3; margin-bottom: 14px; }

.legends-xi-summary {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 16px; margin: 14px 0;
}
.lxs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.lxs-title { font-family: 'Oswald', sans-serif; font-size: 18px; color: #fff; letter-spacing: 0.05em; }
.lxs-sub   { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #8fa8c3; letter-spacing: 0.2em; margin-top: 3px; }
.lxs-meters { display: flex; gap: 10px; flex-wrap: wrap; }
.lxs-meters span {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: #8fa8c3; letter-spacing: 0.15em;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}
.lxs-meters b { color: #ffd54f; font-family: 'Oswald', sans-serif; font-size: 14px; margin-left: 3px; }
.lxs-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.lxs-slot {
  padding: 8px 6px; border-radius: 8px; text-align: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}
.lxs-slot.icon {
  background: linear-gradient(135deg, rgba(255,213,79,0.15), rgba(255,46,76,0.04));
  border-color: rgba(255,213,79,0.4);
}
.lxs-pos { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #ffd54f; letter-spacing: 0.15em; }
.lxs-name { font-family: 'Oswald', sans-serif; font-size: 12px; color: #fff; margin: 2px 0; letter-spacing: 0.02em; }
.lxs-ovr { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #d0e1f5; }

/* Prize toast */
.vfl-prize-toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,213,79,0.95), rgba(255,140,66,0.95));
  color: #1a1a1a; padding: 24px 40px; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 10050; text-align: center;
  transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1);
  font-family: 'Oswald', sans-serif;
}
.vfl-prize-toast.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vpt-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.3em; margin-bottom: 4px; }
.vpt-amount { font-size: 52px; letter-spacing: 0.05em; line-height: 1; }
.vpt-sub { font-size: 12px; letter-spacing: 0.15em; margin-top: 6px; text-transform: uppercase; }