:root {
  --paper: #f5eadb;
  --paper-deep: #ead8c0;
  --ink: #554a42;
  --ink-soft: #8b7868;
  --pink: #e5a7a5;
  --wood: #ba8152;
  --sage: #9aab66;
  --cream: #fff8ea;
  --shadow: rgba(91, 66, 48, .24);
  font-family: "KaiTi", "STKaiti", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--cream);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--sage); outline-offset: 4px; }

body { background: var(--cream); }

body.is-locked { overflow: hidden; }

/* A definite viewport height keeps intrinsic artwork from growing the grid. */
html { height: 100%; }
body { height: 100vh; height: 100dvh; min-height: 0; }
.room-app { height: 100%; min-height: 0 !important; grid-template-rows: auto minmax(0, 1fr) auto; }
.scene.is-active { min-height: 0 !important; place-items: center; overflow: hidden; background: var(--cream); }
.scene > .image-stage { flex-shrink: 0; max-width: 100%; max-height: 100%; }

.entry-screen {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 18%, rgba(255,248,234,.62), transparent 38%), repeating-linear-gradient(98deg, rgba(87,65,48,.035) 0 1px, transparent 1px 7px), #c9ae8b;
  padding: clamp(8px, 2.2vw, 28px);
}
.entry-frame { height: min(92vh, 980px); aspect-ratio: 1086 / 1448; max-width: 96vw; position: relative; overflow: hidden; border: 2px solid rgba(85,74,66,.65); box-shadow: 9px 12px 0 rgba(91,66,48,.18); background: var(--paper); }
.entry-frame > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.entry-backdrop { position: absolute; inset: 0; z-index: 0; }
.entry-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 45px rgba(85,74,66,.13); background: repeating-linear-gradient(13deg, transparent 0 5px, rgba(104,86,70,.035) 5px 6px); }
.entry-title { position: absolute; z-index: 2; top: 4%; left: 5%; width: min(310px, 56%); padding: 14px 17px; background: rgba(255,248,234,.88); border: 2px solid rgba(85,74,66,.65); transform: rotate(-.7deg); box-shadow: 4px 5px 0 rgba(85,74,66,.15); }
.entry-title h1 { margin: 2px 0 5px; font-size: clamp(22px, 3.4vh, 38px); line-height: 1.05; }
.entry-title p { margin: 3px 0; }
.door-lock-hotspot { position: absolute; z-index: 4; left: 31%; top: 42%; width: 18%; height: 17%; min-width: 70px; min-height: 86px; border: 0; background: transparent; cursor: pointer; }
.lock-note { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; background: var(--cream); border: 1.5px solid var(--ink); padding: 4px 9px; box-shadow: 2px 3px 0 rgba(85,74,66,.18); font-weight: 700; }

.room-app {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--cream);
  overflow: hidden;
  position: relative;
}
.room-app.is-entering { animation: scene-in .38s ease both; }

.topbar { min-height: 64px; display: flex; align-items: center; gap: 16px; padding: 10px clamp(12px, 2.5vw, 32px); position: relative; z-index: 30; }
.brand, .sound-toggle { border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; }
.brand { font-size: clamp(18px, 2vw, 25px); font-weight: 700; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; font-size: 25px; }
.hint { margin: 0 auto 0 0; color: var(--ink-soft); font-size: 15px; }
.sound-toggle { padding: 7px 11px; border: 1px dashed var(--ink-soft); border-radius: 50% 45% 52% 48%; }

.scene { min-height: 0; display: none; grid-template-columns: minmax(0, 1fr); position: relative; z-index: 1; }
.scene.is-active { display: grid; animation: scene-in .38s ease both; }
.image-stage { min-height: 0; position: relative; overflow: hidden; background: var(--paper-deep); }
.image-stage > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.overview-stage > img { object-fit: cover; }
.paper-wash { position: absolute; inset: 0; box-shadow: inset 0 0 50px rgba(85,74,66,.16); pointer-events: none; }

.map-copy h2 { margin: 2px 0 4px; font-size: clamp(23px, 3vw, 39px); line-height: 1.08; font-weight: 700; }
.map-copy p { margin: 4px 0 0; line-height: 1.65; }
.kicker { font-size: 14px; color: var(--wood); letter-spacing: .08em; }

