@import "https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-primary:#080810;--bg-secondary:#0e0e1a;--bg-card:#12121f;--bg-card-hover:#1a1a2e;--bg-glass:#ffffff08;--cyan:#00f5ff;--cyan-dim:#00c4cc;--cyan-glow:#00f5ff33;--cyan-glow-strong:#00f5ff66;--magenta:#ff2d78;--magenta-dim:#cc1f5e;--magenta-glow:#ff2d7833;--magenta-glow-strong:#ff2d7873;--gold:#ffe600;--gold-glow:#ffe60040;--accent:var(--cyan);--accent-glow:var(--cyan-glow);--text-primary:#f0f0ff;--text-secondary:#88a;--text-muted:#44445a;--border:#1e1e32;--border-bright:#2a2a48;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:28px;--shadow-card:0 4px 32px #0009;--shadow-cyan:0 0 24px #00f5ff40, 0 0 64px #00f5ff1a;--shadow-magenta:0 0 24px #ff2d784d, 0 0 64px #ff2d781a;--font-display:"Rajdhani", "Inter", system-ui, sans-serif;--font-main:"Inter", system-ui, sans-serif;--transition:.15s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;background-image:radial-gradient(80% 40% at 20% 0,#00f5ff0f 0%,#0000 60%),radial-gradient(60% 40% at 80% 100%,#ff2d780f 0%,#0000 60%);background-attachment:fixed;min-height:100dvh}button{cursor:pointer;font-family:var(--font-main);transition:all var(--transition);border:none;outline:none}button:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg, var(--cyan), var(--cyan-dim));color:#000;border-radius:var(--radius-md);letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--shadow-cyan);padding:13px 32px;font-size:.95rem;font-weight:700}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 32px #00f5ff80,0 0 80px #00f5ff33}.btn-magenta{background:linear-gradient(135deg, var(--magenta), var(--magenta-dim));color:#fff;border-radius:var(--radius-md);letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--shadow-magenta);padding:13px 32px;font-size:.95rem;font-weight:700}.btn-magenta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 32px #ff2d788c,0 0 80px #ff2d7833}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-bright);border-radius:var(--radius-md);padding:13px 32px;font-size:.95rem;font-weight:600}.btn-secondary:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);box-shadow:inset 0 0 12px #00f5ff0d}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);background:0 0;padding:8px 18px;font-size:.85rem;font-weight:500}.btn-ghost:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-bright);background:var(--bg-glass)}.screen{flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:32px 48px;display:flex}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.chip{background:var(--bg-secondary);border:1px solid var(--border-bright);color:var(--text-secondary);letter-spacing:.03em;text-transform:uppercase;transition:all var(--transition);border-radius:999px;padding:6px 16px;font-size:.82rem;font-weight:600}.chip:hover{border-color:var(--cyan);color:var(--cyan)}.chip--active{border-color:var(--cyan);color:var(--cyan);background:#00f5ff1f;box-shadow:0 0 12px #00f5ff33}.chip--magenta.chip--active{border-color:var(--magenta);color:var(--magenta);background:#ff2d781f;box-shadow:0 0 12px #ff2d7833}.neon-text-cyan{color:var(--cyan);text-shadow:0 0 20px #00f5ff99}.neon-text-magenta{color:var(--magenta);text-shadow:0 0 20px #ff2d7899}.scanline{position:relative;overflow:hidden}.scanline:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000008 2px 4px);position:absolute;inset:0}.loader-screen{background:radial-gradient(ellipse at 50% 0%, #e639461f 0%, transparent 65%), var(--bg-primary)}.loader-content{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:480px;display:flex}.loader-logo{filter:drop-shadow(0 0 24px #e6394680);font-size:4rem;line-height:1}.loader-title{letter-spacing:-.02em;background:linear-gradient(135deg, #fff 40%, var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.4rem;font-weight:800}.loader-subtitle{color:var(--text-secondary);margin-top:-8px;font-size:1rem}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);cursor:pointer;width:100%;transition:all var(--transition);background:var(--bg-card);padding:40px 24px}.drop-zone:hover{border-color:var(--accent);background:var(--bg-card-hover)}.drop-zone--success{border-color:var(--accent);background:#e639460f;border-style:solid}.drop-zone--loading{pointer-events:none;opacity:.7}.drop-zone__inner{flex-direction:column;align-items:center;gap:8px;display:flex}.drop-zone__icon{font-size:2.5rem}.drop-zone__check{color:var(--accent);font-size:2.5rem}.drop-zone__label{color:var(--text-primary);font-size:1.1rem;font-weight:600}.drop-zone__count{color:var(--accent);font-size:1.2rem;font-weight:700}.drop-zone__hint{color:var(--text-muted);font-size:.82rem}.loader-error{color:var(--accent);text-align:center;border-radius:var(--radius-sm);background:#e639461a;border:1px solid #e639464d;width:100%;padding:10px 16px;font-size:.9rem}.loader-stats{justify-content:center;gap:16px;width:100%;display:flex}.stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;align-items:center;gap:2px;min-width:90px;padding:12px 20px;display:flex}.stat span{color:var(--accent);font-size:1.6rem;font-weight:800}.stat{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}.loader-cta{border-radius:var(--radius-lg);width:100%;padding:16px;font-size:1.1rem}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.mode-screen{justify-content:flex-start;padding-top:48px;padding-bottom:48px}.mode-wrap{flex-direction:column;gap:24px;width:100%;max-width:860px;display:flex}.mode-header{justify-content:space-between;align-items:flex-start;display:flex}.mode-title{font-family:var(--font-display);letter-spacing:.06em;font-size:2.4rem;font-weight:700}.mode-sub{color:var(--text-muted);letter-spacing:.08em;margin-top:4px;font-size:.82rem}.mode-grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.mode-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:left;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 20px;transition:all .18s;display:flex;position:relative;overflow:hidden}.mode-card:before{content:"";opacity:0;transition:opacity .18s;position:absolute;inset:0}.mode-card--cyan:before{background:linear-gradient(135deg,#00f5ff0f,#0000)}.mode-card--magenta:before{background:linear-gradient(135deg,#ff2d780f,#0000)}.mode-card:hover:before{opacity:1}.mode-card--cyan:hover{border-color:var(--cyan);box-shadow:0 0 20px #00f5ff26}.mode-card--magenta:hover{border-color:var(--magenta);box-shadow:0 0 20px #ff2d7826}.mode-card--active.mode-card--cyan{border-color:var(--cyan);box-shadow:var(--shadow-cyan)}.mode-card--active.mode-card--cyan:before{opacity:1}.mode-card--active.mode-card--magenta{border-color:var(--magenta);box-shadow:var(--shadow-magenta)}.mode-card--active.mode-card--magenta:before{opacity:1}.mc-emoji{font-size:2rem}.mc-nombre{font-family:var(--font-display);letter-spacing:.06em;color:var(--text-primary);font-size:1.1rem;font-weight:700}.mc-desc{color:var(--text-secondary);font-size:.78rem}.mode-sub-config{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;gap:10px;padding:16px 20px;display:flex}.sub-label{color:var(--text-muted);letter-spacing:.12em;font-size:.72rem;font-weight:700}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.mode-footer{align-items:center;gap:12px;display:flex}.votacion-btn{background:var(--bg-card);border:1px solid var(--border-bright);border-radius:var(--radius-md);color:var(--text-secondary);letter-spacing:.06em;transition:all var(--transition);flex:1;align-items:center;gap:10px;padding:11px 20px;font-size:.82rem;font-weight:700;display:flex}.votacion-btn:hover{border-color:var(--cyan);color:var(--text-primary)}.votacion-btn--on{border-color:var(--cyan);color:var(--cyan);background:#00f5ff0f}.votacion-dot{background:var(--text-muted);width:8px;height:8px;transition:all var(--transition);border-radius:50%;margin-left:auto}.votacion-dot--on{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.mode-cta{padding:13px 44px}.game-header-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;width:100%;max-width:960px;margin-bottom:8px;padding:12px 20px;display:flex}.ghb-left{align-items:center;gap:14px;display:flex}.ghb-back{border:1px solid var(--magenta);border-radius:var(--radius-sm);color:var(--magenta);letter-spacing:.04em;transition:all var(--transition);background:0 0;padding:6px 14px;font-size:.82rem;font-weight:700}.ghb-back:hover{background:#ff2d781a;box-shadow:0 0 10px #ff2d784d}.ghb-title{font-family:var(--font-display);letter-spacing:.06em;font-size:1.3rem;font-weight:700}.ghb-right{align-items:center;gap:12px;display:flex}.ghb-stats{color:var(--text-muted);letter-spacing:.04em;font-size:.78rem}.ghb-votacion{border-radius:var(--radius-sm);letter-spacing:.06em;background:var(--bg-secondary);border:1px solid var(--border-bright);color:var(--text-secondary);transition:all var(--transition);padding:6px 14px;font-size:.75rem;font-weight:700}.ghb-votacion:hover{border-color:var(--cyan);color:var(--cyan)}.ghb-votacion--on{border-color:var(--magenta);color:var(--magenta);background:#ff2d7814;box-shadow:0 0 8px #ff2d7833}.game-screen{justify-content:flex-start;align-items:center;padding-top:32px;padding-bottom:48px}.game-content{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:960px;display:flex}.game-instruction{color:var(--text-secondary);letter-spacing:.04em;text-align:center;font-size:.9rem}.launch-btn{border-radius:var(--radius-xl);letter-spacing:.1em;width:100%;max-width:400px;padding:22px;font-size:1.1rem}.launch-btn.girando{animation:.9s infinite pulse-glow}@keyframes pulse-glow{0%,to{box-shadow:var(--shadow-cyan);transform:scale(1)}50%{transform:scale(1.02);box-shadow:0 0 48px #00f5ff99,0 0 100px #00f5ff33}}.resultado-container{flex-direction:column;align-items:center;gap:18px;width:100%;display:flex}.resultado-cancion{background:var(--bg-card);border:1px solid var(--cyan);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-cyan);flex-direction:column;align-items:center;gap:8px;padding:32px 40px;display:flex;position:relative;overflow:hidden}.resultado-cancion:before{content:"";background:linear-gradient(135deg,#00f5ff0a,#0000);position:absolute;inset:0}.resultado-titulo{font-family:var(--font-display);letter-spacing:.04em;text-align:center;color:var(--text-primary);font-size:2rem;font-weight:700;position:relative}.resultado-artista{color:var(--cyan);font-size:1rem;font-weight:600;position:relative}.resultado-meta{color:var(--text-muted);letter-spacing:.05em;font-size:.78rem;position:relative}.resultado-categoria{background:var(--bg-card);border:1px solid var(--magenta);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-magenta);flex-direction:column;align-items:center;gap:6px;padding:28px 40px;display:flex}.resultado-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700}.resultado-valor{font-family:var(--font-display);color:var(--gold);text-shadow:0 0 20px #ffe60080;font-size:2.2rem;font-weight:700}.resultado-count{color:var(--text-muted);font-size:.8rem}.canciones-pool{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-height:280px;padding:4px;display:flex;overflow-y:auto}.canciones-pool::-webkit-scrollbar{width:4px}.canciones-pool::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:2px}.canciones-pool::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:2px}.cancion-chip{background:var(--bg-card);border:1px solid var(--border-bright);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition);flex-direction:column;align-items:center;gap:2px;min-width:120px;padding:10px 18px;font-size:.88rem;font-weight:600;display:flex}.cancion-chip:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px);box-shadow:0 0 12px #00f5ff33}.cancion-chip .chip-artista{color:var(--text-muted);font-size:.72rem;font-weight:400}.eleccion-opciones{flex-direction:column;gap:12px;width:100%;max-width:600px;display:flex}.eleccion-opcion{background:var(--bg-card);border:1px solid var(--border-bright);border-radius:var(--radius-lg);color:var(--text-primary);letter-spacing:.02em;flex-direction:column;align-items:center;gap:4px;padding:20px 28px;font-size:1.1rem;font-weight:700;transition:all .18s;display:flex}.eleccion-opcion:hover{border-color:var(--magenta);color:var(--magenta);box-shadow:var(--shadow-magenta);transform:translateY(-2px)}.eleccion-opcion .op-sub{color:var(--text-muted);font-size:.8rem;font-weight:400}.cadena-historial{flex-direction:column;gap:6px;width:100%;max-width:600px;max-height:160px;display:flex;overflow-y:auto}.cadena-item{color:var(--text-muted);background:var(--bg-card);border-radius:var(--radius-sm);border-left:2px solid var(--cyan);padding:7px 14px;font-size:.8rem}.eslabon-selector{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.eslabon-btn{background:var(--bg-card);border:1px solid var(--border-bright);border-radius:var(--radius-md);color:var(--text-secondary);letter-spacing:.04em;transition:all var(--transition);padding:12px 22px;font-size:.88rem;font-weight:700}.eslabon-btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px #00f5ff33}.reto-card{background:var(--bg-card);border:1px solid var(--magenta);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-magenta);flex-direction:column;align-items:center;gap:6px;padding:28px 40px;display:flex}.reto-card .reto-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700}.reto-card .reto-texto{font-family:var(--font-display);color:var(--magenta);text-shadow:0 0 20px #ff2d7880;text-align:center;font-size:1.8rem;font-weight:700;line-height:1.2}.nominaciones-list{flex-direction:column;gap:8px;width:100%;max-width:500px;display:flex}.nominacion-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);align-items:center;gap:10px;padding:10px 14px;font-size:.88rem;display:flex}.nom-artista{color:var(--text-muted);flex:1;font-size:.78rem}.select-cancion{background:var(--bg-card);border:1px solid var(--border-bright);border-radius:var(--radius-md);width:100%;max-width:500px;color:var(--text-primary);font-size:.88rem;font-family:var(--font-main);cursor:pointer;padding:12px 16px}.select-cancion:focus{border-color:var(--cyan);outline:none}.caos-modos-grid{grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:600px;display:grid}.caos-modo-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-muted);letter-spacing:.04em;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;font-size:.78rem;font-weight:600;display:flex}.caos-modo-item span:first-child{font-size:1.6rem}.action-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.tipo-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.sin-opciones{color:var(--magenta);text-align:center;border-radius:var(--radius-md);background:#ff2d780f;border:1px solid #ff2d7833;width:100%;max-width:500px;padding:16px;font-size:.9rem}.btn-back{border:1px solid var(--magenta);border-radius:var(--radius-sm);color:var(--magenta);letter-spacing:.04em;transition:all var(--transition);background:0 0;padding:7px 16px;font-size:.85rem;font-weight:700}.btn-back:hover{background:#ff2d781a;box-shadow:0 0 12px #ff2d784d}.btn-action{border:1px solid var(--cyan);border-radius:var(--radius-sm);color:var(--cyan);letter-spacing:.04em;transition:all var(--transition);background:0 0;padding:8px 20px;font-size:.85rem;font-weight:700}.btn-action:hover{background:#00f5ff14;box-shadow:0 0 12px #00f5ff40}
