/* 妈妈的生日大冒险 — 界面样式
 * 1rem = 舞台宽度的 1/72（由 JS 设置），所以所有尺寸都跟着屏幕等比缩放 */
:root { --ink: #5a2a1a; --cream: #fff6e0; --cream2: #ffe9bd; --yellow: #ffc93c; --orange: #ff9f1c; --pink: #ff6f91; --red: #ff4d5e; --teal: #2bb5e8; --green: #7bd64b; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #171032; overscroll-behavior: none; }
body { font-family: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; font-weight: 800; color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
#backdrop { position: fixed; inset: 0; background: radial-gradient(circle at 30% 20%, #3b2a7a, #171032 70%); }
#stage { position: fixed; left: 50%; top: 0; transform: translateX(-50%); width: min(100vw, calc(100dvh * 0.6)); height: 100dvh; overflow: hidden; background: #7fd6f5; touch-action: none; }
@media (min-aspect-ratio: 62/100) { #stage { box-shadow: 0 0 0 .6rem rgba(255,255,255,.08), 0 2rem 8rem rgba(0,0,0,.6); } }
canvas#game, canvas#glc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > *, .layer button { pointer-events: auto; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
img { -webkit-user-drag: none; }
.stroke { -webkit-text-stroke: .7rem var(--ink); paint-order: stroke fill; }

/* ---------- 图标 ---------- */
.ic { display: inline-block; width: 4.2rem; height: 4.2rem; background: center/contain no-repeat; flex: none; }

/* ---------- 通用按钮 ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-width: 22rem; height: 8.6rem; padding: 0 3.4rem; border: .45rem solid var(--ink); border-radius: 4.4rem;
  background: linear-gradient(#ffe27a, #ffb52e 55%, #ff9a1f); box-shadow: 0 .9rem 0 #b45a12, 0 1.6rem 2rem rgba(0,0,0,.25), inset 0 .5rem 0 rgba(255,255,255,.55);
  font-size: 3.6rem; font-weight: 900; color: #fff; -webkit-text-stroke: .6rem var(--ink); paint-order: stroke fill; letter-spacing: .2rem; transition: transform .06s, box-shadow .06s, filter .15s; }
.btn { overflow: hidden; }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-18deg); animation: shine 3.4s ease-in-out infinite; pointer-events: none; }
.btn.sm::after { animation-duration: 4.6s; }
.btn.gray::after, .btn[disabled]::after { display: none; }
@keyframes shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }
.btn:active { transform: translateY(.6rem); box-shadow: 0 .3rem 0 #b45a12, 0 .6rem 1rem rgba(0,0,0,.25), inset 0 .5rem 0 rgba(255,255,255,.55); }
.btn.pink { background: linear-gradient(#ffa3b8, #ff6f91 55%, #f2507a); box-shadow: 0 .9rem 0 #a52c4f, 0 1.6rem 2rem rgba(0,0,0,.25), inset 0 .5rem 0 rgba(255,255,255,.5); }
.btn.pink:active { box-shadow: 0 .3rem 0 #a52c4f, inset 0 .5rem 0 rgba(255,255,255,.5); }
.btn.teal { background: linear-gradient(#8ee3ff, #3fc0f0 55%, #1e9fd6); box-shadow: 0 .9rem 0 #116a94, 0 1.6rem 2rem rgba(0,0,0,.25), inset 0 .5rem 0 rgba(255,255,255,.5); }
.btn.teal:active { box-shadow: 0 .3rem 0 #116a94, inset 0 .5rem 0 rgba(255,255,255,.5); }
.btn.green { background: linear-gradient(#c3f58a, #7bd64b 55%, #55b82e); box-shadow: 0 .9rem 0 #2f7a14, 0 1.6rem 2rem rgba(0,0,0,.25), inset 0 .5rem 0 rgba(255,255,255,.5); }
.btn.green:active { box-shadow: 0 .3rem 0 #2f7a14, inset 0 .5rem 0 rgba(255,255,255,.5); }
.btn.gray { background: linear-gradient(#f1ece4, #d6cdc0); box-shadow: 0 .9rem 0 #8a7f72, inset 0 .5rem 0 rgba(255,255,255,.6); color: #fff; }
.btn.sm { height: 6.2rem; min-width: 13rem; padding: 0 2rem; font-size: 2.7rem; border-width: .38rem; box-shadow: 0 .6rem 0 #b45a12, inset 0 .4rem 0 rgba(255,255,255,.55); -webkit-text-stroke-width: .5rem; }
.btn.sm.pink { box-shadow: 0 .6rem 0 #a52c4f, inset 0 .4rem 0 rgba(255,255,255,.5); }
.btn.sm.teal { box-shadow: 0 .6rem 0 #116a94, inset 0 .4rem 0 rgba(255,255,255,.5); }
.btn.sm.green { box-shadow: 0 .6rem 0 #2f7a14, inset 0 .4rem 0 rgba(255,255,255,.5); }
.btn.sm.gray { box-shadow: 0 .6rem 0 #8a7f72, inset 0 .4rem 0 rgba(255,255,255,.6); }
.btn[disabled] { filter: grayscale(.9) brightness(.95); pointer-events: none; }
.btn .ic { width: 4rem; height: 4rem; }
.btn-play { min-width: 40rem; height: 11rem; font-size: 5rem; border-radius: 6rem; animation: pulse 1.4s ease-in-out infinite; }
.btn-play span { display: inline-block; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.btn-play:active { animation: none; }

.round-btn { width: 8rem; height: 8rem; border-radius: 50%; border: .42rem solid var(--ink); background: linear-gradient(#fff, #ffe9bd); box-shadow: 0 .6rem 0 rgba(90,42,26,.55), inset 0 .4rem 0 #fff; display: grid; place-items: center; }
.round-btn svg { width: 4.4rem; height: 4.4rem; fill: var(--ink); }
.round-btn:active { transform: translateY(.4rem); box-shadow: 0 .2rem 0 rgba(90,42,26,.55); }
.round-btn.small { width: 7rem; height: 7rem; }

.pill { display: inline-flex; align-items: center; gap: .6rem; height: 6rem; padding: 0 2rem 0 .8rem; border: .4rem solid var(--ink); border-radius: 3.2rem; background: rgba(255,246,224,.96); font-size: 3.1rem; font-weight: 900; box-shadow: 0 .5rem 0 rgba(90,42,26,.45); }
.pill .ic { width: 4.6rem; height: 4.6rem; margin: -.4rem 0; }
.pill em { font-style: normal; font-size: 2.3rem; color: #fff; background: var(--pink); border-radius: 1.6rem; padding: .1rem .9rem; margin-left: .3rem; }

/* ---------- HUD ---------- */
#hud { padding-top: max(1.6rem, env(safe-area-inset-top)); }
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 1rem 1.8rem 0; }
.hud-left, .hud-right { width: 22rem; display: flex; flex-direction: column; gap: 1.2rem; }
.hud-right { align-items: flex-end; }
.hud-mid { flex: 1; text-align: center; pointer-events: none !important; }
.hearts { display: flex; gap: .2rem; }
.hearts i { width: 5.4rem; height: 5.4rem; background: center/contain no-repeat; transition: transform .2s, filter .2s, opacity .2s; }
.hearts i.off { filter: grayscale(1) brightness(.5); opacity: .45; transform: scale(.8); }
.hearts i.pop { animation: heartpop .5s; }
@keyframes heartpop { 0% { transform: scale(1); } 30% { transform: scale(1.6) rotate(-12deg); } 100% { transform: scale(1); } }
.score { font-size: 7.4rem; line-height: 1; font-weight: 900; color: #fff; -webkit-text-stroke: 1rem var(--ink); paint-order: stroke fill; font-variant-numeric: tabular-nums; text-shadow: 0 .6rem 0 rgba(90,42,26,.55); letter-spacing: .1rem; }
.score.bump { animation: bump .18s; }
@keyframes bump { 50% { transform: scale(1.12); } }
.dist { margin-top: .9rem; font-size: 2.9rem; color: #fff; -webkit-text-stroke: .6rem var(--ink); paint-order: stroke fill; }
.candle-pill { height: 5.6rem; font-size: 2.9rem; }
.powers { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.pw { display: flex; align-items: center; gap: .6rem; height: 5rem; padding-right: 1.2rem; border: .36rem solid var(--ink); border-radius: 2.6rem; background: rgba(255,246,224,.95); animation: slidein .25s; }
.pw img { width: 5rem; height: 5rem; margin: -.5rem 0 -.5rem -.2rem; object-fit: contain; }
.pw .bar { width: 9rem; height: 1.6rem; border-radius: 1rem; background: rgba(90,42,26,.2); overflow: hidden; }
.pw .bar b { display: block; height: 100%; border-radius: 1rem; background: var(--c, #ffc93c); }
.pw.end { animation: blink .3s infinite; }
@keyframes blink { 50% { opacity: .4; } }
@keyframes slidein { from { transform: translateX(-12rem); opacity: 0; } }
.letters { display: flex; justify-content: center; gap: 1rem; margin-top: 1.4rem; pointer-events: none !important; }
.letters span { width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center; font-size: 3.3rem; font-weight: 900; border: .38rem solid rgba(90,42,26,.5); color: rgba(90,42,26,.4); background: rgba(255,255,255,.4); transition: all .25s; }
.letters span.on { color: #fff; -webkit-text-stroke: .5rem var(--ink); paint-order: stroke fill; border-color: var(--ink); background: radial-gradient(circle at 35% 30%, #fff7c2, #ffc93c 60%, #f08a1d); transform: scale(1.12); box-shadow: 0 0 2rem #ffe066; animation: letterpop .5s; }
.letters.fever span { animation: rainbow 1s linear infinite, wiggle .5s ease-in-out infinite; }
.letters.fever span:nth-child(2) { animation-delay: -.25s, -.1s; } .letters.fever span:nth-child(3) { animation-delay: -.5s, -.2s; } .letters.fever span:nth-child(4) { animation-delay: -.75s, -.3s; }
@keyframes letterpop { 0% { transform: scale(2.2) rotate(20deg); } 100% { transform: scale(1.12); } }
@keyframes rainbow { 0% { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } }
@keyframes wiggle { 50% { transform: scale(1.12) translateY(-.8rem); } }
.boss-bar { margin: 1.6rem auto 0; width: 48rem; text-align: center; animation: dropin .4s; pointer-events: none !important; }
.boss-name { font-size: 2.8rem; color: #fff; -webkit-text-stroke: .6rem #6a0f2a; paint-order: stroke fill; margin-bottom: .5rem; }
.boss-hp { display: flex; gap: .6rem; height: 3.6rem; padding: .5rem; border: .4rem solid var(--ink); border-radius: 2rem; background: #fff6e0; }
.boss-hp i { flex: 1; border-radius: 1.2rem; background: linear-gradient(#ff8a9a, #e8274a); transition: all .3s; }
.boss-hp i.off { background: rgba(90,42,26,.18); transform: scaleY(.7); }
@keyframes dropin { from { transform: translateY(-10rem); opacity: 0; } }
.goal-bar { position: relative; margin: 1.6rem auto 0; width: 44rem; height: 2.6rem; border: .36rem solid var(--ink); border-radius: 2rem; background: #fff6e0; pointer-events: none !important; }
.goal-bar div { height: 100%; width: 0; border-radius: 2rem; background: linear-gradient(90deg, #7bd64b, #ffc93c); }
.ic-flag { position: absolute; right: -2rem; top: -2.6rem; width: 5rem; height: 5rem; }
.banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none !important; }
.banner .b1 { font-size: 7rem; font-weight: 900; color: #fff; -webkit-text-stroke: 1.1rem var(--ink); paint-order: stroke fill; text-shadow: 0 .7rem 0 rgba(90,42,26,.5); }
.banner .b2 { margin-top: 1rem; font-size: 3.2rem; color: #fff7d1; -webkit-text-stroke: .7rem var(--ink); paint-order: stroke fill; }
.banner.small .b1 { font-size: 5.2rem; }
.banner.rainbow .b1 { color: #ffe066; animation: rainbow 1.2s linear infinite; }
.banner.boss .b1 { color: #ff6b81; -webkit-text-stroke-color: #4a0a1e; }
.banner.show { animation: bannerin .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.banner.hide { animation: bannerout .3s both; }
@keyframes bannerin { from { transform: scale(.3); opacity: 0; } }
@keyframes bannerout { to { transform: translateY(-6rem); opacity: 0; } }
.hint { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); max-width: 62rem; padding: 1.6rem 2.6rem; border: .4rem solid var(--ink); border-radius: 3rem; background: rgba(255,246,224,.97); font-size: 3.3rem; text-align: center; line-height: 1.35; box-shadow: 0 .7rem 0 rgba(90,42,26,.4); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none !important; white-space: nowrap; }
.hint.show { opacity: 1; transform: translateX(-50%) translateY(1rem); }

/* ---------- 主界面 ---------- */
#title { padding-top: max(1.6rem, env(safe-area-inset-top)); }
.top-bar { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.8rem; }
.top-bar .round-btn { margin-left: auto; }
.logo { margin-top: 5rem; text-align: center; font-weight: 900; line-height: 1; pointer-events: none !important; filter: drop-shadow(0 1rem 0 rgba(60,20,10,.35)); }
.logo-sub { display: inline-block; font-size: 2.6rem; letter-spacing: .7rem; color: #fff; background: var(--pink); border: .4rem solid var(--ink); border-radius: 2.4rem; padding: .7rem 2rem .7rem 2.6rem; transform: rotate(-3deg); }
.logo-l1 { margin-top: 1.6rem; font-size: 7.6rem; color: #fff; -webkit-text-stroke: 1.3rem var(--ink); paint-order: stroke fill; letter-spacing: .6rem; }
.logo-l2 { margin-top: .6rem; font-size: 11.6rem; -webkit-text-stroke: 1.6rem var(--ink); paint-order: stroke fill; letter-spacing: -.2rem; }
.logo span { display: inline-block; animation: hop 2.4s ease-in-out infinite; }
.logo-l2 span:nth-child(1) { color: #ffd23f; animation-delay: 0s; } .logo-l2 span:nth-child(2) { color: #ff7aa2; animation-delay: .12s; } .logo-l2 span:nth-child(3) { color: #5fd3ff; animation-delay: .24s; }
.logo-l2 span:nth-child(4) { color: #9be564; animation-delay: .36s; } .logo-l2 span:nth-child(5) { color: #ffa24a; animation-delay: .48s; }
.logo-l1 span:nth-child(2) { animation-delay: .08s; } .logo-l1 span:nth-child(3) { animation-delay: .16s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-1.8rem) rotate(-4deg); } 82% { transform: translateY(.3rem) scale(1.06, .94); } }
.logo.small { margin-top: 0; transform: scale(.78); }
.side-menu { position: absolute; right: 1.6rem; top: 44%; display: flex; flex-direction: column; gap: 1.8rem; transform: translateY(-50%); }
.side-btn { position: relative; width: 11.4rem; height: 11.4rem; border: .42rem solid var(--ink); border-radius: 3rem; background: linear-gradient(#fffaf0, #ffe4ad); box-shadow: 0 .7rem 0 rgba(90,42,26,.5), inset 0 .4rem 0 #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.side-btn img { width: 6.6rem; height: 6.6rem; object-fit: contain; margin-top: -.6rem; }
.side-btn b { font-size: 2.5rem; font-weight: 900; margin-top: -.2rem; }
.side-btn:active { transform: translateY(.5rem); box-shadow: 0 .2rem 0 rgba(90,42,26,.5); }
.dot { position: absolute; right: -1rem; top: -1rem; min-width: 3.6rem; height: 3.6rem; padding: 0 .8rem; border-radius: 2rem; background: var(--red); border: .34rem solid #fff; color: #fff; font-size: 2.1rem; font-style: normal; display: grid; place-items: center; animation: pulse 1s infinite; }
.title-bottom { position: absolute; left: 0; right: 0; bottom: max(3.4rem, env(safe-area-inset-bottom)); text-align: center; }
.best { margin-bottom: 1.8rem; font-size: 3rem; color: #fff; -webkit-text-stroke: .65rem var(--ink); paint-order: stroke fill; }
.tap-tip { margin-top: 2.6rem; font-size: 2.5rem; color: rgba(255,255,255,.95); -webkit-text-stroke: .5rem rgba(90,42,26,.85); paint-order: stroke fill; }

/* ---------- 加载页 ---------- */
#loading { pointer-events: auto; background: linear-gradient(#35b6f2, #8fe0ff 55%, #ffe9a8 85%, #ffd27a); z-index: 30; transition: opacity .5s; }
#loading.out { opacity: 0; pointer-events: none; }
.load-sky { position: absolute; inset: 0; background: radial-gradient(circle at 22% 12%, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 22%), radial-gradient(ellipse at 80% 30%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 30%), radial-gradient(ellipse at 15% 42%, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 26%); }
.load-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem; padding: 4rem 3rem; }
.polaroids { position: relative; width: 44rem; height: 46rem; margin: 1rem 0 2rem; }
.polaroid { position: absolute; left: 50%; top: 50%; width: 32rem; padding: 1.5rem 1.5rem 0; background: #fff; border-radius: .8rem; box-shadow: 0 1.2rem 3rem rgba(40,20,60,.35); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .5s; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.92); opacity: 0; }
.polaroid .ph { width: 100%; aspect-ratio: 1; background: #ddd center/cover no-repeat; border-radius: .3rem; }
.polaroid p { margin: 0; height: 6.4rem; display: grid; place-items: center; font-size: 2.8rem; font-weight: 700; color: #6b4a3a; }
.polaroid.s0 { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); z-index: 3; }
.polaroid.s1 { opacity: 1; transform: translate(-58%, -47%) rotate(calc(var(--r) - 9deg)) scale(.94); z-index: 2; filter: brightness(.94); }
.polaroid.s2 { opacity: 1; transform: translate(-43%, -53%) rotate(calc(var(--r) + 10deg)) scale(.9); z-index: 1; filter: brightness(.88); }
.polaroid.out { opacity: 0; transform: translate(60%, -80%) rotate(40deg) scale(.8); z-index: 4; }
.load-bar { position: relative; width: 50rem; height: 4.2rem; border: .45rem solid var(--ink); border-radius: 2.4rem; background: #fff6e0; box-shadow: 0 .6rem 0 rgba(90,42,26,.35); }
#loadFill { height: 100%; width: 0%; border-radius: 2rem; background: repeating-linear-gradient(-45deg, #ff8fab 0 1.6rem, #ffb3c6 1.6rem 3.2rem); transition: width .25s; }
#loadCandle { position: absolute; top: -3.4rem; left: 0; width: 5.6rem; height: 7rem; transform: translateX(-50%); transition: left .25s; }
.load-text { font-size: 3rem; color: #fff; -webkit-text-stroke: .65rem var(--ink); paint-order: stroke fill; }
.load-tip { position: absolute; left: 4rem; right: 4rem; bottom: max(5rem, env(safe-area-inset-bottom)); text-align: center; font-size: 2.6rem; color: #8a5a2a; }
#btnEnter { margin-top: -1rem; }

/* ---------- 弹窗 ---------- */
.modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; }
.modal-mask { position: absolute; inset: 0; background: rgba(30,12,50,.62); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.panel { position: relative; width: 63rem; max-height: 88%; display: flex; flex-direction: column; border: .5rem solid var(--ink); border-radius: 4rem; background: var(--cream); box-shadow: 0 1.2rem 0 rgba(60,25,15,.6), 0 3rem 6rem rgba(0,0,0,.4); animation: panelin .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes panelin { from { transform: scale(.6) translateY(6rem); opacity: 0; } }
.panel-head { position: relative; margin: -3.4rem auto 0; min-width: 34rem; height: 8rem; padding: 0 4rem; display: grid; place-items: center; border: .5rem solid var(--ink); border-radius: 2.6rem; background: linear-gradient(#ff8fa8, #f2507a); box-shadow: 0 .7rem 0 #a52c4f, inset 0 .5rem 0 rgba(255,255,255,.4); font-size: 4.2rem; font-weight: 900; color: #fff; -webkit-text-stroke: .7rem var(--ink); paint-order: stroke fill; letter-spacing: .3rem; flex: none; }
.panel-head.gold { background: linear-gradient(#ffe27a, #ff9f1c); box-shadow: 0 .7rem 0 #b45a12, inset 0 .5rem 0 rgba(255,255,255,.5); }
.panel-head.teal { background: linear-gradient(#8ee3ff, #1e9fd6); box-shadow: 0 .7rem 0 #116a94, inset 0 .5rem 0 rgba(255,255,255,.5); }
.panel-close { position: absolute; right: -1.6rem; top: -2.6rem; width: 7.4rem; height: 7.4rem; border-radius: 50%; border: .45rem solid var(--ink); background: linear-gradient(#ff8a8a, #e8344e); box-shadow: 0 .6rem 0 #8f1a2d; display: grid; place-items: center; z-index: 2; }
.panel-close::before, .panel-close::after { content: ''; position: absolute; width: 3.6rem; height: .9rem; border-radius: .5rem; background: #fff; transform: rotate(45deg); }
.panel-close::after { transform: rotate(-45deg); }
.panel-close:active { transform: translateY(.4rem); box-shadow: 0 .2rem 0 #8f1a2d; }
.panel-body { padding: 3rem 3.4rem 3.4rem; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; flex: 1; min-height: 0; }
.panel-foot { display: flex; justify-content: center; gap: 2.4rem; padding: 0 3rem 3.6rem; flex: none; }
.scroll { touch-action: pan-y; }
.center { text-align: center; }
.muted { color: #a0795c; font-weight: 700; font-size: 2.6rem; }
.big-num { font-size: 9.6rem; font-weight: 900; line-height: 1.1; color: #ff9f1c; -webkit-text-stroke: 1.1rem var(--ink); paint-order: stroke fill; font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: 1rem; margin-bottom: 2.4rem; }
.tab { flex: 1; height: 6.4rem; border: .4rem solid var(--ink); border-radius: 2rem; background: #f3dfb6; font-size: 2.9rem; font-weight: 900; color: #9a6a44; position: relative; }
.tab.on { background: linear-gradient(#ffe27a, #ffb52e); color: var(--ink); box-shadow: 0 .5rem 0 #b45a12; transform: translateY(-.3rem); }
.tab .dot { transform: scale(.85); }
.row { display: flex; align-items: center; gap: 1.8rem; padding: 1.8rem; margin-bottom: 1.6rem; border: .4rem solid var(--ink); border-radius: 2.6rem; background: #fff; box-shadow: 0 .5rem 0 rgba(90,42,26,.25); }
.row.done { background: #e9ffd6; }
.row.locked { background: #efe6d6; }
.row .thumb { width: 11rem; height: 11rem; border-radius: 2rem; background: linear-gradient(#bfeaff, #fff2c9); border: .36rem solid var(--ink); display: grid; place-items: center; flex: none; overflow: hidden; }
.row .thumb { position: relative; }
.row .thumb img { width: 118%; height: 118%; object-fit: contain; margin-top: 8%; }
.lock { position: absolute; right: .3rem; bottom: .3rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--ink); }
.lock::before { content: ''; position: absolute; left: 1rem; top: .55rem; width: 1.6rem; height: 1.5rem; border: .32rem solid #ffe9a8; border-bottom: 0; border-radius: .9rem .9rem 0 0; box-sizing: border-box; }
.lock::after { content: ''; position: absolute; left: .75rem; top: 1.6rem; width: 2.1rem; height: 1.5rem; border-radius: .35rem; background: #ffe9a8; }
.row .thumb.sm { width: 8rem; height: 8rem; background: #fff6e0; }
.row .thumb.sm img { width: 86%; height: 86%; margin-top: 0; }
.row .info { flex: 1; min-width: 0; }
.row .info h4 { margin: 0 0 .5rem; font-size: 3.1rem; font-weight: 900; }
.row .info p { margin: 0; font-size: 2.3rem; font-weight: 700; color: #a0795c; line-height: 1.35; }
.prog { height: 2rem; margin-top: .9rem; border-radius: 1.2rem; background: rgba(90,42,26,.15); overflow: hidden; position: relative; }
.prog b { display: block; height: 100%; border-radius: 1.2rem; background: linear-gradient(90deg, #7bd64b, #b7f07a); }
.prog span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.7rem; color: var(--ink); }
.reward { display: inline-flex; align-items: center; gap: .3rem; font-size: 2.8rem; font-weight: 900; white-space: nowrap; }
.reward .ic { width: 4rem; height: 4rem; }
.pips { display: flex; gap: .5rem; margin-top: .8rem; }
.pips i { width: 2.6rem; height: 1.4rem; border-radius: .8rem; background: rgba(90,42,26,.18); }
.pips i.on { background: var(--orange); }
.stats { display: flex; gap: 1.4rem; margin: 2rem 0; }
.stat { flex: 1; padding: 1.4rem .6rem; border: .38rem solid var(--ink); border-radius: 2.2rem; background: #fff; text-align: center; }
.stat b { display: block; font-size: 3.8rem; font-weight: 900; }
.stat span { font-size: 2.2rem; color: #a0795c; }
.rank { display: inline-block; margin: .6rem 0 0; padding: .8rem 2.6rem; border-radius: 2.4rem; background: var(--ink); color: #ffe9a8; font-size: 2.9rem; }
.ribbon { display: inline-block; padding: .7rem 3rem; border: .4rem solid var(--ink); border-radius: 2rem; background: linear-gradient(#ff8a8a, #e8344e); color: #fff; font-size: 3rem; transform: rotate(-4deg); animation: stamp .5s cubic-bezier(.2, 1.8, .4, 1) both .9s; }
@keyframes stamp { from { transform: scale(3) rotate(-20deg); opacity: 0; } }
.lv-bar { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.6rem; font-size: 2.6rem; }
.lv-bar .prog { flex: 1; margin: 0; height: 2.6rem; }
.lv-bar .prog b { background: linear-gradient(90deg, #ff8fab, #ffc93c); transition: width .8s .4s; }
.week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 2.6rem; }
.day { position: relative; padding: 1.2rem .4rem 1rem; border: .38rem solid var(--ink); border-radius: 2rem; background: #fff; text-align: center; font-size: 2.2rem; }
.day:nth-child(7) { grid-column: span 2; background: linear-gradient(#fff3b8, #ffd76a); }
.day b { display: block; font-size: 2.9rem; margin-top: .3rem; }
.day .ic { width: 5rem; height: 5rem; }
.day.got { background: #dff5c8; opacity: .75; } .day.got::after { content: '✓'; position: absolute; right: .6rem; top: .2rem; font-size: 3.2rem; color: #2f9e14; }
.day.today { box-shadow: 0 0 0 .5rem var(--orange); animation: pulse 1.2s infinite; }
.card { padding: 2.2rem; border: .4rem solid var(--ink); border-radius: 2.6rem; background: linear-gradient(#e3f6ff, #fff); text-align: center; }
.card h4 { margin: 0 0 .6rem; font-size: 3.4rem; } .card p { margin: 0 0 1.6rem; font-size: 2.5rem; font-weight: 700; color: #7f6a5a; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.pcard { aspect-ratio: .82; padding: .8rem .8rem 0; background: #fff; border: .36rem solid var(--ink); border-radius: 1.2rem; box-shadow: 0 .5rem 0 rgba(90,42,26,.25); display: flex; flex-direction: column; }
.pcard .ph { flex: 1; border-radius: .5rem; background: #e9dcc6 center/cover no-repeat; display: grid; place-items: center; font-size: 6rem; color: #c9b08e; }
.pcard p { margin: 0; height: 4.2rem; display: grid; place-items: center; font-size: 1.9rem; font-weight: 700; color: #6b4a3a; white-space: nowrap; overflow: hidden; }
.pcard:nth-child(3n+1) { transform: rotate(-2deg); } .pcard:nth-child(3n) { transform: rotate(2deg); }
.ticket { position: relative; display: flex; align-items: center; gap: 1.6rem; padding: 2rem 2.2rem; margin-bottom: 1.6rem; border: .4rem dashed #b57a17; border-radius: 2rem; background: linear-gradient(100deg, #fff1b8, #ffd76a); }
.ticket.used { filter: grayscale(.9); opacity: .65; }
.ticket img { width: 8rem; height: 8rem; object-fit: contain; flex: none; }
.ticket h4 { margin: 0 0 .4rem; font-size: 3.2rem; } .ticket p { margin: 0; font-size: 2.2rem; font-weight: 700; color: #8a5a17; line-height: 1.35; }
.empty { padding: 5rem 2rem; text-align: center; font-size: 2.8rem; color: #b39675; line-height: 1.6; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 1.8rem .6rem; font-size: 3.2rem; border-bottom: .3rem dashed rgba(90,42,26,.2); }
.switch { width: 11rem; height: 6rem; border-radius: 3rem; border: .4rem solid var(--ink); background: #d9cdbd; position: relative; transition: background .2s; }
.switch::after { content: ''; position: absolute; left: .4rem; top: .4rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: #fff; border: .36rem solid var(--ink); transition: transform .2s; }
.switch.on { background: var(--green); } .switch.on::after { transform: translateX(5rem); }
.hero-img { width: 26rem; height: 26rem; object-fit: contain; margin: -1rem auto 0; display: block; animation: floaty 2s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-1.4rem); } }
.count-ring { width: 10rem; height: 10rem; margin: 0 auto 1.6rem; border-radius: 50%; border: .6rem solid var(--ink); background: #fff; display: grid; place-items: center; font-size: 5.6rem; font-weight: 900; }

/* ---------- 全屏演出层（礼物、照片、贺卡） ---------- */
.overlay { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6rem; background: radial-gradient(circle at 50% 42%, rgba(255,170,70,.93), rgba(110,40,110,.95) 45%, rgba(30,12,50,.97) 78%); animation: fade .25s; padding: 4rem; text-align: center; }
.overlay .rays { position: absolute; left: 50%; top: 42%; width: 140rem; height: 140rem; margin: -70rem; background: repeating-conic-gradient(rgba(255,255,255,.14) 0 12deg, transparent 12deg 24deg); animation: spin 14s linear infinite; pointer-events: none; -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%); }
@keyframes spin { to { transform: rotate(360deg); } }
.overlay > * { position: relative; }
.gift-big { width: 36rem; height: 36rem; object-fit: contain; animation: giftshake 1s ease-in-out infinite; filter: drop-shadow(0 2rem 2rem rgba(0,0,0,.35)); }
@keyframes giftshake { 0%, 100% { transform: rotate(0) scale(1); } 15% { transform: rotate(-7deg) scale(1.04); } 30% { transform: rotate(6deg) scale(1.04); } 45% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } }
.gift-big.open { animation: giftopen .45s forwards; }
@keyframes giftopen { 40% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(0) rotate(40deg); opacity: 0; } }
.ov-title { font-size: 5.6rem; font-weight: 900; color: #fff; -webkit-text-stroke: 1rem var(--ink); paint-order: stroke fill; }
.ov-sub { font-size: 3.1rem; color: #fff7d1; -webkit-text-stroke: .6rem var(--ink); paint-order: stroke fill; line-height: 1.5; }
.prize { animation: prizein .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes prizein { from { transform: scale(.1) rotate(-30deg); opacity: 0; } }
.prize.photo { width: 46rem; padding: 2rem 2rem 0; background: #fff; border-radius: 1rem; box-shadow: 0 2rem 5rem rgba(0,0,0,.5); transform: rotate(-3deg); }
.prize.photo .ph { width: 100%; aspect-ratio: 1; background: #ddd center/cover no-repeat; border-radius: .4rem; }
.prize.photo p { margin: 0; height: 8rem; display: grid; place-items: center; font-size: 3.4rem; color: #6b4a3a; }
.prize.icon img { width: 30rem; height: 30rem; object-fit: contain; filter: drop-shadow(0 2rem 2rem rgba(0,0,0,.35)); }
.prize.coupon { width: 54rem; padding: 3.4rem 3rem; border: .5rem dashed #b57a17; border-radius: 2.6rem; background: linear-gradient(100deg, #fff1b8, #ffd76a); box-shadow: 0 2rem 5rem rgba(0,0,0,.5); }
.prize.coupon h3 { margin: 0 0 1rem; font-size: 5.4rem; } .prize.coupon p { margin: 0; font-size: 2.9rem; color: #8a5a17; line-height: 1.5; }
.card-kid { width: 30rem; height: 30rem; object-fit: contain; animation: floaty 1.2s ease-in-out infinite; }

.toast { position: absolute; left: 50%; top: 16%; z-index: 40; transform: translate(-50%, -2rem); padding: 1.4rem 3rem; border-radius: 3rem; background: rgba(60,25,15,.92); color: #fff; font-size: 2.9rem; opacity: 0; transition: all .25s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.rotate { position: absolute; inset: 0; z-index: 50; display: none; place-items: center; background: #171032; color: #fff; font-size: 2.4vw; }
@media (orientation: landscape) and (max-height: 520px) { .rotate { display: grid; } }

/* ---------- 魔王出场演出 ---------- */
.cine { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.cine .bar { position: absolute; left: 0; right: 0; height: 9%; background: #12061f; transition: transform .35s cubic-bezier(.2, .9, .3, 1); }
.cine .bar.top { top: 0; transform: translateY(-100%); } .cine .bar.bot { bottom: 0; transform: translateY(100%); }
.cine.in .bar { transform: none; }
.cine-card { position: absolute; left: 0; right: 0; top: 36%; height: 21rem; display: flex; align-items: center; justify-content: flex-end; padding-right: 3rem; background: linear-gradient(100deg, rgba(232,39,74,0) 0%, #e8274a 22%, #7a1140 100%); border-top: .6rem solid #fff; border-bottom: .6rem solid #fff; transform: translateX(110%) skewY(-4deg); transition: transform .4s cubic-bezier(.2, 1.2, .3, 1) .1s; box-shadow: 0 2rem 4rem rgba(0,0,0,.4); }
.cine.in .cine-card { transform: skewY(-4deg); }
.cine.out .cine-card { transform: translateX(-110%) skewY(-4deg); transition: transform .3s ease-in; }
.cine-card img { position: absolute; left: 1rem; bottom: -2rem; height: 30rem; filter: drop-shadow(0 1rem 0 rgba(0,0,0,.3)); animation: cineBoss .5s cubic-bezier(.2, 1.6, .4, 1) .25s both; }
@keyframes cineBoss { from { transform: translateX(-30rem) scale(.6); opacity: 0; } }
.cine-txt { text-align: right; transform: skewY(4deg) rotate(-4deg); }
.cine-txt b { display: block; font-size: 7.6rem; font-weight: 900; color: #fff; -webkit-text-stroke: 1.1rem #3a0618; paint-order: stroke fill; letter-spacing: .3rem; }
.cine-txt em { display: inline-block; font-style: normal; font-size: 2.8rem; color: #ffe9a8; background: #3a0618; border-radius: 2rem; padding: .5rem 1.8rem; margin-bottom: .8rem; }

/* ---------- 终结技：吹蜡烛 ---------- */
.finisher { position: absolute; left: 0; right: 0; top: 24%; text-align: center; pointer-events: none !important; animation: bannerin .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.fin-t { font-size: 6.4rem; font-weight: 900; color: #ffe066; -webkit-text-stroke: 1.1rem var(--ink); paint-order: stroke fill; animation: finPulse .35s ease-in-out infinite; }
@keyframes finPulse { 50% { transform: scale(1.07) rotate(-1.5deg); } }
.fin-s { margin-top: .8rem; font-size: 3rem; color: #fff; -webkit-text-stroke: .65rem var(--ink); paint-order: stroke fill; }
.fin-bar { margin: 1.8rem auto 0; width: 46rem; height: 4rem; padding: .5rem; border: .45rem solid var(--ink); border-radius: 2.4rem; background: #fff6e0; box-shadow: 0 .6rem 0 rgba(90,42,26,.45); }
.fin-bar b { display: block; height: 100%; width: 0; border-radius: 1.6rem; background: linear-gradient(90deg, #7ae5ff, #fff, #ffd166); transition: width .12s; }

/* ---------- 闷墩的话 ---------- */
.bubble { position: absolute; z-index: 6; transform: translate(-12%, -100%) scale(.3); transform-origin: 20% 100%; padding: 1.3rem 2.2rem; border: .4rem solid var(--ink); border-radius: 2.6rem 2.6rem 2.6rem .6rem; background: #fff; font-size: 2.9rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.2, 1.7, .4, 1), opacity .2s; box-shadow: 0 .5rem 0 rgba(90,42,26,.35); }
.bubble.show { opacity: 1; transform: translate(-12%, -100%) scale(1); }
.switch-row small { display: block; font-size: 2.1rem; color: #a0795c; font-weight: 700; margin-top: .2rem; }

/* ---------- 开场的生日蛋糕（纯 CSS 画的） ---------- */
.overlay.greet { gap: 2.2rem; }
.cake { position: relative; width: 40rem; height: 37rem; margin: 1rem 0 .4rem; cursor: pointer; animation: floaty 2.4s ease-in-out infinite; filter: drop-shadow(0 2rem 2.4rem rgba(0,0,0,.4)); }
.cake.puff { animation: cakePuff .3s; }
@keyframes cakePuff { 30% { transform: translateX(1.4rem) rotate(2deg); } }
.cake .plate { position: absolute; left: -1rem; right: -1rem; bottom: 0; height: 3rem; border-radius: 50%; background: linear-gradient(#fff, #d7e6f5); border: .45rem solid var(--ink); }
.cake .tier { position: absolute; left: 50%; transform: translateX(-50%); border: .45rem solid var(--ink); border-radius: 2.2rem 2.2rem 1.2rem 1.2rem; background: linear-gradient(#ffe7a8 0 40%, #ffcf6e 40% 46%, #ffe7a8 46% 100%); overflow: hidden; }
.cake .t1 { bottom: 1.6rem; width: 38rem; height: 13rem; } .cake .t2 { bottom: 14rem; width: 27rem; height: 10.5rem; }
.cake .tier u { position: absolute; left: 0; right: 0; top: 0; height: 4.2rem; background: #fff; }
.cake .tier u::after { content: ''; position: absolute; left: -1rem; right: -1rem; top: 3rem; height: 4rem; background: radial-gradient(circle at 2rem 0, #fff 1.9rem, transparent 2rem) 0 0 / 4.6rem 4rem repeat-x; }
.cake .t2 u { background: #7b3f1d; } .cake .t2 u::after { background-image: radial-gradient(circle at 2rem 0, #7b3f1d 1.9rem, transparent 2rem); }
.cake .t1 s { position: absolute; left: 0; right: 0; bottom: 2.2rem; height: 2.6rem; background: radial-gradient(circle, #ff4d5e 1.1rem, transparent 1.2rem) 0 0 / 5.4rem 2.6rem repeat-x; }
.cake .candles { position: absolute; left: 50%; bottom: 24rem; width: 20rem; height: 12rem; transform: translateX(-50%); }
.cake .cd { position: absolute; bottom: 0; width: 2.6rem; height: 7.6rem; border: .4rem solid var(--ink); border-radius: .9rem; background: repeating-linear-gradient(-35deg, #fff 0 .9rem, #ff6f91 .9rem 1.8rem); }
.cake .c1 { left: 1.6rem; } .cake .c2 { left: 8.7rem; height: 9rem; background: repeating-linear-gradient(-35deg, #fff 0 .9rem, #4cc9f0 .9rem 1.8rem); } .cake .c3 { right: 1.6rem; background: repeating-linear-gradient(-35deg, #fff 0 .9rem, #ffc93c .9rem 1.8rem); }
.cake .cd b { position: absolute; left: 50%; bottom: 100%; width: 3rem; height: 5rem; margin-left: -1.5rem; margin-bottom: .3rem; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 75%, #fff 0 22%, #ffe066 23% 50%, #ff9f1c 51%); box-shadow: 0 0 3rem 1rem rgba(255,200,80,.75); transform-origin: 50% 100%; animation: flame .18s ease-in-out infinite alternate; transition: transform .25s, opacity .25s; }
.cake .c2 b { animation-delay: -.07s; } .cake .c3 b { animation-delay: -.12s; }
@keyframes flame { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.9, 1.12) rotate(3deg); } }
.cake .cd.out b { animation: none; transform: scale(0) translateX(2rem); opacity: 0; box-shadow: none; }
.cake .cd.out::after { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1.6rem; height: 1.6rem; margin-left: -.8rem; border-radius: 50%; background: rgba(230,230,240,.85); animation: smoke 1.1s ease-out forwards; }
@keyframes smoke { to { transform: translate(1.6rem, -9rem) scale(3.2); opacity: 0; } }