/* The Backrooms — found-footage UI. UI-LORE agent owns.
   House rules (tone contract §8): painfully ordinary, no gradients, no rounded UI chrome,
   no SaaS. Everything reads like 1996 consumer electronics or paper. */
:root { color-scheme: dark; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: "Consolas", "Cascadia Mono", "Courier New", monospace; color: #d8d2b8; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: auto; cursor: crosshair; }
/* full screens are the archive speaking — the camcorder OSD belongs to the tape only.
   (pause OSD lives inside #hud but pause shows no .screen, so it is unaffected) */
body:has(.screen.show) #hud { visibility: hidden; }

/* ---------- HUD (camcorder OSD) ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5;
  text-shadow: 0 0 4px rgba(0,0,0,.9), 1px 1px 0 rgba(0,0,0,.6); }
#rec { position: absolute; top: 18px; left: 22px; font-size: 15px; letter-spacing: 2px; color: #e8e2cc; }
#rec .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #c33;
  margin-right: 8px; animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
#cam-right { position: absolute; top: 18px; right: 22px; font-size: 13px; letter-spacing: 2px; display: flex; gap: 14px; align-items: center; }
#batt { display: inline-flex; align-items: center; width: 34px; height: 12px; border: 1px solid #d8d2b8; padding: 1px; opacity: .9; }
#batt i { display: block; height: 100%; background: #d8d2b8; }
#water-count { position: absolute; bottom: 22px; left: 22px; font-size: 14px; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }

/* date + tape speed — bottom right, small, half-remembered */
#cam-date { position: absolute; bottom: 42px; right: 22px; font-size: 12px; letter-spacing: 2px;
  color: #d8d2b8; opacity: .78; text-align: right; line-height: 1.55; }
#cam-date .sp { display: block; font-size: 11px; opacity: .85; }

/* viewfinder focus brackets — barely there framing marks */
#focus-brackets { position: absolute; inset: 5.5% 4.5%; opacity: .3; }
#focus-brackets i { position: absolute; width: 28px; height: 28px; border: 1px solid #d8d2b8; }
#focus-brackets i:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
#focus-brackets i:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
#focus-brackets i:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
#focus-brackets i:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }

/* occasional autofocus blink */
#autofocus { position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 3px; color: #d8d2b8; opacity: 0; }
#autofocus.show { animation: af-blink .5s steps(1) 3; }
@keyframes af-blink { 0%, 49% { opacity: .58; } 50%, 100% { opacity: 0; } }

#subtitle { position: absolute; bottom: 96px; left: 0; right: 0; text-align: center; font-size: 15px;
  color: #e8e2cc; opacity: 0; transition: opacity .6s; font-style: italic; letter-spacing: .5px; }
#subtitle.show { opacity: .92; }
#prompt { position: absolute; bottom: 58px; left: 0; right: 0; text-align: center; font-size: 13px;
  letter-spacing: 2px; color: #cfc9a8; opacity: 0; transition: opacity .25s; }
#prompt.show { opacity: .85; }
#hint { position: absolute; bottom: 22px; right: 22px; font-size: 11px; letter-spacing: 1px;
  color: #9a9478; opacity: 0; transition: opacity .8s; text-align: right; max-width: 460px; }
#hint.show { opacity: .8; }

/* level card: stamped title + a quiet canon line under it */
#level-card { position: absolute; top: 38%; left: 0; right: 0; text-align: center; font-size: 26px;
  letter-spacing: 8px; color: #e8df9a; opacity: 0; transition: opacity 1.2s; white-space: pre-line;
  text-shadow: 0 0 18px rgba(0,0,0,.9); }
#level-card.show { opacity: .95; }
#level-sub { position: absolute; top: 38%; margin-top: 112px; left: 0; right: 0; text-align: center;
  font-size: 13px; letter-spacing: 2px; color: #cfc7a4; font-style: italic; opacity: 0;
  transition: opacity 1.6s .3s; text-shadow: 0 0 14px rgba(0,0,0,.95); }
#level-sub.show { opacity: .75; }

/* camcorder PAUSE — frozen tape OSD */
#pause-osd { position: absolute; top: 42%; left: 0; right: 0; text-align: center; display: none;
  color: #e8e2cc; text-shadow: 0 0 6px rgba(0,0,0,.9); }
