@font-face { font-family: "Pixelify"; src: url(../fonts/pixelify.woff2) format("woff2"); font-weight: 400 700; }
@font-face { font-family: "Atkinson"; src: url(../fonts/atkinson-400.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Atkinson"; src: url(../fonts/atkinson-700.woff2) format("woff2"); font-weight: 700; }
@font-face { font-family: "Atkinson"; src: url(../fonts/atkinson-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; }

:root {
  --ink: #0d0b1a;
  --night: #1b1630;
  --night2: #262043;
  --violet: #463a70;
  --lav: #a99ad0;
  --cream: #f6e7c8;
  --amber: #ffb347;
  --pink: #ff5fa2;
  --cyan: #4ff0e6;
  --teal: #2b6e78;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07060d; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; font-family: "Atkinson", system-ui, sans-serif; color: var(--cream); user-select: none; -webkit-user-select: none; }

#stage { position: relative; width: 640px; height: 360px; transform-origin: center center; flex: none; overflow: hidden; background: var(--ink); }
#view { position: absolute; inset: 0; width: 640px; height: 360px; image-rendering: pixelated; image-rendering: crisp-edges; }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s ease; z-index: 40; }
#fade.on { opacity: 1; }
.hidden { display: none !important; }
button { font-family: "Pixelify", monospace; color: var(--cream); cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#clock { position: absolute; left: 8px; top: 6px; font-family: "Pixelify"; font-size: 15px; color: var(--amber); text-shadow: 0 0 6px rgba(255,179,71,.6), 1px 1px 0 #000; letter-spacing: .5px; pointer-events: none; }
#clock-ampm { font-size: 9px; margin-left: 2px; }
#objective { position: absolute; left: 8px; top: 25px; font-size: 7.5px; max-width: 220px; color: var(--cream); opacity: .85; text-shadow: 1px 1px 0 #000, 0 0 4px #000; pointer-events: none; line-height: 1.3; }
#countdown { position: absolute; right: 8px; top: 6px; text-align: right; font-family: "Pixelify"; color: var(--cyan); text-shadow: 0 0 6px rgba(79,240,230,.6), 1px 1px 0 #000; pointer-events: none; }
#countdown .lbl { display: block; font-size: 6px; letter-spacing: 1.5px; opacity: .8; }
#countdown-val { font-size: 13px; letter-spacing: 1px; }
#tickets { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); display: flex; gap: 3px; pointer-events: none; }
.ticket { background: #fffaf0; color: #3a1a10; font-size: 6px; font-family: "Pixelify"; padding: 3px 4px 4px; box-shadow: 1px 1px 0 rgba(0,0,0,.5); transform: rotate(-1.5deg); border-top: 2px solid var(--pink); min-width: 34px; text-align: center; line-height: 1.15; animation: drop .35s ease; }
.ticket:nth-child(even) { transform: rotate(1.5deg); }
.ticket b { display: block; font-size: 7px; }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
#hud-buttons { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 3px; }
#hud-buttons button { font-size: 8px; background: rgba(27,22,48,.82); border: 1px solid var(--violet); padding: 3px 6px; border-radius: 2px; position: relative; }
#hud-buttons button:hover { border-color: var(--amber); color: var(--amber); }
.moth-dot { display: inline-block; width: 4px; height: 4px; background: var(--cyan); border-radius: 1px; margin-right: 3px; box-shadow: 0 0 4px var(--cyan); animation: blink 2.4s infinite; }
@keyframes blink { 50% { opacity: .3; } }
#journal-badge { position: absolute; top: -4px; right: -2px; color: var(--pink); font-size: 12px; text-shadow: 0 0 4px var(--pink); }
#hover-label { position: absolute; z-index: 12; pointer-events: none; font-family: "Pixelify"; font-size: 8px; background: rgba(13,11,26,.85); color: var(--amber); padding: 2px 5px; border: 1px solid rgba(255,179,71,.5); border-radius: 2px; white-space: nowrap; transform: translate(-50%, -140%); }
#hover-label.talk { color: var(--pink); border-color: rgba(255,95,162,.6); }
#hover-label.go { color: var(--cyan); border-color: rgba(79,240,230,.5); }

#toast-area { position: absolute; left: 8px; top: 48px; display: flex; flex-direction: column; gap: 3px; z-index: 30; pointer-events: none; }
.toast { font-size: 7.5px; background: rgba(13,11,26,.9); border-left: 2px solid var(--cyan); padding: 3px 7px 3px 5px; max-width: 220px; animation: toastin .4s ease, toastout .6s ease 3.6s forwards; }
.toast .k { font-family: "Pixelify"; font-size: 6px; letter-spacing: 1px; display: block; opacity: .75; }
.toast.word { border-color: var(--amber); }
.toast.word .k { color: var(--amber); }
.toast.notice .k { color: var(--cyan); }
.toast.order { border-color: var(--pink); }
.toast.order .k { color: var(--pink); }
@keyframes toastin { from { transform: translateX(-20px); opacity: 0; } }
@keyframes toastout { to { opacity: 0; transform: translateX(-10px); } }

/* ---------- Dialogue ---------- */
#dialogue { position: absolute; inset: 0; z-index: 20; }
#dialogue.dim::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,11,26,.55), rgba(13,11,26,0) 55%); }
#portrait { position: absolute; left: 0; bottom: 0; width: 200px; height: 240px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(0,0,0,.5)); animation: pin .25s ease; }
#portrait.radio { filter: sepia(.4) hue-rotate(290deg) saturate(1.6) drop-shadow(0 0 6px rgba(255,95,162,.4)); }
@keyframes pin { from { transform: translateX(-10px); opacity: 0; } }
#box { position: absolute; left: 10px; right: 10px; bottom: 8px; min-height: 84px; background: rgba(18,14,34,.93); border: 1px solid #463a70; border-radius: 3px; padding: 12px 14px 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 4px 18px rgba(0,0,0,.5); cursor: pointer; }
#dialogue.has-portrait #box { left: 170px; }
#speaker { position: absolute; top: -9px; left: 10px; font-family: "Pixelify"; font-size: 9px; padding: 2px 7px 2px; background: var(--night); border: 1px solid var(--amber); color: var(--amber); border-radius: 2px; letter-spacing: .5px; }
#speaker:empty { display: none; }
#line { font-size: 10px; line-height: 1.5; min-height: 30px; white-space: pre-wrap; }
#line.narration { color: #d8cfe8; font-style: italic; }
#line.you { color: #ffd27a; }
#line.chorus { color: var(--cyan); text-align: center; letter-spacing: .6px; font-family: "Pixelify"; font-size: 11px; text-shadow: 0 0 6px rgba(79,240,230,.6); }
#line.radio { color: #ffc6de; }
#line.phone { color: #c6e8ff; }
#line.sign { font-family: "Pixelify"; color: var(--cream); text-align: center; letter-spacing: .5px; }
#line em, #line i { color: #ffd3e6; }
#advance { position: absolute; right: 8px; bottom: 4px; font-size: 7px; color: var(--amber); animation: bob 1s infinite; opacity: 0; }
#advance.show { opacity: 1; }
@keyframes bob { 50% { transform: translateY(2px); } }
#choices { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
#choices button { text-align: left; font-family: "Atkinson"; font-size: 9.5px; background: rgba(70,58,112,.25); border: 1px solid rgba(169,154,208,.35); padding: 4px 8px; border-radius: 2px; color: var(--cream); line-height: 1.3; }
#choices button:hover, #choices button.focus { background: rgba(255,179,71,.14); border-color: var(--amber); color: #ffe6b8; }
#choices button .num { font-family: "Pixelify"; color: var(--amber); margin-right: 5px; font-size: 8px; }
#choices button.seen { color: #b9aed6; }

/* ---------- Overlays ---------- */
.overlay { position: absolute; inset: 0; z-index: 25; background: rgba(7,6,13,.72); display: flex; align-items: center; justify-content: center; }
.panel { width: 560px; height: 300px; background: #f2e6cc; color: #2a1c18; border-radius: 3px; box-shadow: 0 6px 30px rgba(0,0,0,.6), inset 0 0 0 1px #c9b49a; display: flex; flex-direction: column; overflow: hidden; }
.panel.small { width: 240px; height: auto; padding: 14px 16px; gap: 8px; color: var(--cream); background: var(--night); box-shadow: 0 6px 30px rgba(0,0,0,.6), inset 0 0 0 1px var(--violet); }
.panel.small h2 { font-family: "Pixelify"; margin: 0 0 4px; font-size: 14px; color: var(--amber); font-weight: 400; }
.panel.small label { display: flex; justify-content: space-between; align-items: center; font-size: 9px; }
.panel.small input[type=range] { width: 110px; accent-color: var(--amber); }
.panel.small button { font-size: 9px; padding: 5px; background: var(--night2); border: 1px solid var(--violet); border-radius: 2px; }
.panel.small button:hover { border-color: var(--amber); color: var(--amber); }
.panel .dim { font-size: 9px; opacity: .8; margin: 0; font-style: italic; }
#name-input { font-family: "Pixelify"; font-size: 16px; background: var(--ink); border: 1px solid var(--amber); color: var(--amber); padding: 4px 8px; text-align: center; outline: none; }

.tabs { display: flex; background: #2a1c18; padding: 4px 4px 0; gap: 2px; }
.tabs button { font-size: 8.5px; background: #4e3428; border: none; padding: 4px 9px; border-radius: 2px 2px 0 0; color: #e6d6b8; }
.tabs button.active { background: #f2e6cc; color: #2a1c18; }
.tabs .close { margin-left: auto; background: transparent; color: #e6d6b8; }
#journal-body { flex: 1; overflow-y: auto; padding: 10px 14px; font-size: 9px; line-height: 1.45; scrollbar-width: thin; }
#journal-body h3 { font-family: "Pixelify"; font-weight: 400; font-size: 11px; margin: 0 0 4px; color: #7a1f52; }
.people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.person { display: flex; gap: 8px; background: rgba(255,255,255,.35); padding: 6px; border-radius: 2px; border: 1px solid #d9c6a3; }
.person img { width: 50px; height: 60px; image-rendering: pixelated; background: #262043; border-radius: 2px; flex: none; object-fit: cover; object-position: top; }
.person .nm { font-family: "Pixelify"; font-size: 10px; color: #2a1c18; }
.person .role { font-size: 7.5px; opacity: .7; margin-bottom: 2px; }
.person ul { margin: 2px 0 0; padding-left: 10px; font-size: 8px; }
.person.unknown { opacity: .45; }
.word-card { background: #fffaf0; border-left: 3px solid var(--amber); padding: 5px 8px; margin-bottom: 5px; font-size: 9.5px; }
.word-card .who { font-family: "Pixelify"; font-size: 7.5px; color: #8a5236; display: block; }
.word-card.missing { opacity: .4; font-style: italic; border-color: #c9b49a; }
.notice-list { columns: 2; column-gap: 14px; }
.notice { break-inside: avoid; margin-bottom: 5px; font-size: 8.5px; }
.notice b { font-family: "Pixelify"; font-weight: 400; color: #1f5260; font-size: 9px; }
.notice.missing { opacity: .35; }
.counter { font-family: "Pixelify"; font-size: 9px; color: #8a5236; margin-bottom: 6px; }

#map { background: rgba(7,6,13,.4); }
#map-pins { position: absolute; inset: 0; }
.pin { position: absolute; transform: translate(-50%, -100%); font-family: "Pixelify"; font-size: 8px; background: rgba(13,11,26,.88); color: var(--cream); border: 1px solid var(--amber); border-radius: 2px; padding: 2px 6px; cursor: pointer; white-space: nowrap; }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--amber); border-bottom: 0; }
.pin:hover { background: var(--amber); color: var(--ink); }
.pin.here { border-color: var(--cyan); color: var(--cyan); }
.pin.here::after { border-top-color: var(--cyan); }
.pin.locked { opacity: .35; pointer-events: none; border-color: #6f7896; }
.pin.locked::after { border-top-color: #6f7896; }
.pin .dot { display: inline-block; width: 4px; height: 4px; background: var(--pink); border-radius: 50%; margin-left: 4px; box-shadow: 0 0 4px var(--pink); vertical-align: middle; }
.map-title { position: absolute; left: 12px; bottom: 8px; font-family: "Pixelify"; font-size: 10px; color: var(--amber); letter-spacing: 2px; text-shadow: 1px 1px 0 #000; }
#map .close { position: absolute; right: 8px; top: 8px; background: rgba(13,11,26,.9); border: 1px solid var(--violet); font-size: 9px; padding: 3px 6px; }

/* ---------- Title ---------- */
#title { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; }
#logo { margin-top: 70px; text-align: center; }
.logo-main { font-family: "Pixelify"; font-size: 44px; color: #ffe6b8; letter-spacing: 6px; text-shadow: 0 0 10px rgba(255,179,71,.9), 0 0 26px rgba(255,95,162,.6), 2px 2px 0 #2a0f24; animation: flicker 6s infinite; }
.logo-sub { font-size: 10px; letter-spacing: 3px; color: var(--cyan); text-shadow: 0 0 6px rgba(79,240,230,.6), 1px 1px 0 #000; margin-top: 2px; font-style: italic; }
@keyframes flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .75; } 97% { opacity: 1; } }
#title-menu { margin-top: 50px; display: flex; flex-direction: column; gap: 5px; }
#title-menu button { font-size: 11px; padding: 5px 22px; background: rgba(13,11,26,.8); border: 1px solid var(--amber); color: var(--amber); border-radius: 2px; letter-spacing: 1px; }
#title-menu button:hover { background: var(--amber); color: var(--ink); }
#title-foot { position: absolute; bottom: 8px; font-size: 7px; opacity: .6; letter-spacing: 1px; }

#loading { position: absolute; inset: 0; z-index: 50; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.loading-text { font-family: "Pixelify"; color: var(--amber); font-size: 10px; letter-spacing: 1px; }
#loading-bar { width: 140px; height: 3px; background: var(--night2); }
#loading-bar div { height: 100%; width: 0; background: var(--amber); transition: width .2s; }
#click-to-start { position: absolute; inset: 0; z-index: 49; background: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: "Pixelify"; color: var(--amber); font-size: 11px; letter-spacing: 2px; }
#click-to-start div { animation: blink 1.6s infinite; }

/* ---------- Epilogue ---------- */
#epilogue { position: absolute; inset: 0; z-index: 35; background: rgba(13,11,26,.0); overflow: hidden; }
#epilogue-inner { position: absolute; left: 50%; width: 400px; transform: translateX(-50%); top: 100%; text-align: center; }
#epilogue .ep-card { margin-bottom: 30px; }
#epilogue .ep-card img { width: 100px; height: 120px; image-rendering: pixelated; }
#epilogue .ep-name { font-family: "Pixelify"; color: var(--amber); font-size: 12px; letter-spacing: 1px; margin: 2px 0; }
#epilogue .ep-text { font-size: 9.5px; line-height: 1.55; color: var(--cream); text-shadow: 0 1px 2px #000; }
#epilogue .ep-head { font-family: "Pixelify"; color: var(--cyan); font-size: 16px; letter-spacing: 3px; margin: 30px 0 20px; }
#epilogue .ep-small { font-size: 8px; opacity: .75; line-height: 1.6; }
#title::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 50% 38%, rgba(13,11,26,.78), rgba(13,11,26,.25) 70%, rgba(13,11,26,0)); pointer-events: none; }
#title > * { position: relative; }
#title > #title-foot { position: absolute; }
.pin { font-size: 7px; padding: 1px 4px; }