/* ==========================================================================
   记忆家园 Memory Home — 前端原型样式
   视觉基准：牛皮纸质感 2D 治愈系插画（取自参考图的房子与小狗三视图）
   这是一个"单一视觉世界"的设计：画面里的白天/夜晚由剧情决定，
   不跟随系统深浅色切换，因此所有颜色都显式绘制，不做 prefers-color-scheme 反转。
   ========================================================================== */

:root{
  /* 纸与光 */
  --kraft:        #E4CEAC;   /* 牛皮纸底 */
  --kraft-deep:   #C6A882;   /* 页面外场 / 黄昏 */
  --cream:        #F7E8CD;   /* 房子填充、卡片、消息底 */
  --cream-hi:     #FDF4E4;

  /* 物件色（全部来自参考图） */
  --terracotta:   #C87C5C;   /* 信箱、灯罩 —— 唯一的强调色 */
  --terracotta-d: #A96044;
  --dusk-blue:    #9FBBD1;   /* 窗、饭盆 */
  --dusk-blue-d:  #7C9DB8;
  --bulb:         #F2C56E;   /* 灯光、亮起的爪印 */
  --wood:         #C9A87C;

  /* 墨（永远是柔褐，不用纯黑） */
  --ink:          #4B3A2E;
  --ink-mid:      #7A6350;
  --ink-soft:     #9A8168;
  --ink-faint:    rgba(75,58,46,.30);

  /* 夜 */
  --night:        #3B322D;
  --night-hi:     #55483F;

  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --detail: 0;              /* 0 = 轮廓模糊，1 = 形象清晰 */

  --font-ui: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-story: "Noto Serif SC", "Songti SC", Georgia, serif;
  --font-num: "Nunito", var(--font-ui);
  --font-brand: "Schoolbell", "Comic Sans MS", cursive;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:
    radial-gradient(120% 95% at 50% -10%, #C9AB82 0%, #AD8C63 58%, #8C6D4A 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

#app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px;
}

/* ── 舞台（手机画幅） ───────────────────────────────── */
.stage{
  position:relative;
  width:min(430px, 100%);
  height:min(880px, calc(100dvh - 74px));
  border-radius:30px;
  overflow:hidden;
  background:var(--kraft);
  box-shadow:
    0 48px 90px -34px rgba(48,31,18,.72),
    0 0 0 1px rgba(255,255,255,.16),
    0 2px 0 0 rgba(255,255,255,.35) inset;
  isolation:isolate;
}

.grain{
  position:absolute; inset:0; z-index:60; pointer-events:none;
  opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:absolute; inset:0; z-index:59; pointer-events:none;
  background:radial-gradient(105% 75% at 50% 42%, transparent 45%, rgba(90,62,40,.22) 100%);
}

.stage-note{
  margin:0; font-family:var(--font-num); font-size:11px; letter-spacing:.04em;
  color:rgba(255,246,232,.5);
}
.stage-note kbd{
  font-family:var(--font-num); font-size:10px; padding:1px 5px;
  border-radius:5px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
}

/* ── 场景切换 ──────────────────────────────────────── */
.scene{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease), visibility .9s;
}
.scene.is-active{ opacity:1; visibility:visible; }
.scene.is-leaving{ opacity:0 !important; visibility:hidden !important; transition:none !important; }
.scene{ --dock-tint:241,226,199; }

