/* ==========================================================================
   La Bolita — hoja de estilos
   Dirección visual tomada de la referencia: fondo casi negro con halo,
   verde neón como color rector, paneles con borde fino y esquinas suaves.
   ========================================================================== */

:root {
  --bg:          #030B08;
  --bg-2:        #061510;
  --panel:       #081C15;
  --panel-2:     #0B2419;
  --line:        #1C4A38;
  --line-soft:   #123227;

  --neon:        #2EE86A;
  --neon-lit:    #4DFF7A;
  --neon-dim:    #17A544;
  --gold:        #E8B84B;
  --gold-soft:   #C9A84B;
  --rojo:        #FF6B6B;

  --ink:         #E4F5EF;
  --ink-2:       #9DBDB2;
  --ink-3:       #64857A;

  --display: "Chakra Petch", system-ui, sans-serif;
  --sans:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Guarda anti-desborde: ningún elemento ancho provoca scroll lateral en móvil. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(46,232,106,.14) 0%, transparent 62%),
    radial-gradient(ellipse 60% 40% at 88% 8%, rgba(232,184,75,.07) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px 60px; }

/* ---------------- Barra superior ---------------- */

.nav { display: flex; align-items: center; gap: 20px; padding: 16px 0 6px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; white-space: nowrap;
}

.brand img {
  height: 28px; width: auto; display: block;
  filter: drop-shadow(0 0 10px rgba(232,184,75,.28));
}
.brand { text-decoration: none; }

.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a {
  color: var(--gold); text-decoration: none; font-size: 13.5px;
  font-weight: 600; padding: 7px 12px; border-radius: 8px;
  font-family: var(--display); letter-spacing: .02em;
}
.nav-links a:hover { color: #F7E8B8; background: rgba(232,184,75,.08); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.net-pill {
  position: relative; overflow: hidden;
  display: none; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; color: var(--gold);
  background: linear-gradient(180deg, rgba(232,184,75,.1), rgba(4,16,12,.5));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232,184,75,.35);
  border-radius: 100px; padding: 7px 14px;
  box-shadow: inset 0 1px 0 rgba(247,232,184,.25);
}
/* Destello que barre la píldora cada tanto */
.net-pill::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(247,232,184,.4), transparent);
  transform: skewX(-20deg);
  animation: brillo 4.5s ease-in-out infinite;
}
@keyframes brillo {
  0%, 70% { left: -60%; }
  85%, 100% { left: 130%; }
}
.net-pill.show { display: flex; }
.net-pill .led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 8px var(--neon);
}
.net-pill.bad { border-color: var(--rojo); color: var(--rojo); cursor: pointer; }
.net-pill.bad .led { background: var(--rojo); box-shadow: 0 0 8px var(--rojo); }

.btn-wallet {
  position: relative;
  font-family: var(--sans); font-weight: 700; font-size: 13.5px;
  color: #2A1E06;
  background: linear-gradient(180deg, #F7E8B8, var(--gold) 55%, #B8912F);
  border: 1px solid rgba(247,232,184,.6);
  border-radius: 100px; padding: 10px 20px; cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(120,80,10,.4),
    0 4px 14px rgba(0,0,0,.4),
    0 0 18px rgba(232,184,75,.28);
  transition: filter .15s, transform .1s;
}
.btn-wallet:active { transform: translateY(1px); }
.btn-wallet.connected { display: inline-flex; align-items: center; gap: 8px; }
.bw-logo { width: 18px; height: 18px; border-radius: 50%; display: block; flex-shrink: 0; }
.bw-addr { font-family: var(--mono); font-size: 12.5px; }
.btn-wallet:hover { filter: brightness(1.09); }
.btn-wallet.connected {
  background: var(--panel); color: var(--neon); border: 1px solid var(--line);
  box-shadow: none; font-family: var(--mono); font-size: 12.5px; font-weight: 500;
}

/* ---------------- Barra de carga superior ---------------- */

.loader {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 999; background: transparent; pointer-events: none;
  opacity: 0; transition: opacity .25s;
}
.loader.on { opacity: 1; }
.loader i {
  display: block; height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent, var(--neon-lit), var(--gold), transparent);
  box-shadow: 0 0 14px var(--neon);
  animation: barrer 1.1s ease-in-out infinite;
}
@keyframes barrer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(430%); }
}

/* ---------------- Barra de estado de la tirada ---------------- */

.drawbar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 4px; padding: 13px 22px;
  border: 1px solid rgba(46,232,106,.28); border-radius: 100px;
}
/* Textura verde de fondo, con desenfoque tipo cristal */
.drawbar::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../img/drawbar-bg.webp") center/cover no-repeat;
  filter: blur(3px) saturate(1.1);
  transform: scale(1.08);
}
/* Velo oscuro para que el texto siga legible (el "cristal") */
.drawbar::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, rgba(4,14,10,.82), rgba(4,14,10,.62) 50%, rgba(4,14,10,.82));
  backdrop-filter: blur(2px);
}
.drawbar > * { position: relative; z-index: 1; }

.db-side { display: flex; align-items: center; gap: 9px; min-width: 0; }
.db-ic { display: grid; place-items: center; color: var(--gold); flex-shrink: 0; }
.db-ic svg { width: 17px; height: 17px; }
.db-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.db-count {
  display: flex; align-items: baseline; gap: 1px; flex-shrink: 0;
}
.dbc-v {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  color: var(--neon-lit); letter-spacing: .02em; min-width: 1.5em;
  text-align: center; font-variant-numeric: tabular-nums;
}
.dbc-s {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--neon-dim); animation: latir 1s steps(2, jump-none) infinite;
}
@keyframes latir { 0%,49% { opacity: 1 } 50%,100% { opacity: .3 } }

.db-right { justify-content: flex-end; }
.db-when {
  font-family: var(--mono); font-size: 11px; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- Banner: el billete con el logo centrado ---------------- */

.hero {
  position: relative; overflow: hidden; display: grid; place-items: center;
  aspect-ratio: 1600 / 500; min-height: 220px; margin-top: 12px;
  border-radius: 0;
}

.hero-bg {
  position: absolute; inset: 0;
  background: url("../img/hero-billete.webp") center/cover no-repeat;
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 100%; height: 100%;
}

.hero-logo {
  width: clamp(210px, 34%, 440px); height: auto;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.7)) drop-shadow(0 0 34px rgba(232,184,75,.32));
}

/* ---------------- Botón de desconectar ---------------- */

.wallet-group { display: flex; align-items: center; gap: 6px; }
.btn-off {
  display: none; width: 36px; height: 36px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 50%; color: var(--ink-3); cursor: pointer; padding: 0;
}
.btn-off.show { display: grid; place-items: center; }
.btn-off svg { width: 17px; height: 17px; }
.btn-off:hover { border-color: var(--rojo); color: var(--rojo); }

/* ---------------- Verso del día ---------------- */

.verso-card {
  position: relative; margin-top: 26px; text-align: center;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 34px 30px 28px; overflow: hidden;
}
.verso-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 76% at 50% 0%, rgba(232,184,75,.15), transparent 68%);
}
.verso-card > * { position: relative; z-index: 1; }

.verso-ic {
  display: block; font-size: 44px; line-height: 1; margin-bottom: 14px;
  filter: drop-shadow(0 0 20px rgba(232,184,75,.55));
}
.verso-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.verso-t {
  font-family: var(--display); font-weight: 600; font-style: italic;
  font-size: clamp(18px, 3vw, 27px); line-height: 1.5;
  color: var(--ink); margin: 0 auto 16px; max-width: 46ch; text-wrap: balance;
}
.verso-meta {
  font-family: var(--mono); font-size: 10.5px; color: var(--gold-soft);
  display: flex; gap: 9px; justify-content: center;
}
.verso-dot { opacity: .5; }

/* ---------------- Secciones ---------------- */

.sec { margin-top: 42px; }

.sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.sec-head h2 {
  font-family: var(--display); font-weight: 700; font-size: 25px;
  margin: 0; white-space: nowrap; letter-spacing: -0.01em;
  background: linear-gradient(100deg, #F7E8B8, var(--gold) 55%, #C9973F);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sec-head::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.sec-note { color: var(--gold-soft); font-size: 14px; margin: 0 0 20px; max-width: 68ch; }

/* ---------------- Modos de juego: tarjetas ilustradas ---------------- */

.modes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-bottom: 34px;
  align-items: start;
}

.mode {
  position: relative; display: block;
  background: transparent; border: none;
  border-radius: 16px; padding: 0; overflow: visible;
  cursor: pointer; font-family: inherit; line-height: 0;
  transition: transform .22s cubic-bezier(.2,.8,.3,1.1), filter .22s, opacity .22s;
}
.mode:hover:not(:disabled) {
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(46,232,106,.18));
}
.mode:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; border-radius: 16px; }
.mode:disabled { opacity: .5; cursor: not-allowed; }

/* SELECCIÓN: la tarjeta elegida se eleva y se ilumina con halo dorado-verde.
   Aparece además una insignia "ELEGIDO" y una marca de intensidad. */
.mode.on {
  transform: translateY(-6px) scale(1.015);
  filter:
    drop-shadow(0 14px 34px rgba(0,0,0,.55))
    drop-shadow(0 0 26px rgba(46,232,106,.5))
    drop-shadow(0 0 40px rgba(232,184,75,.25));
  z-index: 3;
}
/* Cuando hay una elegida, las demás se atenúan para que resalte la elegida */
.modes:has(.mode.on) .mode:not(.on) { opacity: .55; filter: saturate(.85); }

/* Insignia "ELEGIDO" al seleccionar: una barrita dorada DEBAJO de la tarjeta,
   fuera de la imagen, así no choca con el título ni con los muñecos. */
.mode::after {
  content: "✓ ELEGIDO";
  position: absolute; left: 50%; bottom: -13px; z-index: 4;
  transform: translateX(-50%) translateY(6px) scale(.85);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  color: #14210A; white-space: nowrap;
  background: linear-gradient(180deg, #F7E8B8, var(--gold) 60%, #C9982F);
  border-radius: 100px; padding: 5px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  opacity: 0;
  transition: opacity .25s, transform .25s cubic-bezier(.2,.9,.3,1.3);
  pointer-events: none;
}
.mode.on::after { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* La imagen ES la tarjeta (trae su propio bisel). A ancho completo, alineada
   arriba: las tres ocupan el mismo ancho -> misma distancia entre ellas. */
.mode img {
  width: 100%; height: auto;
  object-fit: contain; object-position: center top;
  display: block;
}

/* Terminales es más alta (sombrero). La bajamos a la altura de las otras con
   un scale confirmado (0.985) anclado ARRIBA, y le damos un ancho un pelín
   mayor para que, tras el scale, siga llenando la columna (misma distancia).
   La caja mantiene la misma proporción que las otras para no empujar la fila. */
.mode.es-terminales { aspect-ratio: 900 / 461; overflow: visible; }
.mode.es-terminales img {
  width: 106.952%;
  margin-left: -3.476%;
  margin-top: -4.75%;
  transform-origin: top center;
  transform: scale(0.935);
}


/* Efecto de selección: marco dorado luminoso alrededor de la tarjeta.
   Bonito, notorio, e igual en las tres (no depende de la imagen). */

/* ---------------- Marca tus números: cada uno es una bola ---------------- */

.grid-nums { display: grid; gap: 9px; }
.grid-nums.g10 { grid-template-columns: repeat(10, 1fr); }
.grid-nums.g5  { grid-template-columns: repeat(5, 1fr); }

.num {
  position: relative; aspect-ratio: 1; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border: none; background: transparent;
  transition: transform .14s, filter .14s;
}

/* La bola dorada de fondo */
.num::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/bola-num.webp") center/contain no-repeat;
  filter: saturate(.5) brightness(.62) drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transition: filter .16s;
  z-index: 0;
}

/* El número, negro sobre la bola */
.num .num-n {
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(13px, 2.2vw, 17px);
  color: #1A1206;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}

.num:hover:not(:disabled) { transform: translateY(-3px) scale(1.04); }
.num:hover:not(:disabled)::before { filter: saturate(.85) brightness(.85); }
.num:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; border-radius: 50%; }
.num:disabled { cursor: not-allowed; }

.num.big .num-n { font-size: clamp(20px, 5vw, 30px); }

/* Marcado: la bola brilla en dorado pleno + halo verde */
.num.on { transform: translateY(-2px) scale(1.03); }
.num.on::before {
  filter: saturate(.95) brightness(.92)
          drop-shadow(0 0 9px rgba(46,232,106,.32))
          drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.num.on .num-n { color: #241A06; }

/* Primero del par de un parlé */
.num.pend::before {
  filter: saturate(1) brightness(.95) drop-shadow(0 0 12px rgba(232,184,75,.6));
}

/* Limitado: la bola se apaga y el número queda tenue */
.num.limitado { cursor: not-allowed; }
.num.limitado::before { filter: saturate(.15) brightness(.4) grayscale(.5); }
.num.limitado .num-n { color: #6A5A3A; opacity: .7; }

/* ---------------- Área de importe (boleta) ---------------- */

.slip {
  position: relative; overflow: hidden;
  margin-top: 18px; border-radius: 18px;
  border: 1px solid rgba(232,184,75,.28);
}
.slip-bg {
  position: absolute; inset: 0;
  background: url("../img/importe-bg.webp") center/cover no-repeat;
}
.slip-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,17,12,.72), rgba(5,17,12,.88));
}

.slip-inner { position: relative; z-index: 1; padding: 22px 24px; }

.slip-top {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  margin-bottom: 20px;
}

.slip-amt label {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}

.amt {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(3,11,8,.6); border: 1px solid rgba(232,184,75,.35);
  border-radius: 12px; padding: 4px 14px 4px 4px;
}
.amt input {
  width: 130px; background: transparent; border: none; color: #F7E8B8;
  font-family: var(--display); font-weight: 700; font-size: 30px; padding: 8px 10px;
}
.amt input:focus { outline: none; }
.amt input::placeholder { color: rgba(247,232,184,.3); }
.amt-sym { font-family: var(--mono); font-size: 14px; color: var(--gold); font-weight: 600; }

.quick { display: flex; gap: 6px; margin-top: 11px; }
.quick .q {
  background: linear-gradient(180deg, rgba(232,184,75,.12), rgba(3,11,8,.5));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232,184,75,.3);
  border-radius: 8px; color: var(--gold);
  font-family: var(--mono); font-size: 11px; padding: 6px 12px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(247,232,184,.2);
  transition: all .14s;
}
.quick .q:hover { border-color: var(--gold); background: rgba(232,184,75,.12); }

.slip-info {
  display: flex; flex-direction: column; gap: 7px;
  padding-left: 26px; border-left: 1px solid rgba(232,184,75,.18);
}
.si-row {
  display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--mono); font-size: 12.5px; color: var(--gold-soft, #C9A84B);
}
.si-row span { color: rgba(232,184,75,.7); }
.si-row b { font-family: var(--mono); color: #F7E8B8; font-weight: 600; }
.si-row.max { padding-top: 8px; border-top: 1px solid rgba(232,184,75,.15); margin-top: 3px; }
.si-row.max span { color: var(--gold); }
.si-row.max b { color: var(--neon-lit); font-size: 14px; }

.btn-play {
  width: 100%;
  background: linear-gradient(180deg, var(--neon-lit), var(--neon));
  color: #04180C; border: none; border-radius: 12px;
  font-family: var(--sans); font-weight: 800; font-size: 15px;
  padding: 15px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(46,232,106,.28);
  transition: filter .14s, transform .14s;
}
.btn-play:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn-play:disabled {
  background: rgba(3,11,8,.5); color: rgba(232,184,75,.5);
  border: 1px solid rgba(232,184,75,.22); box-shadow: none; cursor: not-allowed;
}
.btn-play.gate {
  background: linear-gradient(180deg, #F7E8B8, var(--gold));
  color: #2A1E06; box-shadow: 0 4px 18px rgba(232,184,75,.3);
}

.avisos { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.av {
  font-family: var(--mono); font-size: 11px; color: var(--gold);
  background: rgba(232,184,75,.08); border-left: 2px solid var(--gold);
  border-radius: 4px; padding: 7px 11px;
}

/* ---------------- Bombo ---------------- */

.draw {
  margin-top: 16px; position: relative;
  border: 1px solid var(--line); border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(46,232,106,.14), transparent 68%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 30px 22px 26px; text-align: center; overflow: hidden;
}

.balls { display: flex; justify-content: center; gap: 11px; flex-wrap: wrap; margin-bottom: 18px; }

.bola-wrap { display: flex; flex-direction: column; align-items: center; }

.bola {
  position: relative;
  width: 104px; height: 104px;
  display: grid; place-items: center;
  transition: transform .3s, filter .3s;
}
.bola::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/bola-num.webp") center/contain no-repeat;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.5));
}
.bola .bola-n {
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 34px;
  color: #1A1206; text-shadow: 0 1px 0 rgba(255,255,255,.3);
}

.bola.spin { animation: bump .4s infinite; color: var(--ink-3); }

.bola.hit {
  border-color: var(--neon-lit); color: var(--neon-lit);
  background: radial-gradient(circle at 34% 26%, rgba(46,232,106,.3) 0%, var(--panel) 62%, #041B14 100%);
  box-shadow: 0 0 26px rgba(46,232,106,.5);
}

.bola.first { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 26px rgba(232,184,75,.4); }

@keyframes bump {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-9px) }
}

.bola-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px;
}