.hotspot { position: absolute; width: 105px; height: 105px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.hotspot-bed { left: 56%; top: 45%; }
.hotspot-desk { left: 15%; top: 42%; }
.hotspot-chair { right: 8%; bottom: 9%; }
.hotspot-door { left: 1%; top: 34%; }

.detail-scene { grid-template-columns: minmax(0, 1fr); }
.detail-scene .image-stage { min-height: 0; }
.portrait-stage img { object-fit: contain; }

.room-nav { min-height: 70px; display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.8vw, 25px); padding: 8px 16px; position: relative; z-index: 30; overflow-x: auto; }
.nav-item { border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 8px 9px; white-space: nowrap; color: var(--ink-soft); }
.nav-dot { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 44% 56% 48% 52%; background: transparent; }
.nav-item:hover, .nav-item.is-current { color: var(--ink); }
.nav-item.is-current .nav-dot { background: var(--pink); transform: rotate(8deg); }
.map-button { padding-left: clamp(13px, 2vw, 28px); }

.map-dialog { width: min(780px, calc(100vw - 28px)); max-height: calc(100vh - 28px); border: 2px solid var(--ink); padding: 0; background: var(--paper); box-shadow: 10px 12px 0 rgba(85,74,66,.28); overflow: hidden; }
.map-dialog::backdrop { background: rgba(69,52,40,.58); backdrop-filter: blur(3px); }
.dialog-close { position: absolute; z-index: 3; right: 14px; top: 12px; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; background: var(--cream); cursor: pointer; font-size: 26px; line-height: 1; }
.map-copy { padding: 20px 64px 13px 22px; border-bottom: 2px dashed rgba(85,74,66,.35); }
.map-copy h2 { font-size: 28px; }
.map-canvas { position: relative; height: min(68vh, 780px); background: var(--paper-deep); }
.map-canvas img { width: 100%; height: 100%; display: block; object-fit: contain; }
.map-pin { position: absolute; border: 2px solid var(--ink); background: var(--cream); border-radius: 48% 52% 44% 56%; padding: 6px 10px; cursor: pointer; box-shadow: 3px 4px 0 rgba(85,74,66,.18); }
.map-pin:hover { background: #f1c7c5; transform: rotate(-3deg); }
.map-desk { left: 12%; top: 26%; }.map-bed { right: 23%; top: 31%; }.map-chair { right: 13%; bottom: 13%; }.map-door { left: 44%; bottom: 2%; }

.keypad-dialog { width: min(410px, calc(100vw - 24px)); max-height: calc(100vh - 20px); border: 2px solid var(--ink); border-radius: 7px; padding: 0; background: var(--paper); box-shadow: 10px 12px 0 rgba(85,74,66,.28); overflow: auto; }
.keypad-dialog::backdrop { background: rgba(69,52,40,.62); backdrop-filter: blur(5px); }
.keypad-head { padding: 22px 55px 12px 22px; }
.keypad-head h2 { margin: 2px 0 4px; font-size: 28px; }
.keypad-head p { margin: 3px 0; }
.keypad-hint { color: var(--ink-soft); font-size: 14px; }
.code-display { display: block; margin: 4px 22px 6px; padding: 15px; text-align: center; letter-spacing: .35em; font-family: ui-monospace, monospace; font-size: 24px; background: #ded9bc; border: 2px solid var(--ink); border-radius: 6px; }
.keypad-message { min-height: 25px; margin: 0 22px 5px; text-align: center; color: #9b463f; font-weight: 700; }
.painted-keypad-shell { position: relative; width: min(310px, 82vw); aspect-ratio: 2 / 3; margin: 2px auto 18px; }
.painted-keypad-shell > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(5px 8px 5px rgba(55,40,30,.27)); }
.key-grid { position: absolute; left: 30%; width: 40%; top: 24.1%; height: 35.8%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); padding: 0; }
.key-grid button { min-width: 0; min-height: 0; width: 100%; height: 100%; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #3d352f; cursor: pointer; font-family: "KaiTi", "STKaiti", sans-serif; font-size: clamp(15px, 4vw, 21px); font-weight: 800; line-height: 1; text-shadow: 0 1px rgba(255,255,255,.72); }
.key-grid button:hover, .key-grid button:focus-visible { background: rgba(229,167,165,.5); box-shadow: 0 0 0 3px rgba(255,248,234,.72); transform: scale(1.08); }
.key-grid button:active { transform: scale(.92); background: rgba(207,224,147,.7); }
.key-grid .unlock-key { color: #3d4c24; }
.keypad-dialog.is-error { animation: keypad-shake .35s ease; }

@keyframes scene-in { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: scale(1); } }
@keyframes keypad-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px) rotate(-1deg); } 75% { transform: translateX(8px) rotate(1deg); } }

