/* ═══════════════════════════════════════════════════════════════════
   RASCA Y GANA · el puesto de boletos
   ───────────────────────────────────────────────────────────────────
   No es una pantalla: es un BOLETO DE PAPEL apoyado en el mostrador de
   un puesto de lotería, de noche. Linóleo verde, canto de madera y una
   bombilla desnuda arriba a la derecha. El papel es hueso, la tinta es
   azul de imprenta y el sello es carmín. Nada de naranja: ese era el
   problema anterior (se leía como Minas repintado).

   Todo cuelga de body.escena-rasca para ganarle en especificidad a la
   identidad vieja de ident-casino.css, se cargue antes o después.
   Sin degradado sobre texto, sin resplandores, sin cristal esmerilado,
   sin bordes dorados translúcidos.
   ═══════════════════════════════════════════════════════════════════ */

body.escena-rasca{
  --pap:#e7dcc4;            /* papel hueso                              */
  --pap-2:#d8cbaf;          /* talón, zona de seguridad                 */
  --pap-3:#c3b391;          /* sombra del troquel, ventanas impresas    */
  --tinta:#1b2433;          /* azul de imprenta, no negro               */
  --tinta-2:#5d6577;        /* letra chica                              */
  --tinta-3:#9aa08d;        /* fondo de seguridad                       */
  --carmin:#a02a2c;         /* la segunda tinta: sello y avisos         */
  --lat:#8f8b83;            /* látex plomo, MATE                        */
  --mesa:#16211d;           /* linóleo del mostrador                    */
  --madera:#2b2018;

  /* tiempos propios: cortos y secos, de papel */
  --t-romper:.19s;
  --t-boleto:.62s;
  --c-papel:cubic-bezier(.16,1,.3,1);
  --c-sello:cubic-bezier(.2,1.7,.36,1);
}

/* ═══════ 1 · LA ESCENA ═══════ */
body.escena-rasca .escena-fondo{
  opacity:1;
  background:
    /* la bombilla, arriba a la derecha, luz cruda y fría */
    radial-gradient(ellipse 46% 34% at 72% 2%, rgba(255,244,214,.20), transparent 64%),
    /* el mostrador ocupa la mitad de abajo */
    linear-gradient(180deg, #0c1310 0%, #0e1714 38%, var(--mesa) 44%, #101a16 100%),
    #0c1310;
}
/* linóleo: trama fina en diagonal, y el canto de madera del mostrador */
body.escena-rasca .escena-fondo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg, transparent 0 43.2%, var(--madera) 43.2% 44.4%, transparent 44.4%),
    repeating-linear-gradient(38deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse 90% 60% at 50% 118%, rgba(0,0,0,.75), transparent 62%);
}

/* La identidad vieja (ident-casino.css) pinta el panel con un solo ID:
   #p-rasca{background:#12100e} y #p-rasca::before. En escena el juego se
   queda la pantalla entera, así que hay que retirar ese marco a mano —
   la regla genérica body[class*="escena-"] .panel.on NO puede, pierde
   contra el ID. Aquí sí gana: body.escena-rasca + #p-rasca. */
body.escena-rasca #p-rasca{
  background:none;border:none;box-shadow:none;padding:0;
  --ac:var(--carmin);
  --ac-op:rgba(160,42,44,.12);
}
body.escena-rasca #p-rasca::before,
body.escena-rasca #p-rasca::after{display:none;content:none}

body.escena-rasca .rs-mesa{
  position:relative;width:min(392px,100%);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
}
/* la caída de luz sobre el papel: sombra dura hacia la izquierda */
body.escena-rasca .rs-luz{
  position:absolute;inset:-40px -30px 20px;pointer-events:none;
  background:radial-gradient(ellipse 60% 52% at 68% 6%, rgba(255,246,222,.10), transparent 70%);
}