.draw .name {
  font-family: var(--display); font-weight: 600; font-size: 21px;
  color: var(--gold); margin: 0 0 8px; min-height: 28px;
}
.draw .msg { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.draw .msg.win { color: var(--neon-lit); font-weight: 700; font-size: 18px; }
.draw .msg.lose { color: var(--ink-3); }

/* ---------------- Charada ---------------- */

.charada-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.filtro {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 100px; color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 6px 13px; cursor: pointer;
}
.filtro:hover { border-color: var(--neon-dim); color: var(--ink); }
.filtro.on { background: linear-gradient(180deg,#F7E8B8,var(--gold)); border-color: var(--gold); color: #2A1E06; font-weight: 600; }

.charada { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 7px; }

.ch-item {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 9px 11px;
  display: flex; align-items: center; gap: 10px;
}
.ch-item:hover { border-color: var(--neon-dim); }
.ch-item.dim { opacity: .18; }

.ch-item .n {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--gold); min-width: 26px;
}
.ch-item .nm { font-size: 12.5px; color: var(--gold-soft); line-height: 1.25; }

/* ---------------- Pie ---------------- */

.foot { margin-top: 56px; border-top: 1px solid var(--line-soft); padding-top: 26px; }

.foot-grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }

.foot-btn {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(232,184,75,.1), rgba(4,16,12,.4));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(232,184,75,.35);
  border-radius: 100px; color: var(--gold);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 11px 20px; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(247,232,184,.25),
    0 4px 14px rgba(0,0,0,.35);
  transition: all .15s;
}
.foot-btn:hover {
  border-color: var(--gold); color: #F7E8B8;
  background: linear-gradient(180deg, rgba(232,184,75,.18), rgba(4,16,12,.4));
  box-shadow: inset 0 1px 0 rgba(247,232,184,.35), 0 6px 18px rgba(232,184,75,.2);
}
.foot-btn .ic { font-size: 15px; }

.foot-note {
  text-align: center; font-family: var(--mono); font-size: 11px;
  color: var(--gold-soft); line-height: 1.9;
}

/* ---------------- Ventana modal ---------------- */

.modal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(2,8,6,.82); backdrop-filter: blur(7px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal.open { display: flex; }

.modal-box {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 18px;
  max-width: 660px; width: 100%; max-height: 84vh; overflow-y: auto;
  padding: 28px 30px;
}

.modal-box h3 {
  font-family: var(--display); font-weight: 700; font-size: 25px;
  margin: 0 0 4px;
  background: linear-gradient(100deg, #F7E8B8, var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.modal-box .sub { color: var(--ink-3); font-family: var(--mono); font-size: 11px; margin: 0 0 20px; }
.modal-box h4 { font-family: var(--display); font-size: 16px; margin: 22px 0 8px; color: var(--gold); }
.modal-box p { font-size: 14px; color: var(--ink-2); margin: 0 0 10px; }
.modal-box strong { color: var(--ink); }

.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0; }
.tabla td { padding: 7px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.tabla td:last-child { text-align: right; font-family: var(--mono); color: var(--ink); }
.tabla tr:last-child td { border-bottom: none; }
.tabla tr.res td { color: var(--neon-lit); font-weight: 700; padding-top: 10px; }
.tabla tr.neg td { color: var(--rojo); font-weight: 700; }

.modal-close {
  width: 100%; margin-top: 24px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 100px; color: var(--ink);
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  padding: 12px; cursor: pointer;
}
.modal-close:hover { border-color: var(--neon); color: var(--neon); }

/* ---------------- Aviso flotante ---------------- */

.toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(100px);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 100px; padding: 12px 24px;
  font-size: 13.5px; color: var(--ink);
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  opacity: 0; transition: all .28s; z-index: 900; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.err { border-color: var(--rojo); color: var(--rojo); }

/* ---------------- Pantallas pequeñas ---------------- */

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

/* ================================================================== */
/* Flujo por pasos                                                     */
/* ================================================================== */

.pasos {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}

.paso {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 100px; padding: 9px 14px;
  font-size: 12.5px; color: var(--gold-soft);
}
.paso .p-n {
  width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--line-soft); color: var(--ink-3);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.paso.activo {
  border-color: var(--neon); color: var(--ink);
  box-shadow: 0 0 20px rgba(46,232,106,.16);
}
.paso.activo .p-n { background: var(--neon); color: #04241B; }
.paso.hecho { border-color: var(--neon-dim); color: var(--ink-2); }
.paso.hecho .p-n { background: var(--neon-dim); color: #04241B; }
.paso.hecho .p-n::after { content: "✓"; }
.paso.hecho .p-n { font-size: 0; }
.paso.hecho .p-n::after { font-size: 11px; }

/* ---------------- Bloques del flujo ---------------- */

.bloque {
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--panel); padding: 18px 20px; margin-bottom: 14px;
  transition: opacity .2s, border-color .2s;
}
.bloque[data-estado="espera"] { opacity: .72; }
.bloque[data-estado="activo"] { border-color: var(--neon-dim); }
.bloque[data-estado="hecho"] { border-color: var(--line); }

.bloque-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.bloque-head .b-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--line);
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-2);
}
.bloque[data-estado="activo"] .b-num { background: var(--neon); color: #04241B; }
.bloque[data-estado="hecho"] .b-num { background: var(--neon-dim); color: #04241B; }
.bloque-head h3 {
  font-family: var(--display); font-size: 18px; margin: 0;
  color: var(--gold);
}
.bloque-head .b-hint {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--gold-soft);
}

/* ---------------- Monedas ---------------- */

.monedas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }

.moneda {
  position: relative; display: flex; align-items: center; gap: 11px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 12px 14px; cursor: pointer;
  font-family: inherit; color: var(--ink); text-align: left;
}
.moneda:hover:not(:disabled) { border-color: var(--neon-dim); }
.moneda:disabled { cursor: not-allowed; }
.moneda.on {
  border-color: var(--neon); background: linear-gradient(180deg, rgba(46,232,106,.11), var(--bg-2));
  box-shadow: 0 0 0 1px var(--neon), 0 0 22px rgba(46,232,106,.18);
}
.moneda.tiene .mo-txt i { color: var(--neon); }

.mo-ic img {
  border-radius: 50%;      /* recorta el marco blanco que trae el PNG de USDT */
  transform: scale(1.03);
  display: block;
}
.mo-ic {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; font-size: 16px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.mo-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mo-txt b { font-family: var(--display); font-size: 14px; }
.mo-txt i {
  font-family: var(--mono); font-size: 11px; font-style: normal;
  color: var(--gold-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mo-tick { margin-left: auto; color: var(--neon); font-size: 13px; }

/* ---------------- Selección múltiple ---------------- */

.seleccion { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }

.sel {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--neon-dim);
  border-radius: 100px; padding: 5px 6px 5px 12px;
  font-family: var(--mono); font-size: 11.5px;
}
.sel.fijada { border-color: var(--gold); }
.sel.fuera { border-color: var(--rojo); opacity: .65; }
.sel-k { font-weight: 600; color: var(--ink); }
.sel-m { color: var(--neon); }
.sel-p { color: var(--gold); }
.sel-fix, .sel-x {
  width: 19px; height: 19px; border-radius: 50%; border: none;
  background: var(--line-soft); color: var(--ink-3);
  cursor: pointer; font-size: 10px; line-height: 1; display: grid; place-items: center;
}
.sel-fix:hover { background: var(--gold); color: #2A1E06; }
.sel-x:hover { background: var(--rojo); color: #fff; }

.sel-clear {
  background: transparent; border: 1px dashed var(--line);
  border-radius: 100px; color: var(--ink-3);
  font-family: var(--mono); font-size: 11px; padding: 5px 13px; cursor: pointer;
}
.sel-clear:hover { border-color: var(--rojo); color: var(--rojo); }

/* ---------------- Boleta ---------------- */

.slip { grid-template-columns: auto 1fr auto; align-items: end; }
.slip-amt label { margin-bottom: 7px; }
.amt-sym {
  font-family: var(--mono); font-size: 12px; color: var(--gold);
  align-self: center; margin-left: 2px;
}
.quick { display: flex; gap: 5px; margin-top: 8px; }
.quick .q {
  background: transparent; border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink-3); font-family: var(--mono); font-size: 10.5px;
  padding: 5px 9px; cursor: pointer;
}
.quick .q:hover { border-color: var(--neon-dim); color: var(--neon); }

.slip-info { display: flex; flex-direction: column; gap: 5px; }
.si-row {
  display: flex; justify-content: space-between; gap: 18px;
  font-size: 12.5px; color: var(--ink-3);
}
.si-row b { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.si-row.max b { color: var(--gold); }

.avisos { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.av {
  font-family: var(--mono); font-size: 11px; color: var(--gold);
  background: rgba(232,184,75,.08); border-left: 2px solid var(--gold);
  border-radius: 4px; padding: 6px 10px;
}

/* ---------------- Fecha del sorteo ---------------- */

.draw-when {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}

/* ---------------- Marca del pie ---------------- */

.foot-marca { text-align: center; margin-bottom: 26px; }
.fm-l {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(15px, 2.6vw, 23px); letter-spacing: .14em;
  background: linear-gradient(100deg, #F7E8B8, var(--gold), #F7E8B8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fm-d { color: var(--gold); margin: 0 10px; opacity: .6; }
.fm-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--ink-3); margin-top: 9px;
}

/* ---------------- Pantallas pequeñas ---------------- */

/* ================================================================== */
/* Barra de saldo                                                      */
/* ================================================================== */

.saldo-strip {
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding: 16px 20px;
  background: linear-gradient(100deg, rgba(46,232,106,.06), transparent 55%, rgba(232,184,75,.05)), var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px;
}
.saldo-strip.show { display: flex; }

.ss-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ss-logo {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--panel); object-fit: cover; transform: scale(1.03);
  box-shadow: 0 0 0 1px rgba(232,184,75,.25), 0 2px 8px rgba(0,0,0,.4);
}
.ss-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 4px;
}
.ss-v {
  font-family: var(--display); font-weight: 700; font-size: 26px;
  color: var(--neon-lit); line-height: 1; letter-spacing: -.01em;
}
.ss-dec { font-size: 17px; opacity: .78; }
.ss-sym { font-family: var(--mono); font-size: 12px; color: var(--gold); font-weight: 600; margin-left: 2px; }

/* Parte derecha: solo el valor en dólares, grande y limpio */
.ss-right {
  text-align: right; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding-left: 20px; border-left: 1px solid rgba(232,184,75,.15);
}
.ss-usd {
  font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--gold);
  line-height: 1; letter-spacing: -.01em;
}
.ss-min { display: none; }

/* ================================================================== */
/* Barra de herramientas del selector                                  */
/* ================================================================== */

.picker-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(46,232,106,.05), transparent 60%), #071711;
  border: 1px solid var(--line-soft);
}
.pb-left { font-family: var(--mono); font-size: 11.5px; color: var(--gold-soft); }
.pb-left b { color: var(--gold); font-weight: 600; }
.pb-right { display: flex; gap: 7px; }
.pb-btn {
  background: linear-gradient(180deg, rgba(232,184,75,.08), rgba(4,16,12,.4));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232,184,75,.28); border-radius: 8px;
  color: var(--gold); font-family: var(--sans); font-size: 12px; font-weight: 600;
  padding: 7px 14px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(247,232,184,.18);
  transition: all .14s;
}
.pb-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ================================================================== */
/* Rejilla de números — versión cuidada                                */
/* ================================================================== */

