:root {
  /* El papel y la tinta del 004: es la misma casa. */
  --paper: #ededef;
  --ink: #33343a;
  --ink-2: #6b6b72;
  --ink-3: #a3a3ab;
  --line: #c9c9d0;
  --rojo: #c8372d;
  /* El boleto es lila, el de la marca. */
  --lila: #dcc4fc;
  --lila-2: #ecdffe;
  --lila-tinta: #4b2a86;
  /* Un color por simbolo. v3: 1 poemario, 2 camiseta, 3 procrastination
     pills, 4 anillo. */
  --s1: #7a3cf0;
  --s2: #e0457b;
  --s3: #2f6fe6;
  --s4: #c98a0b;

  --ancho: min(88vw, 360px, calc((100svh - 150px) * 9 / 14));
  --radio: 18px;
  /* El aire entre circulo y circulo. */
  --entre: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.mesa {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px;
  /* Se rasca empezando donde sea, tambien fuera del boleto: el dedo no
     puede mover la pagina. El pellizco si, para quien necesite ampliar. La
     pagina cabe entera en la pantalla, asi que no hay scroll que perder. */
  touch-action: pinch-zoom;
}

/* ---------- el boleto ---------- */

.boleto {
  width: var(--ancho);
  /* Ni seleccion de texto al arrastrar ni el menu de copiar de iOS. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  aspect-ratio: 9 / 14;
  perspective: 1400px;
}

/* La llegada. Cae de arriba girado, se pasa un poco y se asienta. Acaba en
   transform: none, y tiene que ser asi: con el boleto torcido las coordenadas
   del dedo no caerian donde se ve el plateado. */
.boleto[data-llega] {
  animation: llega 1.15s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

@keyframes llega {
  0% {
    transform: translateY(-115vh) rotate(-16deg) scale(0.92);
  }
  58% {
    transform: translateY(3%) rotate(3deg) scale(1);
  }
  76% {
    transform: translateY(-1.4%) rotate(-1.2deg);
  }
  90% {
    transform: translateY(0.4%) rotate(0.4deg);
  }
  100% {
    transform: none;
  }
}

.boleto__giro {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.45, 1.3, 0.55, 1);
}

.boleto[data-cara="dorso"] .boleto__giro {
  transform: rotateY(180deg);
}

.cara {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 14px;
  border-radius: var(--radio);
  background:
    radial-gradient(120% 80% at 0% 0%, var(--lila-2) 0%, transparent 60%),
    var(--lila);
  color: var(--lila-tinta);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 40px -18px rgba(51, 30, 90, 0.45),
    0 3px 8px -2px rgba(51, 30, 90, 0.18);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* El canto troquelado: una fila de mordiscos arriba y abajo, como un boleto
   arrancado del taco. */
.cara::before,
.cara::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 8px;
  background: radial-gradient(circle at 5px 50%, var(--paper) 3px, transparent 3.5px) 0 0 /
    12px 8px repeat-x;
}
.cara::before {
  top: -4px;
}
.cara::after {
  bottom: -4px;
}

.cara--dorso {
  transform: rotateY(180deg);
}

/* La cara de atras no se ve pero algunos navegadores le siguen dando los
   toques. Sin esto se podria rascar con el boleto del reves. */
.boleto[data-cara="frente"] .cara--dorso,
.boleto[data-cara="dorso"] .cara--frente {
  pointer-events: none;
}

.cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 40px;
  font: 700 11px/1 "Space Mono", monospace;
  letter-spacing: 0.08em;
}

.cab__marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cab__marca i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lila-tinta);
}

.voltear {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  color: var(--lila-tinta);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.2s;
  z-index: 2;
}
.voltear svg {
  width: 18px;
  height: 18px;
}
.voltear:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: rotate(-30deg);
}
.voltear:focus-visible {
  outline: 2px solid var(--lila-tinta);
  outline-offset: 2px;
}

