:root{
  --bg:#f7f8ff;
  --card:#ffffff;
  --card2:#ffffff;
  --line:rgba(0,0,0,.10);
  --text:#0b0e16;
  --muted:rgba(11,14,22,.62);

  
  --blue:#2A398D;
  --green:#3CAC3B;
  --red:#E61D25;
  --gold:#D8B45A;

  --shadow: 0 18px 60px rgba(0,0,0,.10);
  --radius:18px;
  --ease:cubic-bezier(.16,.92,.2,1);
  --fast:140ms;
  --med:320ms;
  --slow:900ms;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

h1{margin:0;font-size:14px;letter-spacing:.2px}
.sub{font-size:12px;color:var(--muted)}

.btn{
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  user-select:none;
}
.btn:hover{ transform: translateY(-2px); border-color: rgba(216,180,90,.60); box-shadow: 0 8px 24px rgba(216,180,90,.25); background: rgba(216,180,90,.12); color: var(--gold); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn.primary{
  background: linear-gradient(135deg, rgba(42,57,141,.10), rgba(216,180,90,.10));
  border-color: rgba(216,180,90,.45);
}

.grid{display:grid; gap:14px;}

.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: none;
  border-radius: var(--radius);
  box-shadow: none;
  padding: 16px;
}

h2{margin:0 0 10px 0; font-size:15px; font-weight:700; display:flex; gap:10px; align-items:center; letter-spacing:.01em; text-transform: none;}
.small{font-size:13px;color:var(--muted); line-height:1.35}
hr.sep{border:0;border-top:1px solid rgba(255,255,255,.08); margin:14px 0;}

.hud{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
}
@media(max-width:900px){ .hud{grid-template-columns:1fr;} }

.meter{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  border-radius:16px;
  padding:12px;
}
.meterTitle{font-size:12px;color:rgba(11,14,22,.70); display:flex; justify-content:space-between;}
.bar{
  height:12px;border-radius:999px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
  margin-top:10px;
}
.bar > i{
  display:block;height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--blue), var(--green), var(--red), var(--gold));
  border-radius:999px;
  transition: width var(--med) var(--ease);
}

.groupsStage{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
}
@media(max-width:1250px){ .groupsStage{grid-template-columns: repeat(3, minmax(0,1fr));} }
@media(max-width:980px){ .groupsStage{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media(max-width:640px){ .groupsStage{grid-template-columns: 1fr;} }
/* ── MOBILE OVERFLOW FIXES ── */
@media(max-width:640px){
  /* Prevent any horizontal scroll */
  body { overflow-x:hidden !important; }
  #scaleWrap { overflow-x:hidden !important; }

  /* Group stage cards */
  #stageGroups .groupsStage .card {
    overflow:hidden !important;
    width:100% !important;
    box-sizing:border-box !important;
    max-width:100% !important;
  }

  /* Team buttons inside groups */
  .teamBtn {
    width:100% !important;
    box-sizing:border-box !important;
    max-width:100% !important;
  }
  .teamBtn .teamName {
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    max-width:calc(100vw - 130px) !important;
    min-width:0 !important;
  }

  /* Best3 pool items */
  .best3PoolGrid {
    overflow:hidden !important;
  }
  .best3PoolItem, .best3Chip {
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Rank slots */
  .rankSlot {
    overflow:hidden !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .rankSlot .slotTeam .name {
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    max-width:calc(100vw - 140px) !important;
  }

  /* KO bracket cards */
  .koCard, .roundCard {
    min-width:0 !important;
  }
}

.groupHead{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.pill{font-size:11px;border:1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.03); padding:2px 8px; border-radius:999px; color:rgba(11,14,22,.70);}

.slots{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:12px; }
@media(max-width:520px){ .slots{grid-template-columns:1fr;} }

.slot{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  border-radius:14px;
  padding:10px;
  min-height:56px;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  cursor:pointer;
}
.slot:hover{ transform: translateY(-1px); border-color: rgba(42,57,141,.30); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.slotTitle{ font-size:11px; color: rgba(247,248,255,.78); margin-bottom:6px; display:flex; justify-content:space-between; }
.slotVal{ font-size:13px; font-weight:650; display:flex; align-items:center; gap:8px; }
.empty{ color: rgba(247,248,255,.55); font-weight:600; }

.teams{ display:grid; gap:10px; margin-top:10px; }
.teamBtn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  cursor:pointer;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
  position:relative; overflow:hidden;
}
.teamBtn:hover{ transform: translateY(-2px); border-color: rgba(216,180,90,.45); box-shadow: 0 0 26px rgba(216,180,90,.22); }
.teamBtn:active{ transform: translateY(0) scale(.99); }

.teamBtn[draggable="false"]{ user-select:none; }
.teamBtn:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(216,180,90,.14), transparent);
  transform: translateX(-120%);
  transition: transform var(--med) var(--ease);
}
.teamBtn:hover:before{ transform: translateX(120%); }

.tag{ font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.10); color: rgba(247,248,255,.75); background: rgba(0,0,0,.03); }
.tag.w{ border-color: rgba(42,57,141,.35); }
.tag.r{ border-color: rgba(0,180,120,.45); }
.tag.t{ border-color: rgba(220,70,70,.45); }

.teamName{ display:flex; align-items:center; font-weight:650; font-size:13px; }
.flag{ display:inline-flex; align-items:center; justify-content:center; width:1.6em; margin-right:8px; font-size:1.1em; line-height:1; }

.best3Grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
@media(max-width:1100px){ .best3Grid{grid-template-columns: repeat(3, minmax(0,1fr));} }
@media(max-width:820px){ .best3Grid{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media(max-width:520px){ .best3Grid{grid-template-columns: 1fr;} }

.best3Card{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  border-radius:16px;
  padding:12px;
  cursor:pointer;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  display:flex; gap:10px; align-items:center; justify-content:space-between;
}
.best3Card:hover{ transform: translateY(-2px); box-shadow: 0 0 24px rgba(216,180,90,.14); border-color: rgba(216,180,90,.22); }
.best3Card.on{ border-color: rgba(60,172,59,.45); box-shadow: 0 0 0 4px rgba(60,172,59,.12), 0 0 30px rgba(60,172,59,.12); }

.colTitle{font-size:13px;color:var(--muted); margin:2px 0 8px 0;}
.matchGrid{display:grid; gap:12px;}
.pickBtn{ text-align:left; width:100%; }
.pickBtn.winner{
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(42,57,141,.10), rgba(60,172,59,.10));
  box-shadow: 0 0 26px rgba(216,180,90,.18);
  animation: pop 520ms var(--ease) both;
}
@keyframes pop{ 0%{ transform: scale(.92); } 55%{ transform: scale(1.04); } 100%{ transform: scale(1); } }

.select{
  width:100%;
  background: rgba(0,0,0,.03);
  color:var(--text);
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:12px 12px;
  outline:none;
  font-size:14px;
}
.select:focus{ border-color: rgba(216,180,90,.40); box-shadow: 0 0 0 6px rgba(216,180,90,.12); }

.toast{
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: rgba(255,255,255,.94);
  border:1px solid rgba(0,0,0,.12);
  padding:12px 14px; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  font-size: 13px;
  opacity:0; pointer-events:none;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
  display:flex; align-items:center; gap:12px; z-index:60;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-10px); }
.spark{ width:12px;height:12px;border-radius:999px;background: linear-gradient(180deg, var(--gold), rgba(216,180,90,.55)); box-shadow: 0 0 0 10px rgba(216,180,90,.12); }

.confetti{position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden;}
.confetti i{
  position:absolute; width:10px;height:14px;
  opacity:.98;
  transform: translate3d(0,-10px,0) rotate(0deg);
  animation: fall 1400ms var(--ease) forwards;
}
@keyframes fall{ to{ transform: translate3d(var(--dx), calc(100vh + 60px), 0) rotate(var(--rot)); opacity:0.98; } }



@media print{
  header, .noPrint{display:none !important;}
  body{background:white; color: var(--text);}
  .card{box-shadow:none; border:1px solid #ddd; background:white;}
}

.pulseRing{position:relative;}
.pulseRing:after{content:"";position:absolute;inset:-10px;border-radius:calc(var(--radius) + 12px);
  border:2px solid rgba(216,180,90,.40);opacity:0;animation:ring 1.1s var(--ease) infinite;}
@keyframes ring{0%{transform:scale(.98);opacity:0;}30%{opacity:.65;}100%{transform:scale(1.03);opacity:0;}}

.badge{font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.03);color:rgba(11,14,22,.82);display:inline-flex;gap:6px;align-items:center;}
.badge.legend{border-color:rgba(216,180,90,.50);background:rgba(216,180,90,.12);}

.finalHero{border-color:rgba(216,180,90,.55) !important;box-shadow:0 18px 70px rgba(216,180,90,.22) !important;}

html[data-theme="dark"]{
  --bg:#05060a;
  --card:rgba(14,16,26,.86);
  --card2:rgba(10,12,18,.82);
  --line:rgba(255,255,255,.10);
  --text:#f7f8ff;
  --muted:rgba(247,248,255,.70);
  --shadow: 0 22px 90px rgba(0,0,0,.65);
}

html[data-theme="dark"] .btn{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--text);
}
html[data-theme="dark"] .btn:hover{
  border-color: rgba(216,180,90,.65);
  box-shadow: 0 8px 28px rgba(216,180,90,.28);
  background: rgba(216,180,90,.14);
  color: var(--gold);
}
html[data-theme="dark"] .btn.primary{
  background: linear-gradient(135deg, rgba(42,57,141,.22), rgba(230,29,37,.14));
  border-color: rgba(216,180,90,.32);
}
html[data-theme="dark"] html[data-theme="dark"] .badge{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(247,248,255,.85);
}

html[data-theme="dark"] .toast{
  background: rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 90px rgba(0,0,0,.70);
  color: var(--text);
}

.teamName, .teamName span, .slotVal, .slotTitle, .small, .pill, .tag, .meterTitle, .colTitle{
  color: var(--text);
  transition: color 220ms ease;
}
.small, .pill, .tag, .meterTitle, .colTitle, .slotTitle{
  color: var(--muted);
}
.teamBtn{ color: var(--text); }
.teamBtn .teamName{ color: var(--text); }

