@font-face {
  font-family: ArchiveMono;
  src: url("assets/mono.ttf") format("truetype");
  font-display: swap;
}
:root {
  color-scheme: dark;
  --cream: #f0dfba;
  --gold: #d7ae69;
  --muted: #b7a48b;
  --red: #e17b64;
  --green: #b4d288;
  --mono: ArchiveMono, "Courier New", monospace;
  --book: Georgia, "Times New Roman", serif;
  --nickel: linear-gradient(110deg, #433b2c, #282923 35%, #333427 72%, #211d18);
  --walnut: repeating-linear-gradient(2deg, #e4a44c06 0 1px, #140a0500 2px 4px, #0b060728 5px 7px),
    linear-gradient(101deg, #331d17, #281912 45%, #3a2317);
  --rim: inset 1px 1px #e2ad6e38, inset -2px -2px #0e0a079e, 0 2px 0 #080604;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #17110f; }
body {
  margin: 0;
  color: var(--cream);
  font: 15px/1.5 var(--book);
  background: radial-gradient(ellipse at 47% 4%, #3d291c, #1c1411 54%, #120e0c 85%);
}
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button, a, input, select, canvas, summary { outline-offset: 3px; }
:focus-visible { outline: 2px solid #efcd8b; }
a { color: inherit; text-decoration: none; }
figure, blockquote { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.svg-defs, .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.cabinet {
  position: relative;
  width: min(1140px, calc(100% - 44px));
  margin: clamp(12px, 2.4vw, 34px) auto;
  padding: 10px 14px 4px;
  border: 1px solid #a47b48;
  background: var(--walnut);
  box-shadow: 0 0 0 3px #120a08, 0 0 0 4px #533626, 0 12px 40px #000a, inset 0 0 0 3px #100b08, inset 0 0 0 4px #734728;
}
.cabinet-rail, .cabinet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  font: 11px/1.35 var(--mono);
}
.cabinet-rail {
  position: relative;
  min-height: 53px;
  padding: 0 10px 8px;
  border-bottom: 4px ridge #745330;
}
.rail-title {
  text-align: center;
  font: italic 16px var(--book);
  color: #c5a981;
}
.rail-title i { color: #c77d4c; font: 10px var(--mono); vertical-align: 2px; }
.rail-switches { display: flex; align-items: center; gap: 6px; }
.house-mark {
  border: 1px solid #7e4930;
  background: linear-gradient(135deg, #3b2620, #1c1312 55%, #291911);
  box-shadow: var(--rim);
  display: flex;
  gap: 5px;
  padding: 3px 8px 2px;
  align-items: center;
  transform: skew(-6deg);
  color: #e7c9a3;
  text-align: left;
}
.house-mark svg { width: 29px; height: 27px; }
.house-mark b, .house-mark small { display: block; font: 900 14px/.92 "Arial Black", Impact, sans-serif; letter-spacing: .045em; }
.house-mark b { color: #e8775c; text-shadow: 1px 1px #220b08; }
.house-mark small { font-size: 9px; letter-spacing: .085em; margin: 2px 0 1px; }
.cabinet[data-chapter] .house-mark { display: none; }
.cabinet[data-chapter] .rail-title { font: italic bold 17px var(--book); }
.hardware-button {
  padding: 7px 10px;
  background: var(--nickel);
  border: 1px solid #665d43;
  box-shadow: var(--rim);
  font: 10px var(--mono);
  color: #e9d5a7;
}
.hardware-button:hover { background: #494438; }
.led {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b7d571;
  box-shadow: 0 0 5px #b8d570a0, inset 0 1px #efffc0;
}
.led.off { background: #514234; box-shadow: none; }
.cabinet-foot {
  min-height: 36px;
  color: #b69a73;
  font-size: 9px;
  padding: 3px 6px;
}
.cabinet-foot a { color: #e6cda3; }
.cabinet-foot a:hover { text-decoration: underline; }

.title-stage {
  min-height: clamp(360px, 44vw, 488px);
  isolation: isolate;
  display: grid;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #120b07;
  background: #0f0c0a;
}
.title-art {
  position: absolute;
  inset: 0 0 0 19%;
  z-index: -1;
}
.title-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 54%;
  filter: saturate(.9);
}
.title-stage::after {
  position: absolute;
  inset: 0;
  content: "";
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #120d0a 4%, #120d0a 19%, #160f0be0 31%, #160f0b5c 49%, transparent 62%),
    linear-gradient(0deg, #0e0806c4, transparent 24%);
  box-shadow: inset 0 0 55px #000a;
}
.title-copy { padding: 30px 0 27px clamp(20px, 4vw, 57px); width: max-content; max-width: 100%; }
.title-presents { color: #dfbd83; font: 10px/1.25 var(--mono); letter-spacing: .07em; }
.title-copy h1 {
  margin: 11px 0 10px;
  font: 700 clamp(72px, 10vw, 145px)/.73 var(--book);
  letter-spacing: -.085em;
  color: #e7c78c;
  text-shadow: 1px 1px #806044, 2px 2px #583923, 3px 4px #513624, 5px 6px #0d0907, 0 5px 21px #0c0805;
}
.title-copy h1 em {
  font: inherit;
  font-style: italic;
  color: #e6ab71;
  display: inline-block;
  transform: translateX(-.065em);
}
.title-copy p { font-size: clamp(15px, 1.7vw, 22px); margin: 20px 0; font-style: italic; color: #ead2a8; }
.start-lever {
  border: 2px outset #a87445;
  background: linear-gradient(#8a3d2b, #5c261c);
  box-shadow: 0 3px 0 #150806, inset 0 0 0 1px #2a0e0a;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  min-height: 48px;
  padding: 7px 12px 7px 15px;
  color: #fff0cb;
  font: bold 19px var(--book);
}
.start-lever:hover { background: linear-gradient(#a24b34, #753124); }
.start-lever b { color: #e8b96e; font-size: 18px; }
.title-links { display: flex; gap: 16px; margin-top: 8px; }
.text-button { background: transparent; border: 0; padding: 5px 0; text-decoration: underline; text-underline-offset: 4px; color: #e5c899; }
.print-stamp {
  position: absolute;
  bottom: 22px;
  right: 26px;
  transform: rotate(-8deg);
  border: 3px double #dd8769;
  padding: 8px 13px;
  font: bold 13px/.99 var(--mono);
  letter-spacing: .08em;
  text-align: center;
  background: #2a150dc7;
  color: #e39373;
}
.title-tickets {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px 2px;
  border-bottom: 2px groove #6d4e35;
}
.ticket-ribbon {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 4px 9px;
  border-right: 1px dashed #876543;
  font: 9px var(--mono);
  color: #d8af75;
}
.ticket-ribbon i { font-size: 19px; color: #b07f55; font-style: normal; }
.ticket-ribbon small { font-size: 8px; }
.ticket-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ticket-archive { --ticket-light: #efc98d; --ticket-edge: #897040; --ticket: #463625; --ticket-dark: #251e15; }
.ticket-blackwater { --ticket-light: #b3e1c9; --ticket-edge: #5d897d; --ticket: #29413b; --ticket-dark: #1a2b28; }
.ticket-orpheum { --ticket-light: #eec1ad; --ticket-edge: #986452; --ticket: #4d2a2b; --ticket-dark: #2b1b1c; }
.room-ticket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  position: relative;
  min-height: 85px;
  text-align: left;
  padding: 10px 10px 10px 5px;
  border: 1px solid var(--ticket-edge);
  background: repeating-linear-gradient(0deg, transparent 0 3px, #00000013 4px 5px), linear-gradient(110deg, var(--ticket-dark), var(--ticket), var(--ticket-dark));
  box-shadow: inset 0 0 0 2px #19140ea1, 0 3px #110b08;
  color: var(--ticket-light);
}
.room-ticket:hover { filter: brightness(1.24); }
.room-ticket:active { transform: translateY(2px); }
.room-ticket::before, .room-ticket::after {
  content: "";
  position: absolute;
  left: -1px;
  width: 5px;
  height: 8px;
  background: #2d1c14;
  border-right: 1px solid var(--ticket-edge);
  border-radius: 0 70% 70% 0;
}
.room-ticket::before { top: 11px; }
.room-ticket::after { bottom: 11px; }
.ticket-number {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 1px dashed var(--ticket-edge);
  padding: 4px 3px;
  font: 10px var(--mono);
}
.ticket-copy { display: grid; gap: 3px; }
.ticket-copy small { font: 9px var(--mono); letter-spacing: .08em; }
.ticket-copy b { font: bold 18px/1.05 var(--book); }
.ticket-archive .ticket-copy b { font-style: italic; }
.ticket-blackwater .ticket-copy b { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 17px; letter-spacing: -.045em; }
.ticket-orpheum .ticket-copy b { font-variant: small-caps; }
.ticket-copy>span { color: #e2cfb3; font: 12px/1.2 var(--book); }
.room-ticket i { font: 12px var(--mono); }
.room-ticket.compact { min-height: 57px; }
.compact .ticket-copy b { font-size: 15px; }

.adventure {
  --scene-accent: #dbb27a;
  background: var(--walnut);
}
[data-chapter="blackwater"] .adventure { --scene-accent: #add9c6; }
[data-chapter="orpheum"] .adventure { --scene-accent: #e6aea2; }
[data-scene="restroom"] .adventure { --scene-accent: #c4c69f; }
.play-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 238px;
  gap: 9px;
}
.view-deck { min-width: 0; position: relative; padding: 0 6px 4px; background: #1a120e; border: 1px solid #6a4930; }
.view-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 6px 3px; }
.view-label h2 { margin: 0; font: italic bold 22px var(--book); color: var(--scene-accent); }
.view-label h2:focus { outline: none; }
.view-label>span { text-align: right; font: 9px var(--mono); color: #b89b70; }
.scene-recess { position: relative; border: 4px ridge #6e5036; box-shadow: 0 0 0 1px #0b0806, 0 2px #0e0907; }
.world-stage { position: relative; aspect-ratio: 3 / 2; background: #130f0d; }
#world {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: crosshair;
}
[data-verb="walk"] #world { cursor: crosshair; }
[data-verb="look"] #world { cursor: zoom-in; }
.hotspots, .scene-fade { position: absolute; inset: 0; pointer-events: none; }
.scene-fade { z-index: 3; }
.scene-fade.arrival { animation: arrival .32s steps(6) both; }
@keyframes arrival { from { background: #120c0a; } to { background: transparent; } }
.world-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: max(28px, 4.5%);
  aspect-ratio: 1;
  pointer-events: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe1a1;
  touch-action: manipulation;
}
.world-pin:hover, .world-pin:focus-visible { z-index: 2; }
.pin-mark {
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  line-height: 1;
  border: 1px solid #d7b579;
  background: #18110de0;
  box-shadow: 1px 2px #120905;
  font: bold 11px/1 var(--mono);
}
.pin-prop .pin-mark { min-width: 11px; width: 11px; height: 11px; border-radius: 50%; }
.pin-note .pin-mark { min-width: 13px; height: 12px; background: #30231a; }
.pin-staff .pin-mark { border-radius: 50% 50% 50% 0; border-color: #dfbc8d; background: #4b261c; }
.pin-tv .pin-mark, .world-pin.done .pin-mark { color: #b8de99; border-color: #94ad74; }
.world-pin:is(:hover,:focus-visible) .pin-mark { background: #e5c286; color: #281810; }
.pin-caption {
  position: absolute;
  display: none;
  pointer-events: none;
  bottom: 100%;
  width: max-content;
  max-width: min(170px, 40vw);
  padding: 5px 7px;
  background: #1b140ef5;
  border: 1px solid #c09c64;
  box-shadow: 2px 2px #0b0706;
  font: 11px/1.2 var(--mono);
  text-align: center;
}
.world-pin:is(:hover,:focus-visible) .pin-caption { display: block; }
.world-pin[style^="left: 9"] .pin-caption { right: 0; }
.world-pin[style^="left: 1"] .pin-caption { left: 0; }
.command-strip {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  color: #f0cd91;
  background: #1c140d;
  border-top: 1px solid #5f4427;
  font: 12px/1.2 var(--mono);
}
.command-strip i { color: #c8804b; font-style: normal; }
.world-feedback {
  position: absolute;
  bottom: 39px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: none;
  width: fit-content;
  pointer-events: none;
  padding: 5px 9px;
  border: 1px solid #b08d57;
  background: #1c150ef0;
  font: 11px/1.4 var(--mono);
  color: #f2d8aa;
}
.world-feedback.visible { display: block; }
.operator {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 11px;
  padding: 12px 11px;
  border: 1px solid #68573c;
  background: radial-gradient(ellipse at 60% 15%, #483d2e85, #2b251c99 80%), var(--nickel);
  box-shadow: inset 0 0 0 2px #160f0a;
}
.plate-label { color: #e1b787; font: 9px/1.3 var(--mono); letter-spacing: .065em; }
.lobby-panel h2 { font: bold italic 24px/1.05 var(--book); margin: 6px 0 8px; }
.lobby-panel p { font-size: 14px; color: #dfccad; margin: 0 0 12px; }
.lobby-tickets { display: grid; gap: 8px; }
.operator-links { display: grid; gap: 3px; }
.operator-links button {
  background: linear-gradient(90deg, #29251e, #302920 70%, #211c17);
  border: 1px solid #625039;
  box-shadow: inset 0 1px #9f7d5233;
  min-height: 32px;
  text-align: left;
  font: 11px var(--mono);
  padding: 4px 7px;
}
.operator-links button span { color: #d3a66f; margin-right: 5px; }
.operator-links button:hover { border-color: #c59c60; }
.operator-links b { float: right; color: #e9c28a; }
.operator-tv {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 7px 9px 6px;
  border: 2px outset #5d5241;
  background: repeating-linear-gradient(0deg, #483e3200 0 2px, #08060530 3px 4px), linear-gradient(120deg, #473c31, #231e18);
  box-shadow: 0 3px 0 #100b08;
  border-radius: 8px 8px 5px 5px;
}
.operator-glass, .crt-screen {
  width: 100%;
  border: 3px inset #555b41;
  background: repeating-linear-gradient(0deg, #00000024 0 1px, transparent 1px 3px), radial-gradient(ellipse, #27351e, #111b11);
  color: #c4e89c;
  text-shadow: 0 0 6px #8fbf6c68;
  border-radius: 13px / 9px;
  box-shadow: inset 0 0 9px #000;
  font-family: var(--mono);
}
.operator-glass { min-height: 104px; padding: 8px 8px 5px; }
.operator-glass>span { display: block; font-size: 8px; }
.operator-glass strong { display: block; font: bold 29px/1.15 var(--mono); letter-spacing: .06em; }
.operator-glass p { margin: 4px 0; line-height: 1.35; font-size: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.operator-glass.receiving { animation: static .5s steps(2) infinite; }
@keyframes static { 50% { filter: contrast(.7) brightness(1.5); } }
.tv-dial {
  background: #3a3429;
  box-shadow: 1px 1px #080805;
  margin: 4px 0 0;
  border: 1px solid #6a5b43;
  border-radius: 50%;
  width: 25px;
  height: 24px;
  position: relative;
}
.tv-dial::before { content: ""; position: absolute; left: 9px; top: 4px; width: 3px; height: 13px; background: #ae9669; transform: rotate(30deg); }
.tv-dial:hover { background: #65563f; }
.radio-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  min-height: 45px;
  text-align: left;
  background: linear-gradient(#3b453c, #26302c);
  border: 2px outset #586758;
  color: #e0e4ba;
  font: bold 14px var(--book);
  padding: 5px 7px;
  box-shadow: 0 2px #181a12;
}
.radio-key:hover:not(:disabled) { background: #4c5949; }
.radio-key small { display: block; font: 9px var(--mono); color: #c3d3b5; margin-top: 1px; }
.radio-speaker { color: #b0b395; font: 22px/1 var(--mono); }
.radio-key .led { margin-left: auto; }
.quest-steps { list-style: none; padding: 0 1px; margin: 13px 0 0; display: grid; gap: 7px; }
.quest-steps li { display: flex; gap: 7px; align-items: baseline; font-size: 13px; color: #decdaf; }
.quest-steps i { font: 9px var(--mono); color: #c29e65; }
.quest-steps li.complete, .quest-steps li.complete i { color: #b7d397; }
.cashout-key { margin-top: 10px; background: #554331; border: 2px outset #9a7347; padding: 6px; width: 100%; font: bold 14px var(--book); }

.console {
  display: grid;
  grid-template-columns: minmax(178px, 22%) minmax(0, 1fr);
  margin-top: 6px;
  gap: 8px;
  border-bottom: 3px ridge #735035;
  padding: 3px 0 8px;
}
.verbs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #1a120e; border: 1px solid #6b492c; }
.verbs button {
  text-align: left;
  border: 2px outset #7b5734;
  background: linear-gradient(128deg, #66442b, #392619 80%);
  padding: 5px 7px;
  min-height: 39px;
  color: #efdbb6;
  font: bold 17px var(--book);
}
.verbs button span { color: #d2a86d; font: 14px var(--mono); display: inline-block; min-width: 15px; }
.verbs button[aria-pressed="true"] { background: linear-gradient(125deg, #563123, #782c22 80%); border: 2px inset #9d6240; color: #ffe9bd; }
.verbs button:hover { filter: brightness(1.25); }
.pockets {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  background: repeating-linear-gradient(125deg, #24170e7a 0 2px, #140e0b 3px 6px);
  border: 3px inset #604326;
  padding: 3px;
}
.inventory-title { display: grid; place-content: center; gap: 4px; align-self: stretch; color: #e3be83; border-right: 1px dashed #765738; }
.inventory-title span { font: bold 11px var(--mono); }
.inventory-title small { font: 8px var(--mono); color: #c6a679; }
.inventory-slots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(68px, 108px); gap: 4px; padding: 1px 0 2px 5px; min-width: 0; overflow-x: auto; align-items: center; }
.pocket-slot {
  position: relative;
  min-width: 0;
  min-height: 68px;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 1px 2px 4px;
  background: radial-gradient(ellipse, #4b3626, #211710 75%);
  border: 2px inset #6c4d31;
  color: #e7c99b;
  font: 9px/1.12 var(--mono);
  text-align: center;
}
.pocket-slot:hover { border-color: #be945f; }
.pocket-slot canvas { width: 59px; height: 49px; image-rendering: pixelated; }
.pocket-slot span { white-space: nowrap; max-width: 100%; text-overflow: ellipsis; overflow: hidden; }
.pocket-slot.empty { background: #211710; border-color: #4c3624; box-shadow: inset 0 0 8px #100b08; color: #806347; }
.pocket-slot.empty i { font: 20px var(--book); }

.prop-window {
  width: min(620px, calc(100% - 28px));
  max-height: min(92dvh, 880px);
  padding: 0;
  color: var(--cream);
  border: 3px ridge #95734c;
  background: repeating-linear-gradient(160deg, #543c2413 0 1px, #261c1000 2px 5px), #2b2019;
  box-shadow: 0 0 0 2px #0b0706, 0 16px 70px #000;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #926e47 #2a2017;
}
.prop-window::backdrop { background: #080604c9; }
.prop-rail {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 5px 3px 12px;
  border-bottom: 2px ridge #866445;
  background: var(--walnut);
  color: #e9c99b;
  font: 10px var(--mono);
  letter-spacing: .065em;
}
.prop-rail button { background: #65382a; border: 1px outset #ba8356; width: 30px; height: 26px; font: 22px/1 var(--book); }
.prop-rail button:hover { background: #9c4d3a; }
.prop-content { padding: 18px clamp(16px, 4vw, 32px) 25px; }
.prop-content h2 { font: bold italic clamp(27px, 5vw, 38px)/1.07 var(--book); margin: 6px 0 11px; }
.prop-content p { margin: 9px 0 14px; color: #e6d1ad; line-height: 1.45; }
.eyebrow { color: #dcab79; font: 10px/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.primary-button, .secondary-button, .mechanism-button {
  border: 2px outset #aa8050;
  box-shadow: 0 2px #1a0e07;
  padding: 8px 13px;
  min-height: 40px;
  background: linear-gradient(#783d2b, #572c21);
  font: bold 15px/1.25 var(--book);
  text-align: center;
  color: #ffe7ba;
}
.primary-button:hover:not(:disabled), .mechanism-button:hover:not(:disabled) { filter: brightness(1.2); }
.secondary-button { border-color: #796145; background: linear-gradient(#453a2b, #30291e); color: #e7cca0; }
.secondary-button:hover:not(:disabled) { background: #57462f; }
.option-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.option-bank>* { flex: 1 1 auto; }
.prop-content .puzzle-feedback, .prop-content .prop-feedback { font: 12px/1.5 var(--mono); margin: 10px 0; min-height: 18px; color: #dfb990; }
.prop-content .guided-scan { margin-left: 8px; }
.speech-header { display: flex; align-items: center; gap: 13px; }
.speech-header h2 { margin-bottom: 0; }
.speech-portrait { width: 68px; height: 67px; flex: 0 0 68px; border: 2px ridge #9e7950; }
.speech-portrait canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.speech-line {
  margin-top: 16px;
  padding: 10px 15px;
  border-left: 3px solid #ba8551;
  background: #392b20;
  font: italic 19px/1.5 var(--book);
  color: #f0d5aa;
}
.prop-content .player-line { font: 16px var(--book); color: #eedfbd; }
.brief-stamp { color: var(--ticket-light); border: 1px dashed var(--ticket-edge); display: inline-block; padding: 4px 7px; font: 10px var(--mono); margin-top: 13px; transform: rotate(-2deg); }
.dialog-tickets { grid-template-columns: 1fr; }
.dialog-tickets .room-ticket { min-height: 67px; }
.index-list { display: grid; gap: 4px; }
.index-list button { padding: 7px 10px; min-height: 39px; border: 1px solid #775b3b; background: #3c2c20; display: flex; gap: 12px; justify-content: space-between; align-items: center; text-align: left; }
.index-list button:hover { background: #523925; }
.index-list small { font: 9px var(--mono); color: #e3b67a; white-space: nowrap; }
.field-paper, .notebook-pages, .manual-pages {
  border: 1px solid #887249;
  color: #342419;
  background: repeating-linear-gradient(1deg, #cbb37e00 0 5px, #93623a10 6px 7px), linear-gradient(118deg, #e0c38e, #c9ac78);
  box-shadow: 3px 4px #130d099c;
}
.field-paper { padding: 14px 16px; margin: 16px 2px; transform: rotate(-.6deg); }
.field-paper p, .notebook-pages p, .manual-pages p { color: #342419; }
.field-paper span, .staff-memo b { font: 10px var(--mono); }
.field-paper p:last-child, .notebook-pages p:last-child, .manual-pages p:last-child { margin-bottom: 2px; }
.notebook-pages, .manual-pages { padding: 3px 15px; }
.notebook-pages article, .manual-pages article { padding: 8px 3px; border-bottom: 1px dashed #82653e; }
.notebook-pages article:last-child, .manual-pages article:last-child { border-bottom: 0; }
.notebook-pages h3, .manual-pages h3 { font: bold 16px var(--book); margin: 3px 0; }
.feed-stack { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.feed-stack figure { padding: 4px; background: #232822; border: 2px outset #615d44; }
.feed-stack img { display: block; width: 100%; filter: saturate(.45); image-rendering: pixelated; }
.feed-stack figcaption { color: #bad096; font: 9px var(--mono); margin-top: 5px; }
.feed-stack b { color: #ede1a5; display: block; }
.keeper-portraits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 16px 0; }
.keeper-portraits figure { border: 4px ridge #93764e; background: #281a11; text-align: center; box-shadow: 2px 3px #100a06; }
.keeper-portraits canvas { width: 100%; display: block; image-rendering: pixelated; }
.keeper-portraits figcaption { padding: 4px; }
.keeper-portraits b { text-transform: capitalize; font: bold 16px var(--book); }
.keeper-portraits small { display: block; font: 9px var(--mono); color: #d8b780; }
.crt-case { background: linear-gradient(125deg, #535143, #2d2c23); border: 4px ridge #796f55; border-radius: 15px / 10px; padding: 12px 13px 9px; box-shadow: 4px 4px #160e08; }
.crt-screen { padding: 15px 18px 12px; }
.crt-screen>span { display: block; font-size: 11px; }
.crt-screen>b { font: bold clamp(37px, 10vw, 65px)/1.08 var(--mono); letter-spacing: .065em; }
.crt-message { border-top: 1px dashed #729251; padding-top: 7px; margin-top: 6px; }
.crt-message small { color: #e3edb7; font-size: 10px; }
.crt-message p { font: 14px/1.5 var(--mono); color: #cae7a7; margin: 4px 0; }
.crt-controls { margin-top: 6px; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.crt-controls span { height: 11px; width: 46px; background: repeating-linear-gradient(90deg, #1a1b15 0 2px, transparent 3px 4px); margin-right: auto; }
.crt-controls i { width: 13px; height: 12px; border: 1px outset #82795e; background: #444133; }
.tv-history { margin-top: 13px; font-size: 14px; color: #dfc59d; }
.tv-history summary { cursor: pointer; }
.tv-history li { margin: 5px 0; }
.object-view {
  position: relative;
  width: min(100%, 440px);
  margin: 12px auto;
  border: 5px ridge #756a4a;
  box-shadow: 3px 3px #120c09;
  background: #182016;
}
.object-view canvas { display: block; width: 100%; image-rendering: pixelated; cursor: grab; touch-action: none; }
.object-view canvas:active { cursor: grabbing; }
.object-view small { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font: 9px var(--mono); color: #d1d9a5; pointer-events: none; }
.reward-banner { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--ticket-edge); }
.reward-banner h2 { color: var(--ticket-light); margin: 5px 0; }
.claim-ticket { margin: 14px 0; background: linear-gradient(115deg, var(--ticket-dark), var(--ticket)); border: 1px solid var(--ticket-edge); padding: 12px 14px; color: var(--ticket-light); box-shadow: 3px 3px #150d09; }
.claim-ticket small, .claim-code span { font: 10px var(--mono); }
.claim-ticket h3 { font: bold italic 24px var(--book); margin: 4px 0; }
.claim-ticket p { margin: 3px 0 10px; }
.claim-code { border: 1px dashed var(--ticket-edge); padding: 5px 8px; display: flex; flex-wrap: wrap; gap: 7px 14px; align-items: center; margin-bottom: 5px; }
.claim-code code { font: bold 13px var(--mono); user-select: all; }
.booking-button { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mixer { display: grid; gap: 7px; background: #26291f; border: 2px outset #6a674d; padding: 14px; }
.mixer label { font: 12px var(--mono); color: #e1deb4; }
.mixer label output { float: right; color: #d4d99a; }
.mixer input { accent-color: #b9a16d; }
.mixer input[type="range"] { width: 100%; margin: 0 0 7px; }
.mixer .sound-power { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px dashed #827957; }
.prop-content .track-readout { font: 12px var(--mono); color: #d9bd84; }
.tablet-header>strong { font: bold 19px/.85 var(--book); color: #e29270; }
.tablet-header>strong small { font: 8px var(--mono); color: #e6c496; }

.industrial-panel, .theatre-panel {
  padding: 12px;
  border: 4px ridge #6c775c;
  background: repeating-linear-gradient(0deg, #3d574c00 0 2px, #131e1840 3px 4px), linear-gradient(127deg, #495d52, #2b3831 60%, #35493e);
  box-shadow: 4px 5px #160d09;
}
.theatre-panel {
  border-color: #a1794e;
  background: repeating-linear-gradient(5deg, #4e2d2200 0 2px, #190f103d 3px 4px), linear-gradient(130deg, #573a2f, #3c2825 60%, #512c25);
}
.industrial-panel .mechanism-button { background: linear-gradient(#52675b, #384942); border-color: #8f997c; }
.receiver-screen {
  position: relative;
  padding: 7px 10px 0;
  border: 3px inset #778367;
  border-radius: 12px / 8px;
  background: repeating-linear-gradient(0deg, #00000021 0 1px, transparent 1px 3px), #18291d;
  color: #bbe8a8;
  font: 10px var(--mono);
}
.receiver-screen strong { display: block; font: bold 29px/1 var(--mono); }
.receiver-screen svg { display: block; width: 100%; height: 32px; }
.receiver-screen path { stroke: #ace4a5; fill: none; stroke-width: 2; filter: drop-shadow(0 0 3px #8bf27a); }
.signal-records { margin: 8px 0; font-family: var(--mono); color: #d7e1cc; }
.signal-records table { width: 100%; border-collapse: collapse; text-align: center; font-size: 12px; }
.signal-records caption { padding: 4px 0; text-align: left; font-size: 11px; color: #f2d3a6; }
.signal-records td, .signal-records th { padding: 3px; border: 1px solid #657665; }
.signal-records th { font-weight: normal; background: #202e28; }
.signal-records button { border: 1px outset #8d9e83; background: #3d5848; color: #eff4d9; padding: 4px 10px; }
.signal-records button[aria-pressed="true"] { background: #b4c486; color: #243325; border-style: inset; }
.prop-controls { display: flex; gap: 7px; flex-wrap: wrap; }
.tank-rack { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.tank {
  display: grid;
  justify-items: center;
  align-items: end;
  padding: 5px 4px;
  gap: 5px;
  border: 1px solid #829280;
  background: #273c34;
  color: #dce6d0;
  text-align: center;
}
.tank:hover, .tank.source, .tank.destination { border-color: #f3d68b; }
.tank.source { background: #4c533a; }
.tank.destination { background: #355e4e; }
.tank small { font: 9px var(--mono); }
.tank-glass {
  position: relative;
  width: 80%;
  height: clamp(68px, 20vw, 119px);
  overflow: hidden;
  border: 3px ridge #b0a882;
  border-radius: 11px / 5px;
  background: #162b25;
  box-shadow: inset 0 0 5px #080f0b;
}
.tank-glass::after { content: ""; position: absolute; inset: 3px auto 3px 5px; width: 3px; background: #dcf5cc30; }
.tank-glass .liquid { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(#b5dbc4, #55a998 6%, #226d63); transition: height .35s ease; }
.tank-glass strong { position: absolute; bottom: 7px; left: 0; right: 0; color: #fff3c3; text-shadow: 1px 1px #09241c; font: bold 18px var(--mono); }
.tank-marks { position: absolute; inset: 5px 5px 6px auto; width: 6px; background: repeating-linear-gradient(0deg, transparent 0 7px, #d3e4b5a3 8px 9px); }
.pipe-line { margin: 8px 0; padding: 6px 7px; background: #203129; border: 1px inset #677e6c; color: #c5dfa7; font: 10px var(--mono); }
.cue-slots, .reel-tray { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.cue-slot, .reel { min-width: 0; background: #34211a; border: 1px inset #9d7652; padding: 4px 2px; display: grid; justify-items: center; text-align: center; color: #f2d4a1; }
.cue-slot { min-height: 68px; border-style: dashed; }
.cue-slot.filled { border: 1px solid #c58e64; background: #573526; }
.cue-slot i { font: 21px var(--book); }
.cue-slot b, .cue-slot small, .reel small { font: 9px var(--mono); }
.reel-tray { margin: 9px 0 12px; }
.reel { cursor: grab; background: #56382b; border-style: outset; }
.reel i { border-radius: 50%; border: 2px ridge #b18962; color: #f0c78d; width: 33px; height: 33px; line-height: 28px; margin: 2px; background: radial-gradient(#ad8556, #503923 75%); font-style: normal; }
.reel span { font: bold 12px var(--book); }
.reel.used { opacity: .61; }
.cue-slot:hover, .reel:hover { border-color: #edc384; }
.patch-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; justify-content: space-between; font: 10px var(--mono); color: #e5bc82; }
.patch-wrap {
  --patch-size: min(62px, 15vw);
  display: grid;
  grid-template-columns: minmax(21px, auto) minmax(0, max-content) minmax(21px, auto);
  grid-template-rows: repeat(4, var(--patch-size));
  justify-content: center;
  align-items: center;
  column-gap: 2px;
  margin: 11px 0;
}
.patch-board { grid-column: 2; grid-row: 1 / 5; display: grid; grid-template-columns: repeat(4,var(--patch-size)); }
.port-input, .port-output { grid-row: 2; font: 9px var(--mono); color: #f2cf91; }
.port-input { grid-column: 1; text-align: right; }
.port-output { grid-column: 3; }
.patch-tile { width: var(--patch-size); height: var(--patch-size); padding: 0; border: 2px outset #886646; background: radial-gradient(#6e5035, #443024 77%); }
.patch-tile svg { width: 100%; height: 100%; display: block; }
.patch-tile path { stroke: #ac8452; fill: none; stroke-width: 7; stroke-linecap: square; }
.patch-tile circle { fill: #d3a569; stroke: #775234; stroke-width: 1; }
.patch-tile.powered path { stroke: #ffd080; filter: drop-shadow(0 0 2px #e18e33); }
.patch-tile.powered circle { fill: #fff5bb; }
.patch-tile:hover { border-color: #d2aa70; }
.keypad-panel form { width: min(250px,100%); margin: auto; display: grid; gap: 7px; }
.keypad-panel label { font: 11px var(--mono); color: #e2c396; }
.keypad-panel input { min-width: 0; width: 100%; padding: 5px; border: 3px inset #797356; background: #1a2419; text-align: center; font: bold 28px var(--mono); color: #cee6a9; letter-spacing: .12em; }
.number-pad { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; }
.number-pad button { min-height: 33px; font: 13px var(--mono); border: 2px outset #827456; background: #514b39; }
.number-pad button:active { border-style: inset; }
.film-card { border: 6px solid #1b1512; padding: 12px 8px; background: #e0c696; color: #322317; box-shadow: inset 0 0 17px #906539, 3px 4px #110b07; }
.film-card>span { display: block; text-align: center; font: 9px var(--mono); letter-spacing: .045em; }
.film-windows { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; margin: 10px 0; }
.film-windows>div { padding: 4px 0; display: grid; justify-items: center; border: 2px solid #70502f; }
.film-windows small { font: 8px var(--mono); }
.film-windows b { font: bold 25px var(--book); }
.film-card blockquote { font-style: italic; text-align: center; }

@media (max-width: 900px) {
  .cabinet { width: calc(100% - 28px); padding-inline: 9px; }
  .play-deck { grid-template-columns: minmax(0,1fr) 198px; gap: 5px; }
  .operator { padding: 9px 7px; gap: 8px; }
  .lobby-panel p { font-size: 12px; margin-bottom: 8px; }
  .room-ticket.compact { min-height: 50px; }
  .compact .ticket-copy b { font-size: 13px; }
}
@media (max-width: 650px) {
  .cabinet { width: calc(100% - 16px); padding: 5px 5px 2px; margin: 9px auto; }
  .cabinet-rail { padding: 0 4px 4px; min-height: 43px; }
  .rail-title { font-size: 12px; }
  .hardware-button { padding: 6px; min-height: 32px; font-size: 9px; }
  .house-mark svg { width: 21px; height: 23px; }
  .house-mark { padding: 2px 5px; }
  .house-mark b { font-size: 10px; }
  .house-mark small { font-size: 7px; }
  .title-stage { min-height: 324px; }
  .title-art { inset: 0; }
  .title-stage::after { background: linear-gradient(90deg,#110b08f7 0%,#110b08b5 40%,#140c0740 72%,transparent),linear-gradient(0deg,#120d0aaf,transparent 30%); }
  .title-art img { object-position: 69% 50%; }
  .title-copy { padding: 24px 0 14px 14px; }
  .title-copy h1 { font-size: clamp(70px, 16vw, 98px); }
  .title-copy p { margin: 13px 0; font-size: 16px; }
  .title-presents { font-size: 8px; }
  .title-links { margin-top: 3px; gap: 10px; font-size: 13px; }
  .start-lever { min-height: 40px; font-size: 16px; gap: 14px; }
  .print-stamp { display: none; }
  .title-tickets { grid-template-columns: 1fr; padding: 7px 0; gap: 5px; }
  .ticket-ribbon { display: flex; justify-content: space-between; border: 0; padding: 3px; }
  .ticket-ribbon i { display: none; }
  .title-tickets .ticket-list { grid-template-columns: 1fr; gap: 5px; }
  .title-tickets .room-ticket { min-height: 55px; padding-block: 5px; }
  .title-tickets .ticket-copy { gap: 1px; }
  .title-tickets .ticket-copy b { font-size: 16px; }
  .ticket-copy>span { font-size: 11px; }
  .play-deck { display: contents; }
  .adventure { display: grid; gap: 4px; }
  .view-deck { padding: 0 3px 2px; }
  .view-label { padding: 3px 4px; }
  .view-label h2 { font-size: 19px; }
  .view-label>span { font-size: 8px; }
  .scene-recess { border-width: 3px; }
  .command-strip { font-size: 10px; min-height: 27px; }
  .world-feedback { bottom: 34px; font-size: 10px; max-width: calc(100% - 25px); }
  .operator { grid-row: 3; }
  .operator-links { grid-template-columns: repeat(auto-fit,minmax(92px,1fr)); }
  .operator-links button { font-size: 10px; }
  .lobby-panel h2 { margin: 2px 0 4px; font-size: 19px; }
  .lobby-tickets { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; }
  .lobby-tickets .room-ticket { grid-template-columns: minmax(0,1fr); padding: 5px; gap: 0; }
  .lobby-tickets .ticket-number, .lobby-tickets .room-ticket i, .lobby-tickets .room-ticket::before, .lobby-tickets .room-ticket::after { display: none; }
  .lobby-tickets .ticket-copy small { font-size: 8px; letter-spacing: .01em; }
  .room-panel { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 6px; align-items: start; }
  .operator-tv { grid-row: 1 / 4; padding: 4px; }
  .operator-glass { min-height: 74px; padding: 4px 6px; }
  .operator-glass strong { font-size: 22px; }
  .operator-glass p { font-size: 9px; }
  .tv-dial { width: 25px; height: 23px; margin: 2px 1px 0; }
  .radio-key { margin: 0; padding: 4px; min-height: 34px; }
  .quest-steps { margin-top: 5px; gap: 2px; }
  .quest-steps li { font-size: 11px; gap: 4px; }
  .cashout-key { grid-column: 1/-1; }
  .console { grid-row: 2; grid-template-columns: minmax(0,1fr); gap: 3px; padding: 0 0 3px; margin: 0; }
  .verbs { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 3px; }
  .verbs button { min-height: 33px; padding: 3px; font-size: 14px; text-align: center; }
  .verbs button span { font-size: 12px; min-width: 11px; }
  .pockets { grid-template-columns: 49px minmax(0,1fr); }
  .inventory-title span { font-size: 9px; }
  .inventory-title small { font-size: 7px; }
  .inventory-slots { grid-auto-columns: minmax(45px,61px); gap: 2px; padding-left: 3px; }
  .pocket-slot { min-height: 53px; font-size: 8px; }
  .pocket-slot canvas { width: 40px; height: 36px; }
  .cabinet-foot { font-size: 7px; min-height: 30px; gap: 5px; padding-inline: 3px; }
  .pin-caption { font-size: 9px; }
  .pin-mark { min-width: 13px; height: 13px; font-size: 9px; }
  .signal-records table { font-size: 10px; }
  .signal-records button { padding: 3px 6px; }
}
@media (max-width: 370px) {
  .cabinet[data-scene="title"] .rail-title { display: none; }
  .prop-content { padding-inline: 13px; }
  .reel span, .cue-slot b { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-fade.arrival, .operator-glass.receiving { animation: none; }
  .tank-glass .liquid { transition: none; }
}

.desk-scribble {
  position: relative;
  margin: 22px 9px 6px;
  padding: 13px 10px 8px;
  background: repeating-linear-gradient(0deg,#dec298 0 16px,#bba480 17px);
  color: #423025;
  box-shadow: 3px 4px #18110c;
  transform: rotate(-3deg);
  font: italic 16px/1.1 var(--book);
}
.desk-scribble::before {
  content: "";
  position: absolute;
  left: 43%;
  top: -5px;
  width: 24px;
  height: 10px;
  background: #b88c5cbd;
  transform: rotate(8deg);
}
.desk-scribble i { display: block; text-align: right; margin-top: 4px; font-size: 14px; }
@media (max-width: 650px) { .desk-scribble { display: none; } }