/* ============================================================================
   Gusanito del Bosque — visual system ported from the "snakequest / Mythic
   Snake" design (The Enchanted Glade): warm birch glass over deep forest,
   pale-gold glow + berry-pink + mystic-purple accents, Satoshi + JetBrains
   Mono. Applied onto OUR existing class names so no HTML/JS changes are needed.
   Shared by the game overlays (index.html) and the admin panel (admin/).
   ============================================================================ */
:root {
  /* native widgets (select dropdowns, scrollbars, autofill) render DARK —
     without this Chrome paints the open <select> list white and the light
     option text becomes unreadable */
  color-scheme: dark;
  /* forest */
  --forest-900: #0a120a; --forest-800: #0f1a0f; --forest-700: #1a2a1a; --forest-600: #253a25;
  --forest-500: #3a553a; --forest-400: #5a7a5a; --forest-300: #7a9a6a; --forest-200: #a0ba90;
  /* birch (warm cream text/surfaces) */
  --birch-50: #f5f0e8; --birch-100: #ece3d5; --birch-200: #e8ddd0; --birch-300: #d4c5a9; --birch-400: #b8a890;
  /* glow (pale gold) */
  --glow-200: #faf0c0; --glow-300: #f5e8a0; --glow-400: #edd880; --glow-500: #dcc860;
  /* berry (pink) + mystic (purple) */
  --berry-200: #f5c0e0; --berry-300: #e8a0c8; --berry-400: #d080a8;
  --mystic-200: #d0c0f0; --mystic-300: #b8a0e8; --mystic-400: #9880d0;
  /* glass */
  /* DARK frosted glass so bright text reads with strong contrast */
  --glass: rgba(16, 28, 20, 0.52);
  --glass-light: rgba(24, 40, 28, 0.60);
  --glass-hover: rgba(38, 58, 42, 0.70);
  --glass-bd: rgba(150, 214, 162, 0.30);
  --glass-bd-hover: rgba(180, 238, 190, 0.55);
  --glass-shadow: rgba(0, 0, 0, 0.5);

  --ink: #f1f6ec;          /* bright cream text */
  --muted: #b4cea6;        /* light sage — readable labels */
  --faint: #88a679;

  --r: 22px; --r-sm: 14px; --r-pill: 999px;
  --t: .3s cubic-bezier(.4, 0, .2, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --glass-blur: blur(24px) saturate(1.3);

  --font-head: "Satoshi", "Inter", system-ui, sans-serif;
  --font-body: "Satoshi", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

@keyframes twinkle { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes drift { from { transform: translateY(8px) } to { transform: translateY(-16px) } }
@keyframes ov-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes card-pop { from { transform: translateY(12px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- overlay scrim (translucent so the blurred forest shows through) ---------- */
.ov-scrim {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  background:
    radial-gradient(60% 45% at 50% 6%, rgba(245, 232, 160, .10), transparent 70%),
    radial-gradient(55% 45% at 84% 94%, rgba(232, 160, 200, .08), transparent 70%),
    rgba(8, 15, 8, .58);
  backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
  animation: ov-in .3s ease;
}
/* fireflies: warm gold / berry / mystic motes twinkling behind the glass */
.ov-scrim::before, .ov-scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ov-scrim::before {
  background-image:
    radial-gradient(circle 2px at 15% 72%, rgba(245, 232, 160, .95), transparent 60%),
    radial-gradient(circle 1.6px at 78% 40%, rgba(232, 160, 200, .85), transparent 60%),
    radial-gradient(circle 2px at 45% 88%, rgba(245, 232, 160, .8), transparent 60%),
    radial-gradient(circle 1.4px at 90% 80%, rgba(184, 160, 232, .8), transparent 60%),
    radial-gradient(circle 1.6px at 30% 26%, rgba(245, 232, 160, .7), transparent 60%);
  animation: twinkle 5.5s ease-in-out infinite, drift 22s linear infinite;
}
.ov-scrim::after {
  background-image:
    radial-gradient(circle 1.5px at 62% 66%, rgba(245, 232, 160, .85), transparent 60%),
    radial-gradient(circle 2px at 24% 52%, rgba(184, 160, 232, .7), transparent 60%),
    radial-gradient(circle 1.4px at 84% 20%, rgba(232, 160, 200, .8), transparent 60%),
    radial-gradient(circle 1.8px at 8% 40%, rgba(245, 232, 160, .7), transparent 60%);
  animation: twinkle 7s ease-in-out infinite 1.2s, drift 30s linear infinite reverse;
}

/* ---------- glass panel ---------- */
.clay-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 432px; max-height: 92vh; overflow-y: auto;
  box-sizing: border-box; padding: 26px 22px;
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 245, 235, .3); border-radius: var(--r);
  box-shadow: 0 8px 40px var(--glass-shadow), 0 0 40px rgba(245, 232, 160, .06),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  color: var(--ink);
  animation: card-pop .34s var(--bounce);
}
.clay-card::-webkit-scrollbar { width: 8px }
.clay-card::-webkit-scrollbar-thumb { background: var(--forest-500); border-radius: 999px }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .clay-card { background: #1c2a1c } .ov-scrim { background: rgba(8, 15, 8, .9) }
}

/* ---------- phones/tablets: no backdrop blur ----------
   backdrop-filter is the single most expensive effect on mobile GPUs: the
   full-screen scrim + card re-blur the animating forest/fireflies EVERY frame
   (jank, heat, battery). Swap for more opaque flat surfaces — same mood,
   a fraction of the GPU cost. Desktop (fine pointer) keeps the real glass. */
@media (hover: none) and (pointer: coarse) {
  .ov-scrim {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background:
      radial-gradient(60% 45% at 50% 6%, rgba(245, 232, 160, .10), transparent 70%),
      radial-gradient(55% 45% at 84% 94%, rgba(232, 160, 200, .08), transparent 70%),
      rgba(8, 15, 8, .78);
  }
  .clay-card {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(22, 36, 26, .94);
  }
}

/* ---------- typography (Satoshi display + JetBrains Mono labels) ---------- */
.clay-card h1, .clay-card h2, .titlebig, .big {
  font-family: var(--font-head); font-weight: 700; color: var(--birch-50); margin: 0; letter-spacing: -.01em;
}
.clay-card h1 { font-size: clamp(27px, 6.5vw, 36px); text-align: center; margin: 2px 0 4px }
.clay-card h2 { font-size: 22px; text-align: center; margin: 2px 0 12px }
.titlebig, .big { font-size: clamp(32px, 8vw, 48px); text-align: center; margin: 6px 0 }
.linkrow { text-align: center; margin-top: 14px }
.sub { text-align: center; color: var(--birch-300); margin: 0 0 18px; font-size: 14.5px; line-height: 1.55 }
.mid { text-align: center; font-size: 18px; color: var(--birch-200); margin: 6px 0 }

/* ---------- buttons: warm glass, colour comes from border + hover glow ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  display: block; width: 100%; box-sizing: border-box; margin: 10px 0; padding: 14px 16px;
  border: 1px solid var(--glass-bd); border-radius: var(--r-sm); cursor: pointer;
  /* no backdrop-filter: the button sits on the already-glassy card, so blurring
     its backdrop is invisible — it only burned GPU (one layer per button) */
  background: var(--glass);
  color: var(--birch-100); box-shadow: 0 8px 32px var(--glass-shadow);
  transition: all var(--t); min-height: 50px;
}
.btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12) 0%, transparent 50%, rgba(255, 255, 255, .05) 100%) }
.btn:hover { background: var(--glass-hover); border-color: var(--glass-bd-hover); transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 20px rgba(245, 232, 160, .1) }
.btn:active { transform: translateY(0) scale(.98) }
.btn:focus-visible { outline: none; border-color: rgba(245, 232, 160, .6);
  box-shadow: 0 0 0 3px rgba(245, 232, 160, .3), 0 8px 32px var(--glass-shadow) }
.btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: 0 8px 32px var(--glass-shadow) }
/* primary = enchanted-green glow (the "Play Now" CTA) */
.btn.primary { border-color: rgba(160, 232, 150, .45); color: var(--birch-50) }
.btn.primary:hover { border-color: rgba(160, 232, 150, .7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(120, 224, 148, .28) }
/* green alias */
.btn.green { border-color: rgba(160, 232, 150, .4) }
.btn.green:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(120, 224, 148, .22) }
/* ghost = plain frosted glass */
.btn.ghost { background: rgba(255, 245, 235, .06); font-weight: 600 }
/* danger = soft berry-red glass */
.btn.danger { border-color: rgba(232, 130, 130, .4) }
.btn.danger:hover { border-color: rgba(232, 130, 130, .7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(224, 110, 100, .25) }
/* warn = pale-gold glow */
.btn.warn { border-color: rgba(245, 232, 160, .45) }
.btn.warn:hover { border-color: rgba(245, 232, 160, .7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(245, 232, 160, .28) }
.btn.sm { display: inline-block; width: auto; margin: 3px; padding: 8px 13px; font-size: 13.5px;
  min-height: 0; border-radius: 11px; box-shadow: 0 4px 16px var(--glass-shadow) }
a.btn { text-decoration: none; text-align: center }
.btn.sm:hover { transform: translateY(-1px) }

/* ---------- fields (glass-input, gold focus) ---------- */
.field { margin: 13px 0 }
.field label, label { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; font-weight: 500 }
.field input, input, select {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px;
  font-family: var(--font-body); color: var(--birch-100);
  background: rgba(255, 245, 235, .06);
  border: 1px solid rgba(255, 245, 235, .15); border-radius: 10px;
  transition: all .2s; outline: none;
}
.field input::placeholder, input::placeholder { color: var(--faint) }
/* the open dropdown list itself (belt and suspenders on top of color-scheme) */
select option { background-color: #16241a; color: var(--birch-100) }
.field input:focus, input:focus, select:focus {
  border-color: rgba(245, 232, 160, .5); box-shadow: 0 0 16px rgba(245, 232, 160, .1);
}
.field .hint { font-size: 12px; color: var(--faint); margin-top: 4px; font-family: var(--font-mono) }

/* ---------- bits ---------- */
.msg { min-height: 18px; text-align: center; font-size: 14px; margin: 10px 0; color: var(--berry-300);
  font-family: var(--font-body); font-weight: 600 }
.msg.info, .msg.ok { color: var(--glow-300) }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.row.between { justify-content: space-between }
.grow { flex: 1 }
.pill { background: var(--glass);
  border: 1px solid var(--glass-bd); border-radius: var(--r-pill); padding: 7px 15px; font-weight: 700; font-size: 14px }
.count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--glow-300); font-size: 20px; letter-spacing: -.02em }
.cd-box { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0 16px; padding: 16px 14px;
  background: radial-gradient(circle at 50% 0, rgba(245, 232, 160, .24), transparent 72%), var(--glass);
  border: 1.5px solid rgba(245, 232, 160, .5); border-radius: var(--r-sm); box-shadow: 0 0 26px rgba(245, 232, 160, .16) }
.cd-label { font-family: var(--font-mono); font-size: 14.5px; font-weight: 800; letter-spacing: .02em;
  color: #f5e8a0; text-align: center; text-shadow: 0 0 12px rgba(245, 232, 160, .3) }
.cd-box .count { font-size: 42px; text-shadow: 0 0 24px rgba(245, 232, 160, .4) }
.link { background: none; border: 0; color: var(--glow-300); cursor: pointer; font-size: 14px;
  font-family: var(--font-body); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
.link:hover { color: var(--glow-200) }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px }
.topbar .who { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted) }

/* ---------- leaderboard (glass rows, mono headers) ---------- */
.lb { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin: 12px 0; font-size: 14.5px }
.lb th { font-family: var(--font-mono); color: var(--muted); text-align: left; padding: 6px 10px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 500 }
/* no per-cell backdrop-filter: 20 rows × 4 cols = 80 blur layers that melted
   phone GPUs; over the card the blur was invisible anyway */
.lb td { padding: 11px 10px; background: var(--glass);
  font-variant-numeric: tabular-nums }
.lb td.r { width: 40px; font-family: var(--font-mono); color: var(--glow-300); font-weight: 700 }
.lb td.t { text-align: right; font-family: var(--font-mono); font-weight: 700 }
.lb tr td:first-child { border-radius: 10px 0 0 10px }
.lb tr td:last-child { border-radius: 0 10px 10px 0 }
.lb tr.me td { background: rgba(245, 232, 160, .14); color: var(--birch-50); font-weight: 700 }
.lb tr.me td.r { color: var(--glow-200) }
/* separador antes de la fila "tú" cuando el jugador queda fuera del top mostrado */
.lb tr.lb-gap td { background: transparent; text-align: center; color: var(--muted);
  padding: 1px 0 3px; font-family: var(--font-mono); letter-spacing: 4px; font-size: 15px }
.you-tag { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #1c2a1c;
  background: var(--glow-300); border-radius: 999px; padding: 1px 7px; vertical-align: middle }
.you-note { text-align: center; margin: 10px 0 2px }

/* ---------- ranking v2: filas tipo tarjeta (puesto en círculo, avatar, premio, tiempo grande) ---------- */
.lb2 { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px }
.lb2-row { display: flex; align-items: center; gap: 11px; padding: 10px 13px;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 16px }
.lb2-rank { flex: none; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 13.5px;
  background: rgba(255, 255, 255, .06); color: var(--muted) }
.lb2-row.rank-1 .lb2-rank { background: linear-gradient(145deg, #ffdf6b, #e8a600); color: #3a2a00;
  box-shadow: 0 0 16px rgba(255, 200, 60, .5) }
.lb2-row.rank-2 .lb2-rank { background: linear-gradient(145deg, #eef2f5, #a8b4bc); color: #2a3238 }
.lb2-row.rank-3 .lb2-rank { background: linear-gradient(145deg, #e2a970, #b06a2c); color: #3a1e00 }
.lb2-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 999px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-bd) }
.lb2-av .lb2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.lb2-av .lb2-ph { font-size: 19px; opacity: .65 }
/* columna derecha: nombre (línea 1) + premio/tiempo (línea 2) */
.lb2-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px }
.lb2-name { font-weight: 600; color: var(--birch-50); font-size: 15.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lb2-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.lb2-prize { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #9ef07a; background: rgba(120, 224, 120, .12); border: 1px solid rgba(120, 224, 120, .25);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap }
.lb2-score { font-family: var(--font-mono); font-weight: 800; font-size: 21px; color: #9ef07a;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(120, 224, 120, .35); white-space: nowrap }
.lb2-row.me { background: rgba(245, 232, 160, .14); border-color: rgba(245, 232, 160, .42) }
.lb2-row.me .lb2-score { color: var(--glow-200); text-shadow: 0 0 16px rgba(245, 232, 160, .4) }
/* MEJORES JUGADAS. Misma fila del ranking, con otro reparto: arriba el nombre y el monto
   ganado (a la derecha), y abajo la fecha SOLA, en texto tenue — no es un premio por
   puesto, es cuándo pasó. La fecha va en su renglón porque al lado del monto no cabía
   ("Hoy, 30 de septiembre a las 12:42 p.m" son 37 caracteres). El que cede espacio es el
   nombre; el dinero no se recorta nunca. */
.lb2-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.lb2-top .lb2-name { min-width: 0 }
.lb2-when { display: block; font-size: 11.5px;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lb2-score.money { flex: none; color: #ffd76b; text-shadow: 0 0 16px rgba(255, 200, 80, .35) }
.lb2-gap { text-align: center; color: var(--muted); letter-spacing: 4px;
  font-family: var(--font-mono); font-size: 15px; padding: 1px 0 3px }
/* "Ver más" en Últimas competencias: desplegable con el top 20 */
.rc-more { display: block; margin: 8px auto 0; font-size: 13px }
.rc-full { display: none }
.rc-full.open { display: block; margin-top: 8px }
.rc-lb { gap: 6px }
.rc-lb .lb2-row { background: rgba(255, 255, 255, .045); padding: 7px 10px; border-radius: 12px }
.rc-lb .lb2-score { font-size: 17px }
@media (max-width: 360px) {
  .lb2-name { font-size: 14.5px } .lb2-score { font-size: 19px }
  .lb2-prize { font-size: 11px; padding: 3px 7px }
}

/* ---------- MONEDITAS: del saldo al botón, al cambiar $2 por un ticket ----------
   Se dibujan en CSS y no con una imagen: son diez, y diez peticiones (o diez copias de
   un webp escalado) por un adorno de un segundo no se pagan. Un degradado radial con el
   brillo arriba a la izquierda ya lee como moneda.
   La capa es `fixed` con pointer-events:none, así que nunca tapa ni intercepta un toque
   —importante, porque el jugador está tocando justo el botón al que van—. El z-index va
   por encima de la tarjeta (1) y por debajo del chat (100). */
.mon-capa { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden }
/* LA MONEDA ES EL DIBUJO QUE YA USA EL JUEGO (assets/ui/ic_dolar.webp), el mismo que sale
   en la capsula del SALDO. Antes la dibujaba en CSS con degradados, y aunque quedaba
   pasable era una segunda version de algo que ya existia: el jugador ve esa moneda en el
   menu, asi que la que vuela tiene que ser ESA y no una parecida.
   36 px, y el "$" viene dentro de la imagen — el marcado ya no pone texto. */
.mon {
  position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  background: url("assets/ui/ic_dolar.webp?v=1") center/contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .4));
  will-change: transform, opacity;
}
/* EL BOTON DE CONVERTIR BAJA. Pedido del dueño: pegado a las cifras, el viaje de las
   monedas era de 104 px y se acababa antes de empezar. Con este aire el recorrido pasa de
   104 a ~265 px y se ve de donde sale el dinero.
   EL TOPE EN vh NO ES ADORNO: 190 px fijos caben en un telefono de 812 de alto, pero en
   uno de 568 empujarian el boton fuera de la pantalla — y las monedas volarian hacia un
   destino que no se ve. Con `min()` el aire se encoge solo en las pantallas cortas.
   Solo afecta a ESE boton: cuando el jugador tiene tickets esta escondido y el de jugar
   queda donde siempre. */
/* EL AIRE YA NO ES DE ESTE BOTON: lo pone `.premio-slot`, el contenedor que envuelve a la
   notificacion del premio y a los tres botones (vistas-bosque.css). Esta regla se queda
   porque es la que quito el margen de aqui, pero OJO — es un selector de ID y le gana a
   cualquier `.clase` que intente devolverle el margen al boton. Ese fue justamente el bug:
   una clase `.enmedio` perdia contra esta linea y el boton se subia 118 px. Si algun dia
   hace falta separar este boton, el sitio es `.premio-slot`, no aqui. */
#r-canje { margin-top: 0 }

/* ---------- EL TICKET QUE SE GASTA: vuela al boton y se parte a la mitad ----------
   Se usa el MISMO dibujo del ticket que el resto del juego (assets/ui/ic_ticket.webp) y no
   uno nuevo: el jugador ya lo tiene asociado. Las dos mitades son dos cajas de media
   anchura, cada una con la imagen COMPLETA de fondo corrida a su lado — asi el corte cae
   exactamente por el medio y encajan sin costura mientras el ticket esta entero.
   La proporcion del dibujo es 1.20 de ancho contra alto (la misma que usa .bq-costo::after),
   asi que 48x40 no lo estira. */
.tk-vuela {
  position: absolute; width: 48px; height: 40px; margin: -20px 0 0 -24px;
  will-change: transform, opacity; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
}
.tk-mitad {
  position: absolute; top: 0; width: 24px; height: 40px; overflow: hidden;
  background-image: url("assets/ui/ic_ticket.webp?v=1"); background-repeat: no-repeat;
  background-size: 48px 40px; will-change: transform, opacity;
}
.tk-mitad.izq { left: 0; background-position: 0 0 }
.tk-mitad.der { left: 24px; background-position: -24px 0 }

/* el monto que flota sobre el saldo: rojo cuando sale dinero, verde cuando entra */
.mon-menos {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-weight: 900; font-size: 34px; white-space: nowrap;
  /* rojo mas VIVO y con mas halo: sobre el verde oscuro del bosque un rojo apagado se
     hunde. El #ff7063 anterior tiraba a salmon; este es rojo de verdad y el halo lo hace
     leer luminoso sin perder el contorno oscuro que lo separa del fondo. */
  color: #ff3e2d;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 10px rgba(255, 62, 45, .9),
    0 0 26px rgba(255, 62, 45, .55);
  will-change: transform, opacity;
}
.mon-menos.mas {
  color: #7dff5c;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 10px rgba(125, 255, 92, .85),
    0 0 26px rgba(125, 255, 92, .5);
}

/* ---------- foto de perfil en la bienvenida ---------- */
.me-avwrap { position: relative; width: 76px; height: 76px; margin: 2px auto 4px }
.me-av { width: 76px; height: 76px; border-radius: 999px; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--glass-bd) }
.me-av .lb2-ph { font-size: 34px; opacity: .6 }
.me-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.me-av-cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 999px;
  border: 2px solid var(--forest-800); background: var(--glow-400); color: #2a2000; font-size: 13px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 }
.me-av-cam:hover { background: var(--glow-300) }
.av-rm { display: block; margin: 0 auto 2px; font-size: 12px; color: var(--berry-300) }

/* ---------- programa de referidos ---------- */
.rf-wrap { margin-top: 2px }
.rf-title { text-align: center; margin: 4px 0 4px }
.rf-sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 auto 16px; max-width: 36ch; line-height: 1.4 }
.rf-lbl { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px }
.rf-linkrow { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px }
.rf-linkrow input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; color: var(--birch-50);
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 12px; padding: 12px 14px }
.rf-linkrow .btn.sm { flex: none; width: 52px; margin: 0; font-size: 18px }
.rf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 }
.rf-stat { text-align: center; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 14px; padding: 14px 8px }
.rf-stat.ok { border-color: rgba(158, 240, 122, .4); background: rgba(158, 240, 122, .08) }
.rf-s-l { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px }
.rf-s-v { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: var(--birch-50); font-variant-numeric: tabular-nums }
.rf-stat.ok .rf-s-v { color: #9ef07a }
.rf-claim { background: linear-gradient(135deg, #f0d878, #dcaf46); color: #1c2a1c; border-color: rgba(245, 232, 160, .6); font-weight: 700 }
.rf-my { border: 1px solid var(--glass-bd); border-radius: 14px; padding: 12px 14px; margin: 4px 0 14px }
.rf-my-h { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--birch-50); margin-bottom: 8px }
.rf-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255, 245, 235, .08) }
.rf-item:first-of-type { border-top: 0 }
.rf-nm { font-size: 14px; color: var(--birch-100); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rf-tag { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-bd); color: var(--muted) }
.rf-tag.ok { background: rgba(245, 232, 160, .16); border-color: rgba(245, 232, 160, .5); color: var(--glow-200) }
.rf-tag.done { background: rgba(158, 240, 122, .14); border-color: rgba(158, 240, 122, .45); color: #9ef07a }
/* 0123: referido de antes del corte — no cuenta para el premio. Sin color de estado. */
.rf-tag.vieja { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--muted) }
.rf-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 8px 0 2px }
.rf-how { background: rgba(245, 232, 160, .07); border: 1px solid rgba(245, 232, 160, .22); border-radius: 14px; padding: 12px 14px }
.rf-how-h { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--birch-50); margin: 0 0 6px }
.rf-how-s { font-size: 13px; color: var(--birch-100); margin: 4px 0; line-height: 1.4 }
.rf-how-s b { color: var(--glow-300); margin-right: 4px }

