* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; overflow: hidden; }
body { height: var(--game-content-height); overflow: hidden; }
body { margin: 0; background: #f6eee2; color: #51483f; font-family: "Microsoft YaHei", sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #357667; outline-offset: 3px; }
.game { max-width: 520px; height: 100%; margin: auto; display: flex; flex-direction: column; gap: 9px; padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.game > header { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 0; gap: 10px; }
h1 { font-size: 27px; margin: 5px 0 0; letter-spacing: 3px; }
#restart { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; border: 2px solid #a96528; border-radius: 14px; padding: 9px 14px; min-height: 46px; background: linear-gradient(#ffe5a2, #f8c66c); color: #633810; box-shadow: 0 4px 0 #a96528, inset 0 2px 0 #fff5d4; font-size: 16px; font-weight: 800; white-space: nowrap; }
#restart svg { width: 22px; height: 22px; flex: none; }
#restart:active { transform: translateY(3px); box-shadow: 0 1px 0 #a96528, inset 0 2px 3px #a9652826; }
.room-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arrow { width: 44px; height: 44px; flex: none; border: 1px solid #d6c9b8; border-radius: 50%; background: #fffaf2; font-size: 23px; }
.room-title { text-align: center; }
h2 { margin: 0 0 4px; font-size: 19px; }
#room-number { font-size: 10px; color: #8d7b67; letter-spacing: 2px; }
.scene { flex: 1; min-height: 0; display: grid; grid-template-rows: 46% 54%; border: 5px solid #e1cfb8; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 25px #816f4a12; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.scene button { touch-action: pinch-zoom; }
.wall { position: relative; z-index: 1; min-height: 0; background: linear-gradient(90deg, #0000000c 0 5%, transparent 5% 95%, #0000000c 95%), var(--wall, #dce7db); border-bottom: 9px solid #bda486; }
.window { position: absolute; width: 80px; height: 78px; left: calc(50% - 40px); top: 18px; border: 6px solid #fff7e5; border-radius: 6px; background: linear-gradient(#b6dfec, #e6f2d5); box-shadow: 3px 4px 0 #00000012; }
.window::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 46%, #fff7e5 46% 54%, transparent 54%), linear-gradient(transparent 46%, #fff7e5 46% 54%, transparent 54%); }
.window::after { content: '☀️'; position: absolute; top: 1px; right: 3px; font-size: 19px; }
.furniture { position: absolute; left: 29%; bottom: 2px; width: 42%; height: 93px; border: 5px solid #a77d5d; border-radius: 15px 15px 4px 4px; background: linear-gradient(#faf1d9 0 28%, #d79887 28% 90%, #a77d5d 90%); box-shadow: 0 8px 0 -3px #8b7058; }
.furniture::before { content: ''; position: absolute; left: 10%; top: 7px; width: 35%; height: 24px; border-radius: 8px; background: #fff9ee; box-shadow: 52px 0 #fff9ee; }
.furniture.sofa { height: 77px; background: #82a89a; border: 9px solid #5e897c; border-radius: 19px 19px 8px 8px; }
.furniture.sofa::before { top: 1px; background: #b5cec0; box-shadow: 48px 0 #d1dfba; }
.furniture.stove { left: 0; bottom: -7px; width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; background: none; box-shadow: none; }
.furniture.stove::before { display: none; }
.kitchen-art { display: none; width: 100%; height: 100%; }
.stove .kitchen-art { display: block; }
.wall.kitchen { background: repeating-linear-gradient(0deg, transparent 0 29px, #c8d3c955 30px 32px), repeating-linear-gradient(90deg, #edf0e3 0 39px, #c8d3c955 40px 42px); }
.kitchen .window { left: 35%; width: 22%; height: 27%; }
.targets { position: absolute; inset: 0; }
.target { position: absolute; width: 26%; height: 139px; max-height: 65%; border: 0; color: #59432f; padding: 0; background: transparent; overflow: visible; }
.target:nth-child(1) { left: 3%; bottom: -6px; }
.target:nth-child(2) { left: 39%; bottom: -6px; width: 22%; }
.target:nth-child(3) { right: 3%; bottom: -6px; }
.wall.kitchen .target:nth-child(2) { left: auto; right: 3%; bottom: 0; width: 28%; height: 43%; max-height: none; }
.wall.kitchen .target:nth-child(1) { left: 5%; bottom: 0; width: 25%; height: 29%; min-height: 44px; }
.wall.kitchen .target:nth-child(3) { right: auto; left: 37%; bottom: 0; width: 25%; height: 29%; min-height: 44px; }
.target.toybox { height: 65px; }
.target.pencilcase { height: 55px; }
.target.basket, .target.crate { height: 75px; }
.target.shoes { height: 105px; }
.target.toybox, .target.pencilcase, .target.basket, .target.crate { max-height: 42%; min-height: 44px; }
.target svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 3px 1px #765a3b30); }
.target strong { position: absolute; bottom: calc(100% + 5px); left: -8px; right: -8px; font-size: 16px; line-height: 22px; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 0 #fff8e5; }
.stored-icon { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; font-size: 22px; }
.floor { background: repeating-linear-gradient(0deg, transparent 0 57px, #c49d7040 58px 60px), repeating-linear-gradient(90deg, #ebd0a8 0 78px, #dfbe9299 79px 81px); min-height: 0; position: relative; box-shadow: inset 0 18px 20px -18px #725536; }
.floor::before { content: ''; position: absolute; left: 16%; top: 12%; width: 68%; height: 73%; border-radius: 5px; background: repeating-linear-gradient(0deg, #ffffff10 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #ffffff12 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, #668f86 0 22%, #e4c591 22% 26%, #668f86 26% 48%, #d5a680 48% 52%); border: 7px double #f2deae; box-shadow: 2px 5px 3px #785c3833; transform: rotate(-5deg); }
.floor::after { content: ''; position: absolute; left: 16%; top: 12%; width: 68%; height: 73%; padding: 7px; background: repeating-linear-gradient(90deg, #d7ba87 0 2px, transparent 2px 6px) top / 100% 7px no-repeat, repeating-linear-gradient(90deg, #d7ba87 0 2px, transparent 2px 6px) bottom / 100% 7px no-repeat; transform: rotate(-5deg) scaleY(1.07); pointer-events: none; }
#items, .complete { z-index: 1; }
#items { position: absolute; inset: 10px 58px 58px 10px; }
.item { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; border: 2px solid transparent; background: transparent; border-radius: 12px; font-size: 28px; transform: rotate(var(--tilt)); line-height: 1; padding: 0; filter: drop-shadow(2px 4px 1px #765a3b30); }
.item.selected { background: #fff8cf; border-color: #40866e; transform: scale(1.06); box-shadow: 0 3px 8px #70562b24; }
.item.stored { visibility: hidden; pointer-events: none; }
.complete { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #f4e4cddd; }
.complete[hidden] { display: none; }
.complete .star { font-size: 58px; }
.complete h3 { margin: 12px 0 8px; font-size: 23px; }
.complete p { font-size: 12px; line-height: 1.8; margin: 0; }
.status { display: flex; justify-content: space-between; font-size: 12px; }
progress { display: block; width: 100%; height: 7px; border: 0; border-radius: 9px; overflow: hidden; margin-top: 9px; background: #e5dacb; accent-color: #568672; }
progress::-webkit-progress-bar { background: #e5dacb; }
progress::-webkit-progress-value { background: #568672; border-radius: 9px; }
.game > header, .game > footer { flex: none; }
.window { top: 6%; width: 64px; height: 30%; max-height: 78px; left: calc(50% - 32px); }
.furniture { max-height: 46%; }
@media (max-height: 650px) { .game { gap: 5px; } h1 { font-size: 23px; } h2 { font-size: 16px; } }
@media (orientation: landscape) and (max-height: 500px) {
  .game { max-width: 850px; gap: 4px; }
  .game > header { padding-top: 0; }
  h1 { font-size: 20px; }
  .room-nav { margin: 0; }
  .scene { grid-template-rows: 100%; grid-template-columns: 42% 58%; }
  .wall { border-bottom: 0; border-right: 7px solid #bda486; }
  }
@media (max-width: 360px) { .game { padding-left: 10px; padding-right: 10px; } h1 { font-size: 23px; } }