body { overflow: hidden; background: #8d6a46; }

.room-shell { min-height: 100vh; }

.room-scene {
  position: relative;
  width: min(1440px, calc(100% - 48px));
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(255 245 215 / 42%);
  border-radius: 18px;
  background: #b98f5e url("../../素材/图片【移除背景】/场景_儿童房背景_默认_桌面.webp") center / cover no-repeat;
}

.room-scene.is-drawer-open {
  background-image: url("../../素材/图片【移除背景】/场景_儿童房背景_抽屉打开_桌面.webp");
}

.room-scene::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(180deg, rgb(255 205 123 / 10%), rgb(68 54 88 / 12%));
  pointer-events: none;
}

.room-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(47 35 48 / 24%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}

.room-shell[data-focus-region]:not([data-focus-region=""]) .room-dim { opacity: 1; }
.room-shell[data-focus-region] .room-dim.is-clear { opacity: 0 !important; pointer-events: none !important; }

.scene-details { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wall-clock { position: absolute; top: 9.722%; left: 31.979%; width: 8.177%; aspect-ratio: 1; }
.wall-clock img { display: block; width: 100%; height: 100%; object-fit: contain; }
.clock-hand, .clock-pin { position: absolute; left: 50%; top: 50%; display: block; background: #322418; transform-origin: 50% 100%; }
.clock-hand { border-radius: 999px; box-shadow: 0 1px 2px rgb(0 0 0 / 24%); }
.clock-hand--hour { width: 3px; height: 23%; transform: translate(-50%, -100%) rotate(185deg); }
.clock-hand--minute { width: 2px; height: 33%; transform: translate(-50%, -100%) rotate(60deg); }
.clock-pin { width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); }
.height-marks { position: absolute; top: 30.741%; left: 39.896%; width: 5.052%; height: 18.148%; object-fit: contain; }

.progress-tray {
  position: absolute;
  top: 1%;
  right: clamp(20px, 4vw, 64px);
  z-index: 5;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 5px 6px;
  border: 1px solid rgb(182 139 85 / 28%);
  border-radius: 7px;
  background: rgb(241 228 200 / 26%);
  box-shadow: 0 3px 10px rgb(91 64 44 / 10%);
}

.progress-item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 34px;
  padding: 2px 4px;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.progress-icon {
  width: 29px;
  height: 29px;
  background: var(--muted-brown);
  opacity: .52;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  transition: background 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.progress-icon--bag { -webkit-mask-image: url("../../素材/图片【移除背景】/进度_书包_线稿_桌面.png"); mask-image: url("../../素材/图片【移除背景】/进度_书包_线稿_桌面.png"); }
.progress-icon--computer { -webkit-mask-image: url("../../素材/图片【移除背景】/进度_电脑鼠标_线稿_桌面.png"); mask-image: url("../../素材/图片【移除背景】/进度_电脑鼠标_线稿_桌面.png"); }
.progress-icon--drawer { -webkit-mask-image: url("../../素材/图片【移除背景】/进度_抽屉拉手_线稿_桌面.png"); mask-image: url("../../素材/图片【移除背景】/进度_抽屉拉手_线稿_桌面.png"); }
.progress-icon--mp3 { -webkit-mask-image: url("../../素材/图片【移除背景】/进度_MP3耳机_线稿_桌面.png"); mask-image: url("../../素材/图片【移除背景】/进度_MP3耳机_线稿_桌面.png"); }
.progress-icon--box { -webkit-mask-image: url("../../素材/图片【移除背景】/进度_纸箱_线稿_桌面.png"); mask-image: url("../../素材/图片【移除背景】/进度_纸箱_线稿_桌面.png"); }

.progress-item:hover .progress-icon,
.progress-item:focus-visible .progress-icon,
.progress-item.is-recommended .progress-icon { background: var(--warm-yellow); opacity: 1; }
.progress-item.is-active .progress-icon { transform: scale(1.1); background: var(--focus-ring); opacity: 1; }
.progress-item.is-done .progress-icon { background: var(--done-gold); opacity: 1; }
.progress-item.is-locked { cursor: not-allowed; }
.progress-item.is-locked .progress-icon { opacity: .25; }
.progress-label { max-width: 72px; font: 600 .7rem/1 var(--font-hand); opacity: 0; transition: opacity 180ms ease; }
.progress-item:hover .progress-label, .progress-item:focus-visible .progress-label { opacity: 1; }
.progress-lock { position: absolute; top: 8px; right: 0; color: var(--ink); font-size: .9rem; }
.progress-divider { width: 1px; height: 26px; background: rgb(182 139 85 / 42%); }

.room-thought { position: absolute; z-index: 4; margin: 0; font-family: var(--font-hand); pointer-events: none; }
.room-thought { bottom: 6%; left: 50%; width: fit-content; max-width: min(1000px, calc(100% - 40px)); padding: 12px 22px; border: 1px solid rgb(182 139 85 / 58%); border-radius: 8px; background: rgb(241 228 200 / 86%); box-shadow: 0 5px 14px rgb(91 64 44 / 18%); color: var(--ink); font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.45; text-align: center; text-shadow: 0 1px 0 rgb(255 245 215 / 50%); white-space: pre-line; transform: translateX(-50%); }
.room-thought.is-wide { max-width: min(1000px, calc(100% - 40px)); }

.interactive-objects { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.room-object { position: absolute; display: block; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 5px 6px rgb(62 42 26 / 20%)); }
.room-object--bag { left: 50%; top: 55.2%; width: 13.906%; height: auto; transform: rotate(0deg); }
.room-object--computer { left: 16.198%; top: 34.815%; width: 17.031%; height: 30.278%; transform: rotate(0deg); }
.room-object--mp3 { left: 54.063%; top: 41.389%; width: 5.781%; height: 10.278%; transform: rotate(0deg); }
.room-object--box { left: 64.688%; top: 68.056%; width: 16.615%; height: 29.537%; transform: rotate(0deg); }

.room-hotspot { position: absolute; z-index: 3; border: 0; border-radius: 50%; color: transparent; background: transparent; cursor: pointer; transition: box-shadow 220ms ease, background 220ms ease; }
.room-hotspot:hover, .room-hotspot:focus-visible { color: var(--ink); background: rgb(242 198 109 / 24%); box-shadow: 0 0 0 8px rgb(242 198 109 / 18%); outline: none; }
.room-hotspot.is-next { background: rgb(242 198 109 / 34%); box-shadow: 0 0 0 8px rgb(242 198 109 / 26%); animation: hotspot-pulse 1.4s ease-in-out infinite; }
.room-hotspot.is-next:hover, .room-hotspot.is-next:focus-visible { background: rgb(242 198 109 / 34%); box-shadow: 0 0 0 8px rgb(242 198 109 / 26%); animation-play-state: paused; }
.room-hotspot.is-locked { cursor: not-allowed; pointer-events: none; }
.room-hotspot.is-complete-hint { background: rgb(242 198 109 / 28%); box-shadow: 0 0 0 8px rgb(242 198 109 / 22%); animation: hotspot-pulse 1.1s ease-in-out infinite; }
@keyframes hotspot-pulse { 0%, 100% { background: rgb(242 198 109 / 20%); box-shadow: 0 0 0 4px rgb(242 198 109 / 16%); } 50% { background: rgb(242 198 109 / 34%); box-shadow: 0 0 0 8px rgb(242 198 109 / 26%); } }
.room-hotspot span { position: absolute; inset: 50% auto auto 50%; padding: 4px 8px; border-radius: 4px; background: var(--paper); font: 600 1rem var(--font-hand); opacity: 0; transform: translate(-50%, -50%); white-space: nowrap; }
.room-hotspot:hover span, .room-hotspot:focus-visible span { opacity: 1; }
.room-hotspot--bag { left: 50%; top: 55.3%; width: 14.688%; height: 24.167%; }
.room-hotspot--computer { left: 16.198%; top: 34.815%; width: 17.031%; height: 30.278%; }
.room-hotspot--drawer { left: 16.5%; top: 72%; width: 11.4%; height: 13.8%; transform: rotate(-6.45deg); transform-origin: center; }
.room-hotspot--mp3 { left: 53.854%; top: 41.389%; width: 5.99%; height: 10%; }
.room-hotspot--box { left: 63.906%; top: 69.352%; width: 18.802%; height: 26.944%; }
.room-hotspot--height { left: 39.583%; top: 30.093%; width: 5.365%; height: 2.778%; border-radius: 2px; }

.room-focus-card { position: absolute; top: 50%; left: 50%; z-index: 6; width: min(420px, calc(100% - 40px)); padding: 28px; border: 1px solid var(--paper-edge); border-radius: 10px; background: var(--paper); box-shadow: 0 14px 36px rgb(47 35 48 / 30%); transform: translate(-50%, -50%); }
.room-focus-card[hidden] { display: none; }
.computer-preview-card { position: absolute; top: 50%; left: 50%; z-index: 6; width: min(360px, calc(100% - 40px)); padding: 16px; border: 1px solid var(--paper-edge); border-radius: 10px; background: var(--paper); box-shadow: 0 14px 36px rgb(47 35 48 / 30%); transform: translate(-50%, -50%); }
.computer-preview-card[hidden] { display: none; }
.computer-preview-card h1 { margin: 0; font-size: 2rem; }
.computer-preview-card p:not(.focus-kicker) { margin: 12px 0 16px; font: 1.05rem/1.5 var(--font-hand); }
.computer-preview-card__image { height: 160px; margin: 10px 0 14px; place-items: center; }
.computer-preview-card__image img { width: 58%; height: 78%; object-fit: contain; transform: translate(-16px, -54px); }
.focus-kicker { margin: 0 0 8px; color: #876444; font: 600 1rem var(--font-hand); }
.room-focus-card h1 { margin: 0; font-size: 2.2rem; }
.room-focus-card p:not(.focus-kicker) { margin: 14px 0 22px; font: 1.15rem/1.6 var(--font-hand); }
.module-preview { display: grid; height: 210px; margin: 8px 0 18px; place-items: center; overflow: hidden; border: 1px solid rgb(182 139 85 / 38%); border-radius: 8px; background: rgb(255 245 215 / 35%); }
.module-preview[hidden] { display: none; }
.module-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.computer-module { margin: 8px 0 20px; }
.computer-module[hidden], .computer-app-panel[hidden] { display: none; }
.computer-app-panel[hidden] { display: none !important; }
.room-focus-card:has(.computer-module) { left: 50%; width: min(360px, calc(100% - 40px)); padding: 16px; }
.room-focus-card.is-complete:has(.computer-module) { padding: 12px; }
.room-focus-card.is-complete:has(.computer-module) .computer-module { margin-bottom: 4px; }
.room-focus-card.is-complete:has(.computer-module) .focus-actions { margin-top: 0; }
.room-focus-card.is-complete:has([data-computer-panel="match"]:not([hidden])) { padding: 10px 12px; }
.room-focus-card.is-complete:has([data-computer-panel="match"]:not([hidden])) .computer-app-tabs { margin-bottom: 6px; }
.room-focus-card.is-complete:has([data-computer-panel="match"]:not([hidden])) .computer-app-hint { margin-bottom: 4px; }
.room-focus-card.is-complete:has([data-computer-panel="match"]:not([hidden])) .match-board { margin-bottom: 4px; }
.room-focus-card.is-complete:has([data-computer-panel="match"]:not([hidden])) .computer-app-hint.is-memory-note { margin: 4px 0 6px; }
.room-focus-card.is-complete:has([data-computer-panel="match"]:not([hidden])) .focus-actions { margin-top: 4px; }
.room-focus-card.is-match-complete { padding: 10px 12px; }
.room-focus-card.is-match-complete .computer-app-tabs { margin-bottom: 6px; }
.room-focus-card.is-match-complete .computer-app-hint { margin-bottom: 4px; }
.room-focus-card.is-match-complete .match-board { margin-bottom: 4px; }
.room-focus-card.is-match-complete .computer-app-hint.is-memory-note { margin: 4px 0 6px; }
.room-focus-card.is-match-complete .focus-actions { margin-top: 4px; }
.room-focus-card.is-match-complete .focus-actions { transform: translateY(-10px); }
.room-focus-card:has(.computer-module) .module-preview { height: 90px; margin-bottom: 8px; }
.room-focus-card:has(.computer-module) .module-preview img { width: 38%; object-position: center 42%; transform: translateY(-14px); }
.room-shell[data-focus-region="computer"] .room-focus-card { top: 46%; max-height: calc(100% - 110px); overflow: visible; }
.room-shell[data-focus-region="computer"] .room-focus-card.is-computer-intro > [data-focus-copy] { white-space: nowrap; }
.room-shell[data-focus-region="computer"] .room-focus-card.is-complete > [data-focus-copy] { white-space: normal; overflow-wrap: anywhere; }
.room-shell[data-focus-region="computer"] .room-focus-card.is-complete { top: 43%; transform: translate(-50%, -50%) scale(.94); transform-origin: center; }
.room-shell[data-focus-region="computer"] .room-focus-card.is-complete,
.room-shell[data-focus-region="computer"] .room-focus-card.is-match-complete { top: 46%; transform: translate(-50%, -50%); padding: 16px; }
.room-shell[data-focus-region="computer"] .room-thought { bottom: 2%; z-index: 7; width: fit-content; max-width: min(1000px, calc(100% - 40px)); min-height: 56px; box-sizing: border-box; }
.room-shell[data-focus-region="box"] .room-focus-card { top: calc(45% + 20px); max-height: none; padding: 18px 20px; overflow: visible; }
.room-shell[data-focus-region="height"] .room-focus-card { top: 50%; width: min(440px, calc(100% - 40px)); }
.room-shell[data-focus-region="height"] .room-focus-card [data-focus-copy] { white-space: pre-line; }
.room-shell[data-focus-region="ending"] .room-focus-card [data-focus-copy] { white-space: pre-line; }
.room-shell[data-focus-region="bag"] .room-focus-card { top: 44%; max-height: none; overflow: visible; transform: translate(-50%, -50%) scale(.94); transform-origin: center; }
.room-shell.is-bag-recheck .room-thought { bottom: 3%; z-index: 7; }
.room-shell[data-focus-region="bag"] .module-preview { height: 250px; }
.room-shell[data-focus-region="bag"] .module-preview img { width: 88%; height: 92%; object-position: center; }
.room-shell[data-focus-region="bag"] .item-detail { margin-bottom: 14px; }
.room-shell[data-focus-region="mp3"] .room-focus-card { top: 44%; max-height: none; overflow: visible; transform: translate(-50%, -50%) scale(.9); transform-origin: center; }
.room-shell[data-focus-region="mp3"] .room-thought { bottom: 3%; z-index: 7; }
.room-shell[data-focus-region="box"] .room-thought { bottom: 5%; z-index: 7; }
.room-shell[data-focus-region="drawer"] .room-focus-card.is-drawer-recheck { top: 50%; }
.room-shell[data-focus-region="drawer"] .room-thought { bottom: 3%; }
.room-shell[data-focus-region="drawer"] .box-detail-dialog { top: calc(50% + 40px); }
.room-shell[data-focus-region="bag"] .box-detail-dialog { top: 50%; }
.room-shell[data-focus-region="drawer"] .box-detail-dialog img[src*="抽屉_爆笑校园_内页"] { top: -112px; }
.room-shell[data-focus-region="drawer"] .box-detail-dialog img[src*="抽屉_比巴卜泡泡糖"] { width: min(100%, 260px); height: 240px; }
.room-shell[data-focus-region="box"] .box-items { gap: 10px; margin: 8px 0 20px; }
.room-shell[data-focus-region="box"] .box-detail-dialog { top: calc(50% + 64px); }
.room-shell[data-focus-region="box"] .box-item { padding: 6px; font-size: .82rem; }
.room-shell[data-focus-region="box"] .box-item img { height: 54px; }
.room-shell[data-focus-region="box"] .box-photo-detail { margin: 6px 0 12px; padding: 8px 10px; }
.room-shell[data-focus-region="box"] .box-photo-detail img { width: min(100%, 380px); max-height: 170px; margin-bottom: 6px; }
.room-shell[data-focus-region="mp3"] .module-preview { height: 240px; }
.room-shell[data-focus-region="mp3"] .module-preview img { width: 82%; height: 100%; object-position: center; }
.computer-app-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.computer-app-tab { flex: 1; padding: 7px 8px; border: 1px solid rgb(182 139 85 / 52%); border-radius: 5px; color: var(--ink); background: rgb(255 245 215 / 58%); cursor: pointer; font: 600 .9rem var(--font-hand); }
.computer-app-tab.is-active { border-color: var(--focus-ring); background: rgb(242 198 109 / 30%); }
.computer-app-tab.is-next { animation: computer-tab-pulse 1.2s ease-in-out infinite; }
@keyframes computer-tab-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(242 198 109 / 0%); } 50% { box-shadow: 0 0 0 5px rgb(242 198 109 / 45%); } }
.computer-app-hint { margin: 0 0 8px; font: 1rem/1.4 var(--font-hand); }
.computer-app-hint.is-memory-note { margin: 8px 0 12px; padding: 9px 10px; border: 1px dashed rgb(182 139 85 / 70%); border-radius: 6px; background: rgb(255 245 215 / 54%); white-space: pre-line; }
.match-board { display: grid; grid-template-columns: repeat(4, minmax(76px, 1fr)); grid-auto-rows: 56px; gap: 4px; justify-content: center; margin-bottom: 8px; overflow: visible; }
.match-card { display: grid; height: 56px; min-height: 56px; padding: 3px; place-items: center; border: 1px solid rgb(182 139 85 / 52%); border-radius: 5px; background: rgb(255 245 215 / 72%); cursor: pointer; }
.match-card img { width: 100%; height: 32px; object-fit: contain; opacity: 0; transition: opacity 160ms ease; }
.match-card::before { content: "？"; color: #9b7048; font: 1.3rem var(--font-hand); }
.match-card.is-flipped img, .match-card.is-matched img { opacity: 1; }
.match-card.is-flipped::before, .match-card.is-matched::before { display: none; }
.match-card.is-flipped, .match-card.is-matched { border-color: var(--done-gold); background: rgb(242 198 109 / 32%); }
.match-card.is-hint { box-shadow: 0 0 0 3px rgb(242 198 109 / 70%); }
.match-card.is-matched { opacity: .55; cursor: default; }
.match-card:disabled { color: inherit; }
.farm-field { position: relative; width: min(100%, 360px); margin: 8px auto 12px; }
.room-focus-card:has([data-computer-panel="farm"]:not([hidden])) .farm-field { width: min(100%, 270px); margin: -42px auto -38px; }
.room-focus-card:has([data-computer-panel="farm"]:not([hidden])) .farm-message { margin: 4px 0 0; padding: 6px 8px; }
.room-focus-card:has([data-computer-panel="farm"]:not([hidden])) .computer-module { margin-bottom: 0; }
.room-focus-card:has([data-computer-panel="farm"]:not([hidden])) .focus-actions { margin-top: 6px; }
.farm-field-image { display: block; width: 100%; height: auto; }
.farm-grid { position: absolute; inset: 18% 7% 30%; }
.farm-plot { position: absolute; left: calc((var(--farm-column) - 1) * 16.8%); top: calc((var(--farm-row) - 1) * 26%); width: 14.8%; height: 22%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.farm-plot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.farm-plot-state { position: absolute; left: 50%; top: 42%; width: 236%; height: 224%; object-fit: contain; pointer-events: none; transform: translate(-50%, -50%); }
.farm-plot[data-farm-plot="weed"] .farm-plot-state { top: 46%; width: 208%; height: 196%; }
.farm-plot[data-farm-plot="harvest"] .farm-plot-state { top: 42%; width: 264%; height: 252%; }
.farm-plot-label { position: absolute; left: 50%; bottom: 100%; z-index: 2; display: flex; gap: 3px; align-items: center; padding: 4px 7px; border: 1px solid rgb(182 139 85 / 60%); border-radius: 999px; color: var(--ink); background: rgb(255 245 215 / 94%); box-shadow: 0 3px 8px rgb(60 39 22 / 18%); font: 600 .72rem/1 var(--font-hand); opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 160ms ease, transform 160ms ease; white-space: nowrap; }
.farm-plot-label img { width: 22px; height: 22px; object-fit: contain; }
.farm-plot:hover .farm-plot-label, .farm-plot:focus-visible .farm-plot-label { opacity: 1; transform: translate(-50%, -4px); }
.farm-effect { position: absolute; inset: -25%; z-index: 3; pointer-events: none; }
.farm-effect[hidden] { display: none; }
.farm-effect img { position: absolute; object-fit: contain; opacity: 0; }
.farm-tool { inset: 0; width: 100%; height: 100%; }
.farm-effect-layer { inset: 0; width: 100%; height: 100%; }
.farm-plot.is-animating .farm-effect { display: block; }
.farm-plot.is-animating .farm-plot-label { opacity: 0; }
.farm-plot.is-watering .farm-tool { animation: farm-watering-can 900ms ease both; }
.farm-plot.is-weeding .farm-tool { animation: farm-weeding-sickle 900ms ease both; }
.farm-plot.is-harvesting .farm-tool { animation: farm-harvest-fruit 900ms ease both; }
.farm-plot.is-watering .farm-effect-layer--flow, .farm-plot.is-watering .farm-effect-layer--splash, .farm-plot.is-weeding .farm-effect-layer--trail, .farm-plot.is-weeding .farm-effect-layer--leaves, .farm-plot.is-harvesting .farm-effect-layer--arc, .farm-plot.is-harvesting .farm-effect-layer--stars { animation: farm-effect-pop 900ms ease both; }
.farm-plot.is-complete { cursor: default; }
.farm-plot.is-complete .farm-plot-label { display: none; }
@keyframes farm-tool-action { 0% { opacity: 0; transform: translateY(-16%) rotate(-8deg); } 30%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(8%) rotate(8deg); } }
@keyframes farm-watering-can { 0% { opacity: 0; transform: translateY(-60%) rotate(-8deg); } 30%, 75% { opacity: 1; transform: translateY(-45%) rotate(10deg); } 100% { opacity: 0; transform: translateY(-38%) rotate(14deg); } }
@keyframes farm-weeding-sickle { 0% { opacity: 0; transform: translate(-22%, -42%) rotate(-28deg); } 30%, 75% { opacity: 1; transform: translate(-22%, -42%) rotate(12deg); } 100% { opacity: 0; transform: translate(18%, -30%) rotate(28deg); } }
@keyframes farm-harvest-fruit { 0% { opacity: 0; transform: translateY(-45%) scale(.72) rotate(-10deg); } 30%, 75% { opacity: 1; transform: translateY(-45%) scale(1) rotate(10deg); } 100% { opacity: 0; transform: translateY(-34%) scale(.86) rotate(24deg); } }
@keyframes farm-effect-pop { 0%, 20% { opacity: 0; transform: scale(.7); } 45%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.farm-message { margin: 10px 0 0; padding: 9px 10px; border: 1px dashed rgb(182 139 85 / 70%); background: rgb(255 245 215 / 54%); font: 1rem/1.5 var(--font-hand); white-space: pre-line; }
.mp3-player { margin: 8px 0 18px; padding: 12px 14px; border: 1px dashed rgb(182 139 85 / 70%); border-radius: 6px; background: rgb(255 245 215 / 52%); }
.mp3-player[hidden] { display: none; }
.mp3-player audio { display: block; width: 100%; }
.mp3-player p { margin: 8px 0 0; font: 1rem/1.4 var(--font-hand); }
.bag-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 20px; }
.bag-items[hidden] { display: none; }
.drawer-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 20px; }
.drawer-items[hidden], .drawer-photo[hidden], .box-items[hidden] { display: none; }
.box-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 20px; }
.bag-item, .drawer-item, .box-item { display: grid; gap: 4px; min-width: 0; padding: 6px; border: 1px solid rgb(182 139 85 / 48%); border-radius: 6px; color: var(--ink); background: rgb(255 245 215 / 46%); cursor: pointer; font: 600 .82rem/1.2 var(--font-hand); }
.bag-item img, .drawer-item img, .box-item img { width: 100%; height: 54px; object-fit: contain; }
.bag-item:hover, .bag-item:focus-visible, .drawer-item:hover, .drawer-item:focus-visible { border-color: var(--warm-yellow); background: rgb(242 198 109 / 22%); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.box-item:hover, .box-item:focus-visible { border-color: var(--warm-yellow); background: rgb(242 198 109 / 22%); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bag-item.is-picked, .drawer-item.is-picked, .box-item.is-picked { border-color: var(--done-gold); background: rgb(217 144 61 / 20%); }
.drawer-item.is-interacting { animation: drawer-item-bounce .6s ease; }
@keyframes drawer-item-bounce { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06) rotate(-2deg); } }
.drawer-photo { display: grid; width: 100%; margin: 8px 0 20px; padding: 12px; place-items: center; border: 1px dashed rgb(182 139 85 / 70%); border-radius: 8px; color: var(--ink); background: rgb(255 245 215 / 52%); cursor: pointer; font: 600 1rem/1.3 var(--font-hand); }
.drawer-photo img { width: 150px; height: 90px; object-fit: contain; }
.drawer-photo:hover, .drawer-photo:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.drawer-photo.is-photo-hint { animation: drawer-photo-hint 1.2s ease-in-out infinite; }
@keyframes drawer-photo-hint { 0%, 100% { box-shadow: 0 0 0 0 rgb(242 198 109 / 0%); } 50% { box-shadow: 0 0 0 6px rgb(242 198 109 / 48%); } }
.item-detail { margin: 10px 0 18px; padding: 12px 14px; border: 1px dashed rgb(182 139 85 / 70%); border-radius: 6px; background: rgb(255 245 215 / 52%); font: 1rem/1.65 var(--font-hand); }
.item-detail[hidden] { display: none; }
.item-detail p { margin: 0; }
.box-photo-detail img { display: block; width: min(100%, 280px); max-height: 190px; margin: 0 auto 10px; object-fit: contain; }
.box-item-detail { text-align: center; }
.box-item-detail img { display: block; width: min(100%, 220px); height: 112px; margin: 0 auto 6px; object-fit: contain; }
.box-item-detail h2 { margin: 2px 0 5px; font-size: 1.2rem; }
.box-item-detail-thought { margin: 14px 8px 0 !important; padding-top: 12px; border-top: 1px solid rgb(182 139 85 / 38%); color: #80522e; font-size: 1.05rem !important; line-height: 1.55 !important; }
.box-detail-dialog { position: absolute; top: calc(50% + 100px); left: 50%; z-index: 20; display: grid; align-content: center; justify-items: center; gap: 10px; box-sizing: border-box; width: calc(100% + 24px); min-height: 520px; padding: 128px 28px 66px; border: 1px solid var(--paper-edge); border-radius: 10px; background: var(--paper); box-shadow: 0 12px 30px rgb(47 35 48 / 35%); text-align: center; overflow: visible; transform: translate(-50%, -50%); }
.box-detail-dialog[hidden] { display: none; }
.box-detail-dialog img { position: absolute; top: -105px; left: 50%; z-index: 2; width: min(100%, 220px); height: 210px; object-fit: contain; transform: translateX(-50%); }
.box-detail-dialog img[src*="爆笑校园_内页"] { top: -72px; width: min(100%, 300px); height: 270px; }
.room-shell[data-focus-region="box"] .box-detail-dialog img { top: -105px; }
.room-shell[data-focus-region="box"] .box-detail-dialog img[src*="爆笑校园_内页"] { top: -72px; }
.box-detail-dialog img { cursor: pointer; transition: transform 180ms ease, filter 180ms ease; }
.box-detail-dialog img:hover, .box-detail-dialog img:focus-visible { filter: drop-shadow(0 10px 12px rgb(91 64 44 / 28%)); transform: translateX(-50%) translateY(-8px) scale(1.04); }
.box-detail-dialog h2 { width: 100%; margin: 0; font-size: 1.8rem; text-align: center; }
.box-detail-dialog p { width: 100%; max-width: 100%; margin: 0; font: 1.5rem/1.45 var(--font-hand); text-align: center; overflow-wrap: anywhere; word-break: break-word; }
.box-detail-dialog .desk-note-birthday { display: inline-block; font-size: 1.15rem; white-space: nowrap; }
.box-dialog-thought { padding-top: 10px; border-top: 1px solid rgb(182 139 85 / 38%); color: #80522e; }
.box-dialog-thought { white-space: normal; font-size: 1.5rem !important; }
.box-detail-dialog [data-box-dialog-close] { position: static; margin-top: 12px; transform: none; }
.box-photo-stage { position: relative; }
.box-photo-stage [data-box-photo-back-text] { position: absolute; inset: 50% auto auto 50%; z-index: 2; width: min(68%, 230px); max-width: 230px; color: #765238; font: 600 .78rem/1.4 var(--font-hand); text-align: center; pointer-events: none; white-space: normal; overflow-wrap: anywhere; word-break: break-all; transform: translate(-50%, -50%) rotate(-2deg); }
.room-shell[data-focus-region="box"] .module-preview { height: 180px; }
.room-shell[data-focus-region="box"] .module-preview img { width: 66%; height: 72%; object-position: center; transform: translateY(-16px); }
.box-photo-detail [data-box-photo-flip] { display: block; margin: 8px auto 0; }
.box-photo-detail { position: absolute; top: 50%; left: 50%; z-index: 20; display: grid; align-content: start; justify-items: center; gap: 10px; box-sizing: border-box; width: calc(100% + 24px); min-height: 520px; padding: 42px 28px 66px; border: 1px solid var(--paper-edge); border-radius: 10px; background: var(--paper); box-shadow: 0 12px 30px rgb(47 35 48 / 35%); text-align: center; transform: translate(-50%, -50%); overflow: visible; }
.box-photo-detail[hidden] { display: none; }
.box-photo-detail .box-photo-stage { position: relative; display: grid; width: 100%; height: 300px; place-items: center; }
.box-photo-detail .box-photo-stage img { display: block; width: min(100%, 560px); height: 300px; object-fit: contain; transform: scale(1.55); }
.box-photo-detail .box-photo-stage [data-box-photo-back-text] { inset: 50% auto auto 50%; width: min(72%, 250px); transform: translate(-50%, -50%) rotate(-2deg); }
.box-photo-detail [data-box-photo-flip], .box-photo-detail [data-box-photo-close] { margin: 4px auto 0; }
.box-photo-thought { max-width: 96%; margin: 4px 0 6px; white-space: pre-line; text-align: center; font: .95rem/1.5 var(--font-hand); color: #80522e; }
.box-photo-caption { width: 100%; max-width: none; margin: 4px 0 6px; text-align: center; white-space: nowrap; font: .98rem/1.5 var(--font-hand); color: #80522e; }
.box-photo-thought { padding-top: 12px; border-top: 1px solid rgb(182 139 85 / 38%); }
.box-photo-thought { white-space: pre-line; }
.room-shell[data-focus-region="bag"] .room-focus-card,
.room-shell[data-focus-region="computer"] .room-focus-card,
.room-shell[data-focus-region="drawer"] .room-focus-card,
.room-shell[data-focus-region="mp3"] .room-focus-card,
.room-shell[data-focus-region="box"] .room-focus-card,
.computer-preview-card { top: 50%; }
.box-photo-thought::first-line { white-space: nowrap; }
.item-detail label { display: block; margin-bottom: 8px; }
.password-row { display: flex; gap: 8px; align-items: center; }
.password-row input { width: 120px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--paper-edge); border-radius: 5px; color: var(--ink); background: rgb(255 250 234 / 88%); font: 1.1rem/1 var(--font-body); letter-spacing: .16em; }
.password-row input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.item-detail [data-password-feedback] { min-height: 1.5em; margin-top: 8px; color: #80522e; }
.focus-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.room-tools { position: absolute; bottom: 24px; right: 28px; z-index: 5; display: flex; gap: 8px; }
.room-tools .memory-button { font-size: .9rem; text-decoration: none; }
.mute-icon { width: 1.5em; height: 1.5em; display: block; }
.mute-icon[hidden] { display: none; }
.room-tools [data-mute-icon] { display: none; }
.room-tools [data-mute]:not(.is-muted) [data-mute-icon="on"],
.room-tools [data-mute].is-muted [data-mute-icon="off"] { display: block; }

@media (prefers-reduced-motion: reduce) {
  .room-dim, .progress-icon, .progress-label, .room-hotspot { transition: none; }
  .farm-plot.is-watering .farm-tool, .farm-plot.is-weeding .farm-tool, .farm-plot.is-harvesting .farm-tool,
  .farm-plot.is-watering .farm-effect-layer, .farm-plot.is-weeding .farm-effect-layer, .farm-plot.is-harvesting .farm-effect-layer { animation: farm-effect-fade 180ms linear both; }
}

@keyframes farm-effect-fade { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  .room-scene { width: calc(100% - 24px); min-height: calc(100vh - 24px); margin: 12px auto; border-radius: 12px; }
}