:root {
  --night: #1a1830;
  --paper: #efe8da;
  --ink: #2a2530;
  --gold: #d8ae66;
  --dim: #9a93aa;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: #0e0d18; }
body { font-family: "Songti SC", "STSong", "SimSun", serif; color: var(--paper); overflow: hidden; }

/* 手机框：桌面上居中一列，手机上铺满 */
#phone { position: relative; height: 100%; max-width: 440px; margin: 0 auto; background: var(--night); overflow: hidden; }
#stage { position: absolute; inset: 0; overflow: hidden; cursor: pointer; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#skyup { position: absolute; left: -2000px; right: -2000px; top: -3000px; height: 3002px; background: linear-gradient(#0d1030, #1c2656 55%, rgb(45, 63, 120)); }   /* 楼图上方接出来的天：封面拉远时用 */
#skyfade { position: absolute; left: 0; right: 0; top: 0; height: 420px; pointer-events: none;
  background: linear-gradient(rgb(45, 63, 120), rgba(45, 63, 120, 0)); transition: opacity 9s; }   /* 把画里的天和上面接出来的天融在一起，不留接缝 */
#skyfade.gone { opacity: 0; }   /* will-change 只在移动时由 app.js 打开 */
/* 天空的几个阶段：夕阳西斜（太阳 + 橙粉的云）→ 日落（太阳沉下去、云变紫淡掉）→ 入夜（星月由 #nightsky 浮现）；只画在天空里（skymask）*/
#skyfx { position: absolute; left: 0; top: 0; width: 2600px; height: 2900px; pointer-events: none;
  -webkit-mask: url(assets/skymask-s.png) 0 0 / 100% 100% no-repeat; mask: url(assets/skymask-s.png) 0 0 / 100% 100% no-repeat; }
#sun { position: absolute; left: 460px; top: 1150px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, #fff3d6 0 48%, #ffcf8a 62%, rgba(255, 160, 90, 0) 72%);
  box-shadow: 0 0 120px 60px rgba(255, 170, 110, .45), 0 0 380px 180px rgba(255, 130, 110, .22);
  transition: transform 3.6s cubic-bezier(.4, 0, .8, .6), opacity 3.6s ease, filter 3.6s ease; }
#skyfx.sunset #sun { transform: translateY(420px); filter: hue-rotate(-20deg) saturate(1.4); opacity: .2; }
#skyfx .glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 22% at 20% 47%, rgba(255, 150, 100, .38), rgba(255, 120, 130, .12) 55%, rgba(0, 0, 0, 0) 80%);
  transition: opacity 10s ease; }
#skyfx.set .glow { opacity: 0; }
#skyfx.sunset .glow { opacity: .55; }
#skyfx .cloud { position: absolute; height: 46px; border-radius: 50%; filter: blur(12px); opacity: .75;
  background: linear-gradient(90deg, rgba(255, 190, 150, 0), rgba(255, 185, 150, .9) 30%, rgba(240, 150, 150, .85) 70%, rgba(255, 190, 150, 0));
  animation: drift 60s linear infinite alternate; transition: opacity 9s ease 1s, filter 9s ease; }
#skyfx.set .cloud { opacity: 0; filter: blur(14px) hue-rotate(40deg) brightness(.7); }
@keyframes drift { to { transform: translateX(120px) } }
#walkers > img { position: absolute; pointer-events: none; transform-origin: 50% 100%; }   /* 楼下走动的路人剪影 */
#nightsky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 8s ease 3s; }
#nightsky.show { opacity: 1; animation: twinkle2 6s ease-in-out 11s infinite; }
#tiles img.amb { opacity: 0; }   /* 残月和星星：压在傍晚蓝下面，入夜才浮现 */
@keyframes twinkle2 { 50% { opacity: .82 } }
#base { display: block; width: 100%; height: 100%; transition: filter 2.5s ease; }
#day { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 9s cubic-bezier(.45, 0, .55, 1); }   /* 傍晚蓝那张，慢慢淡掉就是入夜 */
#day.gone { opacity: 0; }
#tiles img { position: absolute; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
#tiles img.on { opacity: 1; }
#tiles img.flash { animation: flash .9s ease; }
@keyframes flash { 0% { opacity: 0 } 30% { opacity: 1; filter: brightness(1.5) } 45% { opacity: .7 } 100% { opacity: 1; filter: none } }
#tiles img.blink { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: .15 } 50% { opacity: 1 } }
#room { position: absolute; object-fit: fill;   /* 高清屋子和窗同比例（export_rooms），不裁 */ opacity: 0; transition: opacity .8s ease; pointer-events: none; }
#room.on { opacity: 1; }