.teamBtn{
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.teamBtn:hover{
  box-shadow: 0 10px 28px rgba(42,57,141,.16), 0 0 26px rgba(216,180,90,.14);
  border-color: rgba(42,57,141,.22);
}
html[data-theme="dark"] .teamBtn:hover{
  box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 0 30px rgba(216,180,90,.18);
  border-color: rgba(216,180,90,.28);
}
.teamBtn:active{
  box-shadow: 0 6px 18px rgba(42,57,141,.12);
}

.logo{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:16px; overflow:hidden;
  background: rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.10);
}
.brandLogo{ height:34px; width:auto; display:block; }
.logoLight{ display:block; }
.logoDark{ display:none; }
html[data-theme="dark"] .logo{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
}
html[data-theme="dark"] .logoLight{ display:none; }
html[data-theme="dark"] .logoDark{ display:block; }

.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:56px; height:56px; border-radius:18px; }
.brandLogo{ height:44px; }
@media (max-width:720px){
  .logo{ width:48px; height:48px; }
  .brandLogo{ height:38px; }
}

html:not([data-theme]) .logoLight{ display:block; }
html:not([data-theme]) .logoDark{ display:none; }


.best3Help{
  margin:8px 0 10px 0;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.03);
  color: var(--muted);
  font-size:12px;
}
html[data-theme="dark"] .best3Help{ background: rgba(255,255,255,.03); }
.best3Count{ font-weight:950; color: var(--text); }

.roundCard.bigRound{ padding:18px; }
.roundCard.bigRound .colTitle{ font-size:14px; letter-spacing:.2px; }
.roundCard.bigRound .matchGrid{ gap:12px; }
.qfGlow{ box-shadow: 0 16px 52px rgba(216,180,90,.16) !important; }
.sfGlow{ box-shadow: 0 18px 64px rgba(216,180,90,.22) !important; }
.finGlow{ box-shadow: 0 22px 84px rgba(216,180,90,.30) !important; border-color: rgba(216,180,90,.55) !important; }

.finalHero{
  position:relative;
  overflow:hidden;
}
.finalHero:before{
  content:"🏆";
  position:absolute;
  right:14px; top:10px;
  font-size:18px;
  opacity:.55;
}

.champPanel{
  margin-top:18px;
  border-radius:18px;
  border:1px dashed rgba(216,180,90,.55);
  background: linear-gradient(180deg, rgba(255,233,163,.22), rgba(216,180,90,.10));
  padding:14px 12px;
  text-align:center;
}
html[data-theme="dark"] .champPanel{
  background: linear-gradient(180deg, rgba(255,233,163,.10), rgba(216,180,90,.06));
}
.champLogoWrap{
  display:flex; justify-content:center; align-items:center;
}
.champLogo{
  width: 170px;
  height: auto;
  filter: drop-shadow(0 18px 50px rgba(216,180,90,.20));
}
.champText{
  margin-top:8px;
  font-weight:950;
  letter-spacing:.6px;
  color: var(--text);
}
.champSub{
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(158,110,35,.92);
}
html[data-theme="dark"] .champSub{ color: rgba(255,233,163,.82); }

.modalOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index: 9999;
}
.modalOverlay.open{ display:flex; }
.modalCard{
  width:min(980px, 100%);
  max-height: 88vh;
  overflow:auto;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: var(--card);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .modalCard{
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 26px 90px rgba(0,0,0,.20);
}
.modalHeader{
  position: sticky;
  top:0;
  z-index: 2;
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px 12px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
  border-bottom:1px solid var(--line);
}
html[data-theme="dark"] .modalHeader{
  background: linear-gradient(180deg, rgba(14,16,26,.92), rgba(10,12,18,.86));
}
.modalKicker{ font-weight:950; letter-spacing:.9px; color: rgba(216,180,90,.95); font-size:12px; }
.modalHeader h2{ margin:2px 0 0; font-size:22px; }
.modalSub{ margin-top:6px; color: var(--muted); font-size:12px; }
.iconBtn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  cursor:pointer;
  font-weight:900;
}
.modalGrid{
  padding:16px 18px 20px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
}
.modalSection{
  border:1px solid var(--line);
  border-radius:18px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  padding:14px 14px 12px;
}
.modalSection h3{ margin:2px 0 10px; font-size:14px; letter-spacing:.2px; }
.ruleList{ margin:0; padding-left:18px; color: var(--muted); font-size:12px; line-height: 1.45; }
.ruleList b{ color: var(--text); }
.finePrint{ margin-top:10px; color: rgba(120,130,160,.95); font-size:11px; }
html[data-theme="dark"] .finePrint{ color: rgba(220,225,245,.58); }

.prizeBox{
  border:1px dashed rgba(216,180,90,.60);
  background: linear-gradient(180deg, rgba(255,233,163,.22), rgba(216,180,90,.10));
}
.prizeBig{
  font-size:18px;
  font-weight:950;
  margin:6px 0 10px;
}
.prizeRow{ font-weight:850; margin:6px 0; }
.prizeAmt{ color: rgba(158,110,35,.98); }
html[data-theme="dark"] .prizeAmt{ color: rgba(255,233,163,.90); }
.prizeNote{ margin-top:10px; color: var(--muted); font-size:12px; }

.formGrid{ display:grid; gap:10px; }
.field{ display:grid; gap:6px; }
.field span{ font-size:12px; font-weight:850; color: var(--muted); }
.field input{
  border:1px solid var(--line);
  border-radius: 14px;
  padding:10px 12px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
}
html[data-theme="light"] .field input{ background: rgba(0,0,0,.03); }
.field input:focus{
  border-color: rgba(216,180,90,.60);
  box-shadow: 0 0 0 3px rgba(216,180,90,.16);
}
.payGrid{
  display:grid;
  grid-template-columns: 1.3fr .7fr .6fr .7fr;
  gap:10px;
}
.checkRow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  color: var(--muted);
}
.checkRow input{ margin-top:2px; }
.checkRow a{ color: rgba(216,180,90,.95); text-decoration:none; font-weight:900; }
.checkRow a:hover{ text-decoration:underline; }

.formActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:2px;
}

@media (max-width: 860px){
  .modalGrid{ grid-template-columns: 1fr; }
  .payGrid{ grid-template-columns: 1fr 1fr; }
}

.btn.primary:disabled, .btn.primary[disabled]{
  opacity:.55;
  cursor:not-allowed;
  filter: grayscale(.15);
}

/* Tournament lock state */
body.bracketLocked .pickBtn,
body.bracketLocked .groupBtn,
body.bracketLocked .best3Btn {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
.lockBanner {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(10,12,18,0.95); border: 1px solid rgba(216,180,90,0.40);
  color: #D8B45A; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding: 10px 22px; border-radius: 999px; z-index: 999;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}


@keyframes champPop {
  0%{ transform: translateY(0) scale(1); filter: drop-shadow(0 18px 50px rgba(216,180,90,.20)); }
  35%{ transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 26px 70px rgba(216,180,90,.35)); }
  100%{ transform: translateY(0) scale(1); filter: drop-shadow(0 18px 50px rgba(216,180,90,.20)); }
}
.champPanel.celebrate .champLogo{ animation: champPop 700ms ease-out 1; }



.group.locked .teamBtn:not(.first):not(.second){
  opacity: .45;
  filter: grayscale(.2);
}

.teamBtn.third::after{
  content: "Best‑3 Candidate";
  margin-left:8px;
  padding:2px 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid rgba(216,180,90,.55);
  background: rgba(216,180,90,.18);
  color: var(--text);
}

.connectorLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
}
#connectorSvg{
  width:100%;
  height:100%;
  display:block;
}
.connPath{
  fill:none;
  stroke: rgba(216,180,90,.45);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  animation: dash 1.6s linear infinite;
  filter: drop-shadow(0 14px 40px rgba(216,180,90,.12));
}
html[data-theme="dark"] .connPath{
  stroke: rgba(255,233,163,.35);
}
@keyframes dash{
  to { stroke-dashoffset: -32; }
}

.bracketCols{ position:relative; z-index:1; }

.shareRow{ display:flex; gap:10px; align-items:center; }
.shareInput{
  flex:1;
  border:1px solid var(--line);
  border-radius: 14px;
  padding:10px 12px;
  background: rgba(255,255,255,.06);
  color: var(--text);
}
html[data-theme="light"] .shareInput{ background: rgba(0,0,0,.03); }
.tableWrap{ overflow:auto; border-radius:16px; border:1px solid var(--line); }
.lbTable{ width:100%; border-collapse:collapse; font-size:12px; }
.lbTable th, .lbTable td{ padding:10px 10px; border-bottom:1px solid var(--line); text-align:left; }
.lbTable thead th{ position:sticky; top:0; background: var(--card); }



#stageGroups h2{
  font-size: 15px;
  letter-spacing: .01em;
  text-transform: none;
  font-weight: 700;
}
#stageGroups .small{
  max-width: 920px;
  font-weight: 500;
}

#stageGroups .groupsStage{ gap:16px; }
#stageGroups .groupsStage .card{
  padding:0;
  overflow:hidden;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.12);
}
html[data-theme="dark"] #stageGroups .groupsStage .card{
  background: rgba(14,16,26,.88);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
}

#stageGroups .groupHead{
  margin:0;
  padding:10px 12px;
  background: rgba(11,14,22,.98);
  color: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#stageGroups .groupHead .pill{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}

#stageGroups .slots,
#stageGroups .teams{ padding:12px; }
#stageGroups .slots{ padding-top:12px; }
#stageGroups .teams{ padding-top:0; }

#stageGroups .teamBtn{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
}
html[data-theme="dark"] #stageGroups .teamBtn{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
#stageGroups .teamBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

body{
  position:relative;
  background: #0d0f17;
}

.stage{
  background: transparent !important;
}

.grid > .card { margin-bottom: 6px !important; }

.card > h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  opacity: .7;
}

/* Help icon buttons — ? circle next to section headers */
.helpIconBtn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  margin-left: 8px;
  vertical-align: middle;
  color: rgba(255,255,255,0.40);
  transition: background 150ms, border-color 150ms, color 150ms;
}
.helpIconBtn:hover {
  background: rgba(216,180,90,0.18);
  border-color: rgba(216,180,90,0.40);
  color: #D8B45A;
}

html[data-theme="dark"] .card {
  background: rgba(255,255,255,.028);
  border: none;
  box-shadow: none;
}

.prizeFootnote { opacity: .38; }

