:root {
  --me: #8ecae6;
  --bg: #111218;
  --panel: #1d2030;
  --ink: #e8e8f0;
  --dim: rgba(232, 232, 240, 0.55);
  --bar: 48px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font: 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body { position: fixed; inset: 0; }
button { font: inherit; color: inherit; border: 0; background: var(--panel); border-radius: 14px; padding: 12px 18px; cursor: pointer; touch-action: manipulation; }
button:active { filter: brightness(1.3); }
button.big { font-size: 22px; padding: 18px 28px; background: var(--me); color: #111; font-weight: 700; }
.hidden { display: none !important; }

.screen { position: absolute; inset: 0; }
#join { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
#join h1 { margin: 0; font-size: 44px; letter-spacing: 2px; }
#join .sub { margin: 0 0 12px; color: var(--dim); }
#join input { font: inherit; font-size: 22px; padding: 14px 16px; width: min(320px, 90vw); border-radius: 14px; border: 2px solid #333a52; background: #0b0c12; color: var(--ink); text-align: center; -webkit-user-select: text; user-select: text; }
#join .fine { color: var(--dim); font-size: 13px; max-width: 320px; }
#join .fine a { color: var(--me); }
#join #room { text-transform: uppercase; letter-spacing: 8px; font-weight: 700; }
#join .bad { border-color: #ff5d73; }

#bar { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 4px; display: flex; align-items: center; gap: 10px; background: #0b0c12; border-bottom: 3px solid var(--me); z-index: 5; }
#bar #menu { width: 44px; height: 40px; padding: 0; font-size: 22px; background: transparent; }
#dot { width: 14px; height: 14px; border-radius: 50%; background: var(--me); flex: none; }
#title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.badge { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: #333a52; white-space: nowrap; }
.badge.webrtc { background: #06d6a0; color: #111; }
.badge.relay { background: #ffd166; color: #111; }
.badge.offline { background: #ff5d73; color: #111; }

#stage { position: absolute; top: calc(var(--bar) + env(safe-area-inset-top)); left: 0; right: 0; bottom: 0; overflow: hidden; touch-action: none; }
#gate, #rotate { position: absolute; inset: calc(var(--bar) + env(safe-area-inset-top)) 0 0 0; z-index: 4; background: rgba(17, 18, 24, 0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
#rotate div { font-size: 80px; }
#flash { position: absolute; inset: 0; pointer-events: none; background: var(--me); opacity: 0; transition: opacity 0.25s; z-index: 6; }
#flash.on { opacity: 0.35; transition: none; }

/* Shared bits for modes. */
.fill { position: absolute; inset: 0; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.hint { color: var(--dim); font-size: 14px; text-align: center; pointer-events: none; }
.row { display: flex; gap: 10px; justify-content: center; }
.chip { position: absolute; z-index: 3; font-size: 13px; padding: 8px 12px; border-radius: 99px; background: #333a52; }
canvas.fill { width: 100%; height: 100%; display: block; }

/* Menu mode. */
.menu { position: absolute; inset: 0; overflow-y: auto; touch-action: pan-y; padding: 10px 10px 24px; display: grid; gap: 8px; }
.menu button { text-align: left; display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px; }
.menu button .n { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: #ffd166; color: #111; display: grid; place-items: center; font-weight: 700; }
.menu button .t { font-weight: 700; }
.menu button .s { color: var(--dim); font-size: 13px; }
.menu button[disabled] { opacity: 0.35; }