/* ¡Pásala, pollito! — estilos v1.0 (2026-10-28, #0728).
   Contrastes medidos con scripts/contraste.py (PALETA_PASALA.md, sección del pollito). */
:root {
    --fondo: #1a0b3d;
    --panel: #2a1450;
    --panel-borde: #4b2a8a;
    --texto: #ffffff;
    --texto-suave: #d9ccf5;
    --oro: #ffd34d;
    --boton: #fbbf24;
    --boton-texto: #1f2024;
    --violeta: #7a1ee0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { overflow: hidden; overscroll-behavior: none; }
.marco { position: relative; width: 100%; max-width: 540px; height: 100dvh; margin: 0 auto; overflow: hidden; background: #000; }
#lienzo { display: block; width: 100%; height: 100%; touch-action: none; }

.hud { position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: max(.5rem, env(safe-area-inset-top)) .6rem .5rem; background: linear-gradient(rgba(20,8,46,.88), rgba(20,8,46,0)); pointer-events: none; }
.hud > div { display: flex; align-items: center; gap: .4rem; }
.hud-izq { flex-direction: column; align-items: flex-start !important; gap: 0 !important; line-height: 1.15; }
.hud-izq strong { font-size: 1rem; }
.hud-izq span { font-size: .78rem; color: var(--texto-suave); }
.hud-centro { flex-direction: column; gap: 0 !important; }
#hud-puntos { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.vidas { color: #ff5a7a; letter-spacing: .1em; font-size: 1rem; }
.redondo { pointer-events: auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--panel-borde); background: var(--panel); color: var(--texto); font-size: 1rem; cursor: pointer; }

.pantalla { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.2rem 16px; overflow-y: auto; }
.pantalla[hidden], .hud[hidden], .anuncio-prueba[hidden] { display: none; }
.portada { justify-content: space-between; background: url("../img/menu-fondo.webp") center / cover no-repeat, var(--fondo); }
.portada-txt { text-align: center; padding-top: 4vh; }
.portada h1 { margin: 0; font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1; color: var(--oro);
    text-shadow: 0 4px 0 #7a1ee0, 0 6px 18px rgba(0,0,0,.55); font-weight: 900; letter-spacing: -.01em; }
.sub { margin: .7rem auto 0; max-width: 22rem; font-weight: 700; background: rgba(26,11,61,.78); border-radius: 999px; padding: .35rem .9rem; display: inline-block; }
.aviso { margin: .6rem auto 0; background: var(--panel); color: var(--oro); display: inline-block; padding: .3rem .8rem; border-radius: 8px; font-size: .85rem; }
.botones { display: flex; flex-direction: column; gap: .6rem; background: rgba(26,11,61,.86); border-radius: 18px; padding: 1rem; }
.btn { font: inherit; font-weight: 800; font-size: 1.05rem; min-height: 3rem; padding: .7rem 1rem; border-radius: 14px; border: 2px solid var(--panel-borde);
    background: var(--panel); color: var(--texto); cursor: pointer; transition: transform .08s; }
.btn:active { transform: scale(.97); }
.btn.principal { background: var(--boton); color: var(--boton-texto); border-color: #f59e0b; box-shadow: 0 4px 0 #b45309; }
.btn:focus-visible, .redondo:focus-visible, .mundo-btn:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.mejor { margin: .2rem 0 0; text-align: center; color: var(--oro); font-weight: 700; min-height: 1.2em; }
.tabla-pronto { margin: 0; text-align: center; color: var(--texto-suave); font-size: .9rem; }
.legal { text-align: center; color: var(--texto-suave); font-size: .85rem; }

.panel { background: rgba(20,8,46,.94); gap: .7rem; }
.panel.centro { justify-content: center; align-items: stretch; text-align: center; }
.panel h2 { margin: 0; font-size: 1.6rem; color: var(--oro); }
.nota { margin: 0; color: var(--texto-suave); font-size: .92rem; }
.reglas { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; line-height: 1.45; }
.detalle { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 20rem; display: grid; gap: .3rem; }
.detalle li { display: flex; justify-content: space-between; background: var(--panel); border-radius: 10px; padding: .45rem .7rem; }
.detalle strong { color: var(--oro); }
.total { margin: .3rem 0; font-size: 1.15rem; }
.total strong { font-size: 2rem; color: var(--oro); display: block; }
.fin-img { margin: 0 auto; width: 9rem; height: auto; }
.sorpresa-img { width: 100%; max-width: 30rem; height: auto; margin: 0 auto; border-radius: 14px; }
.sorpresa-img[hidden] { display: none; }

.elegir-lista h3 { margin: 1rem 0 .4rem; font-size: 1rem; color: var(--texto-suave); }
.rejilla { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.mundo-btn { font: inherit; font-weight: 800; min-height: 2.8rem; border-radius: 10px; border: 2px solid var(--panel-borde); background: var(--violeta); color: #fff; cursor: pointer; }
.mundo-btn.jefe::after { content: " ★"; color: var(--oro); }
.mundo-btn:disabled { background: #241444; color: #8a7bb0; border-color: #33205e; cursor: not-allowed; }

.anuncio-prueba { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    background: #14082e; text-align: center; padding: 16px; z-index: 5; }
.anuncio-prueba .etiqueta { margin: 0; color: var(--oro); font-weight: 800; letter-spacing: .12em; font-size: .8rem; }
.anuncio-prueba [data-texto] { margin: 0; font-size: 1.4rem; font-weight: 800; }
.anuncio-prueba .cuenta { margin: 0; font-size: 3rem; font-weight: 900; color: var(--oro); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
@media (forced-colors: active) { .btn, .mundo-btn, .redondo { border: 2px solid ButtonText; } }