/* 封面：天上的问话 + 窗中心的波纹 */
#sky { position: absolute; left: 0; right: 0; top: 36%; transform: translateY(-50%); padding: 26px 20px; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse 66% 72% at 50% 50%, rgba(10, 9, 24, .8), rgba(10, 9, 24, 0)); opacity: 0; transition: opacity 1.2s ease; }
#sky.show { opacity: 1; }
#sky p { opacity: 0; transition: opacity 1.4s ease; letter-spacing: .06em; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
#sky .l1 { font-size: 20px; line-height: 1.9; color: #f6eedd; letter-spacing: .05em; }   /* 和开场旁白同一套字 */
#sky .l2 { font-size: 14px; margin-top: 10px; color: #9a93aa; letter-spacing: .3em; }
#sky.show .l1 { opacity: 1; }
#sky.show .l2 { opacity: 1; transition-delay: 1.2s; }
#ripple { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; pointer-events: none; opacity: 0; }
#ripple.on { opacity: 1; }
#ripple.on::before, #ripple.on::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255, 236, 190, .85); border-radius: 50%; animation: ring 2s ease-out infinite; }
#ripple.on::after { animation-delay: 1s; }
@keyframes ring { from { transform: scale(.3); opacity: 1 } to { transform: scale(2.2); opacity: 0 } }

/* 开场旁白：一句一句浮在天上（文案见 design/文案-类型测试-v9-1-设计版.md「开场文案」）*/
#black { position: absolute; inset: 0; background: #0b0a14; transition: opacity 2s ease; pointer-events: none; }
#black.gone { opacity: 0; }

/* 首屏封面：傍晚的楼 + 标题（分镜 v1 那句）+ 轻触开始 */
#cover { position: absolute; inset: 0; z-index: 3; text-align: center; transition: opacity 1.4s ease; pointer-events: none; }
#cover::before { content: ""; position: absolute; inset: 0; z-index: -1;     /* 黄昏：天顶压暗 + 地平线后面一抹橙粉余晖 + 暗角 */
  background:
    radial-gradient(ellipse 90% 26% at 50% 78%, rgba(255, 150, 110, .42), rgba(230, 110, 130, .18) 45%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(rgba(8, 9, 30, .82), rgba(20, 20, 56, .35) 38%, rgba(60, 40, 90, .12) 60%, rgba(0, 0, 0, 0) 72%, rgba(8, 8, 20, .45)),
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0, 0, 0, 0) 60%, rgba(4, 4, 14, .5));
  mix-blend-mode: normal; }
#cover::after { content: ""; position: absolute; inset: 0 0 55% 0; z-index: -1; opacity: .8;   /* 天顶零星几颗星 */
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 9%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 71% 14%, #fff, transparent), radial-gradient(1px 1px at 86% 26%, #fff, transparent),
    radial-gradient(1px 1px at 58% 5%, #fff, transparent), radial-gradient(1.2px 1.2px at 39% 31%, #ffe9c9, transparent),
    radial-gradient(1px 1px at 93% 8%, #fff, transparent), radial-gradient(1px 1px at 6% 40%, #fff, transparent);
  animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .45 } }
#cover.gone { opacity: 0; }
#cover .brand { margin-top: 24%; font-size: 11px; letter-spacing: .16em; color: #a9a3c4; white-space: nowrap; }   /* 英文全称：字距收小，手机一行放得下 */
#cover h1 { margin: 26px 18px 0; font-weight: normal; font-size: 25px; line-height: 2; letter-spacing: .1em; color: #f6eedd;
  text-shadow: 0 2px 20px rgba(8, 8, 30, .7); white-space: nowrap; }
