/* =========================================================================
   POLLA MUNDIALISTA 2026 — "Floodlit Matchday"
   Editorial sports, dark pitch + electric lime, scoreboard motifs.
   ========================================================================= */

:root {
  /* Surfaces */
  --ink:        #070b09;   /* deepest bg */
  --pitch:      #0b1310;   /* base bg */
  --surface:    #111b16;   /* cards */
  --surface-2:  #16241d;   /* raised */
  --line:       #21342a;   /* borders */
  --line-soft:  #1a2a22;

  /* Text */
  --fg:         #eef3ec;
  --fg-dim:     #9aa89f;
  --fg-faint:   #5f6f66;

  /* Accents */
  --lime:       #c6ff3a;   /* primary — energy/ball */
  --lime-deep:  #9fe000;
  --coral:      #ff5a45;   /* secondary */
  --gold:       #ffcf5c;
  --cyan:       #4fd6c9;

  /* Functional */
  --win:        #c6ff3a;
  --shadow:     0 18px 50px -20px rgba(0,0,0,.8);
  --shadow-sm:  0 6px 20px -12px rgba(0,0,0,.7);

  --radius:     14px;
  --radius-sm:  9px;
  --maxw:       1080px;

  --font-display: "Anton", "Plus Jakarta Sans", sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  /* "mono" ya no es monoespaciada: fuente amigable con cifras tabulares para alinear números */
  --font-mono:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overscroll-behavior: none; }

body {
  font-family: var(--font-body);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
  overscroll-behavior: none;
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(198,255,58,.10), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(79,214,201,.06), transparent 55%),
    var(--pitch);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* subtle pitch lines */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

/* film grain */
.grain {
  position: fixed; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .035;
  pointer-events: none;
  z-index: 1;
}

.app { position: relative; z-index: 2; }

/* ---------- Typography ---------- */
h1,h2,h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; line-height: .95; text-transform: uppercase; }
.mono { font-family: var(--font-mono); }
a { color: var(--lime); }

/* ============================ WELCOME ============================ */
.welcome {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(6px, 1.6vh, 18px) 20px;
  position: relative;
}
.welcome__inner {
  width: min(560px, 100%);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 1.15vh, 14px);
}
.welcome #loginForm { width: min(380px, 100%); display: flex; flex-direction: column; gap: 11px; }
.welcome #loginForm .btn { padding: 13px 28px; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--lime);
  border: 1px solid var(--line);
  background: rgba(198,255,58,.05);
  padding: 7px 14px; border-radius: 100px;
  margin-bottom: 0;
}
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.welcome h1 {
  font-size: min(11.5vw, 10.5vh, 96px);
  line-height: 1.0;
  letter-spacing: -.01em;
  margin: 0;
}
.welcome h1 .lime { color: var(--lime); display:block; -webkit-text-stroke: 0; }
.welcome h1 .out {
  color: transparent;
  -webkit-text-stroke: 2px var(--fg);
  display: block;
}
.welcome__sub {
  color: var(--fg-dim);
  max-width: 440px; margin: 0 auto;
  font-size: clamp(13.5px, 1.7vh, 15.5px); line-height: 1.45;
}
.welcome__sub b { color: var(--fg); font-weight: 700; }

.field {
  display: flex; gap: 7px; flex-direction: column;
  text-align: left; margin: 0; max-width: 380px; width: 100%;
}
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint); }
.input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  padding: 13px 16px; border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
.input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(198,255,58,.13); }
.input::placeholder { color: var(--fg-faint); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--lime);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 800; font-size: 15px;
  letter-spacing: .02em; text-transform: uppercase;
  background: var(--bg); color: #0a0f08;
  border: none; border-radius: 100px;
  padding: 15px 28px; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s, filter .2s;
  box-shadow: 0 8px 22px -10px rgba(198,255,58,.6);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); box-shadow: none; }