/* ── Puppyland 品牌开屏 ────────────────────────────── */
.stage.is-splash .vignette{ opacity:0; }
.stage.is-splash .grain{ opacity:.09; }
.splash-screen{
  background:
    radial-gradient(90% 62% at 50% 43%, rgba(255,249,232,.48), transparent 72%),
    linear-gradient(180deg,#EDE1CE 0%,#E7D6BC 54%,#E4D0B2 100%);
  color:#4A423A;
}
.splash-center{
  position:absolute; left:50%; top:44%; width:116px; height:116px;
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,249,238,.28);
  box-shadow:0 12px 32px rgba(126,96,64,.08);
  animation:splashMarkIn .9s var(--ease) both;
}
.splash-center img{ display:block; width:88px; height:88px; object-fit:contain; }
.splash-brand{
  position:absolute; left:50%; bottom:calc(8.5% + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; gap:11px;
  white-space:nowrap;
  animation:splashBrandIn .8s var(--ease) .45s both;
}
.splash-brand img{ width:35px; height:35px; object-fit:contain; }
.splash-brand span{
  color:#403A35;
  font-family:var(--font-brand);
  font-size:39px; font-weight:400; line-height:1;
  letter-spacing:.025em;
}
@keyframes splashMarkIn{ from{ opacity:0; transform:translate(-50%,-46%) scale(.9); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes splashBrandIn{ from{ opacity:0; transform:translate(-50%,10px); } to{ opacity:1; transform:translate(-50%,0); } }

.world{ position:absolute; inset:0; overflow:hidden; }

.dock{
  position:absolute; left:0; right:0; bottom:0; z-index:7;
  padding:26px 24px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(180deg, rgba(var(--dock-tint),0) 0%, rgba(var(--dock-tint),.7) 22%, rgba(var(--dock-tint),.95) 58%, rgba(var(--dock-tint),.98) 100%);
  transition:background 2.4s var(--ease);
}

/* ── 旁白 ─────────────────────────────────────────── */
.narration{
  margin:0; min-height:3.2em;
  font-family:var(--font-story); font-weight:300;
  font-size:16.5px; line-height:1.85; letter-spacing:.02em;
  color:var(--ink); text-wrap:pretty;
}
.narration .dim{ color:var(--ink-soft); }
.narration em{ font-style:normal; color:var(--terracotta-d); }
.serif{ font-family:var(--font-story); }

/* ── 操作槽 ───────────────────────────────────────── */
.slot{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.slot-row{ display:flex; gap:10px; width:100%; align-items:center; }

/* 按住说话的发光爪印 */
.paw-btn{
  position:relative; width:74px; height:74px; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 50% 42%, #FBE0A6 0%, var(--bulb) 55%, #E0A653 100%);
  box-shadow:0 0 0 8px rgba(242,197,110,.18), 0 0 26px 4px rgba(242,197,110,.45), 0 8px 18px -6px rgba(120,80,40,.5);
  color:#8A5A2E;
  display:grid; place-items:center;
  touch-action:none;
  /* 长按时不要触发选中/系统菜单/拖拽，这些都会打断手势 */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease);
  animation:breathe 3.4s ease-in-out infinite;
}
.paw-btn svg{ width:34px; height:34px; fill:currentColor; opacity:.75; }
.paw-btn:hover{ transform:scale(1.04); }
.paw-btn.is-holding{
  transform:scale(1.12);
  box-shadow:0 0 0 14px rgba(242,197,110,.22), 0 0 44px 10px rgba(242,197,110,.6);
  animation:none;
}
.paw-btn::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(242,197,110,.5); opacity:0;
}
.paw-btn.is-holding::after{ animation:ripple 1.2s ease-out infinite; }

@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
@keyframes ripple{ 0%{ opacity:.7; transform:scale(1); } 100%{ opacity:0; transform:scale(1.6); } }

.paw-label{
  font-size:12.5px; color:var(--ink-soft); letter-spacing:.06em;
}

/* 文字 / 幽灵按钮 */
.ghost-btn{
  font-family:var(--font-ui); font-size:13px; letter-spacing:.06em;
  color:var(--ink-mid); background:transparent; cursor:pointer;
  border:1px solid rgba(75,58,46,.22); border-radius:999px;
  padding:9px 20px;
  transition:background .25s, color .25s, border-color .25s;
}
.ghost-btn:hover{ background:rgba(255,255,255,.4); color:var(--ink); border-color:rgba(75,58,46,.36); }

.primary-btn{
  font-family:var(--font-ui); font-size:14px; font-weight:500; letter-spacing:.1em;
  color:var(--cream-hi); background:var(--terracotta); cursor:pointer;
  border:0; border-radius:999px; padding:13px 34px;
  box-shadow:0 8px 18px -8px rgba(168,90,60,.85);
  transition:transform .2s var(--ease), background .25s;
}
.primary-btn:hover{ background:var(--terracotta-d); transform:translateY(-1px); }

.skip{
  position:absolute; top:calc(16px + env(safe-area-inset-top)); right:18px; z-index:20;
  font-family:var(--font-ui); font-size:12px; letter-spacing:.12em;
  color:rgba(247,232,205,.62); background:transparent; border:0; cursor:pointer;
  padding:6px 8px;
}
.skip:hover{ color:var(--cream-hi); }

:where(button, input, [tabindex]):focus-visible{
  outline:2px solid var(--terracotta); outline-offset:3px; border-radius:6px;
}

/* 文字输入 */
.field{
  width:100%; display:flex; gap:8px; align-items:flex-end;
  background:var(--cream-hi); border:1px solid rgba(75,58,46,.14);
  border-radius:var(--r-md); padding:10px 10px 10px 14px;
  box-shadow:0 6px 14px -10px rgba(90,60,35,.6);
}
.field textarea{
  flex:1; border:0; resize:none; background:transparent; outline:none;
  font-family:var(--font-story); font-size:15px; line-height:1.7; color:var(--ink);
  max-height:96px;
}
.field textarea::placeholder{ color:rgba(122,99,80,.5); }

.icon-btn{
  flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--terracotta); color:var(--cream-hi);
  transition:background .25s, transform .2s var(--ease);
}
.icon-btn svg{ width:19px; height:19px; fill:currentColor; }
.icon-btn:hover{ background:var(--terracotta-d); transform:scale(1.05); }
.icon-btn.quiet{ background:rgba(75,58,46,.09); color:var(--ink-mid); }
.icon-btn.quiet:hover{ background:rgba(75,58,46,.16); }

/* ── 爪印 ─────────────────────────────────────────── */
.pawmark{
  position:absolute; width:26px; height:26px;
  fill:rgba(75,58,46,.16);
  transition:fill .8s var(--ease), filter .8s var(--ease), transform .5s var(--ease);
}
.pawmark.is-lit{
  fill:var(--bulb);
  filter:drop-shadow(0 0 7px rgba(242,197,110,.85));
}
.trail{ position:absolute; z-index:3; inset:0; pointer-events:none; }

/* ── 第二阶段：JourneyPage ────────────────────────── */
.journey-page{ background:#B8C9E8; }
.journey-world{ position:absolute; inset:0; overflow:hidden; background:linear-gradient(180deg,#E9EEF9 0%,#C6D6F0 48%,#A9C6EA 100%); transition:background 1.8s var(--ease); }
.journey-world[data-level="1"]{ background:linear-gradient(180deg,#DCE7F5 0%,#C2DABF 58%,#8BBF8A 100%); }
.journey-world[data-level="2"]{ background:linear-gradient(180deg,#D9E5F4 0%,#B8D1B0 55%,#76AA76 100%); }
.journey-world[data-level="3"]{ background:linear-gradient(180deg,#D6E4F3 0%,#AFCBAA 55%,#6E9D70 100%); }
.journey-world[data-level="4"],.journey-world[data-level="5"]{ background:linear-gradient(180deg,#C7DDF4 0%,#B5D29E 52%,#6D9D6C 100%); }
.journey-world::before{ content:""; position:absolute; inset:-12%; z-index:1; pointer-events:none; background:radial-gradient(circle at 52% 48%,rgba(255,255,255,.78) 0 7%,transparent 25%),radial-gradient(circle at 30% 25%,rgba(255,255,255,.55) 0 4%,transparent 23%),radial-gradient(circle at 78% 68%,rgba(173,202,255,.55) 0 8%,transparent 28%); filter:blur(24px); opacity:.95; transition:opacity 2s var(--ease); }
.journey-world::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:#A7C7F0 url("assets/swimming.png") center 55% / cover no-repeat; opacity:0; transition:opacity 2.2s var(--ease); }
.journey-world[data-state="creation"]::after{
  opacity:1 !important;
  background:#E8E3D4 url("assets/grass.png") center / cover no-repeat;
  transition:none;
}
.journey-world[data-state="confirming"]::after{
  opacity:1 !important;
  background:#E8E3D4 url("assets/grass.png") center / cover no-repeat;
  transition:none;
}
.journey-world[data-state="creation"]::before{ opacity:0; transition:none; }
.journey-world[data-state="creation"] .journey-pet{ opacity:0 !important; visibility:hidden; }
.journey-world[data-state="creation"] .journey-sky,.journey-world[data-state="creation"] .journey-mountains,.journey-world[data-state="creation"] .journey-ground,.journey-world[data-state="creation"] .journey-road{ opacity:0 !important; }
.journey-world[data-state="swimming"]::after,.journey-world[data-state="rainbow"]::after{ opacity:1; }
.journey-world.is-swimming{ background:#A7C7F0; }
.journey-world.is-swimming::before{ opacity:.12; }
.journey-world.is-swimming::after{ opacity:1; }
.journey-world.is-rainbow{ background:#E9EAD9 url("assets/rainbow-bridge-soft.png") center / cover no-repeat; }
.journey-world.is-rainbow::before{ opacity:0; }
.journey-world.is-rainbow::after{ opacity:0; }
.journey-world.is-rainbow .journey-sky,.journey-world.is-rainbow .journey-mountains,.journey-world.is-rainbow .journey-ground,.journey-world.is-rainbow .journey-road{ opacity:0; }
.journey-world.is-swimming .journey-sky,.journey-world.is-swimming .journey-mountains,.journey-world.is-swimming .journey-ground,.journey-world.is-swimming .journey-road{ opacity:0; }
.journey-world:not(.is-swimming) .journey-sky{ opacity:.14; }
.journey-world:not(.is-swimming) .journey-mountains,.journey-world:not(.is-swimming) .journey-ground,.journey-world:not(.is-swimming) .journey-road{ opacity:0; }
.journey-sky{ position:absolute; inset:0; opacity:.55; background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.8) 0 2px,transparent 3px),radial-gradient(circle at 23% 28%,rgba(255,255,255,.55) 0 2px,transparent 3px); transition:opacity 1.4s; }
.journey-mountains{ position:absolute; left:-10%; right:-10%; bottom:31%; height:34%; opacity:.38; background:#7897C7; clip-path:polygon(0 85%,17% 32%,31% 72%,48% 12%,63% 64%,78% 28%,100% 76%,100% 100%,0 100%); transition:opacity 1.4s; }
.journey-ground{ position:absolute; inset:auto -8% 0; height:48%; background:linear-gradient(180deg,rgba(109,158,100,.15),rgba(70,122,77,.68)); clip-path:ellipse(76% 62% at 50% 100%); transition:opacity 1.4s; }
.journey-road{ position:absolute; left:39%; bottom:-12%; width:23%; height:55%; background:rgba(224,204,166,.72); border-radius:50% 50% 0 0; transform:rotate(8deg); opacity:.55; transition:opacity 1.4s; }
.journey-world.is-running .journey-ground,.journey-world.is-running .journey-road{ animation:journeyScroll 3s linear infinite; }
@keyframes journeyScroll{ from{ transform:translateX(0); } to{ transform:translateX(-7%); } }
.journey-bridge{ position:absolute; left:62%; bottom:28%; width:80px; height:190px; opacity:0; transform:translateY(18px); transition:opacity 1.4s,transform 1.4s; }
.journey-bridge::before{ content:""; position:absolute; inset:0; border-top:8px solid #F7D9A6; border-radius:50% 50% 0 0; transform:rotate(-8deg); box-shadow:0 -18px 0 -10px #E6A5B6,0 -32px 0 -21px #9DAFE8; }
.journey-world.is-rainbow .journey-bridge{ opacity:0; transform:none; }
.journey-world.is-rainbow .journey-pet{ opacity:0; visibility:hidden; }
/* 群狗整体下移，避开上方文案；视频上下边缘本就是同一片米色，用 box-shadow 把移出后露出的部分补齐，随视频一起淡入 */
.journey-group-video{ position:absolute; inset:0; z-index:6; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; transition:opacity .8s ease; transform:translateY(21%); box-shadow:0 0 0 500px #ECCDAE; }
.journey-world.is-group-crossing .journey-group-video{ opacity:1; }
.journey-world.is-group-crossing .journey-group-video{ transition:none; }
.journey-particles{ position:absolute; inset:0; opacity:.55; background-image:radial-gradient(circle,rgba(255,248,204,.9) 0 2px,transparent 3px); background-size:82px 96px; animation:floatParticles 8s linear infinite; }
@keyframes floatParticles{ to{ transform:translateY(-96px); } }
.journey-pet{ left:35%; bottom:35%; width:106px; margin-left:-53px; z-index:5; opacity:0; transition:filter 1.4s,opacity 1.4s,left 1.2s; }
.journey-pet .pet{ filter:blur(calc((1 - var(--detail)) * 5px)) drop-shadow(0 10px 12px rgba(45,73,112,.25)); }
/* 兜底：记忆旅程全程不出现清晰的小狗写实图，一律走 CSS 毛球 */
.journey-world .journey-pet .pet{ opacity:0 !important; }
.journey-world:not(.is-swimming) .journey-pet{ opacity:0; filter:blur(18px); }
.journey-world.is-running .journey-pet{ animation:journeyRun .75s ease-in-out infinite; }
@keyframes journeyRun{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
.journey-world.is-swimming .journey-pet{ opacity:0; }
.journey-world.is-rainbow .journey-pet{ left:70%; opacity:1; animation:journeyCross 2.6s var(--ease) forwards; }
@keyframes journeyCross{ to{ left:94%; transform:translateX(80px); } }
.journey-progress{ position:absolute; left:12%; right:12%; bottom:2.5%; z-index:7; display:flex; justify-content:space-between; align-items:center; pointer-events:none; color:rgba(125,103,75,.44); }
.journey-progress[hidden]{ display:none; }
.journey-paw{ width:19px; height:19px; display:grid; place-items:center; opacity:.48; transform:rotate(-18deg); transition:opacity .7s,color .7s; animation:journeyPawFloat 3.2s ease-in-out infinite; }
.journey-paw:nth-child(2n){ transform:rotate(11deg); }
.journey-paw:nth-child(3n){ transform:rotate(-8deg); }
.journey-paw svg{ width:100%; height:100%; fill:currentColor; }
.journey-paw.is-ambient{ color:rgba(176,148,99,.62); opacity:.7; }
.journey-paw.is-done,.journey-paw.is-current{ color:#B49363; opacity:.88; filter:drop-shadow(0 2px 4px rgba(153,119,73,.22)); }
@keyframes journeyPawFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -4px; } }
.journey-rainbow-mark{ width:19px; height:19px; display:grid; place-items:center; font-size:18px; line-height:1; color:#FFF1C2; opacity:.8; transform:translateY(-1px); }
.journey-card{ position:absolute; left:18px; right:18px; bottom:18px; z-index:8; padding:19px 19px calc(17px + env(safe-area-inset-bottom)); border-radius:22px; background:rgba(255,248,232,.9); box-shadow:0 15px 35px -20px rgba(49,71,105,.65); backdrop-filter:blur(8px); }
.journey-card.is-over-water{ top:58px; bottom:auto; }
.journey-card.is-creating{ top:17%; bottom:auto; padding:0 22px; background:transparent; box-shadow:none; backdrop-filter:none; text-align:center; }
.journey-card[data-state="creation"]{ top:17%; bottom:auto; padding:0 22px; background:transparent; box-shadow:none; backdrop-filter:none; text-align:center; }
.journey-card[data-state="story"]{ top:14%; bottom:auto; padding:0 22px; background:transparent; box-shadow:none; backdrop-filter:none; text-align:center; }
.journey-card[data-state="story"] .journey-kicker{ color:#8A7869; }
.journey-card[data-state="story"] .journey-title{ color:#403A34; font-size:22px; text-shadow:none; }
.journey-card[data-state="story"] .journey-copy{ color:#756B61; font-size:14px; text-shadow:none; }
.journey-card.is-creating .journey-kicker{ color:#8A7869; }
.journey-card.is-creating .journey-kicker{ display:none; }
.journey-card.is-creating .journey-title{ color:#403A34; font-size:22px; text-shadow:none; }
.journey-card.is-creating .journey-copy{ color:#756B61; text-shadow:none; }
.journey-card.is-creating .journey-creator{ margin-top:37vh; }
.journey-card.is-confirming{ top:24%; }
.journey-card.is-confirming .journey-creator{ display:none !important; }
.journey-card.is-creating:not(.is-confirming) .journey-confirm{ display:none !important; }
.journey-card.is-flowing{ padding:0 16px; background:transparent; box-shadow:none; backdrop-filter:none; text-align:center; }
.journey-card.is-flowing .journey-kicker{ color:#8A7869; }
.journey-card.is-flowing .journey-title{ color:#403A34; font-size:22px; text-shadow:none; }
.journey-card.is-flowing .journey-copy{ color:#756B61; font-size:14px; text-shadow:none; }
.journey-kicker{ margin:0 0 7px; color:var(--terracotta-d); font-size:11px; letter-spacing:.14em; }
.journey-title{ margin:0; font-family:var(--font-story); font-weight:400; font-size:20px; line-height:1.45; color:var(--ink); }
.journey-title.is-typewriter{ white-space:pre-line; }
.journey-pet-name{
  display:inline-block; min-width:3.2em; padding:0 2px 2px; margin-right:3px;
  border-bottom:1px solid rgba(64,58,52,.55); color:#403A34; cursor:text;
}
.journey-pet-name:focus{ outline:none; border-bottom-color:#403A34; }
.journey-copy{ margin:7px 0 15px; color:var(--ink-mid); font-family:var(--font-story); font-size:14px; line-height:1.65; }
.journey-voice-example{ position:absolute; left:0; right:0; top:112px; max-width:340px; max-height:38vh; margin:0 auto; overflow:auto; color:#756B61; font-family:var(--font-story); font-size:13px; line-height:1.65; text-align:center; white-space:pre-line; }
.journey-voice-example[hidden]{ display:none; }
.journey-voice-hint[hidden]{ display:none; }
.journey-voice-hint{ margin-top:4px; min-height:34px; color:rgba(102,93,84,.6); font-size:11px; line-height:1.5; text-align:left; }
.journey-voice-quote{ display:block; max-width:280px; margin:0 auto; padding-left:9px; border-left:1px solid rgba(102,93,84,.45); opacity:1; transition:opacity .35s ease; white-space:pre-line; }
.journey-voice-quote.is-fading{ opacity:0; }
.journey-creator,.journey-memory,.journey-reveal{ display:flex; flex-direction:column; gap:10px; }
.journey-creator[hidden],.journey-memory[hidden],.journey-reveal[hidden]{ display:none; }
.journey-upload{ display:flex; align-items:center; justify-content:center; min-height:42px; border:1px dashed rgba(75,58,46,.28); border-radius:12px; color:var(--ink-mid); font-size:13px; cursor:pointer; }
.journey-upload input{ display:none; }
.journey-input{ width:100%; border:1px solid rgba(75,58,46,.16); border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.55); color:var(--ink); font-family:var(--font-story); font-size:14px; outline:none; }
.journey-input:focus{ border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(200,124,92,.12); }
.journey-description{ resize:none; }
.journey-memory-actions{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.journey-memory-actions .primary-btn{ padding:11px 17px; font-size:12px; }
.journey-memory-actions .ghost-btn{ padding:8px 10px; font-size:11px; }
.journey-reveal p{ margin:0; font-family:var(--font-story); color:var(--ink-mid); font-size:14px; line-height:1.8; }
.journey-world.is-processing .journey-particles{ animation-duration:1.3s; opacity:1; }
.journey-world[data-state="swimming"][data-scene-index="0"]{ background:#E8E3D4 url("assets/grass.png") center / cover no-repeat !important; }
.journey-world[data-state="swimming"][data-scene-index="0"]::before,.journey-world[data-state="swimming"][data-scene-index="0"]::after{ opacity:0 !important; transition:none !important; }
.journey-world[data-state="swimming"][data-scene-index="0"]::after{ background:none !important; }
.journey-world[data-state="swimming"][data-scene-index="0"] .journey-sky,.journey-world[data-state="swimming"][data-scene-index="0"] .journey-mountains,.journey-world[data-state="swimming"][data-scene-index="0"] .journey-ground,.journey-world[data-state="swimming"][data-scene-index="0"] .journey-road{ opacity:0 !important; }
.journey-world[data-state="swimming"][data-scene-index="0"] .journey-pet{ opacity:1 !important; visibility:visible; }
.journey-world[data-state="swimming"][data-scene-index="0"] .journey-pet .pet{ opacity:0; }
.journey-world[data-state="swimming"][data-scene-index="0"] .journey-pet::before{
  content:""; position:absolute; left:50%; top:50%; width:66px; height:58px; transform:translate(-50%,-50%);
  border-radius:52% 48% 46% 54%; background:rgba(255,253,246,.98);
  box-shadow:-28px 17px 0 -13px rgba(255,253,246,.9),29px 18px 0 -13px rgba(255,253,246,.9),-39px 1px 0 -24px rgba(255,253,246,.85),0 0 18px 5px rgba(255,246,213,.5);
  filter:blur(13px); animation:journeyRun .9s ease-in-out infinite;
}
/* scene 1「一些画面开始浮现」：背景保持清晰，狗狗单独重度模糊 */
/* 背景层——不加任何 filter，水波纹画在这张图里，保留原图清晰度 */
.journey-world[data-scene-index="1"]{ background:linear-gradient(180deg,#E2E3EF 0%,#D9DCEE 30%,#CBD2EA 50%,#B0BFE6 65%,#8FA9E1 78%,#6D8FDB 90%,#4A78D3 100%) !important; }
.journey-world[data-scene-index="1"]::before{ opacity:0 !important; }
.journey-world[data-scene-index="1"]::after{ opacity:1 !important; background:url("assets/swimming-bg.jpg") center / cover no-repeat; filter:none; transform:none; }
/* 狗狗层——复用上一帧的 CSS 毛球，调成水面色调，糊得比上一帧更重 */
.journey-world[data-scene-index="1"] .journey-pet{ opacity:1 !important; visibility:visible; left:56%; top:calc(71% - 60px); bottom:auto; width:140px; height:120px; margin-left:-70px; filter:none; }
.journey-world[data-scene-index="1"] .journey-pet .pet{ opacity:0; }
.journey-world[data-scene-index="1"] .journey-pet::before{
  content:""; position:absolute; left:50%; top:50%; width:68px; height:62px;
  border-radius:50% 50% 48% 52%; background:rgba(255,255,255,.96);
  box-shadow:-33px 10px 0 -5px rgba(255,255,255,.93),-60px 13px 0 -18px rgba(255,255,255,.88);
  filter:blur(8px); animation:journeyPetFloat 4.5s ease-in-out infinite;
}
/* 光环——跟狗狗一起糊 */
.journey-world[data-scene-index="1"] .journey-pet::after{
  content:""; position:absolute; left:50%; top:calc(50% - 36px); width:40px; height:12px; margin-left:-11px;
  border:3px solid rgba(244,219,120,.95); border-radius:50%;
  filter:blur(4px); animation:journeyHaloFloat 4.5s ease-in-out infinite;
}
@keyframes journeyPetFloat{ 0%,100%{ transform:translate(-50%,-50%) } 50%{ transform:translate(-50%,calc(-50% - 5px)) } }
@keyframes journeyHaloFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
/* 水波纹——独立清晰图层，不跟随狗狗模糊；避开狗狗本体，只在两侧 */
.journey-ripples{ position:absolute; left:0; right:0; bottom:24%; height:9%; z-index:6; opacity:0; pointer-events:none; transition:opacity 1.4s var(--ease); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cg fill='none' stroke='%232B4E9E' stroke-width='5' stroke-linecap='round' opacity='.72'%3E%3Cpath d='M86 14 q11 -8 22 0 t22 0 t22 0 t16 0'/%3E%3Cpath d='M187 46 q11 -8 22 0 t22 0 t25 0'/%3E%3Cpath d='M328 62 q11 -8 22 0 t22 0 t22 0 t12 0'/%3E%3Cpath d='M351 92 q11 -8 22 0 t22 0 t22 0 t20 0'/%3E%3Cpath d='M668 56 q11 -8 22 0 t22 0 t22 0 t22 0 t20 0'/%3E%3C/g%3E%3C/svg%3E") center / 100% auto no-repeat; }
.journey-world[data-scene-index="1"] .journey-ripples{ opacity:1; }
.journey-world[data-scene-index="2"]{ background:#E9EAD9 url("assets/rainbow-bridge-soft.png") center / cover no-repeat !important; }
.journey-world[data-scene-index="2"]::before,.journey-world[data-scene-index="2"]::after{ opacity:0 !important; }
.journey-world[data-scene-index="2"] .journey-sky,.journey-world[data-scene-index="2"] .journey-mountains,.journey-world[data-scene-index="2"] .journey-ground,.journey-world[data-scene-index="2"] .journey-road,.journey-world[data-scene-index="2"] .journey-pet{ opacity:0 !important; visibility:hidden; }
.journey-voice{ width:68px; height:68px; margin:10px auto 0; border:0; border-radius:50%; color:#705A49; background:#E7D8BF; box-shadow:0 6px 16px -9px rgba(69,55,43,.55),inset 0 0 0 1px rgba(255,255,255,.7); display:grid; place-items:center; cursor:pointer; transition:transform .25s var(--ease),background .25s; }
.journey-voice svg{ width:31px; height:31px; fill:currentColor; }
.journey-voice:hover{ transform:scale(1.05); background:#DDC9AA; }
.journey-voice.is-listening,.journey-voice.is-holding{
  background:#CFA66D;
  color:#60452F;
  animation:none;
  transform:none;
  box-shadow:0 0 0 8px rgba(242,197,110,.28),0 0 30px 7px rgba(242,197,110,.62),0 8px 18px -6px rgba(120,80,40,.44);
}
.journey-voice.is-listening svg,.journey-voice.is-holding svg{ opacity:1; filter:drop-shadow(0 0 4px rgba(255,241,190,.9)); }
@keyframes journeyListen{ 50%{ transform:scale(1.12); box-shadow:0 0 0 10px rgba(221,201,170,.45); } }
.journey-voice-label{ color:#665D54; font-size:12px; letter-spacing:.06em; }
.journey-creator .journey-text-toggle{ align-self:center; margin-top:2px; }
.journey-text-fallback{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:340px; margin:0 auto; }
.journey-text-fallback[hidden]{ display:none; }
.journey-text-fallback .field{ background:var(--cream-hi); }
.journey-text-fallback textarea{ min-height:48px; }
.journey-card.is-creating .journey-text-fallback{ margin-top:37vh; }
.journey-confirm[hidden]{ display:none; }
.journey-confirm{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.journey-card.is-confirming .journey-confirm{ margin-top:31vh; flex-direction:row; justify-content:center; align-items:center; gap:12px; }
.journey-card.is-confirming .journey-confirm-btn{ margin-top:0; }
.journey-confirm-pet{ width:168px; height:168px; display:grid; place-items:center; margin:0 auto 4px; }
.journey-confirm-pet img{ display:block; width:100%; height:auto; filter:drop-shadow(0 13px 16px rgba(81,66,48,.2)); }
.journey-confirm-note{ margin:0; color:#665D54; font-family:var(--font-story); font-size:14px; }
.journey-confirm-tools{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#756B61; font-size:11px; line-height:1.5; text-align:center; }
.journey-confirm-tools p{ margin:0; }
.journey-add-photo{ width:112px; height:40px; box-sizing:border-box; padding:0 10px; border:1px solid rgba(75,58,46,.22); border-radius:999px; display:flex; align-items:center; justify-content:center; gap:7px; color:#705A49; background:rgba(255,255,255,.56); box-shadow:0 7px 16px -13px rgba(69,55,43,.65); cursor:pointer; transition:transform .25s var(--ease),background .25s,border-color .25s; }
.journey-add-photo input{ display:none; }
.journey-add-photo svg{ width:17px; height:17px; }
.journey-add-photo span{ font-size:12px; line-height:1; }
.journey-add-photo:hover{ transform:translateY(-1px); background:rgba(255,255,255,.76); border-color:rgba(112,90,73,.38); }
.journey-confirm-pet img.is-regenerating{ opacity:.42; filter:blur(7px) drop-shadow(0 13px 16px rgba(81,66,48,.2)); animation:journeyRegenerate 1.1s ease-in-out infinite; }
@keyframes journeyRegenerate{ 50%{ opacity:.78; transform:scale(1.035); } }
.journey-confirm-btn{ width:112px; height:40px; box-sizing:border-box; margin-top:4px; padding:0; font-size:12px; }

/* ── 房间（场景 1 / 2） ───────────────────────────── */
.room{                              /* 参考图里没有地平线：一整片牛皮纸，物件靠影子落地 */
  background:
    radial-gradient(120% 82% at 20% 8%, rgba(255,243,216,.6), transparent 58%),
    linear-gradient(178deg, #DAC09C 0%, #E3CDAC 52%, #D6BB98 100%);
}
.room.daylight{
  background:
    radial-gradient(120% 82% at 20% 6%, rgba(255,248,228,.78), transparent 60%),
    linear-gradient(178deg, #E7D5B4 0%, #EFE3C7 52%, #E3CFAE 100%);
}

.sky{                               /* 时间流逝：早晨 → 黄昏 → 夜 */
  position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none;
  background:linear-gradient(178deg, #372C25 0%, #4C3B30 58%, #6B5340 100%);
  transition:opacity 2.4s var(--ease);
}
.room[data-time="dusk"] .sky{ opacity:.22; }
.room[data-time="night"] .sky{ opacity:.55; }

.light-shaft{                       /* 窗口洒进来的一道斜光 */
  position:absolute; z-index:2; left:-4%; top:6%; width:46%; height:70%;
  background:linear-gradient(150deg, rgba(255,240,204,.85) 0%, rgba(255,240,204,.2) 46%, rgba(255,240,204,0) 70%);
  filter:blur(16px); opacity:.5; pointer-events:none;
  transition:opacity 2s var(--ease);
}
.room[data-time="night"] .light-shaft{ opacity:.06; }

/* 物件基础 */
.obj{
  position:absolute; z-index:4;
  opacity:1; transform:translateY(0);
  filter:drop-shadow(0 9px 8px rgba(105,74,45,.16));
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease), filter .5s;
}
.obj.is-off{ opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; }
[data-touch]{ cursor:pointer; }
[data-touch]::before{
  content:""; position:absolute; inset:-18px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,197,110,.36), transparent 66%);
  opacity:0; transition:opacity .5s; pointer-events:none;
}
[data-touch]:not(.is-done)::before{ opacity:1; animation:breathe 3.6s ease-in-out infinite; }
[data-touch].is-done{ filter:drop-shadow(0 7px 7px rgba(105,74,45,.13)) saturate(.86); }
[data-touch]:hover{ transform:translateY(-3px); }

.obj-window{ left:8%; top:10%; width:74px; height:74px; border-radius:8px;
  background:var(--dusk-blue); box-shadow:inset 0 0 0 4px rgba(255,255,255,.6), 0 10px 22px -14px rgba(80,60,40,.7); }
.obj-window i{ position:absolute; inset:0; }
.obj-window i::before,.obj-window i::after{ content:""; position:absolute; background:var(--cream-hi); }
.obj-window i::before{ left:50%; top:6px; bottom:6px; width:6px; transform:translateX(-50%); }
.obj-window i::after{ top:50%; left:6px; right:6px; height:6px; transform:translateY(-50%); }

/* 桌子压在小狗前面：TA 是从桌子底下探出头的 */
.obj-table{ left:5%; bottom:42%; width:182px; height:120px; z-index:6; }
.obj-table b{ position:absolute; left:0; top:0; width:182px; height:14px; border-radius:7px;
  background:var(--wood); }
.obj-table u{ position:absolute; top:12px; width:12px; height:108px; border-radius:0 0 5px 5px;
  background:#B8955F; left:18px; }
.obj-table u.r{ left:auto; right:16px; }

.obj-box{ right:11%; bottom:50%; width:72px; height:56px; border-radius:5px; z-index:5;
  background:#C08E58; box-shadow:inset 0 -10px 0 rgba(120,80,40,.14); }
.obj-box::after{ content:""; position:absolute; left:8px; right:8px; top:12px; height:4px;
  border-radius:2px; background:rgba(120,80,40,.24); }

.obj-bowl{ left:9%; bottom:42%; width:78px; height:38px; border-radius:6px 6px 34px 34px;
  background:var(--dusk-blue); box-shadow:inset 0 6px 0 rgba(255,255,255,.4); }
.obj-bowl .ripple{
  position:absolute; left:50%; top:0; width:74px; height:74px; margin:-37px 0 0 -37px;
  border-radius:50%; border:2px solid var(--bulb); opacity:0;
}
.obj-bowl.is-active .ripple{ animation:ripple .9s ease-out 2; }

.obj-keys{ right:9%; top:18%; width:36px; height:72px; }
.obj-keys b{ position:absolute; left:50%; top:0; width:3px; height:22px; margin-left:-1.5px; background:rgba(75,58,46,.38); }
.obj-keys b::after{ content:""; position:absolute; left:50%; top:18px; width:20px; height:20px; margin-left:-10px;
  border-radius:50%; border:3px solid #9C8B72; }
.obj-keys em{ position:absolute; top:34px; left:4px; width:11px; height:30px; border-radius:3px;
  background:#A9967A; transform-origin:top center; }
.obj-keys em::after{ content:""; position:absolute; left:0; bottom:4px; width:6px; height:9px; background:#A9967A; }
.obj-keys em.k2{ left:20px; height:24px; background:#BCA98B; }
.obj-keys.is-active em{ animation:jingle .5s ease-in-out 3; }
@keyframes jingle{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(11deg)} 70%{transform:rotate(-9deg)} }

.obj-sofa{ right:5%; bottom:46%; width:126px; height:66px; z-index:5; }
.obj-sofa b{ position:absolute; left:0; bottom:0; width:126px; height:40px; border-radius:9px 9px 6px 6px;
  background:var(--terracotta); box-shadow:0 10px 18px -12px rgba(120,60,35,.8); }
.obj-sofa u{ position:absolute; left:7px; bottom:32px; width:112px; height:32px; border-radius:13px 13px 0 0; background:#D8977A; }

.obj-leash{ left:45%; top:9%; width:34px; height:96px; transform-origin:50% 0; }
.obj-leash::after{ content:""; position:absolute; left:50%; top:-9px; width:16px; height:9px;
  margin-left:-8px; border-radius:4px 4px 0 0; background:rgba(75,58,46,.42); }
.obj-leash u{ position:absolute; left:50%; top:0; width:30px; height:30px; margin-left:-15px;
  border:6px solid var(--terracotta-d); border-radius:50%; }
.obj-leash b{ position:absolute; left:50%; top:26px; width:13px; height:56px; margin-left:-6.5px;
  border-radius:5px; background:var(--terracotta-d); }
.obj-leash i{ position:absolute; left:50%; top:78px; width:11px; height:17px; margin-left:-5.5px;
  border-radius:3px 3px 5px 5px; background:#9C8B72; }
.obj-leash.is-active{ animation:sway 1.1s ease-in-out 2; }
@keyframes sway{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(6deg)} }

.obj-bed{ left:31%; bottom:40%; width:112px; height:36px; }
.obj-bed b{ position:absolute; inset:0; border-radius:20px; background:#D9C09A;
  box-shadow:inset 0 7px 13px rgba(115,84,52,.4), inset 0 -3px 0 rgba(255,255,255,.25); }
.obj-bed.is-active b{ box-shadow:inset 0 12px 20px rgba(115,84,52,.55); }

.touch-hint{
  position:absolute; left:50%; bottom:34%; transform:translateX(-50%); z-index:8;
  font-size:11.5px; letter-spacing:.14em; color:rgba(75,58,46,.48);
  transition:opacity .6s;
}
.touch-hint.is-hidden{ opacity:0; }

/* ── 宠物 ─────────────────────────────────────────── */
.pet-slot{
  position:absolute; z-index:5;
  left:50%; bottom:44%;
  width:118px; margin-left:-59px;
  transition:left 1.5s var(--ease), bottom 1.5s var(--ease);
}
.pet-slot::after{      /* 落在地板上的影子 */
  content:""; position:absolute; left:50%; bottom:7px; width:66%; height:15px;
  margin-left:-33%; border-radius:50%; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(105,74,45,.42), rgba(105,74,45,0) 72%);
  filter:blur(3px);
}
.pet{
  display:block; width:100%; height:auto;
  filter:blur(calc((1 - var(--detail)) * 7px)) drop-shadow(0 10px 12px rgba(110,80,50,.22));
  opacity:calc(.5 + var(--detail) * .5);
  transition:filter 1.4s var(--ease), opacity 1.4s var(--ease), transform .6s var(--ease);
  transform-origin:50% 100%;
}
.pet-slot.face-left .pet{ transform:scaleX(-1); }
.pet-slot.is-bouncing .pet{ animation:bounce .62s ease-in-out 3; }
.pet-slot.is-running .pet{ animation:dash .5s ease-in-out 3; }
@keyframes bounce{ 0%,100%{ transform:translateY(0) } 45%{ transform:translateY(-15px) } }
@keyframes dash{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-7px) rotate(-3deg) } }
.pet-slot.face-left.is-bouncing .pet{ animation-name:bounceL; }
.pet-slot.face-left.is-running .pet{ animation-name:dashL; }
@keyframes bounceL{ 0%,100%{ transform:scaleX(-1) translateY(0) } 45%{ transform:scaleX(-1) translateY(-15px) } }
@keyframes dashL{ 0%,100%{ transform:scaleX(-1) translateY(0) rotate(0) } 50%{ transform:scaleX(-1) translateY(-7px) rotate(3deg) } }

/* ── 场景 3：夜里的爪印 ───────────────────────────── */
[data-scene="s3"] .world{ background:linear-gradient(178deg, #2F2823 0%, #3E332B 60%, #4C3E33 100%); }
[data-scene="s3"] .dock{ background:linear-gradient(180deg, rgba(60,50,42,0), rgba(48,40,34,.92) 30%, rgba(44,36,31,.97)); }
[data-scene="s3"] .narration{ color:rgba(247,232,205,.9); }
[data-scene="s3"] .narration em{ color:var(--bulb); }
[data-scene="s3"] .ghost-btn{ color:rgba(247,232,205,.72); border-color:rgba(247,232,205,.26); }
[data-scene="s3"] .ghost-btn:hover{ background:rgba(247,232,205,.1); color:var(--cream-hi); }
[data-scene="s3"] .paw-label{ color:rgba(247,232,205,.6); }
[data-scene="s3"] .field{ background:rgba(247,232,205,.94); }
.moon{
  position:absolute; right:9%; top:5%; width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%, #FBEBC6, #E7C989);
  box-shadow:0 0 50px 16px rgba(242,197,110,.24);
}
.paw-field{ position:absolute; inset:0; }
.paw-choice{
  position:absolute; width:64px; height:64px; padding:0; border:0; background:transparent;
  cursor:pointer; display:grid; place-items:center;
  transition:transform .5s var(--ease), opacity .6s;
}
.paw-choice svg{ width:38px; height:38px; fill:rgba(247,232,205,.34); transition:fill .5s, filter .5s; }
.paw-choice:hover svg{ fill:rgba(247,232,205,.6); }
.paw-choice .tag{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:11px; letter-spacing:.06em;
  color:rgba(247,232,205,.55); margin-top:2px;
}
.paw-choice.is-chosen{ transform:scale(1.28); }
.paw-choice.is-chosen svg{ fill:var(--bulb); filter:drop-shadow(0 0 14px rgba(242,197,110,.9)); }
.paw-choice.is-dimmed{ opacity:.28; }
.paw-choice.is-kept svg{ fill:var(--bulb); filter:drop-shadow(0 0 20px rgba(242,197,110,1)); }

/* ── 狗狗社区：找到其中属于 TA 的一间 ─────────────── */
.neighborhood-scene{ overflow:hidden; background:#EED9BF; }
.neighborhood-camera{ position:absolute; inset:0; overflow:hidden; background:#EED9BF; }
.neighborhood-map{
  position:absolute; inset:0; opacity:0; transform:scale(.96);
  transform-origin:50% 61%; transition:transform 2.2s cubic-bezier(.55,.02,.18,1), opacity 1.35s ease, filter 1.5s ease;
}
.neighborhood-map>img{ width:100%; height:100%; display:block; object-fit:cover; }
.neighborhood-scene.is-settled .neighborhood-map{ opacity:1; transform:scale(1); }
.neighborhood-scene.is-entering .neighborhood-map{ opacity:1; transform:translateY(-11%) scale(2.4); filter:saturate(.92) brightness(1.05); }
/* 推镜末尾交叉淡入房子特写。用的就是主页那张 home-v3.png，渲染方式与 .home-art
   完全一致，所以切到 home 场景时画面重合，房子不跳、不换姿势。
   社区图只有 1086x1448 且压缩很重，推镜到 2.4 倍已是它的分辨率上限，
   再往里推必须靠这一层，不能靠放大原图。 */
.neighborhood-closeup{
  position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none;
  background:#EBD7BE url("assets/home-v3.png") center / 100% auto no-repeat;
  transition:opacity 1s var(--ease);
}
.neighborhood-scene.is-closeup .neighborhood-closeup{ opacity:1; }
.neighborhood-wash{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 61%, rgba(255,244,214,0) 0 9%, rgba(238,217,191,.22) 25%, rgba(238,217,191,.62) 70%);
  transition:opacity 1.1s ease;
}
.neighborhood-scene.is-chosen .neighborhood-wash{ opacity:1; }
.neighborhood-scene.is-entering .neighborhood-wash{ opacity:0; }
.chosen-home{
  position:absolute; left:50%; top:61%; width:19%; aspect-ratio:1/1.08;
  transform:translate(-50%,-50%); display:grid; place-items:center; opacity:0;
  transition:opacity .8s ease, transform .9s var(--ease); pointer-events:none;
}
.chosen-halo{
  position:absolute; inset:-5%; border:1.5px solid rgba(203,130,92,.78); border-radius:44% 44% 34% 34%;
  background:rgba(255,239,199,.12); box-shadow:0 0 0 7px rgba(255,239,199,.12), 0 0 28px rgba(240,181,98,.56);
  animation:chosen-home-breathe 1.8s ease-in-out infinite;
}
.chosen-home svg{ width:20px; height:20px; fill:#C87E5B; filter:drop-shadow(0 1px 4px rgba(255,242,206,.9)); }
.neighborhood-scene.is-chosen .chosen-home{ opacity:1; transform:translate(-50%,-50%) scale(1.04); }
.neighborhood-scene.is-entering .chosen-home{ opacity:.2; }
.neighbor-light{
  position:absolute; width:8px; height:8px; border-radius:50%; opacity:0;
  background:#FFE4A2; box-shadow:0 0 13px 5px rgba(255,210,112,.66);
}
.light-one{ left:13%; top:22%; }.light-two{ right:12%; top:40%; }.light-three{ left:29%; top:76%; }
.neighborhood-scene.is-settled .neighbor-light{ animation:neighbor-wake 2.4s ease-in-out infinite alternate; }
.neighborhood-scene.is-settled .light-two{ animation-delay:.55s; }.neighborhood-scene.is-settled .light-three{ animation-delay:1.1s; }
@keyframes neighbor-wake{ 0%,25%{ opacity:.12; transform:scale(.75); } 70%,100%{ opacity:.8; transform:scale(1); } }
@keyframes chosen-home-breathe{ 50%{ transform:scale(1.06); box-shadow:0 0 0 10px rgba(255,239,199,.08), 0 0 38px rgba(240,181,98,.72); } }
.neighborhood-scene .dock{ z-index:4; padding-bottom:calc(42px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(238,217,191,0),rgba(238,217,191,.94) 48%); transition:opacity .7s ease; }
.neighborhood-scene .narration{ text-align:center; color:#655348; text-shadow:0 1px 0 rgba(255,247,228,.75); }
.neighborhood-scene.is-entering .dock{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .neighborhood-map{ transition-duration:.01ms; }
  .neighbor-light,.chosen-halo{ animation:none !important; }
}

/* ── 第三阶段：首页 ─────────────────────────────────── */
.home-hub{ background:#EBD7BE; overflow:hidden; }
.home-hub.is-active{ z-index:61; }
.home-art{
  position:absolute; inset:0;
  /* 按参考图比例显示，房子不被拉伸；底部以纸张色延展 */
  background:#EBD7BE url("assets/home-v3.png") center / 100% auto no-repeat;
  transition:filter 1.1s var(--ease), transform 1.1s var(--ease);
}
.home-night{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(36,31,32,.34), rgba(34,28,30,.62));
  mix-blend-mode:multiply;
  transition:opacity 1.1s var(--ease);
}
.home-hub.is-lights-off .home-art{ filter:brightness(.73) saturate(.78); }
.home-hub.is-lights-off .home-night{ opacity:1; }
.home-hotspot:focus{ outline:none; }
.home-hotspot{
  position:absolute; z-index:3; padding:0; border:0; cursor:pointer; background:transparent;
  border-radius:50%; -webkit-tap-highlight-color:transparent;
}
.home-hotspot::after{ content:""; position:absolute; inset:-8px; border:1px solid rgba(255,238,180,.82); border-radius:inherit; opacity:0; transform:scale(.72); box-shadow:0 0 18px rgba(244,207,112,.58); pointer-events:none; }
.home-hotspot.is-reacting::after{ animation:home-object-glow .72s var(--ease) both; }
@keyframes home-object-glow{ 0%{ opacity:0; transform:scale(.72); } 38%{ opacity:1; } 100%{ opacity:0; transform:scale(1.16); } }
.home-lamp{ left:39%; top:27%; width:24%; height:11%; }
.home-mailbox{ left:23%; top:53%; width:19%; height:13%; border-radius:30%; }
.home-bowl{ left:28%; top:67%; width:18%; height:10%; border-radius:45%; }
.home-pet{ left:56%; top:56%; width:28%; height:25%; border-radius:42%; }
.home-bubble{
  position:absolute; z-index:4; left:69%; top:48%; margin:0; width:max-content; max-width:47%;
  padding:9px 13px; border-radius:15px 15px 4px 15px; transform:translate(-50%, 8px) scale(.96); opacity:0;
  color:var(--ink); background:rgba(255,249,234,.92); box-shadow:0 12px 24px -17px rgba(70,49,33,.75);
  font-family:var(--font-story); font-size:12px; line-height:1.55; letter-spacing:.025em;
  text-align:center; pointer-events:none; transition:opacity .3s, transform .3s var(--ease);
}
.home-bubble::after{ content:""; position:absolute; right:13px; bottom:-7px; width:14px; height:14px; background:inherit; clip-path:polygon(0 0,100% 0,100% 100%); }
.home-bubble.is-visible{ opacity:1; transform:translate(-50%,0) scale(1); }
.letter-sheet{
  position:absolute; z-index:8; left:18px; right:18px; bottom:24px; max-height:67%; overflow:auto;
  padding:28px 26px 24px; border-radius:5px 5px 20px 20px;
  background:linear-gradient(135deg, #FFF9EB, #F6E7CB); color:var(--ink);
  box-shadow:0 20px 42px rgba(48,32,19,.35); animation:letter-in .5s var(--ease) both;
}
.letter-sheet[hidden]{ display:none; }
.letter-page{ background:#E7D5BC; overflow:hidden; isolation:isolate; }
.letter-page::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:#E7D5BC url("assets/letter-doodles-v2.png") center / cover no-repeat;
  filter:saturate(.72) contrast(.9); opacity:.78;
  transform:scale(1.025);
}
.letter-page::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(235,218,190,.24);
}
.letter-page .letter-sheet{
  z-index:2; inset:0; max-height:none; overflow:hidden;
  padding:calc(50px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom));
  border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none;
}
.letter-page .letter-close{
  z-index:3; top:calc(15px + env(safe-area-inset-top)); right:18px;
  border-radius:50%; background:rgba(244,230,205,.72); box-shadow:none;
}
.letter-reading{
  width:100%; max-height:58%; overflow:auto; padding:18px 44px 42px;
  border:0; border-radius:0;
  background:linear-gradient(180deg,rgba(244,231,208,.94) 0%,rgba(244,231,208,.86) 68%,rgba(244,231,208,0) 100%);
  box-shadow:none; backdrop-filter:blur(16px); scrollbar-width:thin;
}
.letter-page .letter-body,.letter-page .letter-sign{ text-shadow:0 1px 0 rgba(255,252,244,.9); }
@keyframes letter-in{ from{ opacity:0; transform:translateY(28px) rotate(-1.5deg); } to{ opacity:1; transform:translateY(0) rotate(0); } }
.letter-close{
  position:absolute; top:8px; right:10px; width:30px; height:30px; padding:0; border:0;
  background:transparent; color:var(--ink-soft); cursor:pointer; font-size:25px; font-weight:300; line-height:1;
}
.letter-date{ margin:0 0 6px; color:var(--ink-soft); font-size:11px; letter-spacing:.1em; }
.letter-sheet h2{ margin:0 0 18px; font-family:var(--font-story); font-size:22px; font-weight:400; letter-spacing:.08em; }
.letter-body{ font-family:var(--font-story); font-size:15px; line-height:2; letter-spacing:.035em; }
.letter-body p{ margin:0 0 12px; }
.letter-sign{ margin:18px 0 0; text-align:right; color:var(--terracotta-d); font-family:var(--font-story); font-size:15px; }

/* ── Companion：小狗对话 ───────────────────────────── */
.companion{ background:linear-gradient(178deg, #DFC5A0 0%, #E4CEAC 40%, #DCC29E 100%); }
.c-head{
  flex:0 0 auto; z-index:6;
  padding:calc(16px + env(safe-area-inset-top)) 24px 8px;
  display:flex; align-items:baseline; gap:10px;
}
.home-back{
  position:relative; margin-left:auto; width:35px; height:35px; padding:0; border:0; background:transparent;
  cursor:pointer; isolation:isolate;
}
.home-back::before{
  content:""; position:absolute; inset:1px; border-radius:50%; background:rgba(255,251,237,.34);
  transform:scale(.88); transition:transform .25s var(--ease), background .25s;
}
.home-back-roof,.home-back-wall{ position:absolute; left:50%; display:block; z-index:1; transform:translateX(-50%); }
.home-back-roof{ top:7px; width:19px; height:15px; background:var(--terracotta); clip-path:polygon(50% 0,100% 68%,100% 100%,0 100%,0 68%); }
.home-back-wall{ top:18px; width:15px; height:11px; border-radius:2px 2px 4px 4px; background:var(--cream-hi); }
.home-back-wall::after{ content:""; position:absolute; left:5px; bottom:0; width:5px; height:7px; border-radius:2px 2px 0 0; background:var(--dusk-blue); }
.home-back:hover::before{ background:rgba(255,251,237,.62); transform:scale(1); }
.home-back:hover .home-back-roof{ animation:home-wiggle .6s var(--ease); }
@keyframes home-wiggle{ 35%{ transform:translateX(-50%) translateY(-2px) rotate(-5deg); } 70%{ transform:translateX(-50%) rotate(4deg); } }
.c-name{ font-family:var(--font-story); font-size:17px; letter-spacing:.06em; color:var(--ink); }
.c-sub{ font-size:11.5px; letter-spacing:.1em; color:var(--ink-soft); }

.companion-pet{
  position:absolute; z-index:5; right:12px; bottom:78px; left:auto; width:84px; margin:0;
  filter:drop-shadow(0 9px 10px rgba(74,50,31,.18)); pointer-events:none;
  transition:transform .45s var(--ease), filter 1.1s var(--ease);
}
.companion-pet .pet{ width:100%; height:auto; }
.companion-pet .generated-dog-img{ transition:filter 1.1s var(--ease); }
.home-hub.is-lights-off ~ .scene.companion .companion-pet .generated-dog-img{ filter:brightness(.73) saturate(.78); }

/* 叙事流 */
.thread{
  flex:1 1 auto; height:0; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:30px 22px 142px;
  display:flex; flex-direction:column; justify-content:flex-start; gap:11px;
  mask-image:linear-gradient(180deg, transparent 0, #000 22px);
  scrollbar-width:thin;
  scrollbar-color:rgba(122,99,80,.55) transparent;
}
.thread::-webkit-scrollbar{ width:7px; }
.thread::-webkit-scrollbar-track{ background:transparent; }
.thread::-webkit-scrollbar-thumb{ background:rgba(122,99,80,.48); border-radius:999px; }

.beat{ display:flex; flex-direction:column; gap:7px; animation:rise .7s var(--ease) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(9px);} to{ opacity:1; transform:translateY(0);} }

.line{ font-family:var(--font-story); font-size:15px; line-height:1.8; letter-spacing:.02em; margin:0; }
.line-env{ color:var(--ink-soft); font-size:14px; }
.line-act{ color:var(--ink-mid); font-size:14.5px; }
.line-say{
  align-self:flex-start; max-width:76%;
  background:var(--cream-hi); color:var(--ink);
  padding:11px 15px; border-radius:var(--r-md) var(--r-md) var(--r-md) 5px;
  box-shadow:0 8px 16px -12px rgba(90,60,35,.8);
}
.line-push{ color:var(--terracotta-d); font-size:14px; }
.line-me{
  align-self:flex-end; max-width:76%;
  background:var(--terracotta); color:var(--cream-hi);
  padding:11px 15px; border-radius:var(--r-md) var(--r-md) 5px var(--r-md);
  font-family:var(--font-ui); font-size:14.5px; line-height:1.7;
}
.line-soft{
  align-self:stretch; text-align:center; color:var(--ink-soft); font-size:12.5px;
  font-family:var(--font-ui); letter-spacing:.04em; padding:2px 0;
}

.typing{ display:flex; gap:5px; align-self:flex-start; padding:12px 15px;
  background:var(--cream-hi); border-radius:var(--r-md) var(--r-md) var(--r-md) 5px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-soft); opacity:.4;
  animation:dots 1.2s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.16s; }
.typing i:nth-child(3){ animation-delay:.32s; }
@keyframes dots{ 0%,100%{ opacity:.25; transform:translateY(0) } 50%{ opacity:.85; transform:translateY(-3px) } }

.composer{
  flex:0 0 auto; z-index:6;
  display:flex; gap:8px; align-items:center;
  padding:10px 18px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(228,206,172,0), rgba(228,206,172,.94) 34%);
}
.c-input{
  flex:1; min-width:0; border:1px solid rgba(75,58,46,.14); border-radius:999px;
  background:var(--cream-hi); padding:12px 18px; outline:none;
  font-family:var(--font-ui); font-size:14.5px; color:var(--ink);
  box-shadow:0 6px 14px -12px rgba(90,60,35,.9);
}
.c-input::placeholder{ color:rgba(122,99,80,.5); }
.icon-btn.continue{ background:rgba(75,58,46,.1); color:var(--ink-mid); }
.icon-btn.continue:hover{ background:rgba(75,58,46,.18); }
.icon-btn.continue.is-nudging{ animation:breathe 2.6s ease-in-out infinite; }

/* ── 录音浮层 ─────────────────────────────────────── */
.rec-overlay{
  position:absolute; inset:0; z-index:40; display:grid; place-items:center;
  background:rgba(45,36,30,.5); backdrop-filter:blur(3px);
  animation:fade .3s var(--ease);
  /* 纯提示层，不能吃掉指针事件：否则录音一开始浮层就盖在爪印上，
     松手事件落到浮层上，长按录音永远收不到 pointerup。 */
  pointer-events:none;
  touch-action:none;
}
.rec-overlay[hidden]{ display:none; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.rec-card{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.wave{ display:flex; align-items:center; gap:5px; height:56px; }
.wave i{ width:4px; border-radius:2px; background:var(--bulb); height:10px;
  animation:wave .9s ease-in-out infinite; }
@keyframes wave{ 0%,100%{ height:9px; opacity:.6 } 50%{ height:42px; opacity:1 } }
.rec-tip{ margin:0; font-size:12.5px; letter-spacing:.14em; color:rgba(247,232,205,.75); }
.rec-pause{ margin:0; min-height:42px; font-size:16px; line-height:1.45; text-align:center; color:rgba(247,232,205,.9); opacity:0; transition:opacity .35s ease; }
.rec-pause.is-visible{ opacity:1; }

/* ── 响应式 ───────────────────────────────────────── */
@media (max-width:520px){
  #app{ padding:0; gap:0; }
  .stage{ width:100%; height:100dvh; border-radius:0; box-shadow:none; }
  .stage-note{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.12s !important; }
}