/* ---------- player panel (signed-in home) ---------- */
.panel { display: flex; flex-direction: column }
.greet-hi { text-align: center; margin: 2px 0 0; font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted) }
.greet { text-align: center; margin: 2px 0 14px; font-size: 30px }
.stats { display: flex; gap: 12px; margin: 0 0 18px }
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-sm) }
.stat-l { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted) }
.stat-v { font-family: var(--font-mono); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums }
.stat-v.tk { color: var(--glow-300) }
.stat-v.bal { color: #9ef07a; text-shadow: 0 0 18px rgba(120, 224, 120, .45) }
.btn.jugar { font-size: 22px; letter-spacing: .04em; padding: 20px 16px; margin: 2px 0 12px;
  border-color: rgba(160, 232, 150, .55); color: var(--birch-50);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .4), 0 0 26px rgba(120, 224, 148, .28) }
.btn.jugar:hover { border-color: rgba(160, 232, 150, .8); box-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 40px rgba(120, 224, 148, .4) }
.navrow { display: flex; gap: 10px; margin-bottom: 6px }
.navrow .btn { margin: 6px 0 }
.link.mt { display: block; margin: 12px auto 2px; text-decoration: none; color: var(--muted); font-weight: 600 }
.link.out { display: block; margin: 14px auto 0; text-align: center; color: var(--berry-300) }