@media (max-width: 820px) {
  body { padding: 0; }
  .room-app { min-height: 100vh; border: 0; box-shadow: none; }
  .hint { display: none; }
  .sound-label { display: none; }
  .scene.is-active { min-height: calc(100vh - 136px); }
  .hotspot { width: 76px; height: 76px; }
  .hotspot-bed { left: 54%; top: 42%; }.hotspot-desk { left: 13%; top: 38%; }.hotspot-chair { right: 6%; bottom: 17%; }.hotspot-door { left: 0; top: 31%; }
  .room-nav { justify-content: flex-start; min-height: 64px; }
  .entry-screen { padding: 0; }
  .entry-frame { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border: 0; box-shadow: none; }
  .entry-frame > img { object-fit: cover; }
  .entry-title { top: 2.5%; }
}

/* Keep artwork and hit targets in the same 4:3 coordinate space at every size. */
.desk-stage { display: grid; align-content: center; }
.desk-frame { position: relative; width: min(100%, calc((100dvh - 215px) * 1.333333)); margin: 0 auto; aspect-ratio: 1448 / 1086; isolation: isolate; }
.desk-background { display: block; width: 100%; height: 100%; object-fit: contain; }
.pegboard-button { position: absolute; left: 26%; top: 1.3%; width: 48%; padding: 0; border: 0; background: transparent; cursor: zoom-in; transform: rotate(-.5deg); transition: filter .2s ease; }
.pegboard-button img { display: block; width: 100%; height: auto; }

.laptop-hotspot { position: absolute; z-index: 3; left: 43.5%; top: 34%; width: 15%; height: 7%; min-height: 44px; border: 0; background: transparent; cursor: pointer; }

