:root{--amarillo: #ffd23f;--amarillo-suave: #ffe9a8;--fondo: #140d04;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--fondo)}body{touch-action:none}canvas{display:block;touch-action:none}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;z-index:10;pointer-events:none}.overlay.interactivo{pointer-events:auto}.overlay-fondo{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 60%,#140d0459,#140d04d9 70%,#140d04f7)}.overlay-contenido{position:relative;max-width:640px;animation:aparecer 1.2s ease both}.saludo{font-size:clamp(1.6rem,6vw,3rem);font-weight:300;letter-spacing:.5px;color:var(--amarillo-suave);margin-bottom:8px;text-shadow:0 0 24px rgba(255,210,63,.35)}.titulo{font-size:clamp(2rem,8vw,4rem);font-weight:700;color:var(--amarillo);line-height:1.05;margin-bottom:20px;text-shadow:0 0 32px rgba(255,210,63,.5)}.subtitulo{font-size:clamp(1rem,4vw,1.4rem);font-weight:300;color:#fff7e0;opacity:.9;margin-bottom:36px;line-height:1.5}.firma{margin-top:28px;font-size:clamp(.9rem,3.5vw,1.15rem);font-style:italic;color:var(--amarillo-suave);opacity:.85}.boton{pointer-events:auto;border:none;cursor:pointer;padding:16px 40px;border-radius:999px;font-size:clamp(1rem,4vw,1.25rem);font-weight:600;color:#3a2a00;background:linear-gradient(135deg,#ffe17a,#ffd23f,#ffb800);box-shadow:0 8px 30px #ffb80066,0 0 60px #ffd23f40;transition:transform .25s ease,box-shadow .25s ease;animation:latido 2.4s ease-in-out infinite}.boton:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 40px #ffb8008c,0 0 80px #ffd23f59}.boton:active{transform:translateY(0) scale(.99)}.pista{margin-top:22px;font-size:.85rem;color:#d9c9a0;opacity:.6}.sonido{position:fixed;top:16px;right:16px;z-index:20;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,210,63,.3);background:#140d0480;color:var(--amarillo);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease}.sonido:hover{background:#ffd23f26}.cargando{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--fondo);z-index:30;color:var(--amarillo-suave);font-size:1.1rem;letter-spacing:1px}.cargando span{animation:parpadeo 1.4s ease-in-out infinite}.overlay.juego{justify-content:flex-start;padding-top:5vh}.juego-cabecera{position:relative;z-index:2;animation:aparecer 1s ease both}.juego-titulo{font-size:clamp(1.4rem,5.5vw,2.4rem);font-weight:600;color:var(--amarillo);text-shadow:0 0 28px rgba(255,210,63,.5)}.juego-sub{margin-top:8px;font-size:clamp(.9rem,3.6vw,1.15rem);font-weight:300;color:#fff7e0;opacity:.85}.juego-progreso{margin-top:10px;font-size:1rem;letter-spacing:3px;color:var(--amarillo-suave);opacity:.8}.juego-svg{position:relative;z-index:2;width:min(88vw,66vh);height:min(88vw,66vh);margin-top:1vh;touch-action:manipulation}.juego-halo{pointer-events:none;transition:opacity .3s ease;transform-box:fill-box;transform-origin:center}.juego-halo.siguiente{animation:pulsoEstrella 1.1s ease-in-out infinite}.juego-estrella{fill:#fff3c2;opacity:.5;transition:fill .3s ease,opacity .3s ease;transform-box:fill-box;transform-origin:center}.juego-estrella.unida{fill:var(--amarillo);opacity:1}.juego-estrella.siguiente{fill:#fff;opacity:1;animation:pulsoEstrella 1.1s ease-in-out infinite}.juego-linea{stroke:var(--amarillo);stroke-width:.7;stroke-linecap:round;opacity:.95;animation:trazar .4s ease both}.juego-relleno{fill:#ffd23f2e;stroke:var(--amarillo);stroke-width:.8;animation:aparecerCorazon 1.3s ease both}.juego-continuar{position:relative;z-index:2;margin-top:2.5vh;animation:aparecer .8s ease .6s both}.estallido{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}.estallido-flash{position:absolute;width:60vmin;height:60vmin;border-radius:50%;background:radial-gradient(circle,#fff0b4d9,#ffd23f80 35%,#ffd23f00 65%);animation:destello 1s ease-out forwards}.particula{position:absolute;line-height:1;will-change:transform,opacity;transform:translate(0) scale(.2);filter:drop-shadow(0 0 6px rgba(255,210,63,.6));animation-name:estallar;animation-timing-function:cubic-bezier(.12,.62,.28,1);animation-fill-mode:forwards}@keyframes destello{0%{transform:scale(.2);opacity:0}25%{opacity:1}to{transform:scale(1.6);opacity:0}}@keyframes estallar{0%{transform:translate(0) scale(.2) rotate(0);opacity:0}12%{opacity:1}70%{opacity:1}to{transform:translate(calc(var(--tx) * 1vmin),calc(var(--ty) * 1vmin)) scale(var(--sc)) rotate(var(--rot));opacity:0}}@keyframes pulsoEstrella{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.6);opacity:1}}@keyframes trazar{0%{opacity:0}to{opacity:.95}}@keyframes aparecerCorazon{0%{opacity:0}to{opacity:1}}@keyframes aparecer{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes latido{0%,to{box-shadow:0 8px 30px #ffb80066,0 0 60px #ffd23f40}50%{box-shadow:0 8px 30px #ffb80099,0 0 90px #ffd23f73}}@keyframes parpadeo{0%,to{opacity:.4}50%{opacity:1}}