:root {
  --w: 960px;
  --h: 540px;
  --ground-y: 400px;
  --ui-amber: #e8a33d;
  --ui-blue: #6fa8dc;
  --ui-ghost: #bfe3e0;
  --panel-bg: rgba(18, 14, 20, 0.94);
  --panel-border: #4a3f45;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0a0a0d;
  font-family: 'Courier New', ui-monospace, monospace;
  color: #eee2d0;
  overflow: hidden;
}

#viewport {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-container {
  position: relative;
  width: var(--w);
  height: var(--h);
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
  image-rendering: pixelated;
  flex-shrink: 0;
}

.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hidden { display: none !important; }

/* ---------- Title screen ---------- */
#title-screen {
  background: radial-gradient(ellipse at center, #2a2135 0%, #0d0a12 80%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-card {
  text-align: center;
  padding: 32px 48px;
  border: 2px solid var(--panel-border);
  background: var(--panel-bg);
}
.title-card h1 {
  font-size: 64px;
  letter-spacing: 10px;
  margin: 0;
  color: var(--ui-amber);
  text-shadow: 0 0 18px rgba(232,163,61,0.5), 3px 3px 0 #3a1f10;
}
.subtitle {
  margin: 4px 0 24px;
  color: #a99a8c;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
}
.title-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #c9bdae;
}
#player-name-input {
  font-family: inherit;
  font-size: 16px;
  padding: 8px 10px;
  width: 220px;
  background: #1a1620;
  border: 1px solid var(--panel-border);
  color: #eee2d0;
  text-align: center;
  margin-bottom: 18px;
}
#start-btn {
  display: block;
  margin: 0 auto;
  font-family: inherit;
  font-size: 18px;
  padding: 10px 32px;
  background: var(--ui-amber);
  color: #2a1a0a;
  border: none;
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
}
#start-btn:hover { background: #ffc266; }
.controls-hint {
  margin-top: 20px;
  font-size: 11px;
  color: #8a7d70;
}
kbd {
  display: inline-block;
  background: #2a2430;
  border: 1px solid #57505c;
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  margin: 0 1px;
}

/* ---------- Scene ---------- */
#scene-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#scene-world {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  /* width set inline per-scene; translateX set by JS camera */
}
#scene-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#actor-layer {
  position: absolute;
  inset: 0;
}
.actor {
  position: absolute;
  bottom: calc(var(--h) - var(--ground-y));
  width: 64px;
  transform: translateX(-50%);
  transition: filter 0.15s;
}
.actor img { width: 100%; display: block; filter: drop-shadow(0 6px 4px rgba(0,0,0,0.5)); }
.actor.in-range img { filter: drop-shadow(0 0 8px rgba(232,163,61,0.85)); }
.actor .name-tag {
  text-align: center;
  font-size: 10px;
  color: #cfc3b4;
  text-shadow: 1px 1px 1px #000;
  margin-top: 2px;
}
.hotspot { width: 40px; opacity: 0.95; }

#interact-prompt {
  position: absolute;
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--panel-border);
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 4px;
  color: var(--ui-amber);
  transform: translate(-50%, -100%);
  pointer-events: none;
}

#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 14px;
  pointer-events: none;
}
#case-label {
  background: rgba(0,0,0,0.55);
  padding: 5px 10px;
  font-size: 12px;
  color: #cbb;
  border: 1px solid var(--panel-border);
  pointer-events: none;
}
#journal-btn {
  pointer-events: all;
  font-family: inherit;
  background: rgba(0,0,0,0.6);
  color: var(--ui-amber);
  border: 1px solid var(--panel-border);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
#journal-btn:hover { background: rgba(232,163,61,0.15); }
.key-hint {
  border: 1px solid #57505c;
  border-radius: 3px;
  padding: 0 5px;
  margin-left: 6px;
  font-size: 10px;
}

/* ---------- Close-up view ---------- */
#closeup-screen {
  background: #05040a;
  display: flex;
  align-items: center;
  justify-content: center;
}
#closeup-image {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#closeup-notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.closeup-note-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: all;
  padding: 6px;
}
.closeup-note-pin .pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(232, 163, 61, 0.35);
  border: 2px solid var(--ui-amber);
  box-shadow: 0 0 10px rgba(232, 163, 61, 0.6);
  transition: transform 0.15s, background 0.15s;
}
.closeup-note-pin:hover .pin-dot {
  background: var(--ui-amber);
  transform: scale(1.25);
}
.closeup-note-pin .pin-label {
  font-size: 11px;
  color: #f0e6d6;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
#closeup-leave-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: inherit;
  background: rgba(0, 0, 0, 0.6);
  color: var(--ui-amber);
  border: 1px solid var(--panel-border);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
#closeup-leave-btn:hover { background: rgba(232, 163, 61, 0.15); }

/* ---------- Dialogue ---------- */
#dialogue-box {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  display: flex;
  gap: 14px;
  padding: 14px;
  min-height: 120px;
}
#dialogue-portrait-wrap {
  width: 80px;
  flex-shrink: 0;
}
#dialogue-portrait { width: 100%; image-rendering: auto; }
#dialogue-name {
  color: var(--ui-amber);
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#dialogue-text {
  font-size: 14px;
  line-height: 1.5;
  color: #e9e2d5;
  min-height: 42px;
}
#dialogue-choices {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dialogue-choice-btn, .dialogue-continue-btn {
  font-family: inherit;
  background: #232030;
  color: #dcd3c4;
  border: 1px solid var(--panel-border);
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.dialogue-choice-btn:hover, .dialogue-continue-btn:hover {
  background: #35304a;
  color: var(--ui-amber);
}

