:root {
  --ink: #4a3a55;
  --ink-soft: #8d7a99;
  --paper: #fffaf3;
  --pink: #ff9ec4;
  --pink-deep: #ff7fb0;
  --cream: #fff8ec;
  --mint: #9be3d3;
  --lemon: #ffe08a;
  --lilac: #c9b6f7;
  --sky: #9fd4ff;
  --line: rgba(74, 58, 85, .14);
  --accent: #8ed4ff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  /* 马卡龙糖果屋：浅粉底 + 白色波点，像糖纸 */
  background-color: #ffe9f2;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .92) 0 5px, rgba(255, 255, 255, 0) 5.6px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .55) 0 3px, rgba(255, 255, 255, 0) 3.6px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
  color: var(--ink);
  font-family: "Yuanti SC", "YouYuan", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-appearance: none; }
input { font: inherit; }

/* ---------- 顶栏 ---------- */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #fffdf8 0%, #fff6ee 100%);
  border-bottom: 3px solid #ffd9e8;
  box-shadow: 0 3px 0 rgba(255, 255, 255, .7) inset;
}
.brand {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 1px;
  color: #d1487c;
  text-shadow: 0 2px 0 #fff, 0 3px 0 rgba(255, 158, 196, .55);
}
.room-nav { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.room-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #ffd9e8;
  box-shadow: 0 3px 0 rgba(74, 58, 85, .10);
  font-size: 15px;
  white-space: nowrap;
  touch-action: manipulation;
}
.room-nav button:nth-child(1) { background: #eaf7ff; border-color: var(--sky); }
.room-nav button:nth-child(2) { background: #fff0f6; border-color: var(--pink); }
.room-nav button:nth-child(3) { background: #fffaec; border-color: var(--lemon); }
.room-nav button.active {
  background: linear-gradient(180deg, #ffb3ce 0%, var(--pink-deep) 100%);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 4px 0 #e0668f;
}
.top-right { display: flex; align-items: center; gap: 12px; }
.status { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.status.online { color: #1d8a63; }
.text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
  touch-action: manipulation;
}
.text-btn:hover { color: var(--ink); }

/* ---------- 城堡外观：总入口 ---------- */
/* 城堡插画是竖构图（1100×1466），卡片的比例跟着插画走，两边就不会再留出两条天空色空条 */
.castle-view {
  position: relative;
  width: min(100%, calc((100vh - 130px) * 0.7503));
  aspect-ratio: 1100 / 1466;
  height: auto;
  max-height: none;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, #bfe4ff 0%, #ffe3f0 100%);
  border: 6px solid #fff;
  box-shadow: 0 8px 0 #ffc9dd, 0 14px 24px rgba(209, 72, 124, .18);
}
.castle-art {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  cursor: pointer;
}
.castle-head {
  position: absolute; top: 5%; left: 0; right: 0;
  text-align: center;
  pointer-events: none;
}
.castle-title {
  display: inline-block;
  padding: 9px 24px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid #ffd0e2;
  font-size: clamp(18px, 3vw, 27px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #d1487c;
  box-shadow: 0 5px 0 rgba(209, 72, 124, .28);
}
.castle-sub {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  font-size: 13px;
  color: #6a5680;
}
.castle-hint {
  position: absolute; bottom: 21%; left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  text-align: center;
  font-size: 13px;
  color: #6a5680;
  pointer-events: none;
  animation: hintPulse 2.4s ease-in-out infinite;
}
@keyframes hintPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.castle-doors {
  position: absolute; bottom: 5%; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  width: min(92%, 620px);
}
.castle-door {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 5px 0 rgba(74, 58, 85, .16);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  touch-action: manipulation;
}
.castle-door:nth-child(1) { background: #eaf7ff; border-color: var(--sky); }
.castle-door:nth-child(2) { background: #fff0f6; border-color: var(--pink); }
.castle-door:nth-child(3) { background: #fffaec; border-color: var(--lemon); }
.castle-door:hover { background: #fff; transform: translateY(-2px); }
.castle-door:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(74, 58, 85, .16); }

/* ---------- 舞台：房间是主角，UI 浮在它上面 ---------- */
/* 底部留出 92px 给悬浮的走位箭头和说话按钮；房间铺满这块区域，比画面大时靠拖动看别处 */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px 92px;
  overflow: hidden;
}
.room {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 尺寸由 engine.js 按 1280×787 铺满算出来，transform 由相机（拖动 + 跟随）接管 */
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 1920 / 787;
  border-radius: 26px;
  overflow: hidden;
  background-color: #ffeaf3;
  background-size: cover;
  background-position: center center;
  border: 6px solid #fff;
  box-shadow: 0 8px 0 #ffc9dd, 0 14px 24px rgba(209, 72, 124, .16) inset, 0 12px 22px rgba(209, 72, 124, .14);
  touch-action: none;
}

/* ---------- 自由摆放的家具 ---------- */
.items { position: absolute; inset: 0; pointer-events: none; }
.item {
  position: absolute;
  width: 12%;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(var(--scale, 1));
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transition: filter .12s;
}
.item img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 4px rgba(74, 58, 85, .22));
  pointer-events: none;
}
/* 层级由引擎按脚尖统一算（见 engine.js 的 zFor）；只有「正在拖的那件」临时提到最前，
   免得拖一件小件时被前面的家具盖住看不见。 */
.item.dragging { cursor: grabbing; filter: brightness(1.06); z-index: 8000 !important; }
.item.dragging img { filter: drop-shadow(0 14px 9px rgba(74, 58, 85, .3)); }
@keyframes drop {
  0%   { opacity: 0; transform: translate(-50%, -132%) scale(var(--scale, 1)); }
  62%  { opacity: 1; transform: translate(-50%, -96%) scale(var(--scale, 1)); }
  100% { opacity: 1; transform: translate(-50%, -100%) scale(var(--scale, 1)); }
}
.item.just-placed { animation: drop .34s ease-out; }
/* 收起按钮：平时藏着，选中或拖动这件家具时才露出来；26px 可见小圆 + 44×44 的手指热区 */
.item-remove {
  position: absolute;
  top: -20px; right: -20px;
  z-index: 3;
  width: 44px; height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 13px, rgba(255,255,255,0) 13.6px);
  filter: drop-shadow(0 2px 2px rgba(74, 58, 85, .2));
  color: #b45b7a;
  font-size: 17px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  touch-action: manipulation;
}
/* 只有选中或拖动这件家具时才露出「×」，平时一律藏着 */
.item.dragging .item-remove,
.item.sel .item-remove { opacity: 1; pointer-events: auto; }
.room:not(.editing) .item-remove { opacity: 0; pointer-events: none; }
.item-remove:active { transform: scale(.92); }

/* ---------- 布置模式：家具才可交互，人物完全退场（不挡家具、也不留残影） ---------- */
.room:not(.editing) .item { pointer-events: none; }
.room.editing .character,
.room.editing .companion,
.room.editing .bubble {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease-out;
}
/* 布置模式的虚线框挂在舞台上：房间比画面大，画在房间上会跑到屏幕外面去 */
.stage.editing::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 2px dashed rgba(255, 255, 255, .9);
  border-radius: 16px;
  pointer-events: none;
  z-index: 60;
}
.edit-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffc2d8 0%, var(--pink-deep) 100%);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 5px 0 #d95f8c, 0 8px 16px rgba(209, 72, 124, .26);
}
.edit-btn[aria-pressed="true"] svg { stroke: #fff; }

/* ---------- 伙伴：泡泡（汐汐的第一个伙伴，永远在场） ---------- */
.companion {
  position: absolute;
  bottom: 9%;
  left: 20%;
  height: 50%;
  width: auto;
  /* 3000 = 「角色层」：汐汐和泡泡永远画在家具前面，谁也挡不住她们（阿宇 11-15 拍板） */
  z-index: 3000;
  cursor: pointer;
  --flip: 1;
  transform: translateX(-50%) scaleX(var(--flip, 1));
  animation: float 2.8s ease-in-out infinite;
  will-change: left;
}
.companion img {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 5px 4px rgba(74, 58, 85, .2));
  pointer-events: none;
}
@keyframes float {
  0%, 100% { transform: translate(-50%, 0) scaleX(var(--flip, 1)); }
  50%      { transform: translate(-50%, -9px) scaleX(var(--flip, 1)); }
}
.companion.facing-left { --flip: -1; }
.companion::before, .companion::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 26%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(120, 180, 230, .65);
  animation: bubbleUp 3s ease-out infinite;
  pointer-events: none;
}
.companion::after { width: 7px; height: 7px; right: 0; top: 34%; animation-delay: 1.4s; }
@keyframes bubbleUp {
  0%   { opacity: 0; transform: translateY(6px) scale(.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-42px) scale(1.1); }
}

/* ---------- 角色 ---------- */
.character {
  position: absolute;
  bottom: 4.5%;
  left: 30%;
  height: 58%;
  width: auto;
  z-index: 3000;
  cursor: pointer;
  transform: translateX(-50%) scaleX(var(--flip, 1));
  will-change: left;
}
.character img {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 5px 4px rgba(74, 58, 85, .2));
  pointer-events: none;
}
.character.facing-left { --flip: -1; }
.character.walking img { animation: bob .34s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-7px) rotate(1deg); } }
.bubble {
  position: absolute;
  /* 5000 = 气泡层：永远压在房间里的所有东西之上，不会被柜子或桌上的小件盖住 */
  z-index: 5000;
  bottom: 64%;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(66vw, 300px);
  padding: 11px 18px;
  border-radius: 20px;
  background: #fff;
  border: 3px solid #ffd0e2;
  box-shadow: 0 5px 0 rgba(209, 72, 124, .2);
  font-size: 16px;
  line-height: 1.55;
  text-align: center;
  color: var(--ink);
  pointer-events: none;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 18px; height: 18px;
  margin-left: -9px;
  background: #fff;
  border-right: 3px solid #ffd0e2;
  border-bottom: 3px solid #ffd0e2;
  transform: rotate(45deg);
  border-radius: 0 0 6px 0;
}

