/* THE LAST ROOM — interface. The room itself is painted on the canvas. */

:root {
  --ink: #000;
  --paper: #e9e1cf;
  --paper-ink: #2b2620;
  --text: #ddd5c4;
  --text-dim: #8c8577;
  --line: rgba(221, 213, 196, 0.16);
  --warm: #c9a76a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "DejaVu Serif", serif;
  --hand: "Segoe Print", "Bradley Hand", "Snell Roundhand", "Apple Chancery", "URW Chancery L", "Z003", cursive;
  --mono: ui-monospace, Consolas, "DejaVu Sans Mono", monospace;
  /* room rectangle, set from game.js on resize */
  --room-x: 0px;
  --room-y: 0px;
  --room-w: 100vw;
  --room-h: 100vh;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

#room {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  touch-action: manipulation;
}

body.custom-cursor #room, body.custom-cursor #panel, 
button { font: inherit; color: inherit; }
button:focus-visible { outline: 1px solid var(--warm); outline-offset: 3px; }

.hidden { display: none !important; }

/* ---------- pointer ---------- */

#cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(233, 225, 207, 0.85);
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: width 0.18s var(--ease), height 0.18s var(--ease), margin 0.18s var(--ease),
    background-color 0.18s, border-color 0.18s, opacity 0.2s;
  border: 1px solid transparent;
}

body.custom-cursor #cursor { opacity: 1; }

#cursor.hide { opacity: 0 !important; }

#cursor.over {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: transparent;
  border-color: rgba(233, 225, 207, 0.75);
}

#hover-label {
  position: fixed;
  left: 0;
  top: 0;
  padding: 2px 0;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: rgba(233, 225, 207, 0.82);
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
  white-space: nowrap;
  z-index: 49;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

#hover-label.show { opacity: 1; }

/* ---------- shared layers ---------- */

.layer {
  position: fixed;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s, transform 0.35s var(--ease);
}

.layer.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s, transform 0.35s var(--ease);
}

body.reduced .layer, body.reduced .layer.open { transition-duration: 0.12s; }

.text-btn {
  padding: 6px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--text-dim);
  font-size: 15px;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.text-btn:hover, .text-btn:focus-visible { color: var(--text); border-bottom-color: var(--line); outline: none; }
.text-btn.big { font-size: 18px; color: var(--text); }

/* ---------- HUD ---------- */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 15; }

.hud-btn {
  position: absolute;
  pointer-events: auto;
  padding: 6px 8px;
  background: none;
  border: 0;
  color: rgba(221, 213, 196, 0.45);
  font-size: 13px;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: color 0.25s;
}

.hud-btn:hover, .hud-btn:focus-visible { color: var(--text); }

.hud-btn kbd {
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(221, 213, 196, 0.35);
}

#btn-journal { left: calc(var(--room-x) + 18px); bottom: calc(100vh - var(--room-y) - var(--room-h) + 14px); }
#btn-menu { right: calc(100vw - var(--room-x) - var(--room-w) + 18px); top: calc(var(--room-y) + 12px); }

#btn-journal.pulse { animation: soft-pulse 1.6s var(--ease) 2; }

@keyframes soft-pulse {
  50% { color: var(--warm); }
}

#inventory {
  position: absolute;
  right: calc(100vw - var(--room-x) - var(--room-w) + 18px);
  bottom: calc(100vh - var(--room-y) - var(--room-h) + 12px);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.slot {
  width: 42px;
  height: 42px;
  padding: 4px;
  background: rgba(8, 7, 6, 0.55);
  border: 1px solid rgba(221, 213, 196, 0.14);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: border-color 0.2s, background-color 0.2s, opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.slot.in { opacity: 1; transform: none; }
.slot:hover, .slot:focus-visible { border-color: rgba(221, 213, 196, 0.45); background: rgba(20, 17, 14, 0.75); outline: none; }
.slot svg { width: 100%; height: 100%; display: block; }

/* ---------- observation panel ---------- */

#panel {
  left: calc(var(--room-x) + var(--room-w) / 2);
  bottom: calc(100vh - var(--room-y) - var(--room-h) + var(--room-h) * 0.06);
  width: min(640px, calc(var(--room-w) - 48px));
  transform: translate(-50%, 8px);
  padding: 18px 26px 16px;
  background: rgba(9, 8, 7, 0.86);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

#panel.open { transform: translate(-50%, 0); }

#panel-title {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
}