.grid-nums { gap: 7px; }

.num {
  background: linear-gradient(180deg, #0C2118, #061710);
  border: 1px solid var(--line-soft); border-radius: 12px;
  font-family: var(--display); font-weight: 700;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.num:hover:not(:disabled) {
  border-color: var(--neon-dim); color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0,0,0,.45);
}
.num.on {
  background: linear-gradient(180deg, var(--neon-lit), var(--neon));
  border-color: var(--neon-lit); color: #04241B;
  box-shadow: 0 0 0 1px var(--neon-lit), 0 0 24px rgba(46,232,106,.55), 0 6px 16px rgba(0,0,0,.45);
  transform: translateY(-3px) scale(1.02);
}

.num.pend {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(232,184,75,.35);
}

/* ================================================================== */
/* Bombo — solo las cinco bolas, sobre imagen de fondo                  */
/* ================================================================== */

.drum {
  position: relative;
  min-height: 300px; aspect-ratio: 1400 / 435;
  display: grid; place-items: center;
  padding: 4% 6%;
}

/* La imagen ES el marco: trae su propio borde dorado y esquinas redondeadas.
   No le añadimos borde ni velo por encima para no taparlo. */
.drum-bg {
  position: absolute; inset: 0;
  background: url("../img/bombo-bg.webp") center/100% 100% no-repeat;
}

.balls {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  gap: 18px; flex-wrap: wrap;
}

.bola {
  width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 38px;
  color: var(--ink);
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.22) 0%, transparent 44%),
    radial-gradient(circle at 50% 62%, #103029 0%, #0A1F19 54%, #020A08 100%);
  border: 2px solid var(--line);
  box-shadow: inset 0 -10px 24px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.5);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.bola.spin { animation: bump .42s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes bump { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }

/* Primer dígito del Pick 3: se muestra tenue, no es parte del fijo */
.bola.tenue { opacity: .38; }
.bola.tenue::before { filter: saturate(.4) brightness(.6); }

/* El fijo (primera bola) brilla un punto más */
.bola.first::before {
  filter: brightness(1.12) drop-shadow(0 0 22px rgba(232,184,75,.55)) drop-shadow(0 6px 16px rgba(0,0,0,.45));
}

/* Bola ganadora: halo verde */
.bola.hit { transform: scale(1.06); animation: acierto .5s ease; }
.bola.hit::before {
  filter: brightness(1.15) drop-shadow(0 0 30px rgba(46,232,106,.6)) drop-shadow(0 6px 16px rgba(0,0,0,.4));
}
@keyframes acierto { 0% { transform: scale(1) } 45% { transform: scale(1.14) } 100% { transform: scale(1.06) } }

.do-name {
  position: absolute; left: 0; right: 0; bottom: 6%; z-index: 2;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(16px, 2.6vw, 24px); color: var(--gold);
  text-align: center; min-height: 1.2em;
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}
.do-name.win { color: var(--neon-lit); }

/* ---------------- Selector de turno (mediodía / noche) ---------------- */

.turnos {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 14px;
}
.turno-btn {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(232,184,75,.08), rgba(4,16,12,.4));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232,184,75,.28); border-radius: 100px;
  padding: 9px 24px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(247,232,184,.18);
  transition: all .15s;
}
.turno-btn:hover { border-color: var(--gold); color: var(--gold); }
.turno-btn.on {
  color: #2A1E06;
  background: linear-gradient(180deg, #F7E8B8, var(--gold));
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 16px rgba(232,184,75,.3);
}

/* ---------------- Etiqueta de cada bombo (Fijo, Corridos...) ---------------- */

.drum-tag {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
  background: rgba(4,16,12,.55); backdrop-filter: blur(4px);
  border: 1px solid rgba(232,184,75,.3); border-radius: 100px;
  padding: 4px 16px;
}
.drum { position: relative; }

/* ---------------- Bombos apilados (corridos, parlés, candado) ---------------- */

.drum-extra {
  position: relative; overflow: hidden;
  margin-top: 12px; min-height: 150px;
  display: grid; place-items: center; padding: 34px 24px 24px;
  aspect-ratio: auto;
}
.drum-extra .drum-bg {
  position: absolute; inset: 0;
  background: url("../img/bombo-bg.webp") center/100% 100% no-repeat;
}

/* Bolas medianas para corridos y candado */
.balls-sm {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.balls-sm .bola { width: 78px; height: 78px; }
.balls-sm .bola .bola-n { font-size: 26px; }

/* Parlés: parejas de números */
.parles-grid {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  justify-content: center; align-items: center;
}
.parle-par {
  display: flex; align-items: center; gap: 8px;
  background: rgba(4,16,12,.4); backdrop-filter: blur(3px);
  border: 1px solid rgba(232,184,75,.28); border-radius: 100px;
  padding: 6px 8px;
}
.parle-par .bola { width: 56px; height: 56px; }
.parle-par .bola .bola-n { font-size: 19px; }
.parle-sep { color: var(--neon-lit); font-weight: 700; font-size: 16px; }

/* Nota al pie de los resultados oficiales */
.oficial-nota {
  margin-top: 14px; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--gold-soft);
}



/* ================================================================== */
/* Charada desplegable y centrada                                      */
/* ================================================================== */

.charada-sec { text-align: center; }
.sec-head.center { justify-content: center; }
.sec-head.center::after { display: none; }
.sec-note.center { margin-left: auto; margin-right: auto; }

.charada-toggle {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 100px; color: var(--ink-2);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  padding: 12px 24px; cursor: pointer; margin: 4px auto 0;
}
.charada-toggle:hover { border-color: var(--gold); color: var(--gold); }
.charada-toggle .ct-ic { display: grid; place-items: center; transition: transform .28s; }
.charada-toggle .ct-ic svg { width: 17px; height: 17px; }
.charada-toggle[aria-expanded="true"] .ct-ic { transform: rotate(180deg); }
.charada-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }

.charada-panel {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .45s ease, opacity .3s ease, margin .3s;
}
.charada-panel.open { max-height: 3200px; opacity: 1; margin-top: 24px; }

.charada-tools { justify-content: center; }
.charada { text-align: left; }

/* ================================================================== */
/* Iconos del pie                                                      */
/* ================================================================== */

.foot-btn .ic { display: grid; place-items: center; }
.foot-btn .ic svg { width: 17px; height: 17px; }

/* ================================================================== */
/* Selección: iconos en vez de caracteres                              */
/* ================================================================== */

.sel-fix svg, .sel-x svg { width: 11px; height: 11px; }
.mo-tick svg { width: 13px; height: 13px; }

/* ================================================================== */
/* Pantallas pequeñas                                                  */
/* ================================================================== */

/* ---------------- Ajustes del banner en móvil ---------------- */

/* ================================================================== */
/* Sección de números limitados                                        */
/* ================================================================== */

#limitados .sec-note { max-width: 70ch; }

.limitados-vacio {
  padding: 22px; text-align: center; border-radius: 14px;
  border: 1px dashed var(--line); background: var(--panel);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
}

.limitados { display: flex; flex-wrap: wrap; gap: 9px; }