#cover h1 u { display: inline-block; min-width: 0; margin: 0 .15em; padding: 0 .1em; text-decoration: none; text-align: center; line-height: 1.3;
  border-bottom: 1.5px solid #e9b765; color: #f3d9a0; transition: opacity .5s ease, filter .5s ease; }   /* 封面两个空：填好的反差词 */
#cover .start { position: absolute; left: 0; right: 0; bottom: calc(2.5% + env(safe-area-inset-bottom)); font-size: 13px; letter-spacing: .6em; color: #f3e6c8; }
#cover .start::before { content: ""; display: block; width: 28px; height: 1px; margin: 0 auto 16px; background: rgba(243, 230, 200, .5); }
#cover .start { animation: breathe 2.4s ease-in-out infinite; }
/* 右上角音乐开关 */
#mute { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 5; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(243, 230, 200, .28); background: rgba(14, 13, 28, .38); backdrop-filter: blur(4px); cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; gap: 2.5px; padding: 0 0 12px; transition: border-color .4s, opacity .4s; }
#mute i { width: 2.5px; height: 12px; border-radius: 2px; background: #f3e6c8; transform-origin: bottom; animation: eq 1.4s ease-in-out infinite; }   /* 音乐开：四根细柱慢慢起伏，像夜里的声波 */
#mute i:nth-child(2) { animation-duration: 1.1s; animation-delay: -.4s; }
#mute i:nth-child(3) { animation-duration: 1.6s; animation-delay: -.9s; }
#mute i:nth-child(4) { animation-duration: 1.25s; animation-delay: -.2s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
#mute.off { opacity: .55; border-color: rgba(243, 230, 200, .16); }
#mute.off i { animation: none; transform: scaleY(.18); transition: transform .5s; }   /* 音乐关：柱子落平成一排小点 */
@keyframes breathe { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
#tell, #note { position: absolute; left: 0; right: 0; top: 36%; transform: translateY(-50%); padding: 30px 16px; text-align: center; font-size: 20px; line-height: 1.9;
  color: #f6eedd; letter-spacing: .05em; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 66% 72% at 50% 50%, rgba(10, 9, 24, .8), rgba(10, 9, 24, 0));   /* 只在字后面垫一团暗光，不遮楼 */
  text-shadow: 0 1px 10px rgba(8, 8, 20, .9); }   /* 开场旁白、过渡批注、最后的问话：全部同一个位置、同一套字 */
#tell.on, #note.on { opacity: 1; }

/* 答题：写在夜色里（对应 pen「3 推近 · 第一题」）*/
#card { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 22px calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(18, 16, 36, 0), rgba(18, 16, 36, .9) 28%, rgba(18, 16, 36, .98));
  opacity: 0; transition: opacity .7s cubic-bezier(.22, 1, .36, 1); }
