* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #E9EEF6; color: #34405C; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:root { --hand: 'Kaiti SC', 'STKaiti', 'KaiTi', serif; --ink: #34405C; --paper: #FFFDF8; --sub: #6B7896; }

/* 没接模型时页面顶部的细条：避免误以为是 AI 写的 */
#nomodel { position: fixed; left: 0; right: 0; top: 0; z-index: 9000; height: 18px; line-height: 18px; text-align: center; font-size: 11px; letter-spacing: .2em; color: #fff; background: #8A93AB; }
#nomodel:not([hidden]) ~ #app { padding-top: 24px; }
#nomodel:not([hidden]) ~ #page { top: 18px; }

#app { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 10px; }

/* 桌面看整个房间（3:2）；竖屏手机只看一部分（4:5），镜头跟着她平移 */
#stage { position: relative; width: min(100%, calc((100dvh - 110px) * 1.5)); aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 28px rgba(52,64,92,.2); user-select: none; -webkit-user-select: none; background: #DCE6F5; container-type: size; }
@media (max-aspect-ratio: 1/1) { #stage { aspect-ratio: 4 / 5; width: min(100%, calc((100dvh - 110px) * .8)); } }
#world { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 1536 / 1024; will-change: transform; container-type: inline-size; }
#world > .bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#actors { position: absolute; inset: 0; pointer-events: none; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--sub); background: rgba(240,244,250,.85); z-index: 5000; }

.actor { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; transition: opacity .5s; }
.actor .shadow { position: absolute; left: 20%; right: 20%; bottom: -1.5%; height: 5%; border-radius: 50%; background: rgba(40,52,90,.16); }
.hop, .face, .breath { position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; }
.face { transition: transform .22s ease-in-out; }
.breath { animation: breathe 3.2s ease-in-out infinite; }
.breath.slow { animation-duration: 5s; }
.breath img { display: block; width: 100%; height: 100%; pointer-events: none; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(0.988, 1.018); } }
.hop.walk { animation: hop .34s ease-in-out infinite alternate; }
.hop.walk.run { animation-duration: .2s; }
@keyframes hop { from { transform: translateY(0) rotate(calc(var(--lean, 0deg) - 2.5deg)); } to { transform: translateY(-5%) rotate(calc(var(--lean, 0deg) + 2.5deg)); } }
.hop.walk.stride { animation: stride .1s ease-in-out infinite alternate; }
.hop.walk.stride.run { animation-duration: .065s; }
@keyframes stride { from { transform: translateY(0) rotate(var(--lean, 0deg)); } to { transform: translateY(-2.2%) rotate(var(--lean, 0deg)); } }
.hop.swap { animation: swap .22s ease-out; }
@keyframes swap { 0% { transform: scale(1.07, .92); } 60% { transform: scale(.98, 1.03); } 100% { transform: none; } }
.hop.jump { animation: jump .62s cubic-bezier(.3,.7,.4,1); }
@keyframes jump { 0% { transform: scale(1.08, .9); } 30% { transform: translateY(-22%) scale(.94, 1.08); } 62% { transform: translateY(0) scale(1.08, .92); } 82% { transform: scale(.98, 1.03); } 100% { transform: none; } }
.actor.jumping .shadow { animation: shadowjump .62s cubic-bezier(.3,.7,.4,1); }
@keyframes shadowjump { 30% { transform: scale(.6); opacity: .5; } 100% { transform: none; opacity: 1; } }
.hop.happy { animation: happy .5s ease-out; }
@keyframes happy { 0% { transform: none; } 40% { transform: translateY(-9%) scale(.97, 1.04); } 70% { transform: translateY(0) scale(1.04, .96); } 100% { transform: none; } }