.prizeRowCard{ padding: 20px 24px 14px; }
.prizeRow3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.07);
  border-radius: 14px;
  overflow: hidden;
}
.prizeCell{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px 12px;
  background: var(--card2);
  text-align: center;
}
.prizeCell.gold{ background: rgba(216,180,90,.06); }
.prizeRank{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
}
.prizeCell.gold .prizeRank{ opacity: .7; color: var(--gold); }
.prizeAmt{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text);
}
.prizeCell.gold .prizeAmt{ color: var(--gold); font-size: 26px; }
.prizeCell.silver .prizeAmt{ color: #A8A8B0; }
.prizeCell.bronze .prizeAmt{ color: #C87A3A; }
.prizePerks{
  font-size: 11px;
  color: var(--muted);
  opacity: .7;
  margin-top: 2px;
}
.prizeFootnote{
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  opacity: .55;
  margin-top: 10px;
}
.prizeFootnote a{ color: var(--gold); opacity: .8; }

.stage{
  position:relative;
  margin-bottom: 36px;
  padding-bottom: 6px;
  z-index: 1;
}
.stage::after{
  content:"";
  position:absolute;
  left: -14px;
  right: -14px;
  bottom: -36px;
  height: 60px;
  border-radius: 26px;
  z-index: -1;
  opacity: .30;
  pointer-events:none;
}
.stage:last-of-type{ margin-bottom: 0; }
.stage:last-of-type::after{ display:none; }
@media (max-width: 860px){
  .stage{ margin-bottom: 26px; }
  .stage::after{ bottom:-26px; height:46px; left:-10px; right:-10px; border-radius:22px; }
}

@keyframes revealUp{
  0%{ transform: translateY(10px) scale(.98); opacity:0; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes glowSweep{
  0%{ transform: translateX(-40%); opacity:0; }
  15%{ opacity:.9; }
  100%{ transform: translateX(140%); opacity:0; }
}
.drawReveal .groupsStage .card{ animation: revealUp 520ms ease-out both; }
.drawReveal .groupsStage .card:nth-child(1){ animation-delay: 40ms; }
.drawReveal .groupsStage .card:nth-child(2){ animation-delay: 80ms; }
.drawReveal .groupsStage .card:nth-child(3){ animation-delay: 120ms; }
.drawReveal .groupsStage .card:nth-child(4){ animation-delay: 160ms; }
.drawReveal .groupsStage .card:nth-child(5){ animation-delay: 200ms; }
.drawReveal .groupsStage .card:nth-child(6){ animation-delay: 240ms; }
.drawReveal .groupsStage .card:nth-child(7){ animation-delay: 280ms; }
.drawReveal .groupsStage .card:nth-child(8){ animation-delay: 320ms; }
.drawReveal .groupsStage .card:nth-child(9){ animation-delay: 360ms; }
.drawReveal .groupsStage .card:nth-child(10){ animation-delay: 400ms; }
.drawReveal .groupsStage .card:nth-child(11){ animation-delay: 440ms; }
.drawReveal .groupsStage .card:nth-child(12){ animation-delay: 480ms; }

.drawSweep{ position: relative; overflow: hidden; }
.drawSweep::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,233,163,.65), rgba(255,255,255,0));
  transform: skewX(-18deg);
  animation: glowSweep 900ms ease-out 1 forwards;
  pointer-events:none;
}
html[data-theme="dark"] .drawSweep::after{
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,233,163,.28), rgba(0,0,0,0));
}

:root{
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 22px;
  --focus: rgba(0, 122, 255, .55);
}

html, body{ font-family: var(--font-system) !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1,h2,h3{ letter-spacing: .2px; }
.small, .finePrint{ line-height: 1.45; }

.card, .modalCard, .teamBtn, .slot, .btn, input, select{
  border-radius: var(--radius-md);
}

.btn, .teamBtn, .slot{
  min-height: 44px;
}

.btn{
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.teamBtn{
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  padding: 10px 12px;
}
.teamBtn:active{ transform: translateY(1px) scale(.99); }

:focus{ outline: none; }
:focus-visible{
  box-shadow: 0 0 0 3px var(--focus);
}

html[data-theme="dark"]{
  --muted: rgba(235, 238, 255, .68);
}
html[data-theme="light"]{
  --muted: rgba(45, 55, 72, .70);
}

.iconBtn{ border-radius: 14px; }

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .connPath{ animation: none !important; }
}

.teamBtn.isPicked{
  position: relative;
}
.teamBtn.isPicked::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  background: var(--pickGlow, rgba(255, 215, 0, .12));
  filter: blur(0.5px);
  z-index:-1;
  opacity: .95;
  pointer-events:none;
}

.slot.filled{
  border-left: 3px solid rgba(255,233,163,.95);
  padding-left: 10px;
}

.champCard{
  position: relative;
  overflow:hidden;
}
.champCard::before{
  display:none;
}
.champCard > *{ position:relative; z-index:1; }

@keyframes champPulse{
  0%{ transform: translateY(0); box-shadow: 0 10px 40px rgba(0,0,0,.18); }
  40%{ transform: translateY(-2px); box-shadow: 0 22px 70px rgba(255,233,163,.18), 0 22px 70px rgba(0,0,0,.22); }
  100%{ transform: translateY(0); box-shadow: 0 10px 40px rgba(0,0,0,.18); }
}
.champCard.pulseOnce{
  animation: champPulse 900ms ease-out 1;
}
@media (prefers-reduced-motion: reduce){
  .champCard.pulseOnce{ animation:none !important; }
}

.stage[data-stage="groups"]{ --stageColor: rgba(0,190,190,.55); }
.stage[data-stage="r32"]{ --stageColor: rgba(0,190,90,.55); }
.stage[data-stage="qf"]{ --stageColor: rgba(0,112,255,.55); }
.stage[data-stage="sf"]{ --stageColor: rgba(98,35,227,.55); }
.stage[data-stage="final"]{ --stageColor: rgba(255,205,95,.65); }

.stage{
  position:relative;
  isolation:isolate;
}
.stage::before{
  content:"";
  position:absolute;
  inset:-40px -24px;
  border-radius:40px;
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--stageColor) 85%, transparent),
      transparent 70%);
  z-index:-2;
  pointer-events:none;
}
.stage::after{
  content:"";
  position:absolute;
  inset:-60px -60px;
  background:
    radial-gradient(60% 80% at 10% 20%, color-mix(in srgb, var(--stageColor) 70%, transparent), transparent 65%),
    radial-gradient(50% 70% at 80% 30%, color-mix(in srgb, var(--stageColor) 55%, transparent), transparent 65%);
  opacity:.35;
  z-index:-3;
  pointer-events:none;
}
html[data-theme="dark"] .stage::before{ opacity:.45; }
html[data-theme="dark"] .stage::after{ opacity:.25; }

.stage[data-stage="final"]::before{
  background:
    linear-gradient(120deg,
      rgba(255,215,120,.9),
      rgba(255,215,120,.0) 72%);
}
.stage[data-stage="final"]::after{
  background:
    radial-gradient(70% 90% at 50% 40%, rgba(255,215,120,.6), rgba(255,215,120,0) 65%);
  opacity:.45;
}

@media (max-width: 860px){
  .stage::before{ inset:-26px -16px; border-radius:28px; }
  .stage::after{ inset:-36px -36px; }
}

.stage::after{
  animation: none;
  will-change: auto;
}
.stage::before{
  animation: none;
  will-change: auto;
}

