html.dream-home-play,
html.dream-home-play body {
  height: 100%;
  margin: 0;
  background: #f7f3ec;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #2a2416;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* V2 #app grid 第一行是 56px 顶栏，#main / 3D canvas 从下面开始。 */
#view {
  position: fixed;
  top: 56px;
  left: 0;
  width: 100%;
  height: calc(100% - 56px);
  display: block;
  touch-action: none;
}

html.dream-home-placing #view {
  cursor: crosshair;
}

html.dream-home-sharing #view {
  opacity: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fffdf8;
  color: #2a2416;
  border: 1px solid rgba(42, 36, 22, 0.08);
  box-shadow: 0 10px 28px rgba(42, 36, 22, 0.1);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

html.dream-home-play .toast {
  bottom: calc(var(--dream-dock-h, 168px) + var(--dream-stage-h, 0px) + 68px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 32px);
}

html.dream-home-play.dream-home-color-open .toast {
  bottom: calc(var(--dream-dock-h, 168px) + var(--dream-stage-h, 0px) + 148px + env(safe-area-inset-bottom, 0px));
}

.toast.hidden {
  display: none !important;
}

/* 画面右边一列圆钮（§34.13）：从上到下拍照、音乐、出门、宠物；宠物卡在爪印下面展开。 */
.pet-dock { position:absolute; z-index:9; top:calc(var(--dream-top-h, 132px) - 8px); left:max(12px, calc((100% - 760px) / 2)); display:flex; flex-direction:column; align-items:flex-start; pointer-events:auto; }
.pet-toggle { display:block; width:40px; height:40px; margin-top:8px; padding:9px; border:0; border-radius:13px; background:#f2d36b; color:#635334; box-shadow:0 3px 12px #685a3020; cursor:pointer; }
.pet-toggle svg { width:100%; height:100%; fill:currentColor; }
.pet-toggle[aria-expanded="true"] { background:#e6be42; }
.photo-shot { display:block; width:40px; height:40px; padding:8px; border:0; border-radius:13px; background:#fffdf8; color:#4a3b22; box-shadow:0 3px 12px #685a3020; cursor:pointer; }
.photo-shot svg { display:block; width:100%; height:100%; fill:currentColor; }
.photo-shot .photo-shot-lens { fill:#f2d36b; }
.pet-toggle[hidden], .photo-shot[hidden] { display:none; }
/* 左边一列里的声音、出门（§34.19）：声音关掉时音符上打一道斜杠；在户外时出门钮换成房子（回屋）、蜂黄底。 */
.dock-btn { display:block; width:40px; height:40px; margin-top:8px; padding:8px; border:0; border-radius:13px; background:#fffdf8; color:#4a3b22; box-shadow:0 3px 12px #685a3020; cursor:pointer; }
.dock-btn svg { display:block; width:100%; height:100%; fill:currentColor; }
.dock-btn[hidden] { display:none; }
.music-btn .music-slash { display:none; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.music-btn[aria-pressed="false"] { color:#9b8f7a; }
.music-btn[aria-pressed="false"] .music-slash { display:inline; }
.out-btn .out-home, .out-btn.is-out .out-go { display:none; }
.out-btn.is-out .out-home { display:block; }
.out-btn.is-out { background:#f2d36b; }
/* 出门、回屋的过场：盖在画布上、顶栏和按钮底下；is-busy 时挡住画布上的手势。 */
.scene-fade { position:fixed; left:0; top:0; right:0; bottom:0; z-index:30; background:#f5efe6; opacity:0; pointer-events:none; transition:opacity .22s ease; }
.scene-fade.is-on { opacity:1; }
.scene-fade.is-busy { pointer-events:auto; }
/* 快门：取景框闪一下白光，框外压暗一瞬，告诉用户拍进去的是哪一块。 */
.photo-flash { position:fixed; z-index:90; left:0; top:0; width:0; height:0; border-radius:4px; opacity:0; pointer-events:none; }
.photo-flash.is-on { animation:photo-flash .9s ease-out forwards; }
@keyframes photo-flash {
  0% { opacity:1; background:rgba(255,255,255,.9); box-shadow:0 0 0 2px #fff, 0 0 0 100vmax rgba(42,36,22,.32); }
  25% { opacity:1; background:rgba(255,255,255,0); box-shadow:0 0 0 2px #fff, 0 0 0 100vmax rgba(42,36,22,.32); }
  100% { opacity:0; background:rgba(255,255,255,0); box-shadow:0 0 0 2px #fff, 0 0 0 100vmax rgba(42,36,22,.32); }
}
/* B: floating capsules with a prominent pet medallion. */
.pet-list { --pet-list-h:max(80px, calc(100dvh - var(--dream-dock-h, 240px) - var(--dream-stage-h, 40px) - var(--dream-sel-h, 0px) - 264px - var(--safe-top) - var(--xhs-chrome-top))); --pet-card-h:clamp(46px, calc((var(--pet-list-h) - 30px) / 5), 62px); display:flex; flex-direction:column; gap:6px; width:120px; margin-top:6px; max-height:var(--pet-list-h); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#d9cba9 transparent; padding:3px; border-radius:16px; }
.pet-card { position:relative; flex-shrink:0; display:grid; grid-template-rows:13px 24px; align-items:center; align-content:center; isolation:isolate; height:var(--pet-card-h); margin-left:18px; padding:2px 3px 2px 29px; border:0; border-radius:999px; background:transparent; color:#675334; }
.pet-card::before { content:""; position:absolute; z-index:-1; left:0; right:0; top:50%; transform:translateY(-50%); height:42px; border-radius:999px; background:linear-gradient(115deg,#fffdf6f0,#fffaf2ed); box-shadow:0 3px 7px #725d2510; pointer-events:none; }
.pet-card img { position:absolute; left:-18px; top:50%; transform:translateY(-50%); width:calc(var(--pet-card-h) - 2px); height:calc(var(--pet-card-h) - 2px); max-width:50px; max-height:50px; object-fit:contain; border-radius:50%; background:radial-gradient(circle at 35% 28%,#fff0b6,#f6dd83); filter:drop-shadow(0 2px 2px #80642312); }
.pet-name { grid-area:1 / 1; font-size:11px; font-weight:600; line-height:13px; white-space:nowrap; text-align:center; }
.pet-stepper { grid-area:2 / 1; display:flex; align-items:center; justify-content:center; gap:1px; width:100%; }
.pet-stepper button { flex-shrink:0; width:24px; height:24px; padding:0; display:grid; place-items:center; background:#ffffffb8; border:1px solid #e7dcc72e; box-shadow:0 1px 2px #725d2508; color:#74603c; cursor:pointer; border-radius:50%; touch-action:manipulation; }
.pet-stepper button svg { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.pet-stepper button:not(:disabled):hover { background:#fff0b9; }
.pet-stepper button:not(:disabled):active { background:#f2d36b; transform:scale(.94); }
.pet-stepper button:disabled { opacity:.3; cursor:default; box-shadow:none; }
.pet-stepper output { font-size:11px; font-variant-numeric:tabular-nums; min-width:10px; text-align:center; }
.pet-toggle:focus-visible,.pet-stepper button:focus-visible { outline:2px solid #9e7836; outline-offset:2px; }
.dream-home-sharing .pet-dock { visibility:hidden; }
.pet-dock[hidden], .pet-list[hidden] { display:none; }
.pet-card:not(.is-present) img { background:radial-gradient(circle at 35% 28%,#faf0d3,#e9ddbc); }
.pet-waiting { grid-area:1 / 1; align-self:end; font-size:8px; color:#96743f; line-height:10px; white-space:nowrap; text-align:center; }
.pet-card.has-waiting .pet-name { align-self:start; font-size:10px; line-height:10px; }
.pet-card.has-waiting { grid-template-rows:20px 22px; }
.pet-card.has-waiting::before { height:46px; }
.pet-card.has-waiting .pet-stepper button { height:22px; line-height:22px; }