.btn--ghost:hover { border-color: var(--fg-dim); background: var(--surface); }
.btn--coral { --bg: var(--coral); color: #1a0703; box-shadow: 0 8px 22px -10px rgba(255,90,69,.6); }
.btn--full { width: 100%; }

/* ============================ APP SHELL ============================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(8,12,10,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.brand .ball { font-size: 20px; filter: drop-shadow(0 0 8px rgba(198,255,58,.5)); }
.brand .yr { color: var(--lime); }
.topbar__user { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--lime); color: #0a0f08;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  font-family: var(--font-body);
}
.topbar__name { font-weight: 700; font-size: 14px; }
.topbar__logout { background: none; border: none; color: var(--fg-faint); cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; flex: none; padding: 4px; }
.topbar__logout:hover { color: var(--coral); }
.topbar__logout .ic { display: none; font-size: 17px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) calc(124px + env(safe-area-inset-bottom)); }

/* ---------- Stepper ---------- */
.stepper {
  display: flex; gap: 6px; align-items: stretch;
  margin: 28px 0 8px; overflow-x: auto; padding-bottom: 6px;
}
.step {
  flex: 1 1 0; min-width: 96px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  cursor: pointer; transition: border-color .2s, background .2s, transform .15s;
  text-align: left;
}
.step:hover { transform: translateY(-2px); }
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step__num { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
.step__check { width: 16px; height: 16px; }
.step__label { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; line-height: 1; }
.step__bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.step__bar i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .4s ease; }
.step.is-active { border-color: var(--lime); background: var(--surface-2); }
.step.is-active .step__label { color: var(--lime); }
.step.is-done .step__check { color: var(--lime); }
.step.is-locked { opacity: .5; cursor: not-allowed; }
.step.is-locked:hover { transform: none; }

/* ---------- Section header ---------- */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 34px 0 18px; flex-wrap: wrap; }
.shead h2 { font-size: clamp(30px, 6vw, 52px); }
.shead h2 .accent { color: var(--lime); }
.shead__meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); text-align: right; }
.shead__meta b { color: var(--fg); }

.lead { color: var(--fg-dim); max-width: 640px; margin-bottom: 8px; font-size: 15px; }

/* ============================ GROUPS ============================ */
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }

.gcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gcard__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.gbadge {
  font-family: var(--font-display); font-size: 26px; line-height: 1;
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--lime); color: #0a0f08;
  display: grid; place-items: center;
}
.gcard__head h3 { font-size: 17px; }
.gcard__head .sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); margin-top: 3px; }

.matches { padding: 6px 12px 12px; display: flex; flex-direction: column; }
.match {
  display: grid;
  grid-template-columns: 1fr 46px 12px 46px 1fr;
  align-items: center; gap: 8px;
  padding: 11px 4px;
  border-bottom: 1px dashed var(--line-soft);
}
.match:last-child { border-bottom: none; }
.team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.team.home { justify-content: flex-end; text-align: right; }
.team.away { justify-content: flex-start; }
.flag {
  width: 26px; height: 18px; border-radius: 3px; flex: none;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  background: var(--line);
}
.team__name { font-weight: 700; font-size: 13.5px; }
.match .team__name { white-space: normal; line-height: 1.14; }

.match .dash { color: var(--fg-faint); font-family: var(--font-mono); text-align: center; }
.match .sc {
  width: 100%; height: 44px; text-align: center; padding: 0;
  background: var(--ink); border: 1px solid var(--line);
  color: var(--fg); font-family: var(--font-mono); font-size: 19px; font-weight: 500;
  border-radius: 9px;
  -moz-appearance: textfield;
}
.match .sc::-webkit-outer-spin-button,
.match .sc::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.match .sc:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(198,255,58,.13); background: #0d140f; }
.match .sc.filled { border-color: var(--lime-deep); color: var(--lime); }

/* standings preview inside group card */
.standings {
  border-top: 1px solid var(--line);
  padding: 10px 16px 14px;
  background: var(--ink);
}
.standings__title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 8px; }
.srow {
  display: grid; grid-template-columns: 18px 26px 1fr repeat(4, 26px);
  align-items: center; gap: 6px;
  font-size: 12.5px; padding: 4px 0;
}
.srow .pos { font-family: var(--font-mono); color: var(--fg-faint); font-size: 11px; }
.srow .nm { font-weight: 600; white-space: normal; line-height: 1.1; }
.srow .st { font-family: var(--font-mono); text-align: center; color: var(--fg-dim); font-size: 11px; }
.srow .pts { font-family: var(--font-mono); text-align: center; font-weight: 600; color: var(--fg); }
.srow.q1 { color: var(--lime); }
.srow.q1 .pos::after { content: "▲"; }
.srow.q2 { color: var(--cyan); }
.srow.q3 { color: var(--gold); }
.srow.head { color: var(--fg-faint); font-family: var(--font-mono); font-size: 10px; padding-bottom: 2px; }