/* ---------- 悬浮控制条：走位箭头 + 说话按钮，压在画面下缘，不占房间高度 ---------- */
.stage-tools {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 12px;
  pointer-events: none;
}
.stage-tools > * { pointer-events: auto; }

/* ---------- 底部抽屉：点「家具」才滑出来，平时把整块屏幕留给房间 ---------- */
.toolbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  max-height: 52vh;
  overflow-y: auto;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #fffaf0 0%, #fffdf8 100%);
  border-top: 3px solid #ffe0ec;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 24px rgba(209, 72, 124, .16);
  transform: translateY(102%);
  transition: transform .26s ease-out;
}
.toolbar.open { transform: translateY(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer-close {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #ffd9e8;
  color: #b4507a;
  font-size: 13px;
  touch-action: manipulation;
}
.tools-right { display: flex; align-items: flex-end; gap: 10px; }
.bag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid #ffd9e8;
  box-shadow: 0 5px 0 #ffc9dd, 0 8px 16px rgba(209, 72, 124, .18);
  color: #b4507a;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  touch-action: manipulation;
}
.bag-btn svg {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.bag-btn span { pointer-events: none; }
.bag-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 #ffc9dd; }
.move-box { display: flex; align-items: flex-end; gap: 10px; }
.move-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ffd9e8;
  box-shadow: 0 4px 0 #ffc9dd, 0 8px 14px rgba(209, 72, 124, .16);
  font-size: 24px;
  line-height: 1;
  touch-action: none;
}
.move-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #ffc9dd; }
/* 缩放：竖排贴在画面右侧，上面加下面减；手机上也可以两指捏 */
.zoom-box {
  position: absolute;
  right: 10px;
  bottom: 84px;
  z-index: 92;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zoom-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  border: 2px solid #ffd9e8;
  box-shadow: 0 3px 0 #ffc9dd, 0 6px 12px rgba(209, 72, 124, .18);
  color: #d1487c;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}
.zoom-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #ffc9dd; }
.hint { font-size: 12px; color: var(--ink-soft); }
.pick-label { font-size: 13px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 6px; }
.furniture-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.furniture-bar::-webkit-scrollbar { display: none; }
.bar-sep {
  flex: 0 0 auto;
  align-self: center;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fff;
  border: 2px dashed #ddd0e6;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 1px;
  writing-mode: vertical-rl;
}
.pick {
  flex: 0 0 auto;
  width: 92px;
  min-height: 96px;
  padding: 6px 6px 8px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid #ffe4ee;
  box-shadow: 0 4px 0 #ffd7e6;
  text-align: center;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink);
  touch-action: manipulation;
}
.pick.common { background: #fffdf7; border-color: #ffeecb; box-shadow: 0 4px 0 #ffe4b0; }
.pick.selected {
  border-color: var(--pink-deep);
  background: #fff;
  box-shadow: 0 4px 0 #e0668f, 0 0 0 4px rgba(255, 159, 196, .35);
  transform: translateY(-2px);
}
.pick img {
  display: block;
  width: 100%;
  height: 48px;
  object-fit: contain;
  margin-bottom: 4px;
  pointer-events: none;
}

/* ---------- 家长面板 ---------- */
.panel {
  position: fixed; inset: 0;
  background: rgba(74,58,85,.32);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.panel-card {
  position: relative;
  width: min(340px, 88vw);
  padding: 24px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 8px 0 rgba(74,58,85,.14);
}
.panel-card h2 { margin: 0 0 16px; font-size: 18px; font-weight: 600; }
.panel-card input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
}
.primary {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  background: var(--pink);
  color: #fff;
  font-size: 14px;
  margin-bottom: 8px;
}
.close {
  position: absolute; top: 6px; right: 8px;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  touch-action: manipulation;
}
.msg { min-height: 18px; margin: 6px 0 0; font-size: 12px; color: #b45b7a; }
#loggedView .text-btn { width: 100%; text-align: center; }

@media (max-width: 640px) {
  .brand { display: none; }
  .topbar { gap: 8px; padding: 8px 10px; align-items: center; }
  /* 顶栏放不下四个药丸：让它横向滑动，别把最后一个挤出去 */
  .room-nav { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .room-nav::-webkit-scrollbar { display: none; }
  .room-nav button { padding: 0 13px; font-size: 13px; flex: 0 0 auto; }
  .status { display: none; }
  /* 竖屏：房间按宽度等比缩放，整间房都在画面里，不再被 height:100% 裁掉两边 */
  .stage { padding: 6px 8px 84px; }
  .toolbar { padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .pick-label { font-size: 12px; margin: 0 0 4px; }
  .hint { display: none; }
  .castle-doors { gap: 8px; bottom: 3%; }
  .castle-door { padding: 0 16px; font-size: 14px; min-height: 44px; }
  .castle-sub { display: none; }
  .castle-hint { bottom: 17%; font-size: 12px; }
  .pick { width: 88px; min-height: 92px; }
  .pick img { height: 50px; }
}

/* ---------- 跟泡泡说话：一个悬浮的大药丸按钮 + 底部说话面板 ---------- */
.talk-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffc2d8 0%, var(--pink-deep) 100%);
  border: 3px solid #fff;
  box-shadow: 0 6px 0 #d95f8c, 0 10px 18px rgba(209, 72, 124, .28);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(180, 58, 96, .5);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.talk-btn svg {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.talk-btn span { pointer-events: none; }
.talk-btn:active { transform: translateY(2px); box-shadow: 0 4px 0 #d95f8c; }

.sheet {
  position: fixed; inset: 0;
  z-index: 95;
  background: rgba(74, 58, 85, .34);
  display: flex;
  align-items: flex-end;
}
.sheet-card {
  position: relative;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 22px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  border-top: 5px solid #ffd0e2;
  background: var(--paper);
  box-shadow: 0 -8px 0 rgba(209, 72, 124, .14);
}
.sheet-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #d1487c; }
.ask-row { display: flex; gap: 8px; align-items: stretch; }
.ask-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 2px solid rgba(74, 58, 85, .18);
  border-radius: 14px;
  background: #fff;
  font-size: 17px;
  color: var(--ink);
}
.ask-send {
  flex: 0 0 auto;
  min-width: 92px;
  height: 52px;
  border-radius: 14px;
  background: var(--pink);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 4px 0 rgba(74, 58, 85, .16);
}
.talk-hint { margin: 10px 0 12px; font-size: 14px; line-height: 1.5; color: #6a5680; }
.talk-hint.warn { color: #a83c5b; }
.mic-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 16px;
  background: #eaf6ff;
  color: #1b4d80;
  font-size: 16px;
}
.mic-btn svg {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.mic-btn.listening { background: #bfe7ff; color: #10405f; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  min-height: 48px;
  max-width: 100%;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #ffe4ee;
  box-shadow: 0 3px 0 #ffd7e6;
  font-size: 15px;
  text-align: left;
}
.chip:nth-child(3n+1) { background: #fff4f9; border-color: #ffcee2; }
.chip:nth-child(3n+2) { background: #f0fbff; border-color: #bfe8ff; box-shadow: 0 3px 0 #cfeaff; }
.chip:nth-child(3n) { background: #fffcf0; border-color: #ffe9b3; box-shadow: 0 3px 0 #ffe7ac; }
.chip:active { transform: translateY(2px); box-shadow: none; }

/* 长按别让浏览器弹自己的菜单（夸克的「与网页互动」就是从这里冒出来的） */
.room, .item, .character, .companion, .talk-btn { -webkit-touch-callout: none; }

/* 横屏手机（高度不够用）：把底边那条留白收掉，让房间多吃一点高度，按钮直接浮在画面下缘 */
@media (max-height: 520px) and (orientation: landscape) {
  .stage { padding: 6px 10px 0; }
  .stage-tools { bottom: 8px; padding: 0 4px; }
  .move-btn { width: 46px; height: 46px; }
  .talk-btn { min-height: 46px; font-size: 14px; padding: 0 14px; }
  .bag-btn { min-height: 46px; font-size: 14px; padding: 0 14px; }
}

/* 城堡外观这页没有悬浮控制条，别把底部那条空白留着 */
.stage.in-castle { padding-bottom: 10px; }

/* 手机上的手势按钮：贴着画面下缘，一左一右，热区都不小于 52px */
@media (max-width: 640px) {
  .move-btn { width: 54px; height: 54px; font-size: 22px; }
  .stage-tools { padding: 8px 10px 10px; gap: 8px; }
  .talk-btn { min-height: 54px; padding: 0 14px; gap: 8px; font-size: 14px; }
  .talk-btn svg { width: 22px; height: 22px; }
}

/* 竖屏手机：上半屏是房间（铺满宽度再放大，左右可以拖），下半屏整块交给家具仓库 */
@media (max-width: 640px) and (orientation: portrait) {
  .stage { flex: 0 0 auto; display: block; height: 52vh; min-height: 288px; padding: 0 0 74px; }
  .room { margin: 0; }
  /* 抽屉在竖屏里常驻展开，所以「家具」按钮收起来，箭头和说话按钮更放得开 */
  .bag-btn { display: none; }
  /* 家具抽屉在竖屏常驻，仍然留一个「布置」开关：挤不下文字，只留图标圆钮 */
  .edit-btn {
    display: inline-flex;
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 50%;
    gap: 0;
  }
  .edit-btn span { display: none; }
  .edit-btn svg { width: 24px; height: 24px; }
  .tools-right { gap: 8px; }
  .move-btn { width: 50px; height: 50px; font-size: 20px; }
  .talk-btn { padding: 0 12px; gap: 6px; font-size: 13px; min-height: 52px; }
  .talk-btn svg { width: 20px; height: 20px; }
  .toolbar {
    position: static;
    transform: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .furniture-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 6px;
  }
  .pick { width: auto; min-height: 100px; }
  .pick img { height: 56px; }
  /* 竖屏里格子是竖着流下来的，「通用」这行小标签会把某一行切出空位，直接不显示 */
  .bar-sep { display: none; }
  /* 竖屏抽屉常驻，不需要「收起」 */
  .drawer-close { display: none; }
}

/* 小屏手机：顶部房间药丸压紧一点，别让「塔顶星空」被挤掉一半 */
@media (max-width: 420px) {
  .room-nav { gap: 5px; }
  .room-nav button { padding: 0 9px; font-size: 12px; }
  .status { font-size: 12px; }
}

/* ---------- 可玩的家具：不进布置模式也能点，会轻轻呼吸提示「我能点」 ---------- */
.room:not(.editing) .item.act-mirror,
.room:not(.editing) .item.act-telescope,
.room:not(.editing) .item.act-lamp,
.room:not(.editing) .item.act-fishbowl,
.room:not(.editing) .item.act-book { pointer-events: auto; cursor: pointer; }
.item.act-mirror img, .item.act-telescope img, .item.act-lamp img,
.item.act-fishbowl img, .item.act-book img { transition: filter .2s; }
.room:not(.editing) .item.act-mirror:hover img,
.room:not(.editing) .item.act-telescope:hover img,
.room:not(.editing) .item.act-lamp:hover img,
.room:not(.editing) .item.act-fishbowl:hover img,
.room:not(.editing) .item.act-book:hover img { filter: brightness(1.08) drop-shadow(0 0 10px rgba(255, 214, 120, .8)); }

/* 灯：点开以后自己亮起来 */
/* 夜间模式里，亮着的灯要「透」到压暗层上面（但仍在角色 3000 之后），
   不然灯跟自己一起被压暗，看上去只是整间房变灰、没有光源。 */
.item.lit { z-index: 3500 !important; }
.item.lit img { filter: brightness(1.22) saturate(1.12) drop-shadow(0 0 22px rgba(255, 206, 96, .95)) drop-shadow(0 0 46px rgba(255, 190, 80, .6)); }

/* 鱼缸：点一下冒一串泡泡 */
.item.bubbling img { animation: bowlBob .7s ease-in-out 3; }
@keyframes bowlBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.item.bubbling::before, .item.bubbling::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 42%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(120, 190, 235, .8);
  animation: bowlBubble 1.6s ease-out infinite;
  pointer-events: none;
}
.item.bubbling::after { left: 62%; animation-delay: .5s; width: 6px; height: 6px; }
@keyframes bowlBubble {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-42px) scale(1.15); }
}

/* ---------- 关灯：整间房暗下来，只留一盏暖光 ---------- */
.room::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 整片均匀压暗：房间比屏幕宽，用径向渐变会只暗到边角，屏幕中间几乎没变化 */
  background: rgba(30, 22, 56, .52);
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
  z-index: 4000;
}
.room.dim::after { opacity: 1; }

/* ---------- 小望远镜：点一下弹出一片星空 ---------- */
.star-sheet { background: rgba(20, 16, 38, .72); align-items: center; justify-content: center; }
.star-view {
  position: relative;
  width: min(92vw, 720px);
  aspect-ratio: 4 / 3;
  margin: auto;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #1b1740 0%, #2b2358 52%, #433a78 100%);
  box-shadow: 0 18px 40px rgba(10, 8, 26, .55);
}
.star-field { position: absolute; inset: 0; }
.star-field i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, .9);
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.star-moon {
  position: absolute;
  right: 12%; top: 14%;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 34px rgba(255, 226, 150, .75);
}
.star-moon::after {
  content: "";
  position: absolute;
  left: -14px; top: -6px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(180deg, #221c4c 0%, #2f2760 100%);
}
.star-tip {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .04em;
}
.star-close { color: #fff; background: rgba(255, 255, 255, .14); }

/* 拿到星星时飘一下 */
.star-pop {
  position: fixed;
  left: 50%; top: 22%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff6d8;
  border: 2px solid #f4c95d;
  color: #8a6414;
  font-size: 17px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  z-index: 120;
}
.star-pop.pop { animation: starPop 1.5s ease-out; }
@keyframes starPop {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(.8); }
  22%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(.96); }
}

/* ---------- 白饭碗：不进布置模式也能点，边框会呼吸一下提示可点 ---------- */
.room:not(.editing) .item.feedable { pointer-events: auto; cursor: pointer; }
.item.feedable::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: 56%;
  height: 56%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 176, 208, .55);
  animation: bowlPulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes bowlPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 176, 208, .6); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 176, 208, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 176, 208, 0); }
}