.lim-num {
  position: relative; width: 58px; aspect-ratio: 1;
  display: grid; place-items: center;
}
.lim-num::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/bola-num.webp") center/contain no-repeat;
  filter: saturate(.15) brightness(.42) grayscale(.4)
          drop-shadow(0 0 8px rgba(255,107,107,.4));
}
.lim-num .num-n {
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: #4A3A1A;
}

/* ================================================================== */
/* RESPONSIVE                                                          */
/* ================================================================== */

/* --- Tabletas y móviles anchos --- */
@media (max-width: 900px) {
  .wrap { padding: 0 14px 50px; }

  .nav-links { display: none; }

  .modes { grid-template-columns: 1fr; gap: 12px; }

  .slip { grid-template-columns: 1fr; gap: 16px; }
  .slip-info { order: 2; }
  .btn-play { width: 100%; order: 3; }

  .verso-t { font-size: clamp(17px, 4.5vw, 22px); }
}

/* --- Móviles --- */
@media (max-width: 620px) {
  .wrap { padding: 0 11px 44px; }

  /* Barra superior */
  .nav { gap: 10px; padding: 12px 0 4px; }
  .brand img { height: 26px; }
  .btn-wallet { padding: 8px 11px; font-size: 11.5px; }
  .net-pill { display: none !important; }
  /* Wallet conectada en móvil: SOLO el logo, sin el trozo de dirección */
  .btn-wallet.connected { padding: 9px 12px; }
  .btn-wallet.connected .bw-addr { display: none; }
  .btn-wallet.connected .bw-logo { width: 20px; height: 20px; }

  /* Barra superior: logo a la izquierda (más pequeño), wallet a la derecha,
     sin solaparse. El logo ya no va absoluto para que no lo tape el botón. */
  .nav { position: relative; justify-content: space-between; align-items: center; }
  .brand { position: static; transform: none; flex-shrink: 1; min-width: 0; }
  .brand img { height: 18px; width: auto; max-width: 36vw; object-fit: contain; }
  .btn-wallet { flex-shrink: 0; }

  /* Barra de tirada: apilada y centrada */
  .drawbar {
    flex-direction: column; gap: 6px; text-align: center;
    border-radius: 16px; padding: 12px 16px;
  }
  .db-when { display: none; }
  .dbc-v { font-size: 26px; }

  /* Banner */
  /* El billete NO se recorta: se ve entero y su propia proporción manda */
  .hero { aspect-ratio: 1600 / 500; min-height: 0; }
  .hero-bg { background-size: contain; background-color: #05100C; }
  /* Logo más pequeño en móvil para que encuadre bien dentro del billete */
  .hero-logo { width: 48%; }

  /* Pasos: 2x2 */
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .paso { padding: 8px 11px; font-size: 11.5px; }

  /* Bloques */
  .bloque { padding: 15px 14px; }
  .bloque-head h3 { font-size: 16px; }
  .bloque-head .b-hint { width: 100%; margin-left: 0; order: 3; }

  /* Monedas: dos por fila */
  .monedas { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mo-txt b { font-size: 13px; }

  /* Saldo: apilado pero elegante */
  .saldo-strip { flex-direction: column; align-items: stretch; gap: 12px; }
  .ss-right {
    text-align: left; align-items: flex-start; justify-content: flex-start;
    padding-left: 0; padding-top: 12px;
    border-left: none; border-top: 1px solid rgba(232,184,75,.15);
    width: 100%;
  }
  .ss-usd { font-size: 20px; }

  /* Modos: una tarjeta por fila, más alta */
  .mode { aspect-ratio: 800 / 360; }

  /* NÚMEROS: la parte crítica.
     Terminales (10) -> 5 por fila.  Números (100) -> 5 por fila. */
  .grid-nums.g5  { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .grid-nums.g10 { grid-template-columns: repeat(5, 1fr); gap: 7px; }
  .num .num-n { font-size: 15px; }
  .num.big .num-n { font-size: 24px; }

  /* Picker bar */
  .picker-bar { padding: 11px 13px; }
  .pb-left { width: 100%; }
  .pb-right { width: 100%; }
  .pb-btn { flex: 1; }

  /* Bombo */
  .drum { aspect-ratio: 1400 / 435; padding: 10% 4% 14%; min-height: 0; }
  .drum-tag { top: 9px; font-size: 10px; }
  .balls { gap: 8px; }
  .bola { width: clamp(40px, 15vw, 58px); height: clamp(40px, 15vw, 58px); }
  .bola .bola-n { font-size: clamp(15px, 5.5vw, 22px); }
  .balls { gap: clamp(4px, 1.6vw, 10px); }

  /* Bombos extra (corridos, parlés, candado): mismo comportamiento que el
     fijo para que NO se corten. Altura flexible y bolas responsive. */
  .drum-extra {
    aspect-ratio: auto; min-height: 0;
    padding: 12% 5% 9%;
  }
  .drum-extra .drum-bg { background-size: 100% 100%; }
  .balls-sm { gap: clamp(6px, 2.5vw, 14px); flex-wrap: wrap; }
  .balls-sm .bola {
    width: clamp(46px, 16vw, 78px); height: clamp(46px, 16vw, 78px);
  }
  .balls-sm .bola .bola-n { font-size: clamp(17px, 6vw, 26px); }

  /* Parlés en móvil: que quepan sin cortarse por abajo */
  .parles-grid { gap: clamp(6px, 2vw, 12px); padding-bottom: 4%; }
  .parle-par .bola { width: clamp(38px, 12vw, 56px); height: clamp(38px, 12vw, 56px); }
  .parle-par .bola .bola-n { font-size: clamp(13px, 4.5vw, 19px); }

  /* Área de importe: responsive, el número NO se corta */
  .slip-inner { padding: 18px 16px; }
  .slip-top {
    grid-template-columns: 1fr; gap: 18px; align-items: stretch;
  }
  .slip-amt { min-width: 0; }
  .amt { display: flex; width: 100%; }
  .amt input {
    width: 100%; min-width: 0; font-size: clamp(24px, 7vw, 30px);
  }
  .slip-info {
    padding-left: 0; border-left: none;
    padding-top: 16px; border-top: 1px solid rgba(232,184,75,.18);
  }
  .quick { flex-wrap: wrap; }

  /* Verso */
  .verso-card { padding: 24px 18px 20px; }
  .verso-ic { font-size: 38px; }
  .verso-t { font-size: 17px; }

  /* Charada */
  .charada { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  /* Pie */
  .foot-grid { flex-direction: column; }
  .foot-btn { width: 100%; justify-content: center; }
  .fm-l { font-size: 15px; }

  /* Modales a pantalla casi completa */
  .modal { padding: 12px; }
  .modal-box { padding: 22px 20px; max-height: 88vh; }
  .modal-box h3 { font-size: 22px; }

  /* Selección */
  .seleccion { gap: 6px; }
  .sel { font-size: 11px; }
}

/* --- Móviles estrechos --- */
@media (max-width: 380px) {
  .grid-nums.g10 { gap: 6px; }
  .num .num-n { font-size: 13px; }
  .monedas { grid-template-columns: 1fr; }
  .dbc-v { font-size: 22px; }
}

/* --- Accesibilidad: sin movimiento --- */
@media (prefers-reduced-motion: reduce) {
  *, .bola.spin { animation: none !important; transition: none !important; }
}

/* ================================================================== */
/* Bombos apilados: fijo · corridos · parlés · candado                 */
/* ================================================================== */

/* Selector de turno mediodía / noche */
.turnos {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 14px;
}
.turno-btn {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(232,184,75,.08), rgba(4,16,12,.4));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232,184,75,.3); border-radius: 100px;
  padding: 9px 22px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(247,232,184,.18);
  transition: all .15s;
}
.turno-btn:hover { border-color: var(--gold); color: var(--gold); }
.turno-btn.on {
  color: #2A1E06;
  background: linear-gradient(180deg, #F7E8B8, var(--gold));
  border-color: var(--gold);
}

/* Etiqueta dorada de cada bombo (Fijo, Corridos, Parlés, Candado) */
.drum-tag {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* Los bombos extra comparten el look del principal, algo más bajos */
.drum-extra {
  position: relative; margin-top: 12px;
  min-height: 150px; aspect-ratio: 1400 / 320;
  display: grid; place-items: center;
  padding: 3% 6%;
}
.drum-extra .drum-bg {
  position: absolute; inset: 0;
  background: url("../img/bombo-bg.webp") center/100% 100% no-repeat;
}

/* Bolas más pequeñas para corridos y candado */
.balls-sm { gap: 14px; }
.balls-sm .bola { width: 78px; height: 78px; }
.balls-sm .bola .bola-n { font-size: 26px; }

/* El FIJO: tres dígitos, el primero transparentado */
.bola.fijo-doble { width: auto; min-width: 150px; padding: 0 10px; }
.bola.fijo-doble::before {
  background: url("../img/bola-num.webp") center/contain no-repeat;
  filter: none;
}
.fijo-num {
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 44px;
  color: #1A1206; letter-spacing: -.02em;
  display: inline-flex; align-items: baseline;
}
.fijo-num .head {          /* primer dígito del Pick 3, semitransparente */
  opacity: .32; font-size: 34px; margin-right: 1px;
}

/* Parlés: rejilla de parejas */
.parles-grid {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  justify-content: center; align-items: center;
  padding: 6px 0;
}
.parle-par {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  color: #F7E8B8; text-shadow: 0 2px 8px rgba(0,0,0,.7);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 100px;
  background: rgba(4,16,12,.4); border: 1px solid rgba(232,184,75,.25);
}
.parle-par .sep { color: var(--neon); font-size: 16px; }

/* Nota al pie de los bombos (fecha/hora de la tirada oficial) */
.oficial-nota {
  margin-top: 12px; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--gold-soft);
}

@media (max-width: 620px) {
  /* Bombos extra con ALTURA FLEXIBLE: el fondo se estira, el contenido manda,
     nada se corta ni por los lados ni por abajo. */
  .drum-extra {
    aspect-ratio: auto; min-height: 0;
    padding: 13% 5% 10%;
  }
  .drum-extra .drum-bg { background-size: 100% 100%; }
  .balls-sm { gap: clamp(8px, 3vw, 14px); flex-wrap: wrap; }
  .balls-sm .bola { width: clamp(52px, 18vw, 72px); height: clamp(52px, 18vw, 72px); }
  .balls-sm .bola .bola-n { font-size: clamp(19px, 6.5vw, 24px); }
  .fijo-num { font-size: clamp(30px, 11vw, 44px); }
  .fijo-num .head { font-size: clamp(23px, 8.5vw, 34px); }
  /* Parlés: parejas que se envuelven y NO se cortan por abajo */
  .parles-grid { gap: clamp(6px, 2.5vw, 12px); padding: 4px 0 6px; }
  .parle-par { font-size: clamp(15px, 5vw, 18px); padding: 5px 11px; }
}

/* ================================================================== */
/* Notificaciones                                                      */
/* ================================================================== */

.notif-capa {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none; padding: 0 14px;
}

.notif {
  pointer-events: auto;
  display: flex; align-items: center; gap: 14px;
  width: min(420px, 100%);
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(11,36,25,.82), rgba(4,16,12,.82));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(232,184,75,.4);
  box-shadow:
    inset 0 1px 0 rgba(247,232,184,.25),
    0 12px 40px rgba(0,0,0,.55),
    0 0 24px rgba(46,232,106,.12);
  transform: translateY(-140%); opacity: 0;
  transition: transform .4s cubic-bezier(.2,.9,.3,1.2), opacity .4s;
}
.notif.entra { transform: translateY(0); opacity: 1; }
.notif.sale { transform: translateY(-140%); opacity: 0; }

.notif-fijo {
  flex-shrink: 0; position: relative;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 24px; color: #1A1206;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.notif-fijo::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/bola-num.webp") center/contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(232,184,75,.5));
}
.notif-fijo span { position: relative; z-index: 1; }
.notif-txt { flex: 1; min-width: 0; }
.notif-t {
  font-family: var(--display); font-weight: 700; font-size: 15px; color: #F7E8B8;
  margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-b {
  font-family: var(--mono); font-size: 11.5px; color: var(--neon-lit);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-x {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--gold-soft); font-size: 22px; line-height: 1; padding: 0 4px;
}
.notif-x:hover { color: var(--gold); }

/* ---------------- Interruptor de notificaciones ---------------- */

.notif-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(232,184,75,.06), transparent 60%), var(--panel);
  border: 1px solid var(--line-soft);
}
.nt-txt { display: flex; flex-direction: column; gap: 2px; }
.nt-t { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--gold); }
.nt-b { font-family: var(--mono); font-size: 10.5px; color: var(--gold-soft); }

