:root {
  --accent: #6ea8d8;
  --bg: #02030a;
  --panel-bg: rgba(8, 10, 15, 0.92);
  --text: #dfe6ec;
  --dim: #8a94a0;
  --glitch: #e0546a;
}

body.act-2 { --accent: #6fae7a; }
body.act-3 { --accent: #d8465a; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: "Consolas", "Menlo", "Courier New", monospace;
  overflow: hidden;
}

#gl {
  position: fixed; inset: 0; display: block;
  image-rendering: pixelated;
}

/* ---- HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

#crosshair {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: rgba(220, 230, 240, 0.7); font-size: 22px; text-shadow: 0 0 4px #000;
}

#interact-prompt {
  position: absolute; top: 56%; left: 50%; transform: translateX(-50%);
  background: var(--panel-bg); border: 1px solid var(--dim);
  padding: 0.4em 0.9em; border-radius: 2px; font-size: 0.85em;
}
#interact-prompt .key {
  display: inline-block; border: 1px solid var(--accent); color: var(--accent);
  padding: 0 0.4em; margin-right: 0.5em; border-radius: 2px; font-weight: bold;
}

#room-label {
  position: absolute; top: 3vh; left: 3vw; color: var(--dim); font-size: 0.85em;
  letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 0 6px #000;
}

#hud-hint {
  position: absolute; bottom: 2vh; left: 50%; transform: translateX(-50%);
  color: rgba(138, 148, 160, 0.55); font-size: 0.72em; text-shadow: 0 0 4px #000;
}

.hidden { display: none !important; }

/* ---- Start screen ---- */
#start-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: radial-gradient(ellipse at center, rgba(6,8,14,0.86) 40%, rgba(0,0,0,0.97) 100%),
              url("assets/img/prologue.png") center/cover;
  display: flex; align-items: center; justify-content: center;
}
#start-box { max-width: 620px; text-align: center; padding: 2em; }
#start-box h1 { color: var(--glitch); letter-spacing: 0.35em; margin: 0; font-size: 2.4em; }
#start-box .subtitle { color: var(--dim); letter-spacing: 0.25em; margin-top: 0.2em; }
#start-box .start-flavor { color: var(--dim); line-height: 1.6; margin: 2em 0; font-size: 0.92em; }
#start-btn {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  padding: 0.9em 2.4em; font-family: inherit; font-size: 1em; cursor: pointer;
  letter-spacing: 0.1em;
}
#start-btn:hover { background: rgba(110, 168, 216, 0.12); }
.start-controls { color: rgba(138,148,160,0.5); font-size: 0.75em; margin-top: 2em; }

/* ---- Communicator ---- */
#comm-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--panel-bg); border-left: 1px solid #1d232c;
  display: flex; flex-direction: column; z-index: 20;
  box-shadow: -12px 0 40px rgba(0,0,0,0.6);
}

#comm-header {
  display: flex; align-items: center; gap: 0.8em;
  padding: 0.8em 1em; border-bottom: 1px solid #1d232c;
}
#comm-portrait {
  position: relative; width: 56px; height: 56px; border: 1px solid #2a323e;
  overflow: hidden; flex-shrink: 0; background: #05070c;
}
#comm-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.9) contrast(1.1);
}
#comm-portrait.glitching img { animation: portrait-jitter 0.24s steps(2) infinite; }
@keyframes portrait-jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 1px) scaleX(1.02); }
  100% { transform: translate(1px, -1px); }
}
#portrait-static {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.16;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(160,200,255,0.5) 2px 3px);
}
#comm-meta { display: flex; flex-direction: column; flex: 1; }
#comm-name { color: var(--accent); font-weight: bold; }
#comm-status { color: var(--dim); font-size: 0.72em; }
#comm-close { background: none; border: none; color: var(--dim); font-size: 1.1em; cursor: pointer; }

#chat-log { flex: 1; overflow-y: auto; padding: 1em; display: flex; flex-direction: column; gap: 0.5em; }
.msg { max-width: 88%; padding: 0.55em 0.8em; border-radius: 10px; line-height: 1.4; font-size: 0.88em; }
.msg.luna { align-self: flex-start; background: #171b22; border-bottom-left-radius: 2px; }
.msg.player { align-self: flex-end; background: #17324a; border-bottom-right-radius: 2px; }
.msg.narration { align-self: center; color: var(--dim); font-style: italic; font-size: 0.8em; text-align: center; }
.msg.glitch { color: var(--glitch); }

#chat-choices { display: flex; flex-direction: column; gap: 0.4em; padding: 0 1em 0.6em; }
#chat-choices button {
  background: #12151b; border: 1px solid var(--accent); color: var(--text);
  padding: 0.6em 0.9em; text-align: left; border-radius: 6px; cursor: pointer; font-family: inherit;
  font-size: 0.85em;
}
#chat-choices button:hover { background: #1a2028; }

#chat-form { display: flex; border-top: 1px solid #1d232c; }
#chat-input { flex: 1; background: #0b0d12; border: none; color: var(--text); padding: 0.9em; font-family: inherit; }
#chat-input:focus { outline: none; }
#chat-form button { background: none; border: none; color: var(--accent); font-size: 1.2em; padding: 0 1em; cursor: pointer; }

#comm-toggle {
  position: fixed; bottom: 3vh; right: 3vw; z-index: 15;
  width: 3.2em; height: 3.2em; border-radius: 50%; border: 1px solid var(--accent);
  background: var(--panel-bg); color: var(--accent); font-size: 1.2em; cursor: pointer;
}
#chat-badge {
  position: absolute; top: -4px; right: -4px; background: var(--glitch); color: #fff;
  border-radius: 50%; width: 1.4em; height: 1.4em; font-size: 0.55em; line-height: 1.4em;
}

.typing-indicator { color: var(--dim); font-style: italic; font-size: 0.8em; align-self: flex-start; }

/* ---- Ending ---- */
#ending-overlay {
  position: fixed; inset: 0; background: #000; z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
#ending-box { max-width: 560px; text-align: center; padding: 2em; }
#ending-box h2 { color: var(--accent); letter-spacing: 0.15em; }
#ending-box p { line-height: 1.7; color: var(--dim); }
#ending-restart {
  margin-top: 1.5em; background: transparent; border: 1px solid var(--accent); color: var(--accent);
  padding: 0.7em 1.4em; cursor: pointer; font-family: inherit;
}