.tit {
  margin: 14px 0 0;
  font-weight: 900;
  font-size: calc(var(--ancho) * 0.135);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.tit--dorso {
  font-size: calc(var(--ancho) * 0.085);
}

.sub {
  margin: 6px 0 0;
  font: 400 12px/1.3 "Space Mono", monospace;
}

/* ---------- los cuatro circulos ---------- */

.zonas {
  flex: 1;
  min-height: 0;
  /* Los circulos se miden contra el hueco que les deja el boleto, no contra
     la pantalla: asi caben siempre, sea cual sea el alto del titulo o de la
     vitrina. Por eso es un contenedor, y los circulos usan cqw y cqh. */
  container-type: size;
  display: grid;
  /* En movil, 2×2: en fila saldrian de 70 px, demasiado pequenos para el
     dedo. En el boleto apaisado van los cuatro en fila (abajo). */
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-content: center;
  gap: var(--entre);
  margin: 12px 0;
}

/* El recorte redondo lo hace el overflow con el radio, y tambien recorta los
   toques: las esquinas del canvas quedan fuera y no se rascan. */
.zona {
  position: relative;
  /* Lo mas grande que quepa: dos de ancho y dos de alto. La primera linea es
     para navegadores sin unidades de contenedor (Safari antes del 16). */
  width: calc((var(--ancho) - 36px - var(--entre)) * 0.4);
  width: min((100cqw - var(--entre)) / 2, (100cqh - var(--entre)) / 2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fbf8ff;
  box-shadow:
    0 0 0 2px rgba(75, 42, 134, 0.3),
    0 0 0 5px rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.hueco {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.sim {
  width: 62%;
  aspect-ratio: 1;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* La foto, a sangre: llena el circulo y el radio la recorta. */
.hueco img.sim {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
}
.sim--1 {
  color: var(--s1);
}
.sim--2 {
  color: var(--s2);
}
.sim--3 {
  color: var(--s3);
}
.sim--4 {
  color: var(--s4);
}

/* Los cuatro, cuando hay premio. */
.sim.gana {
  transform: scale(1.1);
  animation: late 1.2s ease-in-out 0.2s 3;
}
@keyframes late {
  50% {
    transform: scale(1.25) rotate(-8deg);
  }
}
.zona:has(.gana) {
  box-shadow:
    0 0 0 2px var(--lila-tinta),
    0 0 0 6px rgba(255, 255, 255, 0.8);
}

/* ---------- lo que se puede ganar ---------- */

.vitrina {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px dashed rgba(75, 42, 134, 0.35);
  font: 700 10px/1.1 "Space Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vitrina:empty {
  display: none;
}
.vitrina li {
  flex: 1;
  min-width: 0;
  /* "Procrastination pills" no cabe en un cuarto de boleto: se parte. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.vitrina .sim {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px rgba(75, 42, 134, 0.3);
}

.zona canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  /* Una moneda: lo que se usa para rascar. */
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='11.5' fill='%23e3c15a' stroke='%23a27c17' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='7' fill='none' stroke='%23a27c17' stroke-width='1.2' opacity='.55'/%3E%3C/svg%3E")
      14 14,
    pointer;
  transition: opacity 0.45s ease;
}
.zona canvas:focus-visible {
  outline: 2px solid var(--lila-tinta);
  outline-offset: -4px;
  border-radius: 50%;
}
.zona canvas.fuera {
  opacity: 0;
  pointer-events: none;
}

/* El brillo que barre el plateado al llegar: dice "esto se rasca" sin
   escribirlo. Va encima del canvas y no recibe toques. */
.zona::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
}
.boleto[data-llega] .zona::after {
  animation: brillo 0.9s ease-in-out both;
}
.boleto[data-llega] .zona[data-i="0"]::after {
  animation-delay: 1.1s;
}
.boleto[data-llega] .zona[data-i="1"]::after {
  animation-delay: 1.22s;
}
.boleto[data-llega] .zona[data-i="2"]::after {
  animation-delay: 1.34s;
}
.boleto[data-llega] .zona[data-i="3"]::after {
  animation-delay: 1.46s;
}
.zona.destapada::after {
  display: none;
}
@keyframes brillo {
  to {
    transform: translateX(120%);
  }
}

.pie {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 400 10px/1.2 "Space Mono", monospace;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* ---------- el reverso ---------- */

.reglas {
  margin: 14px 0 0;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.4;
}
.reglas li + li {
  margin-top: 6px;
}

.premios {
  margin: 18px 0 0;
  width: 100%;
  border-collapse: collapse;
  font: 400 12px/1.2 "Space Mono", monospace;
}
.premios caption {
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  padding-bottom: 6px;
}
.premios td {
  padding: 5px 0;
  border-top: 1px solid rgba(75, 42, 134, 0.2);
  vertical-align: middle;
}
.premios td:last-child {
  text-align: right;
}
.premios .sim {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 2px;
  vertical-align: middle;
}

.letra {
  margin: auto 0 0;
  padding-top: 12px;
  font: 400 10px/1.4 "Space Mono", monospace;
  opacity: 0.8;
}
.letra + .letra {
  margin-top: 0;
  padding-top: 6px;
}
.letra button {
  font: inherit;
  color: var(--rojo);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- debajo del boleto ---------- */

.estado {
  margin: 0;
  min-height: 2.6em;
  max-width: var(--ancho);
  text-align: center;
  font: 400 13px/1.3 "Space Mono", monospace;
  color: var(--ink-2);
}
.estado strong {
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 900;
}

.otro,
.enviar {
  font: 700 14px/1 Inter, system-ui, sans-serif;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--lila-tinta);
  color: #fff;
  cursor: pointer;
}
.otro:disabled,
.enviar:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- la puerta ---------- */

.puerta {
  width: min(92vw, 380px);
  padding: 26px 22px 20px;
  border: 0;
  border-radius: var(--radio);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
}
.puerta::backdrop {
  background: rgba(40, 30, 60, 0.35);
  backdrop-filter: blur(3px);
}
.puerta h2 {
  margin: 0 30px 6px 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.puerta__pie {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.4;
}
.puerta__x {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 16px;
  color: var(--ink-2);
  cursor: pointer;
}
.puerta form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.puerta input {
  font: 400 16px/1.2 Inter, system-ui, sans-serif;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
}
.puerta input:focus {
  outline: none;
  border-color: var(--lila-tinta);
}
#codigo {
  font-family: "Space Mono", monospace;
  letter-spacing: 0.3em;
  text-align: center;
}
.enlace {
  background: none;
  border: 0;
  color: var(--ink-2);
  font: 400 13px Inter, system-ui, sans-serif;
  text-decoration: underline;
  cursor: pointer;
}
.aviso {
  margin: 10px 0 0;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--ink-2);
}
.aviso.mal {
  color: var(--rojo);
}

@media (prefers-reduced-motion: reduce) {
  .boleto[data-llega] {
    animation-duration: 0.01s;
  }
  .boleto__giro {
    transition-duration: 0.2s;
  }
  .boleto[data-llega] .zona::after,
  .sim.gana {
    animation: none;
  }
}

/* ---------- el anuncio ---------- */

/* El boton del segundo boleto: el mismo que "Otro boleto", pero en hueco,
   para que no compita con el resultado que acabas de rascar. */
.otro--anuncio {
  background: transparent;
  color: var(--lila-tinta);
  box-shadow: 0 0 0 1.5px var(--lila-tinta) inset;
}

/* A pantalla completa y a oscuras, como un anuncio de verdad. El video es
   vertical (720×1280): manda el alto, y en ordenador queda en el centro. */
.anuncio {
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0d0b12;
  color: #fff;
  display: none;
  flex-direction: column;
}
.anuncio[open] {
  display: flex;
}
.anuncio::backdrop {
  background: #0d0b12;
}
.anuncio__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font: 700 13px/1.2 "Space Mono", monospace;
  letter-spacing: 0.04em;
}
.anuncio__x {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.anuncio video {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: #000;
}
/* Lo que falta para el boleto, que es lo que cuenta la base (ready_at) y no
   el tiempo del video. */
.anuncio__progreso {
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
}
.anuncio__progreso i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lila);
  transition: width 1s linear;
}

/* ---------- el boleto apaisado ----------
   Con sitio a lo ancho (ordenador, tablet, movil en horizontal) el boleto se
   tumba: los cuatro circulos en fila y grandes, el titulo en una linea y el
   reverso a dos columnas, que en vertical no cabria. */
@media (min-width: 640px) {
  :root {
    --ancho: min(92vw, 760px, calc((100svh - 140px) * 16 / 10));
    --entre: 16px;
  }
  .boleto {
    aspect-ratio: 16 / 10;
  }
  .cara {
    padding: 20px 24px 16px;
  }
  .tit {
    font-size: calc(var(--ancho) * 0.07);
  }
  .tit br {
    display: none;
  }
  .zonas {
    grid-template-columns: repeat(4, auto);
  }
  .zona {
    width: calc((var(--ancho) - 48px) * 0.2);
    width: min((100cqw - 3 * var(--entre)) / 4, 100cqh);
  }
  .vitrina .sim {
    width: 44px;
    height: 44px;
  }

  .cara--dorso {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 32px;
  }
  .cara--dorso .cab {
    grid-column: 1 / -1;
  }
  .tit--dorso,
  .cara--dorso .reglas,
  .cara--dorso .letra {
    grid-column: 1;
  }
  .tit--dorso {
    font-size: calc(var(--ancho) * 0.05);
  }
  .cara--dorso .premios {
    grid-column: 2;
    grid-row: 2 / 6;
    align-self: start;
  }
}

/* Donde caen las virutas: encima de todo y sin toques. */
.virutas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}