:root {
  --ink: #f5ecd8; --dim: #b7aac9; --panel: #1b1628f0; --panel2: #2a2240; --line: #5b4a7a;
  --gold: #f4c56b; --gold-d: #9a6f2a; --teal: #7ee0c3; --red: #e0645a; --bg: #0d0b18;
  --u: 7px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font-family: "DotGothic16", "PingFang SC", "Hiragino Sans", monospace; -webkit-font-smoothing: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
#app { position: fixed; inset: 0; font-size: max(12px, calc(var(--u) * 2.6)); }

/* ------------------------------------------------ stage */
#stage { position: absolute; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh); overflow: hidden; background: #000; }
#layer { position: absolute; inset: 0; transform-origin: 50% 50%; }
#bgv, #still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: opacity .5s; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
#wipe { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: none; z-index: 30; }
#reveal-tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: repeating-linear-gradient(0deg, #0000 0 3px, #7ee0c314 3px 4px), radial-gradient(ellipse at center, #0000 40%, #06201aa0); mix-blend-mode: screen; }
#stage.reveal #reveal-tint { opacity: 1; }
#stage.reveal #layer { filter: saturate(.55) brightness(.8) hue-rotate(-12deg); }

/* ------------------------------------------------ hotspots */
.hs { position: absolute; cursor: pointer; border-radius: 4px; }
.hs .mark { position: absolute; left: 50%; top: 0; width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); margin: calc(var(--u) * -2.4) 0 0 calc(var(--u) * -0.8);
  background: var(--gold); box-shadow: 0 0 0 2px #1b1628, 0 0 12px var(--gold); transform: rotate(45deg); animation: bob 1.1s ease-in-out infinite alternate; }
.hs.done .mark { background: #8f9d86; box-shadow: 0 0 0 2px #1b1628; animation: none; opacity: .6; }
.hs.hidden-spot .mark { background: var(--teal); box-shadow: 0 0 0 2px #0c2a22, 0 0 16px var(--teal); }
.hs.hidden-spot { outline: 2px dashed #7ee0c388; animation: shimmer 1.6s infinite; }
.hs:hover { background: #f4c56b1c; outline: 2px solid #f4c56baa; }
.hs .lbl { position: absolute; left: 50%; top: 0; transform: translate(-50%, calc(-100% - var(--u) * 3)); white-space: nowrap; pointer-events: none;
  background: var(--panel); border: 2px solid var(--line); padding: 2px 8px; font-size: .85em; opacity: 0; transition: opacity .15s; }
.hs:hover .lbl { opacity: 1; }
@keyframes bob { to { transform: translateY(calc(var(--u) * -0.8)) rotate(45deg); } }
@keyframes shimmer { 50% { outline-color: #7ee0c322; } }

/* ------------------------------------------------ hud */
.hud { position: absolute; z-index: 10; }
#chip, #counter { top: calc(var(--u) * 2); background: var(--panel); border: 2px solid var(--line); padding: .25em .7em; font-size: .9em; }
#chip { left: calc(var(--u) * 2); } #chip b { color: var(--gold); } #chip small { color: var(--dim); }
#counter { right: calc(var(--u) * 2); min-width: 9em; text-align: right; }
#counter b { color: var(--gold); }
#counter i { display: block; height: 4px; margin-top: 3px; background: linear-gradient(90deg, var(--gold) var(--p), #fff2 var(--p)); }
#inv { left: calc(var(--u) * 2); top: calc(var(--u) * 8); display: flex; flex-direction: column; gap: 4px; }
#inv img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); image-rendering: pixelated; background: var(--panel); border: 2px solid var(--line); }
#tools { right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); display: flex; gap: 6px; }
.tool { display: flex; align-items: center; gap: .35em; background: var(--panel); border: 2px solid var(--line); padding: .3em .7em; cursor: pointer; font-size: .9em; }
.tool i { font-style: normal; color: var(--gold); }
.tool:hover { border-color: var(--gold); }
.tool.on { background: #0c3a30; border-color: var(--teal); } .tool.on i { color: var(--teal); }
.tool.pulse { animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px #7ee0c388; } }
#next { right: calc(var(--u) * 2); bottom: calc(var(--u) * 9); animation: nudge 1.2s infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
#skip { right: calc(var(--u) * 2); top: calc(var(--u) * 8); }
#scenecard { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; opacity: 0; z-index: 12; text-shadow: 0 3px 0 #000a; }
#scenecard small { display: block; color: var(--gold); letter-spacing: .2em; }
#scenecard b { font-size: 2.6em; letter-spacing: .15em; font-weight: normal; }
#scenecard.on { animation: card 3s ease forwards; }
@keyframes card { 0% { opacity: 0; transform: translateY(10px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#toast { position: absolute; left: 50%; top: calc(var(--u) * 9); transform: translate(-50%, -8px); max-width: 80%; background: var(--panel); border: 2px solid var(--gold);
  padding: .4em 1em; opacity: 0; transition: .3s; z-index: 20; pointer-events: none; display: flex; align-items: center; gap: .5em; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast img { width: 2em; height: 2em; image-rendering: pixelated; }

.px-btn { background: var(--panel2); border: 2px solid var(--line); padding: .4em 1em; cursor: pointer; box-shadow: 0 3px 0 #0008; }
.px-btn:hover { border-color: var(--gold); }
.px-btn.gold { background: var(--gold); color: #2a1d0c; border-color: #ffe3a3; box-shadow: 0 4px 0 var(--gold-d); }
.px-btn.red { border-color: var(--red); color: var(--red); }
.px-btn.big { font-size: 1.2em; padding: .5em 1.6em; }
kbd { font: inherit; font-size: .8em; background: #0006; padding: 0 .35em; border-radius: 3px; }

/* ------------------------------------------------ dialog (outside stage so it can sit below it on phones) */
#dialog { position: absolute; z-index: 25; left: calc(var(--sl) + var(--sw) * .04); width: calc(var(--sw) * .92); top: calc(var(--st) + var(--sh) * .7);
  min-height: calc(var(--sh) * .26); display: none; gap: 1em; padding: .8em 1em; background: var(--panel); border: 3px solid var(--line); box-shadow: 0 6px 0 #0008; cursor: pointer; }
#dialog.on { display: flex; }
#d-portrait { flex: none; width: calc(var(--sh) * .2); height: calc(var(--sh) * .2); background: #2c2440 center / contain no-repeat; image-rendering: pixelated; border: 2px solid var(--line); }
#d-portrait.wave { background: #0c1a18 repeating-linear-gradient(90deg, var(--c) 0 3px, #0000 3px 7px); -webkit-mask: radial-gradient(ellipse 50% 30% at 50% 50%, #000 40%, #0003 60%, #0000 70%); animation: wave .6s steps(3) infinite; }
@keyframes wave { 50% { background-position: 4px 0; } }
.d-main { flex: 1; position: relative; }
#d-name { font-size: .95em; margin-bottom: .25em; }
#d-text { font-size: 1.15em; line-height: 1.55; }
#d-choices { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .6em; }
#dialog.choosing .d-next { display: none; }
.d-next { position: absolute; right: 0; bottom: 0; color: var(--gold); opacity: 0; }
#dialog.ready .d-next { opacity: 1; animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#cardpop { position: absolute; z-index: 40; left: calc(var(--sl) + var(--sw) / 2); top: calc(var(--st) + var(--sh) / 2); transform: translate(-50%, -50%);
  width: min(88vw, calc(var(--sh) * .62)); background: #f5ecd8; color: #2a2238; padding: .8em; border: 3px solid #2a2238; box-shadow: 0 8px 0 #000a; display: none; cursor: pointer; }
#cardpop.on { display: block; animation: pop .35s; }
@keyframes pop { from { transform: translate(-50%, -40%) scale(.7); opacity: 0; } }
#cardpop .c-head { font-size: .8em; color: #8a5a2a; margin-bottom: .4em; } #cardpop .hid { color: #1b8a70; }
#cardpop img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; border: 2px solid #2a2238; }
#cardpop h3 { margin: .3em 0 .1em; font-weight: normal; font-size: 1.3em; }
#cardpop p { margin: .2em 0; line-height: 1.5; }
#cardpop .c-who { text-align: right; color: #6b5a7a; font-size: .85em; }
#cardpop .gloss { margin-top: .5em; padding-top: .4em; border-top: 2px dashed #c9b894; font-size: .9em; } #cardpop .gloss i { color: #8a5a2a; }

/* ------------------------------------------------ panels */
.panel { position: fixed; inset: 0; z-index: 50; background: #0008; display: none; place-items: center; }
.panel.on { display: grid; }
.p-win { width: min(94vw, 760px); max-height: 90vh; display: flex; flex-direction: column; background: var(--panel); border: 3px solid var(--line); box-shadow: 0 8px 0 #000a; }
.p-win.wide { width: min(96vw, 1100px); } .p-win.small { width: min(92vw, 420px); }
.p-head { display: flex; align-items: center; gap: 1em; padding: .6em 1em; border-bottom: 2px solid var(--line); }
.p-head h2 { margin: 0; font-weight: normal; color: var(--gold); font-size: 1.2em; }
.p-head span { color: var(--dim); flex: 1; }
.x { margin-left: auto; background: none; border: 0; font-size: 1.2em; cursor: pointer; color: var(--dim); }
.p-body { overflow: auto; padding: .8em 1em; }
.tabs { display: flex; gap: 4px; padding: .5em 1em 0; }
.tab { background: none; border: 2px solid var(--line); border-bottom: 0; padding: .3em .9em; cursor: pointer; color: var(--dim); }
.tab.on { background: var(--panel2); color: var(--gold); }
#j-body h4 { margin: .8em 0 .4em; font-weight: normal; color: var(--gold); } #j-body h4 small { color: var(--dim); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tile { background: var(--panel2); border: 2px solid var(--line); padding: 4px; cursor: pointer; text-align: left; font-size: .85em; }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; display: block; }
.tile.unknown { display: grid; place-items: center; aspect-ratio: 4 / 3.6; color: #6b5a8a; cursor: default; }
.gloss-list > div, .item-list > div { display: grid; grid-template-columns: auto 1fr; column-gap: 1em; padding: .5em 0; border-bottom: 1px dashed var(--line); }
.gloss-list b, .item-list b { color: var(--gold); font-weight: normal; }
.gloss-list i { color: var(--teal); font-style: normal; } .gloss-list span { grid-column: 1 / -1; color: var(--dim); }
.item-list img { grid-row: span 2; width: 48px; height: 48px; image-rendering: pixelated; } .item-list span { color: var(--dim); }
.unknown { color: #6b5a8a; }
.map-wrap { position: relative; }
.map-wrap img { display: block; width: 100%; image-rendering: pixelated; }
#map-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#map-route polyline { fill: none; stroke: var(--gold); stroke-width: .35; stroke-dasharray: 1 .8; opacity: .8; }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .3em; background: var(--panel); border: 2px solid var(--gold); padding: .15em .5em .15em .15em; cursor: pointer; font-size: .8em; white-space: nowrap; }
.pin i { font-style: normal; background: var(--gold); color: #2a1d0c; width: 1.5em; text-align: center; }
.pin span { display: flex; flex-direction: column; line-height: 1.2; } .pin small { color: var(--dim); }
.pin.here { border-color: var(--teal); box-shadow: 0 0 0 3px #7ee0c355; } .pin.here i { background: var(--teal); }
.pin.clear i::after { content: "✓"; }
.pin.locked { border-color: #555; cursor: default; filter: grayscale(1) brightness(.8); } .pin.locked i { background: #777; }
.set label { display: flex; justify-content: space-between; align-items: center; margin: .5em 0; gap: 1em; }
.set input { width: 55%; accent-color: var(--gold); }
.set .keys { color: var(--dim); font-size: .85em; line-height: 1.6; }
.set .row { display: flex; gap: .6em; justify-content: space-between; }

/* ------------------------------------------------ title / ending */
#title { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--bg); transition: opacity .8s; }
#title.off { opacity: 0; pointer-events: none; }
#tv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.t-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #0d0b1866, #0d0b18dd 75%); }
.t-box { position: relative; text-align: center; padding: 1em; }
.t-kicker { letter-spacing: .4em; color: var(--gold); font-size: .85em; }
#title h1 { font-size: clamp(40px, 9vw, 96px); margin: .1em 0; font-weight: normal; letter-spacing: .15em; text-shadow: 0 5px 0 #000a, 0 0 30px #f4c56b55; }
.t-sub { font-size: 1.3em; color: var(--gold); letter-spacing: .3em; }
.t-line { color: var(--dim); margin: 1em 0 1.4em; }
.t-btns { display: flex; gap: 1em; justify-content: center; flex-wrap: wrap; }
.t-tip { color: var(--dim); font-size: .8em; margin-top: 1.4em; }
.t-foot { position: absolute; bottom: 1em; left: 0; right: 0; text-align: center; color: #fff6; font-size: .75em; }
.t-foot a, #credits a { color: var(--teal); text-underline-offset: .25em; }
.t-foot a:hover, #credits a:hover { color: var(--gold); }
#ending { position: fixed; inset: 0; z-index: 55; display: none; background: var(--bg); }
#ending.on { display: block; }
#end-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: .35; }
#end-cap { position: absolute; top: 8%; left: 0; right: 0; text-align: center; display: flex; flex-direction: column; gap: .4em; }
#end-cap b { font-size: 2.4em; font-weight: normal; color: var(--gold); letter-spacing: .2em; } #end-cap span { color: var(--dim); }
#credits { position: absolute; inset: 24% 0 0; overflow: auto; text-align: center; padding-bottom: 2em; }
#credits p { margin: .5em 0; }
#credits .roll { animation: roll 14s ease-out forwards; }
#credits h2 { font-weight: normal; letter-spacing: .5em; color: var(--gold); }
#credits .dim { color: var(--dim); margin: 1em 0; }
@keyframes roll { from { transform: translateY(60vh); } to { transform: none; } }

/* ------------------------------------------------ phones held upright: dialog goes under the picture */
#app.portrait { font-size: 14px; }
#app.portrait #dialog { left: 8px; width: calc(100vw - 16px); top: calc(var(--st) + var(--sh) + 10px); min-height: 0; }
#app.portrait #d-portrait { width: 64px; height: 64px; }
#app.portrait .tool span { display: none; }
#app.portrait #cardpop { top: 50vh; left: 50vw; }
#app.portrait .hud { font-size: 11px; }
#app.portrait #inv img { width: 26px; height: 26px; }
#app.portrait #counter { min-width: 0; }
#app:has(#dialog.on) #next, #app:has(#dialog.on) #tools { visibility: hidden; }