/* ---------- buy tickets card ---------- */
.buycard { margin-top: 16px; padding: 16px; background: var(--glass); border: 1px solid var(--glass-bd);
  border-radius: var(--r-sm) }
.buycard h3 { text-align: center; margin: 0 0 2px; font-size: 20px; color: var(--birch-50) }
.buysub { text-align: center; margin: 0 0 14px; font-size: 13px; color: var(--muted); font-family: var(--font-mono) }
.qty { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 6px 0 14px }
.qbtn { width: 54px; height: 54px; border-radius: 16px; font-size: 26px; font-weight: 700; cursor: pointer;
  color: var(--birch-50); background: rgba(255, 245, 235, .06); border: 1px solid var(--glass-bd) }
.qbtn:hover { background: var(--glass-hover); border-color: var(--glass-bd-hover) }
.qbtn:active { transform: scale(.94) }
.qnum { min-width: 56px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 34px;
  font-variant-numeric: tabular-nums; color: var(--glow-300) }
/* paquetes de tickets: se elige uno, ya no se escribe la cantidad. Precio a la
   izquierda (crema, como el dinero de la tarjeta) y tickets a la derecha en oro
   pálido, que es el color de los tickets en todo el juego. */
/* SELECTOR DE CANTIDAD (− n +). Reemplaza la lista de paquetes: desde 0111 se compra
   la cantidad que uno quiera al precio unitario, sin ofertas por volumen. Los botones
   son de 56px porque se usan con el pulgar; el número se puede escribir a mano para no
   obligar a dar veinte toques. */
