:root { --bg:#03041a; --accent:#07f; --text:#e8f0ff; }
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  font-family:system-ui,Segoe UI,Roboto,monospace;
  color:var(--text);
  display:flex;
  align-items:center;               /* centrado vertical otra vez */
  justify-content:center;
  overflow:hidden;
  padding-top: env(safe-area-inset-top, 0);
}
canvas{
  display:block; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.6);
  background: radial-gradient(circle at 40% 20%, #02102a 0%, #000814 60%);
  image-rendering: pixelated; image-rendering: crisp-edges; touch-action:none;
}
.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
.panel{
  background:rgba(0,0,0,.55); border:1px solid rgba(7,127,255,.2);
  border-radius:12px; padding:20px 22px; text-align:center; max-width:92vw;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
h1{ margin:0 0 6px 0; font-size:clamp(20px,5.5vw,36px); letter-spacing:.5px }
.sub{ margin:6px 0 14px 0; font-size:clamp(12px,3.5vw,16px); opacity:.85 }
button{
  background:var(--accent); color:#02102a; border:none; padding:12px 18px;
  border-radius:10px; font-weight:800; cursor:pointer; font-size:clamp(14px,3.4vw,18px);
}
#muteBtn{
  position:fixed; right:10px; top:10px; z-index:20;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25);
  color:#e8f6ff; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:700;
}
#touchControls{
  position:fixed; inset:auto 0 10px 0; display:flex; justify-content:space-between;
  padding:0 10px; pointer-events:none;
}
.tc{
  pointer-events:auto; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3); color:#e8f0ff; font-weight:800;
  border-radius:14px; padding:clamp(10px,3vw,16px); min-width:clamp(60px,20vw,90px);
  backdrop-filter: blur(6px); touch-action:none; user-select:none;
}
.hall{
  margin-top:16px; background:rgba(20,20,24,.55);
  border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:12px;
}
.hall-title{ font-size:14px; opacity:.9; margin-bottom:6px; letter-spacing:.3px }
.hall-list{
  list-style:decimal inside; margin:0; padding:0;
  font-size:13px; color:#cfd6e6; opacity:.85;
  max-height:30vh; overflow:auto;
}
.hall-list li{ padding:1px 0; display:flex; justify-content:space-between; gap:8px }
#err{
  position:fixed; left:8px; bottom:8px; max-width:90vw;
  background:rgba(255,0,0,.08); border:1px solid rgba(255,0,0,.25); color:#ffb3b3;
  font:12px/1.3 monospace; border-radius:8px; padding:8px; white-space:pre-wrap; display:none;
}