@media (min-width: 980px){
  .stage[data-stage="final"]{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
  .stage[data-stage="final"]::before,
  .stage[data-stage="final"]::after{
    border-radius: 0;
    inset: -72px 0;
  }
}

@media (max-width: 560px){
  .stage::before{ inset:-20px -12px; border-radius: 22px; opacity: .14; }
  .stage::after{ inset:-28px -28px; opacity: .20; }
  .stage[data-stage="final"]::before,
  .stage[data-stage="final"]::after{ inset:-30px -10px; border-radius: 22px; }
}
@media (max-width: 420px){
  .stage::before{ inset:-16px -10px; }
  .stage::after{ inset:-22px -22px; }
}

.best3Wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  margin-top:12px;
}
@media (max-width: 980px){
  .best3Wrap{ grid-template-columns: 1fr; }
}
.best3Pane{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 12px;
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .best3Pane{
  border-color: rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.best3PaneHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.best3Title{
  font-weight:900;
  letter-spacing:-.02em;
}
.best3Hint{
  font-size:12px;
  opacity:.75;
}
.best3Grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 560px){
  .best3Grid{ grid-template-columns: 1fr; }
}
.best3Card{
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.best3Card:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.10); }
html[data-theme="dark"] .best3Card:hover{ box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.best3Card.locked{ opacity:.55; cursor:default; }
.best3Card.on .pill{ background: rgba(255,233,163,.30); border-color: rgba(255,233,163,.55); }

.best3Slots{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 560px){
  .best3Slots{ grid-template-columns: 1fr; }
}
.best3Slot{
  border:1px dashed rgba(0,0,0,.22);
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(255,255,255,.60);
  min-height: 54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
html[data-theme="dark"] .best3Slot{
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
}
.best3Slot.filled{
  border-style: solid;
  border-color: rgba(255,233,163,.55);
  box-shadow: 0 14px 46px rgba(255,233,163,.10);
}
.best3Slot .slotLabel{
  font-size:12px;
  opacity:.75;
  font-weight:800;
}
.best3Slot .slotTeam{
  flex:1;
  font-weight:900;
}
.best3Slot .xBtn{
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
  border-radius: 10px;
  padding: 6px 9px;
  cursor:pointer;
}
html[data-theme="dark"] .best3Slot .xBtn{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
}
.best3Slot.dropHot{
  outline: 2px solid rgba(0,112,255,.30);
  box-shadow: 0 20px 60px rgba(0,112,255,.12);
}
.best3Actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.best3Actions .btnSmall{
  padding: 8px 10px;
  border-radius: 12px;
  font-weight:900;
  font-size: 12px;
}

.best3Wrap{ gap:12px; }
.best3Pane{ padding:10px; border-radius:14px; }
.best3PaneHead{ margin-bottom:8px; }
.best3Title{ font-size:14px; }
.best3Hint{ font-size:11px; max-width: 52ch; }
.best3Pane .pill{ transform: translateY(-1px); }

@media (min-width: 1120px){
  .best3Grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.best3Grid{ gap:8px; }
.best3Card{
  padding:10px 10px;
  border-radius: 14px;
}
.best3Card .pill{ font-size:11px; padding:6px 8px; }

.best3Slots{ gap:8px; }
.best3Slot{
  padding: 9px 10px;
  border-radius: 14px;
  min-height: 50px;
}
.best3Slot .slotTeam{ font-size: 13px; }

.best3Actions{
  justify-content: flex-end;
  margin-top:8px;
}
.best3Actions .btnSmall{
  padding: 8px 10px;
  min-height: 38px;
}

@media (max-width: 560px){
  .best3Pane{ padding:10px; }
  .best3Card{ padding:10px; }
  .best3Slot{ min-height: 48px; }
}

.best3Pane:nth-child(2){ position: relative; }
.best3Pane:nth-child(2) .best3PaneHead{
  position: sticky;
  top: 10px;
  background: inherit;
  backdrop-filter: blur(10px);
  padding-bottom: 8px;
  z-index: 2;
}

.best3Wrap{
  grid-template-columns: .92fr 1.28fr !important;
  align-items: start;
}
@media (max-width: 980px){
  .best3Wrap{ grid-template-columns: 1fr !important; }
}

.best3Pane:nth-child(2){
  border-color: rgba(255,233,163,.55);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 70px rgba(255,233,163,.10);
}
html[data-theme="dark"] .best3Pane:nth-child(2){
  background: rgba(0,0,0,.26);
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
}
.best3Pane:nth-child(2)::before{
  content:"";
  position:absolute;
  left:0; top:12px; bottom:12px;
  width:3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,233,163,.95), rgba(0,112,255,.55));
  opacity:.75;
  pointer-events:none;
}
.best3Pane:nth-child(2){ position: relative; }

@media (min-width: 1120px){
  .best3Slots{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
}
.best3Slot{ min-height: 56px; }

.best3Pane:nth-child(1) .best3Title{ letter-spacing:-.02em; }
.best3Pane:nth-child(2) .best3Title{ letter-spacing:-.02em; }

.best3Wrap{
  column-gap: 28px !important;
}

.best3Pane{
  margin: 6px 0;
}

@media (min-width: 1120px){
  .best3Wrap{
    column-gap: 36px !important;
  }
}

@media (max-width: 980px){
  .best3Wrap{
    row-gap: 18px !important;
  }
}

.best3Wrap{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap:14px !important;
  column-gap:14px !important;
}

.best3Wrap > .best3Pane:nth-child(1){
  grid-column: 1 / span 2;
}
.best3Wrap > .best3Pane:nth-child(2){
  grid-column: 3 / span 2;
}

@media (max-width:1250px){
  .best3Wrap{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .best3Wrap > .best3Pane:nth-child(1){ grid-column: 1 / span 2; }
  .best3Wrap > .best3Pane:nth-child(2){ grid-column: 3 / span 1; }
}

@media (max-width:980px){
  .best3Wrap{ grid-template-columns: 1fr !important; gap:16px !important; }
  .best3Wrap > .best3Pane:nth-child(1),
  .best3Wrap > .best3Pane:nth-child(2){ grid-column:auto; }
}

#stageBest3{ padding-left: 14px; padding-right: 14px; }
@media (max-width:560px){
  #stageBest3{ padding-left: 12px; padding-right: 12px; }
}

#best3{ width:100%; }
.best3Wrap{
  width:100% !important;
  justify-items: stretch;
  align-items: stretch;
}
.best3Wrap > .best3Pane{
  width:100%;
  min-width:0; 
}

#best3{ display:block !important; width:100% !important; }
#best3.best3Grid{ display:block !important; grid-template-columns:none !important; }



.leaderboardTable .youRow{
  background: rgba(255,233,163,.2);
}

.best3Slot.active{outline:2px solid rgba(0,112,255,.35); box-shadow:0 18px 60px rgba(0,112,255,.12);} 

.reviewBadge{
  display:inline-block;
  margin-left:8px;
  padding:3px 7px;
  border-radius:999px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:-.01em;
  background: rgba(255,120,120,.16);
  border: 1px solid rgba(255,120,120,.35);
}
html[data-theme="dark"] .reviewBadge{
  background: rgba(255,120,120,.12);
  border-color: rgba(255,120,120,.28);
}
.best3MicroHint{
  margin-top:8px;
  padding:8px 10px;
  border-radius:14px;
  font-size:12px;
  font-weight:800;
  background: rgba(0,112,255,.08);
  border: 1px solid rgba(0,112,255,.18);
}
html[data-theme="dark"] .best3MicroHint{
  background: rgba(0,112,255,.12);
  border-color: rgba(0,112,255,.22);
}

.pickBtn.disabled{opacity:.55; cursor:not-allowed; filter:saturate(.7);} 

.heroCard{ margin: 14px auto 0; width:min(1180px, calc(100% - 24px)); }
.heroInner{ padding: 18px 18px 16px; }
.heroTitle{ font-size: 28px; font-weight: 1000; letter-spacing: -.03em; line-height:1.1; }
.heroSub{ margin-top:8px; font-size: 14px; opacity:.78; font-weight:700; }

.heroSplit{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.heroCopy{ min-width:0; }
.heroCountdownWrap{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.heroCountdown{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: .12em;
  padding: 12px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border: 1px solid rgba(247,213,107,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
}
.heroCountdownHint{ font-size: 11px; font-weight: 800; letter-spacing:.12em; text-transform: uppercase; opacity:.72; }

@media (max-width: 720px){
  .heroSplit{ flex-direction:column; align-items:flex-start; }
  .heroCountdownWrap{ align-items:flex-start; width:100%; }
}

.champFocusOverlay{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0px);
  opacity:0;
  pointer-events:none;
  transition:opacity 380ms ease, background 380ms ease, backdrop-filter 380ms ease;
  z-index:9990;
}
body.champFocus .champFocusOverlay{
  opacity:1;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(24px);
  pointer-events:auto;
}
body.champFocus main, body.champFocus #sjHero{
  opacity:.15 !important;
  filter:saturate(.5) blur(1px);
  transition:opacity 380ms ease, filter 380ms ease;
}
body.champFocus .finalHero{ opacity:1 !important; filter:none !important; }

.champFocusClose{
  position:absolute; top:16px; right:16px;
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(216,180,90,.45); background:#0d0d0d;
  color:#D8B45A; font-size:15px; font-weight:700; line-height:36px;
  cursor:pointer; z-index:10000;
  opacity:0; transition:filter 180ms, transform 180ms;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.champFocusClose:hover{ filter:brightness(1.12); transform:scale(1.06); }
.champFocusClose:active{ transform:scale(.96); }

.champFocusCenter{
  text-align:center;
  padding:40px 48px 44px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(160deg,#0d0d0d 0%,#060606 100%);
  box-shadow:0 48px 140px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04);
  max-width:460px; width:92%;
  opacity:0; transform:scale(.94) translateY(14px);
}

.champWorldLabel{
  font-size:11px; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color:rgba(216,180,90,.9);
  margin-bottom:22px;
  opacity:0;
}

.champBrandRow{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-bottom:28px;
  opacity:0;
}
.champGoldLogo{
  width:48px !important; height:48px !important;
  border-radius:12px;
  display:block; flex-shrink:0;
  background:transparent; border:0; box-shadow:none;
}
.champBrandText{ text-align:left; }
.champBrandName{
  font-size:14px; font-weight:800;
  letter-spacing:.06em; color:#fff;
  line-height:1.1;
}
.champBrandSub{
  font-size:11px; font-weight:400;
  color:rgba(255,255,255,.38); letter-spacing:.02em;
}

.champWinnerName{
  font-size:64px !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  line-height:1.0 !important;
  color:#ffffff !important;
  margin-bottom:36px !important;
  text-shadow:0 0 80px rgba(216,180,90,.35) !important;
  opacity:0; filter:blur(16px);
}
.champWinnerName::after{ display:none !important; }

.champCtas{
  display:flex; gap:10px; justify-content:center;
  align-items:center; flex-wrap:wrap; margin-top:0 !important;
  opacity:0;
}
.champBtn{
  appearance:none; border:none;
  padding:14px 28px; border-radius:999px;
  font-size:14px; font-weight:700;
  cursor:pointer; transition:transform 160ms ease, opacity 160ms ease;
  font-family:inherit;
}
.champBtn:hover{ transform:scale(1.04); opacity:.9; }
.champBtn:active{ transform:scale(.98); }
.champBtn:focus-visible{ outline:2px solid rgba(216,180,90,.7); outline-offset:3px; }
.champBtnPrimary{
  background:linear-gradient(135deg,#D8B45A,#C9922A);
  color:#000;
  box-shadow:0 8px 32px rgba(216,180,90,.35);
}
.champBtnShare{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15) !important;
  color:#fff;
}
.champBtnPoster{
  background:rgba(216,180,90,.12);
  border:1px solid rgba(216,180,90,.35) !important;
  color:#D8B45A;
}
.champBtnPoster:hover{ background:rgba(216,180,90,.22); }

.toast{ font-weight:700 !important; }

@media (prefers-reduced-motion:reduce){
  .champFocusOverlay, .champFocusCenter, .champWinnerName,
  .champGoldLogo, .champWorldLabel, .champBrandRow, .champCtas, .champFocusClose{
    transition:none !important; animation:none !important;
    opacity:1 !important; filter:none !important; transform:none !important;
  }
}

.lockConfirmOverlay{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  z-index: 10050;
  background: radial-gradient(circle at 50% 45%, rgba(255,215,120,.22), rgba(0,0,0,.55) 60%, rgba(0,0,0,.78));
  backdrop-filter: blur(10px);
  transition: opacity 240ms ease;
}
.lockConfirmOverlay.show{ opacity:1; pointer-events:auto; }
.lockConfirmCard{
  text-align:center;
  padding: 30px 26px 24px;
  border-radius: 26px;
  border: 1px solid rgba(255,215,120,.35);
  background: rgba(15,15,18,.42);
  box-shadow: 0 28px 120px rgba(0,0,0,.55);
  transform: translateY(10px) scale(.96);
  transition: transform 260ms cubic-bezier(.16,1.25,.2,1);
}
.lockConfirmOverlay.show .lockConfirmCard{ transform: translateY(0) scale(1); }
.lockConfirmTitle{ font-size: 22px; font-weight: 1000; letter-spacing:-.02em; }
.lockConfirmSub{ margin-top: 8px; opacity:.85; font-weight: 850; }
.lockConfirmActions{ display:flex; gap:10px; justify-content:center; margin-top: 14px; flex-wrap:wrap; }

.lockFlash{
  position: fixed; inset:0; z-index: 10040;
  pointer-events:none;
  background: radial-gradient(circle at 50% 45%, rgba(255,240,190,.55), rgba(255,240,190,0) 60%);
  opacity:0;
}
.lockFlash.play{ animation: lockFlash 520ms ease-out 1; }
@keyframes lockFlash{
  0%{ opacity:0; }
  20%{ opacity:1; }
  100%{ opacity:0; }
}

.teamBtn.isFirst{
  box-shadow: 0 0 0 1.5px rgba(0,120,255,.60) inset;
  background: rgba(0,120,255,.08);
  --pickGlow: rgba(0,120,255,.12);
}
.teamBtn.isSecond{
  box-shadow: 0 0 0 1.5px rgba(0,180,120,.60) inset;
  background: rgba(0,180,120,.08);
  --pickGlow: rgba(0,180,120,.12);
}
.teamBtn.isThird{
  box-shadow: 0 0 0 1.5px rgba(220,70,70,.60) inset;
  background: rgba(220,70,70,.08);
  --pickGlow: rgba(220,70,70,.12);
}

@media (max-width: 840px) {
  .leftActions, .rightActions{ justify-content:center; }
}

.topHeader{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
  align-items:center;
  width:100%;
}
.topHeader .leftActions{
  grid-column: 1 / 2;
  justify-self:start;
  display:flex;
  gap:10px;
  align-items:center;
}
.topHeader .centerBrand{
  grid-column: 2 / 3; 
  justify-self:center;
  display:flex;
  justify-content:center;
}
.topHeader .rightActions{
  grid-column: 3 / 4; 
  justify-self:end;
  display:flex;
  gap:10px;
  align-items:center;
}
.topHeader .brand{ display:flex; align-items:center; gap:10px; justify-content:center; }

@media (max-width: 1250px){
  .topHeader{ grid-template-columns: 1fr 1fr; gap:12px; }
  .topHeader .leftActions{ grid-column:1 / 2; }
  .topHeader .rightActions{ grid-column:2 / 3; }
  .topHeader .centerBrand{ grid-column:1 / 3; order:-1; margin-bottom:6px; }
}

*{ box-sizing: border-box; }
html, body{ width:100%; max-width:100%; overflow-x:hidden; }
img, svg, video, canvas{ max-width:100%; height:auto; }

:root{
  --rail-max: 1500px;
  --rail-pad-x: clamp(12px, 2vw, 20px);
  --card-pad: clamp(10px, 1.4vw, 16px);
  --gap: clamp(10px, 1.4vw, 16px);
  --text: clamp(14px, 1.2vw, 16px);
}
body{ font-size: var(--text); }

.wrap{
  max-width: var(--rail-max);
  margin: 0 auto;
  padding-left: var(--rail-pad-x);
  padding-right: var(--rail-pad-x);
}

.groupsStage{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--gap);
}
@media (max-width: 1200px){
  .groupsStage{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .groupsStage{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  .bracketWrap, .knockout, .koStage, .bracket{
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* Only KO bracket inner content needs min-width for horizontal scroll */
  .knockout > *, .koStage > *, .bracket > *{
    min-width: 980px;
  }

}

@media (max-width: 980px){
  header.noPrint .topHeader{
    grid-template-columns: 1fr;
    row-gap: 10px;
    justify-items:center;
  }
  header.noPrint .leftActions,
  header.noPrint .rightActions,
  header.noPrint .centerBrand{
    grid-column:auto !important;
    justify-self:center !important;
  }
}

.headerRibbon { position: fixed; top:0; left:0; right:0; background:#0b0e14; z-index:50; }
.ribbonTop, .ribbonBottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0;
}
.ribbonTop .center { font-weight:900; font-size:20px; }
.ribbonBottom { gap:14px; justify-content:center; }
.navBtn { background:none; border:none; color:#fff; cursor:pointer; transition: color 200ms ease; }
.navBtn:hover { color: var(--gold) !important; opacity: 1 !important; }

.headerShield{
  height: 46px;
  width: auto;
  display:block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}
.headerRibbon .ribbonTop .center{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
@media (max-width: 720px){
  .headerShield{ height: 40px; }
}

.headerRibbon{ color:#fff; }
.headerRibbon .ribbonTop .left,
.headerRibbon .ribbonTop .right{ color:#fff; font-weight:800; letter-spacing:.01em; }
.headerRibbon .ribbonTop .left, .headerRibbon .ribbonTop .right{
  opacity: .95;
}

.headerRibbon .navBtn{ color:#fff; opacity:.85; font-size: 14px; font-weight: 500; padding: 4px 2px; position: relative; letter-spacing: 0.3px; }
.headerRibbon .navBtn::after{ content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--gold); transition: width 200ms ease; }
.headerRibbon .navBtn:hover{ opacity:1; color: var(--gold) !important; }
.headerRibbon .navBtn:hover::after{ width: 100%; }
.headerRibbon .navBtnSpecial{ opacity: .9; }

#scaleWrap{ min-height: auto !important; padding-bottom: 0 !important; margin-bottom: 0 !important; padding-top: 130px; }
#scaleWrap > *:last-child{ margin-bottom:0 !important; padding-bottom: clamp(16px, 3vh, 28px) !important; }

:root{
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 22px;
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.25);
  --blur: 14px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --tap: 44px; 
  --ring: 0 0 0 4px rgba(10, 132, 255, .35);
}

body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.card, .groupCard, .panel, .box, .koCard, .modal, .sheet{
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-glow);
  border: 1px solid rgba(255,255,255,.10);
}
.card:hover, .groupCard:hover, .koCard:hover{
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 18px 42px rgba(0,0,0,.28);
}

.headerRibbon{
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

button, .btn, .navBtn, [role="button"], a.btnLike{
  min-height: var(--tap);
}

button:focus-visible, .btn:focus-visible, .navBtn:focus-visible,
[role="button"]:focus-visible, a:focus-visible{
  outline: none !important;
  box-shadow: var(--ring);
}

.teamBtn, .team, .teamRow, .teamItem, .pickBtn{
  transition: transform .14s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), opacity .22s var(--ease);
}
.teamBtn:hover, .team:hover, .teamRow:hover, .teamItem:hover, .pickBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.modalOverlay, .dim, .overlay{
  backdrop-filter: blur(calc(var(--blur) * .85));
  -webkit-backdrop-filter: blur(calc(var(--blur) * .85));
}

html[data-theme="light"] .card,
html[data-theme="light"] .groupCard,
html[data-theme="light"] .koCard,
html[data-theme="light"] .panel,
html[data-theme="light"] .box{
  border: 1px solid rgba(15,18,26,.08);
  box-shadow: 0 0 0 1px rgba(15,18,26,.06), 0 16px 34px rgba(15,18,26,.12);
}

.sectionDivider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity: .65;
  margin: 18px 0;
}

.draggable, .teamBtn, .teamRow, .teamItem{
  user-select: none;
  -webkit-user-select: none;
}

.toast{
  width: min(520px, calc(100vw - 28px)) !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 80px rgba(0,0,0,.22) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.toast .tTitle, .toast .title, .toast .msg, .toast .text{
  font-size: 18px !important;
}
.toast .spark, .toast .dot{
  transform: scale(1.15);
}
.toast.show{
  transform: translateX(-50%) translateY(-14px) !important;
}

.toast{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap: 12px !important;
}
.toast .toastMsg, .toast .msg, .toast .text, .toast .tMsg{
  flex: 1 1 auto !important;
  width: 100% !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.toast small, .toast .sub, .toast .subtext{
  display:block;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.25;
  opacity:.8;
}

.best3Layout{display:grid;grid-template-columns:1.35fr .9fr;gap:16px;align-items:start;margin-top:14px;}
@media (max-width:980px){.best3Layout{grid-template-columns:1fr;}}
.best3PoolGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media (max-width:520px){.best3PoolGrid{grid-template-columns:1fr;}}
.best3Board{position:sticky;top:86px;}
@media (max-width:980px){.best3Board{position:relative;top:auto;}}
.rankBoardTitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.rankBoardTitle .hint{opacity:.72;font-size:12px;}
.rankSlots{display:grid;gap:10px;}
.rankSlot{border-radius:16px;border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.04);padding:10px 12px;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
html[data-theme="light"] .rankSlot{border-color:rgba(15,18,26,.16);background:rgba(15,18,26,.03);}
.rankSlot.dragOver{border-style:solid;border-color:rgba(255,215,0,.55);box-shadow:0 0 0 4px rgba(255,215,0,.18);}
.rankSlot .rankLabel{font-weight:900;letter-spacing:.01em;opacity:.92;}
.rankSlot .slotTeam{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;}
.rankSlot .slotTeam .name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(240px, calc(100vw - 140px));}
.rankSlot .slotTeam .empty{opacity:.55;font-weight:800;}
.rankSlot .clearBtn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:12px;padding:6px 10px;font-weight:900;cursor:pointer;min-height:36px;}
html[data-theme="light"] .rankSlot .clearBtn{border-color:rgba(15,18,26,.16);background:rgba(15,18,26,.03);}
.best3Card{cursor:grab;}
.best3Card:active{cursor:grabbing;}
.best3Card.selectedForAssign{box-shadow:0 0 0 4px rgba(10,132,255,.32), 0 16px 40px rgba(0,0,0,.25)!important;transform:translateY(-1px);}
.quickAssign{position:sticky;top:86px;z-index:3;margin-bottom:12px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(12,16,26,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:10px 12px;display:none;}
html[data-theme="light"] .quickAssign{background:rgba(255,255,255,.72);border-color:rgba(15,18,26,.10);}
.quickAssign.show{display:block;}
.quickAssign .row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.quickAssign .title{font-weight:1000;}
.quickAssign .chips{display:flex;gap:8px;flex-wrap:wrap;}
.quickAssign .chipBtn{min-height:36px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font-weight:900;cursor:pointer;}
html[data-theme="light"] .quickAssign .chipBtn{border-color:rgba(15,18,26,.14);background:rgba(15,18,26,.03);}
.quickAssign .chipBtn:disabled{opacity:.35;cursor:not-allowed;}

.best3Card.eliminated{border-color:rgba(255,59,48,.55)!important;background:rgba(255,59,48,.10)!important;opacity:.72;}
.best3Card.eliminated .pill{background:rgba(255,59,48,.14)!important;border-color:rgba(255,59,48,.22)!important;color:rgba(255,59,48,.95)!important;font-weight:900;}
.best3Card.eliminated b, .best3Card.eliminated .teamName{color:rgba(255,59,48,.95)!important;}

#stageBest3.rank8Pulse{animation:rank8Pulse 900ms cubic-bezier(.16,1,.3,1) 1;}
@keyframes rank8Pulse{0%{box-shadow:0 0 0 0 rgba(255,215,0,0);}35%{box-shadow:0 0 0 6px rgba(255,215,0,.22);}70%{box-shadow:0 0 0 14px rgba(255,215,0,.10);}100%{box-shadow:0 0 0 0 rgba(255,215,0,0);}}

.best3Controls{
  display:flex;
  gap:8px;
  align-items:center;
}
.best3Controls .miniBtn{
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: transparent;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .01em;
  transition: color 150ms, border-color 150ms;
}
.best3Controls .miniBtn:hover{
  color: var(--gold);
  border-color: rgba(216,180,90,.35);
}
.best3Controls .miniBtn:disabled{
  opacity:.4;
  cursor:not-allowed;
}
html[data-theme="light"] .best3Controls .miniBtn{
  border-color: rgba(15,18,26,.14);
  background: rgba(15,18,26,.03);
}

.podium{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 16px;
}
.podium-slot{
  flex: 1;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.podium-place{ font-size: 36px; margin-bottom: 8px; }
.podium-label{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.podium-amount{
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.podium-slot.first .podium-amount{ color: var(--gold); }
.podium-slot.second .podium-amount{ color: #A0A0A8; }
.podium-slot.third .podium-amount{ color: #CD7F32; }
.podium-bar{
  width: 100%;
  border-radius: 12px 12px 0 0;
}
.podium-slot.first .podium-bar{
  background: linear-gradient(180deg, rgba(216,180,90,.35), rgba(216,180,90,.12));
  border: 1px solid rgba(216,180,90,.40);
  border-bottom: none;
}
.podium-slot.second .podium-bar{
  background: linear-gradient(180deg, rgba(160,160,168,.25), rgba(160,160,168,.08));
  border: 1px solid rgba(160,160,168,.30);
  border-bottom: none;
}
.podium-slot.third .podium-bar{
  background: linear-gradient(180deg, rgba(205,127,50,.25), rgba(205,127,50,.08));
  border: 1px solid rgba(205,127,50,.30);
  border-bottom: none;
}
.podium-prize-items{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
  width: 100%;
}
.prize-item{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
}
.podium-slot.first .prize-item{
  background: rgba(216,180,90,.08);
  border-color: rgba(216,180,90,.25);
  color: var(--text);
}
.podium-slot.second .prize-item{
  background: rgba(160,160,168,.08);
  border-color: rgba(160,160,168,.20);
}
.podium-slot.third .prize-item{
  background: rgba(205,127,50,.08);
  border-color: rgba(205,127,50,.20);
}
.podium-note{
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  opacity: .7;
  margin-top: 8px;
}
.podium-note a{ color: var(--gold); text-decoration: underline; }
@media (max-width: 600px){
  .podium{ gap: 8px; }
  .podium-amount{ font-size: 24px; }
  .prize-item{ font-size: 11px; white-space: normal; }
}

.bigPrize{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .3px;
  margin-top: 10px;
}
.gloryFirst{
  border-color: rgba(255, 199, 74, .35) !important;
  box-shadow: 0 0 0 1px rgba(255, 199, 74, .18) inset;
}

.gloryHud .prizeSlot{
  text-align:center;
}
.gloryHud .prizeSlot .meterTitle{
  justify-content:center;
}
.gloryHud .bigPrize{
  margin-top: 12px;
  margin-left:auto;
  margin-right:auto;
}
.prizeDesc{
  margin-top: 8px;
  font-size: 12.5px;
  opacity: .82;
  line-height: 1.25;
}

.prizeNote{
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  opacity: .75;
}
.prizeNote a{
  text-decoration: underline;
}

.prizeNoteInline{
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  opacity: .72;
  line-height: 1.2;
}
.prizeNoteInline a{
  text-decoration: underline;
}

.prizeSlot{
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 14px 12px 16px;
}

.prizeGold{
  border-color: rgba(255, 199, 74, .9);
  box-shadow: 0 0 0 1px rgba(255,199,74,.35) inset, 0 0 24px rgba(255,199,74,.18);
}

.prizeSilver{
  border-color: rgba(210, 210, 210, .85);
  box-shadow: 0 0 0 1px rgba(210,210,210,.25) inset;
}

.prizeBronze{
  border-color: rgba(205, 127, 50, .9);
  box-shadow: 0 0 0 1px rgba(205,127,50,.28) inset;
}

.prizeSlot{ position: relative; }

.roundCard[data-round="sf"]{ padding-top:40px !important; }
.roundCard[data-round="fin"]{ padding-top:54px !important; }
.matchGrid{ gap:8px !important; }
.card{ margin-bottom:10px !important; }



.prizeEntryEcho{
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
}

.brandBridge{
  margin-top:8px;
  font-size:14px;
  opacity:.75;
  text-align:center;
}

.headerGlow{ position:relative; overflow:visible; }
.headerGlow::before{
  content:'';
  position:absolute;
  left:50%;
  top:-70px;
  transform: translateX(-50%);
  width: 680px;
  height: 260px;
  background: radial-gradient(ellipse at center, rgba(255,199,74,.12), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.headerGlow > *{ position:relative; z-index:1; }

.knockoutWrap{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.roundCol{
  flex: 0 0 auto !important;
}

.roundCol[data-round="r32"]{ width:260px; }
.roundCol[data-round="r16"]{ width:240px; }
.roundCol[data-round="qf"]{ width:220px; }
.roundCol[data-round="sf"]{ width:200px; }
.roundCol[data-round="fin"]{ width:220px; }
.roundCol[data-round="tb"]{ width:260px; }

.knockoutWrap, .roundCol{
  min-width: unset !important;
}

@media (max-width: 1100px){
  .knockoutWrap{
    overflow-x:auto;
    padding-bottom:12px;
  }
}

.navCountdown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(247,213,107,.10);
  border: 1px solid rgba(247,213,107,.25);
}
.navCountdownLabel {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .75;
  white-space: nowrap;
}
.navCountdownClock {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--gold);
  white-space: nowrap;
}
.navCountdownClock.urgent {
  animation: clockPulse 980ms ease-in-out infinite;
  color: #ff6b6b;
}
@media (max-width: 600px) {
  .navCountdownLabel { display: none; }
  .navCountdownClock { font-size: 12px; }
}

#stageBracket.card {
  padding: 20px 16px 24px !important;
  overflow: visible;
}
@media (max-width: 768px) {
  /* Bracket card must clip so it doesn't widen the whole page */
  #stageBracket.card {
    overflow: hidden !important;
    padding: 16px 0 16px 0 !important;
  }
  /* Bracket scrolls internally */
  #bracket.bracketCols {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px 12px !important;
  }
  /* Each section card stays within viewport */
  main.grid > section, main.grid > div {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* But let stageBracket's internal bracket scroll freely */
  #stageBracket {
    overflow: hidden !important;
  }
}
#stageBracket > h2 {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.22) !important;
  margin-bottom: 2px !important;
}
#stageBracket > .small {
  font-size: 10px !important;
  color: rgba(255,255,255,.18) !important;
  margin-bottom: 16px !important;
}

#bracket.bracketCols {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  grid-template-columns: unset !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 8px !important;
  margin-top: 0 !important;
  position: relative !important;
  min-height: 640px;
  width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(216,180,90,.18) transparent;
}
#bracket::-webkit-scrollbar { height: 3px; }
#bracket::-webkit-scrollbar-thumb { background: rgba(216,180,90,.2); border-radius: 2px; }

.roundCard {
  flex: 0 0 auto !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
}

.roundCard[data-round="r32"] { flex: 1.0 0 0% !important; min-width: 185px; }
.roundCard[data-round="r16"] { flex: 1.1 0 0% !important; min-width: 185px; }
.roundCard[data-round="qf"]  { flex: 1.25 0 0% !important; min-width: 190px; }
.roundCard[data-round="sf"]  { flex: 1.5 0 0% !important; min-width: 200px; }
.roundCard[data-round="fin"] { flex: 1.75 0 0% !important; min-width: 215px; }
.roundCard[data-round="tb"]  { display: none !important; }
.roundCard[data-round="hero"] {
  flex: 1.6 0 0% !important;
  min-width: 200px !important;
  border-left: 1px solid rgba(216,180,90,.08) !important;
}

.colTitle {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: 0 14px !important;
  margin: 0 0 8px 0 !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
.roundCard[data-round="r32"] .colTitle { color: rgba(42,57,141,.75) !important; }
.roundCard[data-round="r16"] .colTitle { color: rgba(60,172,59,.75) !important; }
.roundCard[data-round="qf"]  .colTitle { color: rgba(230,29,37,.75) !important; }
.roundCard[data-round="sf"]  .colTitle { color: rgba(216,180,90,.8) !important; }
.roundCard[data-round="fin"] .colTitle {
  color: rgba(216,180,90,1) !important;
  letter-spacing: .26em !important;
  font-size: 9.5px !important;
}
.matchGrid {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 0 10px !important;
}
.roundCard[data-round="r32"] .matchGrid { gap: 5px !important; justify-content: flex-start !important; }
.roundCard[data-round="r16"] .matchGrid { justify-content: space-around !important; gap: 0 !important; }
.roundCard[data-round="qf"]  .matchGrid { justify-content: space-around !important; gap: 0 !important; }
.roundCard[data-round="sf"]  .matchGrid { justify-content: space-around !important; gap: 0 !important; }
.roundCard[data-round="fin"] .matchGrid {
  justify-content: center !important;
  gap: 20px !important;
  padding: 0 16px !important;
}

.matchGrid > .card {
  background: rgba(255,255,255,.032) !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  border-radius: 10px !important;
  padding: 8px 9px 7px !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
  transition: border-color 160ms ease !important;
}
.matchGrid > .card:hover { border-color: rgba(255,255,255,.12) !important; }

.matchGrid > .card > .small {
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.16) !important;
  margin-bottom: 6px !important;
}

.roundCard[data-round="qf"] .matchGrid > .card {
  padding: 10px 11px 9px !important;
  border-color: rgba(230,29,37,.10) !important;
}
.roundCard[data-round="sf"] .matchGrid > .card {
  padding: 12px 13px 11px !important;
  border-color: rgba(216,180,90,.12) !important;
}
.roundCard[data-round="fin"] .matchGrid > .card {
  padding: 16px 16px 14px !important;
  border-color: rgba(216,180,90,.22) !important;
  background: rgba(216,180,90,.05) !important;
  border-radius: 13px !important;
}

.roundCard[data-round="fin"] .matchGrid > .card:last-child {
  padding: 10px 12px 9px !important;
  border-color: rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: 10px !important;
  opacity: 0.72;
  transform: scale(0.95);
  transform-origin: top center;
}
.roundCard[data-round="fin"] .matchGrid > .card:last-child .pickBtn {
  font-size: 12px !important;
  min-height: 30px !important;
  padding: 6px 8px !important;
}
.roundCard[data-round="fin"] .matchGrid > .card:last-child > .small {
  font-size: 7px !important;
  color: rgba(255,255,255,.12) !important;
}

.pickBtn {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
  padding: 5px 7px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  min-height: 28px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(255,255,255,.42) !important;
  transition: all 120ms ease !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.pickBtn:last-child { margin-bottom: 0 !important; }
.pickBtn:not(:disabled):hover {
  background: rgba(255,255,255,.055) !important;
  color: rgba(255,255,255,.82) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.pickBtn.winner {
  background: rgba(216,180,90,.09) !important;
  border-color: rgba(216,180,90,.28) !important;
  color: rgba(255,255,255,.90) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  animation: wc26pop 380ms cubic-bezier(.16,.92,.2,1) both !important;
}
@keyframes wc26pop {
  0%   { transform: scale(.95); opacity:.6; }
  65%  { transform: scale(1.02); }
  100% { transform: scale(1); opacity:1; }
}
.pickBtn:disabled { opacity: .22 !important; cursor: default !important; }

.roundCard[data-round="qf"] .pickBtn { font-size: 12px !important; min-height: 30px !important; }
.roundCard[data-round="sf"]  .pickBtn { font-size: 13px !important; min-height: 33px !important; padding: 7px 9px !important; }
.roundCard[data-round="fin"] .pickBtn { font-size: 15px !important; min-height: 40px !important; padding: 9px 11px !important; font-weight: 500 !important; }
.roundCard[data-round="fin"] .pickBtn.winner { font-size: 15px !important; font-weight: 700 !important; color: var(--gold) !important; }

.finalHero {
  background: rgba(216,180,90,.07) !important;
  border-color: rgba(216,180,90,.30) !important;
  box-shadow: 0 0 80px rgba(216,180,90,.08), inset 0 1px 0 rgba(216,180,90,.15) !important;
}
.finalHero::before { display: none !important; }

#bracketConnectors {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.roundCard[data-round="qf"],
.roundCard[data-round="sf"],
.roundCard[data-round="fin"] { padding-top: 0 !important; }
.roundCard.bigRound { padding: 0 !important; }

@media (max-width: 860px) {
  .roundCard[data-round="r32"] { min-width: 140px; }
  .roundCard[data-round="r16"] { min-width: 138px; }
  .roundCard[data-round="qf"]  { min-width: 140px; }
  .roundCard[data-round="sf"]  { min-width: 148px; }
  .roundCard[data-round="fin"] { min-width: 160px; }
}

[data-round="hero"] { border: none !important; background: transparent !important; }

#bracketHeroPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  gap: 0;
  position: relative;
  overflow: hidden;
}

#bracketHeroPanel::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(216,180,90,.09) 0%, transparent 70%);
  pointer-events: none;
}

.heroTrophy {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 24px rgba(216,180,90,.4));
  animation: heroFloat 3s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.heroChampLabel {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(216,180,90,.55);
  margin-bottom: 10px;
}

.heroChampName {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: -.02em;
  text-align: center;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  transition: all 300ms ease;
}
.heroChampName .heroFlag { font-size: 28px; }
.heroChampName.empty {
  color: rgba(255,255,255,.14);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
}

.heroDivider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,180,90,.4), transparent);
  margin: 16px 0;
}

.heroStats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 200px;
}
.heroStat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,.032);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  font-size: 11px;
}
.heroStat .label { color: rgba(255,255,255,.3); font-weight: 500; }
.heroStat .value { color: rgba(255,255,255,.75); font-weight: 700; font-variant-numeric: tabular-nums; }
.heroStat .value.gold { color: var(--gold); }

.heroCountdown {
  margin-top: 20px;
  text-align: center;
}
.heroCountdown .cdLabel {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
  margin-bottom: 6px;
}
.heroCountdown .cdTime {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(216,180,90,.7);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace;
}

.finalBanner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 6px;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, rgba(216,180,90,.15), rgba(216,180,90,.06));
  border: 1px solid rgba(216,180,90,.35);
  border-radius: 20px;
  width: fit-content;
  box-shadow: 0 2px 12px rgba(216,180,90,.12);
}
.finalBannerLogo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 3px;
}
.finalBannerText {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--gold);
}

