/* ===========================================================================
   VISTAS "BOSQUE" — ranking, últimas competencias, ganancias, comprar, referidos,
   movimientos, cambiar contraseña y los avisos.
   ---------------------------------------------------------------------------
   A PROPÓSITO esto no reescribe el marcado de ninguna vista: RESTILA LAS CLASES
   QUE YA USAN. En esas pantallas viven los pagos, los retiros y el ranking, así
   que no se toca ni un `id` ni un manejador — solo el aspecto. Si algo hay que
   revertir, se quita este archivo y todo vuelve al tema anterior.

   Cuelga de `body.bosque`, que se pone en cualquier pantalla de tarjeta. Lo
   estructural del lobby (tarjeta a pantalla completa, sin scroll) va aparte en
   lobby-bosque.css bajo `body.bosque-lobby`, porque estas vistas son largas y
   tienen que poder deslizarse.

   Cada selector lleva `body.bosque` adelante por ESPECIFICIDAD: theme.css usa
   selectores con etiqueta (`.clay-card h2`, `.field label`) que le ganan a una
   clase sola.

   Regla del fondo claro: todo texto que caiga DIRECTO sobre el fondo lleva
   contorno oscuro; dentro de un panel no hace falta, el panel ya da el suyo.
   =========================================================================== */

/* ---- la tarjeta deja de ser vidrio: el fondo ya es el dibujo ---- */
body.bosque .clay-card {
  background: none; border: 0; box-shadow: none; padding: 8px 6px 22px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  max-height: none; max-width: 440px;
}
body.bosque .ov-scrim {
  background: none; align-items: flex-start;
  padding: max(8px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  overflow-y: auto;
}

/* ---- el título va en la tabla de madera con hojas ----
   Se excluye .bq-nombre porque el nombre del jugador en el lobby también es un
   h2 y no debe volverse un cartel de madera. */
body.bosque #card h2:not(.bq-nombre) {
  position: relative; min-height: 54px; display: flex; align-items: center; justify-content: center;
  margin: 0 0 12px; padding: 0 20px 7px; text-align: center;
  border: 28px solid transparent; border-width: 28px 32px 12px 34px;
  border-image: url("assets/ui/tabla.webp?v=1") 81 94 35 100 fill / 28px 32px 12px 34px / 0 stretch;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
  font-family: var(--font-head); font-weight: 800; font-size: clamp(15px, 4.6vw, 20px); line-height: 1.15;
  color: #fff4da; -webkit-text-stroke: .13em #2e1408; paint-order: stroke fill;
  text-shadow: 0 .08em 0 rgba(0, 0, 0, .45);
}
body.bosque #card h1, body.bosque #card .titlebig, body.bosque #card .big {
  color: #ffe57a; -webkit-text-stroke: .1em #14380e; paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 20px rgba(255, 214, 90, .35);
}

