:root {
  --bg-abyss: #06090c;
  --panel-bg: #0d1318;
  --panel-border: #1f2e38;
  --text-main: #d7e4ec;
  --text-dim: #7b93a4;
  --phosphor-green: #52f296;
  --sodium-amber: #ff9d3b;
  --halogen-cyan: #5ce1e6;
  --hazard-red: #ff4757;
  --font-mono: 'Consolas', 'SFMono-Regular', 'Menlo', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg-abyss);
  color: var(--text-main);
  font-family: var(--font-mono);
  overflow: hidden;
  user-select: none;
}

#app-shell {
  display: flex;
  width: 100vw;
  height: 100vh;
}

#stage-container {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  background: #030507;
  overflow: hidden;
}

#gl-stage, #hud-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#hud-stage {
  pointer-events: none;
}

#diegetic-pill-bar {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
}

.pill {
  background: rgba(8, 14, 19, 0.84);
  border: 1px solid rgba(92, 225, 230, 0.28);
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-radius: 3px;
  color: var(--text-dim);
}

.pill strong {
  color: var(--text-main);
}

.stage-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 9, 0.86);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 25;
  padding: 24px;
}

.stage-overlay.visible {
  display: flex;
}

.overlay-card {
  max-width: 720px;
  width: 100%;
  background: #0b1116;
  border: 1px solid var(--panel-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  padding: 28px;
}

.overlay-card.compact {
  max-width: 480px;
  text-align: center;
}

.overlay-kicker {
  color: var(--sodium-amber);
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}

.overlay-card h1 {
  font-size: 32px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  color: #ffffff;
}

.overlay-card h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #ffffff;
}

.overlay-lead {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-main);
  margin-bottom: 18px;
}

.command-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.cmd-box {
  background: rgba(18, 28, 36, 0.75);
  border-left: 3px solid var(--halogen-cyan);
  padding: 10px;
  font-size: 12px;
  line-height: 1.4;
}

.cmd-box code {
  display: inline-block;
  color: var(--phosphor-green);
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.cmd-box span {
  display: block;
  color: var(--text-dim);
}

.overlay-actions {
  display: flex;
  gap: 12px;
}

button {
  font-family: var(--font-mono);
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: #152028;
  color: var(--text-main);
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 2px;
  transition: background 0.12s, border-color 0.12s;
}

button:hover {
  background: #1e2f3b;
  border-color: var(--halogen-cyan);
}

.btn-primary {
  background: #133a2e;
  border-color: var(--phosphor-green);
  color: var(--phosphor-green);
  font-weight: bold;
}

.btn-primary:hover {
  background: #1b5241;
}

.btn-secondary {
  background: #18222a;
  color: var(--text-dim);
}

/* OPERATOR DECK */
#operator-deck {
  width: 390px;
  min-width: 390px;
  height: 100%;
  background: var(--panel-bg);
  border-left: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 30;
}

#operator-deck.hidden {
  display: none;
}

.deck-header {
  padding: 12px 14px;
  background: #080d11;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deck-header h2 {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--sodium-amber);
}

.deck-header small {
  font-size: 11px;
  color: var(--text-dim);
}

.deck-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-border);
}

.deck-section.grow {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 150px;
}

.deck-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.btn-row, .seed-row, .sim-user-row, .sim-raw-row, .quorum-row, .acc-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
}

.quorum-row, .acc-row {
  justify-content: space-between;
}

input[type="text"], input[type="number"] {
  background: #070b0e;
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 8px;
  flex: 1;
  min-width: 0;
}

.btn-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.btn-chat {
  background: #10212b;
  border-color: #26485c;
  color: var(--halogen-cyan);
  font-weight: bold;
  padding: 7px 4px;
}

.btn-op.accent {
  border-color: var(--phosphor-green);
  color: var(--phosphor-green);
}

.btn-op.danger {
  border-color: var(--hazard-red);
  color: var(--hazard-red);
}

.meter-group {
  margin-bottom: 7px;
}

.meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 3px;
}

.meter-track {
  height: 7px;
  background: #060a0d;
  border: 1px solid var(--panel-border);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 0%;
  transition: width 0.1s linear;
}

.meter-fill.cyan { background: var(--halogen-cyan); }
.meter-fill.amber { background: var(--sodium-amber); }

.telemetry-box {
  background: #06090c;
  border: 1px solid #16222b;
  padding: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--phosphor-green);
  white-space: pre-wrap;
}

.chat-feed {
  list-style: none;
  background: #06090c;
  border: 1px solid #16222b;
  padding: 6px;
  font-size: 11px;
  flex: 1;
  overflow-y: auto;
}

.chat-feed li {
  padding: 3px 0;
  border-bottom: 1px dashed #121c24;
  display: flex;
  justify-content: space-between;
}

.chat-feed li.rejected {
  color: #6c4349;
}

.ending-stats {
  background: #070b0f;
  border: 1px solid var(--panel-border);
  padding: 12px;
  margin: 14px 0;
  font-size: 12px;
  line-height: 1.6;
}

#solo-controls{position:absolute;z-index:6;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:rgba(9,19,20,.88);padding:5px;border:1px solid #738172;white-space:nowrap}
#solo-controls button{padding:8px 11px;color:#e3d8b4;background:#233532;border:1px solid #637e6e;font:12px Consolas,monospace;cursor:pointer}
.audio-drawer{position:absolute;right:145px;top:12px;z-index:8;background:#142321eF;border:1px solid #6b7d6e;padding:8px;width:180px;color:#ded7be;font:12px Consolas,monospace}.audio-drawer[open]{width:255px}.audio-drawer summary{cursor:pointer}.audio-drawer label,.deck-section label:has([data-audio-channel]){display:block;margin:7px 0}.audio-drawer input[type=range]{width:100%}
.brief-help{font-size:12px;color:#aec1b6;margin:10px 0}.brief-help p{line-height:1.5}#command-notice{position:absolute;z-index:7;bottom:60px;left:50%;transform:translateX(-50%);color:#e8d1a3;background:#152521eF;padding:5px 10px;font:13px Consolas,monospace}#command-notice:empty{display:none}

.source-row{padding:10px 0;border-top:1px solid #425e58;display:grid;grid-template-columns:1fr 1fr;gap:7px}.source-row strong,.source-row small,.source-row .sound-reason{grid-column:1/-1}.source-row small{color:#a6bdb7}.source-row meter{width:100%;height:20px}.source-row output{font-size:11px}.source-row select{max-width:200px;background:#152722;color:#eee}.source-row input[type=range]{width:100px}.sound-reason{color:#d6c99d;font-size:12px}#operator-source-mixer p{font-size:12px;line-height:1.4}

.overlay-card{max-height:calc(100vh - 40px);overflow:auto}#operator-deck>a{color:#dcc58e;padding:8px;display:block}

.save-drawer{position:absolute;top:14px;left:16px;z-index:65;max-width:min(340px,85vw);background:#0b171eee;color:#dfedf2;padding:10px;font:13px system-ui}.save-drawer button,.save-drawer select{margin:5px;padding:8px;max-width:90%}.save-drawer p{max-width:300px}.audio-drawer{max-height:65vh;overflow:auto;z-index:66}.audio-drawer label{display:flex;justify-content:space-between;gap:10px}#solo-controls{z-index:55}#diegetic-pill-bar{display:none}

.relay-notes {position:absolute;z-index:65;top:100px;left:50%;transform:translateX(-50%);width:min(480px,94vw);background:#071b1cee;border:1px solid #a2d9bc;padding:12px;text-align:center;color:#d7e8dc;box-sizing:border-box}
.relay-notes[hidden]{display:none}.relay-notes p{margin:6px 0}.relay-notes button{min-height:44px;min-width:82px;margin:3px}.relay-notes small{display:block}.relay-notes:has(button:focus-visible){outline:2px solid #f5cf8b}