#pause-osd.show { display: block; }
#pause-osd .p-main { font-size: 22px; letter-spacing: 12px; }
#pause-osd .bars { animation: blink 1.1s steps(2) infinite; }
#pause-osd .p-hint { margin-top: 14px; font-size: 11px; letter-spacing: 3px; color: #9a9478; }
#hud.paused #rec { visibility: hidden; }   /* a paused tape isn't recording */

/* ---------- note overlay: aged paper ---------- */
#note-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); z-index: 8; }
#note-overlay.show { display: flex; }
#note-paper { position: relative; width: min(600px, 88vw); max-height: 78vh; overflow: auto;
  background: #d8cca4; color: #262014; padding: 30px 34px;
  font-family: "Courier New", Courier, monospace; transform: rotate(-.5deg);
  box-shadow: 0 26px 70px rgba(0,0,0,.9), inset 0 0 64px rgba(86,66,26,.32); }
#note-paper::before { /* strip of tape holding it up */
  content: ''; position: absolute; top: -13px; left: 50%; width: 150px; height: 30px;
  background: rgba(226,219,190,.42); transform: translateX(-50%) rotate(1.6deg);
  border-left: 1px dashed rgba(60,50,30,.15); border-right: 1px dashed rgba(60,50,30,.15);
  box-shadow: 0 2px 6px rgba(0,0,0,.18); }
#note-paper::after { /* someone set a mug on this */
  content: ''; position: absolute; top: 24px; right: 28px; width: 78px; height: 72px;
  border: 4px solid rgba(104,62,22,.24); border-top-color: rgba(104,62,22,.09);
  border-radius: 50%; transform: rotate(-10deg) scaleY(.97); filter: blur(.4px); pointer-events: none; }
#note-paper.hand { transform: rotate(1deg); background: #d5c9a4; }
#note-paper.hand #note-title { font-family: "Courier New", Courier, monospace; font-size: 11px; letter-spacing: 1.5px; color: #4a3f2c; }
#note-paper.hand #note-body { color: #26304f; font-size: 14px; line-height: 1.7;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
#note-title { font-size: 13px; font-weight: bold; letter-spacing: 1px; color: #241f12;
  border-bottom: 1px solid #988c66; padding-bottom: 9px; margin-bottom: 14px; }
#note-body { font-family: inherit; white-space: pre-wrap; font-size: 13px; line-height: 1.6; }
.note-close { margin-top: 16px; font-size: 10px; color: #6a6152; letter-spacing: 2px;
  font-family: "Courier New", Courier, monospace; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  z-index: 10; background: rgba(4, 4, 2, .84); text-align: center; }
.screen.show { display: flex; }
.m-inner { max-width: 760px; padding: 30px; }
.m-over { font-size: 11px; letter-spacing: 4px; color: #7a7458; margin-bottom: 22px; }
.screen h1 { font-size: 46px; letter-spacing: 14px; color: #e8df9a;
  text-shadow: 0 0 30px rgba(232,223,154,.25); margin-bottom: 10px; }
.m-sub { font-size: 13px; letter-spacing: 2px; color: #9a9478; margin-bottom: 34px; }
.screen button { pointer-events: auto; background: none; border: 1px solid #6a6450; color: #e8df9a;
  font: inherit; font-size: 15px; letter-spacing: 3px; padding: 13px 34px; cursor: pointer; transition: all .2s; }
.screen button:hover { border-color: #e8df9a; background: rgba(232,223,154,.07); }
.m-warn { margin-top: 26px; font-size: 12px; color: #a89860; font-style: italic; letter-spacing: 1px; }
.m-seed { margin-top: 18px; font-size: 11px; color: #5a5540; letter-spacing: 2px; min-height: 14px; }

/* ---------- title: M.E.G. recovered-tape archive ---------- */
#menu .m-inner { max-width: 640px; }
/* CRT flicker on the title — a tired tube, not an effect */
#menu h1 { animation: crt-flicker 6.5s infinite; }
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  7% { opacity: .93; } 8% { opacity: 1; }
  43% { opacity: .97; } 44% { opacity: .9; } 45% { opacity: 1; }
  81% { opacity: .95; } 82% { opacity: 1; }
}
/* controls scrawled on a manila case label */
#menu .m-controls { position: relative; margin: 38px auto 0; display: inline-flex; flex-wrap: wrap;
  justify-content: center; gap: 4px 10px; background: #c9bd97; color: #33291c;
  padding: 16px 20px 12px; border: 1px solid #8f8464; max-width: 560px;
  box-shadow: 0 3px 14px rgba(0,0,0,.6), inset 0 0 26px rgba(84,66,30,.25);
  transform: rotate(-.8deg);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 11px; letter-spacing: 0; text-shadow: none; }
#menu .m-controls::before { content: 'CASE LABEL — DO NOT SEPARATE FROM TAPE';
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(.4deg);
  background: #b7ab84; color: #4a3f2c; padding: 1px 8px; white-space: nowrap;
  font-family: "Courier New", Courier, monospace; font-size: 9px; letter-spacing: 2px; }
#menu .m-controls span + span::before { content: '· '; color: #7a6f52; }
/* the canon warning, stamped in fading red ink */
#menu .m-warn { display: inline-block; margin: 30px auto 0; padding: 7px 12px;
  border: 2px solid rgba(158,64,50,.5); color: rgba(178,78,60,.72);
  text-transform: uppercase; font-size: 11px; letter-spacing: 2px; font-style: normal;
  transform: rotate(-1.3deg); }
/* typed tape metadata line with a block cursor */
#seed-tag.typing::after { content: '▌'; margin-left: 2px; color: #9a9478;
  animation: blink 1s steps(2) infinite; }