#card.on { opacity: 1; }
#card > * { transform: translateY(14px); opacity: 0; transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
#card.on > * { transform: none; opacity: 1; }
#card.on > #who { transition-delay: .15s; }          /* 深色底先晕开，门牌随后浮上来，再开始打字 */
#card.on > #q { transition-delay: .22s; }
#card.on > #prog { transition-delay: .3s; }
#card.on > #scene { transition-delay: .2s; }
#card:not(.on) > * { transition-duration: .25s; }    /* 收起：内容先淡掉，底色再退 */
.plate { display: inline-block; background: #2f4f8f; color: #f2f4fa; font-size: 12px; padding: 4px 10px; border-radius: 3px;
  letter-spacing: .04em; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
#q { font-size: 20px; line-height: 1.55; margin: 14px 0; color: #f3e6c8; min-height: 3.1em; }   /* 留两行高度，打字时卡片不跳 */
#opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#opts.v { grid-template-columns: 1fr 1fr; }
#opts { pointer-events: none; }
#opts.show { pointer-events: auto; }
#opts button { opacity: 0; transform: translateY(5px); transition: opacity .4s ease, transform .4s ease, background .25s, color .25s, box-shadow .25s, border-color .25s; }
#opts.show button { opacity: 1; transform: none; }                 /* 三格像三扇窗依次亮起（延迟由 app.js 按顺序给） */
#opts.dim button:not(.pick) { opacity: .25; }                       /* 选完：另外两格先暗下去 */
#opts.out button { opacity: 0; transition-delay: 0s !important; }    /* 换题：一起淡出，位置留着，卡片不跳 */
#scene { font-size: 14px; line-height: 1.6; margin: 12px 0 -4px; color: #9a93aa; min-height: 1.6em; letter-spacing: .03em; }   /* 情景：浅色小字 */
#scene:empty { min-height: 0; margin: 0; }
#scene.typing::after, #q.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 3px; vertical-align: -.15em;
  background: #f3e6c8; animation: caret .8s steps(1) infinite; }   /* 打字光标 */
@keyframes caret { 50% { opacity: 0 } }
#opts button { font: inherit; font-size: 16px; height: 52px; border-radius: 2px; border: 1.5px solid #5a5470; background: #1e1c34;
  color: #cfc6dc; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
#opts button.pick { background: #e9b765; border-color: #ffe2a6; color: #3a2610; box-shadow: 0 0 24px rgba(233, 183, 101, .55); }
#prog { display: flex; gap: 5px; margin-top: 14px; justify-content: center; }
#prog i { width: 10px; height: 12px; border-radius: 1px; background: #2c2944; }
#prog i.on { background: #e9b765; box-shadow: 0 0 6px rgba(233, 183, 101, .6); }
#prog i.pop { animation: pop .38s ease-out; }
@keyframes pop { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 220, 150, 0) } 40% { transform: scale(1.6); box-shadow: 0 0 14px rgba(255, 220, 150, .95) } 100% { transform: scale(1) } }
.spark { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; z-index: 6; pointer-events: none;
  background: #ffe2a6; box-shadow: 0 0 10px 4px rgba(255, 210, 140, .8), 0 0 24px 8px rgba(233, 183, 101, .35); }
#tiles img.kept { opacity: .72; filter: brightness(.82); transition: opacity 1.2s ease, filter 1.2s ease; }   /* 答过的窗：灯留着，暗一档 */
#prog i.now { background: #2c2944; outline: 1px solid #e9b765; }

/* 结果：整栋楼压暗，写在夜色里（对应 pen「8 结果」），不用印章 */
#dim { position: absolute; inset: 0; background: rgba(14, 13, 24, .4); opacity: 0; transition: opacity 1.2s; pointer-events: none; }
#dim.on { opacity: 1; }
#result { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 46vh 26px calc(30px + env(safe-area-inset-bottom)); text-align: center;
  background: linear-gradient(rgba(18, 16, 36, 0) 30%, rgba(18, 16, 36, .95) 52%, #121024 60%); animation: rise 1.2s ease both; }   /* 上面留出你那扇还亮着的窗，往下滑看详细 */
@keyframes rise { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: none } }
#result .small { font-size: 13px; color: #8f87a6; letter-spacing: .08em; }
#result h2 { font-size: 44px; font-weight: normal; color: #f3d9a0; margin: 12px 0 14px; letter-spacing: .08em; text-shadow: 0 0 30px rgba(243, 217, 160, .35); }
#result .line { font-size: 16px; line-height: 1.75; color: #e8dcc4; margin: 14px 0 18px; text-wrap: balance; }   /* 折行时两行差不多长，不留孤字 */
.axis { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; color: #6f6888; }
.axis .lean { color: #f3d9a0; }
.axis > span:first-child, .axis > span:last-child { width: 5.2em; white-space: nowrap; }
.axis > span:first-child { text-align: left; } .axis > span:last-child { text-align: right; }
.axis small { font-size: 11px; margin: 0 .35em; opacity: .85; }
.axis .bar { flex: 1; display: flex; gap: 3px; height: 10px; }
.axis .bar i { height: 100%; border-radius: 5px; background: #4a4260; }   /* 另一端：暗 */
.axis .bar i.on { background: #e9b765; box-shadow: 0 0 8px rgba(233, 183, 101, .35); }   /* 偏的那一端：亮 */
#result button { margin-top: 26px; font: inherit; font-size: 15px; padding: 10px 26px; border-radius: 2px; border: 1.5px solid #5a5470; background: #1e1c34; color: #cfc6dc; cursor: pointer; }

#wind { position: absolute; left: 0; top: 0; pointer-events: none; }   /* 压在白天图下面：入夜白天图淡掉后才露出来 */
/* 天台：被子随风摆，抽烟的人和烟头 */
#wind > img.quilt { position: absolute; transform-origin: 50% 0; animation: sway 3.6s ease-in-out infinite; }
@keyframes sway {   /* 一阵风：往一边鼓起来、下摆甩开，再慢慢回落，中间还有小抖 */
  0%, 100% { transform: rotate(-1deg) skewX(2deg) scaleY(1); }
  18% { transform: rotate(5deg) skewX(-9deg) scaleY(.94); }
  26% { transform: rotate(3.5deg) skewX(-6deg) scaleY(.96); }
  32% { transform: rotate(5.5deg) skewX(-10deg) scaleY(.93); }
  55% { transform: rotate(.5deg) skewX(1deg) scaleY(1); }
  75% { transform: rotate(2deg) skewX(-3deg) scaleY(.98); } }
#roof { position: absolute; overflow: hidden; pointer-events: none; }
#roof img { position: absolute; left: 0; }
#roof b { position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: #ff6a2a;
  box-shadow: 0 0 4px 2px rgba(255, 110, 40, .7), 0 0 12px 4px rgba(255, 90, 30, .3); transition: box-shadow .5s, background .5s, opacity .6s;
  animation: ember 2.4s ease-in-out infinite; }
@keyframes ember { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
#roof b.puff { background: #ffb070; box-shadow: 0 0 6px 3px rgba(255, 140, 60, .95), 0 0 20px 8px rgba(255, 100, 30, .45); animation: none; opacity: 1; }
#roof b.gone { opacity: 0; }
#roof i { position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(rgba(220, 215, 230, .55), rgba(220, 215, 230, 0) 70%); animation: smoke 4.2s ease-out forwards; }
@keyframes smoke { from { opacity: .9; translate: 0 0; scale: 1; } to { opacity: 0; translate: -46px -34px; scale: 5; } }   /* 往上飘、被风吹向左，越飘越散 */
#wind > img.tree { position: absolute; transform-origin: 40% 100%; animation: treesway 6.5s ease-in-out infinite; animation-delay: .9s; }
@keyframes treesway { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-1.1deg) skewX(.8deg); } 30% { transform: rotate(-.7deg); }
  36% { transform: rotate(-1.2deg) skewX(1deg); } 60% { transform: rotate(-.1deg); } 78% { transform: rotate(-.4deg); } }

/* 夜里的细节 */
#wind .tv { position: absolute; mix-blend-mode: screen; opacity: 0; transition: opacity .12s, background .2s; filter: blur(2px); }
#wind .rim { position: absolute; mix-blend-mode: screen; background: linear-gradient(90deg, rgba(160, 185, 255, .08), rgba(180, 200, 255, .45)); filter: blur(1px); }
#wind .pass { position: absolute; overflow: hidden; }
#wind .pass i { position: absolute; bottom: -4px; left: 0; width: 22px; height: 52px; border-radius: 11px 11px 4px 4px; background: rgba(24, 18, 28, .72); filter: blur(1.2px); }
#wind .pass i::before { content: ''; position: absolute; left: 4px; top: -16px; width: 14px; height: 15px; border-radius: 50%; background: inherit; }
#walkers > .cat { position: absolute; left: 0; pointer-events: none; }
#tiles img.last { filter: brightness(1.25) drop-shadow(0 0 18px rgba(255, 200, 120, .6)); transition: filter 2s ease; }

/* 结果页：英文代号、身边型、厉害在/亏在/适合的生意、这个月做一件事、出口 */
#result .en { font-size: 13px; color: #b8aed0; letter-spacing: .06em; margin: 12px 0 0; line-height: 1.6; font-style: italic; }
#result .en span { font-style: normal; color: #8f87a6; }
#result .around { font-size: 15px; line-height: 1.8; color: #cfc6dc; margin: 16px 0 0; }
#result .facts { text-align: left; margin: 26px 0 0; }
#result .facts div { padding: 12px 0; border-top: 1px solid rgba(207, 198, 220, .12); }
#result .facts dt { font-size: 12px; color: #8f87a6; letter-spacing: .1em; margin-bottom: 4px; }
#result .facts dd { margin: 0; font-size: 15px; line-height: 1.75; color: #e8dcc4; }
#result .todo { margin: 22px 0 0; padding: 16px 18px; text-align: left; border: 1px solid rgba(233, 183, 101, .35); background: rgba(233, 183, 101, .06); }
#result .todo h3 { font-size: 14px; font-weight: normal; color: #e9b765; letter-spacing: .08em; margin: 0 0 10px; }
#result .todo p { margin: 0; font-size: 15px; line-height: 1.75; color: #f0e4cc; text-wrap: pretty; }   /* 末行不留孤字 */
#result .qr { margin-top: 26px; }
#result .qr p { font-size: 14px; color: #cfc6dc; margin: 0 0 12px; }
#result .qr img { width: 150px; height: 150px; object-fit: contain; background: #fff; padding: 8px; box-sizing: border-box; }
#result button.main { border-color: #e9b765; color: #f3d9a0; }   /* 生成结果卡：主按钮 */
#result .again { display: inline-block; margin-top: 14px; font-size: 13px; color: #8f87a6; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#cardview { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(8, 7, 18, .92); color: #cfc6dc; font-size: 13px; padding: 20px; }
#cardview img { max-width: 100%; max-height: 78vh; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
#cardview button { font: inherit; padding: 8px 22px; border: 1px solid #5a5470; background: #1e1c34; color: #cfc6dc; border-radius: 2px; }
#day.freed, #skyfx.freed { display: none; }   /* 入夜后傍晚图、太阳和云用不到了：直接不渲染，省手机内存 */

/* 手机：去掉整层遮罩、混合模式和飘动的云——这几样会让 2600×2900 的整层画面多开缓冲，手机内存吃不消 */
@media (pointer: coarse) {
  #skyfx { -webkit-mask: none; mask: none; }
  #skyfx .cloud { display: none; }
  #wind .tv, #wind .rim { mix-blend-mode: normal; }
  #wind .tv { opacity: 0; }
  #stage { background: linear-gradient(#0d1030, #1c2656 40%, rgb(45, 63, 120)); }   /* 楼上方的天由舞台背景接住 */
  #skyup { left: 0; right: 0; }                                  /* 原来左右各多出 2000px（6600px 宽的大块），手机上收窄 */
  #skyfx .glow { display: none; }                                /* 铺满整张图的晕光层，一点开始就做透明度动画 */
}
/* 排查开关：地址后加 ?lite=1 → 开场不做傍晚→入夜的整层淡变，直接是夜里；楼下路人、天台和风的小动画也关掉 */
body.lite #day, body.lite #skyfx, body.lite #skyfade, body.lite #skyup, body.lite #walkers, body.lite #wind { display: none; }
body.lite #nightsky { transition: none; animation: none; opacity: 1; }


/* 上一题：卡片右上角一行小字 */
#card > #back { position: absolute; top: 16px; right: 18px; font: inherit; font-size: 12px; color: #8f87a6; background: none; border: 0; padding: 6px 4px; letter-spacing: .1em; }
#card > #back[hidden] { display: none; }
/* 扎心的一句：跟在"亏在"后面另起一行 */
#result .facts .sting { display: block; margin-top: 6px; font-style: normal; color: #e9b765; }
#result .disclaim { margin: 18px 0 0; font-size: 11px; color: #5f5878; letter-spacing: .1em; }

/* 等屋子图加载：窗下方一行小字"正在敲门..."，点点依次跳 */
#seek { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-size: 13px; letter-spacing: .2em; color: #e9d2a6;
  text-shadow: 0 0 8px rgba(233, 183, 101, .5); opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 5; }
#seek.on { opacity: .9; }
#seek i { font-style: normal; animation: seekdot 1.2s infinite; }
#seek i:nth-child(2) { animation-delay: .2s; }
#seek i:nth-child(3) { animation-delay: .4s; }
@keyframes seekdot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }