/* 心田・立體舞台／我的小屋 共用樣式 */

.stage-shell {
  --ink: #3d2e1f;
  --ink-soft: #6f604f;
  --cream: #faf6ee;
  --card: rgba(255, 253, 247, 0.92);
  --accent: #7a4f24;
  --sage: #5f8f51;
  --nav-gap: calc(var(--nav-h, 64px) + var(--safe-top, 0px));
  background: #eef3e4;
  min-height: 100dvh;
  padding-top: var(--nav-gap); /* 導覽列是 fixed，這裡讓出高度，畫面才不會被壓住 */
  color: var(--ink);
}

.stage-wrap {
  position: relative;
  width: 100%;
  /* 房間圖是 3:2 橫向；視窗太矮時房間會被壓得很小，所以下限拉高一點，
     並讓可遊玩區至少維持接近 3:2，房間才不會只佔畫面一小條。 */
  height: max(calc(100dvh - var(--nav-gap)), min(66vw, 760px));
  min-height: 560px;
  overflow: hidden;
  background: #b9e2f2;
}

/* 桌機／筆電：整個小屋以「一個螢幕放得下」為準（13 吋 MBA 免縮放免捲動）；
   房間 3:2 會在寬螢幕左右留天空底色，屬正常取景。 */
@media (min-width: 900px) {
  .stage-wrap {
    height: calc(100dvh - var(--nav-gap));
    min-height: 480px;
  }
}

.stage-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(rgba(92, 63, 34, .35) .55px, transparent .75px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
}

/* 只讓遊玩區進入全螢幕，離開後回到原本的小屋版面。 */
.stage-wrap:fullscreen {
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  background: #b9e2f2;
}

/* iPhone Safari 不能讓一般元素進原生全螢幕時，仍用固定滿版提供沉浸式遊玩。 */
.stage-wrap.is-immersive {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
}

html.xintian-house-immersive,
body.xintian-house-immersive {
  overflow: hidden;
}

.stage-canvas-host,
.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------- 上方資訊列 ---------- */
.stage-stats {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: none;
}

.stage-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 8px 28px rgba(40, 28, 14, 0.14);
  backdrop-filter: blur(10px);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-family: "Noto Serif TC", "PingFang TC", serif;
}

.stage-stat b {
  font-size: 15px;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- 控制列 ---------- */
.stage-hud {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: min(460px, calc(100% - 24px));
  pointer-events: none;
}

.stage-hud > * {
  pointer-events: auto;
}

.stage-fullscreen-control {
  position: absolute;
  z-index: 5;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
}

.stage-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 8px 28px rgba(40, 28, 14, 0.14);
  backdrop-filter: blur(10px);
}

.stage-toggle .stage-pill {
  box-shadow: none;
  background: transparent;
}

.stage-toggle .stage-pill.is-active {
  background: linear-gradient(135deg, #5f8f51, #c28a38);
  color: #fffdf7;
}

.stage-pill {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 8px 28px rgba(40, 28, 14, 0.14);
  backdrop-filter: blur(10px);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-family: "Noto Serif TC", "PingFang TC", serif;
}

.stage-pill:hover {
  filter: brightness(1.03);
}

.stage-pill[aria-pressed="true"] {
  background: var(--accent);
  color: #fffdf7;
}

/* ---------- 種植面板 ---------- */
.stage-panel {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  padding: 16px 18px 18px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 20px 60px rgba(40, 28, 14, 0.24);
  backdrop-filter: blur(14px);
}

.stage-panel[hidden] {
  display: none;
}

.stage-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stage-panel-head h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.12em;
  font-family: "Noto Serif TC", serif;
}

.stage-panel-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
}

.stage-crop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.stage-crop {
  appearance: none;
  border: 1px solid rgba(61, 46, 31, 0.12);
  border-radius: 14px;
  background: #fffdf7;
  padding: 12px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font-family: "Noto Serif TC", "PingFang TC", serif;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stage-crop:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(40, 28, 14, 0.14);
}

.stage-crop:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.stage-crop-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.stage-crop-meta {
  font-size: 12px;
  color: var(--ink-soft);
}

.stage-crop-lock {
  font-size: 11px;
  color: #b06a3a;
}

/* ---------- 夥伴卡片（小屋） ---------- */
.house-card {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(360px, calc(100% - 24px));
  padding: 18px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 20px 60px rgba(40, 28, 14, 0.24);
  backdrop-filter: blur(14px);
  text-align: center;
}