/* ---------- intro ---------- */
#intro { background: #020202; }
#intro .lines p { font-size: 15px; color: #b8b298; margin: 14px 0; letter-spacing: .5px;
  animation: fadein 2.2s both; text-shadow: 0 0 8px rgba(0,0,0,.8); }
#intro .m-skip { position: absolute; bottom: 26px; left: 0; right: 0; font-size: 11px; color: #5a5540; letter-spacing: 2px; }

/* ---------- death: TAPE ENDS — the tape itself is damaged ---------- */
#death::before, #death::after { content: ''; position: absolute; left: 0; right: 0; height: 3px;
  background: #e2e2d6; opacity: 0; pointer-events: none; filter: blur(1px);
  box-shadow: 0 0 8px rgba(255,255,255,.5); }
#death.show::before { animation: track-a 5.4s linear infinite; }
#death.show::after { height: 2px; background: #cfcfc2; box-shadow: 0 0 6px rgba(255,255,255,.3);
  animation: track-b 8.1s linear infinite; }
@keyframes track-a {   /* a band rolls down the frame, strength wavering */
  0% { opacity: 0; top: -6%; }
  9% { opacity: .6; } 30% { opacity: .28; } 55% { opacity: .55; }
  78% { opacity: .3; } 92%, 100% { opacity: 0; top: 106%; } }
@keyframes track-b {   /* a thinner ghost band climbs */
  0% { opacity: 0; top: 104%; }
  12% { opacity: .4; } 38% { opacity: .2; } 64% { opacity: .45; }
  86% { opacity: .18; } 97%, 100% { opacity: 0; top: -6%; } }
#death.show .m-inner { animation: tape-jitter 7s steps(1, end) infinite; }
@keyframes tape-jitter {
  0%, 100% { transform: none; }
  11% { transform: translateX(-3px); } 11.5% { transform: none; }
  38% { transform: translateX(2px) skewX(.4deg); } 38.7% { transform: none; }
  66% { transform: translateY(-2px); } 66.5% { transform: none; }
  88% { transform: translateX(-1px); } 88.4% { transform: none; } }
#death-cause { white-space: pre-line; font-size: 15px; color: #c8bfa0; line-height: 1.7;
  margin-bottom: 22px; font-style: italic; animation: fadein 1.8s both .3s; }
.death-h { color: #b86a5a !important;
  text-shadow: 2px 0 rgba(255,90,70,.35), -2px 0 rgba(90,140,255,.3), 0 0 30px rgba(184,106,90,.3) !important; }
.m-stats { font-size: 12px; color: #7a7458; margin: 20px 0 30px; letter-spacing: 1px; }

/* ---------- ending: quiet, staggered, then the Archive disagrees ---------- */
#ending-lines { text-align: center; }
#ending-lines p { font-size: 14px; color: #c8c2a4; line-height: 1.75; opacity: 0;
  animation: fadein 2.4s both; }
#ending-lines p.report { margin: 26px auto 0; padding-top: 16px; max-width: 520px;
  border-top: 1px solid #3a3626; white-space: pre-wrap;
  color: #8a8264; font-size: 12px; letter-spacing: .5px; font-style: normal; line-height: 1.9; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }