/* Monolitario: a green instant-lottery ticket lying on a marble café table. */

@font-face { font-family: "Barlow Condensed"; src: url(assets/fonts/barlowcondensed-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(assets/fonts/barlowcondensed-extrabold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(assets/fonts/barlowcondensed-blackitalic.woff2) format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(assets/fonts/barlow-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(assets/fonts/barlow-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --verde: #2fa84f;
  --verde-medio: #1e7a37;
  --verde-tinta: #0b3d1e;
  --verde-panel: #e3f3cf;
  --amarillo: #ffe14d;
  --oro: #f6b814;
  --naranja: #f08316;
  --rojo: #d2141b;
  --rojo-hondo: #8f0c10;
  --papel: #f6f7ef;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--texto);
  font-size: 1rem;
  color: var(--verde-tinta);
  /* a café table seen from a seated customer's eyes, not from the ceiling */
  background: #cfcac2 url(assets/img/mesa-alta.webp) 50% 100% / auto 120% no-repeat;
  overflow-x: hidden;
}
body::before { /* window light from the upper left, the room falls off at the edges */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 22% 18%, rgb(255 238 208 / .14), transparent 60%),
    radial-gradient(150% 120% at 50% 55%, transparent 55%, rgb(24 16 8 / .34));
}
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- scene ---------- */
.escena {
  --cw: min(calc((100vw - 32px) * .9), calc((100dvh - 110px) * .5625 / .93), 470px); /* the near edge grows in perspective: keep the 16px gutter */
  /* the ticket lies on the table: tilted away with it and turned a little on it, never yawed sideways */
  --rx: 24deg; --rz: -1.5deg; --alza: 64px; --grueso: 1cqw; --dur: 1.15s;
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  perspective: 1300px;
  perspective-origin: 50% 45%;
  overflow: clip;
}
.boleto, .otro, .sombra { grid-area: 1 / 1; width: var(--cw); }
.otro { display: none; }

.boleto {
  position: relative;
  container-type: inline-size;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateZ(var(--rz));
  z-index: 2;
}

/* ---------- ticket, shared ---------- */
.cara { font-size: 4.5cqw; line-height: 1.3; }
.frente {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 2.6cqw;
  background: #fbfcf6;
  padding: 1.3cqw;
}
.marco {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  border: 2.2cqw solid var(--naranja);
  border-radius: 1.8cqw;
  padding: 2.4cqw 3.2cqw 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 23%, rgb(255 255 200 / .45), transparent 34%),
    radial-gradient(110% 70% at 50% 24%, #5fc463 0%, var(--verde) 42%, var(--verde-medio) 100%);
}
.marco::before { /* offset halftone printed over the green */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(11 61 30 / .16) 22%, transparent 26%);
  background-size: 1.6cqw 1.6cqw;
  mask-image: linear-gradient(to bottom, transparent 10%, #000 60%);
}
.frente::before { /* card-stock grain over the print */
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: url(assets/img/grano.webp) 0 0 / 200px; mix-blend-mode: multiply; opacity: .16;
}

.cabecera { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 9cqw; }
.marca {
  display: inline-flex; align-items: center; gap: 1.2cqw;
  background: #fff; border-radius: 1.2cqw; padding: .8cqw 1.8cqw .8cqw .9cqw;
  box-shadow: 0 .5cqw 0 rgb(11 61 30 / .35);
}
.marca svg { width: 6.2cqw; height: 6.2cqw; background: var(--verde-medio); border-radius: .9cqw; padding: .6cqw; fill: #fff; }
.marca svg .estrella { fill: var(--amarillo); }
.marca b { font: 800 5.6cqw/1 var(--cond); letter-spacing: .02em; color: var(--verde-medio); }
.precio {
  margin-right: 12cqw;
  font: 800 5.4cqw/1 var(--cond); color: #fff;
  background: var(--naranja); border-radius: 1.2cqw; padding: 1cqw 1.8cqw;
  box-shadow: 0 .5cqw 0 rgb(120 50 0 / .5);
  font-variant-numeric: lining-nums;
}

.titulo { position: relative; height: 45cqw; margin: -3.4cqw -3.2cqw 0; display: grid; place-items: center; }
.rayos { position: absolute; width: 150cqw; max-width: none; left: 50%; top: 50%; translate: -50% -50%; opacity: .92; pointer-events: none; }
.titulo h1 { position: relative; margin: 0; width: 86cqw; }
.titulo h1 img { width: 100%; filter: drop-shadow(0 1.2cqw .6cqw rgb(6 40 18 / .45)); }

.cinta {
  position: relative; z-index: 2; margin: -5.4cqw auto 0; display: flex; align-items: center; justify-content: center;
}
.cinta > span:first-child {
  display: block; padding: 1cqw 3.4cqw 1.1cqw;
  font: italic 900 7.2cqw/1 var(--cond); color: var(--rojo); letter-spacing: .005em;
  background: #fff; border-radius: 1.2cqw; transform: rotate(-2.5deg) skewX(-6deg);
  box-shadow: .6cqw .9cqw 0 var(--verde-tinta);
}
.estallido {
  position: absolute; right: -10.5cqw; top: -8.5cqw;
  width: 15cqw; height: 15cqw; display: grid; place-items: center; text-align: center;
  font: 800 3.1cqw/.95 var(--cond); color: var(--verde-tinta);
  background: var(--amarillo);
  clip-path: polygon(50% 0, 59% 16%, 75% 7%, 76% 25%, 93% 25%, 85% 41%, 100% 50%, 85% 59%, 93% 75%, 76% 75%, 75% 93%, 59% 84%, 50% 100%, 41% 84%, 25% 93%, 24% 75%, 7% 75%, 15% 59%, 0 50%, 15% 41%, 7% 25%, 24% 25%, 25% 7%, 41% 16%);
  transform: rotate(14deg);
  padding: 2cqw;
}

.juego {
  position: relative; z-index: 2;
  margin-top: 2.8cqw;
  background: var(--verde-panel);
  border: .6cqw solid var(--verde-tinta);
  border-radius: 2.2cqw;
  padding: 2.4cqw 2.4cqw 2.4cqw;
  box-shadow: 0 .8cqw 0 rgb(11 61 30 / .35), inset 0 0 0 .6cqw #fff;
}
.casillas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2cqw 2.2cqw; }
.casillas li { display: block; }
.casilla {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.04;
  padding: 0; border: .5cqw solid var(--verde-tinta); border-radius: 1.8cqw;
  background: radial-gradient(circle at 50% 40%, #fffdf2, #f1f4df 70%);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.casilla img { position: absolute; left: 7%; right: 7%; top: 3%; width: 86%; height: 78%; object-fit: contain; }
.casilla canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 1.3cqw; z-index: 1;
  touch-action: none; transition: opacity .35s ease, filter .35s ease;
  cursor: url(assets/img/moneda-cursor.png) 24 24, crosshair;
}
.casilla::after { /* foil sheen, follows the tilt */
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 1.3cqw; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .55) 48%, transparent 58%);
  background-size: 300% 100%;
  background-position: var(--brillo, 60%) 0;
  mix-blend-mode: overlay;
  transition: opacity .35s ease;
}
.casilla.rascada canvas, .casilla.rascada::after { opacity: 0; pointer-events: none; }
.casilla.no-lamina::after { display: none; }
.casilla.bloqueada canvas { filter: grayscale(.85) brightness(.8); cursor: not-allowed; }
.etiqueta {
  position: absolute; z-index: 2; left: 50%; bottom: -2.4cqw; translate: -50% 0;
  font: 800 3.5cqw/1 var(--cond); letter-spacing: .04em; color: #fff;
  background: var(--rojo); border: .4cqw solid #fff; border-radius: 1cqw; padding: .7cqw 1.8cqw .6cqw;
  box-shadow: 0 .4cqw 0 var(--rojo-hondo);
  pointer-events: none;
}
.bonus { border-color: #9a5a00; background: radial-gradient(circle at 50% 40%, #fff6cf, #fde79a 75%); }
.bonus .etiqueta { background: var(--oro); color: var(--verde-tinta); box-shadow: 0 .4cqw 0 #9a5a00; }
.casilla:focus-visible { outline: 1.1cqw solid var(--amarillo); outline-offset: .6cqw; }
.casilla.vista { box-shadow: 0 0 0 .8cqw var(--naranja); }

.lectura {
  margin: 4cqw 0 0; padding: 1.8cqw 2.8cqw; min-height: calc(4 * 1.3em + 3.6cqw);
  background: #fff; border-radius: 1.4cqw;
  font-size: max(15px, 4.5cqw);
  display: flex; flex-direction: column; justify-content: center;
  text-wrap: pretty;
}
.lectura b { font-weight: 600; }

.pie {
  margin: auto -3.2cqw 0; padding: 2cqw 3.2cqw 2.2cqw;
  background: var(--verde-tinta); color: #fff;
  display: grid; gap: 1.6cqw;
}
.letra-pequena { margin: 0; font: 600 3.2cqw/1.25 var(--cond); color: #e9f5de; }
.serie { display: flex; align-items: center; gap: 2cqw; background: #fff; border-radius: 1cqw; padding: 1cqw 1.6cqw; color: var(--verde-tinta); }
.serie img { width: 30cqw; height: 5.4cqw; }
.serie span { font: 600 3.2cqw/1 var(--cond); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* peeled corner: the card is cut on the diagonal and the flap shows the white back */
.frente { clip-path: polygon(0 0, calc(100% - 12cqw) 0, 100% 12cqw, 100% 100%, 0 100%); }
/* seen from behind, the missing corner is on the other side */
.js .dorso { clip-path: polygon(12cqw 0, 100% 0, 100% 100%, 0 100%, 0 12cqw); }
.doblez {
  position: absolute; top: 0; right: 0; width: 12cqw; height: 12cqw; z-index: 4;
  background: linear-gradient(to bottom left, #c7cbbd 0%, #fbfcf6 45%, #e6e9dc 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  filter: drop-shadow(-.6cqw .8cqw .6cqw rgb(0 0 0 / .35));
  pointer-events: none;
}

/* ---------- back: the printed reverse of the ticket ---------- */
.dorso {
  position: relative;
  border-radius: 2.6cqw;
  background:
    url(assets/img/trebol.webp) 118% 58% / 70cqw no-repeat,
    repeating-linear-gradient(135deg, transparent 0 1.1cqw, rgb(47 168 79 / .07) 1.1cqw 1.3cqw),
    var(--papel);
  margin-top: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dorso::before { /* wash the watermark clover down to a pale security print */
  content: ""; position: absolute; inset: 0; pointer-events: none; background: rgb(246 247 239 / .94);
}
.dorso > * { position: relative; }
.dorso-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  background: var(--verde-medio); color: #fff;
  padding: 3.2cqw 5.4cqw 3cqw 14cqw;
  border-bottom: 1.2cqw solid var(--naranja);
}
.dorso-cab h2 { margin: 0; font: 800 8.4cqw/1 var(--cond); letter-spacing: .005em; text-transform: uppercase; outline: none; }
.marca-mini { padding: .5cqw 1.2cqw .5cqw .6cqw; box-shadow: none; }
.marca-mini svg { width: 4.4cqw; height: 4.4cqw; }
.marca-mini b { font-size: 4cqw; }
.dorso-in { flex: 1; display: flex; flex-direction: column; gap: 2.4cqw; padding: 3.4cqw 5.4cqw 3.6cqw; }
.entradilla { margin: 0; }
.formulario { display: grid; gap: 1.1cqw; }
.formulario label { font-weight: 600; font-size: max(15px, 4.2cqw); }
.formulario textarea, .formulario input {
  width: 100%; min-height: 44px; border: .5cqw solid var(--verde-tinta); border-radius: 1.2cqw;
  background: #fff; padding: 1.6cqw 2.2cqw; font-size: 16px; line-height: 1.35; resize: none;
}
.formulario textarea { height: calc(3 * 1.35em + 3.2cqw + 2px); }
.formulario textarea::placeholder { color: #5b6d60; }
.formulario :focus-visible, .otras a:focus-visible, .fallo-envio a:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.formulario [aria-invalid="true"] { border-color: var(--rojo); }
.error { margin: 0; color: var(--rojo-hondo); font-weight: 600; font-size: 15px; }
.entregar {
  margin-top: 1.4cqw; min-height: 48px; border: 0; border-radius: 99px; cursor: pointer;
  font: italic 900 6cqw/1 var(--cond); color: #fff; background: var(--rojo);
  box-shadow: 0 .9cqw 0 var(--rojo-hondo);
}
.entregar:active { translate: 0 .6cqw; box-shadow: 0 .3cqw 0 var(--rojo-hondo); }
.sellado { outline: none; padding: 1cqw 0; }
.sellado-titulo { font: italic 900 9cqw/1 var(--cond); color: var(--rojo); margin-bottom: 2cqw !important; }
.sellado p { margin: 0 0 1.4cqw; }
.fallo-envio { outline: none; padding: 1.6cqw 2.2cqw; background: #fff; border-left: 1.4cqw solid var(--rojo); border-radius: 1cqw; }
.fallo-envio p { margin: 0 0 .8cqw; }
.fallo-envio p:last-child { margin: 0; }
.fallo-envio a { font-weight: 600; color: var(--rojo-hondo); text-underline-offset: .2em; display: inline-block; min-height: 44px; line-height: 44px; margin-block: -10px; }
.fila { display: flex; gap: 3cqw; align-items: center; }
.envio-fallido .fila { display: none; } /* the fallback needs the room; its mail link does the stamp's job */
.discrecion { flex: 1; margin: 0; padding: 2cqw 2.6cqw; background: #fff; border-left: 1.4cqw solid var(--verde); border-radius: 1cqw; }
.discrecion b { font-weight: 600; }
.punto-venta {
  flex: 0 0 31cqw; margin: 0; padding: 1.4cqw; aspect-ratio: 1 / 1.12;
  border: .4cqw dashed rgb(11 61 30 / .55); border-radius: 1cqw;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: .6cqw;
}
.sello { width: 100%; height: 100%; min-height: 0; color: var(--verde-medio); opacity: .8; transform: rotate(-14deg); }
.sello text { font-family: var(--cond); }
.punto-venta figcaption { font: 600 2.8cqw/1.15 var(--cond); text-align: center; color: #3b5443; }
.canjeado .sello { color: var(--rojo); opacity: .92; animation: estampar .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes estampar { from { transform: rotate(-24deg) scale(1.6); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: .92; } }
.otras { margin: 0; }
.otras a { font-weight: 600; color: var(--verde-medio); text-underline-offset: .2em; display: inline-block; min-height: 44px; line-height: 44px; margin-block: -12px; }
.bases { margin-top: auto; border-top: .4cqw dashed rgb(11 61 30 / .5); padding-top: 2cqw; }
.bases p { margin: 0; font: 600 3.3cqw/1.28 var(--cond); color: #2d4a35; }
.bases b { font-weight: 800; color: var(--verde-tinta); }
.dorso-serie { background: transparent; padding: 0; }
.dorso-serie span { font-size: 3cqw; letter-spacing: .02em; line-height: 1.15; }

/* ---------- controls ---------- */
.mandos { display: none; }
.boton {
  min-height: 52px; border-radius: 99px; cursor: pointer; padding: 0 18px;
  font: 800 19px/1 var(--cond); letter-spacing: .01em;
}
.primario { flex: 1.35; border: 0; color: #fff; background: var(--rojo); box-shadow: 0 5px 0 var(--rojo-hondo), 0 10px 18px rgb(0 0 0 / .35); font: italic 900 21px/1 var(--cond); }
.primario:active { translate: 0 3px; box-shadow: 0 2px 0 var(--rojo-hondo); }
.secundario { flex: 1; border: 3px solid var(--verde-tinta); color: var(--verde-tinta); background: rgb(246 247 239 / .94); box-shadow: 0 4px 0 rgb(11 61 30 / .5); }
.boton:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.boton[hidden] { display: none; }

/* ---------- JS: the 3D object ---------- */
.js .mandos { display: flex; gap: 12px; width: min(calc(100vw - 32px), max(var(--cw), 358px)); z-index: 3; }
.js .giro { position: relative; aspect-ratio: 9 / 16; transform-style: preserve-3d; }
.js .cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.js .frente { transform: translateZ(calc(var(--grueso) / 2)); }
.js .dorso { transform: rotateY(180deg) translateZ(calc(var(--grueso) / 2)); margin: 0; }
.js .doblez { transform: translateZ(.5px); }
/* card stock: four edge strips, so the ticket has a real thickness when it turns edge-on */
.js .canto i { position: absolute; pointer-events: none; background: linear-gradient(to right, #c3c8b6, #f2f3ea 45%, #d6dacb); }
.js .canto .c-izq { left: 0; top: 1.4cqw; bottom: 1.4cqw; width: var(--grueso); transform: translateX(-50%) rotateY(-90deg); }
.js .canto .c-der { right: 0; top: 12cqw; bottom: 1.4cqw; width: var(--grueso); transform: translateX(50%) rotateY(90deg); }
.js .canto .c-arr { top: 0; left: 1.4cqw; right: 12cqw; height: var(--grueso); transform: translateY(-50%) rotateX(90deg); background: linear-gradient(#c3c8b6, #eef0e5 50%, #cfd3c3); }
.js .canto .c-aba { bottom: 0; left: 1.4cqw; right: 1.4cqw; height: var(--grueso); transform: translateY(50%) rotateX(90deg); background: linear-gradient(#e9ebe0, #c7ccba); }
.js .volteado .giro { transform: rotateY(180deg); }
.js .boleto.girando.volteado .giro { animation: voltear var(--dur) both; }
.js .boleto.girando:not(.volteado) .giro { animation: devolver var(--dur) both; }
/* lift, turn over while tipping towards the viewer, overshoot a hair and settle back on the table */
@keyframes voltear {
  0% { transform: translateZ(0) rotateX(0) rotateY(0); animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  18% { transform: translateZ(calc(var(--alza) * .5)) rotateX(-4deg) rotateY(-7deg); animation-timing-function: cubic-bezier(.5, 0, .95, .7); }
  49% { transform: translateZ(var(--alza)) rotateX(-8deg) rotateY(90deg); animation-timing-function: cubic-bezier(.1, .45, .35, 1); }
  86% { transform: translateZ(3px) rotateX(0) rotateY(184deg); animation-timing-function: ease-in-out; }
  100% { transform: translateZ(0) rotateX(0) rotateY(180deg); }
}
@keyframes devolver {
  0% { transform: translateZ(0) rotateX(0) rotateY(180deg); animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  18% { transform: translateZ(calc(var(--alza) * .5)) rotateX(-4deg) rotateY(187deg); animation-timing-function: cubic-bezier(.5, 0, .95, .7); }
  49% { transform: translateZ(var(--alza)) rotateX(-8deg) rotateY(90deg); animation-timing-function: cubic-bezier(.1, .45, .35, 1); }
  86% { transform: translateZ(3px) rotateX(0) rotateY(-4deg); animation-timing-function: ease-in-out; }
  100% { transform: translateZ(0) rotateX(0) rotateY(0); }
}
/* light raking over the surface; follows the pointer on desktop */
.js .cara::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: linear-gradient(calc(125deg + var(--luz, 0deg)), rgb(255 250 235 / .2), transparent 38%, transparent 62%, rgb(30 20 5 / .14));
}
/* lighting during the turn: the face going away darkens, the one arriving catches the window light */
.js .dorso > .luz, .js .luz { position: absolute; inset: 0; z-index: 7; border-radius: inherit; overflow: hidden; pointer-events: none; }
.js .luz::before { content: ""; position: absolute; inset: 0; background: rgb(12 16 8); opacity: 0; }
.js .luz::after { content: ""; position: absolute; inset: -5% -40%; background: linear-gradient(100deg, transparent 38%, rgb(255 250 230 / .6) 50%, transparent 62%); opacity: 0; }
.js .boleto.girando.volteado .frente .luz::before, .js .boleto.girando:not(.volteado) .dorso .luz::before { animation: sombreado-sale var(--dur) linear both; }
.js .boleto.girando.volteado .dorso .luz::before, .js .boleto.girando:not(.volteado) .frente .luz::before { animation: sombreado-entra var(--dur) linear both; }
.js .boleto.girando.volteado .frente .luz::after, .js .boleto.girando:not(.volteado) .dorso .luz::after { animation: reflejo-sale var(--dur) linear both; }
.js .boleto.girando.volteado .dorso .luz::after, .js .boleto.girando:not(.volteado) .frente .luz::after { animation: reflejo-entra var(--dur) linear both; }
@keyframes sombreado-sale { 0%, 12% { opacity: 0; } 49%, 100% { opacity: .6; } }
@keyframes sombreado-entra { 0%, 49% { opacity: .6; } 84%, 100% { opacity: 0; } }
@keyframes reflejo-sale { 0%, 10% { opacity: 1; translate: -70% 0; } 44% { opacity: 1; translate: 70% 0; } 45%, 100% { opacity: 0; } }
@keyframes reflejo-entra { 0%, 55% { opacity: 0; translate: -70% 0; } 56% { opacity: 1; translate: -70% 0; } 94% { opacity: 1; translate: 70% 0; } 100% { opacity: 0; translate: 70% 0; } }
/* shadow on the table: tight contact shadow at rest; grows, softens and narrows edge-on while lifted */
.js .sombra {
  position: relative; aspect-ratio: 9 / 16; border-radius: 12px; z-index: 1;
  filter: blur(3px);
  transform: rotateX(var(--rx)) rotateZ(var(--rz)) translate(4px, 7px);
}
/* the contact shadow follows the ticket's outline, cut corner included (it swaps sides when the back is up) */
.js .sombra::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(26 18 8 / .5); clip-path: polygon(0 0, calc(100% - var(--cw) * .12) 0, 100% calc(var(--cw) * .12), 100% 100%, 0 100%); }
.js .dorso-arriba .sombra::after { clip-path: polygon(calc(var(--cw) * .12) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cw) * .12)); }
.js .sombra::before { content: ""; position: absolute; inset: 2%; border-radius: inherit; background: rgb(26 18 8 / .5); filter: blur(16px); translate: 12px 22px; }
.js .escena.girando .sombra { animation: sombra-giro var(--dur) both; }
@keyframes sombra-giro {
  0%, 100% { transform: rotateX(var(--rx)) rotateZ(var(--rz)) translate(4px, 7px) scale(1, 1); filter: blur(3px); opacity: 1; }
  18% { transform: rotateX(var(--rx)) rotateZ(var(--rz)) translate(calc(var(--alza) * .18), calc(var(--alza) * .28)) scale(1, 1); filter: blur(9px); opacity: .8; animation-timing-function: cubic-bezier(.5, 0, .95, .7); }
  49% { transform: rotateX(var(--rx)) rotateZ(var(--rz)) translate(calc(var(--alza) * .35), calc(var(--alza) * .55)) scale(.07, 1.02); filter: blur(14px); opacity: .55; animation-timing-function: cubic-bezier(.1, .45, .35, 1); }
  86% { transform: rotateX(var(--rx)) rotateZ(var(--rz)) translate(5px, 8px) scale(1, 1); filter: blur(4px); opacity: 1; }
}
.js .boleto.volteado ~ .mandos #destapar { display: none; }

/* ---------- desktop: a compact stage on the table, with one ticket somebody already scratched ---------- */
/* the photo is scaled so the table's far edge stays near the top and the ticket lies on marble, not on the bar */
@media (orientation: landscape) {
  body { background-image: url(assets/img/mesa-ancha.webp); background-size: max(100vw, 187.5vh) auto; background-position: 50% 100%; }
}
@media (min-width: 900px) and (min-height: 600px) {
  .escena {
    width: clamp(720px, 56vw, 1100px); margin-inline: auto;
    --alza: 96px; --cw: min(460px, calc((100dvh - 10dvh - 96px) * .5625)); --rx: 34deg; --rz: -4deg;
    perspective: 1800px; perspective-origin: 50% 45%; gap: 14px; padding-top: 10dvh;
  }
  .js .otro {
    display: block; position: relative; aspect-ratio: 9 / 16; z-index: 0; container-type: inline-size;
    transform: rotateX(var(--rx)) rotateZ(-19deg) translate(-50%, 6%);
    filter: brightness(.95) saturate(.9) drop-shadow(3px 5px 2px rgb(26 18 8 / .42)) drop-shadow(12px 20px 16px rgb(26 18 8 / .25));
  }
  .otro .frente { transform: none; }
  .mandos .boton { font-size: 21px; }
  .mandos .primario { font-size: 24px; }
}
@media (min-width: 1700px) and (min-height: 1000px) {
  .escena { --cw: min(560px, calc((100dvh - 10dvh - 96px) * .5625)); }
}

/* Reduced motion: the turn still happens, as a card-turn in place with a dissolve and a lighting change, no lift or travel. */
@media (prefers-reduced-motion: reduce) {
  .escena { --dur: .62s; }
  /* the face going away dims as it turns from the window; the swap happens while both are dimmed, so the two sides never double-expose */
  .js .dorso { transform: translateZ(calc(var(--grueso) / 2 + .5px)); opacity: 0; transition: opacity .12s linear .25s; }
  .js .volteado .dorso { opacity: 1; }
  .js .frente { transition: opacity 0s; }
  .js .volteado .frente { opacity: 0; transition: opacity 0s .4s; }
  .js .boleto.girando.volteado .frente .luz::before, .js .boleto.girando:not(.volteado) .dorso .luz::before { animation-name: sombreado-sale-suave; }
  .js .boleto.girando.volteado .dorso .luz::before, .js .boleto.girando:not(.volteado) .frente .luz::before { animation-name: sombreado-entra-suave; }
  .js .volteado .giro { transform: none; }
  .js .boleto.girando.volteado .giro, .js .boleto.girando:not(.volteado) .giro { animation: giro-suave var(--dur) ease-in-out both; }
  .js .boleto.girando .luz::after { animation: none; }
  .js .escena.girando .sombra { animation: sombra-suave var(--dur) ease-in-out both; }
  .canjeado .sello { animation-name: estampar-suave; }
}
@keyframes sombreado-sale-suave { 0% { opacity: 0; } 42%, 100% { opacity: .78; } }
@keyframes sombreado-entra-suave { 0%, 58% { opacity: .78; } 100% { opacity: 0; } }
@keyframes giro-suave { 0%, 100% { transform: none; } 45% { transform: rotateY(12deg) scale(.975); } }
@keyframes sombra-suave { 45% { opacity: .55; } }
@keyframes estampar-suave { from { transform: rotate(-14deg) scale(1.04); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: .92; } }

/* ---------- no JS: front and back stacked, prizes printed visible ---------- */
html:not(.js) .giro { width: 100%; }
html:not(.js) .doblez { display: none; }
html:not(.js) .boleto { transform: none; }
html:not(.js) .escena { perspective: none; }
.canjeado .entradilla { display: none; }