/* ===== spaceSUITE · capa visual v2 (se carga después de styles.css) ===== */
:root{--void:#02030a;--moon:#f4f6ff;--dim:#9aa3c7;--blue:#4d7cff;--mint:#3ee6b4;--red:#ff5d6c;--line:rgba(160,185,255,.16);--glass:rgba(12,16,36,.62);--rose:#ff8d98;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fd:"Inter Display","Inter",system-ui,sans-serif}
html,body{font-family:var(--f);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{background:radial-gradient(75% 46% at 88% -4%,rgba(63,116,255,.24),transparent 70%),radial-gradient(62% 52% at -6% 72%,rgba(96,64,255,.13),transparent 70%),var(--void)!important}
.main,.main *{touch-action:none}
.vig{background:linear-gradient(180deg,rgba(2,3,10,.6),transparent 20%,transparent 60%,rgba(2,3,10,.78))!important}
.hint{display:none!important}
h1,#tour h2,.end h2,.sheet h2,.deck b,.tr-c b,.sat b,.lay{font-family:var(--fd)!important;font-weight:600!important;letter-spacing:-.02em;text-shadow:none!important}
.lay{font-weight:300!important;color:rgba(255,255,255,.12)}

/* barra superior compacta */
.top{left:0!important;right:0;padding:calc(10px + var(--sat)) calc(12px + var(--sar)) 0 calc(14px + var(--sal))!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h t" "p t";align-items:center;column-gap:10px;pointer-events:none}
.top>*{pointer-events:auto}
h1{grid-area:h;margin:0!important;display:flex;align-items:center;gap:9px;font-size:1.02rem!important;line-height:1.15;min-width:0;white-space:nowrap}
h1::before{content:"";flex:none;width:28px;height:26px;background:url(mark.svg) center/contain no-repeat;filter:drop-shadow(0 0 8px rgba(77,124,255,.5))}
.role{font-family:var(--f)!important;font-size:.62rem!important;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px!important;border-color:var(--line)!important;color:var(--dim)!important}
.top p{grid-area:p;margin:2px 0 0 37px!important;font-size:.7rem!important;color:var(--dim)!important;gap:5px!important;flex-wrap:nowrap!important;white-space:nowrap}
.top p svg{width:12px!important;height:12px!important}
.tops{grid-area:t;display:flex;gap:8px!important;margin:0!important;flex-wrap:nowrap!important}
.tops .orb{width:42px!important;height:42px!important}.tops .orb svg{width:20px!important;height:20px!important}
.tops .orb.pl{width:auto!important;padding:0 12px!important;font-size:.85rem;font-weight:600}
.tops .lb,.orb .lb{display:none!important}
.orb.pr{top:calc(124px + var(--sat))!important}

/* botones */
.orb{width:54px;height:54px;background:rgba(14,18,40,.58)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.orb svg{width:23px;height:23px}
.orb[aria-pressed="true"]::after,.star::after{display:none!important}
.sm{width:44px!important;height:44px!important}
.tg[aria-pressed="false"]{color:#ffb0b8!important;background:rgba(255,93,108,.2)!important;border:1px solid rgba(255,93,108,.55)!important}
.leave{width:auto!important;padding:0 20px;margin-left:6px;color:#ffb0b8!important;background:rgba(255,70,90,.2)!important;border-color:rgba(255,93,108,.6)!important}
.leave.arm{background:rgba(255,70,90,.5)!important}
.ctl{bottom:calc(22px + var(--sab))!important;gap:11px!important}
.orb.on{background:rgba(77,124,255,.3)!important;border-color:rgba(120,160,255,.7)!important}
.bdg{background:var(--mint);color:#02130d}

/* información de quien ves */
.who{top:calc(66px + var(--sat))!important;left:calc(14px + var(--sal))!important;gap:9px!important;padding:6px 8px 6px 6px;border-radius:999px;background:rgba(10,14,32,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);color:var(--dim)!important;font-size:.74rem!important}
.who:empty{display:none}
.who b{font-size:.86rem!important}
.who i{width:28px!important;height:28px!important}
.who .orb{width:34px!important;height:34px!important;margin-left:2px!important}.who .orb svg{width:17px!important;height:17px!important}

/* tu cámara: pantalla principal cuando estás solo, cuadro movible cuando hay más gente */
.me{position:fixed!important;z-index:6;width:104px!important;height:140px!important;border-radius:20px!important;border:1px solid rgba(255,255,255,.2)!important;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.55)!important;touch-action:none;background:#0a0f24!important;transition:width .25s,height .25s;cursor:grab}
.me.s0{width:84px!important;height:112px!important}.me.s2{width:152px!important;height:204px!important}
.me.c-tr{top:calc(122px + var(--sat))!important;right:calc(12px + var(--sar))!important;left:auto!important;bottom:auto!important}
.me.c-tl{top:calc(122px + var(--sat))!important;left:calc(12px + var(--sal))!important;right:auto!important;bottom:auto!important}
.me.c-br{bottom:calc(192px + var(--sab))!important;right:calc(12px + var(--sar))!important;top:auto!important;left:auto!important}
.me.c-bl{bottom:calc(192px + var(--sab))!important;left:calc(12px + var(--sal))!important;top:auto!important;right:auto!important}
.me video{border-radius:0!important;object-fit:cover}
.me>span{font:600 2rem var(--fd);color:var(--dim)}
.alone .me{display:none!important}
.me.drag{transition:none;cursor:grabbing;z-index:9}

/* otras personas como miniaturas */
.sats{bottom:calc(98px + var(--sab))!important;padding:0 14px 0!important;gap:10px!important;justify-content:center}
.sat{width:64px!important;height:88px!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 8px 22px rgba(0,0,0,.5)!important;overflow:hidden}
.sat small{position:absolute!important;top:auto!important;bottom:4px!important;left:0!important;right:0;transform:none!important;text-align:center;font-size:.62rem!important;font-weight:600;color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.cap{bottom:calc(200px + var(--sab))!important}

/* sala vacía */
#empty{position:fixed;z-index:4;left:0;right:0;bottom:calc(110px + var(--sab));margin:0 auto;width:min(88vw,380px);padding:16px 18px;border-radius:22px;border:1px solid var(--line);background:rgba(10,14,32,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:none;align-items:center;gap:14px;text-align:left}
.alone #empty{display:flex}
#empty div{flex:1}#empty b{display:block;font:600 1rem var(--fd);letter-spacing:-.01em}#empty span{color:var(--dim);font-size:.82rem}
#empty button{border:0;border-radius:999px;padding:12px 18px;background:linear-gradient(180deg,#5b87ff,#3f68ee);color:#fff;font:600 .9rem var(--f);cursor:pointer;box-shadow:0 8px 22px rgba(63,104,238,.4)}
.oo #empty{display:none!important}

/* avisos */
#note{position:fixed;z-index:14;left:50%;top:calc(104px + var(--sat));transform:translate(-50%,-14px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:12px;max-width:min(92vw,440px);padding:10px 12px 10px 18px;border-radius:999px;border:1px solid rgba(160,185,255,.3);background:rgba(10,14,32,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:.9rem;font-weight:500;transition:opacity .3s,transform .3s}
#note.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#note button{flex:none;border:0;border-radius:999px;padding:8px 14px;background:rgba(77,124,255,.4);color:#fff;font:600 .8rem var(--f);cursor:pointer}
#wait{position:fixed;inset:0;z-index:25;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:rgba(2,3,10,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#wait.on{display:flex}
#wait .sp{width:46px;height:46px;border-radius:50%;border:3px solid rgba(160,185,255,.2);border-top-color:var(--mint);animation:spin 1s linear infinite}
#wait p{margin:0;font:600 1.25rem/1.25 var(--fd);letter-spacing:-.01em;max-width:24ch}
#wait .bs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#wait button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:12px 22px;font:600 .95rem var(--f);cursor:pointer}
#wait button.p{background:linear-gradient(180deg,#5b87ff,#3f68ee);border-color:transparent}

/* chat de la sala */
.cb{left:14px!important;right:14px!important;bottom:calc(92px + var(--sab))!important;z-index:8}
.msgs{left:14px!important;right:14px!important;bottom:calc(152px + var(--sab))!important;z-index:8}
.chat .cb,.chat .msgs{display:flex!important}
.chat .sats,.chat #empty{display:none!important}
.msg{background:rgba(10,14,32,.82)!important;border-radius:18px!important;font-size:.94rem!important}

/* pantallas de bienvenida, hojas y despedida */
#tour{background:radial-gradient(70% 40% at 50% 8%,rgba(63,116,255,.2),transparent 70%),rgba(2,3,10,.97)!important}
#tour h2{font-size:clamp(1.7rem,7vw,2.3rem)!important;line-height:1.1}
#tour p{font-size:1rem}
.tr-b{border:0!important;background:linear-gradient(180deg,#5b87ff,#3f68ee)!important;color:#fff;box-shadow:0 10px 30px rgba(63,104,238,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.tr-c{border-radius:20px!important;background:rgba(14,18,40,.6)!important}
.tr-c b{font-size:1.05rem!important}
.tr-p{background:radial-gradient(circle at 32% 28%,#fff,#6a95ff 32%,#14307f 66%,#02030c 100%)!important}
.sheet{background:rgba(8,11,28,.88)!important;border-color:var(--line)!important}
.end{background:radial-gradient(70% 40% at 50% 20%,rgba(63,116,255,.18),transparent 70%),rgba(2,3,10,.96)!important;gap:14px!important}
.end h2{font-size:2.2rem!important}
.end img{width:76px;height:76px;margin-bottom:6px}
.end .bs{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:10px}
.toast{top:38%!important;background:rgba(10,14,32,.85)!important;font-weight:500}
.inc{border-radius:24px!important;background:rgba(10,14,32,.9)!important}
@media (max-width:360px){.ctl{gap:7px!important}.orb{width:48px!important;height:48px!important}}
@media (orientation:landscape) and (max-height:560px){
  .me.c-br,.me.c-bl{bottom:calc(86px + var(--sab))!important}.sats{bottom:calc(86px + var(--sab))!important}
  .me{width:96px!important;height:72px!important}.me.s2{width:140px!important;height:105px!important}.me.s0{width:76px!important;height:57px!important}
}
.selfm .me{display:none!important}
#note b{color:#fff;font-weight:600}
#note span{flex:1;font:500 .86rem var(--f);color:var(--moon)}
#note button.p{background:linear-gradient(180deg,#5b87ff,#3f68ee)}
.dock .bdg,.ctl .bdg{min-width:18px}
.main video.mv{object-fit:cover}
#note{width:min(92vw,420px);justify-content:space-between}
#note span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* cuadrícula */
#grid{position:fixed;inset:0;z-index:1;display:none;gap:2px;background:#02030a}
.grid #grid{display:grid}
.grid .main,.grid .who,.grid .sats,.grid .gal,.grid .dots,.grid .cap{display:none!important}
.grid:not(.floatm) .me{display:none!important}
.gt{position:relative;overflow:hidden;min-width:0;min-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#05081a}
.gt.self video{transform:scaleX(-1)}
.gt.off video{visibility:hidden}
.gi{position:absolute;inset:0;display:grid;place-items:center;font:600 min(20vmin,4.5rem) var(--fd);color:rgba(255,255,255,.55);font-style:normal}
.gt::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -60px 50px -40px rgba(0,0,0,.65)}
.gn{position:absolute;left:10px;bottom:10px;z-index:2;font:600 .78rem var(--f);color:#fff;padding:4px 10px;border-radius:999px;background:rgba(2,3,10,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gb{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;gap:6px;font-style:normal}
.gb svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;padding:5px;box-sizing:content-box;border-radius:50%;background:rgba(255,93,108,.85)}
.gb svg:last-child:not(:first-child){background:rgba(77,124,255,.85)}
.gt:active{filter:brightness(1.08)}
@media (min-width:900px){.gn{font-size:.9rem;left:16px;bottom:16px}}
@media (max-width:460px){h1 .role{display:none!important}.tops{gap:6px!important}.tops .orb{width:40px!important;height:40px!important}}