@font-face { font-family: 'Lora'; src: url('../assets/fonts/Lora-var.ttf') format('truetype'); font-weight: 400 700; font-style: normal; }
@font-face { font-family: 'Lora'; src: url('../assets/fonts/Lora-Italic-var.ttf') format('truetype'); font-weight: 400 700; font-style: italic; }
@font-face { font-family: 'DM Serif Display'; src: url('../assets/fonts/DMSerifDisplay.ttf') format('truetype'); }
@font-face { font-family: 'Caveat'; src: url('../assets/fonts/Caveat.ttf') format('truetype'); font-weight: 400 700; }

:root {
  --ink: #f3eadb;
  --ink-dim: rgba(243, 234, 219, .62);
  --gold: #e3b563;
  --night: rgba(10, 14, 26, .82);
  --line: rgba(227, 181, 99, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05070c; overflow: hidden; }
body { display: grid; place-items: center; font-family: 'Lora', Georgia, serif; color: var(--ink); user-select: none; }

#stage { position: relative; width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; overflow: hidden; background: #000; container-type: size; }
#bg, #gl, #glints { position: absolute; inset: 0; width: 100%; height: 100%; }
#bg img { position: absolute; display: block; pointer-events: none; }
#bg-base { inset: 0; width: 100%; height: 100%; }
#bg .patch, #bg .lit { opacity: 0; transition: opacity .6s ease; }
#bg .lit { inset: 0; width: 100%; height: 100%; transition: opacity 1.6s ease; }
#bg .on { opacity: 1; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; mix-blend-mode: screen; pointer-events: none; }
#gl { z-index: 2; }
#glints { z-index: 3; pointer-events: none; }


.glint { position: absolute; width: 2.2cqw; height: 2.2cqw; margin: -1.1cqw 0 0 -1.1cqw; pointer-events: none; opacity: 0; transition: opacity .4s; }
.glint.on { opacity: 1; }
.glint::before, .glint::after { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(255, 246, 214, .95), rgba(255, 220, 150, .35) 40%, transparent 72%); clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%); animation: glint 2.4s ease-in-out infinite; }
.glint::after { transform: rotate(45deg) scale(.55); animation-delay: .15s; }
@keyframes glint { 0%, 55%, 100% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1); opacity: 1; } 85% { transform: scale(.5); opacity: .4; } }
.glint::after { animation-name: glint2; }
@keyframes glint2 { 0%, 55%, 100% { transform: rotate(45deg) scale(.1); opacity: 0; } 70% { transform: rotate(45deg) scale(.55); opacity: .9; } 85% { transform: rotate(45deg) scale(.3); opacity: .3; } }


#prompt { position: absolute; z-index: 5; transform: translate(-50%, -140%); display: flex; align-items: center; gap: .6cqw; padding: .45cqw .9cqw .45cqw .5cqw; background: var(--night); border: 1px solid var(--line); border-radius: 99px; font-size: 1.05cqw; letter-spacing: .02em; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 0 .3cqw 1.2cqw rgba(0, 0, 0, .35); }
#prompt.on { opacity: 1; }
kbd { display: inline-grid; place-items: center; min-width: 1.6cqw; height: 1.6cqw; padding: 0 .35cqw; border-radius: .35cqw; background: var(--gold); color: #1b1408; font: 700 .95cqw 'Lora', serif; box-shadow: 0 .12cqw 0 #8c6a2c; }


#hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .8s; }
#hud.on { opacity: 1; }
#objective { position: absolute; left: 2cqw; top: 2cqw; max-width: 30cqw; padding: .9cqw 1.3cqw 1cqw 1.2cqw; background: linear-gradient(90deg, var(--night), rgba(10, 14, 26, .35)); border-left: 2px solid var(--gold); border-radius: 0 .5cqw .5cqw 0; }
.obj-label { font: 600 .72cqw 'Lora', serif; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: .3cqw; }
.obj-text { font: italic 500 1.25cqw/1.35 'Lora', serif; }
.obj-list { list-style: none; margin: .5cqw 0 0; padding: 0; font-size: 1cqw; color: var(--ink-dim); }
.obj-list li { margin-top: .2cqw; }
.obj-list li::before { content: '○'; margin-right: .5cqw; color: var(--gold); }
.obj-list li.ok { color: var(--ink); text-decoration: line-through; text-decoration-color: rgba(227, 181, 99, .7); }
.obj-list li.ok::before { content: '●'; }
#objective.flash { animation: objflash 1.2s ease; }
@keyframes objflash { 0% { transform: translateX(-1cqw); opacity: 0; } 100% { transform: none; opacity: 1; } }

#inventory { position: absolute; right: 2cqw; top: 2cqw; display: flex; gap: .8cqw; }
.slot { width: 5.2cqw; height: 5.2cqw; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(60, 70, 100, .75), var(--night)); border: 1px solid var(--line); display: grid; place-items: center; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.slot img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 .2cqw .3cqw rgba(0, 0, 0, .5)); }
@keyframes pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
#controls { position: absolute; left: 50%; bottom: 1.6cqw; transform: translateX(-50%); font-size: .95cqw; color: var(--ink-dim); background: rgba(10, 14, 26, .55); padding: .4cqw 1.2cqw; border-radius: 99px; transition: opacity 1s; }
#controls.off { opacity: 0; }