.desk-laptop-open { position: absolute; z-index: 2; left: 43.4%; bottom: 59.7%; width: 15.2%; height: auto; pointer-events: none; transform-origin: 50% 92%; animation: laptop-unfold .32s ease-out both; }
.desk-frame.is-laptop-open .laptop-hotspot { top: 24%; height: 17%; }
.desk-caption { margin: 0; padding: 10px 14px; text-align: center; color: var(--ink-soft); background: var(--paper); font-size: 14px; line-height: 1.5; }
.laptop-dialog, .pegboard-dialog { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 9px 12px 0 rgba(85,74,66,.24); max-height: calc(100dvh - 32px); }
.laptop-dialog::backdrop, .pegboard-dialog::backdrop { background: rgba(69,52,40,.6); backdrop-filter: blur(4px); }
.laptop-dialog { width: min(960px,calc(100vw - 24px),calc((100dvh - 100px) * 1.333333)); padding: 0 0 54px; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.laptop-dialog[open] { display: block; animation: laptop-unfold .32s ease-out both; }
.laptop-dialog-art { position: relative; }
.laptop-dialog-art img { display: block; width: 100%; height: auto; }
.laptop-content { position: absolute; left: 20%; top: 15.5%; width: 60%; height: 47%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px; text-align: center; overflow: auto; }
.laptop-content h2 { font-size: clamp(20px,3vw,32px); line-height: 1.4; margin: 10px 0 20px; font-weight: 500; }
.laptop-content > p:last-child { color: #716153; line-height: 1.9; font-size: 16px; margin: 0; }
.laptop-content .kicker { margin: 0; }
.laptop-close-button { display: block; margin: 0 auto; min-height: 44px; padding: 10px 22px; background: var(--cream); border: 1px dashed var(--ink-soft); border-radius: 5px; cursor: pointer; }
.laptop-dialog .dialog-close { right: 6%; top: 1%; }
.laptop-close-button:hover { background: #f3d9c1; }
.pegboard-dialog { width: min(620px,calc(100vw - 28px)); padding: 24px; overflow: auto; }
.pegboard-copy { padding-right: 45px; }
.pegboard-copy h2 { font-size: clamp(21px,3vw,28px); font-weight: 500; margin: 8px 0 18px; }
.pegboard-dialog > img { display: block; max-width: 100%; width: auto; max-height: 65dvh; margin: auto; object-fit: contain; }
.laptop-dialog .dialog-close, .pegboard-dialog .dialog-close { width: 44px; height: 44px; }
@keyframes laptop-unfold { from { opacity: 0; transform: perspective(600px) rotateX(-65deg); } to { opacity: 1; transform: perspective(600px) rotateX(0); } }
@media (max-width: 600px) {
  .laptop-content { padding: 6px; }
  .laptop-content .kicker { font-size: 12px; }
  .laptop-content h2 { font-size: 18px; margin: 6px 0 8px; }
  .laptop-content > p:last-child { font-size: 12px; line-height: 1.6; }
  .desk-caption { font-size: 12px; }
  .laptop-hotspot { top: 32%; height: 12%; }
  .pegboard-dialog { padding: 20px 16px; }
}

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

/* The frame follows the fitted stage so desk overlays stay aligned. */
.desk-stage { grid-template-rows: minmax(0, 1fr) auto; }
.desk-frame { width: 100%; min-height: 0; }
.overview-stage > img { object-fit: contain; }
@media (max-width: 820px) {
  .room-nav { justify-content: center; gap: 0; padding: 6px 2px; }
  .nav-item { gap: 4px; padding: 10px 6px; font-size: 13px; }
  .map-button { padding-left: 8px; }
  .nav-dot { width: 9px; height: 9px; flex-shrink: 0; }
}

.armchair-stage { position: relative; }
.books-hotspot { position:absolute; left:22.5%; top:28%; width:6%; height:9.5%; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; cursor:pointer; }

.books-dialog { width:min(780px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:24px; border:2px solid var(--ink); background:var(--paper); color:var(--ink); }
.books-dialog::backdrop { background:#45342899; backdrop-filter:blur(4px); }
.books-dialog h2 { font-size:23px; padding-right:35px; margin:0 0 18px; font-weight:500; }
.books-picker { display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.books-picker img { width:90px; height:108px; object-fit:contain; }
.book-choices { display:flex; flex-wrap:wrap; gap:8px; }
.book-choices button,.book-navigation button { min-height:44px; padding:8px 12px; border:1px dashed var(--ink-soft); border-radius:4px; color:inherit; background:#fff8ea; cursor:pointer; font:inherit; }
.book-choices button[aria-pressed="true"] { background:#f2d4c8; border-style:solid; }
.book-spread { display:grid; grid-template-columns:1fr 1fr; background:#fff9e9; border:2px solid #b7a28a; border-radius:8px 14px 14px 8px; box-shadow:0 5px 0 #dfceb5; min-height:260px; }
.book-page { position:relative; padding:24px 18px 44px; text-align:center; }
.book-page + .book-page { border-left:1px solid #d2bea3; box-shadow:inset 9px 0 14px -12px #6f5840; }
.book-page > span { position:absolute; bottom:14px; left:0; right:0; font-size:12px; }
.blank-note { color:var(--ink-soft); line-height:1.8; font-size:14px; }
.book-navigation { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:20px; }
.book-navigation button:disabled { opacity:.4; cursor:default; }
@media(max-width:500px) { .books-dialog { padding:18px 12px; } .books-picker { gap:10px; } .books-picker img { width:60px; } .book-choices { gap:6px; } .book-choices button { font-size:12px; padding:6px 8px; } .book-page { padding:18px 10px 40px; } .book-spread { min-height:220px; } }

.bed-stage { position:relative; isolation:isolate; }
.bed-stage > .bed-revealed { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; clip-path:polygon(32% 43%, 48% 44%, 65% 47%, 81% 51%, 94% 63%, 99% 80%, 99% 90%, 73% 87%, 33% 85%, 13% 84%, 14% 65%, 23% 54%); pointer-events:none; transition:opacity 380ms cubic-bezier(.4,0,.2,1); will-change:opacity; }
.bed-stage.is-uncovered > .bed-revealed { opacity:1; }
.bed-quilt-hotspot { position:absolute; left:17%; top:52%; width:75%; height:31%; min-height:44px; border:0; background:transparent; cursor:pointer; z-index:2; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(prefers-reduced-motion:reduce) { .bed-stage > .bed-revealed { transition:none; } }

/* ImageGen open-state painting, restricted to the cabinet area. */
.cabinet-open-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; clip-path:inset(44% 70% 35% 7%); opacity:0; pointer-events:none; transition:opacity 300ms ease; }
.desk-frame.is-cabinet-open .cabinet-open-art { opacity:1; }
.cabinet-hotspot { position:absolute; left:8%; top:47%; width:21%; height:27%; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; cursor:pointer; }

@media(prefers-reduced-motion:reduce) { .cabinet-open-art { transition:none; } }
/* Objects float directly over the room, using the laptop's backdrop treatment. */
.pegboard-dialog, .books-dialog { border:0; background:transparent; box-shadow:none; padding:52px 0 0; overflow:visible; color:var(--ink); }
.pegboard-dialog::backdrop, .books-dialog::backdrop { background:rgba(69,52,40,.6); backdrop-filter:blur(4px); }
.pegboard-dialog { width:min(1050px,calc(100vw - 32px)); }
.pegboard-dialog > img { width:100%; max-height:calc(100dvh - 120px); filter:drop-shadow(0 16px 15px #30251d40); }
.pegboard-dialog .dialog-close, .books-dialog .dialog-close { top:0; right:8px; width:44px; height:44px; }
.books-dialog { width:min(1020px,calc(100vw - 24px),calc((100dvh - 130px) * 1.5)); max-height:calc(100dvh - 24px); }
.journal-art { position:relative; width:100%; aspect-ratio:3/2; filter:drop-shadow(0 16px 18px #30251d55); }
.journal-art > img { display:block; width:100%; height:100%; object-fit:contain; }
.book-spread { position:absolute; inset:9% 6% 9%; display:grid; grid-template-columns:1fr 1fr; min-height:0; background:transparent; border:0; border-radius:0; box-shadow:none; perspective:1600px; }
.book-page { padding:11% 10% 12%; text-align:left; min-width:0; }
.book-page + .book-page { border:0; box-shadow:none; }
.journal-eyebrow { font-size:clamp(10px,1.25vw,14px); color:#947d68; margin:0 0 14%; }
.book-page h3 { font-weight:500; font-size:clamp(14px,2.3vw,27px); line-height:1.5; margin:0 0 12%; }
.journal-copy { font-size:clamp(11px,1.7vw,19px); line-height:2.2; white-space:pre-line; margin:0; color:#776554; }
.book-page > span { bottom:0; font-size:12px; text-align:center; color:#947d68; }
.book-navigation { gap:22px; margin-top:8px; color:#fff8ea; }
.book-navigation button { background:#fff8eae8; border:1px solid #d1bda5; padding:9px 18px; border-radius:20px; color:#554a42; }
.book-navigation button:hover:enabled { background:#f3d9c1; }
.book-navigation output { min-width:50px; text-align:center; }
.turning-leaf { position:absolute; top:0; bottom:0; width:50%; background:linear-gradient(90deg,#ede0ca,#fff8e8 20%,#f5ecd9); backface-visibility:hidden; pointer-events:none; z-index:2; box-shadow:0 2px 14px #554a4225; }
.turn-forward { right:0; transform-origin:left; animation:journal-forward 540ms ease-in-out both; }
.turn-back { left:0; transform-origin:right; animation:journal-back 540ms ease-in-out both; }
@keyframes journal-forward { to { transform:rotateY(-180deg); } }
@keyframes journal-back { to { transform:rotateY(180deg); } }
@media(max-width:600px) { .books-dialog { width:calc(100vw - 12px); padding-top:50px; } .book-page { padding:9% 7% 12%; } .journal-eyebrow { margin-bottom:10%; } .book-page h3 { margin-bottom:8%; } .journal-copy { line-height:1.9; } .book-navigation { margin-top:16px; gap:16px; } }

/* Transparent two-camera board: only the artwork floats above the faded room. */
.pegboard-dialog{border:0;background:transparent;box-shadow:none;padding:0;overflow:visible;width:min(1100px,calc(100vw - 32px))}
.pegboard-dialog::backdrop{background:rgba(246,239,223,.72);backdrop-filter:blur(4px)}
.pegboard-dialog>img{width:100%;max-height:calc(100dvh - 80px);object-fit:contain;filter:none}
.pegboard-dialog .dialog-close{top:8px;right:8px;background:transparent;border:0;box-shadow:none}

/* Fit the board inside the wall above the desktop. */
.pegboard-button{left:31%;top:-3%;width:38%}

/* Keep the wall decoration modest relative to the desk. */
.pegboard-button{left:35%;top:-2%;width:30%}

/* The lock floats over the original, softly blurred entry scene. */
.keypad-dialog { width: min(450px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 8px 20px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; color: #fff8ea; }
.keypad-dialog::backdrop { background: rgba(43,34,27,.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.keypad-head { padding: 0 38px; text-align: center; text-shadow: 0 2px 8px #392c22; }
.keypad-head .kicker { display: none; }
.keypad-head h2 { font-size: clamp(22px, 4vw, 28px); margin: 0 0 8px; }
.keypad-dialog .dialog-close { top: 0; right: 0; width: 40px; height: 40px; color: #fff8ea; border-color: #fff8ea; background: rgba(43,34,27,.3); }
.keypad-dialog .code-display { width: max-content; margin: 0 auto; padding: 4px 16px; border: 0; background: transparent; color: #fff8ea; text-shadow: 0 2px 8px #392c22; }
.keypad-message { min-height: 22px; margin: 3px 0; font-size: 15px; color: #fff0d9; text-shadow: 0 2px 6px #392c22; }
.keypad-clue { min-height: 44px; text-align: center; }
.keypad-clue button { min-height: 40px; padding: 5px 16px; border: 1px solid #fff8ea99; border-radius: 30px; background: #392c2266; color: #fff8ea; cursor: pointer; }
.keypad-clue p { margin: 0; line-height: 40px; color: #fff8ea; text-shadow: 0 2px 6px #392c22; }
.keypad-dialog .painted-keypad-shell { height: min(65dvh, 600px); width: auto; max-width: 100%; aspect-ratio: 2 / 3; margin: -3px auto 0; }
@media (prefers-reduced-motion: reduce) { .keypad-dialog.is-error { animation: none; } }
.painted-keypad-shell > img { clip-path: inset(7% 22% 6% 22% round 10% / 7%); }

/* Illustration hotspots stay invisible until the visitor interacts. */
:where(.door-lock-hotspot, .hotspot, .bed-quilt-hotspot, .cabinet-hotspot,
       .laptop-hotspot, .books-hotspot, .tour-hotspot:not(.tour-memory-box)) {
  --hotspot-light: radial-gradient(ellipse closest-side, #fff9e5a6 0%, #fff9e56b 45%, #fff9e500 100%);
}

:is(.door-lock-hotspot, .hotspot, .bed-quilt-hotspot, .cabinet-hotspot, .laptop-hotspot,
    .books-hotspot, .tour-hotspot:not(.tour-memory-box)):is(:focus-visible, :active) {
  outline: none;
  background: var(--hotspot-light);
}

:is(.pegboard-button, .wizard-character):is(:focus-visible, :active) {
  outline: none;
  filter: brightness(1.18);
}

@media (hover: hover) {
  :is(.door-lock-hotspot, .hotspot, .bed-quilt-hotspot, .cabinet-hotspot, .laptop-hotspot,
      .books-hotspot, .tour-hotspot:not(.tour-memory-box)):hover {
    background: var(--hotspot-light);
  }

  :is(.pegboard-button, .wizard-character):hover {
    filter: brightness(1.12);
  }
}