.thirdBanner {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px 4px;
  margin: 0 0 6px 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  width: fit-content;
}
.thirdBannerText {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

.matchIdLabel { display: none !important; }

.finalHero.champCard {
  animation: champGlow 2.4s ease-in-out infinite !important;
}
@keyframes champGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(216,180,90,.12), inset 0 1px 0 rgba(216,180,90,.15) !important; }
  50%       { box-shadow: 0 0 60px rgba(216,180,90,.35), 0 0 120px rgba(216,180,90,.12), inset 0 1px 0 rgba(216,180,90,.25) !important; }
}

@keyframes lineReveal {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

[data-round="hero"] {
  border-left: 1px solid rgba(216,180,90,.12) !important;
}
#bracketHeroPanel {
  background: linear-gradient(180deg, rgba(216,180,90,.03) 0%, transparent 60%);
}

:root {
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

body, .card, .btn, .pickBtn, input, select,
.colTitle, h1, h2, h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
}

.colTitle {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
}

.pickBtn {
  font-size: 12px !important;
  font-weight: 500 !important;
}

.matchIdLabel { display: none !important; }

.finalBannerText {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
}

#countdown {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .04em !important;
}

#bracketHeroPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.heroEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.heroEmptyIcon {
  font-size: 36px;
  opacity: .15;
  line-height: 1;
  margin-bottom: 4px;
}
.heroEmptyTitle {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255,255,255,.18);
}
.heroEmptyHint {
  font-size: 11px;
  color: rgba(255,255,255,.2);
  letter-spacing: .04em;
  max-width: 180px;
  line-height: 1.5;
}

.heroChampReveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  animation: champReveal 500ms cubic-bezier(.16,.92,.2,1) both;
}
@keyframes champReveal {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.heroChampFlag {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 20px rgba(216,180,90,.3));
  animation: flagFloat 3s ease-in-out infinite;
}
@keyframes flagFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

.heroChampNameDisplay {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 40px rgba(216,180,90,.4);
}

.heroChampSub {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .28em;
  color: rgba(216,180,90,.7);
  margin-top: 2px;
}

.heroGoldLine {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 14px 0 12px;
}

.heroCountdownWrap { text-align: center; }
.heroCountdownLabel {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(255,255,255,.22);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.heroCountdownTime {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(216,180,90,.8);
  font-variant-numeric: tabular-nums;
}

.heroProgressWrap {
  margin-top: 16px;
  width: 100%;
  max-width: 200px;
}
.heroProgressBar {
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.heroProgressFill {
  height: 100%;
  background: linear-gradient(90deg, rgba(216,180,90,.5), rgba(216,180,90,.9));
  border-radius: 2px;
  transition: width 600ms cubic-bezier(.4,0,.2,1);
}
.heroProgressLabel {
  font-size: 10px;
  color: rgba(255,255,255,.22);
  letter-spacing: .06em;
  text-align: center;
}

.heroGoldTakeover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: linear-gradient(160deg, #D8B45A 0%, #C9922A 50%, #D8B45A 100%);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  animation: goldReveal 400ms cubic-bezier(.16,.92,.2,1) both;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 80px rgba(216,180,90,.4);
}
@keyframes goldReveal {
  from { opacity:0; transform: scale(.96); }
  to   { opacity:1; transform: scale(1); }
}

.heroGoldLabel {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
  margin-bottom: 12px;
}

.heroGoldFlag {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.2));
  animation: flagFloat 3s ease-in-out infinite;
}

