/* EdgfastUniverse — UI de la vista colaborativa en vivo */
:root { --u-accent:#10b981; --u-accent-deep:#047857; --u-bg:#0a1410; --u-panel:rgba(12,24,18,.82); --u-line:rgba(255,255,255,.1); --u-ink:#e8f5ee; --u-soft:#9fb8ad; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; background:var(--u-bg); color:var(--u-ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; }
#u-root { position:fixed; inset:0; }
#u-canvas { position:absolute; inset:0; cursor:grab; touch-action:none; }
#u-canvas:active { cursor:grabbing; }
#u-cursors,#u-reactions { position:absolute; inset:0; pointer-events:none; z-index:30; overflow:hidden; }

/* Barra superior */
#u-top { position:absolute; top:0; left:0; right:0; height:56px; z-index:20;
  display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background:linear-gradient(180deg,rgba(10,20,16,.9),transparent); }
#u-brand { display:flex; align-items:center; gap:10px; color:var(--u-ink); text-decoration:none; font-size:17px; }
#u-brand i { color:var(--u-soft); transition:.2s; }
#u-brand:hover i { color:var(--u-accent); transform:translateX(-3px); }
#u-brand strong { color:var(--u-accent); font-weight:800; }
#u-top-right { display:flex; align-items:center; gap:14px; font-size:13px; }
#u-live { display:flex; align-items:center; gap:7px; background:rgba(16,185,129,.15); color:#6ee7b7;
  padding:5px 12px; border-radius:999px; font-weight:600; }
#u-live .dot { width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:uPulse 1.6s infinite; }
@keyframes uPulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)} 100%{box-shadow:0 0 0 8px rgba(52,211,153,0)} }
#u-timer { background:rgba(255,255,255,.07); padding:5px 12px; border-radius:999px; color:var(--u-soft); }
#u-timer.low { background:rgba(239,68,68,.2); color:#fca5a5; animation:uBlink 1s steps(2) infinite; }
@keyframes uBlink { 50%{opacity:.5} }
#u-conn { font-size:9px; }
#u-conn.on { color:#34d399; } #u-conn.off { color:#ef4444; }

/* Paneles laterales */
.u-panel { position:absolute; top:64px; bottom:74px; z-index:20; width:248px;
  background:var(--u-panel); backdrop-filter:blur(10px); border:1px solid var(--u-line);
  border-radius:16px; display:flex; flex-direction:column; overflow:hidden; }
#u-left { left:14px; } #u-right { right:14px; }
.u-sec { padding:12px 14px; display:flex; flex-direction:column; min-height:0; }
.u-sec.u-grow { flex:1; overflow:hidden; }
.u-sec h3 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--u-soft); display:flex; align-items:center; gap:7px; }
.u-sec h3 i { color:var(--u-accent); }
.u-pill { margin-left:auto; background:rgba(16,185,129,.2); color:#6ee7b7; border-radius:999px; padding:1px 8px; font-size:11px; }
#u-users { list-style:none; margin:0; padding:0; max-height:150px; overflow:auto; }
#u-users li { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13.5px; }
.u-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
#u-users .fa-crown { color:#fbbf24; font-size:11px; }
.u-me { background:var(--u-accent); color:#04231a; font-size:10px; padding:0 6px; border-radius:6px; font-weight:700; }
.u-spec { color:var(--u-soft); font-size:10px; border:1px solid var(--u-line); padding:0 5px; border-radius:6px; }
#u-log { list-style:none; margin:0; padding:0; overflow:auto; flex:1; font-size:12.5px; }
#u-log li { display:flex; gap:8px; align-items:flex-start; padding:4px 0; color:var(--u-soft); border-bottom:1px solid rgba(255,255,255,.04); }
#u-log .u-dot { margin-top:4px; }

/* Chat */
#u-chat { flex:1; overflow:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px; }
.u-msg { font-size:13.5px; line-height:1.4; background:rgba(255,255,255,.05); padding:7px 10px; border-radius:10px; word-break:break-word; }
.u-msg.mine { background:rgba(16,185,129,.16); }
#u-chat-form { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--u-line); }
#u-chat-input { flex:1; background:rgba(255,255,255,.07); border:1px solid var(--u-line); border-radius:10px; padding:9px 12px; color:var(--u-ink); outline:none; font-size:13.5px; }
#u-chat-input:focus { border-color:var(--u-accent); }
#u-chat-form button { width:40px; border:none; border-radius:10px; background:var(--u-accent); color:#04231a; cursor:pointer; }
#u-chat-form button:hover { background:#34d399; }

/* Barra de herramientas */
#u-toolbar { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:25;
  display:flex; align-items:center; gap:7px; padding:9px 12px; background:var(--u-panel);
  backdrop-filter:blur(10px); border:1px solid var(--u-line); border-radius:16px; max-width:94vw; flex-wrap:wrap; justify-content:center; }
.u-tb-label { font-size:11px; color:var(--u-soft); text-transform:uppercase; letter-spacing:.08em; margin-right:2px; }
.u-tb { width:40px; height:40px; border:1px solid var(--u-line); background:rgba(255,255,255,.05); color:var(--u-ink);
  border-radius:11px; cursor:pointer; font-size:15px; transition:.15s; display:flex; align-items:center; justify-content:center; }
.u-tb:hover { background:var(--u-accent); color:#04231a; transform:translateY(-2px); border-color:var(--u-accent); }
.u-tb.accent { background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.4); }
.u-tb.react { font-size:17px; }
.u-tb-sep { width:1px; height:26px; background:var(--u-line); margin:0 3px; }

/* Inspector */
#u-inspect { position:absolute; right:14px; bottom:84px; z-index:26; width:230px;
  background:var(--u-panel); backdrop-filter:blur(10px); border:1px solid var(--u-line); border-radius:14px; padding:12px 14px; }
.u-ins-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-weight:700; }
#u-ins-close { background:none; border:none; color:var(--u-soft); cursor:pointer; font-size:14px; }
#u-inspect label { display:block; font-size:12px; color:var(--u-soft); margin-bottom:9px; }
#u-inspect input[type=range] { width:100%; accent-color:var(--u-accent); }
.u-ins-color { display:flex; align-items:center; justify-content:space-between; }
.u-ins-color input { width:42px; height:26px; border:none; background:none; cursor:pointer; }
.u-ins-row { display:flex; gap:8px; margin-top:4px; }
.u-ins-btn { flex:1; border:1px solid var(--u-line); background:rgba(255,255,255,.05); color:var(--u-ink); border-radius:9px; padding:8px; cursor:pointer; font-size:12.5px; }
.u-ins-btn:hover { background:rgba(255,255,255,.1); }
.u-ins-btn.danger:hover { background:#ef4444; border-color:#ef4444; color:#fff; }

/* Cursores de otros */
.u-cursor { position:absolute; top:0; left:0; will-change:transform; transition:transform .08s linear; }
.u-cursor span { display:inline-block; margin-left:6px; transform:translateY(-6px); color:#04231a; font-size:11px; font-weight:700; padding:2px 7px; border-radius:7px; white-space:nowrap; }

/* Reacciones flotantes */
.u-react-float { position:absolute; bottom:80px; font-size:34px; animation:uFloat 2.6s ease-out forwards; }
@keyframes uFloat { 0%{opacity:0; transform:translateY(0) scale(.5)} 15%{opacity:1; transform:translateY(-20px) scale(1.2)} 100%{opacity:0; transform:translateY(-260px) scale(1)} }

/* Banner / estados */
#u-status { position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:40;
  padding:10px 18px; border-radius:12px; font-size:14px; font-weight:600; }
#u-status.banner { background:rgba(16,185,129,.9); color:#04231a; }
#u-status.soft { background:rgba(245,158,11,.92); color:#3a2a05; }
#u-status.err { background:rgba(239,68,68,.92); color:#fff; }

/* Modal de ingreso */
#u-join { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(800px 500px at 50% 30%, rgba(16,185,129,.18), transparent), rgba(6,14,11,.92); backdrop-filter:blur(6px);
  transition:opacity .4s; }
#u-join.gone { opacity:0; pointer-events:none; }
.u-join-card { width:min(440px,92vw); text-align:center; padding:38px 32px;
  background:var(--u-panel); border:1px solid var(--u-line); border-radius:24px; box-shadow:0 40px 100px -30px rgba(0,0,0,.7); }