.stepper { display: flex; align-items: stretch; gap: 10px; margin: 4px 0 14px }
.stp { flex: none; width: 60px; min-height: 68px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-bd); color: var(--glow-300);
  font-size: 32px; font-weight: 700; line-height: 1; display: flex; align-items: center;
  justify-content: center; transition: border-color var(--t), background var(--t), transform .12s ease }
.stp:hover { background: var(--glass-hover); border-color: var(--glass-bd-hover) }
.stp:active { transform: scale(.95) }
.stp:disabled { opacity: .35; cursor: default; transform: none }
/* El número es lo que el jugador mira para saber cuánto va a pagar: va grande.
   46px sale de medirlo, no de tantear: con line-height:1 la caja de contenido de esta
   fila mide 66px, así que 66px es el tope donde la fila todavía no crece ni recorta.
   46 = ese tope menos 30%. Si mañana cambia el alto de la fila, este número cambia con
   él (la relación es alto_de_fila − 2px de borde, por 0.7). */
.stp-n { flex: 1; min-width: 0; min-height: 68px; box-sizing: border-box; text-align: center;
  border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--glass-bd);
  color: var(--birch-50); font-family: var(--font-mono); font-weight: 700; font-size: 46px;
  line-height: 1; padding: 0 4px; -moz-appearance: textfield }
.stp-n::-webkit-outer-spin-button, .stp-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.stp-n:focus { outline: 2px solid var(--glow-400); outline-offset: 1px }
.stp-hint { text-align: center; font-size: 12px; color: var(--muted); margin: -8px 0 14px }

.packs { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px }
.pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 58px; box-sizing: border-box;
  padding: 13px 18px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  background: var(--glass); border: 1px solid var(--glass-bd);
  transition: border-color var(--t), background var(--t), transform .12s ease }
.pack:hover { background: var(--glass-hover); border-color: var(--glass-bd-hover) }
.pack:active { transform: scale(.99) }
.pack:disabled { opacity: .5; cursor: default }
/* marca tipo radio: TODAS las filas la llevan (vacía), así al elegir no se mueve
   nada de sitio — solo se enciende. Es lo que dice de un vistazo cuál está puesto. */
.pack::before { content: ""; flex: none; width: 19px; height: 19px; border-radius: 50%;
  box-sizing: border-box; border: 2px solid rgba(150, 214, 162, .45);
  transition: border-color var(--t), background var(--t), box-shadow var(--t) }
.pack .pk-tk { font-family: var(--font-mono); font-weight: 700; font-size: 19px; color: var(--glow-300);
  white-space: nowrap; margin-right: auto }   /* el margen auto empuja el precio a la derecha */
.pack .pk-usd { font-family: var(--font-mono); font-weight: 700; font-size: 21px; color: var(--birch-50);
  font-variant-numeric: tabular-nums; line-height: 1.15 }
/* elegido: aro verde, fondo más vivo y la marca encendida */
.pack.on { border-color: rgba(160, 232, 150, .85);
  background: linear-gradient(180deg, rgba(120, 224, 148, .20), rgba(120, 224, 148, .06)), var(--glass);
  box-shadow: 0 0 0 2px rgba(160, 232, 150, .40), 0 8px 24px rgba(40, 150, 90, .25) }