.heroGoldName {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #000;
  line-height: 1;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.heroGoldCTA {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  font-family: 'Inter', system-ui, sans-serif;
}
.heroGoldCTA:hover {
  background: #1a1a1a;
  transform: scale(1.04);
  box-shadow: 0 6px 28px rgba(0,0,0,.4);
}

@keyframes champCardIn {
  0%   { opacity:0; transform:scale(.96) translateY(12px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes champNameReveal {
  0%   { opacity:0; filter:blur(20px); }
  100% { opacity:1; filter:blur(0px); }
}
@media (prefers-reduced-motion: reduce) {
  #champCard   { animation: none !important; opacity:1 !important; transform:none !important; }
  #champModalName { animation: none !important; filter:none !important; opacity:1 !important; }
}


/* ══ MOBILE FIX: Group stage & Best3 overflow ══
   Root cause: team buttons inside group cards overflow on narrow screens
   because the button is a flex container but its parent doesn't constrain it
*/

/* Global: stop any element from causing horizontal scroll */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

@media (max-width: 768px) {

  /* The main content wrapper - no side padding, let sections handle their own */
  #scaleWrap {
    overflow-x: hidden !important;
  }

  /* Group stage outer card — opaque bg to block any gold bleed from hero */
  section#stageGroups {
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #0d0f17 !important;
    isolation: isolate;
  }

  /* Groups grid - single column */
  #stageGroups .groupsStage {
    grid-template-columns: 1fr !important;
  }

  /* Inner group cards - CRITICAL: must be block-level and constrained */
  #stageGroups .groupsStage > .card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* The .teams container inside each group card */
  #stageGroups .teams {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Team buttons - MUST be flex with min-width:0 on children */
  #stageGroups .teamBtn {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
  }

  /* Team name inside button - flex child must have min-width:0 to shrink */
  #stageGroups .teamBtn .teamName {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
  }

  /* The inner text span - target by class now */
  .teamLabel {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
  }

  /* Flag span must not shrink */
  .flag {
    flex-shrink: 0 !important;
  }

  /* The tag (1st/2nd/Tap) must not grow */
  #stageGroups .teamBtn .tag {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
  }

  /* Slots - 1 column stacked */
  #stageGroups .slots {
    grid-template-columns: 1fr !important;
    padding: 10px 12px !important;
  }

  /* ── Best3 section ── */
  section#stageBest3 {
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .best3Layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .best3PoolGrid {
    grid-template-columns: 1fr !important;
  }

  /* Best3 pool items */
  .best3PoolGrid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Rank slots */
  .rankSlot {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .rankSlot .slotTeam {
    min-width: 0 !important;
    flex: 1 1 0% !important;
  }

  .rankSlot .slotTeam .name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
  }
}