/* ---------- 泡泡两种模式的动作 ---------- */
.companion.roaming { animation: roamFloat 3.6s ease-in-out infinite; }
@keyframes roamFloat {
  0%, 100% { transform: translate(-50%, 0) scaleX(var(--flip, 1)); }
  50%      { transform: translate(-50%, -13px) scaleX(var(--flip, 1)); }
}
/* 泡泡自己溜去别的房间了：这间房就真的没有她 */
.companion.away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease;
}

/* 房间药丸上的小蓝点：泡泡在那间房 */
.room-nav button.has-paopao { position: relative; }
.room-nav button.has-paopao::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #2fa6e6;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(47, 166, 230, .35), 0 2px 4px rgba(40, 120, 180, .35);
  animation: paopaoDot 1.8s ease-in-out infinite;
}
@keyframes paopaoDot {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.25); opacity: 1; }
}

/* ---------- 泡泡的小动作：闲着时自己找点乐子 ---------- */
.companion.act-hop { animation: actHop .62s ease-in-out; }
@keyframes actHop {
  0%, 100% { transform: translate(-50%, 0) scaleX(var(--flip, 1)) scaleY(1); }
  18%      { transform: translate(-50%, 2px) scaleX(var(--flip, 1)) scaleY(.93); }
  48%      { transform: translate(-50%, -18px) scaleX(var(--flip, 1)) scaleY(1.04); }
  78%      { transform: translate(-50%, 0) scaleX(var(--flip, 1)) scaleY(.97); }
}
.companion.act-tilt { animation: actTilt .8s ease-in-out; }
@keyframes actTilt {
  0%, 100% { transform: translate(-50%, 0) scaleX(var(--flip, 1)) rotate(0deg); }
  30%      { transform: translate(-50%, -3px) scaleX(var(--flip, 1)) rotate(-7deg); }
  62%      { transform: translate(-50%, -3px) scaleX(var(--flip, 1)) rotate(6deg); }
}
.companion.act-spin { animation: actSpin 1.05s ease-in-out; }
@keyframes actSpin {
  0%   { transform: translate(-50%, 0) scaleX(var(--flip, 1)); }
  50%  { transform: translate(-50%, -12px) scaleX(calc(var(--flip, 1) * -1)); }
  100% { transform: translate(-50%, 0) scaleX(calc(var(--flip, 1) * -1)); }
}
.companion.act-squish { animation: actSquish .7s ease-in-out; }
@keyframes actSquish {
  0%, 100% { transform: translate(-50%, 0) scaleX(var(--flip, 1)) scaleY(1); }
  35%      { transform: translate(-50%, 6px) scaleX(var(--flip, 1)) scaleY(.86); }
  70%      { transform: translate(-50%, -4px) scaleX(var(--flip, 1)) scaleY(1.05); }
}