.pack.on::before { border-color: #9ef07a; background: #9ef07a;
  box-shadow: inset 0 0 0 3px rgba(16, 28, 20, .9), 0 0 10px rgba(158, 240, 122, .55) }
.pack.on .pk-usd { color: #fff }
.pack.on .pk-tk { color: var(--glow-200) }
@media (max-width: 360px) {
  .pack { padding: 12px 14px }
  .pack .pk-usd { font-size: 19px } .pack .pk-tk { font-size: 17px }
}

.qtotals { display: flex; justify-content: space-around; margin: 0 0 14px; text-align: center }
.qt-l { display: block; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 3px }
.qt-v { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--birch-50) }

/* ---------- Pago Móvil request ---------- */
.paybox { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 6px 0 14px; padding: 16px;
  border-radius: var(--r-sm); border: 1px solid rgba(160, 232, 150, .4);
  background: radial-gradient(circle at 50% 0, rgba(120, 224, 148, .16), transparent 72%), var(--glass) }
.paybox .pb-l { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted) }
.paybox .pb-v { font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: #9ef07a;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(120, 224, 120, .4) }
.paydest { margin: 0 0 6px; padding: 14px 16px; border: 1px solid var(--glass-bd); border-radius: var(--r-sm); background: var(--glass) }
.paydest p { margin: 3px 0; font-size: 15px; color: var(--birch-100) }
.paydest .pd-h { margin: 0 0 8px; color: var(--muted); font-size: 13.5px }
.paydest .muted { color: var(--muted) }
input[type=file] { color: var(--muted); font-family: var(--font-body); font-size: 13px }
input[type=file]::file-selector-button { margin-right: 12px; padding: 9px 14px; cursor: pointer;
  color: var(--birch-50); background: rgba(255, 245, 235, .08); border: 1px solid var(--glass-bd);
  border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 700; font-size: 13px }
input[type=file]::file-selector-button:hover { background: var(--glass-hover) }

/* ---------- wallet ---------- */
.bal-l { text-align: center; margin: 6px 0 0; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted) }
.bal-big { text-align: center; margin: 2px 0 6px; font-family: var(--font-mono); font-weight: 700; font-size: 52px;
  color: #9ef07a; text-shadow: 0 0 26px rgba(120, 224, 120, .5); font-variant-numeric: tabular-nums }
/* ---------- result: your placement + top 3 ---------- */
.standing { margin: 12px 0 }
.rank-you { text-align: center; margin: 8px 0 2px; font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--birch-50) }
/* aviso de empate perdido: alguien hizo tus mismos puntos pero llegó primero */
.tie-note { text-align: center; margin: 2px auto 6px; max-width: 300px; font-size: 13px; line-height: 1.45; color: #f2dc9a }
.rank-prize { text-align: center; margin: 0 0 6px; font-weight: 800; font-size: 20px; color: #9ef07a; text-shadow: 0 0 18px rgba(120, 224, 120, .45) }
.top3 { margin: 12px auto 0; max-width: 320px; padding: 12px 14px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-sm) }
.top3-h { margin: 0 0 6px; text-align: center; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted) }
.top3-row { display: flex; align-items: center; gap: 10px; padding: 5px 2px }
.top3-row .t3-m { width: 26px; text-align: center; font-size: 17px }
.top3-row .t3-u { flex: 1; font-size: 14px; color: var(--birch-100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.top3-row .t3-t { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--birch-50) }
/* prize tag on the top-3 rows of the ranking */
.lb td.r .rprize { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #9ef07a; margin-top: 1px }

.wcard { margin: 14px 0 0; padding: 16px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-sm) }
.wcard h3 { text-align: center; margin: 0 0 10px; font-size: 18px; color: var(--birch-50) }
.wcard .field { margin: 10px 0 }
.wcard .btn { margin-top: 12px }
.act-amt.pos { color: #9ef07a }
.act-amt.neg { color: var(--berry-300) }
.acts-h { margin: 18px 0 8px; font-size: 15px; color: var(--birch-100) }
.act { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 13px;
  margin: 6px 0; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 12px }
.act b { font-size: 14.5px; color: var(--birch-50) }
.act-d { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px }
.act-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px }
.act-amt { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--birch-100) }
.badge { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid transparent }
.badge.pending { color: var(--glow-300); border-color: rgba(245, 232, 160, .4); background: rgba(245, 232, 160, .1) }
.badge.approved { color: #9ef07a; border-color: rgba(160, 232, 150, .4); background: rgba(120, 224, 148, .12) }
.badge.rejected { color: var(--berry-300); border-color: rgba(232, 130, 130, .4); background: rgba(224, 110, 100, .1) }

/* ---------- audio controls (start menu) ---------- */
.audio { margin-top: 18px; padding: 14px; border: 1px solid var(--glass-bd); border-radius: var(--r-sm);
  background: var(--glass) }
.audio .lbl { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted) }
.chip { font-family: var(--font-body); font-weight: 700; font-size: 13.5px; cursor: pointer;
  min-height: 34px; padding: 7px 14px; color: var(--birch-100);
  background: rgba(255, 245, 235, .06); border: 1px solid var(--glass-bd); border-radius: var(--r-pill) }
.chip:hover { border-color: var(--glass-bd-hover); background: var(--glass-hover) }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 232, 160, .3) }
/* override the global `label` rule (block/uppercase) — this one is a flex row */
.audio label.vol { display: flex; align-items: center; gap: 12px; margin: 12px 0 0;
  font-size: inherit; text-transform: none; letter-spacing: normal }
.audio .ico { font-size: 17px; width: 24px; text-align: center }
.audio .pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px;
  color: var(--muted); width: 40px; text-align: right }
.audio input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; margin: 0;
  padding: 0; min-height: 0; border: 0; border-radius: 999px; background: rgba(255, 245, 235, .16);
  cursor: pointer; touch-action: none }