.nt-switch {
  flex-shrink: 0; position: relative;
  width: 52px; height: 30px; border-radius: 100px; cursor: pointer;
  background: rgba(4,16,12,.6); border: 1px solid rgba(232,184,75,.3);
  transition: all .2s;
}
.nt-switch .nt-dot {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-soft);
  transition: all .22s cubic-bezier(.2,.9,.3,1.2);
}
.nt-switch.on {
  background: linear-gradient(180deg, var(--neon-lit), var(--neon));
  border-color: var(--neon);
  box-shadow: 0 0 16px rgba(46,232,106,.4);
}
.nt-switch.on .nt-dot { left: 27px; background: #04180C; }

/* ---------------- Modal de últimas tiradas ---------------- */

.ult-lista { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 18px; }
.ult-vacio {
  text-align: center; padding: 20px; color: var(--gold-soft);
  font-family: var(--mono); font-size: 12px;
}
.ult-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.ult-cab { display: flex; flex-direction: column; gap: 2px; }
.ult-turno { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--gold); }
.ult-fecha { font-family: var(--mono); font-size: 10px; color: var(--gold-soft); }
.ult-nums { display: flex; align-items: center; gap: 12px; }
.ult-fijo {
  font-family: var(--display); font-weight: 700; font-size: 22px; color: #1A1206;
  background: radial-gradient(circle at 36% 28%, #FFF3CE, var(--gold) 60%, #B8912F);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 12px rgba(232,184,75,.4);
}
.ult-corr { font-family: var(--mono); font-size: 13px; color: var(--neon-lit); }

/* ================================================================== */
/* Sección de información (SEO) — acordeón desplegable */

.info-sec { margin-top: 8px; }

.acordeon {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 760px; margin: 6px auto 0;
}

.acc-item {
  background: linear-gradient(135deg, rgba(11,36,25,.45), rgba(4,16,12,.45));
  border: 1px solid var(--line-soft); border-radius: 13px;
  overflow: hidden; transition: border-color .2s;
}
.acc-item[open] { border-color: rgba(232,184,75,.35); }
.acc-item summary {
  cursor: pointer; list-style: none;
  padding: 16px 18px;
  font-family: var(--display); font-weight: 600; font-size: 14.5px;
  color: var(--gold);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: color .15s;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after {
  content: "+"; flex-shrink: 0;
  font-family: var(--mono); font-size: 20px; font-weight: 400;
  color: var(--gold-soft); transition: transform .25s, color .2s;
  line-height: 1;
}
.acc-item[open] summary::after { transform: rotate(45deg); color: var(--gold); }
.acc-item summary:hover { color: #F7E8B8; }

.acc-cuerpo {
  padding: 0 18px 16px;
  animation: accAbre .25s ease;
}
.acc-cuerpo p {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.65;
  color: var(--gold-soft); margin: 0 0 10px;
}
.acc-cuerpo p:last-child { margin-bottom: 0; }
.acc-cuerpo strong { color: var(--neon-lit); font-weight: 600; }
.acc-cuerpo a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(232,184,75,.35); }
.acc-cuerpo a:hover { color: #F7E8B8; }

@keyframes accAbre {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================== */

.info-sec { margin-top: 8px; }

.info-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-top: 6px;
}

.info-card {
  background: linear-gradient(135deg, rgba(11,36,25,.5), rgba(4,16,12,.5));
  border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 22px 22px 20px;
  transition: border-color .2s, transform .2s;
}
.info-card:hover { border-color: rgba(232,184,75,.3); transform: translateY(-2px); }

.info-card h3 {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--gold); margin: 0 0 10px;
  background: linear-gradient(180deg, #F7E8B8, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.info-card p {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  color: var(--gold-soft); margin: 0;
}
.info-card strong { color: var(--neon-lit); font-weight: 600; }
.info-card a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(232,184,75,.35); }
.info-card a:hover { color: #F7E8B8; }

@media (max-width: 620px) {
  .info-grid { grid-template-columns: 1fr; gap: 12px; }
  .info-card { padding: 18px 16px; }
}

/* ================================================================== */
/* Menú hamburguesa (móvil)                                            */
/* ================================================================== */

.btn-menu {
  display: none; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--bg-2); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.btn-menu span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--gold); transition: all .22s;
}
.btn-menu.on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.btn-menu.on span:nth-child(2) { opacity: 0; }
.btn-menu.on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-movil {
  display: none; flex-direction: column; gap: 2px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s ease, opacity .25s ease, margin .25s;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 14px; margin: 0 0 0;
}
.menu-movil.open { max-height: 320px; opacity: 1; margin: 6px 0 4px; padding: 8px; }
.menu-movil a {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  color: var(--gold); text-decoration: none; padding: 12px 14px;
  border-radius: 10px; transition: background .15s;
}
.menu-movil a:hover { background: rgba(232,184,75,.08); }

/* ================================================================== */
/* Exchange de compra                                                  */
/* ================================================================== */

.ex-box {
  max-width: 620px; padding: 0; overflow: hidden;
  max-height: 90vh; display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 50% 0%, rgba(46,232,106,.05), transparent 55%), #060F0B;
}

