.room-mystery {
  --mystery-ink: #18241f;
  --mystery-paper: #f6efd9;
  --mystery-paper-deep: #dfd2b2;
  --mystery-blue: #175e76;
  --mystery-blue-light: #9dd6dd;
  --mystery-red: #ad4438;
  --mystery-yellow: #e7bc50;
  --mystery-green: #2f6546;
  width: 100%;
  overflow: hidden;
  color: var(--mystery-ink);
  border: 2px solid var(--mystery-ink);
  background: var(--mystery-paper);
}

.room-mystery[hidden],
.room-mystery [hidden] { display: none !important; }

.room-mystery-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  min-height: 264px;
  padding: clamp(30px, 5vw, 64px);
  align-items: end;
  overflow: hidden;
  color: #f9f2de;
  background:
    linear-gradient(118deg, transparent 0 57%, rgb(255 255 255 / 7%) 57.2% 58%, transparent 58.2%),
    radial-gradient(circle at 78% 24%, rgb(231 188 80 / 12%) 0 3px, transparent 4px),
    #173f4d;
}

.room-mystery-heading::before,
.room-mystery-heading::after {
  position: absolute;
  border: 2px dashed rgb(157 214 221 / 32%);
  content: "";
  pointer-events: none;
}

.room-mystery-heading::before {
  top: 42px;
  right: 21%;
  width: 210px;
  border-width: 2px 0 0;
  transform: rotate(-11deg);
}

