@import url("https://fonts.googleapis.com/css2?family=Syncopate&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&display=swap");

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.55 "Instrument Sans", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 32px 20px 72px; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:root { --font-display: "Bricolage Grotesque", sans-serif; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--muted); }
.lede { color: var(--muted); font-size: 1.08rem; max-width: 60ch; margin-top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; }
.nav { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 400 .95rem "Syncopate", sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.brand img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }
.nav-links { display: flex; gap: 4px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem; }
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--muted); }
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live-pill.is-live { color: var(--text); border-color: var(--live); }
.live-pill.is-live .dot { background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } }
.menu-btn { display: none; margin-left: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 600; }
@media (max-width: 1080px) {
  .menu-btn { display: block; }
  .nav { flex-wrap: wrap; }
  .nav-links { display: none; width: 100%; flex-direction: column; margin: 8px 0 0; order: 5; }
  .nav.open .nav-links { display: flex; }
  .live-pill { order: 2; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: .9rem; }
.site-footer .inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.socials a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 600; font-size: .88rem; }
.socials a:hover { border-color: var(--accent); }
.rg { display: flex; align-items: center; gap: 10px; }
.rg b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--muted); color: var(--text); font-size: .8rem; }

/* ---------- Building blocks ---------- */
.page-head { margin-bottom: 32px; }
.section { margin-top: 56px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.section-head a { color: var(--accent); font-weight: 600; text-decoration: none; }
.section-head a:hover { text-decoration: underline; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; border: 0; background: var(--accent); color: var(--accent-ink); font: 700 1rem "Instrument Sans", sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); }
.btn.danger { background: transparent; color: var(--loss); border: 1px solid color-mix(in srgb, var(--loss) 50%, transparent); }
.input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink); color: var(--text); font: inherit; }
.input:focus { border-color: var(--accent); outline: none; }
.form-row { display: flex; gap: 10px; }
.form-row .input { flex: 1; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.stat { background: var(--surface); padding: 18px 20px; }
.stat dt { color: var(--muted); font-size: .88rem; }
.stat dd { margin: 4px 0 0; font: 700 1.6rem var(--font-display); }
.pos { color: var(--win); }
.neg { color: var(--loss); }
.notice { border: 1px dashed var(--line); border-radius: 14px; padding: 18px 20px; color: var(--muted); }
.notice strong { color: var(--text); }
.skeleton { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 10px; min-height: 52px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Tables ---------- */
.table-wrap { border: 1px solid var(--line); border-radius: 18px; overflow-x: auto; background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 18px; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: .85rem; border-bottom: 1px solid var(--line); }
tbody tr + tr td { border-top: 1px solid var(--line); }
tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; }
td.rank { width: 56px; color: var(--muted); font-weight: 700; }
td.user { font-weight: 600; }
.prize-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 700; font-size: .85rem; }

/* ---------- Home ---------- */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.hero-brand { display: flex; align-items: center; gap: 8px; margin-left: -22px; }
.hero-brand img { width: 180px; height: 180px; flex: none; }
.wordmark { font: 400 clamp(1.5rem, 3.6vw, 2.5rem)/1.1 "Syncopate", sans-serif; letter-spacing: .24em; text-transform: uppercase; }
@media (max-width: 560px) { .hero-brand { flex-direction: column; align-items: flex-start; margin-left: 0; } .hero-brand img { width: 150px; height: 150px; margin: -20px 0 -10px -24px; } }
.hero-copy .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.player { aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.player iframe { width: 100%; height: 100%; border: 0; }
.next-stream { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; }
.next-stream .when { font: 800 2.4rem/1 var(--font-display); }
.countdown { display: flex; gap: 10px; }
.countdown div { background: var(--ink); border-radius: 12px; padding: 10px 12px; min-width: 64px; text-align: center; }
.countdown b { display: block; font: 700 1.5rem var(--font-display); }
.countdown span { color: var(--muted); font-size: .78rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .hero, .two-col { grid-template-columns: 1fr; } }

/* ---------- Podium ---------- */
.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 14px; align-items: end; margin-bottom: 20px; }
.podium .spot { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.podium .spot.first { border-color: var(--accent); padding-block: 32px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); }
.podium .place { font: 800 2.6rem/1 var(--font-display); color: var(--muted); }
.podium .first .place { color: var(--accent); font-size: 3.4rem; }
.podium .name { font-weight: 700; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; }
.podium .amount { font: 700 1.3rem var(--font-display); }
@media (max-width: 640px) {
  .podium { grid-template-columns: 1fr; }
  .podium .spot.first { order: -1; }
}

/* ---------- Ticket (papel perforado) ---------- */
.ticket {
  --notch: 14px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 14px;
  -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  --stub: 128px;
}
.ticket .body { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ticket .stub { width: var(--stub); border-left: 2px dashed color-mix(in srgb, var(--paper-ink) 30%, transparent); display: grid; place-items: center; text-align: center; padding: 18px 10px; }
.ticket .big { font: 800 2.8rem/1 var(--font-display); }
.ticket .small { font-size: .85rem; opacity: .7; }
.ticket h3 { color: var(--paper-ink); }

/* ---------- Casinos (cupones) ---------- */
.coupons { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.coupon { --stub: 112px; grid-template-columns: 1fr; }
.coupon .body { gap: 14px; }
.coupon .logo { height: 56px; width: auto; object-fit: contain; object-position: left; border-radius: 8px; }
.coupon .casino-head { display: flex; align-items: center; gap: 12px; padding-right: 84px; }
.coupon .casino-flag { font-size: 2rem; line-height: 1; }
.coupon .casino-name { font: 800 1.35rem/1.1 var(--font-display); color: var(--paper-ink); }
.coupon .bonus { font: 800 1.25rem/1.2 var(--font-display); color: var(--accent); }
.coupon .perks { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .95rem; line-height: 1.45; }
.coupon .perks li::marker { color: var(--accent); }
.coupon .body { justify-content: space-between; }
.coupon .perks { margin-bottom: auto; }
.legal { margin-top: 28px; max-width: 90ch; font-size: .82rem; line-height: 1.6; color: var(--muted); text-align: center; margin-inline: auto; }
.coupon .code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coupon .code { font: 700 1rem "Instrument Sans", sans-serif; letter-spacing: .04em; padding: 8px 12px; border: 2px dashed color-mix(in srgb, var(--paper-ink) 35%, transparent); border-radius: 10px; }
.coupon .copy { background: none; border: 0; color: var(--paper-ink); font: 600 .9rem "Instrument Sans", sans-serif; text-decoration: underline; cursor: pointer; padding: 4px; }
.coupon .btn { background: var(--paper-ink); color: var(--paper); align-self: flex-start; }
.coupon.featured { outline: 3px solid var(--accent); outline-offset: 4px; }
.coupon .flag { position: absolute; top: 14px; right: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .78rem; padding: 3px 10px; border-radius: 999px; }
.coupon { -webkit-mask: none; mask: none; }
.coupon::before, .coupon::after { content: ""; position: absolute; left: -12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--ink); }
.coupon::after { left: auto; right: -12px; }

/* ---------- Bonus hunt ---------- */
.progress { height: 10px; background: var(--ink); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
tr.pending td { color: var(--muted); }
tr.current td { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.slot { display: inline-flex; align-items: center; gap: 10px; }
.slot img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; }
tr.best td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .85rem; background: var(--surface-2); }
.status-badge.opening { background: var(--accent); color: var(--accent-ink); }
.embed-frame { width: 100%; min-height: 640px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }

/* ---------- Horarios ---------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 14px; min-height: 150px; display: flex; flex-direction: column; gap: 8px; }
.day .dname { font-weight: 700; color: var(--muted); }
.day.today { border-color: var(--accent); }
.day.today .dname { color: var(--accent); }
.day .time { font: 800 1.6rem/1 var(--font-display); }
.day.off:not(.today) { opacity: .45; }
@media (max-width: 860px) {
  .week { grid-template-columns: 1fr; }
  .day { min-height: 0; flex-direction: row; align-items: baseline; gap: 14px; }
  .day .dname { width: 96px; }
}
.vods { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.vod { text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
.vod .thumb { aspect-ratio: 16/9; border-radius: 14px; background: var(--surface-2) center/cover; border: 1px solid var(--line); display: grid; place-items: end start; padding: 10px; }
.vod .thumb span { background: rgba(0,0,0,.72); color: #fff; font-size: .8rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.vod:hover .thumb { border-color: var(--accent); }
.vod h3 { font-size: 1rem; line-height: 1.3; }
.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.social-grid a { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.social-grid a:hover { border-color: var(--accent); }

/* ---------- Sorteo ---------- */
.reel { position: relative; height: 150px; overflow: hidden; border-radius: 18px; background: var(--paper); color: var(--paper-ink); }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 45px; z-index: 2; pointer-events: none; }
.reel::before { top: 0; background: linear-gradient(var(--paper), transparent); }
.reel::after { bottom: 0; background: linear-gradient(transparent, var(--paper)); }
.reel-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.reel-strip div { height: 150px; display: grid; place-items: center; font: 800 clamp(2rem, 6vw, 3.6rem)/1 var(--font-display); padding: 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winners { display: grid; gap: 12px; }
.winner-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.winner-row .place { font: 800 1.6rem var(--font-display); color: var(--accent); width: 40px; }
.winner-row .who { font-weight: 700; font-size: 1.15rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.code-block { font-family: ui-monospace, monospace; font-size: .82rem; word-break: break-all; color: var(--muted); }
details summary { cursor: pointer; font-weight: 600; }
.admin-grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }
.steps { display: grid; gap: 14px; }
.step { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 10px; }
.step.done { opacity: .55; }
.stream-mode header, .stream-mode footer, .stream-mode .admin-controls { display: none !important; }
.stream-mode main { max-width: none; padding: 40px; }
.stream-mode .admin-grid { grid-template-columns: 1fr; }
.stream-mode .reel { height: 240px; }
.stream-mode .reel-strip div { height: 240px; font-size: 6rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Hunts anteriores (acordeón) ---------- */
.hunt-history { display: grid; gap: 10px; }
.hunt-item { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.hunt-item[open] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.hunt-item summary { list-style: none; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 16px 52px 16px 20px; cursor: pointer; }
.hunt-item summary::-webkit-details-marker { display: none; }
.hunt-item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 700 1.4rem/1 var(--font-display); color: var(--muted); }
.hunt-item[open] summary::after { content: "−"; color: var(--accent); }
.hunt-item summary:hover { background: var(--surface-2); }
.hunt-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.hunt-name strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hunt-name .muted { font-size: .88rem; }
.hunt-figs { display: flex; gap: 18px; font-weight: 600; flex-wrap: wrap; }
.hunt-figs .muted { font-weight: 400; font-size: .85rem; margin-right: 4px; }
.hunt-body { padding: 0 20px 20px; }
.hunt-body .table-wrap { background: var(--ink); }
@media (max-width: 560px) { .hunt-figs { gap: 12px; font-size: .92rem; } .hunt-body { padding: 0 12px 14px; } }

/* ---------- Reglas del wager race ---------- */
.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: rule; }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.rules li::before { content: counter(rule); font: 800 1.2rem/1.3 var(--font-display); color: var(--accent); }

/* ---------- Guess the Balance ---------- */
.gtb { margin-bottom: 20px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.gtb-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 14px; }
.gtb-head h2 { font-size: 1.4rem; }
.gtb-form { display: grid; gap: 8px; max-width: 520px; }
.gtb-form label { font-weight: 600; }
.gtb-user { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gtb-user img { width: 24px; height: 24px; border-radius: 50%; }
.gtb-user a { color: var(--text); }
.kick-btn { background: var(--live); color: #0b0b0b; }

/* ---------- Contador del wager race ---------- */
.race-clock {
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: 22px; padding: 26px 28px 22px;
  background:
    radial-gradient(120% 140% at 50% -20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    var(--surface);
}
.race-clock::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 220px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
  animation: glow 4s ease-in-out infinite alternate;
}
@keyframes glow { from { opacity: .35; transform: translateY(0); } to { opacity: .8; transform: translateY(14px); } }
.race-clock-top { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.race-clock-top > p:first-child { font: 700 1.15rem var(--font-display); }
.race-pool { display: flex; align-items: baseline; gap: 10px; }
.race-pool span { color: var(--muted); }
.race-pool strong { font: 800 1.6rem var(--font-display); color: var(--accent); }
.clock { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.clock-unit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clock-num {
  position: relative; width: 100%; height: clamp(88px, 13vw, 150px); overflow: hidden;
  border-radius: 16px; background: var(--ink); border: 1px solid var(--line);
  box-shadow: inset 0 -40px 60px -40px color-mix(in srgb, var(--accent) 35%, transparent);
}
.clock-num::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.clock-num span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 clamp(2.8rem, 8.5vw, 6rem)/1 var(--font-display); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.clock-num span.in { animation: num-in .45s cubic-bezier(.2,.8,.2,1) both; }
.clock-num span.out { animation: num-out .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes num-in { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes num-out { from { transform: none; opacity: 1; } to { transform: translateY(70%); opacity: 0; } }
.clock-num[data-unit="s"] { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.clock-num[data-unit="s"] span { color: var(--accent); }
.clock-label { color: var(--muted); font-weight: 600; font-size: .9rem; }
.race-end { position: relative; margin-top: 16px; font-size: .9rem; }
@media (max-width: 560px) {
  .race-clock { padding: 20px 16px 18px; }
  .clock { gap: 8px; }
  .clock-num { border-radius: 12px; }
  .race-pool strong { font-size: 1.3rem; }
}

/* =====================================================================
   GLASS — capa de estilo: fondo con brillos + superficies de vidrio
   ===================================================================== */
body {
  background:
    radial-gradient(60vw 60vw at 85% -10%, var(--glow-1), transparent 60%),
    radial-gradient(55vw 55vw at -10% 35%, var(--glow-2), transparent 60%),
    radial-gradient(50vw 50vw at 70% 110%, var(--glow-1), transparent 60%),
    var(--ink);
  background-attachment: fixed;
}
.brand .wordmark-img { width: auto; height: 20px; border-radius: 0; box-shadow: none; }

.site-header { background: rgba(30, 19, 25, 0.55); border-bottom-color: var(--line); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); }

.panel, .table-wrap, .next-stream, .podium .spot, .day, .social-grid a, .winner-row, .step,
.hunt-item, .rules li, .race-clock, .stats, .ticket, .notice, .live-pill, .socials a, .nav-links a:hover {
  background-color: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--highlight), 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}
.notice { border-style: solid; }
.nav-links a[aria-current="page"] { background: var(--accent); box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 80%, transparent); }

/* Stats: un solo vidrio con divisiones finas */
.stats { gap: 0; }
.stat { background: transparent; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }

/* Huecos dentro del vidrio */
.input, .countdown div, .clock-num, .hunt-body .table-wrap, .progress { background: var(--well); }
.input { border-color: var(--line); }
.hunt-body .table-wrap { backdrop-filter: none; box-shadow: none; }

/* Tickets y cupones en vidrio claro (sin muescas laterales, que no combinan con el fondo) */
.coupon::before, .coupon::after { display: none; }
.coupon { border-radius: 20px; }
.coupon .btn { background: var(--accent); color: var(--accent-ink); }
.coupon .code { border-color: rgba(255, 255, 255, 0.28); }
.coupon .bonus { color: #ff8a73; }
.coupon.featured { outline: 2px solid var(--accent); outline-offset: 3px; }
.ticket .stub { border-left-color: rgba(255, 255, 255, 0.22); }
.ticket { -webkit-mask: none; mask: none; border-radius: 20px; }

/* Podio y destacados con un toque del rojo */
.podium .spot.first, .race-clock, .gtb {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
tbody tr:hover td { background: var(--surface-2); }
.reel { background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.reel::before { background: linear-gradient(rgba(30, 19, 25, .9), transparent); }
.reel::after { background: linear-gradient(transparent, rgba(30, 19, 25, .9)); }

/* Si el navegador no soporta blur, se usa un fondo más sólido para que se lea bien */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --surface: rgba(52, 34, 44, 0.92); --paper: rgba(70, 48, 60, 0.92); }
}
.two-col > *, .hero > * { min-width: 0; }
@media (max-width: 560px) {
  .brand .wordmark-img { height: 16px; }
  .live-pill:not(.is-live) { display: none; }
}

/* ---------- Wager race: pestañas y buscador ---------- */
.lb-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { font: 600 .92rem "Instrument Sans", sans-serif; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.search { flex: 0 1 320px; }
.search .input { border-radius: 999px; padding-left: 16px; }
.lb-cut { margin: 12px 0 16px; font-size: .9rem; }
tr.hit td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (max-width: 560px) { .search { flex: 1 1 100%; } }

/* ---------- Menú: botón Jugar en Stake ---------- */
.nav-links .nav-cta { background: var(--accent); color: var(--accent-ink); margin-left: 6px; box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.nav-links .nav-cta:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.08); }
@media (max-width: 1080px) { .nav-links .nav-cta { margin: 6px 0 0; text-align: center; } }

/* ---------- Inicio: hero del wager race ---------- */
.race-hero { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 18px 0 8px; }
.creator-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; text-decoration: none; text-align: left;
  background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 var(--highlight); }
.creator-pill img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.creator-pill > span { display: flex; flex-direction: column; line-height: 1.2; }
.creator-pill .muted { font-size: .82rem; }
.creator-pill.is-live { border-color: var(--live); }
.creator-pill.is-live .muted { color: var(--live); }
.race-eyebrow { margin-top: 26px; color: var(--accent); font-weight: 700; letter-spacing: .02em; }
.race-amount { margin-top: 6px; font: 800 clamp(4.2rem, 15vw, 9.5rem)/.9 var(--font-display); letter-spacing: -.045em;
  background: linear-gradient(180deg, #fff 30%, #ffd2c9 75%, color-mix(in srgb, var(--accent) 70%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 40px color-mix(in srgb, var(--accent) 45%, transparent)); }
.race-amount sup { font-size: .22em; letter-spacing: 0; vertical-align: top; margin-left: 8px; position: relative; top: .6em; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.race-sub { margin-top: 10px; color: var(--muted); font-size: 1.15rem; }
.race-hero-clock { width: min(560px, 100%); margin-top: 26px; }
.clock-sm { gap: 10px; }
.clock-sm .clock-num { height: clamp(64px, 11vw, 92px); border-radius: 14px; }
.clock-sm .clock-num span { font-size: clamp(2rem, 6.5vw, 3.4rem); }
.clock-sm .clock-label { font-size: .8rem; }
.race-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.code-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--text);
  background: var(--well); border: 1px dashed rgba(255,255,255,.28); }
.code-chip strong { font-size: 1.05rem; letter-spacing: .04em; }
.code-chip .code-copy { font-size: .85rem; text-decoration: underline; color: var(--muted); }
.code-chip:hover { border-color: var(--accent); }

/* ---------- Inicio: cómo funciona ---------- */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: step; }
.how-steps li { counter-increment: step; position: relative; padding: 22px 22px 22px 70px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--highlight); }
.how-steps li::before { content: counter(step); position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 800 1.05rem var(--font-display); background: var(--accent); color: var(--accent-ink); }
.how-steps strong { font-size: 1.05rem; }
.how-steps span { color: var(--muted); }
@media (max-width: 860px) { .how-steps { grid-template-columns: 1fr; } }

.next-mini a { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.next-mini a:hover { border-color: var(--accent); }

.platform { align-self: flex-start; display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); }
.platform-kick { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent); }
.platform-youtube { color: #ff6b6b; border-color: rgba(255, 107, 107, .4); }

.coupon .casino-flag-img { width: 42px; height: 28px; border-radius: 5px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 4px 12px -4px rgba(0,0,0,.6); }

/* ---------- Contenido ---------- */
.content-block + .content-block { margin-top: 32px; }
.section-head.sub { margin-bottom: 14px; }
.section-head.sub h3 { font-size: 1.2rem; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ig-post { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.ig-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ig-post:hover img { transform: scale(1.04); }
.ig-badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgba(0,0,0,.6); color: #fff; }
.ig-cta { display: grid; gap: 6px; justify-items: start; padding: 22px; border-radius: 18px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ig-cta strong { font: 800 1.3rem var(--font-display); }
.ig-cta .btn { margin-top: 8px; }
@media (max-width: 860px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cuenta en el menú ---------- */
.nav-links .nav-user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; }
.nav-links .nav-user img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.nav-links .nav-login { border: 1px solid var(--line); }
@media (max-width: 1080px) { .nav-links .nav-user { padding: 8px 12px; } }

/* ---------- Mi cuenta ---------- */
.account-login { max-width: 640px; margin: 20px auto; padding: 32px; }
.account-head { display: flex; align-items: center; gap: 18px; }
.account-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--accent); }
.account-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.account-side { display: grid; gap: 20px; }
.account-form { display: grid; gap: 18px; padding: 26px; }
.account-form label { display: grid; gap: 6px; font-weight: 600; }
.account-form small { font-weight: 400; }
.wallet-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 6px; margin: 0; display: grid; gap: 10px; }
.wallet-box legend { font-weight: 700; padding: 0 6px; }
.wallet-tips { margin: 0; padding-left: 18px; color: var(--muted); font-size: .88rem; display: grid; gap: 4px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.account-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 860px) { .account-grid { grid-template-columns: 1fr; } .account-head { flex-direction: column; align-items: flex-start; } }

/* Barra superior: más espacio y textos en una sola línea */
.nav { max-width: 1320px; gap: 16px; }
.nav-links { align-items: center; }
.nav-links a { white-space: nowrap; padding: 8px 11px; }
.nav-links .nav-cta { padding: 9px 16px; }
@media (min-width: 1081px) and (max-width: 1360px) {
  .nav-links .nav-user { padding: 3px; }
  .nav-links .nav-user .nav-user-name { display: none; }
  .nav-links a { padding: 8px 9px; font-size: .92rem; }
}
.nav-user-initial { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .8rem; }
@media (min-width: 1081px) and (max-width: 1200px) {
  .nav { gap: 10px; padding-inline: 16px; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 7px 8px; font-size: .88rem; }
  .nav-links .nav-cta { padding: 8px 12px; }
  .brand .wordmark-img { height: 17px; }
}

/* Usuario de Kick en el menú: contorno y etiqueta verde Kick */
.nav-links .nav-user, .nav-links .nav-login {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text);
  border: 1.5px solid var(--live);
  background: color-mix(in srgb, var(--live) 12%, transparent);
  box-shadow: 0 0 16px -6px var(--live);
}
.nav-links .nav-user { padding: 3px 6px 3px 3px; }
.nav-links .nav-login { padding: 6px 12px 6px 6px; }
.nav-links .nav-user:hover, .nav-links .nav-login:hover { background: color-mix(in srgb, var(--live) 22%, transparent); color: var(--text); }
.nav-links .nav-user[aria-current="page"] { background: color-mix(in srgb, var(--live) 26%, transparent); color: var(--text); box-shadow: 0 0 20px -6px var(--live); }
.nav-links .nav-user img { box-shadow: 0 0 0 2px var(--live); }
.kick-tag { background: var(--live); color: #0b0b0b; font: 800 .62rem/1 "Instrument Sans", sans-serif; letter-spacing: .08em; padding: 4px 6px; border-radius: 6px; }
@media (min-width: 1081px) and (max-width: 1360px) { .nav-links .nav-user { padding: 3px 6px 3px 3px; } }
@media (max-width: 1080px) { .nav-links .nav-user, .nav-links .nav-login { align-self: flex-start; padding: 6px 12px 6px 6px; } }

/* ---------- Slot call ---------- */
.slotcall { border-color: color-mix(in srgb, var(--live) 40%, var(--line)); }
.slot-mine { display: flex; align-items: center; gap: 14px; }
.slot-mine img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.slot-mine div { display: grid; gap: 2px; }
.slot-mine strong { font-size: 1.2rem; }
.slot-list { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.slot-list summary { cursor: pointer; font-weight: 700; }
.slot-list ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.slot-row { display: grid; grid-template-columns: 26px 40px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.slot-row img, .slot-ph { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--line); }
.slot-row .slot-n { color: var(--muted); font-weight: 700; text-align: center; }
.slot-name { display: grid; min-width: 0; }
.slot-name strong, .slot-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-state { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.slot-row.played { opacity: .55; }
.slot-row.played .slot-state { color: var(--live); font-weight: 700; }

/* ---------- Aviso de privacidad ---------- */
.prose { max-width: 780px; margin: 0 auto; padding: clamp(22px, 4vw, 40px); line-height: 1.65; }
.prose h1 { margin-bottom: 4px; }
.prose h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.prose ul { padding-left: 1.2em; display: grid; gap: 6px; }
.prose a { color: var(--accent); }
.consent-row { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; }
.consent-row input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.consent-row a { color: var(--accent); }
.site-footer .rg a { color: inherit; text-decoration: underline; }
.slot-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.slot-layout .slotcall { margin-bottom: 0; }
.slot-board { padding: 22px; }
.slot-ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.slot-row.jugando { outline: 1.5px solid var(--live); }
.slot-row.jugando .slot-state { color: var(--live); font-weight: 700; }
.slot-row.jugado { opacity: .55; }
.slot-row.jugado .slot-state { color: var(--live); font-weight: 700; }
.slot-now { display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 20px; border-color: var(--live); box-shadow: 0 0 30px -12px var(--live); }
.slot-now img.big, .slot-now .slot-ph.big { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; flex: none; }
.slot-now div { display: grid; gap: 4px; min-width: 0; }
.slot-now div > strong { font: 700 clamp(1.3rem, 3vw, 1.9rem)/1.1 var(--font-display); }
.slot-now-tag { color: #0b0b0b; background: var(--live); font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; justify-self: start; }
.slot-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; margin-bottom: 20px; text-decoration: none; border-color: var(--live); }
.slot-banner > span:first-child { display: grid; gap: 2px; }
.slot-banner strong { font-size: 1.1rem; }
@media (max-width: 860px) { .slot-layout { grid-template-columns: 1fr; } }
.login-help { display: block; margin-top: 10px; font-size: .82rem; }
.login-error { margin-bottom: 20px; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.login-error p { margin-top: 6px; }
.login-error a { color: var(--accent); }
.slot-combo { position: relative; }
.slot-options { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 94%, #000); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
.slot-options li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; }
.slot-options li img, .slot-options li .slot-ph { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; }
.slot-options li span { display: grid; min-width: 0; }
.slot-options li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-options li:hover, .slot-options li.active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.slot-options .slot-opt-note { cursor: default; color: var(--muted); }
.slot-options .slot-opt-note:hover { background: none; }
.slot-picked { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1.5px solid var(--live); background: color-mix(in srgb, var(--live) 8%, transparent); }
.slot-picked img, .slot-picked .slot-ph { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.slot-picked > span { display: grid; flex: 1; min-width: 0; }
.slot-picked .btn-sm, .btn-sm { padding: 6px 12px; font-size: .85rem; }
#slot-form > .btn { justify-self: start; }
.slot-row.res-gano { opacity: 1; outline: 1.5px solid color-mix(in srgb, var(--live) 70%, transparent); }
.slot-row.res-gano .slot-state { color: #0b0b0b; background: var(--live); padding: 3px 8px; border-radius: 6px; font-weight: 800; }
.slot-row.res-perdio .slot-state { color: var(--muted); font-weight: 600; }
.stake-only-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: .9rem; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.stake-only-note a { color: var(--accent); font-weight: 700; }
.slot-now-grid { display: grid; gap: 14px; margin-bottom: 20px; }
.slot-now-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slot-now-grid .slot-now { margin-bottom: 0; }
.slot-sub { font-size: .95rem; margin-top: 4px; color: var(--muted); }
@media (max-width: 760px) { .slot-now-grid.two { grid-template-columns: 1fr; } }

/* Mi cuenta: método de pago, Bitso, verificado */
.verified-check { display: inline-grid; place-items: center; width: .95em; height: .95em; border-radius: 50%; background: var(--live); color: #0b0b0b; font-size: .6em; vertical-align: .18em; box-shadow: 0 0 16px -4px var(--live); }
.verified-note { color: var(--live); font-weight: 700; margin-top: 4px; }
.pay-method { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pay-method legend { font-weight: 600; margin-bottom: 8px; }
.seg-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-pick label { position: relative; cursor: pointer; }
.seg-pick input { position: absolute; opacity: 0; pointer-events: none; }
.seg-pick span { display: block; text-align: center; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); font-weight: 700; color: var(--muted); }
.seg-pick input:checked + span { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.seg-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.wallet-age { font-size: .88rem; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); }
.wallet-age.old { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.bitso-promo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--text); border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); margin-top: 6px; }
.bitso-promo > span:first-child { display: grid; gap: 2px; font-size: .9rem; }
.bitso-promo > span:first-child span { color: var(--muted); }
.bitso-promo .btn { flex: none; padding: 8px 14px; font-size: .88rem; }
.bitso-promo img { max-width: 100%; border-radius: 10px; display: block; }
.bitso-promo:hover { border-style: solid; }

/* ---------- Historial ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: rgba(255,255,255,.04); }
.seg button { font: inherit; font-weight: 700; font-size: .88rem; border: 0; background: transparent; color: var(--muted); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink, #fff); }
.h-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.h-stat { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: grid; gap: 6px; }
.h-stat span { color: var(--muted); font-size: .85rem; font-weight: 600; }
.h-stat strong { font: 700 1.45rem/1.1 var(--font-display); }
.h-stat.pos strong { color: var(--pos, #4cc9a6); }
.h-stat.neg strong { color: var(--neg, #ff7b86); }
.h-wins { padding: 22px; margin-bottom: 20px; }
.h-wins-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.h-win-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.h-win { display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.h-win img, .h-win .slot-ph { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--line); display: block; }
.h-rank { font: 800 1.1rem var(--font-display); color: var(--muted); text-align: center; }
.h-win.top1 { outline: 1.5px solid #f5c542; } .h-win.top1 .h-rank { color: #f5c542; }
.h-win.top2 .h-rank { color: #cfd6e0; } .h-win.top3 .h-rank { color: #d99559; }
.h-win-name, .h-win-figs { display: grid; min-width: 0; }
.h-win-name strong, .h-win-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-win-figs { text-align: right; }
.h-win-figs strong { font: 700 1.15rem var(--font-display); }
.h-hunts { padding: 22px; margin-bottom: 20px; }
.h-hunts h2, .h-new h2 { margin-bottom: 10px; }
.h-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.h-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: .82rem; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.h-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.h-table td strong { display: block; }
.h-table td small { display: block; }
.h-table .pos { color: var(--pos, #4cc9a6); font-weight: 700; }
.h-table .neg { color: var(--neg, #ff7b86); font-weight: 700; }
.h-new { margin-bottom: 20px; }
.h-new-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.h-new-card { display: grid; gap: 4px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text); }
.h-new-card img, .h-new-card .slot-ph { width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; background: var(--line); display: block; }
.h-new-card strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-new-card:hover { border-color: var(--accent); }
.h-only { justify-self: start; font-size: .7rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: var(--accent); color: #fff; }
@media (max-width: 560px) { .h-win { grid-template-columns: 26px 44px minmax(0, 1fr); } .h-win-figs { grid-column: 3; text-align: left; } .h-win img, .h-win .slot-ph { width: 44px; height: 44px; } }
.h-new-card .slot-ph { height: auto; }
.h-stats { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }

/* Menú: listas desplegables (Dinámicas) */
.nav-drop { position: relative; }
.nav-drop-btn { font: inherit; display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap; }
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { color: var(--text); background: var(--surface); }
.nav-drop-btn.is-active { color: var(--accent-ink, #fff); background: var(--accent); box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.nav-drop-btn span { font-size: .75em; transition: transform .15s; }
.nav-drop-btn[aria-expanded="true"] span { transform: rotate(180deg); }
.nav-drop-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px; list-style: none; margin: 0; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 94%, #000); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); z-index: 40; }
.nav-drop-btn[aria-expanded="true"] + .nav-drop-menu { display: grid; gap: 2px; }
.nav-drop-menu a { border-radius: 10px !important; }
.nav-drop-menu a[aria-current="page"] { box-shadow: none; }
@media (max-width: 1080px) {
  .nav-drop-btn { pointer-events: none; background: none !important; box-shadow: none !important; color: var(--muted) !important; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px 4px; }
  .nav-drop-btn span { display: none; }
  .nav-drop-menu, .nav-drop-btn[aria-expanded="true"] + .nav-drop-menu { display: grid; position: static; min-width: 0; padding: 0 0 0 8px; border: 0; background: none; box-shadow: none; gap: 2px; }
  .nav-drop { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0; margin: 4px 0; }
}

/* ---------- Wager race: cómo se cuenta el wager ---------- */
.wager-count { padding: clamp(18px, 3vw, 28px); display: grid; gap: 18px; }
.wc-intro { color: var(--muted); font-size: 1.05rem; max-width: 62ch; line-height: 1.55; }
.wc-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.25); }
.wc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; font-size: 1.1rem; }
.wc-row + .wc-row { border-top: 1px solid var(--line); }
.wc-pct { color: var(--muted); font-weight: 800; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.wc-pct strong { font: 800 1.35rem var(--font-display); letter-spacing: 0; margin-right: 6px; text-transform: none; }
.wc-pct.full strong { color: #4cd9a6; }
.wc-pct.half strong { color: #f5c542; }
.wc-pct.low strong { color: #ff8fa3; }
.wc-note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, #f5c542 45%, var(--line)); background: color-mix(in srgb, #f5c542 7%, transparent); }
.wc-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 800 1rem Georgia, serif; color: #f5c542; border: 1.5px solid color-mix(in srgb, #f5c542 60%, transparent); }
.wc-note strong { color: #f5c542; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.wc-note p { margin-top: 4px; color: color-mix(in srgb, var(--text) 85%, var(--muted)); line-height: 1.55; }

/* ---------- Podio: oro, plata y bronce ---------- */
.podium .spot { --medal: #9aa3ad; --medal-2: #5d646c; position: relative; overflow: hidden; }
.podium .spot.first { --medal: #ffd76a; --medal-2: #c8961c; }
.podium .spot.second { --medal: #e8edf2; --medal-2: #8e99a6; }
.podium .spot.third { --medal: #f0a868; --medal-2: #9a5a26; }
.podium .spot.first, .podium .spot.second, .podium .spot.third {
  border: 1.5px solid color-mix(in srgb, var(--medal) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 18%, var(--surface)), var(--surface) 75%);
  box-shadow: 0 0 34px -14px var(--medal);
}
.podium .spot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--medal-2), var(--medal), var(--medal-2)); }
.podium .medal {
  align-self: center; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font: 800 1.7rem/1 var(--font-display); color: #1b1205;
  background: radial-gradient(circle at 32% 28%, #fff8 0 18%, transparent 19%), linear-gradient(145deg, var(--medal), var(--medal-2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--medal) 25%, transparent), 0 8px 22px -8px var(--medal);
}
.podium .first .medal { width: 74px; height: 74px; font-size: 2.2rem; }
.podium .place-label { color: var(--medal); font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.podium .spot .prize-tag { background: color-mix(in srgb, var(--medal) 22%, transparent); color: var(--medal); }
/* Podio: sin círculo; el número va en color de la medalla y el recuadro brilla por fuera */
.podium .medal {
  width: auto !important; height: auto !important; border-radius: 0; box-shadow: none; background: none;
  font: 800 3rem/1 var(--font-display);
  background-image: linear-gradient(180deg, var(--medal), var(--medal-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--medal) 45%, transparent));
}
.podium .first .medal { font-size: 4rem; }
.podium .spot.first, .podium .spot.second, .podium .spot.third {
  overflow: visible;
  border: 1.5px solid var(--medal);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--medal) 35%, transparent),
    0 0 18px -2px color-mix(in srgb, var(--medal) 75%, transparent),
    0 0 46px -6px color-mix(in srgb, var(--medal) 55%, transparent);
}
.podium .spot::before { display: none; }
.podium .spot.first { animation: medal-glow 3s ease-in-out infinite; }
@keyframes medal-glow {
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--medal) 50%, transparent), 0 0 26px 0 color-mix(in srgb, var(--medal) 85%, transparent), 0 0 70px -4px color-mix(in srgb, var(--medal) 60%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .podium .spot.first { animation: none; } }
/* Podio: brillo exterior más discreto */
.podium { gap: 18px; }
.podium .spot.first, .podium .spot.second, .podium .spot.third {
  border-color: color-mix(in srgb, var(--medal) 80%, transparent);
  box-shadow: 0 0 10px -3px color-mix(in srgb, var(--medal) 60%, transparent), 0 0 22px -10px color-mix(in srgb, var(--medal) 45%, transparent);
}
@keyframes medal-glow {
  50% { box-shadow: 0 0 14px -3px color-mix(in srgb, var(--medal) 70%, transparent), 0 0 28px -10px color-mix(in srgb, var(--medal) 55%, transparent); }
}
.wc-pct strong { margin-right: 0; margin-left: 8px; }
.wc-pct strong { display: inline-block; min-width: 3.4em; text-align: right; }

/* ---------- Wager race más compacto (la lista queda más arriba) ---------- */
body:has(.lb-top) .page-head { margin-bottom: 18px; }
body:has(.lb-top) .page-head h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
.lb-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: stretch; }
.lb-top .race-clock { padding: 18px 20px 14px; margin: 0; }
.lb-top .race-clock-top { margin-bottom: 10px; }
.lb-top .race-clock-top > p:first-child { font-size: 1rem; }
.lb-top .clock { gap: 10px; }
.lb-top .clock-unit { gap: 4px; }
.lb-top .clock-num { padding-block: 10px; }
.lb-top .clock-num span { font-size: clamp(2rem, 4.4vw, 3rem); }
.lb-top .clock-label { font-size: .8rem; }
.lb-top .race-end { margin-top: 8px; font-size: .8rem; }
.lb-stats { grid-template-columns: 1fr; margin: 0; align-content: stretch; }
.lb-stats .stat { padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; }
.lb-stats .stat dt { font-size: .8rem; }
.lb-stats .stat dd { font-size: 1.35rem; margin-top: 2px; }
.lb-count-sec { margin-top: 18px; }
.lb-count-sec .section-head { margin-bottom: 8px; }
.lb-count-sec .section-head h2 { font-size: 1.15rem; }
.lb-count-sec .wager-count { padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wc-text { display: grid; gap: 12px; }
.lb-count-sec .wc-intro { font-size: .95rem; line-height: 1.45; }
.lb-count-sec .wc-row { padding: 10px 16px; font-size: 1rem; }
.lb-count-sec .wc-pct strong { font-size: 1.15rem; }
.lb-count-sec .wc-note { padding: 12px 14px; gap: 10px; }
.lb-count-sec .wc-icon { width: 28px; height: 28px; font-size: .9rem; }
.lb-count-sec .wc-note p { font-size: .9rem; line-height: 1.45; }
.lb-count-sec + .section { margin-top: 22px; }
@media (max-width: 860px) {
  .lb-top { grid-template-columns: 1fr; }
  .lb-stats { grid-template-columns: repeat(3, 1fr); }
  .lb-count-sec .wager-count { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .lb-stats { grid-template-columns: 1fr 1fr; } .lb-stats .stat:first-child { grid-column: 1 / -1; } }
.bonus-note { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; border-radius: 12px; max-width: 760px; border: 1px solid color-mix(in srgb, #f5c542 50%, var(--line)); background: color-mix(in srgb, #f5c542 8%, transparent); }
.bonus-note strong { color: #f5c542; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.winners.many { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.winners.many .winner-row { margin: 0; }
.prizes-summary .who strong { color: var(--accent); }

/* Inicio: tarjeta del sorteo junto al wager race */
.home-raffle { display: flex; flex-direction: column; }
.home-raffle #ticket-preview { flex: 1; display: flex; }
.home-raffle #ticket-preview > * { flex: 1; }
.home-ticket { --stub: 150px; height: 100%; }
.home-ticket .body { justify-content: center; gap: 8px; }
.home-ticket h3 { font-size: 1.45rem; }
.ht-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ht-bonus { align-self: flex-start; margin-top: 4px; font-size: .8rem; font-weight: 700; color: #f5c542; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, #f5c542 45%, transparent); background: color-mix(in srgb, #f5c542 8%, transparent); }
.home-ticket .stub .big { font-size: clamp(2.2rem, 4vw, 3rem); }
.home-ticket .stub .big.long { font-size: 1.4rem; line-height: 1.15; }
.home-ticket .stub .small { margin-top: 6px; font-weight: 700; letter-spacing: .04em; }
@media (max-width: 560px) { .home-ticket { --stub: 120px; } }

/* ---------- Guess the balance ---------- */
.gtb-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.gtb-layout .gtb { margin-bottom: 0; }
.gtb-hunt { padding: 22px; }
.gtb-hunt h2 { font-size: 1.2rem; margin-bottom: 12px; }
.gtb-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.gtb-figs div { background: var(--surface); padding: 12px 14px; }
.gtb-figs dt { color: var(--muted); font-size: .8rem; }
.gtb-figs dd { margin: 4px 0 0; font: 700 1.25rem var(--font-display); }
.gtb-hunt a { color: var(--accent); font-weight: 700; }
.gtb-how { padding: 22px; }
.gtb-how ol { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 6px; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
@media (max-width: 860px) { .gtb-layout { grid-template-columns: 1fr; } }
.gtb-col { display: grid; gap: 20px; align-content: start; }
.gtb-layout { margin-bottom: 0; }
.gtb-figs { grid-template-columns: repeat(4, 1fr); }
.gtb-entries { padding: 22px; }
.gtb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 460px; overflow-y: auto; }
.gtb-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.gtb-list .n { color: var(--muted); font-weight: 700; text-align: center; }
.gtb-list .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gtb-list .g { font: 700 1rem var(--font-display); }
.gtb-list li.me { outline: 1.5px solid var(--live); background: color-mix(in srgb, var(--live) 10%, transparent); }
@media (max-width: 560px) { .gtb-figs { grid-template-columns: repeat(2, 1fr); } }
/* Guess the balance: participantes a lo ancho y podio */
.gtb-layout { margin-bottom: 20px; }
.gtb-entries { max-width: 980px; margin: 0 auto 20px; }
.gtb-entries .gtb-head { justify-content: center; text-align: center; }
.gtb-list { max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 12px; }
.gtb-podium-wrap { margin-bottom: 24px; }
.gtb-final { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.gtb-final span { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.gtb-final strong { font: 800 2rem var(--font-display); }
.gtb-wait { margin-bottom: 20px; }

/* ---------- Inicio: banner de YouTube ---------- */
.yt-banner { display: flex; align-items: center; gap: 14px; max-width: 820px; margin: 18px auto 0; padding: 12px 14px 12px 16px; border-radius: 16px; text-decoration: none; color: var(--text);
  border: 1px solid color-mix(in srgb, #ff2a2a 40%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, #ff2a2a 14%, var(--surface)), var(--surface)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .15s, transform .15s; }
.yt-banner[hidden] { display: none; }
.yt-banner:hover { border-color: #ff2a2a; transform: translateY(-1px); }
.yt-play { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; background: color-mix(in srgb, #ff2a2a 22%, transparent); border: 1px solid color-mix(in srgb, #ff2a2a 50%, transparent); }
.yt-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.yt-text strong { font-size: 1rem; }
.yt-text span { color: var(--muted); font-size: .88rem; }
.yt-btn { flex: none; background: #ff2a2a; color: #fff; font-weight: 800; font-size: .9rem; padding: 9px 16px; border-radius: 999px; }
@media (max-width: 560px) { .yt-banner { margin-inline: 0; } .yt-text span { display: none; } }
/* Slot call: tipo de bono y nota */
.bonus-pick { border: 0; padding: 0; margin: 6px 0 0; }
.bonus-pick legend { font-weight: 600; margin-bottom: 6px; }
.seg-pick.three { grid-template-columns: repeat(3, 1fr); }
.seg-pick.three span { padding: 9px 6px; font-size: .9rem; }
.slot-note { display: grid; gap: 6px; font-weight: 600; }
.slot-note .input { font-weight: 400; }
.bonus-tag { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; vertical-align: 1px; background: rgba(255,255,255,.1); color: var(--text); }
.bonus-tag.super { background: color-mix(in srgb, #4fa3ff 30%, transparent); color: #bcdcff; }
.bonus-tag.epico { background: color-mix(in srgb, #b26bff 35%, transparent); color: #e6ccff; }
.bonus-pick .req { color: var(--accent); font-weight: 700; font-size: .85rem; } .slot-note textarea { resize: vertical; min-height: 56px; font: inherit; }

/* ---------- Títulos de página: título con degradado y línea estilizada debajo ---------- */
.page-head { position: relative; padding-bottom: 22px; }
/* Línea: rojo de marca que se desvanece hacia la derecha, con brillo */
.page-head::after { content: ""; position: absolute; left: 14px; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, #ff9a6b 22%, color-mix(in srgb, #ff9a6b 35%, transparent) 55%, transparent 100%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent); }
/* Rombo brillante al inicio de la línea */
.page-head::before { content: ""; position: absolute; left: 0; bottom: -4px; width: 10px; height: 10px; transform: rotate(45deg);
  background: linear-gradient(135deg, #ffb199, var(--accent)); box-shadow: 0 0 12px var(--accent), 0 0 2px #fff; }
.page-head h1 { display: inline-block; padding-bottom: .06em;
  background: linear-gradient(180deg, #fff 25%, #ffb09c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px color-mix(in srgb, var(--accent) 55%, transparent)); }

/* ---------- Bonus hunt: tipo de bono y notas de cada slot ---------- */
.bonus-tag.extremo { background: color-mix(in srgb, #ff5a5a 32%, transparent); color: #ffd0d0; }
.hunt-table .slot-name { display: flex; flex-direction: column; gap: 2px; }
.bonus-extra { color: var(--muted); font-size: .78rem; line-height: 1.3; max-width: 320px; white-space: normal; }

/* ---------- Aviso +18 ---------- */
body.age-locked { overflow: hidden; }
body.age-locked > *:not(.age-gate) { filter: blur(6px); pointer-events: none; user-select: none; }
.age-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, #07040a 72%, transparent); animation: age-in .2s ease-out; }
.age-gate.closing { opacity: 0; transition: opacity .2s; }
@keyframes age-in { from { opacity: 0; } }
.age-card { width: min(460px, 100%); text-align: center; display: grid; gap: 12px; justify-items: center; padding: 30px 26px 24px; border-radius: 20px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent); }
.age-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 800 1.35rem/1 var(--font-display); color: #fff;
  background: linear-gradient(135deg, #ff9a6b, var(--accent)); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); }
.age-card h2 { font-size: 1.35rem; line-height: 1.2; }
.age-card p { color: var(--muted); }
.age-card .age-rg { font-size: .88rem; }
.age-actions { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.age-actions .btn { width: 100%; justify-content: center; text-align: center; }
.age-card small a { color: var(--accent); }

/* ---------- Slider de banners (mismo ancho que el banner de YouTube) ---------- */
.promo-slider { position: relative; max-width: 820px; margin: 18px auto 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); }
.page-head + .promo-slider { margin-top: 0; margin-bottom: 22px; }
.promo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.promo-track::-webkit-scrollbar { display: none; }
.promo-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 820 / 74; }
.promo-slide a, .promo-slide img { display: block; width: 100%; height: 100%; }
.promo-slide img { object-fit: cover; }
.promo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(10,6,14,.55); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.promo-nav.prev { left: 8px; } .promo-nav.next { right: 8px; }
.promo-slider:hover .promo-nav, .promo-nav:focus-visible { opacity: 1; }
.promo-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.promo-dots button { pointer-events: auto; width: 7px; height: 7px; padding: 0; border-radius: 99px; border: 0; background: rgba(255,255,255,.45); cursor: pointer; transition: width .2s, background .2s; }
.promo-dots button[aria-current] { width: 18px; background: #fff; }
@media (hover: none) { .promo-nav { display: none; } }

/* ---------- Probar suerte: ruleta ---------- */
.luck-roulette { margin-bottom: 8px; }
.luck-head h2 { font-size: 1.25rem; }
.roulette-layout { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 28px; align-items: center; margin-top: 18px; }
.roulette-wheel-wrap { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; margin-inline: auto; }
.roulette-wheel { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); will-change: transform; }
.rw-rim { fill: #2a1a12; stroke: #c9a24a; stroke-width: 2; }
.rw-red { fill: #c8262c; } .rw-black { fill: #17121a; } .rw-green { fill: #1f8f4e; }
.rw-red, .rw-black, .rw-green { stroke: #c9a24a; stroke-width: .5; }
.rw-num { fill: #fff; font: 700 7px/1 system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; }
.rw-inner { fill: #24161c; stroke: #c9a24a; stroke-width: 1.5; }
.roulette-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 2; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 20px solid #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.roulette-center { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center; font: 800 clamp(1.6rem, 6vw, 2.4rem)/1 var(--font-display);
  background: radial-gradient(circle at 35% 30%, #3a2630, #160d12); border: 2px solid #c9a24a; color: #fff; pointer-events: none; }
.roulette-center.c-red { background: radial-gradient(circle at 35% 30%, #e64046, #8d1418); }
.roulette-center.c-black { background: radial-gradient(circle at 35% 30%, #3a3340, #0d0a10); }
.roulette-center.c-green { background: radial-gradient(circle at 35% 30%, #2fbf6c, #0f5a30); }
.roulette-side { display: grid; gap: 16px; align-content: center; }
.roulette-result { display: grid; gap: 6px; }
.rr-num { font: 800 clamp(3rem, 9vw, 4.6rem)/1 var(--font-display); }
.rr-num.c-red { color: #ff5a5f; } .rr-num.c-green { color: #3ddc84; } .rr-num.c-black { color: #fff; }
.rr-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.rr-tag { padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.rr-tag.c-red { background: #c8262c; border-color: #c8262c; } .rr-tag.c-black { background: #111; border-color: #444; } .rr-tag.c-green { background: #1f8f4e; border-color: #1f8f4e; }
.roulette-btn { justify-self: start; font-size: 1.05rem; padding: 14px 26px; }
.rr-history-wrap { display: grid; gap: 6px; }
.rr-history { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-chip { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; }
.rr-chip.c-red { background: #c8262c; } .rr-chip.c-black { background: #17121a; border: 1px solid #3a3340; } .rr-chip.c-green { background: #1f8f4e; }
@media (max-width: 700px) {
  .roulette-layout { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .roulette-wheel-wrap { max-width: 250px; }
  .roulette-btn { justify-self: stretch; }
  .rr-tags, .rr-history { justify-content: center; }
}

/* ---------- Probar suerte: slot al azar ---------- */
.luck-slot + .luck-roulette { margin-top: 22px; }
.slot-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 28px; margin-top: 18px; align-items: start; }
.slot-filters { display: grid; gap: 14px; }
.fld-lite { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.check-lite { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: .92rem; cursor: pointer; }
.check-lite input { width: 18px; height: 18px; accent-color: var(--accent); }
.slot-filters .roulette-btn { justify-self: stretch; }
.slot-error:empty { display: none; }
.slot-card { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--well, rgba(0,0,0,.2)); min-height: 230px; }
.slot-art { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 35%, #1a0f14), #120a0e); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.slot-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-q { font: 800 3rem/1 var(--font-display); color: rgba(255,255,255,.75); }
.slot-info { display: grid; gap: 6px; align-content: center; }
.slot-name { font: 800 clamp(1.3rem, 3vw, 1.8rem)/1.15 var(--font-display); }
.slot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.slot-card.shuffling .slot-art { animation: slot-shake .12s linear infinite; }
.slot-card.shuffling .slot-art img { filter: blur(1.5px) saturate(1.3); }
.slot-card.reveal .slot-art { animation: slot-pop .35s cubic-bezier(.2,1.4,.4,1); box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent); }
.slot-card.loading { opacity: .6; }
@keyframes slot-shake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-1.5deg); } 75% { transform: translateX(3px) rotate(1.5deg); } }
@keyframes slot-pop { from { transform: scale(.85); opacity: .4; } }
.slot-hist-wrap { margin-top: 18px; }
.slot-hist { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.slot-mini { flex: 0 0 86px; display: grid; gap: 4px; text-decoration: none; color: var(--text); font-size: .75rem; font-weight: 600; }
.slot-mini img { width: 86px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.slot-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-credit { margin-top: 14px; font-size: .8rem; }
.slot-credit a { color: inherit; }
@media (max-width: 700px) {
  .slot-layout { grid-template-columns: 1fr; }
  .slot-card { grid-template-columns: 110px 1fr; gap: 14px; min-height: 0; }
}

/* ---------- Mi cuenta: link a bonos de Stake ---------- */
.stake-bonus-link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transition: border-color .15s, transform .15s; }
.stake-bonus-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.sb-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.sb-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.sb-text .muted { font-size: .88rem; }
.sb-arrow { flex: none; font-weight: 800; color: var(--accent); font-size: 1.1rem; }