.house-card[hidden] {
  display: none;
}

.house-card img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto 8px;
  display: block;
}

.house-card h2 {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: 0.1em;
  font-family: "Noto Serif TC", serif;
}

.house-card p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-soft);
}

.house-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.house-empty {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  margin: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.house-empty[hidden] {
  display: none;
}

/* ---------- 牆上語錄相框 ---------- */
.house-frame {
  position: absolute;
  z-index: 4;
  left: var(--frame-x, 77%);
  top: var(--frame-y, 20%);
  width: min(230px, 34vw);
  min-height: 96px;
  padding: 16px 16px 22px;
  /* 邊框由 .fr-* 相框樣式決定（原木/胡桃/描金/墨黑/純白/竹綠/無框） */
  background: linear-gradient(160deg, #fffdf7, #fbf2e2);
  box-shadow: 0 10px 30px rgba(40, 28, 14, 0.22);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-align: center;
  overflow: hidden;
  font-family: "Noto Serif TC", serif;
  transform: translate(-50%, -50%) scale(var(--frame-scale, 1)) rotate(var(--frame-rotate, 0deg));
  transform-origin: center;
  touch-action: none;
  transition: box-shadow 0.15s ease;
}

.house-frame:hover {
  box-shadow: 0 10px 22px rgba(50, 35, 18, 0.24), inset 0 0 0 5px #fffaf0;
}

.house-frame.is-dragging { cursor: grabbing; }
.house-frame.is-holding {
  box-shadow: 0 0 0 3px rgba(255, 242, 193, 0.95), 0 12px 28px rgba(67, 48, 25, 0.34);
}
.house-frame.is-selected {
  box-shadow: 0 0 0 3px rgba(255, 232, 165, 0.98), 0 12px 28px rgba(67, 48, 25, 0.34);
}

/* 長按物件後出現的四角控制點：左上縮小、右上左轉、左下右轉、右下放大。 */
.house-transform-handles {
  position: absolute;
  z-index: 86;
  left: var(--transform-x, 0px);
  top: var(--transform-y, 0px);
  width: var(--transform-w, 46px);
  height: var(--transform-h, 46px);
  border: 2px solid rgba(255, 237, 177, 0.98);
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px rgba(85, 60, 28, 0.52), 0 8px 20px rgba(45, 30, 14, 0.28);
  pointer-events: none;
}
.house-transform-handles[hidden] { display: none; }
.house-transform-handles button {
  position: absolute;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid #fff7dc;
  border-radius: 9px;
  background: #6a4a2a;
  color: #fff9e9;
  box-shadow: 0 3px 8px rgba(42, 28, 12, 0.36);
  font: 700 18px/1 "Noto Serif TC", serif;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.house-transform-handles button:hover,
.house-transform-handles button:focus-visible { background: #8e6639; outline: 3px solid rgba(255, 223, 133, 0.65); outline-offset: 2px; }
.house-transform-status {
  position: absolute;
  left: 50%;
  top: -43px;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(280px, 76vw);
  padding: 6px 11px;
  border: 1px solid rgba(255, 241, 194, 0.9);
  border-radius: 999px;
  background: rgba(76, 51, 25, 0.9);
  color: #fff9e8;
  box-shadow: 0 4px 12px rgba(42, 28, 12, 0.28);
  font: 700 12px/1.35 "Noto Serif TC", serif;
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: none;
}
.house-transform-handles [data-transform-action="scale-down"],
.house-transform-handles [data-frame-action="scale-down"] { left: -16px; top: -16px; }
.house-transform-handles [data-transform-action="turn-left"],
.house-transform-handles [data-frame-action="turn-left"] { right: -16px; top: -16px; }
.house-transform-handles [data-transform-action="turn-right"],
.house-transform-handles [data-frame-action="turn-right"] { left: -16px; bottom: -16px; }
.house-transform-handles [data-transform-action="scale-up"],
.house-transform-handles [data-frame-action="scale-up"] { right: -16px; bottom: -16px; }

/* 長按拖曳的即時回饋：起點到指標的虛線，與還沒真正放下的半透明相框殘影。 */
.house-drag-guide {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: none;
  pointer-events: none;
}
.house-drag-guide.is-visible { display: block; }
.house-drag-guide-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.house-drag-guide-line line {
  stroke: #ffe8a5;
  stroke-width: 0.46;
  stroke-dasharray: 1.4 1.1;
  opacity: 0.96;
}
.house-drag-guide-ghost {
  position: absolute;
  left: var(--guide-x, 50%);
  top: var(--guide-y, 50%);
  width: var(--guide-w, 180px);
  height: var(--guide-h, 120px);
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255, 232, 165, 0.98);
  border-radius: 8px;
  background: rgba(255, 249, 227, 0.18);
  box-shadow: 0 8px 22px rgba(65, 46, 24, 0.22);
  animation: house-drag-ghost 0.72s ease-in-out infinite alternate;
}
.house-drag-guide.is-ready .house-drag-guide-ghost {
  border-style: solid;
  background: rgba(255, 249, 227, 0.28);
}
@keyframes house-drag-ghost {
  from { opacity: 0.62; }
  to { opacity: 1; }
}

/* ── 相框樣式（可選）── */
.house-frame.fr-wood { border: 7px solid #c9a05b; border-radius: 8px; }
.house-frame.fr-walnut { border: 9px solid #6f4a2f; border-radius: 4px; box-shadow: 0 10px 30px rgba(30,18,10,.3), inset 0 0 0 2px #a97d54; }
.house-frame.fr-gold { border: 8px solid #d4af5f; border-radius: 6px; box-shadow: 0 10px 30px rgba(90,66,20,.3), inset 0 0 0 3px #f2dfa8; }
.house-frame.fr-black { border: 6px solid #2f2b26; border-radius: 3px; box-shadow: 0 10px 28px rgba(0,0,0,.32); }
.house-frame.fr-white { border: 10px solid #f7f3ea; border-radius: 3px; box-shadow: 0 8px 24px rgba(60,45,25,.22), inset 0 0 0 1px #ded4c2; }
.house-frame.fr-bamboo { border: 8px solid #9db36a; border-radius: 10px; box-shadow: 0 10px 26px rgba(60,80,30,.25), inset 0 0 0 2px #c3d49a; }
.house-frame.fr-none { border: 0; border-radius: 4px; box-shadow: 0 8px 22px rgba(40,28,14,.28); }

.house-frame-pick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0 12px;
}
.house-frame-pick button {
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  padding: 0;
  color: #4a3a24;
  background: #f6efe0;
  border: 4px solid #c9a05b;
}
.house-frame-pick button.is-active { outline: 3px solid #6f9a52; outline-offset: 1px; }
.house-frame-pick .frpick-wood { border-color: #c9a05b; }
.house-frame-pick .frpick-walnut { border-color: #6f4a2f; }
.house-frame-pick .frpick-gold { border-color: #d4af5f; }
.house-frame-pick .frpick-black { border-color: #2f2b26; }
.house-frame-pick .frpick-white { border-color: #f7f3ea; box-shadow: inset 0 0 0 1px #ded4c2; }
.house-frame-pick .frpick-bamboo { border-color: #9db36a; }
.house-frame-pick .frpick-none { border-color: transparent; box-shadow: inset 0 0 0 1px #ded4c2; }
.house-frame-picktitle { margin: 10px 0 2px; font-size: 12px; color: var(--ink-soft); }

.house-frame-quote {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* 提示不常駐：平常收起來，滑到相框上（或剛進小屋幾秒）才浮現一顆小角標 */
.house-frame-hint {
  position: absolute;
  z-index: 3;
  right: 6px;
  bottom: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(45, 33, 18, 0.72);
  color: #fff5e4;
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.house-frame:hover .house-frame-hint,
.house-frame:focus-visible .house-frame-hint,
.house-frame.hint-peek .house-frame-hint {
  opacity: 1;
  transform: translateY(0);
}

.house-frame-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.12s ease;
}

.house-frame-image-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f4ead8;
}

/* 有圖時：圖鋪滿整個框內，不留白邊（框本身就是相框的邊） */
.house-frame.has-image {
  padding: 0;
  gap: 0;
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.house-frame.has-image .house-frame-quote { display: none; }

/* 智慧語錄卡：整張是圖，一樣鋪滿 */
.house-frame.has-card .house-frame-img {
  object-fit: cover;
}

.house-quote-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(61, 46, 31, 0.1);
}

.house-upload {
  cursor: pointer;
}

.house-tools-sep {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.house-quote-panel {
  position: absolute;
  /* 語錄面板必須高於 HUD、相框與畫布，手機上才不會被遮住而點不到上傳。 */
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px));
  height: min(620px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 16px 18px 18px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 20px 60px rgba(40, 28, 14, 0.28);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 智慧語錄設定固定置中：相框本身才是可長按拖曳的家具。 */
.house-quote-panel.is-dragged {
  transform: translate(-50%, -50%);
}

.house-quote-panel[hidden] {
  display: none;
}

/* 設定面板內容只在面板內捲動，不能把小屋畫面撐破。 */
.house-quote-panel > .house-fold:not(:first-of-type)[open] > .house-fold-body {
  max-height: min(240px, 34dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.house-quote-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  min-height: 0;
}

/* 只有「換內容」這一節吃掉可捲動空間；內容必須裁在這一節內，
   才不會在桌機縮放時壓到下方的相框設定標題。 */
.house-quote-panel > .house-fold {
  flex: 0 0 auto;
  min-width: 0;
  border-top: 1px solid rgba(61, 46, 31, 0.10);
}
.house-quote-panel > .house-fold:first-of-type { border-top: 0; }
.house-quote-panel > .house-fold:not(:first-of-type) {
  position: relative;
  z-index: 2;
  background: var(--card);
}
.house-fold > summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  cursor: pointer;
  color: var(--ink);
  font-family: "Noto Serif TC", "PingFang TC", serif;
  font-weight: 700;
  list-style: none;
  touch-action: manipulation;
}
.house-fold > summary::-webkit-details-marker { display: none; }
.house-fold > summary::after { content: "⌄"; margin-left: auto; color: var(--ink-soft); }
.house-fold[open] > summary::after { transform: rotate(180deg); }
.house-fold-body { min-width: 0; padding: 0 0 12px; }
.house-quote-panel > .house-fold:first-of-type[open] {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.house-quote-panel > .house-fold:first-of-type[open] > .house-fold-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 4px;
}

/* 所有設定段落在各自的捲動範圍內呈現，縮放頁面時不會壓到相鄰段落。 */
.house-quote-panel > .house-fold > .house-fold-body {
  min-width: 0;
  overflow-x: hidden;
}
.house-quote-tools { position: relative; z-index: 1; }
.house-upload { min-height: 42px; touch-action: manipulation; }

.house-quote-item {
  appearance: none;
  border: 1px solid rgba(61, 46, 31, 0.12);
  border-radius: 12px;
  background: #fffdf7;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  font-family: "Noto Serif TC", "PingFang TC", serif;
  transition: background 0.15s ease, transform 0.1s ease;
}

.house-quote-item:hover {
  background: #f5ece0;
  transform: translateX(2px);
}

.house-frame-adjust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8f0e4;
}

.house-frame-adjust[hidden] { display: none; }
.house-frame-adjust p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 12px; }
.house-frame-adjust label { display: grid; gap: 4px; font-size: 12px; color: var(--ink); }
.house-frame-adjust input { width: 100%; accent-color: var(--accent); }
.house-adjust-reset { grid-column: 1 / -1; justify-self: start; border: 0; background: transparent; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; font-size: 12px; }

.house-object-adjust {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 14px;
  background: #f8f0e4;
  text-align: left;
}
.house-object-adjust > p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.house-object-adjust label { display: grid; gap: 5px; color: var(--ink); font-size: 12px; }
.house-object-adjust label span { display: flex; justify-content: space-between; gap: 10px; }
.house-object-adjust input[type="range"] { width: 100%; accent-color: var(--accent); }
.house-range-number {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px auto;
  align-items: center;
  gap: 6px;
}
.house-range-number input[type="range"] { min-width: 0; }
.house-range-number input[type="number"],
.house-number-only input[type="number"] {
  width: 60px;
  min-height: 30px;
  padding: 4px 6px;
  border: 1px solid rgba(61, 46, 31, 0.22);
  border-radius: 7px;
  background: #fffdf7;
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.house-range-number em,
.house-number-only em { font-style: normal; color: var(--ink-soft); }
.house-number-only { display: flex; align-items: center; gap: 6px; }
.house-object-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.house-object-quick button {
  flex: 1 1 auto;
  border: 1px solid rgba(61, 46, 31, 0.15);
  border-radius: 999px;
  background: #fffdf7;
  color: var(--ink);
  padding: 7px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.house-frame-transform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.house-frame-transform > p,
.house-frame-transform .house-adjust-reset { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .house-frame {
    width: min(200px, 44vw);
  }
  .house-frame-transform { grid-template-columns: 1fr; }
  .house-frame-transform > p,
  .house-frame-transform .house-adjust-reset { grid-column: 1; }
}

/* ---------- 提示 ---------- */
.stage-toast {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(61, 46, 31, 0.82);
  color: #fff8ee;
  font-size: 13px;
  letter-spacing: 0.04em;
  max-width: calc(100% - 32px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.stage-toast.is-on {
  opacity: 1;
}

.stage-loading {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  gap: 10px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 244, 214, 0.55), transparent 55%),
    linear-gradient(180deg, #dcebe3, #eef3e4 40%, #a9d884);
  color: var(--ink);
  font-family: "Noto Serif TC", serif;
  letter-spacing: 0.18em;
  font-size: 15px;
  text-align: center;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.stage-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 720px) {
  .stage-wrap {
    min-height: 440px;
  }

  .stage-stats {
    top: 10px;
  }

  .stage-stat {
    padding: 6px 10px;
    font-size: 12px;
  }

  .stage-hud {
    top: auto;
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px));
    left: max(10px, env(safe-area-inset-left));
    justify-content: center;
  }

  .stage-fullscreen-control {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    font-size: 12px;
    padding: 7px 10px;
  }

  .stage-toast {
    bottom: max(140px, calc(env(safe-area-inset-bottom) + 140px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-toast,
  .stage-loading,
  .stage-crop {
    transition: none;
  }
}

/* ---------- 小屋佈置（裝飾商店＋擺放） ---------- */
.house-shop-panel {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 24px));
  max-height: 78%;
  padding: 16px 18px 18px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 20px 60px rgba(40, 28, 14, 0.28);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
}

.house-shop-panel[hidden] {
  display: none;
}

.house-shop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.house-materials {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}

.house-materials span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(120, 145, 86, 0.1);
  color: #56432f;
  font-size: 12px;
}

.house-materials i { font-style: normal; font-weight: 800; }

@media (max-width: 680px) {
  .house-materials { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
}

.house-shop-tabs .stage-pill.is-active {
  background: var(--ink, #3d2e1f);
  color: #fffdf7;
}

.house-shop-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.house-shop-list[hidden] {
  display: none;
}

.house-shop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(61, 46, 31, 0.12);
  border-radius: 12px;
  background: #fffdf7;
  padding: 10px 12px;
}

.house-shop-icon {
  font-size: 22px;
  flex: 0 0 auto;
}

.house-shop-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.house-shop-main b {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-family: "Noto Serif TC", "PingFang TC", serif;
}

.house-shop-main small {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.house-shop-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.house-shop-side i {
  font-style: normal;
  font-size: 13px;
  color: var(--ink);
}

.house-shop-side .stage-pill:disabled,
.house-shop-side .stage-pill[disabled] {
  opacity: 0.45;
  cursor: default;
}

.house-own-empty {
  margin: 8px 0;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}

.house-own-empty[hidden] {
  display: none;
}

/* 面板可拖曳：標題列是把手；位移用 --drag-x/y 疊在原本的定位之上 */
.is-drag-handle { user-select: none; -webkit-user-select: none; touch-action: none; }
.house-shop-panel.is-dragged,
.house-quote-panel.is-dragged {
  /* 原本靠 translate(-50%,-50%) 置中，拖曳位移要疊在它後面，不能取代它 */
  transform: translate(-50%, -50%) translate(var(--drag-x, 0), var(--drag-y, 0));
}
.house-card.is-dragged {
  transform: translateX(-50%) translate(var(--drag-x, 0), var(--drag-y, 0));
}
.stage-panel-head.is-drag-handle::before {
  content: "⠿";
  margin-right: 8px;
  color: var(--ink-soft);
  opacity: 0.55;
  font-size: 13px;
  letter-spacing: -2px;
}

/* 拖過的視窗留在最上層；桌機與手機的手勢都走 Pointer Events。 */
.house-shop-panel.is-dragged,
.house-quote-panel.is-dragged,
.house-card.is-dragged { z-index: 60; }

@media (max-width: 720px) {
  .stage-wrap:fullscreen { min-height: 0; }
  .house-quote-panel {
    width: calc(100% - 16px);
    height: min(760px, calc(100dvh - 16px));
    max-height: calc(100dvh - 16px);
    padding: 12px 14px 14px;
    border-radius: 18px;
  }
  .house-quote-panel .stage-panel-head h2 { font-size: 17px; }
  .house-cardpick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .house-cardpick-item { min-height: 124px; }
  .house-quote-item { min-height: 48px; }
}

/* 小屋音樂面板（播放邏輯沿用 bgm.js） */
.house-bgm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
}
.house-bgm-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.house-bgm-row .fx-toggle { display: flex; gap: 6px; }
.house-bgm-row .fx-btn {
  padding: 6px 14px;
  border: 1px solid rgba(120, 100, 70, 0.3);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.9);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.house-bgm-row .fx-btn.is-active { background: #6f9a52; border-color: #6f9a52; color: #fff; }
.house-bgm-row .bgm-select,
.house-bgm-row .bgm-volume { width: 100%; }
.house-bgm-row .bgm-select {
  padding: 8px 10px;
  border: 1px solid rgba(120, 100, 70, 0.3);
  border-radius: 10px;
  background: rgba(255, 253, 246, 0.95);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}

/* 換地板 */
.house-floor-hint {
  margin: 6px 0 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.house-floor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.house-floor-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: rgba(255, 253, 246, 0.9);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.house-floor-chip b { font-size: 12px; font-weight: 600; }
.house-floor-chip.is-active {
  border-color: #6f9a52;
  background: #eef6e3;
}
.house-floor-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: inset 0 0 0 1px rgba(120, 100, 70, 0.18);
}
.house-floor-swatch[data-floor="warm_wood"] { background: repeating-linear-gradient(180deg, #c8a271 0 6px, #c39a68 6px 12px); }
.house-floor-swatch[data-floor="pale_wood"] { background: repeating-linear-gradient(180deg, #e2cba0 0 6px, #d8be90 6px 12px); }
.house-floor-swatch[data-floor="walnut_wood"] { background: repeating-linear-gradient(180deg, #6f4a2f 0 6px, #5e3d25 6px 12px); color: #f3e6cf; }
.house-floor-swatch[data-floor="tatami"] { background: #cbd79a; }
.house-floor-swatch[data-floor="stone_tile"] { background: #c7c2b8; }
.house-floor-swatch[data-floor="checker"] { background: repeating-conic-gradient(#efe6d2 0 25%, #8a6f4d 0 50%) 0 0 / 22px 22px; }
.house-floor-swatch[data-floor="moss"] { background: #8fae63; }
.house-floor-swatch[data-floor="none"] { background: #f0e7d5; }

/* 夥伴安排 */
.house-pets-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.house-pets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}

.house-pets-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line, rgba(120, 96, 64, 0.25));
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.72);
}

.house-pets-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(120, 96, 64, 0.08);
}

.house-pets-avatar--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.house-pets-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.house-pets-info strong {
  font-size: 14px;
}

.house-pets-where {
  font-size: 11px;
  color: var(--ink-soft);
}

.house-pets-where[data-state="在心田"] { color: #4d7a4d; }
.house-pets-where[data-state="休息中"] { color: #8a7355; }

.house-pets-actions {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}

.house-pets-actions .stage-pill {
  padding: 5px 10px;
  font-size: 11px;
}

.house-pets-actions .stage-pill.is-active,
.house-pets-actions .stage-pill[disabled] {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 560px) {
  .house-pets-row {
    flex-wrap: wrap;
  }
  .house-pets-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.house-place-hint {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: max(14px, env(safe-area-inset-top));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 12px 36px rgba(40, 28, 14, 0.24);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.house-place-hint[hidden] {
  display: none;
}

/* 相框面板：智慧語錄卡選區 */
.house-cardpick {
  margin-bottom: 12px;
}

.house-cardpick[hidden] {
  display: none;
}

.house-cardpick-title {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}

.house-cardpick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-height: min(320px, 42dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 2px 9px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: #9b7146 rgba(114, 77, 39, 0.12);
}
.house-cardpick-grid::-webkit-scrollbar { width: 9px; }
.house-cardpick-grid::-webkit-scrollbar-track { background: rgba(114, 77, 39, 0.12); border-radius: 999px; }
.house-cardpick-grid::-webkit-scrollbar-thumb { background: #9b7146; border: 2px solid #f8f0e4; border-radius: 999px; }

.house-cardpick-item {
  appearance: none;
  border: 1px solid rgba(61, 46, 31, 0.14);
  border-radius: 10px;
  background: #fffdf7;
  min-height: 108px;
  padding: 6px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.house-cardpick-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(40, 28, 14, 0.18);
}

.house-cardpick-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f5ecdc;
  border-radius: 7px;
  display: block;
}