@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap");

:root {
  --rr-purple: #6c3ce0;
  --rr-purple-dk: #4a22b0;
  --rr-teal: #1ec8c8;
  --rr-bg: #1a1430;
  --rr-panel: #241c42;
  --rr-card: #2e2454;
  --rr-text: #f2eefc;
  --rr-muted: #a89cc8;
  --rr-accent: #ff6bcb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: Nunito, system-ui, sans-serif;
  background: var(--rr-bg); color: var(--rr-text);
}
#app { display: grid; grid-template-columns: 280px 1fr 300px; height: 100vh; }
@media (max-width: 1000px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .sidebar { max-height: 30vh; overflow: auto; }
}

.sidebar {
  background: var(--rr-panel);
  border-right: 1px solid #3a2f60;
  display: flex; flex-direction: column; padding: 12px;
  gap: 10px; overflow: auto;
}
.sidebar.right { border-right: none; border-left: 1px solid #3a2f60; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px; letter-spacing: 0.02em;
}
.brand .logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--rr-purple), var(--rr-teal));
  display: grid; place-items: center; font-size: 18px;
}
.brand small { display: block; font-size: 11px; color: var(--rr-muted); font-weight: 600; }

.section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--rr-muted); margin-top: 6px;
}

.room-list { display: flex; flex-direction: column; gap: 8px; }
.room-card {
  background: var(--rr-card); border: 2px solid transparent;
  border-radius: 12px; padding: 10px; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.room-card:hover { border-color: var(--rr-teal); transform: translateY(-1px); }
.room-card.active { border-color: var(--rr-purple); box-shadow: 0 0 0 1px var(--rr-purple); }
.room-card .name { font-weight: 800; font-size: 14px; }
.room-card .meta { font-size: 11px; color: var(--rr-muted); margin-top: 2px; }
.room-card .tag {
  display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px; background: #3d2f70; color: #c8b8ff;
}
.room-card .tag.original { background: #1a4a4a; color: var(--rr-teal); }

#viewport-wrap {
  position: relative; background: #0d0a18; min-height: 0;
}
#c { width: 100%; height: 100%; display: block; }
#hud {
  position: absolute; left: 12px; top: 12px; z-index: 5;
  pointer-events: none; text-shadow: 0 2px 8px #000;
}
#hud h2 { font-size: 18px; }
#hud p { font-size: 12px; color: #c8b8e8; }
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50%; pointer-events: none; z-index: 5;
}
#controls-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(20,14,40,0.75); padding: 8px 14px; border-radius: 999px;
  font-size: 12px; color: var(--rr-muted); z-index: 5; pointer-events: none;
}
kbd {
  background: #3a2f60; color: #fff; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; border: 1px solid #5a4a90;
}

/* Chat */
.chat-log {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  min-height: 120px; max-height: 40vh;
}
.chat-line {
  background: var(--rr-card); border-radius: 10px; padding: 8px 10px;
  font-size: 13px; line-height: 1.35;
}
.chat-line .who { font-weight: 800; color: var(--rr-teal); margin-right: 6px; }
.chat-line .who.bot { color: var(--rr-accent); }
.chat-line .who.p2 { color: #a88bff; }
.chat-line .who.sq { color: #1ec8c8; }
.chat-line .who.sys { color: #ffcc66; }
.chat-line .who.me { color: #8ab4ff; }
.player-chip .dot.p2 { background: #a88bff; }
.player-chip .dot.sq { background: #1ec8c8; }

.chat-input-row { display: flex; gap: 6px; }
.chat-input-row input {
  flex: 1; border: none; border-radius: 10px; padding: 10px 12px;
  background: #1a1430; color: #fff; font: 600 13px Nunito, sans-serif;
  outline: 2px solid transparent;
}
.chat-input-row input:focus { outline-color: var(--rr-purple); }
.chat-input-row button, .btn {
  border: none; border-radius: 10px; padding: 10px 14px;
  background: var(--rr-purple); color: #fff; font-weight: 800;
  cursor: pointer; font-size: 13px;
}
.chat-input-row button:hover, .btn:hover { filter: brightness(1.08); }
.btn.teal { background: var(--rr-teal); color: #062020; }
.btn.pink { background: var(--rr-accent); }
.btn.ghost { background: #3a2f60; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.voice-box {
  background: var(--rr-card); border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.voice-box .status {
  font-size: 11px; color: var(--rr-muted);
}
.voice-box .status.ok { color: #6f6; }
.voice-box .status.warn { color: #fc6; }
.voice-row { display: flex; gap: 6px; flex-wrap: wrap; }
#ptt {
  flex: 1; min-height: 48px; font-size: 14px;
  background: linear-gradient(180deg, #ff6bcb, #c43a90);
}
#ptt.listening { animation: pulse 0.8s infinite alternate; }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(255,107,203,0.5); } to { box-shadow: 0 0 0 8px rgba(255,107,203,0); } }
.voice-hint {
  font-size: 10px; color: var(--rr-muted); line-height: 1.35; margin: 0;
}

.key-row { display: flex; gap: 6px; }
.key-row input {
  flex: 1; border-radius: 8px; border: 1px solid #4a3a70;
  background: #120e22; color: #ccc; padding: 6px 8px; font-size: 11px;
}

.player-list { display: flex; flex-direction: column; gap: 6px; }
.player-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--rr-card); border-radius: 10px; padding: 8px;
  font-size: 13px; font-weight: 700;
}
.player-chip .dot {
  width: 10px; height: 10px; border-radius: 50%; background: #4f4;
}
.player-chip .dot.bot { background: var(--rr-accent); }

.watch-menu {
  position: absolute; right: 12px; top: 12px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
}
.watch-menu button {
  border: none; border-radius: 12px; padding: 8px 12px;
  background: rgba(36, 28, 66, 0.9); color: #fff; font-weight: 800;
  cursor: pointer; border: 1px solid #5a4a90; font-size: 12px;
}
.watch-menu button:hover { background: var(--rr-purple); }