/* ═══════ 2 · EL BOLETO ═══════ */
body.escena-rasca #p-rasca .rs-boleto{
  position:relative;width:100%;display:flex;
  transform:rotate(-.7deg);
  background:var(--pap);
  color:var(--tinta);
  border-radius:2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    -14px 16px 22px rgba(0,0,0,.55),
    0 2px 3px rgba(0,0,0,.4);
}
/* fibra del papel + dos manchas de tinta viejas. Textura, no brillo. */
body.escena-rasca #p-rasca .rs-boleto::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(circle 60px at 88% 92%, rgba(154,160,141,.16), transparent 70%),
    radial-gradient(circle 40px at 6% 12%, rgba(154,160,141,.12), transparent 70%),
    repeating-linear-gradient(96deg, rgba(120,110,86,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(4deg, rgba(120,110,86,.04) 0 1px, transparent 1px 4px);
}
/* el boleto entra en escena: sale del talonario y se posa */
@keyframes rs-posar{
  0%  {opacity:0;transform:translate(26px,-30px) rotate(6deg)}
  62% {opacity:1;transform:translate(-2px,2px) rotate(-2.2deg)}
  100%{opacity:1;transform:translate(0,0) rotate(-.7deg)}
}
body.escena-rasca #p-rasca .rs-boleto.nuevo{animation:rs-posar var(--t-boleto) var(--c-papel) both}
body.escena-rasca #p-rasca .rs-boleto.usado{filter:saturate(.62) brightness(.9)}

/* ── el talón troquelado ── */
body.escena-rasca #p-rasca .rs-talon{
  flex:none;width:34px;background:var(--pap-2);
  border-radius:2px 0 0 2px;
  display:grid;place-items:center;overflow:hidden;
}
body.escena-rasca #p-rasca .rs-talon .rs-serie-v{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;
  font-variant-numeric:tabular-nums;color:var(--tinta-2);white-space:nowrap;
}
/* la perforación: agujeros de verdad, se ve el mostrador por ellos */
body.escena-rasca #p-rasca .rs-troquel{
  flex:none;width:5px;margin:0 -1px;
  background-image:radial-gradient(circle at 50% 50%, var(--mesa) 1.5px, transparent 1.7px);
  background-size:5px 9px;
  box-shadow:1px 0 0 rgba(120,110,86,.35) inset, -1px 0 0 rgba(120,110,86,.35) inset;
}

body.escena-rasca #p-rasca .rs-cuerpo{
  flex:1;min-width:0;padding:11px 13px 12px;
  display:flex;flex-direction:column;gap:9px;
}

/* ── cabecera impresa ── */
body.escena-rasca #p-rasca .rs-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding-bottom:8px;border-bottom:2px solid var(--tinta);
}
body.escena-rasca #p-rasca .rs-marca b{
  display:block;font-size:15px;font-weight:800;letter-spacing:.1em;
  color:var(--tinta);line-height:1;
}
body.escena-rasca #p-rasca .rs-marca span{
  display:block;margin-top:4px;font-size:8px;letter-spacing:.2em;color:var(--tinta-2);
}
body.escena-rasca #p-rasca .rs-emision{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--carmin);
  font-variant-numeric:tabular-nums;text-align:right;line-height:1.35;flex:none;
}

/* ── el campo de las nueve ventanas ── */
body.escena-rasca #p-rasca .rs-campo{position:relative;touch-action:none}
body.escena-rasca #p-rasca .rejilla{
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
  max-width:none;width:100%;margin:0;
}
/* ventana impresa en el papel: hueco, con marco de tinta */
body.escena-rasca #p-rasca .cas{
  aspect-ratio:1;border-radius:1px;display:grid;place-items:center;
  font-size:29px;line-height:1;cursor:default;
  background:var(--pap-3);
  border:1px solid rgba(27,36,51,.5);
  box-shadow:inset 0 1px 2px rgba(90,80,60,.45);
  color:var(--tinta);
  animation:none;transform:none;
}
body.escena-rasca #p-rasca .cas::before,
body.escena-rasca #p-rasca .cas::after{display:none}
body.escena-rasca #p-rasca .cas:hover:not(.abierta){background:var(--pap-3);transform:none}
/* destapada: el símbolo se estampa en el papel */
body.escena-rasca #p-rasca .cas.abierta{
  background:var(--pap);border-color:rgba(27,36,51,.32);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  animation:rs-estampar .26s var(--c-sello) both;
}
@keyframes rs-estampar{
  0%{transform:scale(1.22);opacity:0}
  60%{transform:scale(.97);opacity:1}
  100%{transform:scale(1);opacity:1}
}
/* del trío ganador: se rodea con lápiz carmín, como hace el vendedor */
body.escena-rasca #p-rasca .cas.premiada{
  background:var(--pap);
  border:2px solid var(--carmin);
  box-shadow:0 0 0 1px rgba(160,42,44,.28);
}

/* los dos lienzos, exactamente encima de la rejilla */
body.escena-rasca #p-rasca .rs-latex,
body.escena-rasca #p-rasca .rs-restos{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
body.escena-rasca #p-rasca .rs-latex{cursor:crosshair;touch-action:none;z-index:2}
body.escena-rasca #p-rasca .rs-restos{pointer-events:none;z-index:3}

/* la moneda que cruza el boleto al pulsar PASAR LA MONEDA */
body.escena-rasca #p-rasca .rs-moneda{
  position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;
  z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 36% 30%, #d9d2c2, #8e8776 62%, #55503f);
  box-shadow:0 3px 6px rgba(0,0,0,.5);
}
body.escena-rasca #p-rasca .rs-moneda.pasa{animation:rs-moneda 1.1s linear both}
@keyframes rs-moneda{
  0%  {opacity:0;transform:translate(-14%,-24%) rotate(0)}
  8%  {opacity:1}
  100%{opacity:0;transform:translate(340%,330%) rotate(520deg)}
}

/* la instrucción impresa al pie del campo, desaparece al primer rasgón */
body.escena-rasca #p-rasca .rs-instruccion{
  position:absolute;left:0;right:0;bottom:-13px;text-align:center;
  font-size:8px;letter-spacing:.3em;color:var(--tinta-2);
  transition:opacity .25s linear;pointer-events:none;
}
body.escena-rasca #p-rasca .rs-campo.tocado .rs-instruccion{opacity:0}
body.escena-rasca #p-rasca .rs-campo.inerte .rs-instruccion{opacity:0}

/* ── letra chica y tabla de pagos ── */
body.escena-rasca #p-rasca .rs-letrachica{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-top:8px;padding-top:7px;border-top:1px dashed rgba(27,36,51,.35);
  font-size:8px;letter-spacing:.2em;color:var(--tinta-2);
}
body.escena-rasca #p-rasca .rs-tabla{
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--tinta);
  font-variant-numeric:tabular-nums;
}

/* ── valor del boleto: casillas impresas ── */
body.escena-rasca #p-rasca .rs-valor{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
body.escena-rasca #p-rasca .rs-lab{
  font-size:8px;letter-spacing:.2em;color:var(--tinta-2);flex:none;
}
body.escena-rasca #p-rasca .rs-fichas{display:flex;gap:4px}
body.escena-rasca #p-rasca .chip{
  width:auto;min-width:40px;height:24px;padding:0 6px;border-radius:1px;
  font-family:var(--mono);font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
  background:transparent;border:1px solid rgba(27,36,51,.45);color:var(--tinta-2);
  box-shadow:none;cursor:pointer;transition:none;
}
body.escena-rasca #p-rasca .chip:hover{background:rgba(27,36,51,.07);color:var(--tinta);transform:none}
/* marcado a mano con el lápiz carmín */
body.escena-rasca #p-rasca .chip.on{
  background:transparent;border:2px solid var(--carmin);color:var(--carmin);
  box-shadow:none;
}

/* ── el renglón de validación ── */
body.escena-rasca #p-rasca .res{
  text-align:left;margin:2px 0 0;min-height:30px;
  padding-top:6px;border-top:1px solid rgba(27,36,51,.25);
}
body.escena-rasca #p-rasca .res .big{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;color:var(--tinta) !important;
}
body.escena-rasca #p-rasca .res .big[style*="240"],
body.escena-rasca #p-rasca .res .big[style*="f0b429"]{color:var(--carmin) !important}
body.escena-rasca #p-rasca .res .small{
  font-size:8px;letter-spacing:.16em;color:var(--tinta-2);text-transform:uppercase;
}

/* ── el sello de validación ── */
body.escena-rasca #p-rasca .rs-sello{
  position:absolute;right:14px;bottom:8px;z-index:5;pointer-events:none;
  opacity:0;transform:rotate(-13deg) scale(1.6);
}
body.escena-rasca #p-rasca .rs-sello span{
  display:block;padding:4px 10px;border:2px solid var(--carmin);border-radius:2px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.24em;
  color:var(--carmin);
}
body.escena-rasca #p-rasca .rs-sello.marcado{animation:rs-sellar .42s var(--c-sello) both}
body.escena-rasca #p-rasca .rs-sello.gris span{border-color:var(--tinta-2);color:var(--tinta-2)}
@keyframes rs-sellar{
  0%  {opacity:0;transform:rotate(-13deg) scale(1.7)}
  55% {opacity:.95;transform:rotate(-13deg) scale(.94)}
  100%{opacity:.82;transform:rotate(-13deg) scale(1)}
}

/* ═══════ 3 · EL MANDO ═══════ */
body.escena-rasca #p-rasca .rs-mando{
  display:flex;gap:10px;justify-content:center;align-items:center;
  margin-top:20px;
}
body.escena-rasca #p-rasca .btn{
  height:38px;border-radius:2px;display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.18em;font-weight:700;box-shadow:none;
}
/* el talonario: papel hueso con el canto rojo del cupón */
body.escena-rasca #p-rasca .btn.oro{
  padding:0 16px;background:var(--pap);color:var(--tinta);
  border:1px solid #8b7f60;
  box-shadow:0 3px 0 #8b7f60, 0 8px 16px rgba(0,0,0,.5);
}
body.escena-rasca #p-rasca .btn.oro:hover:not(:disabled){background:#f2e8d2}
body.escena-rasca #p-rasca .btn.oro:active:not(:disabled){
  transform:translateY(3px);box-shadow:0 0 0 #8b7f60, 0 3px 8px rgba(0,0,0,.5);
}
body.escena-rasca #p-rasca .btn.oro .rs-tira{
  width:11px;height:18px;flex:none;border-radius:1px;
  background:repeating-linear-gradient(180deg, var(--carmin) 0 3px, #7d1f21 3px 6px);
}
body.escena-rasca #p-rasca .btn.s{
  padding:0 13px;background:transparent;color:#93a09a;
  border:1px solid #3a4a44;
}
body.escena-rasca #p-rasca .btn.s:hover:not(:disabled){background:#182420;color:#cfd8d2}
body.escena-rasca #p-rasca .btn.s .rs-mon{
  width:14px;height:14px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 36% 30%, #cfc8b8, #8e8776 62%, #55503f);
}

/* ═══════ 4 · ALTURAS PEQUEÑAS (Discord: 543 px de alto) ═══════ */
@media(max-height:700px){
  body.escena-rasca .rs-mesa{width:min(330px,100%)}
  body.escena-rasca #p-rasca .cas{font-size:24px}
  body.escena-rasca #p-rasca .rs-cuerpo{padding:9px 10px 10px;gap:7px}
  body.escena-rasca #p-rasca .rs-marca b{font-size:13px}
  body.escena-rasca #p-rasca .rs-mando{margin-top:14px}
}
@media(max-height:600px){
  body.escena-rasca .rs-mesa{width:min(292px,100%)}
  body.escena-rasca #p-rasca .cas{font-size:21px}
  body.escena-rasca #p-rasca .rejilla{gap:4px}
  body.escena-rasca #p-rasca .rs-letrachica{margin-top:5px;padding-top:5px}
  body.escena-rasca #p-rasca .res{min-height:26px}
  body.escena-rasca #p-rasca .rs-mando{margin-top:11px}
  body.escena-rasca #p-rasca .btn{height:34px;font-size:10px}
}
/* el caso duro: 900×500. El boleto se encoge, nunca aparece una barra. */
@media(max-height:520px){
  body.escena-rasca .rs-mesa{width:min(264px,100%)}
  body.escena-rasca #p-rasca .cas{font-size:19px}
  body.escena-rasca #p-rasca .rs-cuerpo{padding:7px 9px 8px;gap:6px}
  body.escena-rasca #p-rasca .rs-cab{padding-bottom:6px}
  body.escena-rasca #p-rasca .rs-marca b{font-size:12px}
  body.escena-rasca #p-rasca .rs-marca span,
  body.escena-rasca #p-rasca .rs-letrachica{font-size:7px}
  body.escena-rasca #p-rasca .res{min-height:22px}
  body.escena-rasca #p-rasca .btn{height:30px;font-size:9px;letter-spacing:.14em}
}
@media(max-width:420px){
  body.escena-rasca #p-rasca .rs-boleto{transform:none}
  body.escena-rasca #p-rasca .rs-letrachica{flex-direction:column;gap:2px}
}

@media(prefers-reduced-motion:reduce){
  body.escena-rasca #p-rasca .rs-boleto.nuevo,
  body.escena-rasca #p-rasca .cas.abierta,
  body.escena-rasca #p-rasca .rs-sello.marcado,
  body.escena-rasca #p-rasca .rs-moneda.pasa{animation-duration:.01s}
}