/* ══ MOBILE BRACKET TABS (FIFA-style) ══ */
@media (max-width: 768px) {

  #bracket.bracketCols { display: none !important; }
  #mobileBracket { display: block !important; }

  .mbTabs {
    display: flex;
    background: rgba(0,0,0,0.25);
    border-radius: 14px;
    padding: 5px;
    margin-bottom: 16px;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mbTabs::-webkit-scrollbar { display: none; }

  .mbTab {
    all: unset;
    flex: 1;
    min-width: 44px;
    text-align: center;
    padding: 9px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    color: rgba(255,255,255,0.38);
    border-radius: 9px;
    cursor: pointer;
    transition: all 180ms ease;
    white-space: nowrap;
  }
  .mbTab[data-round="r32"].active { background: rgba(42,57,141,0.22);  color: rgb(100,130,255);  box-shadow: inset 0 0 0 1.5px rgba(42,57,141,0.7); }
  .mbTab[data-round="r16"].active { background: rgba(60,172,59,0.18);  color: rgb(60,210,80);   box-shadow: inset 0 0 0 1.5px rgba(60,172,59,0.7); }
  .mbTab[data-round="qf"].active  { background: rgba(230,29,37,0.18);  color: rgb(255,80,80);   box-shadow: inset 0 0 0 1.5px rgba(230,29,37,0.7); }
  .mbTab[data-round="sf"].active  { background: rgba(138,80,220,0.18); color: rgb(178,120,255); box-shadow: inset 0 0 0 1.5px rgba(138,80,220,0.7); }
  .mbTab[data-round="fin"].active { background: rgba(216,180,90,0.22); color: rgb(216,180,90);  box-shadow: inset 0 0 0 1.5px rgba(216,180,90,0.8); }

  .mbTab .mbDot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    margin-left: 3px; vertical-align: middle; background: currentColor;
    opacity: 0; transition: opacity 200ms;
  }
  .mbTab.done .mbDot { opacity: 0.9; }

  .mbRound { display: none; }
  .mbRound.active { display: block; }

  .mbRoundHeader {
    font-size: 10px; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; padding: 0 2px 12px; opacity: 0.6;
  }

  .mbMatch {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; margin-bottom: 10px; overflow: hidden;
  }
  .mbMatch.complete { border-left-width: 3px !important; }

  .mbMatchId {
    font-size: 9px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,0.22);
    padding: 9px 14px 5px;
  }

  .mbPickBtn {
    all: unset; display: flex; align-items: center;
    width: 100%; box-sizing: border-box; padding: 13px 14px;
    font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.75);
    cursor: pointer; transition: background 120ms ease;
    border-top: 1px solid rgba(255,255,255,0.05);
    gap: 10px; min-height: 52px;
  }
  .mbPickBtn:first-of-type { border-top: none; }
  .mbPickBtn:active { background: rgba(255,255,255,0.06); }
  .mbPickBtn.winner { color: #fff; font-weight: 800; }
  .mbPickBtn.winner .mbCheck { opacity: 1 !important; }
  .mbPickBtn.disabled { opacity: 0.32; cursor: default; }

  .mbFlag { font-size: 1.35em; flex-shrink: 0; width: 1.7em; text-align: center; }
  .mbName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbCheck { margin-left: auto; flex-shrink: 0; font-size: 15px; opacity: 0; transition: opacity 160ms; }

  /* 3rd place match - smaller, muted */
  .mbThirdMatch .mbPickBtn { min-height: 44px; padding: 10px 14px; font-size: 13px; }
  .mbThirdMatch .mbFlag { font-size: 1.15em; }
  .mbThirdMatch .mbMatchId { font-size: 8px; }

  .mbProgress {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 2px 14px; font-size: 11px;
    color: rgba(255,255,255,0.35); font-weight: 600;
  }
  .mbProgressBar {
    flex: 1; height: 3px; background: rgba(255,255,255,0.08);
    border-radius: 99px; overflow: hidden;
  }
  .mbProgressFill {
    height: 100%; border-radius: 99px;
    transition: width 300ms ease;
  }
}

@media (min-width: 769px) {
  #mobileBracket { display: none !important; }
}


#navCountdown { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:1px; }
@media (max-width: 640px) {
  /* Show the clock on mobile — just make it smaller */
  #navCountdown { display:flex !important; }
  #navCountdown span:first-child { display:none !important; } /* hide "Kickoff in" label */
  #wcClock { font-size:13px !important; letter-spacing:.02em !important; }
  /* Hide logo text, keep just the shield icon — saves ~120px */
  .hdrLogoName { display:none !important; }
  .hdrLogoDivider { display:none !important; }
  /* Slightly smaller shield */
  [data-logo="wc26"] { height:28px !important; }
}


/* ── HEADER MENU ── */
.hdrMenu { position:relative; }

/* Pill-style menu button matching the site's gold/dark aesthetic */
.hdrMenuBtn {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 10px;
  height: 36px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(216,180,90,0.10);
  border: 0.5px solid rgba(216,180,90,0.30);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.hdrMenuBtn:hover {
  background: rgba(216,180,90,0.18);
  border-color: rgba(216,180,90,0.55);
}
/* Three-line icon inside the pill */
.hdrMenuIcon {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  flex-shrink: 0;
}
.hdrMenuIcon span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: #D8B45A;
  transition: width 160ms ease;
}
.hdrMenuIcon span:nth-child(1) { width: 14px; }
.hdrMenuIcon span:nth-child(2) { width: 10px; }
.hdrMenuIcon span:nth-child(3) { width: 14px; }
.hdrMenuBtn:hover .hdrMenuIcon span { width: 14px; }

/* Dropdown panel */
.hdrDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(10,12,18,0.98);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.70), 0 0 0 0.5px rgba(216,180,90,0.08);
  backdrop-filter: blur(24px);
  z-index: 200;
}
.hdrDropdown.open { display: block; animation: dropIn 160ms cubic-bezier(.22,.68,0,1.2); }
@keyframes dropIn {
  from { opacity:0; transform:translateY(-8px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)   scale(1);    }
}

/* Dropdown items */
.hdrDropItem {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  border-radius: 10px;
  transition: background 120ms ease, color 120ms ease;
}
.hdrDropItem:hover { background: rgba(255,255,255,0.06); color: #fff; }
.hdrDropItem.gold {
  color: #D8B45A;
  font-weight: 700;
  letter-spacing: .02em;
}
.hdrDropItem.gold:hover { background: rgba(216,180,90,0.10); color: #e8c96a; }
.hdrDropSep {
  height: 0.5px;
  background: rgba(255,255,255,0.07);
  margin: 6px 8px;
}

/* On mobile, just show the icon part (hide label text) */
@media (max-width: 640px) {
  .hdrMenuLabel { display: none; }
  .hdrMenuBtn { padding: 0 10px; gap: 0; background: rgba(216,180,90,0.08); }
}


    @media(max-width:1024px){
      .heroGoldOrb { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
    }
    @media(max-width:680px){
      #gloryCard > div:last-of-type { grid-template-columns: 1fr !important; }
      #gloryCard > div:last-of-type > div:nth-child(2) { display:none; }
    }
  

#wc26Onboard {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0); pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transition: background 400ms ease;
}
#wc26Onboard.visible {
  background: rgba(0,0,0,0.78); pointer-events: all;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#wc26OnboardCard {
  width: min(480px, calc(100vw - 32px));
  background: rgba(13,15,24,0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 48px 120px rgba(0,0,0,0.90);
  opacity: 0; transform: translateY(24px) scale(0.97);
  transition: opacity 380ms cubic-bezier(.16,.92,.2,1), transform 380ms cubic-bezier(.16,.92,.2,1);
  position: relative;
}
#wc26Onboard.visible #wc26OnboardCard {
  opacity: 1; transform: translateY(0) scale(1);
}

/* Top stripe */
#wc26OnboardCard::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,#2A398D 0%,#3CAC3B 33%,#E61D25 66%,#D8B45A 100%);
}

.ob-step { display: none; padding: 36px 32px 28px; }
.ob-step.ob-active { display: block; }

/* Icon */
.ob-icon {
  width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 20px;
  background: rgba(216,180,90,0.08);
  border: 1px solid rgba(216,180,90,0.18);
}

/* Step counter */
.ob-kicker {
  font-size: 9px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(216,180,90,0.60);
  margin-bottom: 8px;
}
.ob-title {
  font-size: 26px; font-weight: 1000; letter-spacing: -.03em;
  color: #fff; line-height: 1.1; margin-bottom: 10px;
}
.ob-body {
  font-size: 14px; color: rgba(255,255,255,0.52);
  line-height: 1.65; margin-bottom: 28px;
}
.ob-body b { color: rgba(255,255,255,0.85); font-weight: 700; }

/* Progress dots */
.ob-dots {
  display: flex; gap: 6px; margin-bottom: 24px;
}
.ob-dot {
  height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.12);
  transition: width 300ms ease, background 300ms ease;
  width: 18px;
}
.ob-dot.ob-dot-active {
  background: #D8B45A; width: 28px;
}
.ob-dot.ob-dot-done {
  background: rgba(216,180,90,0.35); width: 18px;
}

/* Footer */
.ob-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ob-skip {
  font-size: 12px; color: rgba(255,255,255,0.28); background: none;
  border: none; cursor: pointer; font-weight: 600; padding: 0;
  transition: color 150ms;
}
.ob-skip:hover { color: rgba(255,255,255,0.55); }
.ob-next {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; background: #D8B45A;
  border: none; border-radius: 999px;
  font-size: 13px; font-weight: 800; color: #000;
  cursor: pointer; letter-spacing: .02em;
  transition: transform 140ms ease, opacity 140ms ease;
}
.ob-next:hover { transform: scale(1.04); opacity: .92; }

/* Final step CTA */
.ob-next.ob-cta-final {
  background: linear-gradient(135deg,#D8B45A,#C9922A);
  padding: 13px 28px; font-size: 14px;
}

/* ── Footer ── */
.footer {
  max-width: 1400px;
  margin: 48px auto 0;
  padding: 60px 24px 40px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
}
.social-icons { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; }
.social-icon {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 50%;
  color: rgba(255,255,255,.38); transition: all 300ms ease; text-decoration: none;
}
.social-icon:hover { background: rgba(216,180,90,.10); border-color: rgba(216,180,90,.30); color: var(--gold); transform: translateY(-3px); }
.social-icon svg { width: 20px; height: 20px; }
.footer-brand { font-size: 20px; font-weight: 900; letter-spacing: 0.1em; color: var(--gold); margin: 0 0 8px; }
.footer-disclaimer { font-size: 12px; color: rgba(255,255,255,.38); margin: 0 0 20px; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-bottom: 16px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,.38); text-decoration: none; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.3); margin: 0; }