.room-mystery-heading::after {
  top: 30px;
  right: 17%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.room-mystery-heading > * { position: relative; z-index: 1; }

.room-mystery-kicker,
.room-mystery-prior-shelf p,
.room-mystery-map header p,
.room-mystery-step > p,
.room-mystery-result-copy > p:first-child,
.room-mystery-waiting > div > p:first-child,
.room-mystery-footer {
  margin: 0;
  font: 850 0.66rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.room-mystery-kicker { color: #bde1e2; }
.room-mystery-kicker span {
  display: inline-grid;
  width: 33px;
  height: 33px;
  margin-right: 9px;
  place-items: center;
  border: 2px solid currentcolor;
  border-radius: 50%;
}

.room-mystery-heading h1 {
  max-width: 870px;
  margin: 15px 0 17px;
  color: #fff9e8;
  font-size: clamp(2.8rem, 7vw, 6.3rem);
  letter-spacing: -0.078em;
  line-height: 0.88;
  text-wrap: balance;
}

.room-mystery-heading > div:first-child > p:last-child {
  max-width: 660px;
  margin: 0;
  color: #d5e7e4;
  font-size: clamp(0.94rem, 1.8vw, 1.15rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.room-mystery-case-tab {
  display: grid;
  width: 142px;
  min-height: 154px;
  padding: 17px;
  align-content: space-between;
  border: 2px solid #f9f2de;
  box-shadow: 8px 8px 0 rgb(0 0 0 / 16%);
  color: var(--mystery-ink);
  background: var(--mystery-yellow);
  transform: rotate(2deg);
}

.room-mystery-case-tab span,
.room-mystery-case-tab small {
  font: 900 0.61rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
}

.room-mystery-case-tab strong { font-size: 1.25rem; letter-spacing: -0.045em; }

.room-mystery-prior-shelf {
  display: grid;
  grid-template-columns: minmax(190px, 0.58fr) minmax(0, 1.42fr);
  gap: 24px 36px;
  padding: 22px clamp(24px, 5vw, 64px);
  align-items: center;
  border-block: 2px solid var(--mystery-ink);
  background: #e9ddbe;
}

.room-mystery-prior-shelf p { color: #6b6453; }
.room-mystery-prior-shelf h2 {
  margin: 5px 0 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.room-mystery-prior-shelf ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.room-mystery-prior-shelf li {
  display: grid;
  min-width: 0;
  min-height: 72px;
  padding: 11px 13px;
  align-content: space-between;
  border: 1px solid #746b57;
  background: #fff9e8;
}

.room-mystery-prior-shelf li span {
  color: #746b57;
  font: 800 0.58rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.room-mystery-prior-shelf li strong {
  overflow-wrap: anywhere;
  font-size: 0.76rem;
  line-height: 1.2;
}

.room-mystery-case {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, 0.7fr);
  min-width: 0;
}

.room-mystery[data-mystery-state="revealed"] .room-mystery-case { grid-template-columns: minmax(0, 1fr); }
.room-mystery[data-mystery-state="revealed"] .room-mystery-map { border-right: 0; }

.room-mystery-map {
  min-width: 0;
  padding: clamp(25px, 4vw, 48px);
  border-right: 2px solid var(--mystery-ink);
  background: #ede3c9;
}

.room-mystery-map header {
  display: flex;
  gap: 20px;
  margin-bottom: 22px;
  align-items: end;
  justify-content: space-between;
}

.room-mystery-map header p { color: #6b6453; }
.room-mystery-map h2,
.room-mystery-step h2,
.room-mystery-waiting h2,
.room-mystery-result h2,
.room-mystery-error h2 { margin: 0; letter-spacing: -0.045em; line-height: 1.05; }
.room-mystery-map h2 { max-width: 380px; font-size: clamp(1.45rem, 3vw, 2.25rem); text-align: right; }

.room-mystery-map-paper {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 2px solid var(--mystery-ink);
  box-shadow: 9px 10px 0 rgb(24 36 31 / 10%);
  background: #f9f2de;
  isolation: isolate;
}

.room-mystery-map-paper::before,
.room-mystery-map-paper::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.room-mystery-map-paper::before {
  inset: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgb(23 94 118 / 14%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(23 94 118 / 14%) 1px, transparent 1px);
  background-size: 36px 36px;
}

.room-mystery-map-paper::after {
  top: -16px;
  right: 22%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mystery-red);
  box-shadow: 0 1px 0 #fff inset;
}

.room-mystery-grid { position: absolute; inset: 17px; border: 1px dashed rgb(24 36 31 / 25%); }
.room-mystery-crease {
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 53%;
  width: 1px;
  color: #766f60;
  border-left: 2px dashed #9d927b;
  font: 800 0.55rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.07em;
  writing-mode: vertical-rl;
}

.room-mystery-fixture {
  position: absolute;
  color: var(--mystery-ink);
}

.room-mystery-fixture strong {
  display: block;
  margin-top: 6px;
  font: 850 0.57rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.05em;
}

.room-mystery-fixture.is-shelf {
  top: 12%;
  left: 7%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 33%;
  min-width: 132px;
  padding: 12px 12px 9px;
  border: 3px solid var(--mystery-green);
  background: #d6ddbd;
}

.room-mystery-fixture.is-shelf span { height: 40px; border-bottom: 5px solid var(--mystery-green); }
.room-mystery-fixture.is-shelf span + span { border-left: 2px solid var(--mystery-green); }
.room-mystery-fixture.is-shelf strong { grid-column: 1 / -1; }

.room-mystery-fixture.is-chair { right: 10%; bottom: 12%; width: 108px; height: 115px; }
.room-mystery-fixture.is-chair span {
  position: absolute;
  inset: 18px 20px 24px;
  border: 4px solid var(--mystery-red);
  border-radius: 18px 18px 5px 5px;
  background: #edc1a7;
}
.room-mystery-fixture.is-chair i { position: absolute; bottom: 6px; width: 4px; height: 30px; background: var(--mystery-red); }
.room-mystery-fixture.is-chair i:first-of-type { left: 25px; transform: rotate(5deg); }
.room-mystery-fixture.is-chair i:last-of-type { right: 25px; transform: rotate(-5deg); }
.room-mystery-fixture.is-chair strong { position: absolute; right: 0; bottom: -12px; left: 0; text-align: center; }

.room-mystery-fixture.is-lamp { left: 17%; bottom: 14%; width: 90px; height: 110px; text-align: center; }
.room-mystery-fixture.is-lamp i {
  display: block;
  width: 58px;
  height: 36px;
  margin: 0 auto;
  border-radius: 50% 50% 8px 8px;
  background: var(--mystery-yellow);
  transform: rotate(-8deg);
}
.room-mystery-fixture.is-lamp span { display: block; width: 4px; height: 47px; margin: -2px auto 0; background: var(--mystery-ink); }

.room-mystery-fixture.is-slot {
  top: 12%;
  right: 8%;
  display: grid;
  width: 29%;
  min-width: 115px;
  height: 55px;
  place-items: center;
  border: 4px solid var(--mystery-blue);
  background: #d1e8e4;
}
.room-mystery-fixture.is-slot span { font: 900 0.7rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.1em; }
.room-mystery-fixture.is-slot strong { position: absolute; top: 58px; }

.room-mystery-thread {
  position: absolute;
  top: 31%;
  left: 31%;
  width: 45%;
  height: 34%;
  opacity: 0;
  border-top: 4px solid var(--mystery-blue);
  border-right: 4px solid var(--mystery-blue);
  border-radius: 0 80% 0 0;
  transform: rotate(8deg) scaleX(0.25);
  transform-origin: left top;
  transition: opacity 180ms ease, transform 520ms cubic-bezier(.2, .8, .2, 1);
}

.room-mystery-thread i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--mystery-blue);
  border-radius: 50%;
  background: #f9f2de;
}
.room-mystery-thread i:nth-child(1) { top: -6px; left: -5px; }
.room-mystery-thread i:nth-child(2) { top: -6px; left: 48%; }
.room-mystery-thread i:nth-child(3) { right: -6px; bottom: -5px; }

.room-mystery-map-paper[data-clue-pinned="true"] .room-mystery-thread,
.room-mystery-map-paper[data-changed-fixture="mail-slot"] .room-mystery-thread { opacity: 0.82; transform: rotate(8deg) scaleX(1); }

.room-mystery-clue-pin {
  position: absolute;
  z-index: 3;
  top: 43%;
  left: 42%;
  width: min(190px, 42%);
  padding: 17px 14px 13px;
  border: 1px solid #8a7956;
  box-shadow: 5px 7px 0 rgb(24 36 31 / 12%);
  background: #fff1a9;
  transform: rotate(-3deg);
}
.room-mystery-clue-pin > span {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 17px;
  height: 17px;
  border: 3px solid #7b2828;
  border-radius: 50%;
  background: var(--mystery-red);
  transform: translateX(-50%);
}
.room-mystery-clue-pin strong { font: 900 0.59rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; }
.room-mystery-clue-pin p { margin: 7px 0 0; font: 750 0.75rem/1.35 Inter, ui-sans-serif, sans-serif; }

.room-mystery-dust-outline {
  position: absolute;
  z-index: 2;
  top: 12%;
  right: 8%;
  display: grid;
  width: 29%;
  min-width: 115px;
  height: 55px;
  place-items: center;
  border: 3px dashed #998c73;
  color: #746b57;
  background: rgb(223 210 178 / 35%);
  transform: rotate(-1deg);
}
.room-mystery-dust-outline span { font: 850 0.53rem/1.25 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.04em; }

.room-mystery-changed-fixture {
  position: absolute;
  z-index: 4;
  top: 59%;
  right: 4%;
  display: grid;
  width: min(240px, 42%);
  min-height: 92px;
  padding: 16px 18px;
  align-content: center;
  border: 4px solid var(--mystery-blue);
  box-shadow: 8px 9px 0 rgb(23 94 118 / 18%);
  color: #f9f2de;
  background: var(--mystery-blue);
  transform: rotate(2deg);
  animation: mystery-fixture-arrives 620ms cubic-bezier(.15, .8, .2, 1) both;
}
.room-mystery-changed-fixture > span { font: 900 0.62rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.12em; }
.room-mystery-changed-fixture > i { width: 78%; height: 4px; margin: 9px 0; background: var(--mystery-yellow); }
.room-mystery-changed-fixture > strong { font-size: 0.78rem; line-height: 1.25; }

.room-mystery-map-paper[data-changed-fixture="mail-slot"] .room-mystery-fixture.is-slot { visibility: hidden; }
.room-mystery-map-caption { margin: 22px 0 0; color: #5f594c; font-size: 0.78rem; line-height: 1.5; }

.room-mystery-desk { min-width: 0; padding: clamp(25px, 4vw, 42px); background: #fffaf0; }
.room-mystery-step + .room-mystery-step { margin-top: 30px; padding-top: 27px; border-top: 1px solid #c8bda4; }
.room-mystery-step > p { margin-bottom: 8px; color: #746b57; }
.room-mystery-step > p span {
  display: inline-grid;
  width: 23px;
  height: 23px;
  margin-right: 7px;
  place-items: center;
  border-radius: 50%;
  color: #fffaf0;
  background: var(--mystery-ink);
}
.room-mystery-step h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.room-mystery-step[data-step-state="locked"] { opacity: 0.58; }

.room-mystery-clues,
.room-mystery-predictions { display: grid; gap: 9px; margin-top: 17px; }
.room-mystery-clues button,
.room-mystery-predictions button,
.room-mystery-save {
  min-width: 0;
  min-height: 48px;
  border: 2px solid var(--mystery-ink);
  border-radius: 0;
  color: var(--mystery-ink);
  background: #f9f2de;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.room-mystery-clues button { position: relative; display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: 2px 11px; padding: 13px 14px; }
.room-mystery-clues button > span {
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border: 2px solid var(--mystery-blue);
  border-radius: 50%;
  background: transparent;
}
.room-mystery-clues strong,
.room-mystery-predictions strong { font-size: 0.8rem; line-height: 1.25; }
.room-mystery-clues small,
.room-mystery-predictions small { color: #655e50; font-size: 0.68rem; line-height: 1.4; }
.room-mystery-clues button[aria-pressed="true"] { border-color: var(--mystery-blue); background: #d8ece8; transform: rotate(-0.5deg); }
.room-mystery-clues button[aria-pressed="true"] > span { box-shadow: 0 0 0 4px #d8ece8 inset; background: var(--mystery-blue); }

.room-mystery-predictions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.room-mystery-predictions button { display: grid; gap: 4px; min-height: 80px; padding: 13px 11px; align-content: center; text-align: center; }
.room-mystery-predictions button[aria-pressed="true"] { color: #fffaf0; background: var(--mystery-blue); }
.room-mystery-predictions button[aria-pressed="true"] small { color: #d9eeee; }
.room-mystery-clues button:hover:not(:disabled),
.room-mystery-predictions button:hover:not(:disabled) { box-shadow: 4px 4px 0 var(--mystery-ink); transform: translate(-2px, -2px); }
.room-mystery-clues button:disabled,
.room-mystery-predictions button:disabled,
.room-mystery-save:disabled { cursor: not-allowed; opacity: 0.54; }

.room-mystery-save {
  display: grid;
  width: 100%;
  min-height: 76px;
  margin-top: 30px;
  padding: 15px 18px;
  align-content: center;
  border-color: var(--mystery-red);
  color: #fffaf0;
  background: var(--mystery-red);
}
.room-mystery-save span { font-size: 0.84rem; font-weight: 900; }
.room-mystery-save small { margin-top: 4px; color: #f5d9cb; font-size: 0.67rem; }
.room-mystery-save:hover:not(:disabled) { box-shadow: 6px 6px 0 #6f2924; transform: translate(-2px, -2px); }
.room-mystery-status { min-height: 2.7em; margin: 12px 0 0; color: #655e50; font-size: 0.73rem; line-height: 1.45; }

.room-mystery-waiting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  margin-top: 25px;
  padding: 19px;
  border: 2px dashed var(--mystery-blue);
  background: #d8ece8;
}
.room-mystery-waiting > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid currentcolor;
  border-radius: 50%;
  font: 900 0.9rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.room-mystery-waiting > div > p:first-child { color: var(--mystery-blue); }
.room-mystery-waiting h2 { margin-top: 6px; font-size: 1.2rem; }
.room-mystery-waiting > div > p:last-child { margin: 8px 0 0; color: #455b55; font-size: 0.75rem; line-height: 1.45; }

.room-mystery-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 4vw, 46px);
  margin: 0;
  padding: clamp(28px, 5vw, 58px) clamp(24px, 5vw, 64px);
  align-items: center;
  border-top: 2px solid var(--mystery-ink);
  color: #f9f2de;
  background:
    linear-gradient(126deg, transparent 0 68%, rgb(255 255 255 / 6%) 68.2% 69%, transparent 69.2%),
    var(--mystery-green);
}
.room-mystery-result:focus-visible,
.room-mystery-heading h1:focus-visible,
.room-mystery-waiting:focus-visible,
.room-mystery-changed-fixture:focus-visible {
  outline: 4px solid var(--mystery-yellow);
  outline-offset: -8px;
}
.room-mystery-result[data-prediction-result="surprise"] { background-color: var(--mystery-blue); }
.room-mystery-result-stamp {
  display: grid;
  width: clamp(112px, 16vw, 170px);
  aspect-ratio: 1;
  place-content: center;
  border: 4px double currentcolor;
  border-radius: 50%;
  text-align: center;
  transform: rotate(-8deg);
}
.room-mystery-result-stamp span { font: 850 0.63rem/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.13em; }
.room-mystery-result-stamp strong { margin-top: 5px; font-size: clamp(0.9rem, 2vw, 1.25rem); letter-spacing: -0.03em; }
.room-mystery-result-copy > p:first-child { color: #cce4d3; }
.room-mystery-result h2 { max-width: 710px; margin-top: 8px; font-size: clamp(2rem, 5vw, 4.3rem); text-wrap: balance; }
.room-mystery-result-copy > p:nth-child(3) { max-width: 670px; margin: 13px 0 22px; color: #d9e7dd; font-size: 0.9rem; line-height: 1.55; }
.room-mystery-verdict { display: block; font-size: clamp(1rem, 2.2vw, 1.35rem); }
.room-mystery-verdict + span { display: block; margin-top: 5px; color: #d9e7dd; font-size: 0.77rem; line-height: 1.45; }

.room-mystery-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  padding: clamp(24px, 4vw, 44px);
  align-items: center;
  border-top: 2px solid var(--mystery-ink);
  background: #f2d8c8;
}
.room-mystery-error > span { padding: 9px 11px; border: 3px solid var(--mystery-red); color: var(--mystery-red); font: 900 0.64rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; transform: rotate(-4deg); }
.room-mystery-error h2 { font-size: clamp(1.3rem, 3vw, 2rem); }
.room-mystery-error p { margin: 8px 0 0; color: #5c4c43; font-size: 0.79rem; line-height: 1.5; }

.room-mystery-footer {
  display: flex;
  gap: 10px 22px;
  min-height: 62px;
  padding: 16px clamp(24px, 5vw, 64px);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 2px solid var(--mystery-ink);
  color: #f9f2de;
  background: var(--mystery-ink);
}
.room-mystery-footer a { text-underline-offset: 3px; }

.room-mystery button:focus-visible,
.room-mystery a:focus-visible { outline: 4px solid var(--mystery-yellow); outline-offset: 4px; }

@keyframes mystery-fixture-arrives {
  from { opacity: 0; transform: translate(85px, -55px) rotate(8deg); }
  to { opacity: 1; transform: translate(0, 0) rotate(2deg); }
}

@media (max-width: 920px) {
  .room-mystery-case { grid-template-columns: minmax(0, 1fr); }
  .room-mystery-map { border-right: 0; border-bottom: 2px solid var(--mystery-ink); }
  .room-mystery-desk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .room-mystery-step + .room-mystery-step { margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid #c8bda4; }
  .room-mystery-save,
  .room-mystery-status,
  .room-mystery-waiting { grid-column: 1 / -1; }
  .room-mystery-predictions { grid-template-columns: minmax(0, 1fr); }
  .room-mystery-predictions button { min-height: 58px; }
}

@media (max-width: 680px) {
  .room-mystery-heading { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 29px 23px; }
  .room-mystery-heading h1 { font-size: clamp(2.65rem, 14vw, 4.5rem); }
  .room-mystery-case-tab { width: min(100%, 220px); min-height: 86px; grid-template-columns: 1fr auto; gap: 6px 14px; }
  .room-mystery-case-tab small { grid-column: 1 / -1; }
  .room-mystery-prior-shelf { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .room-mystery-prior-shelf ol { grid-template-columns: minmax(0, 1fr); }
  .room-mystery-prior-shelf li { min-height: 58px; }
  .room-mystery-map { padding: 24px 16px 27px; }
  .room-mystery-map header { display: block; }
  .room-mystery-map h2 { margin-top: 6px; text-align: left; }
  .room-mystery-map-paper { min-height: 490px; }
  .room-mystery[data-mystery-state="revealed"] .room-mystery-map-paper { min-height: 610px; }
  .room-mystery-fixture.is-shelf { left: 5%; width: 43%; }
  .room-mystery-fixture.is-slot,
  .room-mystery-dust-outline { right: 5%; width: 39%; }
  .room-mystery-clue-pin { top: 40%; left: 5%; width: 48%; }
  .room-mystery-changed-fixture { top: 61%; right: 5%; width: 58%; }
  .room-mystery-fixture.is-lamp { left: 8%; bottom: 9%; }
  .room-mystery-fixture.is-chair { right: 5%; bottom: 8%; }
  .room-mystery-thread { top: 30%; left: 34%; width: 51%; height: 39%; }
  .room-mystery-desk { display: block; padding: 28px 18px; }
  .room-mystery-step + .room-mystery-step { margin-top: 28px; padding: 25px 0 0; border-top: 1px solid #c8bda4; border-left: 0; }
  .room-mystery-predictions { grid-template-columns: minmax(0, 1fr); }
  .room-mystery-predictions button { grid-template-columns: minmax(0, 1fr) auto; min-height: 54px; text-align: left; }
  .room-mystery-waiting { grid-template-columns: minmax(0, 1fr); }
  .room-mystery-result { grid-template-columns: minmax(0, 1fr); }
  .room-mystery-result-stamp { width: 112px; }
  .room-mystery-error { grid-template-columns: minmax(0, 1fr); }
  .room-mystery-footer { display: grid; align-items: start; }
}

@media (max-width: 390px) {
  .room-mystery-map-paper { min-height: 450px; }
  .room-mystery-fixture.is-shelf { min-width: 112px; }
  .room-mystery-fixture.is-slot,
  .room-mystery-dust-outline { min-width: 100px; }
  .room-mystery-fixture.is-chair { transform: scale(0.86); transform-origin: right bottom; }
  .room-mystery-fixture.is-lamp { transform: scale(0.86); transform-origin: left bottom; }
  .room-mystery-clue-pin p { font-size: 0.67rem; }
  .room-mystery-changed-fixture { min-height: 82px; padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .room-mystery *,
  .room-mystery *::before,
  .room-mystery *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}