html, body { margin: 0; height: 100%; background: #0d0a16; overflow: hidden; color: #fff7ea; font-family: "Courier New", ui-monospace, monospace; }
#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.game-canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; background: #0d0a16; }
.noscript { padding: 2rem; }

.menu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.menu-backdrop { background: rgba(13, 10, 22, 0.5); }
.menu-logo { image-rendering: pixelated; max-width: 82vw; height: auto; filter: drop-shadow(0 0 14px rgba(255, 46, 147, 0.6)); animation: glow 3.4s ease-in-out infinite alternate, glitch 5s steps(1) infinite; }
@keyframes glow { from { filter: drop-shadow(0 0 8px rgba(255, 46, 147, 0.4)); } to { filter: drop-shadow(0 0 22px rgba(34, 240, 255, 0.7)); } }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translate(-4px, 1px); filter: drop-shadow(-5px 0 #22f0ff) drop-shadow(5px 0 #ff2e93); } 95% { transform: translate(5px, -1px); filter: drop-shadow(5px 0 #22f0ff) drop-shadow(-5px 0 #ff2e93); } 97% { transform: translate(-2px, 0); } }
.menu-sub { margin: 0 0 8px; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem; color: #ffd35a; text-shadow: 0 0 8px rgba(255, 138, 31, 0.6); }
.menu-list { display: flex; flex-direction: column; gap: 6px; min-width: min(420px, 80vw); }
.menu-list button {
  font: inherit; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff7ea; cursor: pointer;
  padding: 9px 18px; border: 1px solid rgba(255, 211, 90, 0.35); border-radius: 2px;
  background: linear-gradient(180deg, rgba(42, 33, 64, 0.88), rgba(20, 14, 36, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 #0d0a16, 0 0 0 transparent;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.menu-list button:hover, .menu-list button:focus-visible {
  outline: none; border-color: #22f0ff; transform: translateX(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 #0d0a16, 0 0 16px rgba(34, 240, 255, 0.45);
}
.menu-foot { margin: 6px 0 0; padding: 5px 12px; font-size: 0.7rem; letter-spacing: 0.08em; color: #e6e0f5; background: rgba(13, 10, 22, 0.78); border: 1px solid rgba(255, 211, 90, 0.18); max-width: 80vw; }

.crash-overlay { position: absolute; inset: 0; z-index: 10; background: rgba(13, 10, 22, 0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
.crash-overlay pre { max-width: 80vw; overflow: auto; background: #1b1430; padding: 12px; color: #ff8a8a; font-size: 12px; }
.crash-overlay button { font: inherit; padding: 8px 16px; cursor: pointer; }

/* Readable UI font for prose. Pixel/display look stays on HUD labels and the title logo. */
:root {
  --ui-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ink: #0d0a16;
  --paper: #fff7ea;
  --cyan: #22f0ff;
  --pink: #ff2e93;
  --gold: #ffd35a;
  --orange: #ff8a1f;
  --green: #4dff9a;
  --panel: rgba(16, 12, 28, 0.92);
}
body { font-family: var(--ui-font); }

.ui-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ui-layer > * { pointer-events: auto; }
.menu { z-index: 6; }

/* Dialogue */
.dlg {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  width: min(760px, 92vw); display: flex; gap: 14px; align-items: flex-end;
  padding: 12px 14px 14px; background: var(--panel);
  border: 1px solid rgba(34, 240, 255, 0.35);
  box-shadow: 0 0 28px rgba(34, 240, 255, 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}
.dlg-narrator { align-items: stretch; }
.dlg-portrait { image-rendering: pixelated; width: 144px; height: 144px; flex: 0 0 auto; background: #140e22; border: 1px solid rgba(255, 211, 90, 0.25); }
.dlg-body { flex: 1; min-width: 0; text-align: left; }
.dlg-name { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; text-shadow: 0 0 8px rgba(255, 211, 90, 0.4); }
.dlg-text { font-family: var(--ui-font); font-size: 1.05rem; line-height: 1.45; color: var(--paper); min-height: 3.2em; white-space: pre-wrap; }
.dlg-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dlg-choice {
  font: inherit; text-align: left; cursor: pointer; color: var(--paper);
  padding: 8px 10px; background: rgba(42, 33, 64, 0.7);
  border: 1px solid rgba(255, 211, 90, 0.28); border-left-width: 3px;
}
.dlg-choice.on, .dlg-choice:hover, .dlg-choice:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 12px rgba(34, 240, 255, 0.35); }
.dlg-choice.locked { opacity: 0.45; cursor: not-allowed; }
.dlg-choice.shake { animation: dlg-shake 0.28s ease; }
@keyframes dlg-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.dlg-tag { display: inline-block; margin-right: 8px; padding: 1px 6px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid currentColor; }
.tag-kind { color: var(--green); } .tag-harsh { color: var(--orange); } .tag-lie { color: #a94dff; }
.tag-truth { color: var(--cyan); } .tag-savage { color: #e0173a; } .tag-leave { color: #9a96bd; }
.dlg-hint { margin-top: 8px; font-size: 0.72rem; letter-spacing: 0.08em; color: #c8c0d8; }

/* Cutscene */
.cut { position: absolute; inset: 0; pointer-events: none; }
.cut > * { pointer-events: auto; }
.cut-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.05s linear; }
.cut-bars { display: none; }
.cut.letterbox .cut-bars { display: block; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 44px 0 #000, inset 0 -44px 0 #000; }
.cut-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(680px, 88vw); padding: 28px 32px; background: rgba(8, 6, 16, 0.88);
  border: 1px solid rgba(255, 211, 90, 0.3); text-align: left;
}
.cut-card-text { font-family: var(--ui-font); font-size: 1.15rem; line-height: 1.55; color: var(--paper); }
.cut-card-sub { margin-top: 12px; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.cut-title { position: absolute; left: 50%; top: 28%; transform: translateX(-50%); text-align: center; }
.cut-title-main { font-size: 1.8rem; letter-spacing: 0.28em; color: var(--gold); text-shadow: 0 0 16px rgba(255, 211, 90, 0.5); }
.cut-title-sub { margin-top: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.cut-skip { position: absolute; right: 16px; bottom: 12px; font-size: 0.7rem; color: #c8c0d8; pointer-events: none; }
.cut.flashback { filter: saturate(0.6) contrast(1.05); }
.cut.hallucination { filter: saturate(1.4) hue-rotate(8deg); }

/* Panels: journal, inventory, wardrobe, map */
.panel-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(13, 10, 22, 0.62); }
.panel { width: min(720px, 92vw); max-height: min(80vh, 640px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid rgba(34, 240, 255, 0.3); box-shadow: 0 0 24px rgba(255, 46, 147, 0.18); }
.panel-wide { width: min(860px, 94vw); }
.panel-title { margin: 0; padding: 14px 18px 0; font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.panel-sub { margin: 4px 18px 0; font-size: 0.75rem; color: #c8c0d8; }
.panel-body { overflow: auto; padding: 12px 18px 18px; text-align: left; }
.tabs { display: flex; gap: 6px; padding: 10px 18px 0; }
.tab { font: inherit; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: transparent; border: 1px solid rgba(255,211,90,0.25); padding: 6px 10px; cursor: pointer; }
.tab.on, .tab:hover { border-color: var(--cyan); color: var(--cyan); }
.j-quest, .j-lore, .j-note { margin: 0 0 14px; padding: 10px 12px; background: rgba(42, 33, 64, 0.45); border-left: 3px solid var(--cyan); }
.j-quest.j-done { border-left-color: var(--green); opacity: 0.8; }
.j-quest.j-failed { border-left-color: #e0173a; }
.j-quest h3, .j-lore h3, .j-note h3 { margin: 0 0 4px; font-size: 1rem; color: var(--paper); }
.j-meta { margin: 0 0 6px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.j-objs { margin: 0; padding-left: 18px; }
.j-objs .done { opacity: 0.5; text-decoration: line-through; }
.j-empty, .j-log { color: #c8c0d8; }
.j-log-head { margin: 16px 0 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.inv-list { display: flex; flex-direction: column; gap: 8px; }
.inv-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 10px; background: rgba(42, 33, 64, 0.45); border: 1px solid rgba(255,211,90,0.16); }
.inv-row.dim { opacity: 0.55; }
.inv-name { font-weight: 600; }
.inv-count { color: var(--gold); }
.inv-desc { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: #c8c0d8; line-height: 1.4; }
.inv-btn { font: inherit; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; color: var(--ink); background: var(--cyan); border: 0; padding: 6px 10px; }
.inv-btn:disabled { opacity: 0.4; cursor: default; }
.inv-btn.ghost { background: transparent; color: var(--paper); border: 1px solid rgba(34,240,255,0.35); margin-top: 10px; }
.inv-note { color: var(--gold); }
.inv-equipped { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; font-size: 0.85rem; }
.ward-face { image-rendering: pixelated; width: 64px; height: 64px; }
.ward-info { grid-column: 1; }
.map-layout { display: grid; grid-template-columns: 1fr 220px; gap: 12px; }
.map-canvas { width: 100%; height: auto; image-rendering: pixelated; background: #0d0a16; border: 1px solid rgba(34,240,255,0.25); }
.map-side { font-size: 0.9rem; }

/* HUD chrome + toasts */
.hud-chrome { position: absolute; inset: 0; pointer-events: none; }
.hud-obj { position: absolute; left: 16px; top: 118px; min-width: 200px; max-width: min(320px, 40vw); padding: 8px 10px; background: rgba(16, 12, 28, 0.78); border-left: 3px solid var(--gold); font-family: var(--ui-font); font-size: 0.82rem; line-height: 1.35; }
.hud-obj-title { letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; font-size: 0.7rem; }
.hud-obj-row { color: var(--paper); }
.hud-obj-row.done { opacity: 0.45; text-decoration: line-through; }
.hud-obj-row.opt { color: #c8c0d8; }
.hud-prompt { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); padding: 6px 12px; background: rgba(16, 12, 28, 0.82); border: 1px solid rgba(255, 211, 90, 0.4); color: var(--gold); font-family: var(--ui-font); font-size: 0.85rem; letter-spacing: 0.06em; }
.hud-sus { position: absolute; left: 16px; top: 230px; width: 180px; padding: 6px 8px; background: rgba(16, 12, 28, 0.78); border-left: 3px solid var(--orange); }
.hud-sus-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.hud-sus-bar { height: 6px; margin-top: 4px; background: #2a2140; }
.hud-sus-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--orange), #e0173a); }
.toasts { position: absolute; right: 16px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; max-width: min(320px, 46vw); }
.toast { padding: 8px 10px; background: rgba(16, 12, 28, 0.9); border: 1px solid rgba(34, 240, 255, 0.35); font-family: var(--ui-font); font-size: 0.85rem; color: var(--paper); }
.toast-good { border-color: var(--green); } .toast-bad { border-color: #e0173a; } .toast-loot { border-color: var(--gold); }
.toast-rel { border-color: var(--pink); } .toast-hint { border-color: var(--cyan); }
.toast.out { opacity: 0; transition: opacity 0.4s; }

/* Ending + credits */
.ending, .credits { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(8, 6, 16, 0.92); padding: 32px; text-align: center; }
.ending-kicker { letter-spacing: 0.28em; text-transform: uppercase; color: var(--pink); font-size: 0.75rem; }
.ending-title { margin: 8px 0 12px; font-size: 2rem; letter-spacing: 0.12em; color: var(--gold); }
.ending-text { max-width: 640px; font-family: var(--ui-font); font-size: 1.15rem; line-height: 1.55; color: var(--paper); }
.ending-face { image-rendering: pixelated; width: 128px; height: 128px; margin-bottom: 8px; }
.ending-hint { margin-top: 20px; font-size: 0.75rem; color: #c8c0d8; }
.ending.epitaph .ending-text { font-style: italic; color: var(--cyan); }
.credits { overflow: hidden; }
.credits-roll { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.credits-logo { letter-spacing: 0.3em; color: var(--gold); }
.credits-role { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.credits-name { font-size: 1.05rem; }
.credits-hint { position: absolute; bottom: 16px; font-size: 0.75rem; color: #c8c0d8; }

@media (max-width: 720px) {
  .dlg { flex-direction: column; align-items: center; }
  .map-layout { grid-template-columns: 1fr; }
  .hud-obj { top: auto; bottom: 110px; left: 10px; }
}