.audio input[type=range]:focus { outline: none }
.audio input[type=range]:focus-visible { box-shadow: 0 0 0 3px rgba(245, 232, 160, .3) }
/* 22px thumb sits inside a 44px tall transparent hit area via padding on the track parent */
.audio input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--glow-300); cursor: pointer;
  border: 2px solid rgba(12, 24, 10, .55); box-shadow: 0 2px 8px rgba(0, 0, 0, .45) }
.audio input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
  background: var(--glow-300); cursor: pointer; border: 2px solid rgba(12, 24, 10, .55) }

/* ---------- compact player panel: fits a phone viewport without scrolling ---------- */
.panel .greet { font-size: 25px; margin: 2px 0 8px }
.panel .stats { margin-bottom: 8px; gap: 10px }
.panel .stat { padding: 8px }
.panel .stat-v { font-size: 21px }
.panel .btn { margin: 5px 0; min-height: 44px; padding: 11px 16px; font-size: 15px }
.panel .btn.jugar { font-size: 20px; padding: 14px 16px; margin: 2px 0 6px }
.panel .navrow { margin-bottom: 0 }
.panel .audio { margin-top: 8px; padding: 9px 14px }
.panel .msg { min-height: 0; margin: 4px 0 }
.panel .link.out { margin: 9px auto 0 }
/* cuenta (cambiar clave / cerrar sesión): alineados abajo a la izquierda */
.panel .acct { text-align: left; margin-top: 12px }
.panel .acct .link { display: block; margin: 0 0 9px; text-align: left }
.panel .acct .link.out { margin: 0; text-align: left }

/* ---------- practice-end buttons (over the canvas) ---------- */
#pracEnd { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(26px, env(safe-area-inset-bottom)); z-index: 15;
  display: flex; gap: 10px; width: min(430px, calc(100vw - 32px)) }
#pracEnd .btn { flex: 1; margin: 0 }
#pracEnd.hidden { display: none }

/* ---------- últimas competencias ---------- */
.recent-t { max-width: none; margin: 10px 0 0 }

/* ---------- barra de verificación de pago ---------- */
.vbar { height: 14px; margin: 20px 4px 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 245, 235, .1); border: 1px solid var(--glass-bd) }
.vfill { height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--forest-300), #9ef07a);
  box-shadow: 0 0 14px rgba(120, 224, 148, .45);
  transition: width .45s linear }

/* ---------- chat de soporte (botón flotante + panel, sin backdrop-blur) ---------- */
#chatBtn { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 7px; height: 52px; padding: 0 18px;
  border-radius: 999px; cursor: pointer; font-size: 21px; line-height: 1;
  border: 1px solid rgba(245, 232, 160, .55);
  background: linear-gradient(135deg, #f0d878, #dcaf46); color: #1c2a1c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(245, 232, 160, .3) }
#chatBtn .cb-btn-label { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .01em }
#chatBtn:active { transform: scale(.94) }
#chatBtn.hidden { display: none }
#chatBadge { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 999px; background: #e05a4e; color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 12.5px;
  border: 2px solid #14211a }
#chatBadge.hidden { display: none }
/* titileo del botón + aviso "Mensaje nuevo" cuando hay no-leídos (like the image) */
#chatBtn.has-unread { animation: chatpulse 1.3s ease-in-out infinite }
@keyframes chatpulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(245, 232, 160, .3) }
  50%      { transform: scale(1.06); box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 107, 107, .6) }
}
#chatNew { position: fixed; right: 18px; z-index: 30; pointer-events: none;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 58px);
  font-family: var(--font-head); font-weight: 700; font-size: 12px; color: #ff6b6b;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7); animation: chatnew-blink 1.3s ease-in-out infinite }
#chatNew.hidden { display: none }
@keyframes chatnew-blink { 0%, 100% { opacity: .6 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { #chatBtn.has-unread, #chatNew { animation: none } }
#chatPanel { position: fixed; right: 12px; bottom: 12px; z-index: 31;
  width: min(400px, calc(100vw - 24px)); height: min(540px, calc(100dvh - 24px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #14211a; border: 1px solid var(--glass-bd); border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .6) }
#chatPanel.hidden { display: none }
.cb-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 245, 235, .1); color: var(--birch-50);
  font-family: var(--font-head); font-size: 17px }
.cb-head button { background: none; border: 0; color: var(--birch-200); font-size: 17px; cursor: pointer; padding: 4px 8px }
.cb-empty { text-align: center; color: var(--birch-200); font-size: 15px; margin: 18px 14px 0 }
.cb-empty.hidden, .cb-note.hidden { display: none }
.cb-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 6px 14px }
.cb-msgs { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; touch-action: pan-y; padding: 10px 12px }
#chatPanel .cmsg { display: flex; flex-direction: column; align-items: flex-start; margin: 7px 0 }
#chatPanel .cmsg.me { align-items: flex-end }
#chatPanel .cbub { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45;
  background: rgba(255, 245, 235, .08); border: 1px solid var(--glass-bd); color: var(--birch-50);
  white-space: pre-wrap; word-break: break-word }
#chatPanel .cmsg.me .cbub { background: rgba(245, 232, 160, .15); border-color: rgba(245, 232, 160, .4) }
#chatPanel .cbub a { color: var(--glow-300); text-decoration: underline; word-break: break-all }
.cb-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255, 245, 235, .1) }
.cb-row input { flex: 1; min-width: 0; padding: 11px 14px; font-size: 15px; color: var(--birch-100);
  font-family: var(--font-body); background: rgba(255, 245, 235, .06);
  border: 1px solid rgba(255, 245, 235, .15); border-radius: 999px; outline: none }
