:root {
  color-scheme: dark;
  --ink: #f5e7c8;
  --muted: #b9a77f;
  --bg: #121018;
  --card: #211b27;
  --line: #4a3a42;
  --amber: #f0b84a;
  --moss: #73a05c;
  --red: #d36b55;
  --blue: #6a8ec7;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, #34233a, var(--bg) 48rem);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.shell { width: min(1060px, calc(100vw - 24px)); margin: 0 auto; padding: 24px 0 48px; }
.card { background: rgba(33,27,39,.94); border: 2px solid var(--line); box-shadow: 0 12px 0 rgba(0,0,0,.22); padding: 18px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.2rem, 7vw, 5rem); margin: .1em 0; letter-spacing: -.08em; }
.eyebrow, .credit { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.dek { max-width: 760px; font-size: 1.05rem; line-height: 1.6; }
.topline { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: start; }
.room-name { margin: 0; color: var(--amber); font-weight: 800; font-size: 1.15rem; }
.room-note { margin: .35rem 0 1rem; color: var(--muted); max-width: 680px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.chips span { border: 1px solid var(--line); background: #17131c; color: var(--ink); padding: 7px 9px; font-size: .78rem; }
.quiet-until-move { display: none; }
.board {
  --cell: min(42px, calc((100vw - 64px) / 18));
  display: grid;
  grid-template-columns: repeat(18, var(--cell));
  grid-template-rows: repeat(10, var(--cell));
  width: calc(var(--cell) * 18);
  border: 4px solid #0e0b12;
  background: #111;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin: 0 auto;
  outline: 2px solid var(--line);
}
.tile { width: var(--cell); height: var(--cell); image-rendering: pixelated; position: relative; }
.floor { background: #3a2d34; box-shadow: inset 0 6px #52414a, inset 0 -6px #1d161e; }
.wall { background: #2a2230; box-shadow: inset 6px 0 #4c3d52, inset -6px 0 #15111a; }
.air { background: #17131c; }
.scar { background: #231b25; box-shadow: inset 0 0 0 6px #342a33; }
.ledge { background: #6b4b2e; box-shadow: inset 0 6px var(--amber), inset 0 -6px #2b1f1f; }
.hinge { background: #3a293f; }
.hinge::after { content: ''; position: absolute; inset: 25%; background: var(--moss); box-shadow: 0 0 0 5px #2f5f42; }
.exit { background: #1d2638; box-shadow: inset 0 0 0 8px var(--blue); }
.sealed { background: #211923; box-shadow: inset 0 0 0 8px #514154, inset 0 0 0 14px #15111a; }
.loop { background: #172433; box-shadow: inset 0 0 0 7px var(--blue), inset 0 0 0 14px #73a05c; }
.hazard { background: #3b1c23; box-shadow: inset 0 0 0 7px var(--red); }
.returned .air { background: #171a22; }
.returned .floor { background: #29383a; box-shadow: inset 0 6px #48635c, inset 0 -6px #151c20; }
.returned .wall { background: #202a35; box-shadow: inset 6px 0 #40576a, inset -6px 0 #111820; }
.returned .scar { background: #22323a; box-shadow: inset 0 0 0 6px #39555d; }
.player::after {
  content: '';
  position: absolute;
  left: 28%; top: 18%; width: 44%; height: 62%;
  background: #e7d5aa;
  box-shadow: 0 8px #7e5343, 8px 0 #f5e7c8, -8px 14px #38232a;
  image-rendering: pixelated;
}
.has-ability .player::after {
  top: 12%; height: 68%;
  background: #f0b84a;
  box-shadow: -8px 8px #f5e7c8, 8px 8px #73a05c, 0 22px #5b3a2f;
}
.controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
button { font: inherit; color: var(--ink); background: #33263b; border: 2px solid var(--line); padding: 10px 14px; cursor: pointer; }
button:hover, button:focus { border-color: var(--amber); outline: none; }
button:disabled, button.locked-first { color: #7f725f; border-color: #332b33; background: #211b27; cursor: not-allowed; opacity: .72; }
.help, .notes li { color: var(--muted); line-height: 1.55; }
.log { min-height: 6.5rem; white-space: pre-wrap; background: #120f16; border: 1px solid var(--line); padding: 12px; color: #d9c9a6; }
.receipt-button { display: block; margin-left: auto; }
.receipt-button.quiet-until-move { display: none; }
strong { color: var(--ink); }