.u-join-logo { width:64px; height:64px; margin:0 auto 18px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--u-accent),var(--u-accent-deep)); color:#04231a; font-size:30px; box-shadow:0 18px 40px -12px rgba(16,185,129,.6); }
.u-join-card h1 { margin:0 0 10px; font-size:28px; font-weight:800; }
.u-join-card h1 strong { color:var(--u-accent); }
.u-join-card p { color:var(--u-soft); font-size:14.5px; line-height:1.6; margin:0 0 22px; }
#u-join-form { display:flex; gap:10px; }
#u-join-name { flex:1; background:rgba(255,255,255,.07); border:1px solid var(--u-line); border-radius:12px; padding:13px 16px; color:var(--u-ink); outline:none; font-size:15px; }
#u-join-name:focus { border-color:var(--u-accent); }
#u-join-form button { border:none; border-radius:12px; padding:13px 20px; background:var(--u-accent); color:#04231a; font-weight:700; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:8px; }
#u-join-form button:hover { background:#34d399; }
#u-join-hint { display:block; margin-top:16px; color:var(--u-soft); font-size:12px; }

/* Controles de entorno en la barra superior (tema, fondo, sonido) */
#u-env { display:flex; align-items:center; gap:6px; margin-right:4px; }
.u-env-btn { position:relative; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--u-line); background:rgba(255,255,255,.06); color:var(--u-ink); border-radius:10px;
  cursor:pointer; font-size:14px; transition:.15s; }
.u-env-btn:hover { background:var(--u-accent); color:#04231a; border-color:var(--u-accent); transform:translateY(-1px); }
.u-env-btn input[type=color] { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:none; padding:0; }
/* Sol / luna según el tema */
.u-ic-moon { display:none; }
body.u-light .u-ic-sun { display:none; }
body.u-light .u-ic-moon { display:inline; }
/* Sonido on/off */
#u-sound .u-ic-on { display:none; }
#u-sound.on .u-ic-on { display:inline; }
#u-sound.on .u-ic-off { display:none; }
#u-sound.on { background:rgba(16,185,129,.2); border-color:rgba(16,185,129,.45); color:#6ee7b7; }

/* Gravedad / acciones de grupo en la barra de herramientas */
#u-gravity.off { background:rgba(245,158,11,.2); border-color:rgba(245,158,11,.5); color:#fcd34d; }
#u-gravity.off:hover { background:#f59e0b; color:#3a2a05; }

/* Inspector: ejes de rotación con color (X rojo, Y verde, Z azul) */
.u-axis { display:block; }
.u-axis.x input[type=range] { accent-color:#ef4444; }
.u-axis.y input[type=range] { accent-color:#10b981; }
.u-axis.z input[type=range] { accent-color:#3b82f6; }

/* ============ TEMA CLARO ============ */
body.u-light { --u-bg:#eaf2ee; --u-panel:rgba(255,255,255,.86); --u-line:rgba(8,32,24,.12);
  --u-ink:#0c2018; --u-soft:#4b6a5e; }
body.u-light #u-top { background:linear-gradient(180deg,rgba(234,242,238,.92),transparent); }
body.u-light .u-env-btn { background:rgba(8,32,24,.05); }
body.u-light .u-tb,
body.u-light #u-chat-input,
body.u-light #u-join-name { background:rgba(8,32,24,.05); }
body.u-light .u-msg { background:rgba(8,32,24,.05); }
body.u-light .u-msg.mine { background:rgba(16,185,129,.16); }
body.u-light #u-log li { border-bottom-color:rgba(8,32,24,.06); }
body.u-light .u-join-card { box-shadow:0 40px 100px -30px rgba(20,50,40,.35); }

/* Responsive: en móvil, paneles más compactos */
@media (max-width:820px) {
  .u-panel { width:200px; top:60px; bottom:140px; }
  #u-inspect { bottom:150px; width:200px; }
  #u-toolbar { bottom:10px; }
}
@media (max-width:560px) {
  #u-left { display:none; } /* en móvil priorizamos lienzo + chat */
  .u-panel { width:170px; }
}