#panel-text p {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
}

#panel-text p.voice { font-style: italic; color: #e6dcc6; }
#panel-text p.aside { color: var(--text-dim); }

#panel-more {
  height: 14px;
  margin-top: 4px;
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.3s;
}

#panel-more.show { opacity: 0.8; }

#panel-choices { display: flex; gap: 22px; margin-top: 8px; }
#panel-choices:empty { display: none; }

/* ---------- close-ups ---------- */

#closeup {
  left: calc(var(--room-x) + var(--room-w) / 2);
  top: calc(var(--room-y) + var(--room-h) * 0.08);
  transform: translate(-50%, 6px);
  max-height: calc(var(--room-h) * 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#closeup.open { transform: translate(-50%, 0); }

#closeup-actions { display: flex; gap: 18px; margin-top: 10px; }
#closeup-actions:empty { display: none; }

.paper {
  width: min(440px, calc(var(--room-w) - 60px));
  min-height: 300px;
  padding: 30px 34px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(80, 100, 130, 0.18) 31px 32px),
    var(--paper);
  color: var(--paper-ink);
  font-family: var(--hand);
  font-size: 21px;
  line-height: 32px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.paper .date { color: #5b5246; }
.paper s { text-decoration-thickness: 2px; color: #4a4239; }
.paper .heavy { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; }
.paper .other { color: #24324a; }
.paper .faded { color: rgba(43, 38, 32, 0.35); }

.page-label {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.photo {
  width: min(420px, calc(var(--room-w) - 60px));
  aspect-ratio: 4 / 3;
  padding: 14px 14px 40px;
  background: #e8e2d4;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.photo canvas { width: 100%; height: 100%; display: block; }

.photo-back {
  width: min(420px, calc(var(--room-w) - 60px));
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: #ddd5c3;
  color: #2a3346;
  font-family: var(--hand);
  font-size: 26px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.screen-phone {
  width: 220px;
  padding: 18px 16px 26px;
  background: #1b1c1d;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.screen-phone .lcd {
  height: 200px;
  padding: 14px 12px;
  background: #9fb08d;
  color: #1f2a18;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background-color 1.4s var(--ease), color 1.4s var(--ease);
}

.screen-phone .lcd.off { background: #252a22; color: transparent; }
.screen-phone .lcd b { display: block; font-size: 16px; letter-spacing: 0.06em; }
.screen-phone .batt { float: right; font-size: 11px; }

/* combination lock */
.lock {
  padding: 22px 26px 18px;
  background: rgba(14, 12, 10, 0.92);
  border: 1px solid var(--line);
  text-align: center;
}

.lock-label { margin: 0 0 14px; font-size: 12px; letter-spacing: 0.28em; color: var(--text-dim); }
.dials { display: flex; gap: 10px; justify-content: center; }
.dial { display: flex; flex-direction: column; align-items: center; }

.dial button {
  width: 46px;
  height: 22px;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}

.dial button:hover, .dial button:focus-visible { color: var(--text); }

.dial .digit {
  width: 46px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#2a2318, #4b3d26 45%, #2a2318);
  border: 1px solid #5b4a2c;
  color: #e9dcbc;
  font-family: var(--mono);
  font-size: 28px;
}

.dial .digit.focus { border-color: var(--warm); }
.lock-hint { margin: 12px 0 0; min-height: 1.4em; font-size: 14px; color: var(--text-dim); font-style: italic; }

/* ---------- journal ---------- */

#journal {
  top: var(--room-y);
  right: calc(100vw - var(--room-x) - var(--room-w));
  width: min(420px, var(--room-w));
  height: var(--room-h);
  transform: translateX(24px);
  background: rgba(10, 9, 8, 0.94);
  border-left: 1px solid var(--line);
  z-index: 30;
}

#journal.open { transform: none; }

.journal-inner { height: 100%; overflow-y: auto; padding: 26px 30px 30px; }
.journal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.journal-head h2, .modal-inner h2 { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0.32em; color: var(--text-dim); text-transform: uppercase; }

#journal-list { list-style: none; margin: 0; padding: 0; }
#journal-list li { padding: 12px 0; border-top: 1px solid rgba(221, 213, 196, 0.08); }
#journal-list li:first-child { border-top: 0; }
#journal-list .j-title { font-size: 16px; color: var(--text); }
#journal-list .j-text { margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--text-dim); }
#journal-list .empty { color: var(--text-dim); font-style: italic; }

#journal-open { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
#journal-open:empty { display: none; }
#journal-open h3 { margin: 0 0 8px; font-size: 12px; font-weight: 400; letter-spacing: 0.3em; color: var(--text-dim); }
#journal-open p { margin: 0 0 4px; font-size: 15px; color: #a39b8b; }
#journal-open p::before { content: "?  "; color: #6f685c; }

/* ---------- settings / confirm ---------- */

.modal {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
}

.modal-inner {
  width: min(360px, calc(100vw - 32px));
  padding: 24px 26px;
  background: #0d0c0a;
  border: 1px solid var(--line);
}

.modal-inner h2 { margin-bottom: 14px; }

.row-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 11px 2px;
  background: none;
  border: 0;
  border-top: 1px solid rgba(221, 213, 196, 0.08);
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}

.row-btn b { font-weight: 400; color: var(--warm); }
.row-btn b.off { color: var(--text-dim); }
.row-btn.quiet { color: var(--text-dim); }
.row-btn:hover, .row-btn:focus-visible { color: #fff; outline: none; }

#confirm-text { margin: 0 0 14px; font-size: 17px; line-height: 1.5; }
.confirm-actions { display: flex; flex-direction: column; }

/* ---------- title and sequences ---------- */

.full {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 60;
  transition-duration: 1.2s;
}

.full.open { transition-duration: 1.2s; }

.title-text {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 400;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  color: #d9d0bd;
  opacity: 0;
  transition: opacity 2.4s var(--ease);
}

.title-text.in { opacity: 1; }

.title-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 46px;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.title-menu.in { opacity: 1; }

.title-foot {
  position: absolute;
  bottom: 28px;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #5d574d;
}

#sequence { cursor: pointer; }
body.custom-cursor #sequence { cursor: none; }

#sequence-text {
  width: min(620px, calc(100vw - 48px));
  transition: opacity 0.9s var(--ease);
  text-align: center;
}

#sequence-text p {
  margin: 0 0 18px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: #d4cbb8;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}

#sequence-text p.in { opacity: 1; }
#sequence-text p.big { font-size: clamp(26px, 3vw, 40px); letter-spacing: 0.36em; color: #e2d9c6; }
#sequence-text p.small { font-size: 13px; letter-spacing: 0.3em; color: #7d766a; }

#sequence-actions { display: flex; gap: 26px; margin-top: 18px; opacity: 0; transition: opacity 1s var(--ease); }
#sequence-actions.in { opacity: 1; }
#sequence-skip { opacity: 0; transition: opacity 1s; }
#sequence-skip.show { opacity: 1; }

#fade {
  position: fixed;
  inset: 0;
  background: #000;
  pointer-events: none;
  opacity: 0;
  z-index: 55;
  transition: opacity 0.9s var(--ease);
}

#fade.on { opacity: 1; pointer-events: auto; }

/* ---------- reduced motion ---------- */

body.reduced * { animation: none !important; }
body.reduced .title-text, body.reduced .title-menu, body.reduced #sequence-text p { transition-duration: 0.3s; }

@media (max-width: 720px) {
  #panel-text p { font-size: 16px; }
  .paper { font-size: 18px; padding: 22px 22px; }
  .slot { width: 36px; height: 36px; }
}