/* ---- la barra de "← Volver" ---- */
body.bosque .topbar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px }
body.bosque .topbar .link, body.bosque .topbar .who { flex: none }
body.bosque .topbar .link {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 8px; border-radius: 999px;
  background: linear-gradient(180deg, #3f7a3a, #28551f); border: 2px solid #17330f;
  box-shadow: 0 3px 0 #13270d, inset 0 1px 0 rgba(255, 255, 255, .18);
  font-family: var(--font-head); font-weight: 800; font-size: 13px; color: #f3ffe4; text-decoration: none;
  -webkit-text-stroke: .1em #14330f; paint-order: stroke fill;
}
body.bosque .topbar .link:active { transform: translateY(2px); box-shadow: 0 1px 0 #13270d }
body.bosque .topbar .who { font-family: var(--font-mono); font-size: 11.5px; color: #dcf3cc }

/* ---- paneles: el mismo verde del relleno de las cápsulas ---- */
body.bosque .panel, body.bosque .wcard, body.bosque .top3, body.bosque .rf-my,
body.bosque .rf-how, body.bosque .cd-box, body.bosque .paydest, body.bosque .qtotals,
body.bosque .rf-stat, body.bosque .act-card {
  background: linear-gradient(180deg, #1b3c20, #0e2412);
  border: 2px solid #4b8b45; border-radius: 16px; padding: 12px 12px 13px; margin: 0 0 11px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.bosque .wcard h3, body.bosque .panel h3, body.bosque .rf-my-h, body.bosque .rf-how-h,
body.bosque .pd-h {
  margin: 0 0 9px; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: #ffe9a6;
  -webkit-text-stroke: .1em #14330f; paint-order: stroke fill;
}

/* textos sueltos dentro de los paneles */
body.bosque .buysub { font-size: 12.5px !important; color: #dcf3cc !important }
body.bosque .sub, body.bosque .hint, body.bosque .buysub, body.bosque .rf-sub,
body.bosque .rf-how-s, body.bosque .muted, body.bosque .mid, body.bosque .rf-empty {
  color: #cfe6bf; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
}
/* pero si caen DIRECTO sobre el fondo, necesitan contorno */
body.bosque #card > .sub, body.bosque #card > .hint, body.bosque #card > .buysub,
body.bosque #card > .mid, body.bosque #card > .bal-l {
  color: #f3ffe4; font-weight: 700;
  -webkit-text-stroke: .15em #143314; paint-order: stroke fill; text-shadow: 0 .08em .12em rgba(0, 0, 0, .55);
}

/* ---- cuenta atrás del torneo ---- */
body.bosque .cd-box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 12px 11px }
body.bosque .cd-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #bcdcae; font-weight: 700;
}
body.bosque .count {
  font-family: var(--font-mono); font-weight: 700; font-size: 27px; color: #ffe9a6;
  -webkit-text-stroke: .08em #14330f; paint-order: stroke fill;
}

/* ---- la MARCA OFICIAL en la pantalla de resultado ----
   Es el dato con el que compites, así que va como bloque grande y no como una
   línea de texto. Sobre una placa verde propia: el fondo del bosque va de casi
   negro a casi blanco según la zona, y encima del dibujo un número suelto —por
   grande que sea— se pierde. La placa le garantiza el contraste siempre. */
body.bosque .res-marca {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin: 0 auto 13px; padding: 10px 20px 13px; max-width: max-content;
  background: linear-gradient(180deg, #1b3c20, #0e2412);
  border: 2px solid #6ba85c; border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
body.bosque .res-marca-r {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #bcdcae;
}
/* el número: monoespaciado para que no baile al cambiar de cifra, y con contorno
   porque el dorado sobre verde oscuro pierde definición en pantallas al sol */
body.bosque .res-marca-v {
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(34px, 10vw, 46px);
  line-height: 1.05; color: #ffe27a;
  -webkit-text-stroke: .055em #14330f; paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 22px rgba(255, 214, 90, .3);
}
/* pantallas bajas: el bloque no puede comerse el espacio de los botones */
@media (max-height: 700px) {
  body.bosque .res-marca { padding: 8px 16px 10px; margin-bottom: 10px }
  body.bosque .res-marca-v { font-size: clamp(30px, 9vw, 38px) }
}

/* ---- lo que viene DESPUÉS de tu marca: cuánto falta y dónde vas ----
   VA SOBRE PANEL, no suelto sobre el dibujo. El primer intento lo dejó suelto con
   contorno oscuro en cada línea, y se leía peor: en texto de 11 px el contorno
   engorda los trazos y cierra los huecos de las letras (la "a", la "e", el "8"),
   así que ayuda en un título grande y arruina un párrafo.
   Es la regla que ya sigue el resto del archivo: contorno SOLO para texto suelto
   sobre el fondo; dentro de un panel el panel ya da el contraste. Aquí el panel
   apaga el bosque detrás y las letras van limpias, sin contorno. */
body.bosque .res-info {
  text-align: center; margin: 0 0 13px; padding: 11px 14px 12px;
  background: linear-gradient(180deg, rgba(20, 45, 24, .96), rgba(9, 26, 13, .97));
  border: 2px solid #4b8b45; border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.bosque .res-info p { margin: 0; -webkit-text-stroke: 0 }
/* la cuenta atrás: es lo que da urgencia, así que va primero y en ámbar */
body.bosque .res-cd {
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: #ffe9a6;
  line-height: 1.4; margin-bottom: 9px !important;
  padding-bottom: 9px; border-bottom: 1px solid rgba(139, 224, 106, .22);
}
body.bosque .res-rot {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #bcdcae; font-weight: 700;
}
/* el puesto: grande, pero por debajo de la marca oficial — es dónde vas, no qué hiciste */
body.bosque .res-pos {
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(28px, 8vw, 36px);
  line-height: 1.15; color: #9ef07a; margin: 2px 0 7px !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
/* sin puesto válido todavía: el verde de "vas bien" sería mentira */
body.bosque .res-pos.sin { font-size: 15px; color: #cfe6bf; font-weight: 500; text-shadow: none }
/* LOS DOS AVISOS. Antes era una línea de 11,5 px en gris verdoso al pie del bloque:
   la nota que nadie lee. Y son justo las dos preguntas que el jugador se hace al
   terminar — "¿me van a pasar?" y "¿cuándo cobro?" — o sea las dos que terminan en
   soporte si no se contestan acá.
   Van sobre placa ámbar, con su propia línea, y a 13 px: el mismo tamaño que la
   cuenta atrás, para que se lean como aviso y no como pie de página. */
body.bosque .res-avisos {
  margin: 10px auto 0; padding: 9px 11px; max-width: 32em;
  /* CASI OPACA. Con 34% de transparencia el bosque se colaba por detrás y el
     contraste caía a 2,5:1 — ilegible sobre las hojas claras. Es el mismo error que
     ya cometí con el bloque de arriba: en este fondo, una placa translúcida no
     protege nada. Con 95% el texto queda en 10:1 en todo el mapa. */
  background: linear-gradient(180deg, rgba(58, 42, 8, .95), rgba(40, 28, 4, .96));
  border: 1.5px solid rgba(255, 220, 120, .55); border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 230, 150, .1);
}
body.bosque .res-aviso {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; line-height: 1.45;
  color: #ffe9a6; margin: 0 !important; text-align: left;
  /* la sangría francesa deja el emoji colgando y el texto alineado en bloque */
  padding-left: 1.5em; text-indent: -1.5em;
}
body.bosque .res-aviso + .res-aviso {
  margin-top: 7px !important; padding-top: 7px;
  border-top: 1px solid rgba(255, 220, 120, .22);
}
@media (max-height: 700px) {
  body.bosque .res-avisos { padding: 7px 9px; margin-top: 8px }
  body.bosque .res-aviso { font-size: 12px }
}
@media (max-height: 700px) {
  body.bosque .res-info { margin-bottom: 10px; padding: 9px 12px 10px }
  body.bosque .res-pos { font-size: clamp(25px, 7.2vw, 31px) }
  body.bosque .res-aviso { font-size: 11px }
}

/* ---- ranking: una tarjeta por fila ---- */
body.bosque .lb2 { display: flex; flex-direction: column; gap: 7px; margin: 0 0 10px }
body.bosque .lb2-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 13px;
  background: linear-gradient(180deg, #1b3c20, #0e2412);
  border: 2px solid #3d7139; box-shadow: 0 3px 7px rgba(0, 0, 0, .35);
}
body.bosque .lb2-row.rank-1 {
  border-color: #f5d03a; background: linear-gradient(180deg, #4a3e12, #1e200c);
}
body.bosque .lb2-row.rank-2 { border-color: #cfd6dd }
body.bosque .lb2-row.rank-3 { border-color: #d08a44 }
body.bosque .lb2-row.me {
  border-color: #8be06a; box-shadow: 0 0 0 2px rgba(139, 224, 106, .25), 0 3px 7px rgba(0, 0, 0, .35);
}
body.bosque .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: 700; font-size: 14px; color: #0f2410;
  background: linear-gradient(180deg, #cfe6bf, #8fbb7c); border: 2px solid #1b3a16;
}
body.bosque .lb2-row.rank-1 .lb2-rank { background: linear-gradient(180deg, #ffe98a, #e5b52a) }
body.bosque .lb2-row.rank-2 .lb2-rank { background: linear-gradient(180deg, #f2f5f8, #c2ccd6) }
body.bosque .lb2-row.rank-3 .lb2-rank { background: linear-gradient(180deg, #f0bb84, #c07c39) }
body.bosque .lb2-av {
  flex: none; width: 34px; height: 34px; border-radius: 999px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: radial-gradient(circle at 50% 35%, #2c4a2e, #16281a); border: 2px solid #6ba85c;
}
body.bosque .lb2-info { flex: 1 1 0; min-width: 0 }
body.bosque .lb2-name {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: 14px; color: #fff6e2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-text-stroke: .075em #16300f; paint-order: stroke fill;
}
body.bosque .lb2-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px }
body.bosque .lb2-score { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: #ffe9a6 }
body.bosque .lb2-prize {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: rgba(245, 208, 58, .16); border: 1px solid #c8a52e; color: #ffe9a6;
}
/* mejores jugadas: arriba el nombre y el monto, abajo la fecha sola (que es larga) */
body.bosque .lb2-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px }
body.bosque .lb2-top .lb2-name { min-width: 0 }
/* la fecha es una FRASE, no una columna de numeros: en monoespaciada ocupaba ~15% mas de
   ancho sin ganar nada, y el peor caso ("Hoy, 30 de septiembre a las 12:42 p.m") quedaba
   justo en el limite. Con la fuente normal respira. El monto sigue en mono, que ahi si
   sirve: alinea las cifras de una fila a otra. */
body.bosque .lb2-when {
  display: block; margin-top: 2px; font-size: 11.5px; color: #c3ddb2; letter-spacing: .005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.bosque .lb2-score.money { flex: none; font-size: 17px; color: #ffe9a6 }
body.bosque .you-tag {
  font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 999px; margin-left: 5px;
  background: #8be06a; color: #123a0c; -webkit-text-stroke: 0;
}
body.bosque .lb2-gap, body.bosque .you-note {
  text-align: center; color: #dcf3cc; font-family: var(--font-mono); font-size: 13px; letter-spacing: .25em;
  -webkit-text-stroke: .13em #143314; paint-order: stroke fill;
}
body.bosque .you-note { letter-spacing: 0; font-size: 11px; font-weight: 700 }

/* ---- últimas competencias ---- */
body.bosque .top3-h {
  margin: 0 0 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #bcdcae;
}
body.bosque .top3-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-top: 1px solid rgba(107, 168, 92, .22);
}
body.bosque .top3-row:first-of-type { border-top: 0 }
body.bosque .t3-m { flex: none; width: 22px; text-align: center; font-size: 15px }
body.bosque .t3-u {
  flex: 1 1 0; min-width: 0; font-family: var(--font-head); font-weight: 800; font-size: 13.5px; color: #fff6e2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.bosque .t3-t { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; color: #ffe9a6 }
body.bosque .rc-more {
  display: block; margin: 6px auto 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: #9ef07a; text-decoration: underline;
}

/* ---- saldo grande ---- */
body.bosque .bal-l {
  margin: 0; text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase;
}
/* el saldo en BLANCO y más grande: es el número más importante de la pantalla y
   en verde se mezclaba con el fondo */
body.bosque .bal-big {
  text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 46px; line-height: 1.05;
  color: #ffffff; margin: 0 0 14px;
  -webkit-text-stroke: .07em #10240f; paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 4px 16px rgba(0, 0, 0, .55);
}

/* ---- formularios ---- */
body.bosque .field { margin-bottom: 9px }
body.bosque .field label, body.bosque label, body.bosque .rf-lbl {
  display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #bcdcae;
}
body.bosque .field input, body.bosque .field select, body.bosque input, body.bosque select, body.bosque textarea {
  width: 100%; padding: 10px 11px; border-radius: 11px; box-sizing: border-box;
  background: rgba(8, 22, 10, .85); border: 2px solid #3d7139; color: #f3ffe4;
  font-family: var(--font-head); font-size: 15px; -webkit-appearance: none;
}
body.bosque .field input:focus, body.bosque .field select:focus, body.bosque input:focus { outline: 0; border-color: #8be06a }
body.bosque .field input:disabled, body.bosque input:disabled { color: #9fb894; background: rgba(8, 22, 10, .55) }
/* EXCEPCIÓN: el número del selector de cantidad (comprar tickets / convertir saldo).
   La regla de arriba le aplica por ser un input dentro de body.bosque —y le gana a la
   .stp-n de theme.css por especificidad (0,1,2) contra (0,1,0)—, así que aquí se le
   devuelve lo suyo: monoespaciada y GRANDE, que es lo que el jugador mira para saber
   cuánto va a pagar. El fondo y el borde del bosque sí se respetan.
   45px NO es a ojo: con el borde de 2px de esta hoja la caja de contenido de la fila
   mide 64px, que es el tope antes de que la fila crezca o el número se recorte; 45 es
   ese tope menos 30%. Si cambia el alto de la fila o el grosor del borde, se recalcula. */
body.bosque .stp-n {
  width: auto; text-align: center; padding: 0 4px;
  font-family: var(--font-mono); font-size: 45px; line-height: 1;
}
body.bosque .field .hint { font-size: 9.5px; color: #9fb894; margin-top: 3px; text-transform: none; letter-spacing: 0 }
body.bosque .row { display: flex; gap: 8px; align-items: center }
body.bosque .row.between { justify-content: space-between }
body.bosque .grow { flex: 1 1 0; min-width: 0 }

/* ---- botones ----
   Verde con relieve; el primario en dorado. Sin hojas: las hojas son del título,
   si cada botón las llevara dejarían de ser un detalle. */
body.bosque .btn {
  position: relative; overflow: visible; display: block; width: 100%; box-sizing: border-box;
  margin: 10px 0; padding: 12px 14px 13px; border-radius: 13px; cursor: pointer;
  background: linear-gradient(180deg, #3f7a3a, #28551f); border: 2px solid #17330f;
  box-shadow: 0 4px 0 #13270d, inset 0 1px 0 rgba(255, 255, 255, .16);
  font-family: var(--font-head); font-weight: 800; font-size: 16px; color: #f3ffe4;
  -webkit-text-stroke: .1em #14330f; paint-order: stroke fill; transform: none;
}
body.bosque .btn::before { display: none }
body.bosque .btn:hover { background: linear-gradient(180deg, #47893f, #2d5f23); transform: none; box-shadow: 0 4px 0 #13270d, inset 0 1px 0 rgba(255, 255, 255, .16) }
body.bosque .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #13270d }
body.bosque .btn.primary, body.bosque .btn.green {
  background: linear-gradient(180deg, #f2c73c, #c9901c); border-color: #5d3f08; color: #3b2504;
  box-shadow: 0 4px 0 #4a3206, inset 0 1px 0 rgba(255, 255, 255, .35); -webkit-text-stroke: 0;
}
body.bosque .btn.primary:hover, body.bosque .btn.green:hover {
  background: linear-gradient(180deg, #ffd452, #d69c20); box-shadow: 0 4px 0 #4a3206, inset 0 1px 0 rgba(255, 255, 255, .35);
}
body.bosque .btn.primary:active, body.bosque .btn.green:active { transform: translateY(3px); box-shadow: 0 1px 0 #4a3206 }
body.bosque .btn.ghost { background: linear-gradient(180deg, #2f5c2b, #1e4218); font-weight: 800 }
body.bosque .btn.danger { background: linear-gradient(180deg, #b8483c, #7e2b22); border-color: #4a1208; box-shadow: 0 4px 0 #3c0f07, inset 0 1px 0 rgba(255, 255, 255, .18) }
body.bosque .btn:disabled { filter: grayscale(.5) brightness(.75); box-shadow: 0 4px 0 #13270d }
body.bosque .btn.sm { width: auto; margin: 0; padding: 9px 12px; font-size: 14px }
body.bosque .navrow { display: flex; gap: 9px }
body.bosque .navrow .btn { margin: 10px 0 }
body.bosque .link {
  background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px;
  color: #9ef07a; text-decoration: underline;
}
/* los enlaces que quedan sueltos sobre el fondo (el "¿No tienes cuenta?" de la
   pantalla de entrar, por ejemplo) llevan contorno: sobre las hojas claras un
   verde brillante se pierde */
body.bosque #card > .link, body.bosque #card > .linkrow .link, body.bosque .acct .link {
  color: #d8ffc4; font-weight: 700;
  -webkit-text-stroke: .14em #143314; paint-order: stroke fill; text-shadow: 0 .08em .12em rgba(0, 0, 0, .55);
}
body.bosque .link.out { color: #ffcfc4 }
body.bosque .linkrow, body.bosque .acct { text-align: center; margin-top: 12px }
body.bosque .acct { display: flex; align-items: center; justify-content: center; gap: 14px }
body.bosque .chip {
  padding: 7px 12px; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #3f7a3a, #28551f);
  border: 2px solid #17330f; color: #f3ffe4; font-family: var(--font-mono); font-size: 12px;
}

/* ---- paquetes de tickets ---- */
body.bosque .packs { display: flex; flex-direction: column; gap: 7px }
body.bosque .pack {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  background: #0b1e0d; border: 2px solid #3d7139;
  font-family: var(--font-head); color: #f3ffe4;
}
body.bosque .pack::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 999px;
  border: 2px solid #6ba85c; background: rgba(0, 0, 0, .35);
}
body.bosque .pack.on {
  border-color: #f2c73c; background: #453a11;
  box-shadow: 0 0 0 2px rgba(242, 199, 60, .28), 0 3px 8px rgba(0, 0, 0, .4);
}
body.bosque .pack.on::before { border-color: #f2c73c; background: radial-gradient(circle, #ffe98a 42%, transparent 46%) }
body.bosque .pack:disabled { opacity: .45; cursor: default }
body.bosque .pk-tk { flex: 1 1 0; font-weight: 800; font-size: 17px }
body.bosque .pk-usd { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: #ffe9a6 }
body.bosque .qtotals { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px }
body.bosque .qtotals > div { display: flex; align-items: center; justify-content: space-between; gap: 10px }
body.bosque .qt-l {
  font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #cfe6bf;
}
body.bosque .qt-v { font-family: var(--font-mono); font-weight: 700; font-size: 19px; color: #ffe9a6 }

/* ---- el monto exacto y los datos de la transferencia ---- */
body.bosque .paybox {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 11px; padding: 10px;
  border-radius: 12px; background: #4a3a10; border: 2px dashed #f2c73c;
}
body.bosque .pb-l {
  font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #ffeab0;
}
body.bosque .pb-v { font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: #fff6d8 }
body.bosque .paydest p { margin: 4px 0; font-family: var(--font-mono); font-size: 14px; color: #eaffdc }
body.bosque .paydest p b { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: #ffffff }

/* ---- referidos ---- */
body.bosque .rf-title { }
body.bosque .rf-linkrow { display: flex; gap: 7px; align-items: center; margin-bottom: 9px }
body.bosque .rf-linkrow input { flex: 1 1 0; min-width: 0 }
body.bosque .rf-stats { display: flex; gap: 9px }
body.bosque .rf-stat {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 8px 11px;
}
body.bosque .rf-s-l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-align: center; color: #bcdcae }
body.bosque .rf-s-v { font-family: var(--font-mono); font-weight: 700; font-size: 23px; color: #ffe9a6 }
body.bosque .rf-stat.ok .rf-s-v { color: #b6f58c }
body.bosque .rf-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0;
  border-top: 1px solid rgba(107, 168, 92, .22);
}
body.bosque .rf-item:first-of-type { border-top: 0 }
body.bosque .rf-nm { font-family: var(--font-head); font-weight: 800; font-size: 13.5px; color: #fff6e2 }
body.bosque .rf-tag {
  flex: none; font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid #4b8b45; color: #cfe6bf;
}
body.bosque .rf-tag.ok { background: rgba(139, 224, 106, .18); border-color: #8be06a; color: #d8ffc4 }
body.bosque .rf-tag.done { background: rgba(120, 200, 255, .14); border-color: #5b93b8; color: #cfeaff }
/* 0123: el referido de antes del cambio, que no entra en la regla nueva. Apagado a
   proposito —gris, sin color de estado— para que no se confunda con "va avanzando" ni con
   "ya esta": no es una etapa, es un no. */
body.bosque .rf-tag.vieja { background: rgba(255, 255, 255, .05); border-color: #4a5a46; color: #9aa894 }
body.bosque .rf-how-s { margin: 5px 0 0 }

/* ---- lo que queda SUELTO sobre el fondo ------------------------------------
   Salió de auditar las 5 vistas buscando texto sin contorno cuyos ancestros no
   le pongan fondo propio. Dos casos:

   · En "Comprar tickets" los campos de referencia y comprobante son hijos
     directos de la tarjeta, no van dentro de un panel. En vez de ponerles
     contorno a las etiquetas, se le da panel al campo: queda más limpio y de
     paso agrupa lo que es un solo paso (el comprobante).
   · En "Referidos" el subtítulo y la etiqueta del enlace sí cuelgan del fondo,
     y ahí el contorno es la solución (son encabezados, no formulario). */
body.bosque #card > .field {
  background: linear-gradient(180deg, #1b3c20, #0e2412);
  border: 2px solid #4b8b45; border-radius: 16px; padding: 11px 12px 12px; margin: 0 0 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
}
body.bosque .rf-wrap > .rf-sub, body.bosque .rf-wrap > .rf-lbl {
  color: #f3ffe4; font-weight: 700;
  -webkit-text-stroke: .15em #143314; paint-order: stroke fill; text-shadow: 0 .08em .12em rgba(0, 0, 0, .55);
}
body.bosque .rf-wrap > .rf-sub { font-size: 12px; text-align: center; margin: 0 0 12px }

/* ---- mensajes ---- */
body.bosque .msg {
  margin: 9px 0 0; padding: 9px 11px; border-radius: 11px; text-align: center;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45;
  background: rgba(120, 30, 20, .35); border: 1px solid #a8483c; color: #ffd9cf;
}
body.bosque .msg.info { background: rgba(20, 60, 30, .45); border-color: #4b8b45; color: #dcf3cc }
body.bosque .msg.ok { background: rgba(40, 100, 40, .45); border-color: #8be06a; color: #d8ffc4 }
/* v17: el aviso del fragmento en la pantalla de resultado. El título va grande
   (es la buena noticia del que quedó lejos) y la explicación de lo acumulable
   debajo, más chica — que es el dato que lo trae de vuelta mañana. */
body.bosque .frag-nota { font-size: 15px; font-weight: 700; line-height: 1.25 }
body.bosque .frag-nota .frag-sub {
  display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; opacity: .92;
}
body.bosque .msg:empty { display: none }

/* ---- la racha ---- */
body.bosque .rk { background: rgba(10, 26, 12, .72); border: 2px solid #4b8b45; border-radius: 13px; padding: 9px 11px }
body.bosque .rk-t { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: #ffe9a6 }
body.bosque .rk-help { background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; color: #9ef07a; text-decoration: underline }
body.bosque .rk-n { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: #ffe9a6 }

/* ---- barra de verificación del pago ---- */
body.bosque .vbar { height: 12px; border-radius: 999px; background: rgba(8, 22, 10, .8); border: 2px solid #3d7139; overflow: hidden }
body.bosque .vfill { height: 100%; background: linear-gradient(90deg, #8be06a, #f2c73c) }

/* ---- soporte flotante: naranja, igual que el del lobby ---- */
body.bosque #chatBtn {
  background: linear-gradient(180deg, #ffb149, #ea6412); border: 2px solid #7d3005; color: #3f1602;
  box-shadow: 0 4px 0 #5e2404, 0 9px 20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .42);
}
body.bosque #chatBadge { background: #d91f10; border-color: #ffeccd }

@media (max-width: 380px) {
  body.bosque #card h2:not(.bq-nombre) { border-width: 24px 28px 10px 30px; min-height: 46px; font-size: 15px }
  body.bosque .bal-big { font-size: 32px }
  body.bosque .btn { font-size: 15px; padding: 11px 12px 12px }
}

/* ---- CONTRARRELOJ: pantalla final -----------------------------------------
   Los dos cuadritos (saldo y tickets) usan la MISMA capsula 9-slice de las
   estadisticas del lobby, para que se vea de la casa y no un invento nuevo.
   El titulo va en UNA linea: clamp con minimo bajo para que el texto en ingles
   (mas largo) tambien entre en un telefono angosto sin cortarse. */
/* LA NOTIFICACION DEL PREMIO: el contenedor de la casa, RECTANGULAR, y de ahi salen las
   monedas. Es el MISMO panel que .panel / .wcard / .top3 — mismo verde, mismo borde
   #4b8b45, mismos 16 px de esquina, misma sombra — o sea el contenedor que ya se usa en
   todo el juego para dar informacion.
   TRES INTENTOS, anotados para que nadie repita ninguno:
     1) El panel del ancho ENTERO de la tarjeta, con casi el mismo relleno que un boton
        (11/14/13 contra 12/14/13) y pegado justo encima de uno. El dueño: "parece un
        boton" — y con razon: era del mismo ancho, del mismo alto y en el mismo sitio.
     2) La TABLA DE MADERA. Error mio de bulto: mire el `h2` de las tarjetas y di por hecho
        que la madera era material de titulo. Es al reves — `.bq-tabla` son LOS BOTONES DE
        LA LISTA DEL LOBBY, y hasta se hunden al tocarlos (:active translateY). Cambie un
        boton por otro boton.
     3) Cuadrada con las esquinas en angulo recto. Se despega de un boton, si, pero tambien
        se despega del juego: nada mas en la app tiene esquinas rectas.
   LO QUE LO SALVA no es el material ni el radio, es el ANCHO Y EL CONTENIDO: mide 216 px
   contra los ~363 de la tarjeta, asi que no comparte silueta con ningun boton (todos son de
   ancho completo), y dentro no hay un rotulo sino un dato — rotulo chico, cifra grande,
   rotulo chico. Es la version en grande de las dos capsulas del saldo y los tickets que
   estan justo arriba, con su misma tipografia (#cfe6bf mono en mayusculas y #b6f58c mono).
   DE AQUI SALEN LAS MONEDAS, DESDE DENTRO: volarMonedas() nace en el centro de la CIFRA y
   sube hasta el saldo, asi que las monedas cruzan la caja de abajo hacia arriba. La capa de
   las monedas va en z-index 60, por encima de la tarjeta, para que se vean pasando por
   delante del panel y no por detras.
   El aire de media pantalla lo pone `.premio-slot` (mas abajo) y no esta caja, para que al
   irse no se mueva nada. */
body.bosque #card .premio-big {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-sizing: border-box;              /* no hay border-box global: sin esto el ancho miente */
  width: fit-content; max-width: 100%;
  margin: 0 auto 10px; padding: 12px 18px 14px;
  background: linear-gradient(180deg, #1b3c20, #0e2412);
  border: 2px solid #4b8b45; border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
  font-size: 12px; line-height: 1.3; color: #cfe6bf;
  -webkit-text-stroke: 0; text-shadow: none;
}
/* las dos mitades de la frase, partidas para dejar la cifra sola en el medio */
body.bosque #card .premio-big .pg-t {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #cfe6bf; white-space: nowrap;
}
/* LA CIFRA, que es lo que se vacia hasta $0 mientras las monedas viajan. Va en el centro y
   grande porque es la noticia: el resto de la frase solo la enmarca. */
body.bosque #card .premio-big b {
  font-family: var(--font-mono); font-weight: 700; font-size: 40px; line-height: 1.02;
  color: #b6f58c; text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
/* RECTANGULAR: 216 px de ancho contra unos 124 de alto (1,74). El ancho es fijo y NO depende
   de vw, asi que mide igual en un telefono de 320 que en uno de 430 y no hay forma de que
   crezca hasta empujar el boton fuera de la pantalla. Tambien deja sitio de sobra para el
   rotulo mas largo de los dos idiomas ("YOU COLLECTED", 167 px).
   SIN PREMIO no se pone esta clase: no hay cifra, es una nota de una linea, y estirarla a
   216 px dejaria aire a los lados sin motivo. */
body.bosque #card .premio-big.con-monto { min-width: 216px }
/* EL HUECO ES DEL CONTENEDOR, NO DE SUS HIJOS. `.premio-slot` envuelve a la notificacion y a
   los tres botones, y es EL quien pone el aire de media pantalla. Asi, cuando la notificacion
   se va, el boton que aparece queda en el mismo sitio sin heredar nada.
   La primera version le pasaba el margen al boton con una clase (.enmedio) y perdia contra el
   `#r-canje { margin-top: 0 }` de theme.css — el boton se subia 118 px. Se podia ganar la
   pelea de especificidad, pero un hueco que depende de quien grita mas fuerte se rompe solo
   el dia que alguien toque cualquiera de los dos archivos. Con el hueco aqui no hay pelea.
   El tope en vh no es adorno: 170 px fijos caben en un telefono de 812 de alto, pero en uno
   de 568 empujarian el boton fuera de la pantalla. */
body.bosque #card .premio-slot { margin-top: min(170px, 22vh) }
body.bosque #card .premio-slot > * { margin-top: 0 }
body.bosque .res-stats { display: flex; gap: 8px; justify-content: center; margin: 8px 0 8px }
body.bosque .res-stat {
  flex: 1 1 0; min-width: 0; max-width: 200px; padding: 6px 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 11px solid transparent;
  border-image: url("assets/ui/capsula.webp?v=1") 47 fill / 11px / 0 stretch;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
}
body.bosque .res-stat .rs-l {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #cfe6bf; white-space: nowrap;
}
body.bosque .res-stat .rs-v {
  font-family: var(--font-mono); font-size: 21px; font-weight: 700;
  color: #b6f58c; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}