/* Cabecera fija */
.ex-top {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.ex-brand { height: 22px; width: auto; }
.ex-tabs { display: flex; gap: 5px; flex: 1; justify-content: center; }
.ex-tab {
  font-family: var(--display); font-weight: 600; font-size: 12.5px;
  color: var(--gold-soft); cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 100px;
  padding: 7px 14px; transition: all .15s; white-space: nowrap;
}
.ex-tab:hover { color: var(--gold); }
.ex-tab.on {
  color: #14210A; background: linear-gradient(180deg, #F7E8B8, var(--gold));
}
.ex-x {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0; margin: 0;
  border-radius: 9px; border: 1px solid var(--line-soft);
  background: rgba(4,16,12,.5); color: var(--gold-soft); font-size: 12px; cursor: pointer;
}
.ex-x:hover { color: var(--gold); border-color: var(--gold); }

/* Zona con scroll */
.ex-scroll { overflow-y: auto; padding: 16px 18px 20px; }

/* Par + precio */
.ex-par { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.ex-par-wrap { position: relative; }
.ex-par-sel {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 8px 12px;
}
.ex-par-sel:hover { border-color: var(--gold); }
.ex-par-logo { width: 32px; height: 32px; border-radius: 50%; }
.ex-par-txt { display: flex; flex-direction: column; text-align: left; }
.ex-par-txt b { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--gold); }
.ex-par-txt small { font-family: var(--mono); font-size: 9px; color: var(--gold-soft); }
.ex-par-caret { color: var(--gold-soft); font-size: 11px; }

.ex-precio-box { flex: 1; min-width: 120px; }
.ex-precio { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--neon-lit); line-height: 1; }
.ex-precio-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ex-precio-usd { font-family: var(--mono); font-size: 12px; color: var(--gold-soft); }
.ex-precio-chg { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.ex-precio-chg.up, .up { color: var(--neon-lit); }
.ex-precio-chg.down, .down { color: #FF5C5C; }

.ex-mmv { display: flex; flex-direction: column; gap: 3px; }
.ex-mmv div { display: flex; justify-content: space-between; gap: 14px; }
.ex-mmv span { font-family: var(--mono); font-size: 10.5px; color: var(--gold-soft); }
.ex-mmv b { font-family: var(--mono); font-size: 11px; }
.ex-mmv #ex-vol { color: #F7E8B8; }

/* Lista desplegable: OCULTA hasta tocar el par, se abre HACIA ABAJO justo
   debajo del selector. Nada de desbordarse a la izquierda. */
.ex-monedas-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  background: #0A1712; border: 1px solid var(--gold); border-radius: 14px;
  padding: 7px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6); width: 420px; max-width: 84vw;
  animation: exPop .18s ease;
}
.ex-monedas-pop[hidden] { display: none; }
@keyframes exPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.exp-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 9px 11px; transition: all .13s;
}
.exp-item:hover { border-color: var(--gold); background: rgba(232,184,75,.06); }
.exp-item img, .exp-txt { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.exp-txt { display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 13px; }
.exp-info { display: flex; flex-direction: column; min-width: 0; }
.exp-info b { font-family: var(--display); font-size: 13px; color: var(--gold); }
.exp-info small { font-family: var(--mono); font-size: 8.5px; color: var(--gold-soft); }

/* Gráfico */
.ex-chart { margin-top: 16px; }
.ex-chart svg { width: 100%; height: 160px; display: block; }
.ex-chart-rangos { display: flex; gap: 4px; justify-content: center; margin-top: 8px; }
.ex-rango {
  font-family: var(--mono); font-size: 10.5px; color: var(--gold-soft);
  background: transparent; border: none; border-radius: 7px; padding: 5px 11px; cursor: pointer;
}
.ex-rango.on { background: var(--bg-2); color: var(--gold); }

/* Libro de órdenes */
.ex-libro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 13px; padding: 12px;
}
.ex-libro-h { font-family: var(--display); font-weight: 600; font-size: 12px; margin-bottom: 7px; }
.ex-libro-col.compra .ex-libro-h { color: var(--neon-lit); }
.ex-libro-col.venta .ex-libro-h { color: #FF5C5C; }
.ex-libro-fila { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; padding: 3px 0; }
.ex-libro-col.compra .px { color: var(--neon-lit); }
.ex-libro-col.venta .px { color: #FF5C5C; }
.ex-libro-fila .qt { color: var(--gold-soft); }

/* Acción: botón grande arriba con degradado verde->rojo */
.ex-accion { margin-top: 18px; text-align: center; }
.ex-comprar-final {
  width: 100%; font-family: var(--display); font-weight: 700; font-size: 16px;
  color: #14210A; padding: 16px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(90deg, #2EE86A 0%, #5FD86A 45%, #E8A85C 55%, #FF5C5C 100%);
  box-shadow: 0 8px 26px rgba(46,232,106,.25); transition: transform .15s, box-shadow .15s;
}
.ex-comprar-final:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(46,232,106,.3); }

.ex-fav-cap {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 600; font-size: 12.5px;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(232,184,75,.12), rgba(232,184,75,.04));
  border: 1px solid rgba(232,184,75,.4); border-radius: 100px;
  padding: 8px 16px; margin: 20px auto 12px; width: fit-content;
}
.ex-fav-cap span {
  display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(232,184,75,.2); font-size: 11px;
}

.ex-populares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ex-pop {
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 6px;
  transition: all .14s;
}
.ex-pop:hover { border-color: var(--gold); transform: translateY(-2px); }
.ex-pop img { width: 26px; height: 26px; border-radius: 50%; }
.ex-pop b { font-family: var(--display); font-size: 12px; color: var(--gold); }