/* ---------- 抱碗吃饭：泡泡怀里真的抱着一碗白饭 ---------- */
.held-bowl {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 54%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%) scale(.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
}
.companion .held-bowl img {
  width: 100%; height: 100%;
  filter: drop-shadow(0 4px 3px rgba(74, 58, 85, .28));
}
.held-bowl .steam {
  position: absolute; left: 50%; top: 2%;
  width: 9%; height: 24%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  filter: blur(2px);
  opacity: 0;
}
.held-bowl .steam.s2 { left: 62%; }
.rice-grain {
  position: absolute; left: 50%; top: 62%;
  width: 7%; height: 3.2%;
  border-radius: 50%;
  background: #fffdf4;
  box-shadow: 0 0 0 1px rgba(222, 206, 178, .7);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.rice-grain.g2 { left: 43%; }
.rice-grain.g3 { left: 57%; }

.companion.eating .held-bowl { visibility: visible; animation: hugBowl 3.2s ease-in-out forwards; }
@keyframes hugBowl {
  0%   { opacity: 0; transform: translateX(-50%) scale(.55) translateY(16px); }
  12%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
  86%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) scale(.7) translateY(12px); }
}
.companion.eating .held-bowl img { animation: bowlNod .62s ease-in-out 5; }
@keyframes bowlNod {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}
.companion.eating .held-bowl .steam { animation: steamUp 1.05s ease-out infinite; }
.companion.eating .held-bowl .steam.s2 { animation-delay: .5s; }
@keyframes steamUp {
  0%   { opacity: 0; transform: translateY(6px) scale(.6); }
  30%  { opacity: .85; }
  100% { opacity: 0; transform: translateY(-24px) scale(1.35); }
}
.companion.eating .rice-grain { animation: riceFly .62s ease-in 5; }
.companion.eating .rice-grain.g2 { animation-delay: .14s; }
.companion.eating .rice-grain.g3 { animation-delay: .28s; }
@keyframes riceFly {
  0%   { top: 62%; opacity: 0; transform: translateX(0) scale(.8); }
  22%  { opacity: 1; }
  100% { top: 33%; opacity: 0; transform: translateX(-8px) scale(.3); }
}
.companion.eating > img { animation: chomp .62s ease-in-out 5; }
@keyframes chomp {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  45%      { transform: translateY(5px) rotate(-1.5deg) scale(.99, .975); }
}