/* ============================ KNOCKOUT ============================ */
.ko-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.tie {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  position: relative;
}
.tie__id { position: absolute; top: 10px; left: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--fg-faint); text-transform: uppercase; }
.tie__pick {
  display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 26px;
}
.pickbtn {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--ink);
  cursor: pointer; transition: border-color .15s, background .15s, transform .12s;
  text-align: left; width: 100%; color: var(--fg);
  font-family: var(--font-body);
}
.pickbtn:hover:not(:disabled) { transform: translateX(3px); border-color: var(--fg-dim); }
.pickbtn .team__name { font-size: 15px; white-space: normal; line-height: 1.15; }
.pickbtn.sel { border-color: var(--lime); background: rgba(198,255,58,.08); }
.pickbtn.sel .team__name { color: var(--lime); }
.pickbtn .adv { display: none; margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.pickbtn.sel .adv { display: inline-flex; }
.pickbtn.tbd { color: var(--fg-faint); cursor: not-allowed; }
.pickbtn.tbd .flag { opacity: .3; }
.vs-mini { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); padding: 1px 0; }

/* champion / finals */
.podium { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 560px; }
.champ-card {
  border: 1px solid var(--gold); border-radius: var(--radius);
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,207,92,.12), var(--surface));
  padding: 22px; text-align: center;
}
.champ-card .trophy { font-size: 40px; }
.champ-card h3 { color: var(--gold); font-size: 22px; margin-top: 6px; }

/* ---------- footer nav ---------- */
.stage-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px clamp(16px, 4vw, 40px);
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--ink) 38%);
}
.stage-nav__inner { max-width: var(--maxw); margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stage-nav__btns { display: flex; gap: 10px; }
.progress-pill {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim);
  background: var(--surface); border: 1px solid var(--line);
  padding: 9px 15px; border-radius: 100px;
}
.progress-pill b { color: var(--lime); }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface-2); border: 1px solid var(--lime);
  color: var(--fg); padding: 12px 20px; border-radius: 100px;
  font-weight: 600; font-size: 14px; z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- summary ---------- */
.summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.sumcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.sumcard .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.sumcard .v { font-family: var(--font-display); font-size: 34px; margin-top: 6px; }
.sumcard .v.ok { color: var(--lime); }
.sumcard .v.warn { color: var(--coral); }

.lock-banner {
  border: 1px dashed var(--lime); border-radius: var(--radius);
  background: rgba(198,255,58,.05); padding: 20px; margin-top: 24px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.lock-banner .txt { flex: 1; min-width: 220px; }
.lock-banner h3 { font-size: 22px; }
.lock-banner p { color: var(--fg-dim); font-size: 14px; margin-top: 4px; }

/* staggered entrance */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s both; }

/* ====================================================================
   v2 — imágenes banana + pulido glass / iOS-bonito
   ==================================================================== */

/* textura sutil global detrás de todo */
body::after {
  content: "";
  position: fixed; inset: 0;
  background: url("img/texture.png") center/cover no-repeat;
  opacity: .14; mix-blend-mode: screen;
  pointer-events: none; z-index: 0;
}

/* ---------- welcome con hero ---------- */
.welcome__bg {
  position: absolute; inset: 0;
  background: url("img/hero.png") center 30%/cover no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}
.welcome::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 480px at 50% 8%, rgba(198,255,58,.10), transparent 60%);
  z-index: 0;
}
.welcome__inner { position: relative; z-index: 2; }
.welcome__logo {
  width: clamp(58px, 8.5vh, 84px); height: auto; aspect-ratio: 1; border-radius: 22px;
  margin: 0; display: block;
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.welcome__stats {
  display: flex; gap: 10px; justify-content: center; margin: 0;
}
.welcome__stats > div {
  flex: 1; max-width: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(17,27,22,.55); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 8px;
}
.welcome__stats b { font-family: var(--font-display); font-size: 26px; color: var(--lime); line-height: 1; letter-spacing: .06em; }
.welcome__stats span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; }

/* ---------- brand logo + rules btn ---------- */
.brand__logo { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.topbar__rules {
  background: rgba(198,255,58,.08); border: 1px solid var(--line);
  color: var(--lime); cursor: pointer; font-family: var(--font-body);
  font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  padding: 8px 14px; border-radius: 100px; transition: background .2s, transform .12s;
}
.topbar__rules:hover { background: rgba(198,255,58,.16); transform: translateY(-1px); }
.topbar__rules .ic { font-size: 14px; }
.topbar__rules .lbl { margin-left: 5px; }
@media (max-width: 680px) {
  .topbar__rules .lbl { display: none; }
  .topbar__rules { padding: 8px 9px; }
  .topbar { padding: 12px 12px; gap: 8px; }
  .topbar__user { gap: 6px; }
  .topbar__logout .lbl { display: none; }
  .topbar__logout .ic { display: inline; }
  .brand { font-size: 19px; }
  .brand__logo { width: 26px; height: 26px; }
  .avatar { width: 32px; height: 32px; font-size: 13px; }
}

/* ---------- glassmorphism en cards ---------- */
.gcard, .tie {
  background: linear-gradient(180deg, rgba(22,36,29,.72), rgba(17,27,22,.62));
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-color: rgba(255,255,255,.07);
}
.gcard { transition: transform .2s ease, box-shadow .2s; }
.gcard:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -28px rgba(0,0,0,.9); }
.gcard__head { background: linear-gradient(180deg, rgba(198,255,58,.06), transparent); }
.flag { width: 30px; height: 21px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1); }
.team__name { font-size: 14px; }

/* ---------- points hints ---------- */
.pts-hint {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-dim); background: rgba(198,255,58,.08);
  border: 1px solid var(--line); border-radius: 100px; padding: 3px 10px; margin: 0 4px;
}
.pts-hint b { color: var(--lime); font-weight: 500; }
.pts-hint.alt b { color: var(--cyan); }

/* ---------- champion trophy ---------- */
.champ-card__trophy { width: 130px; height: auto; margin: -6px auto 4px; display: block; filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); animation: floaty 4.5s ease-in-out infinite; }
.champ-card h3 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.champ-card h3 .flag { width: 34px; height: 24px; }
.champ-card__pts { font-family: var(--font-mono); font-size: 12px; color: var(--gold); margin-top: 8px; }

/* ---------- modal reglas ---------- */
html.no-scroll, html.no-scroll body { overflow: hidden; }

.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4,7,6,.6); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s;
  overscroll-behavior: contain;
}
.modal.show { opacity: 1; }
.modal__sheet {
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(22,36,29,.96), rgba(11,19,16,.98));
  border: 1px solid var(--line); border-radius: 22px;
  padding: 26px 24px; position: relative;
  box-shadow: var(--shadow);
}
.modal__x {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--fg-dim);
  cursor: pointer; font-size: 14px; transition: background .2s, color .2s;
}
.modal__x:hover { background: var(--coral); color: #1a0703; }
.modal__hd h2 { font-size: 34px; }
.modal__hd .lead { margin: 10px 0 20px; }

.rule-group { margin-bottom: 18px; }
.rule-group__t { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; margin-bottom: 8px; color: var(--fg); }
.rule-group__t .mono { color: var(--fg-faint); font-size: 11px; font-family: var(--font-mono); text-transform: none; }
.rule {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k v" "h v";
  align-items: center; gap: 0 12px;
  padding: 10px 14px; border-radius: 12px; background: var(--ink); margin-bottom: 6px;
  border: 1px solid var(--line-soft);
}
.rule__k { grid-area: k; font-weight: 700; font-size: 14px; }
.rule__h { grid-area: h; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); }
.rule__v { grid-area: v; font-family: var(--font-display); font-size: 26px; color: var(--lime); }
.rule-note { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); padding: 4px 4px 0; }

.rule-max { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.rule-max > div {
  background: rgba(198,255,58,.05); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.rule-max span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.rule-max b { font-family: var(--font-display); font-size: 26px; color: var(--fg); }
.rule-max__total { grid-column: 1 / -1; border-color: var(--lime) !important; background: rgba(198,255,58,.1) !important; }
.rule-max__total b { color: var(--lime); font-size: 34px; }

/* ---------- countdown ---------- */
.countdown {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--gold); background: rgba(255,207,92,.08);
  border: 1px solid rgba(255,207,92,.25); border-radius: 100px;
  padding: 6px 14px; margin: 0 0 22px;
}
.cd-pill { color: var(--gold); border-color: rgba(255,207,92,.25); }
@media (max-width: 640px) { .cd-pill { display: none; } }

/* ---------- acento de color del equipo elegido ---------- */
.pickbtn.sel .team__name { color: #fff; }
.pickbtn.sel .adv { color: var(--team, var(--lime)); }
.pickbtn.sel .flag { box-shadow: 0 0 0 2px var(--team, var(--lime)), 0 2px 6px rgba(0,0,0,.5); }

/* ---------- glow del campeón con su color ---------- */
.champ-card {
  border-color: var(--team, var(--gold)) !important;
  background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--team, var(--gold)) 18%, transparent), var(--surface)) !important;
}
.champ-card h3 { color: var(--team, var(--gold)) !important; }
.champ-card__trophy { filter: drop-shadow(0 12px 24px rgba(0,0,0,.6)) drop-shadow(0 0 18px var(--team, transparent)); }

