:root {
  --bg: #0b0907;
  --ink: #f3e9d6;
  --muted: #b9a98b;
  --amber: #e8a948;
  --panel: rgba(14, 11, 8, 0.72);
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); user-select: none; -webkit-user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.layer { position: fixed; inset: 0; pointer-events: none; }

#grain {
  inset: -120px; opacity: .06; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.35'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation: grain .7s steps(5) infinite;
}
@keyframes grain { 20% { transform: translate(-40px, 30px); } 40% { transform: translate(30px, -60px); } 60% { transform: translate(-70px, -20px); } 80% { transform: translate(50px, 40px); } }
#vignette { z-index: 1; background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, .7) 100%); }
#danger { z-index: 2; opacity: 0; transition: opacity 1.2s; box-shadow: inset 0 0 12vw rgba(150, 10, 10, .75); }
#danger.on { opacity: 1; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* camera glasses */
#glasses { z-index: 3; font: 500 .72rem/1 var(--mono); letter-spacing: .14em; color: rgba(255, 255, 255, .78); }
#glasses .c { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(255, 255, 255, .55); }
#glasses .tl { left: 22px; top: 22px; border-width: 1.5px 0 0 1.5px; }
#glasses .tr { right: 22px; top: 22px; border-width: 1.5px 1.5px 0 0; }
#glasses .bl { left: 22px; bottom: 22px; border-width: 0 0 1.5px 1.5px; }
#glasses .br { right: 22px; bottom: 22px; border-width: 0 1.5px 1.5px 0; }
#rec { position: absolute; right: 60px; top: 32px; display: flex; align-items: center; gap: .6em; }
#rec b { width: 8px; height: 8px; border-radius: 50%; background: #e23a2a; animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
#glasses.glitch { animation: glitch .18s steps(2) infinite; }
@keyframes glitch { 50% { transform: translate(3px, -2px); opacity: .5; } }

#dot { position: fixed; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(243, 233, 214, .55); z-index: 3; pointer-events: none; }

#hud { position: fixed; left: 0; top: 0; z-index: 4; padding: 1.6rem 3.6rem; display: flex; flex-direction: column; gap: .2rem; pointer-events: none; }
#chapter { color: var(--amber); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
#place { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; text-shadow: 0 2px 10px #000; }
#items { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
#items li { background: var(--panel); border: 1px solid rgba(232, 169, 72, .5); color: var(--amber); font-size: .72rem; padding: .3em .8em; border-radius: 999px; }

#watch { position: fixed; right: 3.2rem; bottom: 3rem; z-index: 4; text-align: center; pointer-events: none; }
#watchface { width: 110px; height: 110px; display: block; }
#timer { font: 500 .8rem/1 var(--mono); letter-spacing: .12em; color: var(--amber); margin-top: .1rem; }

#prompt {
  position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  background: var(--panel); border: 1px solid rgba(243, 233, 214, .25); border-radius: 999px;
  font-size: .9rem; padding: .5em 1.1em; opacity: 0; transition: opacity .2s; white-space: nowrap;
}
#prompt.on { opacity: 1; }

#card {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 5; pointer-events: none;
  width: min(30rem, 80vw); padding: 1.2rem 1.5rem; text-align: center;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid rgba(232, 169, 72, .4); border-radius: 12px;
}
#card .kicker, #menu .kicker { color: var(--amber); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
#card h2 { font: 600 1.5rem/1.2 var(--serif); margin: .3rem 0 .5rem; }
#card p { font: italic 1rem/1.5 var(--serif); margin: 0; }
#card small { display: block; color: var(--muted); margin-top: .7rem; }

#fade { z-index: 6; background: #000; opacity: 0; transition: opacity .8s linear; }

#subtitle {
  position: fixed; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 7; pointer-events: none;
  width: max-content; max-width: min(70vw, 60rem); margin: 0; text-align: center;
  font: italic clamp(.95rem, 1.7vw, 1.35rem)/1.45 var(--serif);
  text-shadow: 0 2px 12px #000, 0 0 3px #000; opacity: 0; transition: opacity .5s;
}
#subtitle.on { opacity: 1; }

#titlecard { position: fixed; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; pointer-events: none; opacity: 0; transition: opacity 1.4s; text-align: center; }
#titlecard.on { opacity: 1; }
#titlecard h1 { font: 600 clamp(2rem, 6vw, 4.5rem)/1 var(--serif); letter-spacing: .12em; margin: 0; text-shadow: 0 4px 30px #000; }
#titlecard p { color: var(--muted); letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; margin: 0; }

#ending, #menu {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: 2rem; background: rgba(5, 4, 3, .82); backdrop-filter: blur(4px);
}
#ending { z-index: 8; }
#menu { z-index: 10; background: radial-gradient(ellipse at center, rgba(5, 4, 3, .55), rgba(5, 4, 3, .92)); }
#ending h2, #menu h1 { font: 600 clamp(1.8rem, 5vw, 3.6rem)/1.1 var(--serif); margin: 0; }
#ending p, #menu .lede { max-width: 44ch; color: var(--muted); font-family: var(--serif); font-size: 1.1rem; line-height: 1.6; margin: 0; }
#menu .row { display: flex; gap: .6rem; }
#menu .keys { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; color: var(--muted); font-size: .8rem; }
#menu a { color: var(--muted); font-size: .8rem; }
kbd { font: 500 .72rem var(--mono); color: var(--ink); border: 1px solid rgba(243, 233, 214, .3); border-radius: 5px; padding: .15em .45em; margin-right: .3em; }

button {
  font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer;
  background: var(--panel); border: 1px solid rgba(243, 233, 214, .25); border-radius: 999px; padding: .55em 1.3em;
}
button:hover, button:focus-visible { border-color: var(--amber); outline: none; }
#start { border-color: var(--amber); color: var(--amber); }

#pause { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; pointer-events: none; background: rgba(5, 4, 3, .6); font: italic 1.3rem var(--serif); }

@media (prefers-reduced-motion: reduce) { #grain, #danger.on, #glasses.glitch { animation: none; } }