/* 气泡：她说的话；.act 是灰色括号里的动作描写（预写，不冒充她说话） */
.bubble { position: absolute; transform: translate(-50%, -100%); z-index: 3000; width: max-content; max-width: 15em; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 5px 12px; font-size: clamp(13px, 1.7vw, 17px); line-height: 1.4; text-align: center; font-family: var(--hand); animation: pop .25s ease-out; box-shadow: 0 3px 0 rgba(52,64,92,.15); pointer-events: none; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; background: var(--paper); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.bubble.act { color: #8A93AB; border-color: #B8C0D4; border-style: dashed; font-family: -apple-system, "PingFang SC", sans-serif; font-size: clamp(12px, 1.4vw, 14px); box-shadow: none; }
.bubble.act::after { border-color: #B8C0D4; border-style: dashed; }
@keyframes pop { from { transform: translate(-50%, -80%) scale(.6); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }
.fx { position: absolute; z-index: 3000; font-size: clamp(14px, 2vw, 22px); animation: float 1.4s ease-out forwards; pointer-events: none; }
@keyframes float { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-50%, -120%) scale(1.1); opacity: 0; } }
.sticker { position: absolute; z-index: 2900; transform: translate(-50%, 0); filter: drop-shadow(0 4px 6px rgba(40,52,90,.25)); animation: stickerpop 1.7s ease-out forwards; pointer-events: none; }
@keyframes stickerpop { 0% { transform: translate(-50%, 10%) scale(.3) rotate(-12deg); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.08) rotate(4deg); opacity: 1; } 25% { transform: translate(-50%, 0) scale(1) rotate(0); } 85% { opacity: 1; } 100% { transform: translate(-50%, -12%) scale(.96); opacity: 0; } }

/* 被子：盖在床上睡着的她身上，只露出脑袋 */
#blanket { position: absolute; inset: 0; z-index: 600; pointer-events: none; opacity: 0; transition: opacity .6s; }
#blanket.on { opacity: 1; }
#blanket svg { width: 100%; height: 100%; }
/* 光照按真实钟点：19:00 起傍晚、23:00 起夜 */
#night { position: absolute; inset: 0; z-index: 2500; pointer-events: none; opacity: 0; transition: opacity 3s ease; }
#night.dusk, #night.on { opacity: 1; }
#night .dark { position: absolute; inset: 0; background: #1B2350; mix-blend-mode: multiply; opacity: .6; transition: background 3s, opacity 3s; }
#night.dusk .dark { background: #C77A55; opacity: .32; }
#night .glow { position: absolute; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255,226,160,.9) 0%, rgba(255,214,140,.32) 40%, rgba(255,214,140,0) 70%); transform: translate(-50%, -50%); transition: opacity 3s; }
#night.dusk .glow { opacity: .45; }
/* 她出门时留的便利贴，贴在窗玻璃上（竖屏镜头也看得到） */
#note { position: absolute; left: 39%; top: 21%; transform: rotate(-6deg); background: #FFF6D8; border: 2px solid #B98A6E; border-radius: 6px; padding: 3px 10px; font-family: var(--hand); font-size: 1.25cqw; z-index: 300; box-shadow: 0 2px 4px rgba(40,52,90,.2); white-space: nowrap; }

/* ---------- 小窝里的东西 ---------- */
/* 发光、轻轻浮动的东西：点一下 */
.loot { position: absolute; transform: translate(-50%, -100%); padding: .3em; border: 0; background: none; line-height: 1; font-size: 3.4cqw; cursor: pointer; pointer-events: auto;
  filter: drop-shadow(0 0 .22em rgba(255,244,184,.95)) drop-shadow(0 2px 2px rgba(40,52,90,.3)); animation: bob 1.5s ease-in-out infinite alternate; }
.loot.shell { font-size: 2.6cqw; }
.loot.letter { font-size: 4.4cqw; }
.loot.parcel { font-size: 4.2cqw; }
.loot.diary { font-size: 2.8cqw; }
.loot::before { content: ""; position: absolute; left: 50%; bottom: 4px; width: 1.5em; height: .5em; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(rgba(255,236,150,.9), rgba(255,236,150,0) 70%); z-index: -1; }
.loot::after { content: "✦"; position: absolute; right: 2px; top: 0; font-size: .42em; color: #FFD75E; animation: twinkle 1.1s ease-in-out infinite; }
.loot.still { animation: none; filter: drop-shadow(0 2px 2px rgba(40,52,90,.3)); }
.loot.still::before, .loot.still::after { display: none; }
@keyframes bob { from { transform: translate(-50%, -100%); } to { transform: translate(-50%, -114%); } }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
.loot.picked { animation: picked .3s ease-in forwards; pointer-events: none; }
@keyframes picked { to { transform: translate(-50%, -160%) scale(1.5); opacity: 0; } }
/* 信从镜头前的门缝滑进来 */
.loot.letter.slide { animation: slidein 1.2s cubic-bezier(.2,.8,.3,1), bob 1.5s 1.2s ease-in-out infinite alternate; }
@keyframes slidein { from { transform: translate(-50%, 60%) rotate(-14deg); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-50%, -100%); } }
.loot.parcel.held { animation: none; transition: left .2s, top .2s; }

/* 门口小桌（代码绘制），电饭锅（代码绘制） */
.prop { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.prop svg { display: block; width: 100%; height: 100%; overflow: visible; }
#table { width: 11.5%; aspect-ratio: 170 / 70; z-index: 940; }
#cooker { width: 4.4%; aspect-ratio: 70 / 66; z-index: 330; pointer-events: auto; cursor: pointer; }
#cooker .steam { opacity: 0; }
#cooker.full .steam { opacity: 1; animation: steam 2.4s ease-in-out infinite; }
#cooker.full .steam:nth-child(2) { animation-delay: .8s; }
#cooker .lid { transition: transform .4s; transform-origin: 12px 22px; }
#cooker.empty .lid { transform: rotate(-24deg); }
@keyframes steam { from { transform: translateY(0); opacity: 0; } 30% { opacity: .9; } to { transform: translateY(-14px); opacity: 0; } }
.snack { position: absolute; transform: translate(-50%, -100%); font-size: 2.6cqw; line-height: 1; z-index: 945; pointer-events: none; filter: drop-shadow(0 2px 1px rgba(40,52,90,.3)); }
.visitor { position: absolute; transform: translate(-50%, -100%); font-size: 4cqw; line-height: 1; z-index: 960; pointer-events: none; transition: left linear, top linear; }
.visitor.walk { animation: vhop .3s ease-in-out infinite alternate; }
.visitor.eat { animation: veat .4s ease-in-out infinite alternate; }
.visitor.flip > span { display: inline-block; transform: scaleX(-1); }
@keyframes vhop { to { transform: translate(-50%, -112%); } }
@keyframes veat { to { transform: translate(-50%, -100%) rotate(-12deg) scale(1.05, .95); } }

/* 带回来的特产摆在窗台上，越攒越满 */
#shelf { position: absolute; inset: 0; z-index: 340; pointer-events: none; }
#shelf span { position: absolute; transform: translate(-50%, -100%); font-size: 2.6cqw; line-height: 1; filter: drop-shadow(0 2px 1px rgba(40,52,90,.3)); }
#shelf span.new { animation: placein .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes placein { from { transform: translate(-50%, -220%) scale(1.8); opacity: 0; } to { transform: translate(-50%, -100%); opacity: 1; } }

/* ---------- 顶部与底部 ---------- */
#hud { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 4000; display: flex; gap: 6px; pointer-events: none; }
#hud > * { pointer-events: auto; }
#btn-menu { margin-left: auto; padding: 3px 12px; }
.chip { border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); padding: 3px 10px; font: 600 14px/1.3 -apple-system, "PingFang SC", sans-serif; box-shadow: 0 2px 0 var(--ink); }
button.chip { cursor: pointer; }
.chip.bump { animation: bump .35s ease-out; }
@keyframes bump { 40% { transform: scale(1.22); } 100% { transform: none; } }
.flyer { position: absolute; z-index: 4500; font-size: 24px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%); }
.plus { position: absolute; z-index: 4500; transform: translate(-50%, 0); color: #E0567A; font-weight: 800; font-size: 14px; pointer-events: none; animation: float 1.2s ease-out forwards; }
#toast { position: absolute; left: 50%; top: 52px; z-index: 4100; transform: translateX(-50%); max-width: 90%; padding: 6px 14px; border-radius: 12px; background: rgba(52,64,92,.88); color: #FFF6DA; font-size: 13px; text-align: center; animation: popin .25s ease-out; pointer-events: none; }

.bar { width: min(100%, 560px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bar button { min-height: 52px; padding: 4px 2px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); font-size: 15px; font-weight: 600; box-shadow: 0 3px 0 var(--ink); cursor: pointer; line-height: 1.2; }
.bar button small { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.bar button:disabled { opacity: .5; cursor: default; }
.bar button:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.bar button.nudge { animation: nudge 1s ease-in-out 3; }
@keyframes nudge { 50% { transform: translateY(-5px); box-shadow: 0 8px 0 var(--ink); background: #FFF1BC; } }

/* ---------- 底部弹出面板：手机从下往上，桌面居中 ---------- */
#sheet { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: flex-end; justify-content: center; background: rgba(27,35,80,.35); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.panel { width: 100%; max-width: 440px; max-height: 78dvh; overflow: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--paper); border: 2px solid var(--ink); border-bottom: 0; border-radius: 20px 20px 0 0; animation: rise .28s cubic-bezier(.2,.8,.3,1); }
@media (min-width: 700px) and (min-aspect-ratio: 1/1) { #sheet { align-items: center; } .panel { border-bottom: 2px solid var(--ink); border-radius: 20px; } }
@keyframes rise { from { transform: translateY(40%); opacity: 0; } }
.panel h3 { margin: 0 0 4px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.panel h3 .x { margin-left: auto; }
.panel .sub { margin: 0 0 8px; font-size: 12px; color: var(--sub); }
.x { border: 0; background: none; font-size: 20px; cursor: pointer; padding: 2px 8px; color: var(--sub); }
.opt { display: flex; width: 100%; align-items: center; gap: 10px; margin: 6px 0; padding: 8px 10px; text-align: left; background: #fff; border: 2px solid #D5DCEB; border-radius: 12px; cursor: pointer; }
.opt.on { border-color: var(--ink); background: #EEF3FC; }
.opt:disabled { opacity: .5; cursor: default; }
.opt .e { font-size: 26px; line-height: 1; }
.opt .t { flex: 1; font-weight: 600; }
.opt small { display: block; font-weight: 400; font-size: 12px; color: var(--sub); }
.opt .n { font-size: 12px; color: var(--sub); white-space: nowrap; }
.mini { min-width: 54px; min-height: 34px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); font-weight: 600; cursor: pointer; }
.mini.primary, .row button.primary { background: var(--ink); color: var(--paper); }
.mini:disabled, .row button:disabled { opacity: .4; cursor: default; }
.row { display: flex; gap: 8px; margin-top: 12px; }
.row button { flex: 1; min-height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); font-weight: 600; font-size: 15px; cursor: pointer; }
.group { margin: 10px 0 2px; font-size: 12px; font-weight: 700; color: var(--sub); }
.packed { display: flex; gap: 10px; justify-content: center; padding: 14px 0 6px; font-size: 40px; }
.link { border: 0; background: none; padding: 0; font-size: 13px; color: #4B6BC0; text-decoration: underline; cursor: pointer; }
.talkrow { display: flex; gap: 8px; margin-top: 8px; }
.talkrow input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 12px; font: 16px -apple-system, "PingFang SC", sans-serif; background: #fff; }
.talkrow .mini { min-width: 64px; }
.count { text-align: right; font-size: 11px; color: var(--sub); margin-top: 4px; }

/* ---------- 全屏页 ---------- */
#page { position: fixed; inset: 0; z-index: 7000; overflow: auto; background: var(--paper); animation: fade .2s; }
.pg { max-width: 640px; margin: 0 auto; padding: 12px 16px calc(28px + env(safe-area-inset-bottom)); }
.pg header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 0; background: var(--paper); }
.pg header h2 { margin: 0; font-size: 18px; }
.pg header .x { margin-left: auto; font-size: 24px; }
.menu-list { display: grid; gap: 10px; padding-top: 8px; }
.menu-list button { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; text-align: left; border: 2px solid var(--ink); border-radius: 14px; background: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.grid .cell { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; border: 0; padding: 0; background: #E3E8F2; cursor: pointer; }
.grid .cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid.items .cell { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 2px; background: #EEF3FC; cursor: default; font-size: 38px; line-height: 1; }
.grid.items .cell small { font-size: 11px; color: var(--sub); }
.grid.items .cell.miss { background: #E3E8F2; }
.grid.items .cell.miss .sil { filter: brightness(0); opacity: .14; }
.grid.items .cell.miss small { font-weight: 800; font-size: 14px; color: #9AA6C0; }
.empty { padding: 40px 0; text-align: center; color: var(--sub); font-size: 14px; }
.day { margin: 14px 0; padding: 12px 14px; background: #fff; border: 2px solid #D5DCEB; border-radius: 14px; }
.day h4 { margin: 0 0 6px; font-size: 14px; color: var(--sub); }
.think { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 4px 10px; border-radius: 999px; background: #EEF1F7; color: #6B7896; font-size: 13px; cursor: pointer; }
.think .arrow { transition: transform .2s; }
.think[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.day ul { margin: 8px 0 0; padding: 0 0 0 12px; border-left: 3px solid #E3E8F2; list-style: none; }
.day li { margin: 6px 0; font: 16px/1.6 var(--hand); }
.book { list-style: none; margin: 8px 0; padding: 0; }
.book li { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px dashed #D5DCEB; font: 16px/1.5 var(--hand); }
.book li .tx { flex: 1; }
.book li.nick .tx { font-weight: 700; }
.book li .k { font: 12px -apple-system, "PingFang SC", sans-serif; color: var(--sub); display: block; }
.book .mini { min-width: 52px; font-size: 13px; }
.book li .k .done { color: #3E8E5E; font-weight: 700; }
.book li.ok .tx { color: var(--sub); }
/* 点章弹出的地方列表 */
.place { display: flex; width: 100%; align-items: center; gap: 10px; margin: 6px 0; padding: 8px 10px; text-align: left; background: #fff; border: 2px solid #D5DCEB; border-radius: 12px; cursor: pointer; color: var(--ink); font: inherit; }
.place:disabled { cursor: default; }
.place .e { font-size: 26px; line-height: 1; }
.place .t { flex: 1; font-weight: 600; }
.place small { display: block; font-weight: 400; font-size: 12px; color: var(--sub); }
.place .n { font-size: 12px; color: var(--sub); white-space: nowrap; }
#sheet.over { z-index: 7500; }

/* 足迹（§14）：旅行线路图 + 省份印章册。不是地图：没有经纬网格、点阵，不按地理位置摆放 */
:root { --line: #4B6BC0; --seal: #C8423B; }
.ln-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 8px; font-size: 14px; font-weight: 700; }
.ln-name { padding: 3px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--line); color: #fff; box-shadow: 0 2px 0 var(--ink); }
.ln-box { position: relative; max-height: 52dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0 0 14px; padding: 0 10px 0 0; background: #FBF7EE; border: 2px solid #E4DCCB; border-radius: 14px; }
.ln { --lx: 92px; position: relative; min-width: 0; }
.ln-bar { position: absolute; left: calc(var(--lx) - 4px); width: 8px; border-radius: 4px; background: var(--line); }
.ln-st { position: absolute; left: calc(var(--lx) - 22px); right: 0; height: 44px; margin-top: -22px; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 0; border: 0; background: none; text-align: left; color: var(--ink); font: inherit; }
button.ln-st { cursor: pointer; border-radius: 12px; }
button.ln-st:hover .nm b, button.ln-st:focus-visible .nm b { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ln-st .dot { flex: none; width: 18px; height: 18px; margin-left: 13px; border: 4px solid var(--line); border-radius: 50%; background: #fff; }
.ln-st .tx { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ln-st .nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ln-st .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.ln-st small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--sub); }
.ln-st .em { flex: none; font-size: 22px; line-height: 1; }
.ln-st .np { flex: none; padding: 1px 6px; border-radius: 6px; background: var(--seal); color: #FFF8F0; font: 700 11px/1.5 -apple-system, "PingFang SC", sans-serif; font-style: normal; }
.ln-st.dim { opacity: .55; }
.ln-home { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: 7px; border: 3px solid var(--line); border-radius: 50%; background: #fff; font-size: 15px; line-height: 1; }
.ln-km { position: absolute; right: calc(100% - var(--lx) + 14px); transform: translateY(-50%); font-size: 12px; color: #9AA3B8; white-space: nowrap; }
.ln-empty { margin: -4px 0 0; padding: 0 12px 16px 80px; text-wrap: balance; font-size: 14px; color: var(--sub); }
/* 她的小圆头像：idle 精灵裁头部成圆形 */
.av { --s: 32px; display: block; flex: none; width: var(--s); height: var(--s); border: 2px solid var(--ink); border-radius: 50%; background: #fff url(/art/sprites/idle-blue.webp) no-repeat;
  background-size: calc(var(--s) * 450 / 280) calc(var(--s) * 600 / 280); background-position: calc(var(--s) * -65 / 280) calc(var(--s) * -25 / 280); box-shadow: 0 2px 0 rgba(52,64,92,.25); }
.ln-st .av { margin-left: 6px; }
.av.bob { animation: avbob 1.3s ease-in-out infinite alternate; }
@keyframes avbob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
/* 卡片里：线段一段段画出来，站随之出现，头像沿线滑到最后一站 */
.ln.compact .ln-st { height: 30px; margin-top: -15px; }
.ln.compact .ln-st .nm b { font-size: 14px; }
.ln.compact .ln-st .em { font-size: 18px; }
.ln.compact .ln-home { width: 26px; height: 26px; margin-left: 9px; font-size: 13px; }
.ln-ride { position: absolute; left: calc(var(--lx) - 16px); margin-top: -16px; z-index: 2; transform: translateY(var(--dy)); animation: lnride var(--dur) linear .35s both; }
.ln-ride .av { animation: avbob 1.3s ease-in-out calc(var(--dur) + .35s) infinite alternate; }
@keyframes lnride { from { transform: translateY(0); } }
.ln-bar.grow { transform-origin: top; animation: lngrow var(--dur) linear .35s both; }
@keyframes lngrow { from { transform: scaleY(0); } }
.ln.anim .ln-new { animation: lnin .35s ease-out both; animation-delay: calc(.35s + var(--at) * var(--dur)); }
@keyframes lnin { from { opacity: 0; } }
.ln.anim .ln-km.ln-new { animation-name: lnkm; }
@keyframes lnkm { from { opacity: 0; transform: translateY(-50%); } }

/* 省份印章册：34 格网格（手机 5 列、桌面 7 列），只是网格 */
.stp-title { margin: 6px 0 10px; font-size: 15px; }
.stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 4px; }
@media (min-width: 600px) { .stamps { grid-template-columns: repeat(7, 1fr); gap: 12px 8px; } }
.stp { display: grid; place-items: center; min-width: 0; padding: 2px 0; border: 0; background: none; font: inherit; }
.stp .ring { position: relative; display: grid; place-items: center; align-content: center; gap: 1px; width: min(100%, 62px); aspect-ratio: 1; border-radius: 50%; }
.stp .nm { font-size: 12px; line-height: 1.1; white-space: nowrap; }
.stp.off .ring { border: 2px dashed #C3CAD9; }
.stp.off .nm { color: #A7AFC2; }
.stp.on { cursor: pointer; }
.stp.on .ring { border: 2.5px solid var(--seal); color: var(--seal); transform: rotate(var(--tilt)); background: rgba(200,66,59,.05); }
.stp.on .ring::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--seal); border-radius: 50%; opacity: .8; }
.stp.on .em { font-size: 22px; line-height: 1; }
.stp.on .nm { font-weight: 800; letter-spacing: .04em; }
.stp.fresh .ring { opacity: 0; }
.stp.fresh.press .ring { opacity: 1; animation: stampin .7s cubic-bezier(.3,.7,.4,1) var(--delay, 0s) both; }
@keyframes stampin { 0% { transform: rotate(var(--tilt)) scale(2.3); opacity: 0; } 45% { transform: rotate(var(--tilt)) scale(.9); opacity: 1; }
  60% { transform: rotate(calc(var(--tilt) + 4deg)) scale(1.04); } 75% { transform: rotate(calc(var(--tilt) - 3deg)) scale(.99); } 90% { transform: rotate(calc(var(--tilt) + 1deg)); } 100% { transform: rotate(var(--tilt)) scale(1); } }
/* "你不在的日子里"卡片 */
.away h3 { justify-content: center; font-size: 18px; margin-bottom: 8px; }
.away-line { padding-right: 8px; border: 2px solid #E4DCCB; border-radius: 12px; background: #FBF7EE; }
.away-lead { margin: 10px 0 4px; font-weight: 700; }
.away-list { margin: 0; padding: 0 0 0 1.4em; font: 16px/1.6 var(--hand); }
.away-list .more { list-style: none; margin-left: -1.4em; font-family: inherit; font-size: 14px; color: var(--sub); }
.away-km { margin: 6px 0 0; font-size: 13px; color: var(--sub); }
.about p { line-height: 1.7; }
.danger { border-color: #C0475F !important; color: #C0475F; }

/* ---------- 明信片与特产：深色全屏 ---------- */
#viewer { position: fixed; inset: 0; z-index: 8000; display: grid; place-items: center; background: rgba(27,35,80,.78); animation: fade .2s; container-type: size; }
.mwrap { display: grid; justify-items: center; gap: 12px; max-width: 94vw; }
.tap { margin: 0; color: #FFF6DA; font-size: 13px; text-align: center; }
.new { position: absolute; left: -10px; top: -12px; z-index: 2; background: #E0567A; color: #fff; border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: 14px; transform: rotate(-10deg); }
.postcard { position: relative; background: var(--paper); padding: 2cqh 2cqh 1.4cqh; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.35); transform: rotate(-2deg); animation: flipin .7s cubic-bezier(.2,.8,.3,1.15); }
.postcard img { display: block; height: min(62cqh, 106cqw); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; }
.pc-cap { margin: 1.2cqh 0 .3cqh; max-width: min(46.5cqh, 79cqw); font: clamp(13px, min(3.4cqh, 4.2cqw), 22px)/1.4 var(--hand); }  /* 18 字要在手机上一行放得下 */
.pc-meta { margin: 0; font-size: 12px; color: var(--sub); }
.postcard.bare .pc-meta { margin-top: 1cqh; }
.stamp { position: absolute; right: -8px; top: -10px; width: 46px; height: 54px; display: grid; place-items: center; font-size: 26px; background: #FFF; border: 3px dotted #E0567A; transform: rotate(8deg); }
@keyframes flipin { from { transform: perspective(900px) rotateY(85deg) scale(.6); opacity: 0; } to { transform: rotate(-2deg); opacity: 1; } }
.souv { position: relative; min-width: 240px; max-width: 86vw; padding: 3cqh 28px 2.4cqh; text-align: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.3); animation: popin .5s cubic-bezier(.3,1.5,.5,1); }
.souv .big { width: 26cqh; height: 26cqh; margin: 0 auto; display: grid; place-items: center; font-size: 15cqh; line-height: 1; border-radius: 50%; background: radial-gradient(circle, #FFF1BC 0%, rgba(255,241,188,0) 70%); animation: spinin .9s ease-out; }
.souv h3 { margin: .4em 0 .2em; font-size: 18px; }
.souv p { margin: 0; }
.souv .line { font: 16px var(--hand); }
.souv .meta { margin-top: 6px; font-size: 12px; color: var(--sub); }
.souv .fact { margin: 6px auto 0; max-width: 18em; font-size: 12px; line-height: 1.5; color: var(--sub); }
@keyframes popin { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spinin { from { transform: rotate(-200deg) scale(.3); } to { transform: none; } }

/* 起名 */
.naming { position: fixed; inset: 0; z-index: 8500; display: grid; place-items: center; background: linear-gradient(#E9EEF6, #D5E0F2); }
.naming form { display: grid; gap: 14px; justify-items: center; padding: 24px; }
.naming img { width: 150px; }
.naming h1 { margin: 0; font: 26px var(--hand); }
.naming input { width: 220px; min-height: 48px; padding: 8px 14px; text-align: center; border: 2px solid var(--ink); border-radius: 14px; font: 20px var(--hand); background: #fff; }
.naming button { min-width: 160px; min-height: 48px; border: 2px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 16px; box-shadow: 0 3px 0 #1d2438; cursor: pointer; }

/* 调试面板（只在 ?debug=1） */
#debug { position: fixed; right: 8px; top: 24px; z-index: 9500; width: min(340px, calc(100vw - 16px)); padding: 8px; background: rgba(20,24,40,.92); color: #DDE4F5; border-radius: 10px; font: 11px/1.4 ui-monospace, Menlo, monospace; }
#debug .btns { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
#debug button { padding: 4px 8px; border: 1px solid #6B7896; border-radius: 6px; background: #2A3350; color: #fff; font-size: 11px; cursor: pointer; }
#debug pre { max-height: 32vh; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-all; }
#debug.min pre { display: none; }
.warnbar { position: fixed; left: 50%; bottom: 90px; z-index: 9400; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #34405C; color: #FFF6DA; font-size: 13px; }
.warnbar button { border: 1px solid #FFF6DA; border-radius: 8px; background: none; color: #FFF6DA; padding: 4px 10px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .breath, .hop.walk, .hop.jump, .hop.happy, .hop.swap, .face, .sticker, .loot, .loot::after, .visitor, #cooker .steam, .av, .ln-ride, .ln-bar, .ln .ln-new, .stp .ring { animation: none !important; transition: none !important; }
  .stp.fresh .ring { opacity: 1; } }
/* 明信片照片右下角"AI 生成" */
.pc-photo { position: relative; }
.ai-mark { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.28); color: rgba(255,255,255,.88); font-size: 11px; letter-spacing: .04em; pointer-events: none; }

/* §17: one unmistakable placeholder for every pending photograph. */
.photo-placeholder { aspect-ratio: 2 / 3; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #e7e7e5; color: #555652; }
.photo-placeholder > span { font-size: 40px; }
.photo-placeholder small { font-size: 14px; }
.cell .pc-photo { display: block; }
.cell .photo-placeholder > span { font-size: 24px; }
.cell .photo-placeholder small { font-size: 12px; }
.photo-dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #3458a1; border: 2px solid white; }
.photo-notice { font-size: 14px; text-align: center; color: var(--ink); }

.postcard .photo-placeholder { width: min(46.5cqh, 79.5cqw); height: min(62cqh, 106cqw); aspect-ratio: 3 / 4; }

/* §16.8：手机竖屏用底栏以外的完整高度；桌面保留 3:2。 */
@media (max-aspect-ratio: 1/1) {
  #app { height: 100dvh; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); gap: 0; justify-content: flex-start; }
  #stage { flex: 1; min-height: 0; width: 100%; aspect-ratio: auto; border-radius: 0; }
  .bar { flex: 0 0 auto; padding: 8px; width: 100%; }
  #nomodel:not([hidden]) ~ #app { padding-top: 18px; }
}
.photo-content { display: block; width: 100%; height: 100%; }
.photo-content.gull-photo { transform: rotate(-2deg) scale(.97); }
.rare-mark { position: absolute; top: 8px; left: 8px; z-index: 3; background: #f3d47f; color: #604714; border: 1px solid #a37b29; padding: 3px 8px; border-radius: 3px; font-size: 13px; }
.preset-diary { color: #7b7b7b; }
.stp.gold .ring { border: 5px double #b48a23; color: #866310; }
.mischief-decor { position: absolute; z-index: 2900; pointer-events: none; font-size: 3cqw; transform: translate(-50%, -100%); }
.mischief-sweat { animation: mischief-hop .8s ease-in-out infinite alternate; }
@keyframes mischief-hop { to { transform: translate(-50%, -120%); } }
.snack-bitten .snack { clip-path: polygon(0 0, 70% 0, 60% 22%, 85% 22%, 76% 43%, 100% 38%, 100% 100%, 0 100%); }