:root {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #ded9cb;
  background: #0d0f11;
  font-size: clamp(14px, 1.35vw, 18px);
}

* { box-sizing: border-box; }
html, body, #game, #render-root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #0d0f11; }
canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

.hud-panel {
  position: fixed;
  z-index: 5;
  background: rgba(10, 11, 12, 0.76);
  border: 1px solid rgba(222, 217, 203, 0.28);
  padding: .65rem .8rem;
  max-width: min(34rem, 80vw);
  line-height: 1.45;
  backdrop-filter: blur(2px);
}

#status { top: 1rem; left: 1rem; }
#room-name, #work-status, #carried-status { color: #aaa69b; font-size: .88rem; }
.interaction { right: 1rem; bottom: 1rem; min-width: min(26rem, 45vw); }
#interaction-name { margin-bottom: .45rem; }
#action-list { display: grid; gap: .3rem; }
.action-button {
  appearance: none;
  border: 1px solid #777369;
  background: #191b1d;
  color: #ded9cb;
  padding: .42rem .55rem;
  text-align: left;
  font: inherit;
}
.action-button:hover, .action-button:focus-visible { outline: 2px solid #c9c1ae; outline-offset: 1px; }
.action-key { color: #8f8a80; margin-right: .55rem; }

.feedback, .caption {
  position: fixed;
  z-index: 8;
  left: 50%;
  transform: translateX(-50%);
  width: min(52rem, 86vw);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 5px #000;
}
.feedback { bottom: 8.5rem; min-height: 1.5rem; }
.caption { top: 12%; color: #f1ecde; font-style: italic; }

.corner-button, .form-button {
  position: fixed;
  z-index: 7;
  appearance: none;
  background: rgba(15,16,17,.84);
  color: #d8d2c4;
  border: 1px solid #777369;
  padding: .5rem .65rem;
  font: inherit;
}
.corner-button { top: 1rem; right: 1rem; }
.form-button { top: 4.3rem; right: 1rem; }
.hidden { display: none !important; }

.fade {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #050607;
  opacity: 1;
  pointer-events: all;
}

::backdrop { background: rgba(0,0,0,.76); }
dialog {
  background: #17191b;
  color: #ded9cb;
  border: 1px solid #837e72;
  max-width: min(46rem, 92vw);
  max-height: 88vh;
  padding: 0;
}

.paper-form {
  min-width: min(38rem, 82vw);
  padding: 1.5rem;
  background: #d3cfbf;
  color: #242321;
  font-family: "Courier New", monospace;
}
.paper-form header { display: flex; flex-direction: column; border-bottom: 2px solid #333; padding-bottom: .7rem; margin-bottom: 1rem; }
.paper-form label { display: grid; gap: .3rem; margin: .75rem 0; }
.paper-form input, .paper-form textarea { width: 100%; padding: .45rem; font: inherit; background: #e9e5d7; color: #222; border: 1px solid #777; }
.paper-form textarea { resize: none; min-height: 4rem; }
.paper-form fieldset { margin: 1rem 0; border: 1px solid #555; }
.paper-form button, .options-panel button, .complete-panel button { font: inherit; padding: .5rem .75rem; }
.form-detail { display: block; padding: .25rem 0; }
.form-detail.unavailable { opacity: .45; }
.form-note { font-size: .82rem; }

.options-panel, .complete-panel { padding: 1.4rem; min-width: min(32rem, 80vw); }
.options-panel { display: grid; gap: 1rem; }
.options-panel h2 { margin: 0; }
.complete-panel h1 { margin-top: 0; }

.boot-error {
  position: fixed;
  z-index: 100;
  inset: 15% 10% auto;
  background: #1b1c1e;
  border: 1px solid #9b9485;
  padding: 1.2rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .interaction { left: 1rem; right: 1rem; min-width: 0; }
  #status { max-width: 65vw; }
  .feedback { bottom: 12rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}