/* Transición al cambiar de pestaña */
.ex-flash { animation: exFlash .32s ease; }
@keyframes exFlash {
  0% { opacity: .35; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Modal de opciones al comprar */
.op-box { max-width: 460px; }
.op-lista { display: flex; flex-direction: column; gap: 9px; margin: 8px 0 16px; }
.op-grupo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.op-cat {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin: 8px 0 2px;
}
.op-item {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: linear-gradient(135deg, rgba(232,184,75,.08), rgba(4,16,12,.4));
  border: 1px solid rgba(232,184,75,.28); border-radius: 12px; padding: 13px 15px;
  transition: all .16s;
}
.op-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.op-item b { font-family: var(--display); font-weight: 700; font-size: 14px; color: #F7E8B8; }
.op-item small { font-family: var(--mono); font-size: 10px; color: var(--gold-soft); }
.op-fee {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.5; color: #E8B84B;
  background: rgba(232,184,75,.08); border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 9px 12px; margin: 4px 0 0;
}

@media (max-width: 620px) {
  .btn-menu { display: flex; }
  .nav-links { display: none; }
  .menu-movil { display: flex; }
  .ex-top { flex-wrap: wrap; }
  .ex-tabs { order: 3; width: 100%; justify-content: space-between; }
  .ex-tab { flex: 1; padding: 8px 6px; }
  .ex-libro { grid-template-columns: 1fr; gap: 10px; }
  /* Lista de monedas en móvil: VERTICAL, una debajo de otra, con scroll */
  .ex-monedas-pop {
    width: 240px; max-width: 78vw; left: 0;
    grid-template-columns: 1fr;
    max-height: 260px; overflow-y: auto;
  }
  .ex-populares { grid-template-columns: repeat(2, 1fr); }
  .ex-accion { text-align: center; }
  /* Precio: que se ajuste al ancho y nunca desborde ni se parta en 3 líneas,
     aunque sea un número con muchos ceros (BabyDoge, EXT...). */
  .ex-par { flex-wrap: nowrap; }
  .ex-precio-box { min-width: 0; flex: 1; overflow: hidden; }
  .ex-precio {
    font-size: clamp(19px, 6vw, 30px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ex-mmv b, #ex-max, #ex-min, #ex-vol { word-break: break-word; }
}

/* Textos del exchange más dorados (no grises) */
.ex-par-txt small, .exp-info small, .ex-mmv span { color: #E8C56A; }
.ex-precio-usd-lbl { font-family: var(--mono); font-size: 11px; color: #E8C56A; }

/* Modal de editar importe (reemplaza el prompt del navegador) */
.importe-box { max-width: 360px; text-align: center; }
.importe-input {
  width: 100%; box-sizing: border-box; margin: 14px 0;
  font-family: var(--mono); font-size: 20px; text-align: center;
  color: var(--gold); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
}
.importe-input:focus { outline: none; border-color: var(--gold); }
.importe-btns { display: flex; gap: 10px; }
.importe-btns .modal-close { flex: 1; margin: 0; }
.importe-ok {
  flex: 1; font-family: var(--display); font-weight: 700; font-size: 14px;
  color: #14210A; background: linear-gradient(180deg, #F7E8B8, var(--gold));
  border: none; border-radius: 100px; padding: 12px; cursor: pointer;
}

/* ================================================================== */
/* PANEL DE GANANCIAS / RETIRAR  (cristal dorado)                      */
/* Aparece entre el banner y "Para jugar" solo cuando hay saldo ganado */
/* ================================================================== */

.win-wrap {
  max-width: 900px;
  margin: 18px auto 4px;
  padding: 0 16px;
}

.win-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 18px 18px 16px;
  /* Cristal: fondo translúcido + desenfoque de lo que hay detrás */
  background:
    linear-gradient(135deg, rgba(232,184,75,.14), rgba(232,184,75,.04) 42%, rgba(11,36,25,.55)),
    rgba(8,28,21,.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(232,184,75,.38);
  box-shadow:
    0 8px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 22px rgba(232,184,75,.06);
}

/* Halo dorado que respira, para que "se vea vivo" cuando hay premio */
.win-glow {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 180px;
  background: radial-gradient(60% 100% at 50% 0%,
    rgba(232,184,75,.28), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  animation: winRespira 3.2s ease-in-out infinite;
}
@keyframes winRespira {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(6px); }
}

.win-head {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 12px;
}
.win-ic {
  color: var(--gold);
  font-size: 16px;
  text-shadow: 0 0 12px rgba(232,184,75,.7);
}
.win-title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13.5px;
  color: #F7E8B8;
}

.win-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cada fila = una moneda con saldo ganado (es un botón: cobra al tocar) */
.win-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  border: 1px solid rgba(232,184,75,.28);
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.win-row:hover {
  transform: translateY(-1px);
  border-color: rgba(232,184,75,.6);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 16px rgba(232,184,75,.12);
}
.win-row:active { transform: translateY(0); }
.win-row:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

.win-row .wr-logo {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.win-row .wr-mid { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.win-row .wr-sim {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: #F7E8B8;
}
.win-row .wr-sub { font-size: 11px; color: var(--ink-3); }

/* El monto ganado, en grande y dorado, en la MONEDA en que se ganó */
.win-row .wr-monto {
  margin-left: auto;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: transparent;
  background: linear-gradient(180deg, #F7E8B8, var(--gold) 55%, #B8912F);
  -webkit-background-clip: text; background-clip: text;
  white-space: nowrap;
}

/* Etiqueta "Cobrar" que aparece a la derecha en hover */
.win-row .wr-cta {
  margin-left: 12px;
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--bg);
  background: linear-gradient(180deg, #F7E8B8, var(--gold) 55%, #B8912F);
  padding: 5px 10px; border-radius: 8px;
  flex-shrink: 0;
}
.win-row.cobrando .wr-cta { opacity: .6; }

.win-note {
  position: relative;
  margin: 12px 2px 2px;
  font-size: 11.5px; color: var(--gold-soft);
  text-align: center;
}

@media (max-width: 620px) {
  .win-card { padding: 15px 14px 13px; border-radius: 16px; }
  .win-row .wr-monto { font-size: 15px; }
  .win-row .wr-cta { display: none; }  /* en móvil el toque ya cobra */
}

/* ================================================================== */
/* MIS APUESTAS (de la tirada actual)                                  */
/* ================================================================== */

.ma-sub {
  font-family: var(--mono); font-size: 12px; color: var(--gold-soft);
  margin: -4px 2px 12px;
}
.ma-lista { display: flex; flex-direction: column; gap: 9px; }

.ma-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 13px;
  background: linear-gradient(180deg, rgba(46,232,106,.05), rgba(255,255,255,0));
  border: 1px solid var(--line);
}
.ma-row .ma-modo {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px;
  flex-shrink: 0;
}
.ma-row .ma-nums { display: flex; gap: 6px; flex-wrap: wrap; }
.ma-row .ma-n {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--neon-lit);
  min-width: 30px; height: 30px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.ma-row .ma-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ma-row .ma-imp { font-size: 11px; color: var(--ink-2); }
.ma-row .ma-premio {
  margin-left: auto; text-align: right; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  color: transparent;
  background: linear-gradient(180deg, #F7E8B8, var(--gold) 55%, #B8912F);
  -webkit-background-clip: text; background-clip: text;
}
.ma-row .ma-premio small {
  display: block; font-family: var(--mono); font-weight: 400;
  font-size: 9.5px; letter-spacing: .06em; color: var(--gold-soft);
  -webkit-text-fill-color: var(--gold-soft);
}
.ma-vacio {
  font-size: 13px; color: var(--ink-3);
  padding: 14px; text-align: center;
  border: 1px dashed var(--line); border-radius: 12px;
}

@media (max-width: 620px) {
  .ma-row { flex-wrap: wrap; }
  .ma-row .ma-premio { margin-left: 0; width: 100%; text-align: left; }
}

/* ================================================================== */
/* TOGGLE CUP / CRIPTO (vista del importe)                             */
/* ================================================================== */
.vista-toggle {
  display: inline-flex; gap: 4px; margin-bottom: 10px;
  background: rgba(0,0,0,.28); border: 1px solid var(--line-soft, rgba(255,255,255,.08));
  border-radius: 10px; padding: 3px;
}
.vt-btn {
  font-family: var(--mono, monospace); font-size: 11.5px; font-weight: 500;
  color: var(--ink-3, #6C8579); background: transparent; border: none;
  border-radius: 7px; padding: 6px 12px; cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.vt-btn:hover { color: var(--ink, #EAF3EE); }
.vt-btn.activo {
  color: #06120C;
  background: linear-gradient(180deg, #F7E8B8, #E8B84B 55%, #B8912F);
  font-weight: 600;
}

/* Aviso de mínimo por número (advertencia) */
.av-warn {
  background: rgba(232,184,75,.1);
  border: 1px solid rgba(232,184,75,.35);
  color: #F7E8B8;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
}
.av-warn b { color: #fff; }

/* ================================================================== */
/* LOGO DEL PESO CUBANO (moneda)                                       */
/* ================================================================== */

/* Moneda mediana dentro del recuadro de importe (sin tocar el layout de .amt,
   que ya está definido arriba y en las media queries). */
.amt-coin {
  width: 42px; height: 42px; flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(232,184,75,.35));
  animation: cupSpin 6s ease-in-out infinite;
}
@keyframes cupSpin {
  0%, 100% { transform: rotateY(0deg); }
  50%      { transform: rotateY(180deg); }
}
/* Cuando la vista es cripto, se oculta la moneda CUP */
.amt.cripto .amt-coin { display: none; }

/* Moneda en el botón del toggle */
.vt-coin {
  width: 16px; height: 16px; vertical-align: middle;
  margin-right: 2px; margin-top: -2px;
}

/* Icono pequeño inline (junto a textos, si hace falta) */
.cup-ic {
  width: 14px; height: 14px; vertical-align: middle;
  display: inline-block;
}

/* --- Ajuste del menú superior: enlaces en una sola línea y wallet sin encimarse --- */
.nav { flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; }
.nav-right { flex-shrink: 0; }
.nav-links { flex-shrink: 1; min-width: 0; }

/* --- Menú robusto: hamburguesa hasta 1024px; barra apretada por encima --- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .btn-menu { display: flex; }
  .menu-movil { display: flex; }
}
@media (min-width: 1025px) {
  .nav { flex-wrap: nowrap; gap: 14px; }
  .nav-links { display: flex; flex-shrink: 1; min-width: 0; gap: 2px; }
  .nav-links a { white-space: nowrap; font-size: 13px; padding: 6px 10px; }
  .nav-right { flex-shrink: 0; }
  .brand { flex-shrink: 0; }
}

/* ══════════════════════════════════════════════════════════════
   BARRAS DE DESPLAZAMIENTO
   Sin esto, el navegador pinta la barra gris del sistema —con sus
   flechitas arriba y abajo— en cada ventana que tenga scroll:
   Academy, Prize Pool, Market, Perfil. Desentona con todo lo demás.
   Aquí va una fina, dorada y discreta, en toda la aplicación.
   ══════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 184, 75, .3) transparent;
}
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(232, 184, 75, .3);
  border-radius: 20px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(232, 184, 75, .5); }
*::-webkit-scrollbar-corner { background: transparent; }
/* Las flechitas de arriba y abajo: fuera. Son del sistema, no encajan con
   nada, y en las ventanas se salían del borde redondeado. Nadie las usa:
   la gente arrastra o hace scroll. */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   LAS FLECHITAS DE LOS CAMPOS NUMÉRICOS
   Al tocar las barras de desplazamiento con el selector universal (*),
   los navegadores móviles recalculan también los botones de los campos
   de número: salían enormes y desplazados hacia abajo. Aquí se fijan a
   un tamaño concreto y centrados.
   ══════════════════════════════════════════════════════════════ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  appearance: auto;
  width: 16px;
  height: auto;
  align-self: stretch;
  margin: 0;
  opacity: 1;
  position: relative;
  transform: none;
}
input[type="number"] { -moz-appearance: textfield; }
@media (max-width: 760px) {
  /* En el móvil no aportan nada: se escribe con el teclado, y el dedo
     nunca acierta en una flecha de 8px. Se quitan y el campo respira. */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
    margin: 0;
  }
}

/* Las barras que solo sirven para deslizar con el dedo (pestañas,
   listas de monedas) no necesitan barra visible: estorba. */
.c-tabs, .bot-tabs, .cm-lista, .mk-tabs, .ap-tabs, .ad-tabs, .np-chat__mnu {
  scrollbar-width: none;
}
.c-tabs::-webkit-scrollbar, .bot-tabs::-webkit-scrollbar,
.cm-lista::-webkit-scrollbar, .mk-tabs::-webkit-scrollbar,
.ap-tabs::-webkit-scrollbar, .ad-tabs::-webkit-scrollbar { display: none; }