/* 影视级质感版 · 覆盖层
   原则：画面交给底图（实拍质感的场景 + 切层小猫），界面退到最轻——字幕式旁白、半透明提示条，不再用卡片盖住画面。
   这份样式排在其它样式之后加载，只做覆盖；各幕的几何位置在对应的 act*.js 里按底图量过。 */

/* ---------- 底图 ---------- */
html, body { background: #0b0f0c; }
body { background: radial-gradient(120% 90% at 50% 40%, #16211b 0%, #070a08 100%); }
#stage { background: #101a15; box-shadow: 0 0 120px rgba(0,0,0,.7); }
#veil { background: #0d1410; }
.plate { position: absolute; left: 0; bottom: 0; width: 390px; height: 843px; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.plate::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 140px; background: var(--top, #1b2b22); }
.plate::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(var(--top, #1b2b22), transparent); }
.plate.wide { width: 780px; height: 780px; }

/* ---------- 镜头感：暗角 + 胶片颗粒 + 光里的浮尘 ---------- */
#stage::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 54; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 46%, transparent 52%, rgba(6,5,3,.34) 100%); }
#stage::after { opacity: .5; mix-blend-mode: overlay; top: -60px; left: -60px; right: -60px; bottom: -60px; animation: grain 1.1s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-22px,14px); } 40% { transform: translate(16px,-26px); } 60% { transform: translate(-34px,-12px); } 80% { transform: translate(26px,30px); } 100% { transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) { #stage::after { animation: none; } }
.motes { position: absolute; top: 0; left: 0; width: 390px; height: 100%; pointer-events: none; z-index: 19; overflow: hidden; }
.motes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,200,.95), rgba(255,236,200,0) 70%); opacity: 0; animation: mote linear infinite; will-change: transform, opacity; }
@keyframes mote { 0% { opacity: 0; transform: translate3d(0,0,0); } 15% { opacity: var(--o, .7); } 85% { opacity: var(--o, .7); } 100% { opacity: 0; transform: translate3d(var(--dx, 30px), var(--dy, -70px), 0); } }

/* 小猫：Canvas 一层；每一幕用滤镜把它调进场景的光里 */
.cat-svg { overflow: visible; }
.cat { transition: filter .6s; }

/* ---------- 界面：退到最轻 ---------- */
.topbar button { width: 36px; height: 36px; border: 1px solid rgba(255,240,210,.34); background: rgba(16,13,9,.34); color: #f3e6cb; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#btn-sound.off { color: rgba(243,230,203,.55); }
.btn { border: 1px solid rgba(74,44,23,.4); background: linear-gradient(#fbf5e6, #efe3c8); box-shadow: 0 6px 18px rgba(10,6,2,.35); }
.btn:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(10,6,2,.35); }
.btn.primary { background: linear-gradient(#f3a652, #dd8433); border-color: rgba(255,232,196,.55); color: #2b1608; }
.hint { background: rgba(16,13,9,.56); border: 1px solid rgba(255,240,210,.26); color: #f6ecd3; box-shadow: 0 8px 26px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); font-size: 14.5px; letter-spacing: .04em; }
.hint-hand svg path { fill: rgba(255,244,222,.92); stroke: rgba(40,24,10,.7); }
.hint-alt { background: transparent; border: 1px solid rgba(255,236,196,.55); color: #ffe9bd; }
.caption { left: 0; right: 0; top: calc(56px + var(--safe-t)); padding: 12px 34px 14px; background: linear-gradient(90deg, rgba(8,6,4,0), rgba(8,6,4,.5) 18%, rgba(8,6,4,.5) 82%, rgba(8,6,4,0)); border-radius: 0; box-shadow: none; transform: none; text-align: center; color: #f6ecd3; font-size: 16px; line-height: 1.75; letter-spacing: .06em; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.caption::before { display: none; }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cta { border: 1px solid rgba(255,232,196,.6); background: linear-gradient(#f3a652, #d97f30); color: #2b1608; box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.cta:active { box-shadow: 0 5px 14px rgba(0,0,0,.5); }
.chapter-card { left: 18px; top: calc(16px + var(--safe-t)); padding: 2px 0 2px 12px; background: none; border-left: 1px solid rgba(255,236,196,.7); border-radius: 0; box-shadow: none; color: rgba(246,236,211,.78); font-size: 12px; letter-spacing: .3em; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.chapter-card b { color: #f6ecd3; font-size: 17px; letter-spacing: .16em; font-weight: 500; margin-top: 3px; }
.reader-scrim, .a2-scrim { background: rgba(8,7,5,.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.reader-paper, .menu-paper { background-color: #f7efdc; box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 60px rgba(150,110,60,.12); }
.menu-scrim { background: rgba(8,10,8,.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.menu-ch { border: 1px solid rgba(74,44,23,.28); background: rgba(255,255,255,.7); }
.reader-body .ph { border: 9px solid #fbf8ef; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
#loading { background: #0d1410 !important; }

/* 拍立得：相纸的厚度和一点光泽 */
.polaroid { background: linear-gradient(160deg, #fdfaf1, #ece5d3); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 22px rgba(8,5,2,.5), 0 2px 4px rgba(8,5,2,.35); border-radius: 2px; }
.polaroid img { box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); background: #2a2622; }
.polaroid::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(125deg, rgba(255,255,255,.22), transparent 38%); pointer-events: none; z-index: 1; }

/* ================= 第一幕 ================= */
.act1 { background: #1b2b22; }
.a1-kwrap { position: absolute; left: 0; width: 390px; height: 843px; z-index: 2; pointer-events: none;
  -webkit-mask: url("../assets/scene/a1-hole.png") 0 0 / 100% 100% no-repeat; mask: url("../assets/scene/a1-hole.png") 0 0 / 100% 100% no-repeat; }
.a1-kitten { position: absolute; display: block; transform-origin: 46% 78%; will-change: transform, filter; }
.a1-closed { position: absolute; left: 0; z-index: 4; pointer-events: none; overflow: visible; }
.a1-closed.wiggle { animation: giftWiggle 4.2s ease-in-out infinite; }
.a1-pawimg { position: absolute; z-index: 23; opacity: 0; transform-origin: 28% 72%; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 4px 5px rgba(20,10,3,.45)); }
.a1-title { font-size: 27px; line-height: 1.6; letter-spacing: .2em; color: #f4e9cf; text-shadow: 0 2px 16px rgba(0,0,0,.55); font-weight: 400; z-index: 6; }
.a1-title small { font-size: 12px; letter-spacing: .5em; opacity: .62; margin-bottom: 10px; }
.a1-tag { width: 126px; padding: 0; background: none; border-radius: 0; box-shadow: none; clip-path: none; transform: rotate(-8deg); transform-origin: 0 50%; font-size: 19px; line-height: 1.25; color: #3d2413; mix-blend-mode: multiply; opacity: .86; z-index: 6; text-align: center; }
.a1-tag::before { display: none; }
.a1-tag small { font-size: 12.5px; color: #5a3a22; margin-top: 3px; }
.a1-photo { width: 104px; z-index: 5; transform: rotate(8deg); }
.a1-scrap { filter: drop-shadow(0 3px 3px rgba(20,10,3,.4)); }
.a1-tab::after { border: 1.5px solid rgba(255,240,214,.85); box-shadow: 0 0 14px rgba(255,220,160,.35); }
.a1-paw::after { border: 1.5px solid rgba(255,240,214,.9); box-shadow: 0 0 14px rgba(255,220,160,.35); }
.a1-ask { background: rgba(16,13,9,.6); border: 1px solid rgba(255,240,210,.24); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.a1-ask p { color: #f1e4c6; }
.a1-ask .resume { border-top: 1px solid rgba(255,240,210,.2); }
.a1-ask .btn:not(.primary) { background: transparent; color: #f6ecd3; border-color: rgba(255,236,196,.5); box-shadow: none; }

/* ================= 第二幕 小猫照相馆 ================= */
.act2 { background: #16241c; }
.a2-sign { left: 95px; width: 186px; margin-left: 0; height: 76px; padding: 14px 6px 0; background: none; box-shadow: none; border-radius: 0; transform: rotate(-.4deg); color: #3d2413; mix-blend-mode: multiply; opacity: .88; z-index: 1; }
.a2-sign span { font-size: 23px; letter-spacing: .16em; }
.a2-sign small { color: #5a3a22; font-size: 12px; margin-top: 4px; }
.a2-old { width: 76px; z-index: 2; transform: rotate(6deg); }
.a2-camwrap { width: 185px; height: 147px; z-index: 6; }
.a2-slot { left: 32px; top: 139px; width: 120px; height: 172px; }
.a2-eject { transform: translateY(-170px); }
.a2-slotlip { position: absolute; left: 26px; top: 133px; width: 132px; height: 9px; border-radius: 4px; background: linear-gradient(#060504, rgba(6,5,4,0)); z-index: 2; pointer-events: none; }
.a2-flashfx { position: absolute; left: -10px; top: 8px; width: 84px; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255,246,220,.7) 40%, rgba(255,246,220,0)); opacity: 0; pointer-events: none; z-index: 3; mix-blend-mode: screen; }
.a2-camwrap.pressed .a2-flashfx { opacity: 1; }
.a2-shutterfx { position: absolute; left: 140px; top: 0; width: 32px; height: 15px; border-radius: 5px; background: rgba(40,6,2,.5); opacity: 0; pointer-events: none; }
.a2-camwrap.pressed .a2-shutterfx { opacity: 1; }
.a2-white { background: #fff6e2; }
.a2-kept { width: 76px; }
.a2-card .face { background: linear-gradient(165deg, #fdfaf1, #eee7d6); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.a2-card .back { background-color: #f3e9d2; }
.a2-card .imgwrap { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.a2-note, .a5-tag { background: linear-gradient(170deg, #ffeeb4, #f6dc8c); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.a2-backcard { box-shadow: 0 8px 16px rgba(8,5,2,.5); background-color: #f1e6cd; }
.a2-can { position: absolute; width: 30px; height: 38px; z-index: 6; border-radius: 4px; background: linear-gradient(90deg, #14251f, #3c6a59 38%, #5b8a78 50%, #2b4d41 70%, #12211c); box-shadow: 0 6px 8px rgba(8,5,2,.5); }
.a2-can::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 13px; background: linear-gradient(90deg, #8a6a14, #f0c94f 40%, #ffe38a 52%, #c49a2a 75%, #7a5d10); }
.a2-can::after { content: ""; position: absolute; left: 7px; right: 7px; top: -6px; height: 7px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, #0b0806, #3a2e24 50%, #0b0806); }
.a2-strip { height: 26px; box-shadow: 0 5px 8px rgba(8,5,2,.45); background:
  repeating-linear-gradient(90deg, transparent 0 4px, rgba(250,236,205,.85) 4px 9px, transparent 9px 13px) 0 2px / 13px 4px repeat-x,
  repeating-linear-gradient(90deg, transparent 0 4px, rgba(250,236,205,.85) 4px 9px, transparent 9px 13px) 0 20px / 13px 4px repeat-x,
  repeating-linear-gradient(90deg, #1c120a 0 3px, #8a4f20 3px 20px, #b06a2c 20px 36px, #1c120a 36px 39px) 0 8px / 39px 10px repeat-x,
  linear-gradient(#2a1b10, #130c06); }
.a2-strip.ready { animation: stripGlow2 1.6s ease-in-out infinite; }
@keyframes stripGlow2 { 50% { box-shadow: 0 5px 8px rgba(8,5,2,.45), 0 0 0 2px rgba(255,236,196,.6), 0 0 16px rgba(255,220,160,.5); } }
.a2-stamp { border-color: rgba(170,52,32,.65); color: rgba(170,52,32,.78); }

/* 舞台里不允许出现滚动（颗粒层等不能把它撑开） */
#stage::after { top: 0; left: 0; right: 0; bottom: 0; animation: grainbg 1.1s steps(6) infinite; }
@keyframes grainbg { 0% { background-position: 0 0; } 20% { background-position: -22px 14px; } 40% { background-position: 16px -26px; } 60% { background-position: -34px -12px; } 80% { background-position: 26px 30px; } 100% { background-position: 0 0; } }
.a2-slot { top: 131px; } .a2-slotlip { top: 126px; }

/* ================= 第五幕 小卖部 ================= */
.act5 { background: #141d16; }
.a5-bulbs { position: absolute; left: 0; width: 390px; height: 120px; pointer-events: none; z-index: 1; }
.a5-bulbs i { position: absolute; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,226,160,.75), rgba(255,200,110,0)); mix-blend-mode: screen; animation: bulbTw 3.3s ease-in-out infinite; }
@keyframes bulbTw { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.a5-shelf { left: 0; right: 0; height: 130px; display: block; padding: 0; border: 0; box-shadow: none; z-index: 3; }
.a5-shelf::before, .a5-shelf::after { display: none; }
.a5-item { position: absolute; top: 0; width: 72px; height: 128px; display: block; }
.a5-item span { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 0; background: none; border: 0; font-size: 12px; letter-spacing: .06em; color: #3d2413; mix-blend-mode: multiply; opacity: .9; }
.a5-item::after { left: 50%; top: 46%; width: 46px; height: 46px; margin: -23px; border: 1.5px solid rgba(255,240,214,.8); box-shadow: 0 0 12px rgba(255,220,160,.3); }
.a5-item.seen::after { display: none; }
.a5-item:active { transform: translateY(-2px); }
.a5-cal { position: absolute; left: 300px; width: 72px; height: 92px; text-align: center; pointer-events: none; z-index: 2; transform: rotate(.6deg); mix-blend-mode: multiply; }
.a5-cal i { display: block; height: 14px; line-height: 14px; font-style: normal; font-size: 8.5px; letter-spacing: .08em; color: #5a1f12; opacity: .0; }
.a5-cal b { display: block; margin-top: 12px; font-size: 36px; line-height: 1; color: #a8371f; font-weight: 700; opacity: .86; }
.a5-cal em { display: block; margin-top: 7px; font-style: normal; font-size: 8px; letter-spacing: .04em; color: #5a3a22; opacity: .85; }
.a5-machine { left: 46px; width: 236px; height: 345px; background: none; border: 0; border-radius: 0; box-shadow: none; z-index: 5; }
.a5-machine::after { display: none; }
.a5-marquee { position: absolute; left: 30px; top: 27px; width: 180px; height: 38px; margin: 0; border: 0; border-radius: 19px; background: none; box-shadow: none; }
.a5-marquee b { font-size: 20px; letter-spacing: .26em; padding-left: .26em; color: #a3331c; mix-blend-mode: multiply; opacity: .9; }
.a5-yuan { position: absolute; left: 19px; top: 150px; width: 28px; font-size: 21px; color: #a3331c; mix-blend-mode: multiply; opacity: .88; }
.a5-win { position: absolute; top: 105px; width: 44px; height: 126px; border: 0; border-radius: 4px; background: none; box-shadow: inset 0 14px 14px -8px rgba(40,24,10,.55), inset 0 -14px 14px -8px rgba(40,24,10,.55); }
.a5-reel span { height: 126px; font-size: 17px; color: #3a2212; mix-blend-mode: multiply; }
.a5-plate { position: absolute; left: 20px; right: 22px; top: 243px; margin: 0; font-size: 10.5px; letter-spacing: .14em; color: #5a3a22; mix-blend-mode: multiply; opacity: .8; }
.a5-lever { right: auto; left: 212px; top: 62px; width: 70px; height: 140px; }
.a5-lever::before { left: 4px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #f4efe6, #9a9388 55%, #3a352d); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.a5-stick { left: 11px; bottom: 16px; width: 7px; height: 96px; border: 0; border-radius: 4px; background: linear-gradient(90deg, #5c564c, #e9e3d6 40%, #fffdf6 52%, #8f887b 80%, #4a443b); box-shadow: 2px 3px 5px rgba(0,0,0,.4); transform: rotate(20deg) scaleY(calc(1 - var(--pull) / 110px)); }
.a5-ball { left: 30px; top: 6px; width: 34px; height: 34px; border: 0; background: radial-gradient(circle at 34% 28%, #ffd0bc 0, #e8573b 26%, #b5311c 62%, #6e1a0e 100%); box-shadow: 3px 5px 8px rgba(0,0,0,.45), inset -3px -4px 6px rgba(60,8,2,.5); }
.a5-lever::after { left: 25px; top: 1px; border: 1.5px solid rgba(255,240,214,.85); box-shadow: 0 0 12px rgba(255,220,160,.35); }
.a5-lever.down .a5-stick { transform: rotate(20deg) scaleY(.3); }
.a5-result { background: rgba(16,13,9,.62); border: 1px solid rgba(255,240,210,.26); border-radius: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.a5-result p { color: #ffe3b0; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.a5-result .btn:not(.primary) { background: transparent; color: #f6ecd3; border-color: rgba(255,236,196,.5); box-shadow: none; }
.a5-card { border-radius: 4px; background: linear-gradient(150deg, #f6ead0, #e2cfa6); outline: 1px solid rgba(106,59,31,.55); box-shadow: 0 8px 16px rgba(0,0,0,.5); background-image: repeating-linear-gradient(45deg, rgba(196,69,47,.1) 0 6px, transparent 6px 12px), linear-gradient(150deg, #f6ead0, #e2cfa6); }

/* ================= 第七幕 生日房间 ================= */
.act7 { background: #1a1f14; }
.a7-wallbox { left: 20px; right: 20px; z-index: 2; }
.a7-ph { width: 26%; }
.a7-ph::before { left: 50%; top: -8px; width: 8px; height: 17px; margin-left: -4px; background: linear-gradient(90deg, #8a5a30, #d09a62 50%, #8a5a30); border: 0; border-radius: 1.5px; box-shadow: 0 1px 2px rgba(0,0,0,.5); z-index: 2; }
.a7-film { box-shadow: 0 6px 12px rgba(0,0,0,.5); background:
  repeating-linear-gradient(90deg, transparent 0 3px, rgba(250,236,205,.85) 3px 8px, transparent 8px 11px) 0 2px / 11px 3px repeat-x,
  repeating-linear-gradient(90deg, transparent 0 3px, rgba(250,236,205,.85) 3px 8px, transparent 8px 11px) 0 calc(100% - 2px) / 11px 3px repeat-x, linear-gradient(#2a1b10, #130c06); }
.a7-ticket { background: linear-gradient(160deg, #f6ecd3, #e6d6b2); border-top: 7px solid #b8432e; box-shadow: 0 6px 12px rgba(0,0,0,.5); }
.a7-note { box-shadow: 0 5px 10px rgba(0,0,0,.45); }
.a7-flame { position: absolute; width: 12px; height: 22px; margin: -22px 0 0 -6px; z-index: 7; opacity: 0; pointer-events: none; transition: opacity .5s; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 50% 60% at 50% 68%, #fff8de 0, #ffd65a 38%, #ff9a2a 62%, rgba(255,120,20,0) 76%); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; filter: blur(.4px) drop-shadow(0 0 6px rgba(255,190,90,.9)); }
.act7.cd0 .a7-flame.f0, .act7.cd1 .a7-flame.f1 { opacity: 1; animation: flick2 .9s ease-in-out infinite alternate; }
.a7-flame.f1 { animation-delay: -.4s !important; }
@keyframes flick2 { 0% { transform: scale(1, 1) rotate(-3deg); } 35% { transform: scale(.94, 1.1) rotate(2deg); } 70% { transform: scale(1.05, .93) rotate(-1deg); } 100% { transform: scale(.97, 1.06) rotate(4deg); } }
.a7-cglow { position: absolute; width: 300px; height: 300px; margin: -150px; border-radius: 50%; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .9s; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,214,140,.5), rgba(255,190,100,.16) 45%, rgba(255,190,100,0)); }
.act7.cd0 .a7-cglow { opacity: .6; } .act7.cd0.cd1 .a7-cglow { opacity: 1; animation: cglow 2.6s ease-in-out infinite; }
@keyframes cglow { 50% { opacity: .82; } }
.a7-glow { width: 300px; height: 300px; background: radial-gradient(closest-side, rgba(255,214,150,.34), rgba(255,214,150,0)); }
.a7-dark { background: #070b16; opacity: .9; }
.act7.n1 .a7-dark { opacity: .84; } .act7.n2 .a7-dark { opacity: .74; } .act7.n3 .a7-dark { opacity: .5; } .act7.party .a7-dark { opacity: .16; }
.a7-lamp::before, .a7-candle::before { background: #fff1c9; box-shadow: 0 0 16px 6px rgba(255,220,150,.6); }
.a7-lamp::after, .a7-candle::after { border: 1.5px solid rgba(255,236,196,.85); }
.a7-final { background: rgba(247,239,220,.95); box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 60px rgba(150,110,60,.12); }
.a7-zzz i { color: #fff1c9; text-shadow: 0 0 6px rgba(255,220,150,.6); }
.a7-actions .btn { box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.a7-wallbox.compact .a7-film { top: 60% !important; }
.a7-dark { -webkit-mask-composite: source-in; mask-composite: intersect; }

/* ================= 第六幕 刮刮卡 ================= */
.act6 { background: #161d14; }
.a6-openplate { opacity: 0; transition: opacity 1s ease; z-index: 1; }
.a6-openplate::before, .a6-openplate::after { display: none; }
.a6-openplate.on { opacity: 1; }
.a6-wallph { width: 56px; z-index: 3; }
.a6-tagtext { position: absolute; width: 72px; text-align: center; font-size: 14px; letter-spacing: .12em; color: #3d2413; mix-blend-mode: multiply; opacity: .86; transform: rotate(-1deg); z-index: 2; pointer-events: none; }
.a6-doorwrap { width: 173px; height: 348px; z-index: 4; }
.a6-doorwrap::after { display: none; }
.a6-glow { left: -70px; right: -70px; top: -50px; bottom: -40px; background: radial-gradient(closest-side, rgba(255,206,120,.42), rgba(255,206,120,0)); opacity: 0; animation: none; mix-blend-mode: screen; transition: opacity .6s; }
.a6-doorwrap.ready .a6-glow { opacity: 1; animation: glowPulse 2.4s ease-in-out infinite; }
.a6-doorwrap.open .a6-glow { opacity: 1; }
.a6-card .face { background-color: #f4ead2; border-radius: 6px; box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.5) inset; outline: 1px solid rgba(106,59,31,.5); background-image: repeating-linear-gradient(45deg, rgba(196,69,47,.06) 0 8px, transparent 8px 16px), linear-gradient(160deg, #f8efda, #e9dbb9); }
.a6-letter { background: #fdfaf1; box-shadow: inset 0 0 0 1px rgba(106,59,31,.18); }
.a6-coat { box-shadow: inset 0 0 0 1px rgba(90,60,20,.35); }
.a6-flake { background: linear-gradient(120deg, #efe0b0, #b8975a); }
.a6-note { box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.a6-note::before { background: rgba(232,150,70,.7); }
.a6-stamp { border-color: #a8371f; color: #a8371f; }

/* ================= 第三幕 胶卷（暗房的灯箱台） ================= */
.act3 { background: #0c0906; }
.plate.top { bottom: auto; }
.plate.top::before { display: none; }
.plate.top::after { top: auto; bottom: -139px; height: 140px; background: #0c0805; }
.a3-film { box-shadow: none; background:
  repeating-linear-gradient(90deg, rgba(28,17,9,.97) 0 7px, rgba(255,240,210,.05) 7px 19px, rgba(28,17,9,.97) 19px 26px) 0 6px / 26px 9px repeat-x,
  repeating-linear-gradient(90deg, rgba(28,17,9,.97) 0 7px, rgba(255,240,210,.05) 7px 19px, rgba(28,17,9,.97) 19px 26px) 0 calc(100% - 6px) / 26px 9px repeat-x,
  linear-gradient(rgba(28,17,9,.97), rgba(28,17,9,.97)) 0 0 / 100% 6px no-repeat,
  linear-gradient(rgba(28,17,9,.97), rgba(28,17,9,.97)) 0 100% / 100% 6px no-repeat,
  linear-gradient(rgba(34,21,11,.96), rgba(22,13,7,.97)) 0 15px / 100% calc(100% - 30px) no-repeat; }
.a3-film::before { background: linear-gradient(90deg, transparent, rgba(28,17,9,.97) 60%); }
.a3-film::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 20%, transparent 80%, rgba(255,255,255,.04)); }
.a3-frame { background: #150e08; box-shadow: 0 0 0 1px rgba(255,220,170,.08), 0 0 18px rgba(255,214,150,.18); }
.a3-frame img { filter: saturate(1.04) contrast(1.03) brightness(1.04); }
.a3-leader { color: #f1e2c0; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.a3-leader small { color: #f0a653; }
.a3-paper { background-color: #f6eeda; box-shadow: 0 18px 44px rgba(0,0,0,.6), inset 0 0 50px rgba(150,110,60,.12); }
.a3-nav button { border: 1px solid rgba(255,240,210,.4); background: rgba(16,13,9,.5); color: #f6ecd3; box-shadow: 0 4px 14px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.a3-ticket { background: linear-gradient(165deg, #f8efd9, #e8d9b6); box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.tk-top { background: linear-gradient(#c24a31, #a93a25); }
.tk-map { background: #e6d8b6; }
.a3-cue, .reader-cue { background: rgba(16,13,9,.7); color: #f6ecd3; border: 1px solid rgba(255,240,210,.3); }
.a3-date { background: #26382f; }
.act3 .cat { filter: brightness(.86) contrast(1.05); }

/* ================= 第四幕 微缩小镇 ================= */
.act4 { background: #d9c7a2; }
.a4-world { background: #e4d2ad; }
.a4-map { width: 760px; height: 1130px; -webkit-user-drag: none; }
.a4-above { position: absolute; left: 0; right: 0; top: -230px; height: 232px; background: linear-gradient(#c9b58e, #e6d3ad); }
.a4-label { position: absolute; text-align: center; font-size: 17px; letter-spacing: .2em; padding-left: .2em; color: #4a2c17; mix-blend-mode: multiply; opacity: .82; pointer-events: none; white-space: nowrap; line-height: 26px; }
.a4-label.red { color: #9c3018; } .a4-label.sm { font-size: 14px; line-height: 22px; } .a4-label.tiny { font-size: 12px; letter-spacing: 0; padding: 0; line-height: 20px; }
.a4-label.road { font-size: 13px; color: #7a5c3a; opacity: .6; text-align: left; } .a4-label.river { color: #2f6a70; }
.a4-b { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.a4-b > i, .a4-b > span, .a4-b > div { position: absolute; }
.fxglow { margin: 0; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,222,150,.85), rgba(255,200,110,.3) 45%, rgba(255,200,110,0)); mix-blend-mode: screen; opacity: 0; transition: opacity .8s; pointer-events: none; z-index: 23; }
.fxwin { background: linear-gradient(#fff0c0, #ffcf7a); mix-blend-mode: soft-light; opacity: 0; transition: opacity .7s; border-radius: 2px; z-index: 23; box-shadow: 0 0 14px 4px rgba(255,214,140,.5); }
.fxdoor { background: linear-gradient(90deg, #fff1c4, #ffd27c 60%, #f3a94e); opacity: 0; transition: opacity .7s; border-radius: 1px; z-index: 23; box-shadow: 0 0 18px 6px rgba(255,206,120,.55); transform-origin: 0 50%; }
.lib.done .fxwin { opacity: 1; } .lib.done .fxglow { opacity: .95; }
.noodle.done .fxdoor, .shop.open .fxdoor { opacity: .96; }
.noodle.done .fxglow { opacity: .8; }
.fxsteam { width: 9px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)); filter: blur(2.5px); opacity: 0; z-index: 24; pointer-events: none; }
.noodle.done .fxsteam:not(.bsteam), .noodle.bowlon .fxsteam.bsteam { animation: steam2 2.6s ease-in-out infinite; }
.fxsteam.s2 { animation-delay: -1.2s !important; }
@keyframes steam2 { 0% { transform: translate(0, 8px) scale(.8, .7); opacity: 0; } 40% { opacity: .85; } 100% { transform: translate(5px, -26px) scale(1.5, 1.3); opacity: 0; } }
.river .fxglow.lamp { opacity: 0; } .river.lampon .fxglow.lamp { opacity: .9; }
.benchphoto { width: 30px; transform: rotate(-6deg); box-shadow: 0 3px 5px rgba(20,10,3,.45); z-index: 2; }
.leaf { z-index: 3; filter: drop-shadow(0 3px 3px rgba(20,10,3,.4)); }
.leafin { display: block; }
.river.done .leafin { animation: leafFly 1.1s cubic-bezier(.3,0,.6,1) forwards; }
.river.done.nofx .leafin { animation-duration: 1ms; }
.board-b { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 9px; background: #1d2333; border-radius: 2px; opacity: 0; transition: opacity .7s; font: 600 11.5px/1.35 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; color: #ffcf73; text-shadow: 0 0 6px rgba(255,190,90,.8); z-index: 2; box-shadow: inset 0 0 8px rgba(0,0,0,.6); }
.board-b span { white-space: nowrap; }
.station.done .board-b { opacity: 1; }
.a4-b .hands { width: 2px; height: 13px; margin: -13px 0 0 -1px; background: #3a2414; border-radius: 1px; transform-origin: 50% 100%; opacity: 0; z-index: 2; }
.station.clockon .hands { opacity: 1; animation: clockSpin2 1.2s cubic-bezier(.3,0,.3,1); }
@keyframes clockSpin2 { to { transform: rotate(720deg); } }
.shop .shopglow { opacity: 0; transition: opacity 2.5s; } .shop.lit .shopglow { opacity: .9; }
.shop .fxwin { transition: opacity 2s; } .shop.lit .fxwin { opacity: 1; }
.shop .bulbs i { position: absolute; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,232,170,.95), rgba(255,200,110,0)); mix-blend-mode: screen; opacity: 0; transition: opacity 2s; }
.shop.lit .bulbs i { opacity: 1; animation: bulbTw 2.4s ease-in-out infinite; }
.a4-night { background: radial-gradient(circle at 332px 345px, rgba(40,52,120,0) 0, rgba(40,52,120,0) 110px, rgba(40,52,120,.55) 230px, rgba(26,38,104,.9) 400px); }
.a4-hit.explore::before { background: rgba(255,244,222,.92); box-shadow: 0 0 12px 4px rgba(255,220,150,.55); }
.a4-hit.explore::after, .a4-hit.free::after { border: 1.5px solid rgba(255,244,222,.9); box-shadow: 0 0 10px rgba(255,220,150,.4); }
.a4-hit.record { filter: drop-shadow(0 6px 6px rgba(30,15,4,.5)); }
.a4-dots button { border: 1px solid rgba(255,240,210,.3); background: rgba(16,13,9,.42); color: #f6ecd3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.a4-dots button i { background: rgba(255,240,210,.35); }
.a4-dots button.seen { border: 1px solid rgba(255,240,210,.5); background: rgba(16,13,9,.55); }
.a4-dots button.seen i { background: #f0a653; }
.a4-where { background: #26382f; }
.bubble span { border: 1px solid rgba(74,44,23,.3); }
.act4 .cat { filter: saturate(.96); }

/* 第四幕顶上有一排地点圆点：旁白往下让一让 */
body[data-act="4"] .caption { top: calc(100px + var(--safe-t)); }
.fxglow, .fxwin, .fxdoor { z-index: 19; }
/* 回忆册 / 纪念卡 */
.overlay-page { background: #0f1612; }
.album section { background: #f6eeda; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.al-photo { background: linear-gradient(160deg, #fdfaf1, #ece5d3); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.al-node img { border: 5px solid #1c120a; }
.keep { background: rgba(8,8,6,.94); }
.keep-img img, .keep-img canvas { box-shadow: 0 24px 60px rgba(0,0,0,.7); }

/* ---------- 第二轮：最假的地方 ---------- */
.a1-kwrap::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(rgba(14,7,3,.25) 44%, rgba(14,7,3,.9) 62%); opacity: 0; transition: opacity .6s; }
.a1-kwrap.dim::after { opacity: 1; }
.a4-hit.record { width: 64px; height: 70px; margin: -35px -32px; }
.recph { position: absolute; left: 10px; top: 6px; width: 44px; transform: rotate(-5deg); }
.recph b { position: absolute; left: 50%; top: 40%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: rgba(255,250,240,.88); box-shadow: 0 1px 3px rgba(0,0,0,.4); z-index: 2; }
.recph b::after { content: ""; position: absolute; left: 7px; top: 5px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #4a2c17; }
.recnote { position: absolute; left: 12px; top: 10px; width: 40px; height: 46px; padding: 11px 7px; background: linear-gradient(165deg, #fbf5e4, #e9dcba); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; transform: rotate(4deg); border-radius: 1px 1px 9px 1px; }
.recnote.chat { background: linear-gradient(165deg, #fff1b8, #f2d985); }
.recnote i { display: block; height: 2px; margin-bottom: 6px; border-radius: 1px; background: rgba(74,44,23,.42); }
.recnote i:last-child { width: 60%; }

/* 第二轮：第七幕的灯和蜡烛，不要界面圆圈，只留一点像灯丝余温的微光 */
.a7-lamp::after, .a7-candle::after { display: none; }
.a7-lamp::before { top: 29px; right: 29px; bottom: 29px; left: 29px; background: #ffd9a0; box-shadow: 0 0 10px 4px rgba(255,190,110,.55), 0 0 34px 16px rgba(255,170,90,.22); animation: ember 2.6s ease-in-out infinite; }
.a7-candle::before { top: 31px; right: 31px; bottom: 31px; left: 31px; background: #ffe2b0; box-shadow: 0 0 8px 3px rgba(255,200,120,.6), 0 0 22px 10px rgba(255,170,90,.2); animation: ember 2.2s ease-in-out infinite; }
@keyframes ember { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }