:root {
  --rojo: #C1272D;
  --vino: #4A1416;
  --mostaza: #E9A71B;
  --rosa: #F6AABB;
  --madera: #7A4728;
  --papel: #FFFBF5;
  --tinta: #2B0E0F;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tinta);
  background-color: #FFFFFF;
  background-image:
    repeating-linear-gradient(0deg, rgba(193,39,45,.42) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(90deg, rgba(193,39,45,.42) 0 22px, transparent 22px 44px);
  line-height: 1.5;
}
h1, h2, h3, .titulo { font-family: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; font-weight: 400; letter-spacing: .01em; }
a { color: var(--rojo); }
button, .boton { font: inherit; }
:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 2px; }

.boton {
  display: inline-block; text-decoration: none; cursor: pointer;
  border: 3px solid var(--vino); border-radius: 14px;
  background: var(--rojo); color: #FFFFFF;
  padding: .7em 1.3em; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--vino);
  transition: transform .08s, box-shadow .08s;
}
.boton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--vino); }
.boton.secundario { background: var(--papel); color: var(--vino); }
.boton:disabled { opacity: .6; cursor: wait; }

/* ---------- Página de juego ---------- */
.pagina-juego { height: 100%; overflow: hidden; overscroll-behavior: none; }
.pagina-juego body, body.pagina-juego { height: 100%; }
.barra {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 14px;
  background: var(--vino); color: #FFFFFF;
}
.barra h1 { margin: 0; font-size: 1.3rem; }
.barra a { color: #FFFFFF; font-weight: 800; text-decoration: none; background: rgba(255,255,255,.14); padding: 4px 12px; border-radius: 10px; }
.escenario { display: flex; justify-content: center; align-items: flex-start; padding: 10px; height: calc(100% - 52px); }
.marco {
  position: relative;
  width: min(100%, calc((100dvh - 90px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 0.625));
  aspect-ratio: 5 / 8;
  border: 6px solid var(--madera); border-radius: 18px; overflow: hidden;
  background: #D3ECF4;
  box-shadow: 0 8px 0 rgba(74,20,22,.35);
}
.marco canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }

.capa {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 14px; background: rgba(43,14,15,.45); overflow-y: auto;
}
.capa.oculto { display: none; }
.panel {
  width: 100%; max-width: 340px; margin: auto;
  background: var(--papel); border: 4px solid var(--vino); border-radius: 18px;
  padding: 18px 18px 16px; text-align: center;
  box-shadow: 0 6px 0 var(--vino);
}
.panel h2 { margin: 0 0 6px; font-size: 1.8rem; color: var(--rojo); line-height: 1.1; }
.panel p { margin: .4em 0; }
.panel .reglas { text-align: left; font-size: .95rem; padding-left: 1.1em; margin: .6em 0 1em; }
.panel .reglas li { margin: .2em 0; }
.puntaje-final { font-family: "Lilita One", sans-serif; font-size: 3rem; line-height: 1; color: var(--vino); margin: .1em 0 !important; }
.detalle { color: #6A3A3A; font-size: .95rem; }

.formulario { text-align: left; margin: 12px 0 6px; padding: 12px; background: #FFF1E0; border-radius: 12px; }
.formulario label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: 8px; }
.formulario input[type=text], .formulario input[type=tel] {
  display: block; width: 100%; margin-top: 3px; padding: 9px 10px; font: inherit; font-weight: 400;
  border: 2px solid #C9A88A; border-radius: 10px; background: #FFFFFF; color: var(--tinta);
}
.formulario .acepto { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .82rem; line-height: 1.35; }
.formulario .acepto input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.formulario .boton { width: 100%; margin-top: 6px; }
.mensaje { font-size: .9rem; font-weight: 700; margin: 8px 0 0 !important; }
.mensaje.error { color: var(--rojo); }
.mensaje.bien { color: #2F6B3A; }

.ranking { margin-top: 14px; text-align: left; }
.ranking h3 { margin: 0 0 6px; font-size: 1.25rem; color: var(--vino); }
.pestanas { display: flex; gap: 6px; margin-bottom: 8px; }
.pestanas button {
  flex: 1; cursor: pointer; padding: 6px; border-radius: 10px; font-weight: 800; font-size: .85rem;
  border: 2px solid var(--vino); background: #FFFFFF; color: var(--vino);
}
.pestanas button[aria-selected=true] { background: var(--vino); color: #FFFFFF; }
.lista { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.lista li { display: flex; gap: 8px; padding: 5px 8px; border-radius: 8px; }
.lista li:nth-child(odd) { background: #FFF1E0; }
.lista .pos { width: 1.6em; font-weight: 800; color: var(--rojo); }
.lista .nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .pts { font-weight: 800; }
.lista li.premio .pos { color: var(--mostaza); }
.vacio { font-size: .9rem; color: #6A3A3A; }
.premio-texto { font-size: .82rem; background: #FFF4CC; border-left: 4px solid var(--mostaza); padding: 8px 10px; border-radius: 6px; margin-top: 10px !important; text-align: left; }
.acciones { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

.btn-pausa {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--vino); background: rgba(255,251,245,.9); color: var(--vino); font-weight: 800;
}
.btn-pausa[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }