:root{--gold:#f5d27a;--gold2:#b8862b;--vio:#5b1a9e;--blue:#1438a6;--fuc:#ff2fa8;--w:#fff;--bg:#030208;--fg:#f4f0ff;--muted:#a99fc4;--border:#3a2a55;--accent:#f5d27a;--danger:#ff7a9a;--radius:14px;--space:1rem}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;overflow-x:hidden;min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer}
.bg{position:fixed;inset:0;overflow:hidden;z-index:0;background:radial-gradient(ellipse at 50% 120%,#1a0636,#030208 70%)}
.orb{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.35;animation:float 18s ease-in-out infinite alternate}
.o1{background:var(--vio);left:-20vmax;top:-20vmax}.o2{background:var(--blue);right:-25vmax;top:10vh;animation-delay:-5s}
.o3{background:var(--fuc);left:10vw;bottom:-35vmax;opacity:.22;animation-delay:-9s}.o4{background:var(--gold2);right:-10vmax;bottom:-30vmax;opacity:.18;animation-delay:-13s}
@keyframes float{to{transform:translate(8vmax,6vmax) scale(1.15)}}
.star{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:1;transform:scale(1.6)}}
.app{position:relative;z-index:1;max-width:46rem;margin:0 auto;padding:1rem 1rem 6rem;animation:enter .6s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(16px) scale(.98);filter:blur(6px)}}
.center{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;text-align:center}
.shine-text{background:linear-gradient(100deg,var(--gold2) 0%,var(--gold) 30%,#fff 45%,var(--gold) 60%,var(--gold2) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sweep 4s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px rgba(245,210,122,.35))}
@keyframes sweep{from{background-position:100% 0}to{background-position:0 0}}
.logo{display:flex;flex-direction:column;align-items:center;line-height:1;animation:hue 16s linear 6s infinite}
@keyframes hue{0%,100%{filter:hue-rotate(0)}25%{filter:hue-rotate(230deg)}50%{filter:hue-rotate(280deg)}75%{filter:hue-rotate(180deg)}}
.logo .shine-text{font-weight:900;letter-spacing:.12em;font-size:1.6rem}
.logo .sub{font-size:.7rem;letter-spacing:.45em;margin-top:.3rem}
.logo .globe{font-size:1.1rem;margin-top:.3rem}
.logo.big .shine-text{font-size:clamp(3rem,16vw,6rem);filter:drop-shadow(0 0 22px rgba(245,210,122,.5))}
.logo.big .sub{font-size:clamp(.9rem,4vw,1.4rem)}.logo.big .globe{font-size:2.6rem;animation:spin3d 6s ease-in-out infinite}
@keyframes spin3d{50%{transform:rotateY(180deg) scale(1.1)}}
.tag{color:var(--muted);letter-spacing:.2em;font-size:.75rem;text-transform:uppercase;margin:0}
.btns{display:grid;gap:.9rem;width:min(320px,100%)}
.gbtn{position:relative;overflow:hidden;padding:.95rem 1.2rem;border-radius:16px;border:1.5px solid var(--gold);background:linear-gradient(135deg,rgba(91,26,158,.55),rgba(20,56,166,.45),rgba(255,47,168,.35));font-weight:800;letter-spacing:.18em;color:#fff;box-shadow:0 0 18px rgba(245,210,122,.35),inset 0 0 14px rgba(245,210,122,.15);transition:transform .2s,box-shadow .3s}
.gbtn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:pass 3.5s ease-in-out infinite}
@keyframes pass{60%,100%{left:130%}}
.gbtn:hover{box-shadow:0 0 30px rgba(245,210,122,.7),0 0 50px rgba(255,47,168,.3)}
.gbtn:active{transform:scale(.95)}
.gbtn.ghost{background:rgba(0,0,0,.4)}.gbtn.small{padding:.55rem .9rem;letter-spacing:.06em;font-size:.85rem}
.glass{background:linear-gradient(160deg,rgba(30,12,60,.65),rgba(5,4,15,.75));border:1px solid rgba(245,210,122,.35);border-radius:var(--radius);padding:1rem;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.form{width:min(420px,100%);display:grid;gap:.8rem;text-align:left}.form h2{margin:0;text-align:center;letter-spacing:.15em}
.f{display:grid;gap:.3rem;font-size:.8rem;color:var(--muted)}
.f input,.f select,.send input{width:100%;padding:.7rem;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.5);color:#fff;font:inherit}
.f input:focus,.send input:focus{border-color:var(--gold);box-shadow:0 0 12px rgba(245,210,122,.4);outline:none}
.avatars{display:flex;flex-wrap:wrap;gap:.4rem}.av{font-size:1.4rem;width:2.6rem;height:2.6rem;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.4)}
.av.on{border-color:var(--gold);box-shadow:0 0 12px var(--gold)}
.vid{font-family:monospace;font-size:1.1rem;color:var(--gold)}.msg{color:var(--gold);font-size:.85rem;margin:0}
.link{background:none;border:0;color:var(--muted)}
.top{display:flex;justify-content:center;padding:.5rem 0 1rem}
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:.9rem}
.room-card{display:grid;gap:.3rem;text-align:left;padding:1.2rem;border-radius:18px;border:1px solid rgba(245,210,122,.4);background:linear-gradient(135deg,rgba(91,26,158,.5),rgba(5,4,15,.85));transition:transform .3s;box-shadow:0 0 20px rgba(91,26,158,.4)}
.room-card:hover{transform:perspective(600px) rotateX(4deg) translateY(-3px)}
.room-card b{font-size:1.15rem}.room-card small{color:var(--muted)}.rc-icon{font-size:1.8rem}
.sp-KARAOKE{--glow:var(--fuc)}.sp-CHAT{--glow:var(--vio)}.sp-CINE{--glow:var(--blue)}.sp-JUEGOS{--glow:#21d4fd}.sp-CAFETERIA{--glow:#e09a3c}.sp-BAR{--glow:#9b5cff}
.room-card{box-shadow:0 0 22px color-mix(in srgb,var(--glow) 60%,transparent)}
.room{display:grid;gap:.8rem}
.room::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--glow) 45%,transparent),transparent 60%);animation:pulse 4s ease-in-out infinite;pointer-events:none}
@keyframes pulse{50%{opacity:.5}}
.room-head{display:flex;align-items:center;gap:.7rem}.room-head h2{margin:0;font-size:1.2rem}.room-head small{color:var(--muted)}.room-head>div{flex:1}
.coins{color:var(--gold);font-weight:700}
.icon{width:2.4rem;height:2.4rem;flex:none;border-radius:12px;border:1px solid var(--gold);background:rgba(0,0,0,.5)}
.spaces{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.2rem}
.chip{flex:none;padding:.45rem .8rem;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.5);font-size:.75rem;font-weight:700}
.chip.on{border-color:var(--gold);box-shadow:0 0 12px var(--glow);background:color-mix(in srgb,var(--glow) 40%,#000)}
.seats{position:relative;padding:1rem;border-radius:20px;border:1px solid rgba(245,210,122,.3);background:rgba(0,0,0,.35);box-shadow:inset 0 0 40px color-mix(in srgb,var(--glow) 35%,transparent)}
.admin-row{display:flex;justify-content:center;margin-bottom:.8rem}.admin-row .seat{width:6.5rem}
.grid12{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.seat-btn{padding:0;background:none;border:0}
.seat{position:relative;aspect-ratio:1;border-radius:14px;border:1px solid var(--border);background:rgba(10,6,25,.8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;transition:box-shadow .4s,border-color .4s}
.seat-av{width:52%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--vio),var(--blue));font-weight:800}
.seat-n{font-size:.62rem;max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.seat.active{border-color:var(--gold);box-shadow:0 0 16px var(--glow),0 0 4px var(--gold)}
.seat.active .seat-av{animation:talk .7s ease-in-out infinite alternate}
@keyframes talk{to{box-shadow:0 0 0 5px color-mix(in srgb,var(--glow) 50%,transparent)}}
.seat.admin{border:2px solid var(--gold);background:linear-gradient(160deg,rgba(184,134,43,.35),rgba(0,0,0,.8))}
.seat.admin .seat-av{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#000}
.seat-tag{position:absolute;top:-.6rem;font-size:.55rem;font-weight:900;letter-spacing:.15em;padding:.1rem .45rem;border-radius:6px;background:var(--gold);color:#000}
.seat.singing{animation:disco 1s linear infinite}@keyframes disco{to{filter:hue-rotate(360deg)}}
.burst{position:absolute;inset:0;display:grid;place-items:center;font-size:6rem;animation:burst 1.8s ease-out forwards;pointer-events:none}
@keyframes burst{0%{transform:scale(.2);opacity:0}30%{transform:scale(1.3);opacity:1}100%{transform:scale(1) translateY(-60px);opacity:0}}
.gifts{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.gift{display:grid;place-items:center;width:3.6rem;padding:.4rem;border-radius:14px;border:1px solid var(--gold);background:rgba(0,0,0,.5);font-size:1.4rem;transition:transform .2s}
.gift:active{transform:scale(.85)}.gift small{font-size:.6rem;color:var(--gold)}
.chat{max-height:13rem;overflow-y:auto;display:grid;gap:.35rem}
.m{margin:0;font-size:.88rem;animation:enter .4s}.m.g{color:var(--gold)}
.send{display:flex;gap:.5rem;align-items:center}
.karaoke{text-align:center}.songs{display:grid;gap:.5rem}.score{color:var(--gold)}
.singer{color:var(--fuc);font-weight:700}
.ly{margin:.3rem 0;color:var(--muted);transition:all .5s}.ly.done{opacity:.4}
.ly.now{font-size:1.2rem;font-weight:800;color:#fff;text-shadow:0 0 12px var(--fuc),0 0 24px var(--gold)}
.sp-KARAOKE .seats{animation:disco 6s linear infinite}
.cine-screen{aspect-ratio:16/7;border-radius:12px;background:linear-gradient(135deg,#0a1a4a,#000);border:2px solid #cfe0ff;box-shadow:0 0 50px rgba(120,160,255,.6);display:grid;place-items:center;transform:perspective(500px) rotateX(8deg)}
.film{font-weight:800;letter-spacing:.1em;animation:pulse 2s infinite}
.games{display:grid;gap:.4rem}.gp{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:.4rem;font-size:.85rem}
.sp-CAFETERIA .seat{border-radius:50% 50% 14px 14px}.sp-BAR .seat{border-color:#9b5cff}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:space-around;padding:.5rem;background:rgba(5,3,12,.9);border-top:1px solid rgba(245,210,122,.4);backdrop-filter:blur(12px)}
.nav button{display:grid;place-items:center;background:none;border:0;font-size:1.3rem;opacity:.6;transition:all .3s}
.nav button small{font-size:.65rem;letter-spacing:.1em}.nav button.on{opacity:1;color:var(--gold);text-shadow:0 0 10px var(--gold)}
.stackv{display:grid;gap:.9rem}
.prof{text-align:center;background:linear-gradient(160deg,rgba(184,134,43,.25),rgba(0,0,0,.85) 60%)}
.big-av{font-size:3.5rem;width:6rem;height:6rem;margin:0 auto;border-radius:50%;display:grid;place-items:center;border:2px solid var(--gold);box-shadow:0 0 25px var(--gold);animation:float2 4s ease-in-out infinite}
@keyframes float2{50%{transform:translateY(-6px)}}
.uname{font-size:1.8rem;margin:.5rem 0 0}.muted{color:var(--muted);margin:.3rem 0}
.titles{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
.title-b{padding:.2rem .7rem;border-radius:999px;border:1px solid var(--fuc);color:var(--fuc);font-size:.75rem;box-shadow:0 0 10px var(--fuc)}
.lvl{display:flex;align-items:center;gap:.5rem;font-size:.8rem}.bar{flex:1;height:8px;border-radius:9px;background:#1b1230;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--vio),var(--fuc),var(--gold));transition:width .6s}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(8rem,100%),1fr));gap:.6rem}
.stat{display:grid;text-align:center;gap:.2rem}.stat b{color:var(--gold);font-size:1.2rem}.stat small{color:var(--muted)}
h3{margin:0 0 .4rem}.hist{margin:.3rem 0;font-size:.85rem;border-bottom:1px solid var(--border);padding-bottom:.3rem}
.loading{display:flex;justify-content:center;gap:.6rem;padding:1.5rem;color:var(--muted)}
.spinner{width:1.1rem;height:1.1rem;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:fab-spin .7s linear infinite}
@keyframes fab-spin{to{transform:rotate(360deg)}}
.empty{padding:2rem;text-align:center;color:var(--muted)}.empty-title{margin:0;color:var(--fg);font-weight:600}
.alert{padding:.7rem;border:1px solid var(--border);border-left:3px solid var(--danger);border-radius:var(--radius);color:var(--danger)}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}