: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: #c9ae8b;
}

* { 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 {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.45), transparent 34%),
    repeating-linear-gradient(98deg, rgba(87,65,48,.035) 0 1px, transparent 1px 7px),
    #c9ae8b;
  padding: clamp(10px, 2.3vw, 30px);
}

body.is-locked { overflow: hidden; }

.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%);
  min-height: calc(100vh - clamp(20px, 4.6vw, 60px));
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--paper);
  border: 2px solid rgba(85,74,66,.5);
  box-shadow: 9px 12px 0 rgba(91,66,48,.18);
  overflow: hidden;
  position: relative;
}
.room-app.is-entering { animation: scene-in .38s ease both; }

.room-app::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20; opacity: .18;
  background-image: repeating-linear-gradient(13deg, transparent 0 4px, rgba(104,86,70,.12) 4px 5px);
  mix-blend-mode: multiply;
}

.topbar { min-height: 64px; display: flex; align-items: center; gap: 22px; padding: 11px 18px; border-bottom: 2px dashed rgba(85,74,66,.35); 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: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 46% 54% 49% 51%; transform: rotate(-3deg); background: var(--cream); }
.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: 10px 16px; border-top: 2px dashed rgba(85,74,66,.35); 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 { border-left: 1px dashed var(--ink-soft); 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%; }
}

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