#toast { position: absolute; z-index: 7; left: 50%; top: 14%; transform: translate(-50%, -1cqw); display: flex; align-items: center; gap: 1.2cqw; padding: .9cqw 2cqw .9cqw 1cqw; background: var(--night); border: 1px solid var(--line); border-radius: 99px; opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast img { width: 4.2cqw; height: 4.2cqw; object-fit: contain; }
.toast-label { font: 600 .72cqw 'Lora', serif; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.toast-name { font: 500 1.5cqw 'DM Serif Display', serif; }


#dialog { position: absolute; z-index: 8; left: 50%; bottom: 3cqw; width: min(64cqw, 92%); transform: translate(-50%, 1cqw); padding: 1.4cqw 2.4cqw 1.6cqw; background: linear-gradient(180deg, rgba(12, 16, 30, .9), rgba(8, 10, 20, .94)); border: 1px solid var(--line); border-radius: .9cqw; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
#dialog.on { opacity: 1; transform: translate(-50%, 0); }
.dlg-name { position: absolute; top: -1.1cqw; left: 2cqw; padding: .25cqw 1cqw; background: var(--gold); color: #1b1408; border-radius: .4cqw; font: 700 .85cqw 'Lora', serif; letter-spacing: .18em; text-transform: uppercase; }
.dlg-name:empty { display: none; }
.dlg-text { font-size: 1.5cqw; line-height: 1.55; min-height: 2.3cqw; }
.dlg-text.narr { font-style: italic; color: #e6dccb; }
.dlg-next { position: absolute; right: 1.4cqw; bottom: .7cqw; color: var(--gold); font-size: 1.2cqw; animation: bob 1s ease-in-out infinite; opacity: 0; }
.dlg-next.on { opacity: 1; }
@keyframes bob { 50% { transform: translateY(.3cqw); } }


#note { position: absolute; z-index: 9; inset: 0; display: grid; place-items: center; background: rgba(4, 6, 12, .55); opacity: 0; transition: opacity .4s; pointer-events: none; }
#note.on { opacity: 1; }
.paper { position: relative; width: 40cqw; padding: 3cqw 3.4cqw 2.6cqw; background-color: #f4ecd8; color: #2d2a3a; transform: rotate(-1.5deg) translateY(2cqw); transition: transform .5s cubic-bezier(.2, 1.2, .4, 1); box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .5), inset 0 0 4cqw rgba(160, 120, 60, .25); background-image: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .55), transparent 60%), repeating-linear-gradient(180deg, transparent 0 2.45cqw, rgba(70, 90, 140, .13) 2.45cqw 2.55cqw); }
#note.on .paper { transform: rotate(-1.5deg); }
.note-lines { font: 500 2cqw/1.25 'Caveat', cursive; }
.note-lines p { margin: 0 0 .6cqw; }
.note-lines p.sign { text-align: right; margin-top: 1cqw; }
.note-hint { margin-top: 1.4cqw; text-align: center; font: italic .9cqw 'Lora', serif; color: #7a6a55; }

#flash { position: absolute; inset: 0; z-index: 10; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%), #fff6dc, #ffd28a 30%, rgba(255, 190, 110, 0) 75%); opacity: 0; pointer-events: none; }
#fade { position: absolute; inset: 0; z-index: 11; background: #000; opacity: 1; transition: opacity .45s ease; pointer-events: none; }


.screen { position: absolute; inset: 0; z-index: 20; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; overflow: hidden; }
.screen.on { opacity: 1; pointer-events: auto; }
.screen-bg { position: absolute; inset: -2%; background-size: cover; background-position: center; animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.07) translate(-1%, .5%); } }
.beam-canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
#title .screen-bg::after, #end .screen-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 16, .72), rgba(5, 8, 16, .15) 55%, transparent); }
.title-block { position: absolute; left: 7cqw; top: 22cqh; }
h1 { margin: 0; font: 400 9cqw/0.95 'DM Serif Display', serif; letter-spacing: .01em; text-shadow: 0 .4cqw 2cqw rgba(0, 0, 0, .5); }
.subtitle { margin-top: 1cqw; font: italic 400 2cqw 'Lora', serif; color: #f0dcb4; letter-spacing: .04em; }
.loading { margin-top: 4cqw; display: flex; align-items: center; gap: 1cqw; font-size: 1cqw; color: var(--ink-dim); }
.loading .bar { width: 16cqw; height: 2px; background: rgba(255, 255, 255, .15); }
.loading .bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }
.press { margin-top: 4cqw; font-size: 1.3cqw; color: var(--ink); opacity: 0; transition: opacity .6s; }
.press.on { opacity: 1; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.press kbd { min-width: 5cqw; }

#intro { background: #05070c; display: grid; place-items: center; }
.intro-lines { max-width: 56cqw; text-align: center; }
.intro-lines p { font: italic 400 1.9cqw/1.6 'Lora', serif; margin: 0 0 1.6cqw; opacity: 0; transform: translateY(.6cqw); transition: opacity 1.4s, transform 1.4s; }
.intro-lines p.on { opacity: 1; transform: none; }
.intro-lines p:first-child { font: 400 1.2cqw 'Lora', serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-style: normal; }

.end-block { position: absolute; left: 7cqw; top: 26cqh; max-width: 42cqw; }
h2 { margin: 0; font: 400 6cqw/1 'DM Serif Display', serif; text-shadow: 0 .4cqw 2cqw rgba(0, 0, 0, .5); }
.end-text { font: italic 1.7cqw/1.5 'Lora', serif; color: #f0dcb4; margin: 1.6cqw 0 0; }
.end-time { font-size: 1cqw; color: var(--ink-dim); letter-spacing: .1em; margin-top: 1.6cqw; }