/* ---------- Journal ---------- */
#journal-overlay {
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.journal-panel {
  width: 720px;
  max-width: 90%;
  height: 460px;
  background: #17131a;
  border: 2px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
}
.journal-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 8px;
}
.journal-header h2 { margin: 0; color: var(--ui-amber); letter-spacing: 2px; }
#journal-close-btn {
  font-family: inherit;
  background: none;
  border: 1px solid var(--panel-border);
  color: #cbb;
  cursor: pointer;
  padding: 4px 8px;
}
.journal-tabs { display: flex; gap: 4px; margin-top: 10px; }
.journal-tab {
  font-family: inherit;
  background: #221c28;
  color: #a89b8d;
  border: 1px solid var(--panel-border);
  border-bottom: none;
  padding: 6px 16px;
  cursor: pointer;
}
.journal-tab.active { background: #2e2735; color: var(--ui-amber); }
.journal-content {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--panel-border);
  padding: 10px;
  margin-top: -1px;
}
.journal-pane.hidden { display: none; }
.clue-card, .idea-card {
  border: 1px solid var(--panel-border);
  background: #201b26;
  padding: 8px 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
.clue-card.selected { border-color: var(--ui-amber); background: #2d2416; }
.clue-card .clue-title, .idea-card .idea-title {
  font-weight: bold;
  color: var(--ui-blue);
  font-size: 13px;
  margin-bottom: 3px;
}
.idea-card .idea-title { color: var(--ui-amber); }
.clue-card .clue-text, .idea-card .idea-text {
  font-size: 12px;
  color: #cfc3b4;
  line-height: 1.4;
}
.empty-note { color: #766a5e; font-size: 12px; font-style: italic; }
.journal-footer { margin-top: 10px; }
.journal-hint { font-size: 11px; color: #8a7d70; margin: 4px 0; }
#combine-btn {
  font-family: inherit;
  background: var(--ui-amber);
  border: none;
  color: #2a1a0a;
  font-weight: bold;
  padding: 7px 16px;
  cursor: pointer;
}
#combine-feedback {
  display: inline-block;
  margin-left: 12px;
  font-size: 12px;
  color: var(--ui-ghost);
}

/* ---------- Confrontation ---------- */
#confrontation-screen {
  background: #100a08;
  overflow: hidden;
}
#confrontation-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 30%, #3a2a1a 0%, #100a08 75%);
}
.confrontation-stage {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 260px;
  padding: 30px 60px 0;
}
.ghost-side, .player-side { width: 200px; text-align: center; }
#confrontation-ghost-portrait {
  width: 140px;
  filter: drop-shadow(0 0 18px rgba(150,220,255,0.55));
  opacity: 0.92;
}
.meter-wrap { margin-top: 10px; }
.meter-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #cbb;
  margin-bottom: 3px;
}
.meter {
  width: 100%;
  height: 12px;
  background: #241a14;
  border: 1px solid var(--panel-border);
}
.meter-fill { height: 100%; width: 0%; transition: width 0.3s; }
.meter-fill.resolve { background: linear-gradient(90deg, #6fa8dc, #bfe3e0); }
.meter-fill.pressure { background: linear-gradient(90deg, #e8a33d, #ffdca0); }

.confrontation-timer-wrap {
  width: 80%;
  margin: 6px auto 0;
  height: 8px;
  background: #241a14;
  border: 1px solid var(--panel-border);
}
#confrontation-timer-fill {
  height: 100%;
  width: 100%;
  background: #d1553f;
  transition: width linear;
}

#confrontation-ghost-line {
  text-align: center;
  font-size: 15px;
  color: #f0e6d6;
  padding: 18px 80px 6px;
  min-height: 48px;
  font-style: italic;
}

#confrontation-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 100px 0;
}
.confrontation-option-btn {
  font-family: inherit;
  background: #1c1712;
  border: 1px solid var(--panel-border);
  color: #e9e2d5;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  gap: 10px;
}
.confrontation-option-btn:hover { background: #2c2318; color: var(--ui-amber); border-color: var(--ui-amber); }
.confrontation-option-btn .opt-key {
  border: 1px solid #57505c;
  border-radius: 3px;
  padding: 0 6px;
  font-size: 11px;
  color: #cbb;
  flex-shrink: 0;
}

#confrontation-result {
  position: absolute;
  inset: 0;
  background: rgba(5,3,2,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px;
  font-size: 16px;
  line-height: 1.7;
  color: #f0e6d6;
}
#confrontation-result .result-title {
  display: block;
  font-size: 22px;
  color: var(--ui-amber);
  margin-bottom: 14px;
  letter-spacing: 2px;
}
#confrontation-result button {
  font-family: inherit;
  margin-top: 20px;
  background: var(--ui-amber);
  border: none;
  color: #2a1a0a;
  font-weight: bold;
  padding: 8px 20px;
  cursor: pointer;
}