/* ---------- confeti ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti i {
  position: absolute; top: -24px; border-radius: 2px; opacity: 0;
  animation-name: confetti-fall; animation-timing-function: ease-in; animation-iteration-count: 1;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-24px) rotateZ(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(104vh) rotateZ(720deg); opacity: 1; }
}

/* ====================================================================
   v3 — countdown en vivo · marcador + penales en eliminatorias
   ==================================================================== */

/* ---------- countdown (barra superior + hero) ---------- */
.cdbar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(20,16,6,.92), rgba(11,19,16,.86));
  border-bottom: 1px solid rgba(255,207,92,.18);
}
.cd-ttl { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--gold); letter-spacing: .01em; }
.cd-box {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1;
  background: rgba(255,207,92,.10); border: 1px solid rgba(255,207,92,.28);
  border-radius: 10px; padding: 6px 9px; min-width: 46px;
}
.cd-box b { font-family: var(--font-body); font-weight: 800; font-size: 21px; letter-spacing: .08em; color: var(--gold); font-variant-numeric: tabular-nums; }
.cd-box i { font-style: normal; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); margin-top: 4px; }
.cd-over { font-family: var(--font-display); font-size: 18px; color: var(--lime); text-transform: uppercase; }

.countdown-hero {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  margin: 0;
}
.countdown-hero .cd-ttl { width: 100%; margin-bottom: 2px; }
.countdown-hero .cd-box { min-width: 54px; padding: clamp(5px,0.9vh,9px) 13px; }
.countdown-hero .cd-box b { font-size: clamp(20px, 2.6vh, 26px); letter-spacing: .1em; }

/* ---------- partidos de eliminatoria (marcador + penales) ---------- */
.ko-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.komatch {
  background: linear-gradient(180deg, rgba(22,36,29,.72), rgba(17,27,22,.62));
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius);
  padding: 10px 14px 14px; box-shadow: var(--shadow-sm);
}
.komatch__id {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); margin: 2px 0 4px;
}
.komatch .match { border-bottom: none; padding: 6px 2px; }
.komatch__foot { margin-top: 8px; }
.ko-hint { font-family: var(--font-body); font-size: 12px; color: var(--fg-faint); }
.ko-tbd { display: flex; align-items: center; gap: 8px; color: var(--fg-faint); font-size: 13px; padding: 14px 2px; }
.ko-adv {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: var(--fg-dim);
  border-top: 1px dashed var(--line); padding-top: 10px;
}
.ko-adv b { display: inline-flex; align-items: center; gap: 7px; color: var(--team, var(--lime)); font-weight: 800; }

/* penales */
.pens { border-top: 1px dashed var(--line); padding-top: 10px; }
.pens__q { display: block; font-size: 12.5px; color: var(--gold); margin-bottom: 8px; }
.pens__q b { color: var(--gold); }
.pens__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.penbtn {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 10px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--ink); color: var(--fg);
  cursor: pointer; font-family: var(--font-body); transition: border-color .15s, background .15s, transform .12s;
  text-align: left;
}
.penbtn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--fg-dim); }
.penbtn .team__name { font-size: 13px; font-weight: 700; }
.penbtn.sel { border-color: var(--team, var(--lime)); background: color-mix(in srgb, var(--team, var(--lime)) 16%, transparent); }
.penbtn.sel .flag { box-shadow: 0 0 0 2px var(--team, var(--lime)), 0 2px 6px rgba(0,0,0,.5); }

/* final / 3.º puesto destacados */
.komatch--final { border-color: var(--gold); background: radial-gradient(120% 120% at 50% 0%, rgba(255,207,92,.10), rgba(17,27,22,.7)); }
.komatch--final .komatch__id { color: var(--gold); }
.komatch--third .komatch__id { color: var(--cyan); }