/* ---------- 喂饭面板 + 小游戏 ---------- */
.feed-card { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.feed-lede { margin: 4px 6px 16px; font-size: 15px; line-height: 1.6; color: #6a5680; }
.feed-btn {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
  border-radius: 18px;
  border: 2px solid #ffd0e2;
  background: #fff;
  color: #d1487c;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(209, 72, 124, .16);
}
.feed-btn.play {
  border-color: #ffbfda;
  background: linear-gradient(180deg, #ffe6f1, #ffc9df);
  color: #b23a68;
}
.feed-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(209, 72, 124, .16); }

.feed-game { text-align: center; }
.feed-step { margin: 2px 0 6px; font-size: 14px; color: #9a86ac; }
.feed-ask { margin: 0 0 20px; font-size: 25px; font-weight: 800; color: #4a3a55; }
.feed-bubbles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-height: 96px;
}
.quiz-bubble {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .92);
  background: radial-gradient(circle at 34% 28%, #ffffff 0 12%, #dff2ff 34%, #a9d8f8 100%);
  color: #2f5d84;
  font-size: 27px;
  font-weight: 800;
  box-shadow: inset 0 -6px 12px rgba(120, 180, 230, .32), 0 5px 0 rgba(120, 180, 230, .38);
  transition: transform .14s ease, opacity .2s ease;
  touch-action: manipulation;
}
.quiz-bubble:active { transform: scale(.94); }
.quiz-bubble.popped { animation: quizPop .4s ease-out forwards; pointer-events: none; }
@keyframes quizPop {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}
.quiz-bubble.shake { animation: quizShake .38s; }
@keyframes quizShake {
  25% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}
.feed-tip { min-height: 24px; margin: 16px 0 0; font-size: 16px; font-weight: 700; color: #d1487c; }

@media (prefers-reduced-motion: reduce) {
  .companion.roaming, .companion.eating > img, .companion.eating .held-bowl,
  .companion.eating .held-bowl img, .companion.eating .rice-grain,
  .companion.eating .steam, .item.feedable::after,
  .companion.act-hop, .companion.act-tilt, .companion.act-spin, .companion.act-squish,
  .item.bubbling img, .item.bubbling::before, .item.bubbling::after,
  .star-field i { animation: none; }
  .companion.eating .held-bowl { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* 桌面端：喂饭面板改成居中的卡片，不要整条横满全屏 */
@media (min-width: 768px) {
  #feedSheet { align-items: center; justify-content: center; }
  #feedSheet .sheet-card {
    max-width: 480px;
    margin: 0 16px;
    border-radius: 28px;
    border: 5px solid #ffd0e2;
    box-shadow: 0 10px 0 rgba(209, 72, 124, .14);
  }
}

/* ---------- 第四扇门：泡泡理发屋 ---------- */
.castle-door:nth-child(4) { background: #e7f8f0; border-color: #a8e0cf; }

/* ---------- 真·走路：站立帧和迈步帧交替，不再只是上下抖 ---------- */
.character .stand, .companion .stand { display: block; }
.character .step, .companion .step {
  position: absolute;
  left: 50%; top: 0;
  height: 100%; width: auto;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
/* 横版走路：只画朝右的三帧（落脚 / 过渡 / 换脚），往左走整体水平翻转复用。
   0.36 秒一轮 ≈ 8.3 FPS，脚底对齐、静止回正面立绘。 */
.character.walking .stand, .companion.walking .stand { opacity: 0; }
.character.walking .w1, .companion.walking .w1 { animation: wf1 .6s step-end infinite; }
.character.walking .w2, .companion.walking .w2 { animation: wf2 .6s step-end infinite; }
.character.walking .w3, .companion.walking .w3 { animation: wf3 .6s step-end infinite; }
.character.walking .w4, .companion.walking .w4 { animation: wf4 .6s step-end infinite; }
/* 四帧等分：左脚前踏 → 抬起 → 通过 → 右脚前踏（真正换脚）。
   之前只有两三种姿势、中间那帧只占 17%，看起来就是后腿在闪。
   step-end 保证硬切：每段按住上一帧的值，到下一个百分比才跳，不会叠出鬼影。 */
@keyframes wf1 { 0% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wf2 { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wf3 { 0% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wf4 { 0% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 理发椅：平时也能点，呼吸圈提示 ---------- */
.room:not(.editing) .item.salon-chair { pointer-events: auto; cursor: pointer; }
.item.salon-chair::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 62%; height: 62%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: bowlPulse 2.8s ease-out infinite;
  pointer-events: none;
}

/* ---------- 理发小游戏：泡泡坐着，汐汐给她洗 / 剪 / 吹 ---------- */
.salon-card { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.salon-stage {
  position: relative;
  height: 210px;
  margin: 4px auto 14px;
  display: flex; align-items: flex-end; justify-content: center;
}
#salonPop { height: 196px; width: auto; filter: drop-shadow(0 6px 5px rgba(74, 58, 85, .16)); }
.salon-tool {
  position: absolute; left: 58%; bottom: 22%;
  width: 82px; height: 82px; object-fit: contain;
  opacity: 0;
  pointer-events: none;
}
.salon-tool.on { animation: toolWork 1.5s ease-in-out forwards; }
@keyframes toolWork {
  0%   { opacity: 0; transform: translateX(26px) rotate(-14deg); }
  18%  { opacity: 1; }
  55%  { opacity: 1; transform: translateX(0) rotate(9deg); }
  78%  { opacity: 1; transform: translateX(-4px) rotate(-6deg); }
  100% { opacity: 0; transform: translateX(6px) rotate(0); }
}
.salon-fx { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.salon-stage.washing .fx-wash,
.salon-stage.cutting .fx-cut,
.salon-stage.drying .fx-dry { opacity: 1; }
.fx-wash i {
  position: absolute; top: 4%; width: 8px; height: 13px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: #8ed4ff;
  animation: dropDown .72s ease-in infinite;
}
.fx-wash i:nth-child(1) { left: 34%; animation-delay: 0s; }
.fx-wash i:nth-child(2) { left: 43%; animation-delay: .16s; }
.fx-wash i:nth-child(3) { left: 52%; animation-delay: .3s; }
.fx-wash i:nth-child(4) { left: 61%; animation-delay: .1s; }
.fx-wash i:nth-child(5) { left: 68%; animation-delay: .4s; }
@keyframes dropDown {
  0%   { opacity: 0; transform: translateY(-12px) scale(.7); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(96px) scale(1.1); }
}
.fx-cut i {
  position: absolute; left: 55%; top: 26%;
  width: 22px; height: 3px; border-radius: 3px;
  background: #ffd976;
  animation: snip .5s ease-out infinite;
}
.fx-cut i:nth-child(2) { left: 63%; top: 36%; animation-delay: .22s; transform: rotate(-40deg); }
@keyframes snip {
  0%   { opacity: 0; transform: scale(.3) rotate(0); }
  40%  { opacity: 1; transform: scale(1.2) rotate(25deg); }
  100% { opacity: 0; transform: scale(.5) rotate(55deg); }
}
.fx-dry i {
  position: absolute; left: 60%; width: 34px; height: 3px;
  border-radius: 3px; background: rgba(160, 220, 235, .9);
  animation: wind .62s ease-out infinite;
}
.fx-dry i:nth-child(1) { top: 28%; animation-delay: 0s; }
.fx-dry i:nth-child(2) { top: 36%; animation-delay: .2s; }
.fx-dry i:nth-child(3) { top: 44%; animation-delay: .4s; }
@keyframes wind {
  0%   { opacity: 0; transform: translateX(-26px) scaleX(.5); }
  40%  { opacity: .95; }
  100% { opacity: 0; transform: translateX(34px) scaleX(1.2); }
}
.salon-steps { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.salon-step {
  min-width: 92px; min-height: 54px;
  border-radius: 18px;
  border: 2px solid #bfe8da;
  background: #fff;
  color: #2f7a68;
  font-size: 16px; font-weight: 700;
  box-shadow: 0 4px 0 rgba(75, 160, 130, .16);
  touch-action: manipulation;
}
.salon-step:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(75, 160, 130, .16); }
.salon-step.done { background: #e2f6ed; border-color: #e2f6ed; color: #85a99c; box-shadow: none; }
@media (min-width: 768px) {
  #salonSheet { align-items: center; justify-content: center; }
  #salonSheet .sheet-card {
    max-width: 480px; margin: 0 16px;
    border-radius: 28px; border: 5px solid #bfe8da;
    box-shadow: 0 10px 0 rgba(75, 160, 130, .14);
  }
}
/* 四扇门在手机上排成两行，别挤出屏幕 */
@media (max-width: 640px) {
  .castle-doors { gap: 8px; bottom: 3%; width: min(96%, 420px); }
  .castle-door { padding: 0 12px; font-size: 13px; min-height: 42px; }
  .salon-stage { height: 180px; }
  #salonPop { height: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .character.walking .w1, .character.walking .w2, .character.walking .w3, .character.walking .w4,
  .companion.walking .w1, .companion.walking .w2, .companion.walking .w3, .companion.walking .w4,
  .salon-tool.on, .salon-fx i, .item.salon-chair::after { animation: none; }
  .character.walking .w1, .character.walking .w2, .character.walking .w3, .character.walking .w4,
  .companion.walking .w1, .companion.walking .w2, .companion.walking .w3, .companion.walking .w4 { opacity: 0; }
  .character.walking .stand, .companion.walking .stand { opacity: 1; }
  .salon-tool.on { opacity: 1; }
}

/* 四间房之后顶栏有五个药丸：让它真的能横向滑动，别把最后一个挤到「家长」上 */
@media (max-width: 640px) {
  .room-nav { min-width: 0; flex: 1 1 0; }
  .top-right { flex: 0 0 auto; }
}

/* 竖屏城堡页：舞台原本固定 52vh 且 overflow:hidden，城堡卡片比它高，
   底部那排门牌被整个裁掉。城堡页时家具栏是收起的，让舞台占满剩余高度即可。 */
@media (max-width: 640px) and (orientation: portrait) {
  .stage.in-castle {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 0 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}