.cb-row input:focus { border-color: rgba(245, 232, 160, .5) }
.cb-row button { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 18px; background: linear-gradient(135deg, #f0d878, #dcaf46); color: #1c2a1c }
/* botones de imagen y nota de voz (discretos, redondos) */
.cb-row .cb-ico { width: 42px; height: 42px; font-size: 17px; padding: 0;
  background: rgba(255, 245, 235, .07); border: 1px solid var(--glass-bd); color: var(--birch-100) }
.cb-row .cb-ico.rec { background: #e05a4e; border-color: #e05a4e; animation: recpulse 1.2s ease-in-out infinite }
@keyframes recpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 90, 78, .55) } 50% { box-shadow: 0 0 0 9px rgba(224, 90, 78, 0) } }
/* media dentro de las burbujas */
#chatPanel .cbub .cb-media { display: block; max-width: 100%; max-height: 240px; border-radius: 10px }
#chatPanel .cbub .cb-audio { display: block; width: 210px; max-width: 100% }

/* ---------- felicitaciones: modal sobre la bienvenida ----------
   Sin backdrop-filter (regla de perf móvil): el fondo se oscurece con un scrim
   sólido, no con blur. Se dibuja encima de todo (chat incluido). */
.cg-scrim {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
  background: rgba(8, 15, 8, .82);
  animation: ov-in .2s ease both;
}
.cg-scrim.hidden { display: none }
.cg-card {
  width: 100%; max-width: 360px; box-sizing: border-box;
  background: var(--forest-700);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 50px rgba(120, 224, 148, .16);
  padding: 26px 22px 22px; text-align: center;
  animation: card-pop .28s var(--bounce) both;
}
.cg-title {
  font-family: var(--font-head); font-weight: 800; font-size: 23px;
  color: var(--glow-300); margin-bottom: 12px; line-height: 1.2;
}
.cg-body { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0 0 20px }
.cg-card .btn.primary {
  display: inline-block; width: auto; min-width: 150px;
  margin: 0 auto; padding: 13px 34px;
}
/* MODAL DE PREGUNTA (#pregunta): es el único con DOS botones, y con la regla de arriba
   el "Cancelar" (un .link, que es inline) se metía al costado del otro y quedaba de
   59×15px — imposible de acertar con el pulgar. Acá se apilan y el de cancelar recibe
   un área táctil de verdad. */
#pregunta .cg-card .btn.primary { display: block; width: 100%; min-width: 0; padding: 14px 18px }
#pregunta .cg-card .link {
  display: block; width: 100%; min-height: 44px; margin: 8px 0 0;
  font-size: 14px; line-height: 44px; text-align: center;
}
/* ---------- rachas de consuelo: píldoras + modal "¿cómo funciona?" ---------- */
.rk-bar { display: flex; gap: 5px }
.rk-seg { flex: 1; height: 15px; border-radius: 5px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09) }
.rk-seg.on { background: linear-gradient(180deg, #b9f77a, #5fbf3a);
  border-color: rgba(160, 240, 140, .55); box-shadow: 0 0 9px rgba(120, 224, 120, .4) }
.rk-seg.win { background: linear-gradient(180deg, #faf0c0, #dcc860);
  border-color: rgba(245, 232, 160, .65); box-shadow: 0 0 11px rgba(245, 232, 160, .55) }
.cg-pills { margin: 0 0 18px }
.cg-pills.hidden { display: none }
/* componente en el lobby (bajo tickets/saldo) */
.rk { margin: 2px 0 10px; padding: 11px 12px; text-align: left;
  background: rgba(16, 28, 20, .55); border: 1px solid var(--glass-bd); border-radius: 15px }
.rk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px }
.rk-t { font-family: var(--font-head); font-weight: 800; font-size: 12.5px; color: var(--glow-300) }
.rk-help { font-size: 11.5px; font-weight: 700; color: #9ec9ff; cursor: pointer;
  background: rgba(90, 150, 230, .14); border: 1px solid rgba(120, 170, 240, .35);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap }
.rk-help:hover { background: rgba(90, 150, 230, .24) }
.rk-line { display: flex; align-items: center; gap: 9px }
.rk-line .rk-bar { flex: 1 }
.rk-n { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; color: var(--glow-300) }
/* modal "¿cómo funciona?" */
.cg-card.how { text-align: left }
.cg-card.how .cg-title { text-align: center }
.hr-way { display: flex; gap: 10px; margin: 0 0 11px; padding: 11px 12px;
  background: rgba(16, 28, 20, .5); border: 1px solid var(--glass-bd); border-radius: 13px }
.hr-ico { font-size: 22px; line-height: 1.1 }
.hr-way b { color: var(--birch-50); font-size: 13.5px }
.hr-way p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45 }
.hr-foot { font-size: 12.5px; color: #9ef07a; text-align: center; margin: 4px 0 18px }
.cg-card.how .btn.primary { display: block; margin: 0 auto }
@media (prefers-reduced-motion: reduce) {
  .cg-scrim, .cg-card { animation: none !important }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ov-scrim, .clay-card, .btn { animation: none !important; transition: none !important }
  .ov-scrim::before, .ov-scrim::after { animation: none !important }
  .btn:hover, .btn:active { transform: none }
}

/* EL LIENZO DEL JUEGO, clavado a la pantalla. Sin esto era un elemento del flujo
   normal: si la pagina quedaba scrolleada un pelo (pasa al volver del menu), el lienzo
   se corria y el fondo del body asomaba como una franja verde abajo -- mas grande o mas
   chica segun en que estado estuviera la barra del navegador al arrancar esa partida.
   Fijo, el scroll de la pagina ya no lo puede mover, y ademas el mapeo del dedo al
   mundo queda siempre alineado. z-index 0: toda la interfaz (tarjeta, chat) va encima. */
#c { position: fixed; top: 0; left: 0; display: block; z-index: 0 }
/* En el MENU (body.bosque) el canvas se ESCONDE: el fondo de hojas lo pinta
   body.bosque::before, que esta en el mismo z-index 0, y el canvas real le ganaba
   tapandolo con el suelo del juego. Escondido, se ve el fondo verde de siempre. Durante
   el juego el body NO es bosque, asi que el canvas sigue fijo y la franja queda arreglada. */
body.bosque #c { display: none }