/* contenedor de finales (centrado, full width en móvil) */
.finals-wrap { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
#champWrap { max-width: 560px; margin: 16px auto 0; }
.champ-card { text-align: center; }

.rule__v small { font-size: 14px; color: var(--cyan); font-family: var(--font-display); }

@media (max-width: 560px) {
  .stepper { gap: 5px; }
  .step { min-width: 78px; padding: 10px; }
  .welcome__stats > div { padding: 10px 6px; }
  .ko-list { grid-template-columns: 1fr; }
  .cdbar { gap: 7px; padding: 8px 12px; }
  .cd-box { min-width: 42px; padding: 5px 7px; }
  .cd-box b { font-size: 19px; }
  .cd-ttl { font-size: 12px; width: 100%; text-align: center; }
  .countdown-hero .cd-box { min-width: 52px; }
  .countdown-hero .cd-box b { font-size: 26px; }

  /* Partido apilado en 2 filas: cada equipo con su bandera y su casilla */
  .match {
    grid-template-columns: 1fr 56px;
    grid-template-areas: "hm hs" "aw as";
    column-gap: 12px; row-gap: 8px;
    padding: 13px 2px;
  }
  .team.home { grid-area: hm; justify-content: flex-start; text-align: left; }
  .team.away { grid-area: aw; justify-content: flex-start; text-align: left; }
  .match .team.home .flag { order: -1; }  /* bandera siempre primero */
  .match .sc[data-side="home"] { grid-area: hs; }
  .match .sc[data-side="away"] { grid-area: as; }
  .match .dash { display: none; }
  .match .team__name { white-space: normal; font-size: 14.5px; line-height: 1.15; }
  .match .sc { height: 48px; font-size: 21px; }
  .flag { width: 30px; height: 21px; }

  /* Navegación inferior: progreso arriba (full width), botones lado a lado abajo */
  .stage-nav__inner { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .progress-pill { order: -1; width: 100%; text-align: center; }
  .stage-nav__btns { width: 100%; }
  .stage-nav__btns .btn { flex: 1; padding: 13px 16px; }
  .stage-nav { padding: 10px clamp(16px,4vw,40px); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ====================================================================
   v4 — bracket visual (cuadro) + cartón compartible
   ==================================================================== */
/* modal del cuadro: casi pantalla completa, header/foot fijos, cuadro scrollea adentro */
.modal--wide { padding: 8px; }
.modal__sheet--wide {
  width: 100%; max-width: 1120px;
  height: calc(100dvh - 16px); max-height: calc(100dvh - 16px);
  overflow: hidden; padding: 20px 20px 14px;
  display: flex; flex-direction: column;
}
.modal__sheet--wide .modal__hd { flex: none; }
.modal__sheet--wide .bracket-foot { flex: none; }

.bracket {
  flex: 1; min-height: 0;
  display: flex; align-items: stretch; gap: 14px;
  overflow: auto; padding: 6px 8px 10px 2px; margin-top: 6px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(198,255,58,.4) transparent;
}
/* scrollbars bonitas (no las feas por defecto) */
.bracket::-webkit-scrollbar { width: 9px; height: 9px; }
.bracket::-webkit-scrollbar-track { background: rgba(255,255,255,.02); border-radius: 9px; }
.bracket::-webkit-scrollbar-thumb { background: rgba(198,255,58,.28); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
.bracket::-webkit-scrollbar-thumb:hover { background: rgba(198,255,58,.5); background-clip: padding-box; }
.bracket::-webkit-scrollbar-corner { background: transparent; }
.bcol { display: flex; flex-direction: column; min-width: 152px; }
.bcol__t { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; color: var(--fg-faint); text-align: center; margin-bottom: 10px; letter-spacing: .05em; }
.bcol__matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 8px; }
.bmatch { background: var(--ink); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.bm__t { display: flex; align-items: center; gap: 7px; padding: 7px 9px; font-size: 12.5px; }
.bm__t + .bm__t { border-top: 1px solid var(--line-soft); }
.bm__t.tbd { opacity: .4; }
.bm__t .flag { width: 22px; height: 15px; }
.bm__n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.bm__s { font-variant-numeric: tabular-nums; color: var(--fg-faint); min-width: 12px; text-align: right; }
.bm__pen { font-size: 8px; font-weight: 800; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 0 3px; }
.bm__t.win { background: color-mix(in srgb, var(--team, var(--lime)) 14%, transparent); }
.bm__t.win .bm__n { color: var(--team, var(--lime)); font-weight: 800; }
.bm__t.win .bm__s { color: var(--fg); }

.bcol--champ { justify-content: center; min-width: 168px; }
.bchamp { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 12px; border: 1px solid var(--gold); border-radius: 14px; background: radial-gradient(120% 120% at 50% 0%, rgba(255,207,92,.12), var(--surface)); text-align: center; }
.bchamp.done { border-color: var(--team, var(--gold)); }
.bchamp__cup { font-size: 32px; }
.bchamp .flag { width: 36px; height: 25px; }
.bchamp__n { font-family: var(--font-display); font-size: 17px; color: var(--team, var(--gold)); text-transform: uppercase; line-height: 1; }
.bchamp__tbd { color: var(--fg-faint); font-size: 12px; }
.bracket-foot { text-align: center; margin-top: 12px; font-size: 13px; color: var(--fg-dim); }
.bracket-foot b { color: var(--cyan); }

/* cartón compartible */
.carton-preview { display: flex; justify-content: center; align-items: center; min-height: 240px; margin: 4px 0 16px; }
.carton-canvas { width: 100%; max-width: 300px; border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.carton-loading { color: var(--fg-faint); font-family: var(--font-mono); font-size: 13px; }
.carton-actions { display: flex; gap: 10px; }
.carton-actions .btn { flex: 1; padding: 12px 14px; font-size: 13px; white-space: nowrap; }

@media (max-width: 560px) {
  .bcol, .bcol--champ { min-width: 140px; }
  .bm__t { font-size: 11.5px; padding: 6px 8px; }
}

/* ====================================================================
   v5 — Supabase: auth, guardado en nube, tabla de posiciones
   ==================================================================== */

/* pantalla de auth: aire entre elementos, pero compacto para entrar sin scroll */
.welcome--auth { padding: clamp(4px, 1vh, 12px) 20px; }
.welcome--auth .welcome__inner { gap: clamp(6px, 1.3vh, 14px); }
.welcome--auth h1 { font-size: min(9.5vw, 7vh, 68px); }
.welcome--auth .welcome__logo { width: clamp(50px, 6.5vh, 64px); }
.welcome--auth .countdown-hero .cd-box { min-width: 50px; padding: 5px 11px; }
.welcome--auth .countdown-hero .cd-box b { font-size: clamp(18px, 2.3vh, 22px); }
.welcome--auth .countdown-hero .cd-ttl { font-size: 12px; }

/* panel del formulario (superficie legible sobre la imagen) */
.auth-card {
  width: min(430px, 100%);
  background: rgba(9,15,12,.8);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow);
}
.auth-card #authForm { display: flex; flex-direction: column; gap: 13px; }
.auth-card .field { max-width: none; width: 100%; gap: 6px; }
.auth-card .field label { color: var(--fg-dim); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; }
.auth-card .input { font-size: 16px; padding: 13px 16px; background: var(--ink); }
.auth-card #authSubmit { margin-top: 4px; padding: 15px 28px; }

/* toggle crear cuenta / entrar */
.auth-toggle { display: inline-flex; align-self: center; background: var(--ink); border: 1px solid var(--line); border-radius: 100px; padding: 4px; gap: 4px; }
.auth-tab { border: none; background: transparent; color: var(--fg-dim); font-family: var(--font-body); font-weight: 700; font-size: 13.5px; padding: 9px 22px; border-radius: 100px; cursor: pointer; transition: background .2s, color .2s; }
.auth-tab.on { background: var(--lime); color: #0a0f08; }
.auth-error { width: 100%; background: rgba(255,90,69,.12); border: 1px solid rgba(255,90,69,.4); color: #ffb3a8; font-size: 13px; padding: 10px 12px; border-radius: 10px; text-align: left; }

/* indicador de guardado en la nube */
.sync { font-size: 11px; margin-left: 6px; }
.sync.is-ok { color: var(--lime); }
.sync.is-err { color: var(--coral); }

/* splash de carga */
.splash-dots { display: flex; gap: 9px; }
.splash-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--lime); animation: splashPulse 1.2s infinite ease-in-out; }
.splash-dots i:nth-child(2) { animation-delay: .18s; }
.splash-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes splashPulse { 0%,100%{opacity:.25; transform:scale(.75)} 50%{opacity:1; transform:scale(1)} }

/* tabla de posiciones */
.lb { display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--ink); border: 1px solid var(--line-soft); }
.lb-row.me { border-color: var(--lime); background: rgba(198,255,58,.07); }
.lb-pos { font-family: var(--font-display); font-size: 18px; text-align: center; color: var(--fg-dim); }
.lb-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-you { color: var(--lime); font-weight: 600; font-size: 12px; }
.lb-sent { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-faint); border: 1px solid var(--line); border-radius: 100px; padding: 3px 9px; white-space: nowrap; }
.lb-sent.on { color: var(--lime); border-color: rgba(198,255,58,.4); }
.lb-pts { font-family: var(--font-display); font-size: 20px; color: var(--lime); text-align: right; }
.lb-pts small { font-family: var(--font-body); font-size: 10px; color: var(--fg-faint); font-weight: 600; margin-left: 3px; }
.lb-foot { text-align: center; margin-top: 14px; font-size: 13px; color: var(--fg-dim); }
.lb-foot b { color: var(--lime); }
.lb-loading { text-align: center; color: var(--fg-faint); padding: 26px; font-family: var(--font-mono); font-size: 13px; }

/* ====================================================================
   v6 — MODO EN VIVO (durante el Mundial)
   ==================================================================== */

/* banner de puntos */
.livebanner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(120deg, rgba(255,90,69,.14), rgba(198,255,58,.10));
  border: 1px solid rgba(255,90,69,.35); border-radius: var(--radius);
  padding: 14px 18px; margin: 18px 0 6px;
}
.livebanner__l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.livebanner__tag { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; color: var(--coral); letter-spacing: .02em; }
.livebanner__sub { font-size: 12.5px; color: var(--fg-dim); }
.livebanner__pts {
  display: flex; flex-direction: column; align-items: flex-end; flex: none;
  background: var(--ink); border: 1px solid var(--lime); border-radius: 12px;
  padding: 8px 16px; cursor: pointer; transition: transform .12s;
}
.livebanner__pts:hover { transform: translateY(-2px); }
.livebanner__pts b { font-family: var(--font-display); font-size: 30px; color: var(--lime); line-height: 1; }
.livebanner__pts span { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); }

/* partido de grupos en vivo */
.lmatch { padding: 10px 4px; border-bottom: 1px dashed var(--line-soft); }
.lmatch:last-child { border-bottom: none; }
.lmatch__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.lmatch__sc { font-family: var(--font-display); font-size: 22px; color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lmatch__sc i { color: var(--fg-faint); font-style: normal; margin: 0 1px; }
.lmatch__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.lmatch__pred { font-size: 12px; color: var(--fg-dim); }
.lmatch__pred b { color: var(--fg); }

/* veredicto (badges) */
.vb { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 100px; white-space: nowrap; border: 1px solid transparent; }
.vb-exact { color: #0a0f08; background: var(--lime); }
.vb-ok { color: var(--gold); background: rgba(255,207,92,.14); border-color: rgba(255,207,92,.4); }
.vb-fail { color: var(--coral); background: rgba(255,90,69,.12); border-color: rgba(255,90,69,.35); }
.vb-pend { color: var(--fg-faint); background: var(--ink); border-color: var(--line); }

/* acento de borde por veredicto en grupos */
.lmatch--exact { box-shadow: inset 3px 0 0 var(--lime); padding-left: 10px; }
.lmatch--result { box-shadow: inset 3px 0 0 var(--gold); padding-left: 10px; }
.lmatch--fail { box-shadow: inset 3px 0 0 var(--coral); padding-left: 10px; }

/* tarjeta de eliminatoria en vivo */
.lko { display: flex; flex-direction: column; gap: 8px; }
.lko__pick { display: flex; align-items: center; gap: 8px; }
.lko__lbl { font-size: 12px; color: var(--fg-faint); }
.lko__team { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; }
.lko__team b { font-weight: 800; }
.lko__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 9px; }
.lko__real { font-size: 12px; color: var(--fg-dim); display: inline-flex; align-items: center; gap: 6px; }
.lko__real b { color: var(--fg); }
.lko--win { border-color: rgba(198,255,58,.5); }
.lko--fail { border-color: rgba(255,90,69,.35); }

@media (max-width: 560px) {
  .livebanner { padding: 12px 14px; }
  .livebanner__tag { font-size: 16px; }
  .livebanner__pts b { font-size: 26px; }
}

/* botón de vista previa "Mundial finalizado" (demo) */
.preview-cta { display: flex; justify-content: center; padding: 12px clamp(16px,4vw,40px) 0; }
.preview-cta button {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(79,214,201,.1); border: 1px dashed var(--cyan); color: var(--cyan);
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  padding: 10px 18px; border-radius: 100px; cursor: pointer; transition: background .2s, transform .12s;
}
.preview-cta button:hover { background: rgba(79,214,201,.2); transform: translateY(-1px); }
.preview-cta button span { color: var(--fg-faint); font-weight: 600; }
.livebanner__right { display: flex; align-items: center; gap: 8px; flex: none; }
.livebanner__exit { background: var(--ink); border: 1px solid var(--line); color: var(--fg-dim); border-radius: 100px; padding: 9px 13px; font-size: 12px; cursor: pointer; font-family: var(--font-body); font-weight: 700; white-space: nowrap; }
.livebanner__exit:hover { color: var(--coral); border-color: var(--coral); }
.livebanner--prev { border-color: var(--cyan); background: linear-gradient(120deg, rgba(79,214,201,.14), rgba(198,255,58,.08)); }
.livebanner--prev .livebanner__tag { color: var(--cyan); }