:root{--fondo:#07071a;--panel:#10102b;--panel-2:#17173a;--linea:#2a2a5c;--texto:#e9e9ff;--gris:#9a9ac8;--menta:#22f5c8;--rosa:#ff3dac;--amarillo:#ffd23f;--azul:#4d7cff}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--c) 18%,transparent),transparent 60%),var(--fondo);color:var(--texto);font:16px/1.55 "Space Grotesk",system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;max-width:1040px;margin:0 auto}
header a{color:var(--gris);text-decoration:none;font-weight:600}header a:hover{color:var(--texto)}
header h1{font:800 clamp(16px,2.6vw,24px) Orbitron,sans-serif;letter-spacing:.04em;color:var(--c);text-shadow:0 0 18px var(--c);text-align:center}
.botones-cab{display:flex;gap:6px}.botones-cab button{background:var(--panel-2);border:1px solid var(--linea);color:var(--texto);border-radius:10px;padding:7px 10px;font:600 14px "Space Grotesk",sans-serif;cursor:pointer}
main{max-width:1040px;margin:0 auto;padding:0 16px 24px}
.hud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.hud span{font:400 10px "Press Start 2P",monospace;background:var(--panel);border:1px solid var(--linea);border-radius:10px;padding:9px 11px}.hud b{color:var(--amarillo)}
.zona{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--linea);box-shadow:0 0 40px color-mix(in srgb,var(--c) 25%,transparent);background:#000}
canvas{display:block;touch-action:none;width:100%}
.ayuda{color:var(--gris);font-size:14px;margin-top:10px;text-align:center}
.mensaje{min-height:24px;margin:10px 0 0;text-align:center;font-weight:600}
#capa{position:fixed;inset:0;background:rgba(4,4,16,.82);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:40;padding:16px}
#capa[hidden]{display:none}
.capa-caja{background:var(--panel);border:1px solid var(--linea);border-radius:22px;padding:26px 22px;max-width:620px;width:100%;text-align:center;box-shadow:0 0 50px color-mix(in srgb,var(--c) 30%,transparent);max-height:92vh;overflow:auto}
.capa-caja h2{font:900 clamp(22px,4vw,34px) Orbitron,sans-serif;color:var(--c);margin-bottom:10px}
.capa-caja p{color:#cbd5e1;margin:8px 0}.capa-caja .xp{font:400 14px "Press Start 2P",monospace;color:var(--amarillo)}
.capa-caja ul{text-align:left;margin:12px auto;max-width:480px;display:grid;gap:6px;list-style:none}.capa-caja li{background:var(--panel-2);border-radius:10px;padding:8px 12px;font-size:15px}
.capa-caja .icono{font-size:64px;line-height:1.1}
.capa-botones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.btn{border:0;border-radius:999px;padding:12px 22px;font:800 15px "Space Grotesk",sans-serif;cursor:pointer;background:linear-gradient(90deg,#22f5c8,#4dd8ff);color:#06061a}
.btn.rosa{background:linear-gradient(90deg,#ff3dac,#ff7a59);color:#fff}
.btn:hover{transform:translateY(-2px)}
.estrellas{font-size:46px;letter-spacing:6px;color:var(--amarillo);text-shadow:0 0 18px var(--amarillo)}.estrellas .apagada{color:#33335a;text-shadow:none}
.logros{display:flex;flex-direction:column;align-items:center;gap:8px;margin:10px 0}.logro{background:rgba(255,210,63,.08);border:1px solid rgba(255,210,63,.35);border-radius:999px;padding:6px 14px;font-size:14px}.logro b{color:var(--amarillo)}
.opciones{display:grid;gap:8px;margin-top:12px}.opciones button{background:var(--panel-2);color:var(--texto);border:1.5px solid var(--linea);border-radius:12px;padding:11px 14px;font:600 15px "Space Grotesk",sans-serif;cursor:pointer;text-align:left}
.opciones button:hover{border-color:var(--c)}.opciones button.bien{border-color:#22f5c8;background:rgba(34,245,200,.12)}.opciones button.mal{border-color:#ff5a6a;background:rgba(255,90,106,.12)}
.anuncio{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);z-index:60;pointer-events:none;font:900 clamp(24px,5vw,48px) Orbitron,sans-serif;color:var(--c);text-shadow:0 0 30px var(--c);animation:anuncio 1.8s forwards;white-space:nowrap}
@keyframes anuncio{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}
.confeti{position:fixed;top:-10px;width:8px;height:12px;z-index:70;pointer-events:none;animation:caer 2.6s ease-in forwards}
@keyframes caer{to{transform:translate(var(--x),105vh) rotate(720deg)}}
.panel-dom{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.panel-dom button{background:var(--panel-2);border:1.5px solid var(--linea);color:var(--texto);border-radius:14px;padding:8px 10px;font:600 13px "Space Grotesk",sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;min-width:92px}
.panel-dom button .e{font-size:26px;line-height:1.1}.panel-dom button small{color:var(--amarillo);font-weight:700}
.panel-dom button.sel{border-color:var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 60%,transparent)}.panel-dom button:disabled{opacity:.4;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.anuncio,.confeti{animation-duration:.01s}}
/* Ajustes para pantallas pequeñas: sin desplazamiento lateral y zonas táctiles cómodas */
html,body{overflow-x:clip}
header a{display:inline-flex;align-items:center;min-height:40px;white-space:nowrap}
@media (max-width:360px){header{padding:10px 12px;gap:6px}header h1{font-size:14px}}