:root {
  --night: #1b1035; --plum: #2c1858; --purple: #4a2a8a; --violet: #7b3fb8; --lilac: #c9b6ff;
  --orange: #f39a3d; --gold: #ffd36b; --gold-deep: #e0a32c; --cream: #fff6ea; --pink: #ff8fb1; --ink: #2b1640;
  --r-common: #9fe6ff; --r-rare: #e19bff; --r-secret: #ffd36b; --r-ultra: #ff9ec7;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --head: "Baloo 2", "Nunito", system-ui, sans-serif; --body: "Nunito", system-ui, sans-serif; --script: "Dancing Script", "Baloo 2", cursive;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--night); }
body { font-family: var(--body); font-weight: 700; color: var(--cream); -webkit-font-smoothing: antialiased; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
svg { overflow: visible; }

/* frame: phone column, blurred backdrop on wide screens */
#backdrop { position: fixed; inset: -60px; background: var(--night) center/cover no-repeat; filter: blur(34px) brightness(0.55) saturate(1.2); transform: scale(1.1); }
#app { position: fixed; inset: 0; margin: 0 auto; width: 100%; max-width: 560px; overflow: hidden; overflow: clip; background: var(--night); isolation: isolate; }
@media (min-width: 600px) { #app { box-shadow: 0 0 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); } }
#bg { position: absolute; inset: 0; z-index: 0; }
.bg-layer { position: absolute; inset: 0; background: center bottom / cover no-repeat; opacity: 0; transition: opacity 0.9s ease; will-change: opacity; }
.bg-layer.on { opacity: 1; }
.bg-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 8, 40, 0.35), transparent 25%, transparent 60%, rgba(20, 8, 40, 0.45)); pointer-events: none; transition: background 0.6s; }
#app.dim .bg-tint { background: rgba(16, 6, 34, 0.62); }
#ambient, #burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ambient { z-index: 1; } #burst { z-index: 90; }

#screens { position: absolute; inset: 0; z-index: 2; overflow: hidden; overflow: clip; }
.screen { position: absolute; inset: 0; display: none; overflow: hidden; overflow: clip; padding: calc(64px + var(--safe-t)) 16px calc(16px + var(--safe-b)); }
.screen.active { display: block; }
.screen-head { position: relative; z-index: 3; text-align: center; pointer-events: none; }
.screen-head h2 { margin: 0; font: 800 clamp(26px, 7vw, 34px)/1 var(--head); color: var(--cream); text-shadow: 0 3px 0 rgba(43, 22, 64, 0.6), 0 0 24px rgba(255, 180, 90, 0.35); }
.screen-head p { margin: 4px 0 0; color: #f3dcff; opacity: 0.9; font-size: 14px; }

/* buttons */
.btn { position: relative; border: 0; border-radius: 999px; padding: 13px 26px; font: 800 16px/1.1 var(--head); letter-spacing: 0.02em; color: var(--ink); background: linear-gradient(180deg, #fff, #f1e4ff); box-shadow: 0 6px 0 #b9a2e0, 0 12px 24px rgba(10, 0, 30, 0.35); transition: transform 0.12s, box-shadow 0.12s, filter 0.2s; }
.btn:active, .btn.pressed { transform: translateY(4px) scale(0.98); box-shadow: 0 2px 0 #b9a2e0, 0 6px 14px rgba(10, 0, 30, 0.35); }
.btn.primary { color: #5a2c0c; background: linear-gradient(180deg, #fff3c4 0%, #ffd36b 45%, #f6a93a 100%); box-shadow: 0 6px 0 #c4741c, 0 14px 30px rgba(255, 160, 60, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.btn.primary:active { box-shadow: 0 2px 0 #c4741c, 0 6px 14px rgba(255, 160, 60, 0.3); }
.btn.primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.65) 45%, transparent 60%); background-size: 250% 100%; animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.btn.big { padding: 16px 34px; font-size: 19px; }
.btn.small { padding: 8px 14px; font-size: 13px; box-shadow: 0 3px 0 #b9a2e0; }
.btn.ghost { background: rgba(255, 255, 255, 0.12); color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); }
.btn.ghost:active { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.btn:disabled { filter: grayscale(0.7) brightness(0.8); cursor: default; }
.btn:disabled::after { display: none; }

/* top bar & HUD */
.topbar { position: absolute; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--safe-t)) 12px 0; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar-right { display: flex; gap: 8px; margin-left: auto; }
.candy-pill { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: rgba(30, 14, 60, 0.72); box-shadow: inset 0 0 0 2px rgba(255, 211, 107, 0.55), 0 6px 16px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); font: 800 18px var(--head); color: var(--gold); opacity: 0; transform: translateY(-8px); transition: opacity 0.4s, transform 0.4s; }
#app.show-candy .candy-pill { opacity: 1; transform: none; }
.candy-pill .ci svg { width: 30px; height: 30px; display: block; }
.candy-pill.bump { animation: bump 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes bump { 40% { transform: scale(1.18); } }
.icon-btn, .lang-pill { position: relative; height: 40px; border: 0; border-radius: 999px; background: rgba(30, 14, 60, 0.72); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25), 0 6px 16px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); color: var(--cream); }
.icon-btn { width: 40px; display: grid; place-items: center; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.muted .wave { opacity: 0.2; }
.icon-btn.muted::after { content: ""; position: absolute; width: 26px; height: 2.5px; background: var(--pink); transform: rotate(-40deg); border-radius: 2px; }
.lang-pill { display: flex; align-items: center; padding: 4px; gap: 2px; font: 800 13px var(--head); }
.lang-pill span { padding: 6px 9px; border-radius: 999px; transition: background 0.25s, color 0.25s; color: rgba(255, 255, 255, 0.7); }
html[lang="en"] .lang-pill [data-l="en"], html[lang="vi"] .lang-pill [data-l="vi"] { background: var(--gold); color: var(--ink); }

.bottom-nav { position: absolute; z-index: 55; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translate(-50%, 140%); display: flex; gap: 6px; padding: 6px; border-radius: 26px; background: rgba(30, 14, 60, 0.78); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18), 0 12px 30px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); transition: transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); }
#app.show-nav .bottom-nav { transform: translate(-50%, 0); }
.bottom-nav button { position: relative; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 84px; padding: 6px 10px; border-radius: 20px; font: 800 12px var(--head); color: #e8d9ff; transition: background 0.25s; }
.bottom-nav button.on { background: rgba(255, 211, 107, 0.18); color: var(--gold); }
.bottom-nav .ni svg { width: 30px; height: 30px; display: block; transition: transform 0.25s; }
.bottom-nav button.on .ni svg { transform: translateY(-2px) scale(1.1); }
.bottom-nav button.badge::after { content: ""; position: absolute; top: 6px; right: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px #2a1757; }
.preview-badge { position: absolute; z-index: 61; top: calc(4px + var(--safe-t)); left: 50%; transform: translateX(-50%); font-size: 9.5px; padding: 2px 8px; opacity: 0.85; border-radius: 999px; background: rgba(255, 143, 177, 0.9); color: #3a0d20; white-space: nowrap; pointer-events: none; }

/* actors & moods */
.actor { position: relative; }
.actor svg { width: 100%; height: auto; display: block; }
.m-eyes-happy, .m-eyes-shock, .m-eyes-sad, .m-eyes-sleepy, .m-eyes-wink, .m-mouth-open, .m-mouth-o, .m-mouth-sad { display: none; }
[data-mood="happy"] .m-eyes-open, [data-mood="happy"] .m-mouth-smile { display: none; }
[data-mood="happy"] .m-eyes-happy, [data-mood="happy"] .m-mouth-open { display: inline; }
[data-mood="shock"] .m-eyes-open, [data-mood="shock"] .m-mouth-smile { display: none; }
[data-mood="shock"] .m-eyes-shock, [data-mood="shock"] .m-mouth-o { display: inline; }
[data-mood="sad"] .m-eyes-open, [data-mood="sad"] .m-mouth-smile { display: none; }
[data-mood="sad"] .m-eyes-sad, [data-mood="sad"] .m-mouth-sad { display: inline; }
[data-mood="sleepy"] .m-eyes-open { display: none; } [data-mood="sleepy"] .m-eyes-sleepy { display: inline; }
[data-mood="wink"] .m-eyes-open, [data-mood="wink"] .m-mouth-smile { display: none; }
[data-mood="wink"] .m-eyes-wink, [data-mood="wink"] .m-mouth-open { display: inline; }
.char .blink { transform-box: fill-box; transform-origin: center; transform: scaleY(0); animation: blink 4.6s infinite; }
.actor:nth-child(2n) .char .blink { animation-delay: -1.7s; } .actor:nth-child(3n) .char .blink { animation-delay: -3.1s; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
.char .c-body { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 0.985); } }
.char .c-head { transform-box: fill-box; transform-origin: 50% 90%; animation: headTilt 6s ease-in-out infinite; }
@keyframes headTilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } }
.char .c-tail { transform-box: fill-box; transform-origin: 0% 90%; animation: wag 0.5s ease-in-out infinite alternate; }
[data-mood="sad"] .char .c-tail, [data-mood="sleepy"] .char .c-tail { animation-duration: 1.6s; }
@keyframes wag { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.char .c-ear-l, .char .c-ear-r { transform-box: fill-box; transform-origin: 50% 0%; animation: ear 3.4s ease-in-out infinite; }
.char .c-ear-r { animation-delay: -0.5s; }
@keyframes ear { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-8deg); } 92% { transform: rotate(5deg); } }
.char .c-arm-l, .char .c-arm-r { transform-box: fill-box; transform-origin: 50% 10%; }
.speaking .char .c-arm-r { animation: wave 0.6s ease-in-out 2 alternate; }
@keyframes wave { to { transform: rotate(-22deg); } }
.char .c-wing-l, .char .c-wing-r { transform-box: fill-box; animation: flap 0.35s ease-in-out infinite alternate; }
.char .c-wing-l { transform-origin: 100% 50%; } .char .c-wing-r { transform-origin: 0% 50%; }
@keyframes flap { from { transform: rotate(-10deg) scaleY(0.9); } to { transform: rotate(14deg) scaleY(1.05); } }
.char-flap .c-wing-r { animation-direction: alternate-reverse; }
.char .c-float { animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.char .c-hat { transform-box: fill-box; transform-origin: 50% 100%; animation: hat 4s ease-in-out infinite; }
@keyframes hat { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
.char .tear { animation: tear 1.6s ease-in infinite; }
@keyframes tear { from { transform: translateY(0); opacity: 1; } to { transform: translateY(10px); opacity: 0; } }
.actor.hop { animation: hop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes hop { 30% { transform: translateY(-18px) scale(1.04, 0.96); } 60% { transform: translateY(0) scale(0.97, 1.03); } }

/* title */
#scr-title { padding-top: calc(70px + var(--safe-t)); }
#scr-title.active { display: flex; flex-direction: column; align-items: center; }
.title-wrap { text-align: center; position: relative; z-index: 2; }
.title-kicker { margin: 0; font: 800 13px var(--head); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.logo { margin: 6px auto 0; font: 800 clamp(40px, 12.5vw, 62px)/0.92 var(--head); color: #fff2dc; text-wrap: balance; max-width: 9.5em; text-shadow: 0 4px 0 #7b3fb8, 0 8px 0 #3a1f6b, 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 170, 80, 0.4); }
.logo .ch { display: inline-block; }
html[lang="vi"] .logo { font-size: clamp(38px, 11.5vw, 58px); line-height: 1.02; }
.title-cast { position: absolute; left: 0; right: 0; bottom: calc(150px + var(--safe-b)); height: 240px; z-index: 2; }
.title-cast .actor-puppy { position: absolute; width: min(44%, 210px); left: 6%; bottom: 0; }
.title-cast .actor-penguin { position: absolute; width: min(44%, 210px); right: 6%; bottom: 0; }
.title-cast .actor-boo { position: absolute; width: 90px; right: 12%; top: -250px; opacity: 0.95; animation: booDrift 9s ease-in-out infinite; }
@keyframes booDrift { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(-40px, 20px) rotate(6deg); } }
.title-actions { position: absolute; left: 0; right: 0; bottom: calc(26px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3; }
.title-hint { margin: 0; font-size: 12px; opacity: 0.75; }
.title-soon { text-align: center; padding: 14px 18px; border-radius: 22px; background: rgba(30, 14, 60, 0.75); box-shadow: inset 0 0 0 2px rgba(255, 211, 107, 0.4); max-width: 320px; }
.title-soon p { margin: 0; font-size: 13px; opacity: 0.85; } .title-soon b { display: block; font: 800 26px var(--head); color: var(--gold); } .title-soon small { display: block; font-size: 12px; opacity: 0.75; margin-top: 4px; }

/* map */
#scr-map { padding: 0; }
.map-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.map-scroll::-webkit-scrollbar { display: none; }
.map-frame { position: relative; left: 50%; width: max(100%, 60vh); aspect-ratio: 720 / 1280; transform: translateX(-50%); }
@supports (height: 100dvh) { .map-frame { width: max(100%, 60dvh); } }
.map-pad { height: calc(120px + var(--safe-b)); margin-top: -1px; background: linear-gradient(180deg, #36214b, #1b1035); }
#scr-map.has-banner .map-pad { height: calc(200px + var(--safe-b)); }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#scr-map .screen-head { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding: calc(58px + var(--safe-t)) 0 26px; background: linear-gradient(180deg, rgba(27, 16, 53, 0.85), rgba(27, 16, 53, 0)); }
.map-node { position: absolute; transform: translate(-50%, -100%); border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; }
.map-node .mn-badge { position: relative; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff7e6, #ffd9a0); box-shadow: 0 0 0 4px var(--gold), 0 8px 18px rgba(0, 0, 0, 0.45); display: grid; place-items: center; overflow: hidden; transition: transform 0.2s; }
.map-node .mn-badge svg { width: 58px; height: 70px; margin-top: 14px; }
.map-node .mn-label { font: 800 12px/1.1 var(--head); padding: 3px 9px; border-radius: 999px; background: rgba(30, 14, 60, 0.85); white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }
.map-node .mn-state { position: absolute; top: -6px; right: -10px; z-index: 2; font: 800 10px var(--head); padding: 2px 6px; border-radius: 999px; background: var(--pink); color: #3a0d20; }
.map-node.new .mn-badge { animation: nodePulse 1.6s ease-in-out infinite; }
@keyframes nodePulse { 0%, 100% { box-shadow: 0 0 0 4px var(--gold), 0 0 0 0 rgba(255, 211, 107, 0.6), 0 8px 18px rgba(0, 0, 0, 0.45); } 50% { box-shadow: 0 0 0 4px var(--gold), 0 0 0 14px rgba(255, 211, 107, 0), 0 8px 18px rgba(0, 0, 0, 0.45); } }
.map-node.locked .mn-badge { background: radial-gradient(circle at 40% 30%, #6a5a8a, #3a2a5a); box-shadow: 0 0 0 3px #8a7aa8, 0 8px 18px rgba(0, 0, 0, 0.45); color: #cbbde6; }
.map-node.locked .mn-badge svg { width: 24px; height: 24px; margin: 0; }
.map-node.locked .mn-label { color: #cbbde6; }
.map-node.done .mn-check { position: absolute; right: -4px; top: 40px; width: 22px; height: 22px; z-index: 2; }
.map-node:active .mn-badge { transform: scale(0.92); }
.map-walkers { position: absolute; width: 96px; height: 70px; transform: translate(-50%, -100%); transition: left 1.2s cubic-bezier(0.5, 0, 0.3, 1), top 1.2s cubic-bezier(0.5, 0, 0.3, 1); pointer-events: none; z-index: 3; }
.map-walkers .actor { position: absolute; bottom: 0; width: 48px; }
.map-walkers .actor:first-child { left: -6px; } .map-walkers .actor:last-child { right: -6px; }
.map-walkers.walking .actor { animation: walkHop 0.32s ease-in-out infinite alternate; }
.map-walkers.walking .actor:last-child { animation-delay: 0.16s; }
@keyframes walkHop { to { transform: translateY(-8px) rotate(4deg); } }
.map-banner { position: absolute; z-index: 4; left: 14px; right: 14px; bottom: calc(96px + var(--safe-b)); padding: 12px 14px 12px 76px; border-radius: 22px; background: rgba(30, 14, 60, 0.88); box-shadow: inset 0 0 0 2px rgba(255, 211, 107, 0.45), 0 10px 26px rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); font-size: 14px; line-height: 1.35; min-height: 72px; }
.map-banner b { color: var(--gold); }
.map-banner .mb-av { position: absolute; left: 8px; bottom: 6px; width: 60px; }
.map-banner small { display: block; opacity: 0.75; font-size: 12px; margin-top: 2px; }

/* bottom sheet */
.sheet-backdrop { position: absolute; inset: 0; z-index: 70; background: rgba(10, 4, 24, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(3px); }
.sheet-backdrop.on { opacity: 1; pointer-events: auto; }
.sheet { position: absolute; z-index: 71; left: 0; right: 0; bottom: 0; padding: 10px 22px calc(22px + var(--safe-b)); border-radius: 30px 30px 0 0; background: linear-gradient(180deg, #3f2378, #2a1757); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.12); text-align: center; transform: translateY(calc(100% + 100px)); visibility: hidden; transition: transform 0.45s cubic-bezier(0.2, 1.1, 0.4, 1), visibility 0s linear 0.45s; }
.sheet.on { transform: none; visibility: visible; transition: transform 0.45s cubic-bezier(0.2, 1.1, 0.4, 1); }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); margin: 0 auto 6px; }
.cs-avatar { width: 120px; margin: -70px auto 0; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.cs-kicker { margin: 4px 0 0; color: var(--gold); font: 800 12px var(--head); letter-spacing: 0.14em; text-transform: uppercase; }
.cs-title { margin: 2px 0 14px; font: 800 26px/1.05 var(--head); }
.cs-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 340px; margin: 0 auto; }

/* story */
#scr-story { padding: 0; }
.cast { position: absolute; left: 0; right: 0; bottom: calc(170px + var(--safe-b)); height: 46%; pointer-events: none; }
.cast .actor { position: absolute; bottom: 0; width: min(40%, 200px); transition: filter 0.35s, transform 0.35s, opacity 0.35s; }
.cast .slot-left { left: 2%; } .cast .slot-right { right: 2%; }
.cast .slot-center { left: 50%; width: min(38%, 190px); margin-left: calc(min(38%, 190px) / -2); bottom: 20%; }
.cast .actor.dimmed { filter: brightness(0.72) saturate(0.85); transform: scale(0.96); }
.cast .actor.speaking { filter: drop-shadow(0 0 18px rgba(255, 220, 140, 0.45)); transform: scale(1.04); }
.cast .actor.away { opacity: 0; transform: scale(0.4) translateY(40px); }
.dialog { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: calc(14px + var(--safe-b)); min-height: 140px; padding: 22px 20px 26px; border: 0; border-radius: 26px; text-align: left; background: linear-gradient(180deg, rgba(255, 249, 240, 0.97), rgba(255, 238, 222, 0.97)); color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.8), 0 0 0 7px rgba(74, 42, 138, 0.55), 0 18px 40px rgba(0, 0, 0, 0.45); font: 700 17px/1.45 var(--body); }
html[lang="vi"] .dialog { font-size: 16.5px; line-height: 1.5; }
.dlg-name { position: absolute; top: -16px; left: 18px; padding: 4px 16px; border-radius: 999px; font: 800 15px var(--head); color: #fff; background: var(--violet); box-shadow: 0 4px 0 #3a1f6b, 0 6px 14px rgba(0, 0, 0, 0.3); }
.dlg-name:empty { display: none; }
.dialog.narrator { background: linear-gradient(180deg, rgba(42, 23, 87, 0.95), rgba(30, 14, 60, 0.95)); color: #f6ecff; font-style: italic; text-align: center; }
.dlg-text { display: block; min-height: 3em; }
.dlg-next { position: absolute; right: 18px; bottom: 6px; font-size: 20px; color: var(--violet); animation: nudge 0.9s ease-in-out infinite; opacity: 0; }
.dialog.narrator .dlg-next { color: var(--gold); }
.dialog.ready .dlg-next { opacity: 1; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.skip-btn { position: absolute; z-index: 6; right: 12px; top: calc(58px + var(--safe-t)); border: 0; padding: 6px 14px; border-radius: 999px; background: rgba(30, 14, 60, 0.6); font: 800 13px var(--head); color: #e8d9ff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25); }
.chapter-card { position: absolute; z-index: 8; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(27, 16, 53, 0.88), rgba(27, 16, 53, 0.45) 70%, transparent); }
.cc-kicker { margin: 0; font: 800 14px var(--head); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.cc-title { margin: 6px 0; font: 800 clamp(34px, 10vw, 48px)/1.05 var(--head); text-wrap: balance; text-shadow: 0 4px 0 #7b3fb8, 0 10px 30px rgba(0, 0, 0, 0.6); }
.cc-flourish { width: 160px; height: 14px; background: radial-gradient(circle, var(--gold) 3px, transparent 4px) center/22px 14px repeat-x; opacity: 0.8; }
.story-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.story-fx .fly-box { position: absolute; width: 64px; left: 50%; top: 52%; }
.story-fx .fly-box svg, .story-fx .fx-boo svg { width: 100%; height: auto; }
.story-fx .fx-boo { position: absolute; width: 110px; }
.story-fx .lantern-glow { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 180, 0.95), rgba(255, 180, 70, 0.5) 30%, rgba(255, 160, 60, 0) 70%); opacity: 0; mix-blend-mode: screen; }
.story-fx .party-cast { position: absolute; left: 0; right: 0; bottom: 47%; display: flex; justify-content: center; }
.story-fx .party-cast .actor { width: 19%; margin: 0 -2.5%; }

/* mini-game */
#scr-game { padding: 0; }
.game-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.g-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-hud { position: absolute; z-index: 5; left: 12px; right: 12px; top: calc(60px + var(--safe-t)); display: flex; align-items: center; gap: 10px; pointer-events: none; }
.g-time { flex: 1; height: 14px; border-radius: 8px; background: rgba(30, 14, 60, 0.7); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); overflow: hidden; }
.g-time i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); transform-origin: left; border-radius: 8px; }
.g-score { min-width: 86px; margin-left: auto; text-align: center; padding: 5px 12px; border-radius: 999px; background: rgba(30, 14, 60, 0.8); box-shadow: inset 0 0 0 2px rgba(255, 211, 107, 0.6); }
.g-score-label { display: none; } .g-score b { font: 800 20px var(--head); color: var(--gold); display: inline-block; }
.g-score b.bump { animation: bump 0.3s; }
.float-txt { position: absolute; z-index: 6; transform: translate(-50%, -50%); font: 800 24px var(--head); color: #fff; text-shadow: 0 2px 0 var(--violet), 0 0 10px rgba(0, 0, 0, 0.4); pointer-events: none; animation: floatUp 0.9s ease-out forwards; }
.float-txt.gold { color: var(--gold); font-size: 30px; }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, -50%) scale(0.6); } 30% { transform: translate(-50%, -80%) scale(1.15); } to { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.game-card { position: absolute; z-index: 10; left: 50%; top: 52%; width: min(88%, 380px); transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; text-align: center; padding: 74px 22px 24px; border-radius: 30px; background: linear-gradient(180deg, #fffaf2, #ffeedd); color: var(--ink); box-shadow: 0 0 0 4px var(--gold), 0 0 0 9px rgba(74, 42, 138, 0.6), 0 30px 60px rgba(0, 0, 0, 0.5); transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.3s; }
.game-card.on { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.gc-avatar { position: absolute; left: 50%; top: -84px; width: 140px; transform: translateX(-50%); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35)); }
.gc-title { margin: 0; font: 800 30px/1 var(--head); color: var(--violet); }
.gc-how { margin: 10px 0 20px; font-size: 16px; line-height: 1.45; color: #5a3a6a; }
.game-card.result { padding-top: 26px; }
.gr-great { margin: 0; font: 800 34px var(--head); color: var(--violet); }
.gr-earned { margin: 6px 0 0; color: #7a5a8a; }
.gr-candy { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 18px; font: 800 56px var(--head); color: var(--orange); }
.gr-candy svg { width: 60px; height: 60px; animation: spinCandy 2s ease-in-out infinite; }
@keyframes spinCandy { 50% { transform: rotate(18deg) scale(1.08); } }
.game-count { position: absolute; z-index: 11; inset: 0; display: grid; place-items: center; pointer-events: none; font: 800 72px var(--head); color: #fff; text-shadow: 0 6px 0 var(--violet), 0 0 40px rgba(255, 200, 100, 0.6); }
.catcher { position: absolute; left: 0; bottom: calc(20px + var(--safe-b)); width: 120px; will-change: transform; pointer-events: none; }
.catcher-pup { width: 96px; margin: 0 auto -44px; position: relative; z-index: 0; }
.catcher-basket { width: 120px; display: block; position: relative; z-index: 1; }
.catcher.got .catcher-basket { animation: squish 0.25s; }
@keyframes squish { 50% { transform: scale(1.08, 0.9); } }
.mem-grid { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: min(92%, 400px, 62vh); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mem-card { aspect-ratio: 3 / 3.6; border: 0; padding: 0; background: none; perspective: 700px; animation: deal 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes deal { from { opacity: 0; transform: translateY(40px) scale(0.6) rotate(-10deg); } }
.mem-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1); }
.mem-card.up .mem-in { transform: rotateY(180deg); }
.mem-back, .mem-face { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.mem-back { background: radial-gradient(circle at 50% 40%, #9a62e0, #4a2a8a); box-shadow: inset 0 0 0 3px rgba(255, 211, 107, 0.7), 0 6px 14px rgba(0, 0, 0, 0.35); }
.mem-back svg { width: 46%; }
.mem-face { transform: rotateY(180deg); background: linear-gradient(180deg, #fffaf2, #ffe9d4); box-shadow: inset 0 0 0 3px var(--gold), 0 6px 14px rgba(0, 0, 0, 0.35); }
.mem-face svg { width: 64%; height: auto; }
.mem-card.ok .mem-face { animation: okPop 0.5s; box-shadow: inset 0 0 0 3px #7ee08a, 0 0 22px rgba(126, 224, 138, 0.7); }
@keyframes okPop { 40% { transform: rotateY(180deg) scale(1.12); } }
.bub-mumu { position: absolute; left: 50%; bottom: calc(10px + var(--safe-b)); width: 200px; margin-left: -100px; pointer-events: none; }
.bub-mumu.snore { animation: snore 0.6s; }
@keyframes snore { 50% { transform: scale(1.04, 0.97); } }
.bubble { position: absolute; left: 0; top: 0; border: 0; padding: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 8%, rgba(230, 220, 255, 0.5) 20%, rgba(180, 150, 255, 0.25) 60%, rgba(255, 255, 255, 0.6) 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 0 18px rgba(200, 180, 255, 0.4); display: grid; place-items: center; font: 800 26px var(--head); color: rgba(90, 60, 160, 0.75); will-change: transform; touch-action: none; }
.bubble.gold { background: radial-gradient(circle at 32% 28%, #fff 0 8%, rgba(255, 230, 150, 0.7) 22%, rgba(255, 190, 70, 0.4) 65%, rgba(255, 245, 200, 0.8) 100%); color: #b0700a; box-shadow: inset 0 0 0 2px #fff4c8, 0 0 24px rgba(255, 210, 100, 0.7); }
.bubble.popped { transition: opacity 0.2s, scale 0.2s; opacity: 0; scale: 1.6; }
.caul-wrap { position: absolute; left: 0; right: 0; top: calc(96px + var(--safe-t)); bottom: calc(20px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.caul-tip { font: 800 22px var(--head); color: var(--gold); text-shadow: 0 3px 0 #3a1f6b; animation: nudge 1s infinite; text-align: center; }
.caul { width: min(86%, 360px, 48vh); }
.caul-swirl, .caul-spoon { transform-box: view-box; transform-origin: 150px 100px; }
.caul-meter { width: min(70%, 280px); height: 16px; border-radius: 10px; background: rgba(30, 14, 60, 0.75); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3); overflow: hidden; }
.caul-meter i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #a6f07e, #8fb8ff, #c79bff, #ffd36b); }
.caul-ings { display: flex; gap: 18px; }
.ing { width: 78px; height: 78px; border: 0; border-radius: 50%; padding: 12px; background: radial-gradient(circle at 40% 30%, #6a4a9a, #3a2260); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2), 0 8px 16px rgba(0, 0, 0, 0.35); transition: transform 0.2s; }
.ing svg { width: 100%; height: 100%; }
.ing.glow { animation: ingGlow 0.6s ease-in-out infinite alternate; box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 6px rgba(255, 211, 107, 0.4), 0 0 30px rgba(255, 211, 107, 0.8); }
@keyframes ingGlow { to { transform: scale(1.12) translateY(-4px); } }
.ing.thrown { animation: thrown 0.5s; } @keyframes thrown { 50% { transform: translateY(-60px) scale(0.6); opacity: 0.3; } }
.ing.nope { animation: nope 0.35s; } @keyframes nope { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.carve-wrap { position: absolute; left: 0; right: 0; top: calc(110px + var(--safe-t)); bottom: calc(40px + var(--safe-b)); display: grid; place-items: center; }
.carve { width: min(96%, 460px); touch-action: none; }
.carve-dots circle { transition: r 0.2s, fill 0.2s; }
.carve-dots circle.cut { fill: #fff6c0; r: 3px; filter: drop-shadow(0 0 4px #ffd36b); }
.carve-wrap.assist .carve-dots circle:not(.cut) { animation: dotPulse 1s ease-in-out infinite; }
@keyframes dotPulse { 50% { r: 8px; fill: #ffd36b; } }
.carve-fill { transition: opacity 0.5s; } .carve-fill.lit { opacity: 1; }
.all-lit .carve-aura { opacity: 0.5; transition: opacity 0.8s; } .all-lit .carve { animation: carveDone 1s ease-in-out; }
@keyframes carveDone { 30% { transform: scale(1.06) rotate(-2deg); } 60% { transform: scale(0.98) rotate(2deg); } }
.pop-grid { position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%); width: min(94%, 420px, 58vh); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; }
.pop-hole { position: relative; aspect-ratio: 1 / 1; touch-action: none; }
.pop-pk { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; z-index: 2; pointer-events: none; }
.pop-fig { position: absolute; left: 14%; right: 14%; bottom: 18%; z-index: 1; transform: translateY(70%) scale(0.6); opacity: 0; transition: transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.15s; pointer-events: none; }
.pop-fig svg { width: 100%; height: auto; }
.pop-hole.up .pop-fig { transform: translateY(-6%) scale(1); opacity: 1; }
.pop-hole.hit .pop-pk { animation: squish 0.25s; }
.pop-hole.gold.up .pop-fig { filter: drop-shadow(0 0 12px #ffd36b); }
.lan-tip { position: absolute; top: 26%; left: 0; right: 0; text-align: center; font: 800 24px var(--head); color: var(--gold); text-shadow: 0 3px 0 #3a1f6b; }
.lan-row { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; gap: 6px; width: min(96%, 440px); justify-content: center; }
.lan { flex: 1; max-width: 84px; border: 0; background: none; padding: 0; margin-top: calc(var(--i) * 0px); animation: sway 3s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s); transform-origin: 50% 0; }
.lan:nth-child(2), .lan:nth-child(4) { margin-top: 30px; } .lan:nth-child(3) { margin-top: 46px; }
@keyframes sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.lan svg { width: 100%; filter: brightness(0.55) saturate(0.6); transition: filter 0.15s; }
.lan.lit svg, .lan.on svg { filter: brightness(1.25) saturate(1.2) drop-shadow(0 0 18px var(--c)) drop-shadow(0 0 30px var(--c)); }
.lan-row.wobble { animation: nope 0.4s; }

/* blind box */
#scr-box { padding: 0; }
.box-rays { position: absolute; left: 50%; top: 46%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; background: repeating-conic-gradient(from 0deg, var(--ray, rgba(255, 236, 170, 0.5)) 0deg 8deg, transparent 8deg 24deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 45%); mask-image: radial-gradient(circle, #000 0, transparent 45%); opacity: 0; pointer-events: none; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.box-top { position: absolute; left: 0; right: 0; top: calc(60px + var(--safe-t)); text-align: center; z-index: 3; padding: 0 12px; }
.box-steps { display: flex; justify-content: center; gap: 8px; }
.box-steps i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: background 0.3s, transform 0.3s; }
.box-steps i.on { background: var(--gold); transform: scale(1.3); } .box-steps i.done { background: #7ee08a; }
.box-series { margin: 8px 0 0; font: 800 13px var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: #f3dcff; opacity: 0.85; }
.box-instr b { display: block; font: 800 clamp(28px, 8vw, 36px)/1.05 var(--head); text-shadow: 0 4px 0 #3a1f6b, 0 0 20px rgba(255, 190, 90, 0.35); }
.box-instr span { display: block; margin-top: 4px; font-size: 14px; opacity: 0.85; }
.box-holder { position: absolute; left: 50%; top: 54%; width: min(70vw, 300px, 40vh); aspect-ratio: 240 / 280; transform: translate(-50%, -50%); touch-action: none; z-index: 2; }
.box-wobble { position: absolute; inset: 0; transform-origin: 50% 90%; will-change: transform; }
.box-svg svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); }
.blindbox .bx-lid, .blindbox .bx-tab { transform-box: fill-box; transform-origin: 50% 100%; }
.foil { position: absolute; left: 3%; right: 3%; top: 12%; bottom: 3%; border-radius: 10px; overflow: hidden; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 30 L40 50 L20 90 L70 110 M60 0 L80 40 L120 50 M70 60 L120 90 M10 120 L40 80' stroke='white' stroke-opacity='0.55' stroke-width='1.5' fill='none'/%3E%3Cpath d='M30 10 L10 40 M90 70 L110 100' stroke='%23a48ad6' stroke-opacity='0.4' fill='none'/%3E%3C/svg%3E"), linear-gradient(125deg, #f4e9ff 0%, #c9b6ff 18%, #ffd6ec 36%, #b8f0ff 54%, #fff1b8 72%, #d8c4ff 100%);
  background-size: 120px 120px, 300% 300%; animation: holo 5s ease-in-out infinite alternate; box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.7); clip-path: inset(0 0 0 var(--peel, 0%)); }
@keyframes holo { to { background-position: 0 0, 100% 100%; } }
.foil::before { content: "✦ ✦ ✦"; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: var(--violet); font: 800 14px var(--head); letter-spacing: 0.2em; white-space: nowrap; }
.foil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.7) 48%, transparent 60%); background-size: 300% 100%; animation: foilShine 2.4s ease-in-out infinite; }
@keyframes foilShine { from { background-position: 120% 0; } to { background-position: -60% 0; } }
.foil-curl { position: absolute; top: 0; bottom: 0; left: var(--peel, 0%); width: 28px; margin-left: -2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), #d8c4ff 40%, rgba(120, 90, 180, 0.5) 70%, transparent); box-shadow: 6px 0 12px rgba(40, 10, 80, 0.35); border-radius: 0 12px 12px 0; opacity: 0; z-index: 2; }
.foil.peeling .foil-curl { opacity: 1; }
.box-fig { position: absolute; left: 10%; right: 10%; top: 0; z-index: 3; opacity: 0; pointer-events: none; }
.box-fig svg { width: 100%; height: auto; filter: drop-shadow(0 0 20px var(--glow, #fff4c8)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.35)); }
.box-fig .f-body { transform-box: fill-box; transform-origin: 50% 100%; animation: figIdle 2.4s ease-in-out infinite; }
.box-fig .blink { transform-box: fill-box; transform-origin: center; transform: scaleY(0); animation: blink 4s infinite; }
.hand-hint { position: absolute; left: 50%; top: 60%; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.25); opacity: 0; pointer-events: none; z-index: 5; }
.hand-hint.tap { animation: hintTap 1.2s ease-in-out infinite; }
.hand-hint.swipe { animation: hintSwipe 1.6s ease-in-out infinite; }
.hand-hint.up { top: 40%; animation: hintUp 1.4s ease-in-out infinite; }
.hand-hint.lid { top: 22%; animation: hintTap 1.2s ease-in-out infinite; }
.hand-hint.shake { animation: hintShake 1.2s ease-in-out infinite; }
@keyframes hintTap { 0%, 100% { opacity: 0; transform: scale(1.3); } 30%, 60% { opacity: 0.8; transform: scale(0.9); } }
@keyframes hintSwipe { 0% { opacity: 0; transform: translateX(-90px); } 20% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { opacity: 0; transform: translateX(90px); } }
@keyframes hintUp { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-90px); } }
@keyframes hintShake { 0%, 100% { opacity: 0; transform: translateX(0); } 20% { opacity: 0.8; transform: translateX(-30px); } 45% { transform: translateX(30px); } 70% { opacity: 0.8; transform: translateX(-20px); } }
.box-hint { position: absolute; z-index: 4; left: 50%; top: calc(54% - min(41vw, 175px, 23vh) - 34px); transform: translate(-50%, 10px) scale(0.8); padding: 10px 16px; max-width: 84%; border-radius: 18px; background: var(--cream); color: var(--ink); font: 800 15px var(--head); text-align: center; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); pointer-events: none; }
.box-hint.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.box-hint::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--cream); border-bottom: 0; }
.box-hint.rare { box-shadow: 0 0 0 3px var(--r-rare), 0 10px 24px rgba(0, 0, 0, 0.35); }
.box-hint.secret, .box-hint.ultra { box-shadow: 0 0 0 3px var(--r-secret), 0 0 30px rgba(255, 211, 107, 0.7); }
.box-tools { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(20px + var(--safe-b)); display: flex; justify-content: center; gap: 10px; }
.box-result { position: absolute; z-index: 6; left: 14px; right: 14px; bottom: calc(14px + var(--safe-b)); padding: 22px 18px 18px; border-radius: 28px; text-align: center; color: var(--ink); background: linear-gradient(180deg, #fffaf2, #ffeedd); box-shadow: 0 0 0 4px var(--rc, var(--gold)), 0 0 0 9px rgba(74, 42, 138, 0.55), 0 24px 50px rgba(0, 0, 0, 0.5); transform: translateY(130%); transition: transform 0.55s cubic-bezier(0.2, 1.25, 0.4, 1); }
.box-result.on { transform: none; }
.rarity-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font: 800 12px var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: var(--rc, var(--r-common)); }
.new-chip { display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 999px; font: 800 12px var(--head); background: var(--pink); color: #fff; animation: bump 0.6s 0.3s; }
.new-chip:empty { display: none; }
.br-name { margin: 8px 0 0; font: 800 28px/1.05 var(--head); color: var(--violet); }
.br-series { margin: 2px 0 0; font-size: 13px; color: #8a6a9a; }
.br-desc { margin: 8px 0 0; font-size: 15px; color: #5a3a6a; }
.br-dupe { margin: 8px 0 0; font-size: 14px; color: #d0701a; }
.br-dupe:empty { display: none; }
.br-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.r-common { --rc: var(--r-common); --ray: rgba(170, 230, 255, 0.45); --glow: #bff3ff; }
.r-rare { --rc: var(--r-rare); --ray: rgba(230, 160, 255, 0.55); --glow: #f0c4ff; }
.r-secret { --rc: var(--r-secret); --ray: rgba(255, 220, 120, 0.7); --glow: #ffe9a0; }
.r-ultra { --rc: var(--r-ultra); --ray: rgba(255, 170, 210, 0.7); --glow: #ffd0e4; }

/* secret overlay */
/* background sits below the particle canvas, text/figure above it: confetti falls between them */
.secret-bg { position: absolute; inset: 0; z-index: 80; background: radial-gradient(circle at 50% 45%, #5a2a9a, #1b0838 70%); opacity: 0; visibility: hidden; overflow: hidden; pointer-events: none; }
.secret-bg.on { visibility: visible; }
.secret-overlay { position: absolute; inset: 0; z-index: 92; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; opacity: 0; visibility: hidden; overflow: hidden; }
.secret-overlay.on { visibility: visible; }
.so-name, .so-sub, .so-tap { text-shadow: 0 2px 8px rgba(20, 6, 40, 0.9), 0 0 2px rgba(20, 6, 40, 0.9); }
.so-rays { position: absolute; left: 50%; top: 45%; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 220, 120, 0.35) 0deg 6deg, transparent 6deg 18deg); animation: spin 18s linear infinite; -webkit-mask-image: radial-gradient(circle, #000 0, transparent 55%); mask-image: radial-gradient(circle, #000 0, transparent 55%); }
.secret-bg.ultra .so-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 170, 210, 0.4) 0deg 6deg, rgba(255, 230, 150, 0.3) 6deg 12deg, transparent 12deg 18deg); }
.so-glow { position: absolute; left: 50%; top: 45%; width: 340px; height: 340px; margin: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 200, 0.95), rgba(255, 210, 100, 0.4) 40%, transparent 70%); }
.so-title { position: relative; margin: 0; font: 800 clamp(38px, 12vw, 58px)/1 var(--head); color: var(--gold); text-shadow: 0 5px 0 #8a4a10, 0 0 40px rgba(255, 210, 100, 0.8); }
.so-title .w { display: inline-block; white-space: nowrap; }
.so-title .ch { display: inline-block; }
.so-fig { position: relative; width: min(62vw, 280px, 38vh); margin: 18px 0 6px; }
.so-fig svg { width: 100%; height: auto; filter: drop-shadow(0 0 30px rgba(255, 230, 150, 0.9)); }
.so-fig .f-body { transform-box: fill-box; transform-origin: 50% 100%; animation: figIdle 2.4s ease-in-out infinite; }
.so-fig .blink { transform-box: fill-box; transform-origin: center; transform: scaleY(0); animation: blink 4s infinite; }
.so-name { position: relative; margin: 0; font: 800 28px var(--head); }
.so-sub { position: relative; margin: 6px 0 0; max-width: 22em; font-size: 15px; opacity: 0.9; }
.so-tap { position: relative; margin-top: 18px; font-size: 12px; opacity: 0.7; letter-spacing: 0.14em; text-transform: uppercase; }

/* shop */
.shop-keeper { position: absolute; left: 0; right: 0; top: calc(108px + var(--safe-t)); display: flex; justify-content: center; pointer-events: none; }
.shop-keeper .actor { width: min(36%, 170px); }
.shop-keeper .speech { position: absolute; top: -6px; left: 50%; margin-left: 46px; max-width: 46%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--cream); color: var(--ink); font: 800 14.5px/1.3 var(--head); /* the keeper is scaled slightly on small phones; keeps the effective size ≥ 14px */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transform-origin: 0 100%; }
.shop-row { position: absolute; left: 0; right: 0; bottom: calc(118px + var(--safe-b)); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 56px max(16px, calc(50% - 115px)) 8px; scrollbar-width: none; }
.shop-row::-webkit-scrollbar { display: none; }
.series-card { position: relative; flex: 0 0 230px; scroll-snap-align: center; padding: 10px 14px 14px; border-radius: 26px; text-align: center; color: var(--ink); background: linear-gradient(180deg, #fffaf2, #ffe9d6); box-shadow: 0 0 0 3px var(--gold), 0 14px 30px rgba(0, 0, 0, 0.4); animation: deal 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: calc(var(--i) * 80ms); }
.series-card .sc-box { width: 112px; margin: -52px auto 0; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.3)); animation: boxIdle 3.2s ease-in-out infinite; }
.series-card .sc-box svg { width: 100%; height: auto; }
@keyframes boxIdle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.series-card h3 { margin: 2px 0 0; font: 800 20px/1.05 var(--head); color: var(--violet); }
.series-card p { margin: 3px 0 8px; font-size: 12.5px; color: #7a5a8a; min-height: 2.6em; }
.sc-prog { height: 8px; border-radius: 6px; background: #eadcf6; overflow: hidden; margin: 0 6px 6px; }
.sc-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); border-radius: 6px; }
.sc-count { font-size: 12px; color: #8a6a9a; margin-bottom: 10px; }
.series-card .btn { width: 100%; padding: 11px 10px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.series-card .btn svg { width: 24px; height: 24px; }
.series-card.locked { filter: saturate(0.4) brightness(0.8); }
.series-card.complete { box-shadow: 0 0 0 3px #7ee08a, 0 14px 30px rgba(0, 0, 0, 0.4); }
.shop-odds { position: absolute; left: 0; right: 0; bottom: calc(96px + var(--safe-b)); margin: 0; text-align: center; font-size: 11.5px; opacity: 0.75; }

/* shelf */
#scr-shelf { padding-bottom: 0; }
.shelf-scroll { position: absolute; left: 0; right: 0; top: calc(124px + var(--safe-t)); bottom: 0; overflow-y: auto; padding: 10px 12px calc(110px + var(--safe-b)); /* v3.1: top 0→10px, the count row + Stickers pill were touching the first shelf */ -webkit-overflow-scrolling: touch; }
.shelf-unit { position: relative; margin: 0 0 22px; padding: 12px 10px 0; border-radius: 22px; background: linear-gradient(180deg, rgba(60, 30, 100, 0.82), rgba(40, 20, 70, 0.88)); box-shadow: inset 0 0 0 2px rgba(255, 211, 107, 0.25), 0 10px 26px rgba(0, 0, 0, 0.35); }
.shelf-unit h3 { margin: 0 4px 2px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 800 19px var(--head); color: var(--gold); }
.shelf-unit h3 small { font: 700 12px var(--body); color: #e8d9ff; white-space: nowrap; }
.shelf-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.plank { grid-column: 1 / -1; height: 14px; margin: 2px -10px 8px; background: linear-gradient(180deg, #a26a40, #6b3f2a); border-radius: 4px; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35); }
.slot { position: relative; border: 0; background: none; padding: 6px 4px 4px; display: flex; flex-direction: column; align-items: center; color: inherit; }
.slot .fig { width: 84%; height: auto; position: relative; }
.slot.owned .fig .f-body { transform-box: fill-box; transform-origin: 50% 100%; animation: figIdle var(--d, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.fig .blink { transform-box: fill-box; transform-origin: center; transform: scaleY(0); }
.slot.owned .fig .blink { animation: blink var(--bd, 5s) infinite; animation-delay: var(--dl, 0s); }
@keyframes figIdle { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-3deg); } 50% { transform: translateY(0) scale(1.03, 0.97); } 75% { transform: translateY(-2px) rotate(3deg); } }
.slot.missing .fig { filter: brightness(0) opacity(0.45) drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)); }
.slot.missing::after { content: "?"; position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); font: 800 26px var(--head); color: rgba(255, 255, 255, 0.6); }
.slot.r-secret.missing::after, .slot.r-ultra.missing::after { content: "✦"; color: rgba(255, 211, 107, 0.8); }
.slot .s-name { font: 800 11px/1.15 var(--head); text-align: center; min-height: 2.3em; opacity: 0.95; }
.slot.missing .s-name { opacity: 0.55; }
.slot .s-x { position: absolute; top: 4px; right: 8px; font: 800 11px var(--head); padding: 1px 6px; border-radius: 999px; background: var(--gold); color: var(--ink); }
.slot.r-rare.owned::before, .slot.r-secret.owned::before, .slot.r-ultra.owned::before { content: ""; position: absolute; left: 15%; right: 15%; top: 8%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 70%); opacity: 0.6; }
.slot.just-added { animation: justAdded 1.2s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes justAdded { 0% { transform: translateY(-60px) scale(1.5); opacity: 0; } 60% { transform: translateY(4px) scale(0.95); opacity: 1; } }
.special-unit { background: linear-gradient(180deg, rgba(120, 60, 40, 0.85), rgba(70, 30, 60, 0.9)); box-shadow: inset 0 0 0 2px rgba(255, 211, 107, 0.6), 0 0 30px rgba(255, 190, 90, 0.25); }
.special-row { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.special-row .slot { flex: 0 0 38%; }
.golden-note { flex: 1; font-size: 13px; line-height: 1.4; }
.golden-note .btn { margin-top: 8px; }

/* golden card pick */
#scr-final { padding: calc(64px + var(--safe-t)) 0 calc(16px + var(--safe-b)); }
#scr-final.active { display: flex; flex-direction: column; justify-content: flex-end; }
.final-box { position: absolute; left: 50%; top: calc(62px + var(--safe-t)); width: 112px; margin-left: -56px; pointer-events: none; }
.final-box .bx-foil, .sc-box .bx-foil { display: none; }
.final-box svg { width: 100%; height: auto; filter: drop-shadow(0 0 30px rgba(255, 211, 107, 0.8)); }
.chooser { position: relative; z-index: 2; text-align: center; }
.chooser-head { padding: 0 16px; }
.chooser-head h2 { margin: 0; font: 800 clamp(26px, 7.5vw, 34px)/1.05 var(--head); color: var(--cream); text-shadow: 0 4px 0 #3a1f6b, 0 0 30px rgba(255, 190, 90, 0.4); }
.chooser-head p { margin: 4px 0 0; font-size: 14px; opacity: 0.9; }
.card-row { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 18px max(18px, calc(50% - 115px)) 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.card-row::-webkit-scrollbar { display: none; }
.card { position: relative; flex: 0 0 min(230px, 66vw); height: min(318px, 44vh); min-height: 230px; scroll-snap-align: center; border: 0; background: transparent; padding: 10px 2px; color: inherit; perspective: 1200px; animation: dealCard 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes dealCard { from { opacity: 0; translate: 0 50px; rotate: -6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.card-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.card.is-center .card-tilt { transform: translateY(-10px) scale(1.05); }
.card-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.2, 0.75, 0.2, 1); }
.card.is-revealed .card-flip { transform: rotateY(180deg); }
.card-back, .card-face { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.card-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff8e6;
  background: radial-gradient(circle at 50% 34%, rgba(255, 240, 190, 0.35), transparent 28%), radial-gradient(circle at 20% 86%, rgba(255, 160, 60, 0.25), transparent 30%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 7px, transparent 7px 16px), linear-gradient(165deg, #8a52d0 0%, #5a2c9a 45%, #2c1858 100%);
  border: 1.5px solid rgba(255, 211, 107, 0.95); box-shadow: 0 16px 32px rgba(10, 0, 30, 0.4), inset 0 0 0 9px rgba(255, 211, 107, 0.25); }
.card.is-center .card-back { box-shadow: 0 20px 44px rgba(10, 0, 30, 0.5), 0 0 0 3px rgba(255, 230, 160, 0.95), 0 0 34px rgba(255, 200, 90, 0.5), inset 0 0 0 9px rgba(255, 211, 107, 0.4); }
.card-back::before, .card-back::after { content: ""; position: absolute; width: 42px; height: 42px; border: 1.5px solid rgba(255, 220, 150, 0.85); pointer-events: none; }
.card-back::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.card-back::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.back-mark { width: 84px; height: 84px; } .back-mark svg { width: 100%; height: 100%; }
.back-seal { font: 700 34px/0.95 var(--script); color: #ffe7a8; text-shadow: 0 2px 10px rgba(40, 0, 60, 0.5); }
.back-caption { font: 800 11px var(--head); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 240, 210, 0.9); }
.card-face { transform: rotateY(180deg); padding: 16px 14px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink); background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.95), transparent 52%), linear-gradient(180deg, #fffdf6, #fff0d8); border: 1.5px solid var(--gold-deep); box-shadow: inset 0 0 0 4px rgba(255, 250, 240, 0.9), inset 0 0 0 5px rgba(224, 163, 44, 0.5); }
.card.is-picked .card-face { box-shadow: 0 0 40px rgba(255, 200, 80, 0.6), inset 0 0 0 4px rgba(255, 248, 220, 0.95), inset 0 0 0 5px var(--gold-deep); }
body.is-revealing .card:not(.is-revealed) { opacity: 0.35; pointer-events: none; transition: opacity 0.4s; }
.mini-seal { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff8f4; background: radial-gradient(circle at 35% 30%, #c79bff, #6a34b0); margin-bottom: 6px; }
.card-icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, #ffe9c4); box-shadow: inset 0 0 0 1px rgba(224, 163, 44, 0.5); margin: 4px 0 8px; }
.card-icon svg { width: 48px; height: 48px; }
.amount { font: 800 46px/0.95 var(--head); color: var(--violet); }
.category { margin-top: 4px; font: 800 12px var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: #9a5a14; }
.blurb { margin: 8px 0 0; font-size: 13.5px; line-height: 1.35; color: #6a4a6a; max-width: 16em; }
.swipe-hint { margin: 2px 0 0; font: 800 12px var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: #e8d9ff; opacity: 0.8; }
#openCard { margin: 10px auto 4px; display: block; }

/* certificate */
#scr-cert.active { display: grid; place-items: center; padding: calc(60px + var(--safe-t)) 14px calc(14px + var(--safe-b)); overflow: hidden; }
.finale-rays { position: absolute; left: 50%; top: 46%; width: min(900px, 160%); aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.45) 0deg 6deg, transparent 6deg 28deg); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 64%); mask-image: radial-gradient(circle, #000 0%, transparent 64%); animation: spin 28s linear infinite; pointer-events: none; }
.certificate { position: relative; z-index: 2; width: min(440px, 100%); max-height: 100%; overflow: auto; text-align: center; padding: 22px 20px 20px; border-radius: 28px; color: var(--ink); background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.8), transparent 42%), linear-gradient(180deg, rgba(255, 252, 244, 0.97), rgba(255, 240, 220, 0.97)); border: 1.5px solid var(--gold-deep); box-shadow: 0 24px 70px rgba(10, 0, 30, 0.5), inset 0 0 0 5px rgba(255, 250, 240, 0.7), inset 0 0 0 6px rgba(224, 163, 44, 0.4); }
#scr-cert.active .certificate { animation: cardIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }
.cert-duo { width: 130px; margin: -6px auto 0; } .cert-duo svg { width: 100%; height: auto; }
.cert-duo .f-body { transform-box: fill-box; transform-origin: 50% 100%; animation: figIdle 2.6s ease-in-out infinite; }
.cert-duo .blink { transform-box: fill-box; transform-origin: center; transform: scaleY(0); animation: blink 4s infinite; }
.returning { margin: 0 0 6px; font: 800 13px var(--head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.cert-kicker { margin: 0; font: 800 clamp(18px, 5vw, 22px) var(--head); color: var(--violet); }
.cert-name { margin: 0; font: 700 clamp(50px, 14vw, 66px)/1 var(--script); color: #c8601a; }
.cert-icon { width: 88px; height: 88px; margin: 6px auto 4px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, #ffe9c4); box-shadow: inset 0 0 0 1px rgba(224, 163, 44, 0.5), 0 10px 24px rgba(190, 120, 40, 0.2); }
.cert-icon svg { width: 56px; height: 56px; }
.cert-cat, .dialog-kicker, .paper-date { margin: 0; font: 800 12px var(--head); letter-spacing: 0.18em; text-transform: uppercase; color: #9a5a14; }
.cert-amount { margin: 0; font: 800 58px/0.95 var(--head); color: var(--violet); }
.yours { margin: 6px 0 0; font: 700 italic 17px var(--body); color: #7a5a8a; }
.cert-msg { margin: 8px auto 0; max-width: 28em; font-size: 15px; line-height: 1.45; color: #5a3a5a; }
.seal { margin-top: 14px; width: 88px; height: 88px; border-radius: 50%; border: 0; color: #fff8f0; font: 700 24px var(--script); background: radial-gradient(circle at 35% 30%, #ffc47a, #e0731c 58%, #a8480c); box-shadow: 0 10px 18px rgba(140, 60, 10, 0.3), inset 0 0 0 4px rgba(255, 255, 255, 0.2), inset 0 -8px 12px rgba(80, 20, 0, 0.2); animation: sealPulse 2s ease-in-out infinite; }
@keyframes sealPulse { 50% { transform: scale(1.06) rotate(-4deg); } }
.seal-hint { margin: 8px 0 10px; font: 800 12px var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: #a07a6a; }
.certificate .btn.ghost { color: var(--violet); box-shadow: inset 0 0 0 1.5px rgba(123, 63, 184, 0.4); background: transparent; }

/* modals */
dialog { border: 0; padding: 10px; background: transparent; max-width: calc(100% - 8px); color: var(--ink); } /* 10px: room for the card's 9px gold/violet ring, which the dialog's scroll box was clipping */
dialog::backdrop { background: rgba(14, 4, 30, 0.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
dialog[open] { animation: modalIn 0.4s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(0.94); } }
.modal-card { width: min(420px, calc(100vw - 28px)); padding: 26px 22px 22px; border-radius: 28px; text-align: center; background: linear-gradient(180deg, #fffaf2, #ffeedd); box-shadow: 0 0 0 4px var(--gold), 0 0 0 9px rgba(74, 42, 138, 0.55), 0 30px 80px rgba(0, 0, 0, 0.5); font-family: var(--body); }
.modal-card h3 { margin: 0 0 12px; font: 800 28px/1.05 var(--head); color: var(--violet); }
#confirm .modal-card h3 { font-size: 34px; }
.dialog-note { margin: 8px 0 16px; font-size: 14px; color: #8a6a7a; }
.modal-card .btn { width: 100%; margin-top: 10px; }
.modal-card .btn.ghost { color: var(--violet); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(123, 63, 184, 0.45); }
.modal-card .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid rgba(123, 63, 184, 0.12); font-weight: 800; text-align: left; }
.modal-card input[type="range"] { width: 52%; accent-color: var(--violet); }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 999px; background: #d9cbe9; position: relative; cursor: pointer; transition: background 0.25s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.25s; }
.switch:checked { background: var(--violet); } .switch:checked::after { transform: translateX(20px); }
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: #eadcf6; }
.seg button { border: 0; padding: 7px 12px; border-radius: 999px; background: transparent; font: 800 13px var(--head); color: var(--ink); }
.seg button.on { background: var(--violet); color: #fff; }
.small-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: #8a6a7a; text-align: left; }
.modal-card details { margin-top: 8px; text-align: left; } .modal-card summary { font-weight: 800; color: var(--violet); cursor: pointer; padding: 6px 0; }
.fig-card { padding-top: 14px; }
.fd-fig { width: 190px; margin: 0 auto; } .fd-fig svg { width: 100%; height: auto; filter: drop-shadow(0 0 16px var(--glow, transparent)); }
.fd-fig .f-body { transform-box: fill-box; transform-origin: 50% 100%; animation: figIdle 2.4s ease-in-out infinite; }
.fd-fig .blink { transform-box: fill-box; transform-origin: center; transform: scaleY(0); animation: blink 4s infinite; }
.fd-fig.missing svg { filter: brightness(0) opacity(0.4); }
.fd-name { margin-top: 8px !important; }
.fd-series { margin: -6px 0 0; font-size: 13px; color: #8a6a9a; }
.fd-desc { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: #5a3a6a; }
.fd-count { margin: 6px 0 0; font-size: 13px; color: #c06a1a; font-weight: 800; }
.paper { width: min(440px, calc(100vw - 28px)); max-height: min(84vh, 760px); overflow: auto; text-align: left; padding: 28px 24px 22px; border-radius: 8px 22px 16px 18px; background: radial-gradient(circle at 100% 0%, rgba(255, 190, 110, 0.3), transparent 28%), radial-gradient(circle at 0% 100%, rgba(199, 155, 255, 0.25), transparent 30%), #fffaf2; font: 600 17px/1.55 var(--body); color: #4e3340; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.paper p { margin: 0 0 12px; }
.paper .dear { font: 700 34px/1.1 var(--script); color: var(--violet); margin-bottom: 8px; }
.paper .sign { font: 700 34px/1.1 var(--script); color: #c8601a; margin: 6px 0 0 !important; }
.paper .ps { font-size: 13px; color: #9a7080; margin-top: 14px !important; }
.paper .btn { width: 100%; margin-top: 8px; }
.paper .btn.ghost { color: var(--violet); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(123, 63, 184, 0.45); }
.photo-frame { margin: 0 0 16px; padding: 8px 8px 26px; background: #fff; box-shadow: 0 8px 20px rgba(80, 30, 50, 0.18); transform: rotate(-1.5deg); }
.photo-frame img { display: block; width: 100%; max-height: 260px; object-fit: cover; }

/* toast & curtain */
.toast { position: absolute; z-index: 95; left: 50%; top: calc(150px + var(--safe-t)); max-width: 86%; padding: 10px 18px; border-radius: 999px; background: rgba(255, 246, 234, 0.97); color: var(--ink); font: 800 14px var(--head); text-align: center; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); transform: translate(-50%, -20px); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
#curtain { position: absolute; inset: 0; z-index: 85; background: radial-gradient(circle at 50% 50%, #3a1f6b, #140828); clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); pointer-events: none; }
#curtain.on { pointer-events: auto; }

/* inbox (Alex only) */
#inbox { display: none; }
html.is-inbox #app, html.is-inbox #backdrop { display: none; }
html.is-inbox body { overflow: auto; background: radial-gradient(circle at 50% 20%, #4a2a8a, #1b1035 70%); }
html.is-inbox #inbox { display: grid; place-items: center; min-height: 100%; padding: 24px 16px; }
.inbox-card { width: min(420px, 100%); text-align: center; padding: 28px 22px; border-radius: 28px; background: linear-gradient(180deg, #fffaf2, #ffeedd); color: var(--ink); box-shadow: 0 0 0 4px var(--gold), 0 30px 70px rgba(0, 0, 0, 0.5); }
.inbox-card .eyebrow { margin: 0; font: 800 12px var(--head); letter-spacing: 0.18em; text-transform: uppercase; color: #9a5a14; }
.inbox-card h1 { margin: 4px 0 10px; font: 800 30px var(--head); color: var(--violet); }
#inboxIcon { width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, #ffe9c4); }
#inboxIcon:empty { display: none; } #inboxIcon svg { width: 56px; height: 56px; }
#inboxAmount { margin: 8px 0 0; font: 800 52px/1 var(--head); color: var(--violet); } #inboxAmount:empty { display: none; }
#inboxCat { margin: 4px 0 0; font: 800 13px var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: #9a5a14; }
#inboxStatus { margin: 12px 0 0; font-size: 15px; color: #5a3a6a; } #inboxWhen { margin: 4px 0 14px; font-size: 13px; color: #8a6a7a; }

/* small heights & motion */
@media (max-height: 720px) {
  .cast { bottom: calc(150px + var(--safe-b)); height: 40%; }
  .dialog { min-height: 120px; font-size: 15.5px; padding: 18px 16px 22px; }
  .card { height: 230px; min-height: 0; } .card-icon { width: 58px; height: 58px; } .amount { font-size: 36px; }
  .title-cast { height: 190px; bottom: calc(140px + var(--safe-b)); }
  .final-box { width: 84px; margin-left: -42px; top: calc(56px + var(--safe-t)); }
  .shop-row { bottom: calc(104px + var(--safe-b)); }
  .shop-keeper .actor { width: min(30%, 130px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.12s !important; }
  .char .blink, .fig .blink, .box-fig .blink, .so-fig .blink { animation: none !important; transform: scaleY(0); }
  .box-rays, .so-rays, .finale-rays { animation: none !important; }
}
html.reduce *, html.reduce *::before, html.reduce *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }

/* landscape phones: ask to rotate (the game is portrait-first) */
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotate { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: radial-gradient(circle at 50% 40%, #4a2a8a, #1b1035 75%); color: var(--cream); text-align: center; padding: 20px; }
  .rot-card p { margin: 14px 0 0; font: 800 18px/1.3 var(--head); max-width: 22em; }
  .rot-phone { width: 46px; height: 76px; margin: 0 auto; border-radius: 10px; border: 4px solid var(--gold); animation: rotPhone 2.4s ease-in-out infinite; }
  @keyframes rotPhone { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0); } }
}
html.is-inbox #rotate { display: none !important; }

/* playtest: bigger touch targets without changing the look (44px+ hit areas) */
.btn.small::before { content: ""; position: absolute; inset: -8px -4px; }
.seg button { min-height: 40px; }
.modal-card input[type="range"] { height: 40px; }

/* ================================================================ v2: longer nights + blind-box delight */
/* story choices */
.choice-row { position: absolute; z-index: 8; left: 14px; right: 14px; bottom: calc(150px + var(--safe-b)); text-align: center; }
.choice-row[hidden] { display: none; }
.choice-kicker { margin: 0 0 8px; font: 800 14px var(--head); color: var(--gold); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); letter-spacing: 0.02em; }
.choice-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.btn.choice { width: min(100%, 380px); padding: 13px 18px; border-radius: 20px; font: 800 16px/1.2 var(--head); color: var(--ink); background: linear-gradient(180deg, #fffaf2, #ffe6cf); box-shadow: 0 0 0 3px var(--gold), 0 5px 0 #b77d2a, 0 10px 22px rgba(0, 0, 0, 0.4); text-align: center; }
.btn.choice:active { transform: translateY(3px); box-shadow: 0 0 0 3px var(--gold), 0 2px 0 #b77d2a; }

/* hidden Boo peeking from the scenery */
.hid-boo { position: absolute; z-index: 3; width: 58px; height: 58px; margin: -29px; padding: 0; border: 0; background: none; opacity: 0.92; }
.hid-boo::before { content: ""; position: absolute; inset: -10px; }
.hid-boo .hb-in { display: block; width: 100%; height: 100%; animation: booPeek 5.5s ease-in-out infinite; transform-origin: 50% 100%; }
.hid-boo.from-left .hb-in { animation-name: booPeekL; }
.hid-boo svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)); }
.hid-boo.found .hb-in { animation: booFound 0.9s ease-in forwards; }
@keyframes booPeek { 0%, 55%, 100% { transform: translate(14px, 6px) rotate(14deg) scale(0.55); opacity: 0.25; } 66%, 86% { transform: translate(0, 0) rotate(-4deg) scale(1); opacity: 1; } 76% { transform: translate(0, -3px) rotate(4deg) scale(1.03); } }
@keyframes booPeekL { 0%, 55%, 100% { transform: translate(-14px, 6px) rotate(-14deg) scale(0.55); opacity: 0.25; } 66%, 86% { transform: translate(0, 0) rotate(4deg) scale(1); opacity: 1; } 76% { transform: translate(0, -3px) rotate(-4deg) scale(1.03); } }
@keyframes booFound { 0% { transform: scale(1); } 30% { transform: scale(1.4) rotate(-10deg); } 100% { transform: translateY(-120px) scale(0.2) rotate(30deg); opacity: 0; } }

/* stars + best on the game result, encore card */
.gr-stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0 2px; font-size: 38px; line-height: 1; }
.gr-stars i { font-style: normal; color: rgba(123, 63, 184, 0.18); transition: color 0.2s; }
.gr-stars i.on { color: var(--gold); text-shadow: 0 0 14px rgba(255, 211, 107, 0.9), 0 3px 0 var(--gold-deep); }
.gr-best { margin: 0 0 6px; min-height: 1.2em; font-size: 13px; color: #8a6a9a; }
.gr-best.new { color: var(--violet); font-weight: 900; }
.game-card.encore { padding-top: 30px; }
.ge-flame { font-size: 54px; line-height: 1; color: var(--gold); text-shadow: 0 0 22px rgba(255, 160, 60, 0.9); animation: flame 1.2s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scale(1) rotate(-6deg); } to { transform: scale(1.15) rotate(6deg); } }
.game-card.encore h2 { margin: 6px 0 4px; font: 800 28px/1.05 var(--head); color: var(--violet); }
.ge-best { margin: 0 0 8px; font-size: 13px; color: #8a6a9a; min-height: 1.2em; }
#btnEncore { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
#btnEncore small { font: 700 12.5px var(--body); opacity: 0.9; }
#btnNoEncore { margin-top: 10px; color: var(--violet); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(123, 63, 184, 0.45); }
.game-stage.hard { box-shadow: inset 0 0 60px rgba(255, 140, 60, 0.35); }

/* tonight's little goals: a 4th nav button with a progress bubble */
.bottom-nav.has-q button { min-width: 70px; padding: 6px 6px; }
.nav-quests[hidden] { display: none; }
.nav-quests .nq-count { position: absolute; top: 2px; right: 6px; min-width: 26px; padding: 1px 5px; border-radius: 999px; font: 800 11px/1.3 var(--head); color: var(--ink); background: var(--gold); box-shadow: 0 0 0 2px #2a1757; }
.nav-quests.all-done .nq-count { background: #7ee08a; }
.nav-quests.bump .ni svg { animation: qpBump 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes qpBump { 40% { transform: scale(1.3) rotate(-8deg); } }
.quest-list { list-style: none; margin: 6px 0 8px; padding: 0; text-align: left; }
.quest-list li { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid rgba(123, 63, 184, 0.12); font-weight: 800; line-height: 1.25; }
.quest-list li:last-child { border-bottom: 0; }
.quest-list .qc { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 2.5px rgba(123, 63, 184, 0.35); }
.quest-list li.done .qc { background: #46b25a; box-shadow: none; }
.quest-list li.done span:last-child { color: #8a7a96; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(70, 178, 90, 0.6); }

/* sticker book */
.stk-btn { pointer-events: auto; margin-left: 8px; padding: 4px 11px; border: 0; border-radius: 999px; font: 800 12.5px var(--head); color: var(--ink); background: var(--gold); box-shadow: 0 3px 0 var(--gold-deep); vertical-align: middle; position: relative; }
.stk-btn::before { content: ""; position: absolute; inset: -10px -4px; }
.sticker-card { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 420px) { .sticker-grid { grid-template-columns: repeat(5, 1fr); } }
.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 8px 0 6px; padding: 12px; border-radius: 18px; background: repeating-linear-gradient(0deg, #fff6ea 0 22px, #f6e6d4 22px 23px); box-shadow: inset 0 0 0 2px rgba(123, 63, 184, 0.12); }
.stk { aspect-ratio: 1; padding: 6px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 4px 8px rgba(43, 22, 64, 0.25); transform: rotate(var(--r, 0deg)); transition: transform 0.2s; }
.stk:active { transform: rotate(var(--r, 0deg)) scale(0.92); }
.stk .stk-ico { display: grid; place-items: center; width: 100%; height: 100%; font-size: 28px; line-height: 1; }
.stk .stk-ico svg { width: 100%; height: 100%; }
.stk.locked { background: rgba(123, 63, 184, 0.08); box-shadow: inset 0 0 0 2px rgba(123, 63, 184, 0.22); border: 2px dashed rgba(123, 63, 184, 0.25); }
.stk.locked .stk-ico { filter: grayscale(1) brightness(0.3) opacity(0.25); }
.stk.got.pop { animation: stkPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes stkPop { 0% { transform: scale(0.3) rotate(-30deg); } }
.sd-hint { min-height: 2.6em; margin: 4px 0 0; font-size: 13.5px; color: #6a4a7a; }

/* decor on the shop + shelf */
.decor-card .sc-box { width: 150px; height: 70px; display: grid; place-items: center; margin-top: -30px; }
.decor-card .sc-box svg { width: 100%; height: 100%; }
.decor-top { position: relative; height: 120px; margin: -8px -4px 6px; pointer-events: none; }
.decor-top > div { position: absolute; }
.dt-bunting { left: 0; right: 0; top: 0; height: 46px; } .dt-bunting svg { width: 100%; height: 100%; }
.dt-lights { left: 0; right: 0; top: 30px; height: 40px; } .dt-lights svg { width: 100%; height: 100%; }
.dt-lights circle { animation: twinkle 1.6s ease-in-out infinite alternate; }
.dt-lights circle:nth-child(odd) { animation-delay: -0.8s; }
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }
.dt-sign { left: 50%; top: 52px; width: 230px; height: 58px; margin-left: -115px; animation: signSway 4s ease-in-out infinite; transform-origin: 50% 0; } .dt-sign svg { width: 100%; height: 100%; overflow: visible; }
@keyframes signSway { 50% { transform: rotate(2deg); } }
.dt-moon { right: 6px; top: 22px; width: 54px; height: 70px; animation: boxIdle 5s ease-in-out infinite; } .dt-moon svg { width: 100%; height: 100%; }
.unit-decor { position: absolute; pointer-events: none; z-index: 2; }
.unit-decor svg { width: 100%; height: 100%; }
.ud-cobweb { right: -2px; top: -2px; width: 64px; height: 64px; transform: scaleX(-1); }
.ud-pumpkins { left: 8px; bottom: -14px; width: 84px; height: 42px; }
.ud-candles { right: 10px; bottom: -12px; width: 80px; height: 40px; }
.ud-candles .flame, .unit-decor [class*="flame"] { animation: flame 0.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.just-added { animation: justAdded 1.2s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes justAdded { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } }
.ud-cobweb.just-added { animation-name: justAddedFlip; }
@keyframes justAddedFlip { 0% { transform: scaleX(-1) scale(0.3); opacity: 0; } 60% { transform: scaleX(-1) scale(1.15); opacity: 1; } }

/* figure details: tap & spin */
.fd-fig { touch-action: pan-y; perspective: 600px; cursor: grab; }
.fd-fig svg { transform-style: preserve-3d; }
.fd-hint { margin: 2px 0 0; font-size: 12.5px; color: #9a7aaa; }
.fd-hint[hidden] { display: none; }

/* series complete celebration */
.series-done { position: absolute; inset: 0; z-index: 92; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: radial-gradient(ellipse at 50% 45%, rgba(122, 72, 120, 0.97), rgba(27, 16, 53, 0.98) 68%); }
.series-done.on { display: flex; }
.sdn-kicker { margin: 0; font: 800 16px var(--head); color: var(--lilac); letter-spacing: 0.06em; text-transform: uppercase; }
.series-done h2 { margin: 0; font: 800 clamp(32px, 9vw, 46px)/1 var(--head); color: var(--gold); text-shadow: 0 4px 0 var(--gold-deep), 0 0 30px rgba(255, 211, 107, 0.7); }
.sdn-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; width: min(92%, 360px); margin: 10px 0; }
.sdn-fig { aspect-ratio: 1; padding: 6px; border-radius: 22px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15); }
.sdn-fig.r-rare { box-shadow: inset 0 0 0 2px var(--r-rare), 0 0 16px rgba(225, 155, 255, 0.5); }
.sdn-fig.r-secret { box-shadow: inset 0 0 0 2px var(--r-secret), 0 0 18px rgba(255, 211, 107, 0.6); }
.sdn-fig svg { width: 100%; height: 100%; }
.sdn-sub { margin: 0; max-width: 340px; font-size: 15px; color: var(--cream); }
.sdn-tap { margin: 8px 0 0; font-size: 13px; opacity: 0.7; animation: nudge 1.4s ease-in-out infinite; }

/* blind box: rarity teases (shimmer for "maybe rare", warm gold leaking for "maybe secret") */
#boxHolder .box-svg { transform-origin: 50% 100%; }
#boxHolder .box-wobble::after { content: ""; position: absolute; inset: 8% 10% 2%; border-radius: 18px; pointer-events: none; opacity: 0; z-index: 3; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, rgba(225, 155, 255, 0.4) 52%, transparent 65%) -150% 0 / 250% 100% no-repeat; mix-blend-mode: screen; }
#boxHolder.tease-rare .box-wobble::after { opacity: 1; animation: boxShimmer 2.2s ease-in-out infinite; }
#boxHolder.tease-secret .box-wobble::after { opacity: 1; animation: boxShimmer 1.6s ease-in-out infinite; background-image: linear-gradient(105deg, transparent 35%, rgba(255, 236, 170, 0.75) 48%, rgba(255, 190, 80, 0.5) 52%, transparent 65%); }
@keyframes boxShimmer { 0% { background-position: 150% 0; } 60%, 100% { background-position: -150% 0; } }
#boxHolder.tease-secret .box-svg svg { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px rgba(255, 200, 90, 0.55)); animation: secretPulse 1.4s ease-in-out infinite alternate; }
@keyframes secretPulse { to { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 30px rgba(255, 200, 90, 0.9)); } }
#boxHolder.leak .box-wobble::before { content: ""; position: absolute; z-index: 4; left: 12%; right: 12%; top: 28.5%; height: 16px; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, var(--leak, #fff) 0%, transparent 70%); filter: blur(4px); animation: leakPulse 0.9s ease-in-out infinite alternate; }
#boxHolder.tease-rare.leak { --leak: rgba(225, 155, 255, 0.95); }
#boxHolder.tease-secret.leak { --leak: rgba(255, 215, 110, 1); }
#boxHolder.tremble.leak .box-wobble::before { animation-duration: 0.25s; height: 26px; }
@keyframes leakPulse { from { opacity: 0.45; transform: scaleX(0.85); } to { opacity: 1; transform: scaleX(1.05); } }
.reduce #boxHolder .box-wobble::after, .reduce #boxHolder .box-wobble::before { animation: none !important; }

/* result card as a collectible card */
.box-result::before { content: ""; position: absolute; inset: 8px; border-radius: 22px; pointer-events: none; border: 1.5px dashed rgba(123, 63, 184, 0.22); }
.box-result.r-rare, .box-result.r-secret, .box-result.r-ultra { background: linear-gradient(115deg, #fffaf2 30%, #fff0fb 45%, #fff9e4 55%, #ffeedd 70%); background-size: 300% 100%; animation: holo 3.5s linear infinite; }
@keyframes holo { from { background-position: 0% 0; } to { background-position: 300% 0; } }

/* ================================================================ v3: Halloween parade (night-7 finale) */
#scr-parade { overflow: hidden; }
.pr-top { position: absolute; z-index: 4; left: 0; right: 0; top: calc(60px + var(--safe-t)); text-align: center; pointer-events: none; }
.pr-top h2 { margin: 0; font: 800 clamp(26px, 7.4vw, 36px)/1 var(--head); color: var(--gold); text-shadow: 0 3px 0 var(--gold-deep), 0 0 24px rgba(255, 190, 90, 0.5); }
.pr-count { margin: 6px 0 0; font: 800 14px var(--head); color: var(--cream); opacity: 0.9; }
.pr-banner { position: absolute; z-index: 6; left: 0; right: 0; top: 32%; width: min(86%, 380px); margin: 0 auto; padding: 12px 18px; border-radius: 20px; text-align: center; font: 800 17px/1.25 var(--head); color: var(--ink); background: var(--cream); box-shadow: 0 0 0 3px var(--gold), 0 12px 26px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.pr-banner.on { opacity: 1; }
.pr-stage { position: absolute; z-index: 3; left: 0; right: 0; top: 34%; bottom: calc(96px + var(--safe-b)); touch-action: manipulation; cursor: pointer; outline: none; }
.pr-spot { position: absolute; left: 50%; bottom: 4%; width: min(46vw, 200px); height: min(64%, 330px); transform: translateX(-50%); border-radius: 50% 50% 46% 46% / 30% 30% 12% 12%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 236, 170, 0.6), rgba(255, 220, 140, 0.18) 55%, transparent 72%); animation: spotPulse 1.6s ease-in-out infinite alternate; }
.pr-spot::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -6px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 240, 190, 0.9), transparent 70%); }
@keyframes spotPulse { to { opacity: 0.75; } }
.pr-lane { position: absolute; inset: 0; pointer-events: none; }
.pr-fig { position: absolute; left: 0; bottom: 6%; width: min(30vw, 132px); text-align: center; will-change: transform; }
.pr-fig .pr-bob { transform-origin: 50% 100%; }
.pr-fig .pr-spin { perspective: 500px; transform-origin: 50% 100%; }
.pr-fig svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4)); }
.pr-fig.r-rare svg { filter: drop-shadow(0 0 10px rgba(225, 155, 255, 0.7)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4)); }
.pr-fig.shine svg { filter: drop-shadow(0 0 16px rgba(255, 211, 107, 0.9)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4)); }
.pr-name { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font: 800 12px/1.2 var(--head); color: var(--ink); background: rgba(255, 246, 234, 0.92); white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.3s; }
.pr-fig.cheered .pr-name { opacity: 1; }
.pr-fig.cheered::before { content: "♥"; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-size: 22px; color: var(--pink); text-shadow: 0 0 10px rgba(255, 143, 177, 0.8); animation: heartUp 1s ease-out forwards; }
@keyframes heartUp { from { opacity: 1; transform: translate(-50%, 0) scale(0.6); } to { opacity: 0; transform: translate(-50%, -50px) scale(1.4); } }
.pr-fig.wave .pr-bob { animation: prWave 0.6s ease-in-out 2; }
@keyframes prWave { 50% { transform: rotate(-10deg); } }
.pr-hint { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: calc(66px + var(--safe-b)); margin: 0 auto; max-width: 360px; padding: 8px 14px; border-radius: 14px; text-align: center; font: 800 16px/1.3 var(--head); color: var(--cream); background: rgba(27, 16, 53, 0.72); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); pointer-events: none; transition: opacity 0.5s; animation: none; transform: none; }
.pr-hint.gone { opacity: 0; }
.pr-judge { position: absolute; z-index: 5; left: 0; right: 0; top: 27%; text-align: center; font: 800 clamp(34px, 10vw, 48px)/1 var(--head); color: #fff; text-shadow: 0 4px 0 var(--violet), 0 0 24px rgba(255, 255, 255, 0.6); pointer-events: none; opacity: 0; white-space: nowrap; }
.pr-judge.on { opacity: 1; }
.pr-judge.perfect { color: var(--gold); text-shadow: 0 4px 0 var(--gold-deep), 0 0 30px rgba(255, 211, 107, 0.9); }
.pr-skip { position: absolute; z-index: 7; right: 12px; bottom: calc(14px + var(--safe-b)); color: var(--cream); background: rgba(30, 14, 60, 0.6); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }
.pr-end { position: absolute; inset: 0; z-index: 8; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: calc(70px + var(--safe-t)) 18px calc(20px + var(--safe-b)); text-align: center; background: radial-gradient(ellipse at 50% 40%, #5e3380, #1b1035 72%); }
.pr-end.on { display: flex; }
.pr-end h2 { margin: 0; font: 800 clamp(34px, 10vw, 50px)/1 var(--head); color: var(--gold); text-shadow: 0 4px 0 var(--gold-deep), 0 0 30px rgba(255, 211, 107, 0.7); }
.pr-group { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 2px 4px; width: min(94%, 400px); max-height: 46vh; }
.pg-fig { aspect-ratio: 1; min-width: 0; }
.pg-fig svg { width: 100%; height: 100%; display: block; }
.pr-end-sub { margin: 4px 0 6px; max-width: 340px; font-size: 15px; color: var(--cream); }
.pr-end .btn { min-width: 240px; }
@media (max-height: 680px) { .pr-top { top: calc(54px + var(--safe-t)); } .pr-stage { top: 30%; } .pr-group { max-height: 40vh; } }

/* ================================================================ golden pick: 9 cards in a 3x3 grid (v3) */
.card-row.is-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; overflow: visible; padding: 14px 0 8px; margin: 0 auto; scroll-snap-type: none;
  width: min(calc(100vw - 24px), 400px, calc((100dvh - 330px) * 0.72)); }
.is-grid .card { flex: none; width: 100%; height: auto; min-height: 0; aspect-ratio: 0.72; padding: 0; container-type: inline-size; scroll-snap-align: none; }
.is-grid .card-back, .is-grid .card-face { border-radius: 14px; }
.is-grid .card-back { gap: 3px; box-shadow: 0 10px 20px rgba(10, 0, 30, 0.4), inset 0 0 0 5px rgba(255, 211, 107, 0.25); }
.is-grid .card-back::before, .is-grid .card-back::after { width: 18px; height: 18px; }
.is-grid .card-back::before { top: 7px; left: 7px; border-radius: 7px 0 0 0; } .is-grid .card-back::after { right: 7px; bottom: 7px; border-radius: 0 0 7px 0; }
.is-grid .back-mark { width: 44cqw; height: 44cqw; }
.is-grid .back-seal { font-size: 19cqw; }
.is-grid .back-caption { display: none; }
.is-grid .card.is-center .card-tilt { transform: translateY(-6px) scale(1.06); }
.is-grid .card-face { padding: 7cqw 6cqw; }
.is-grid .mini-seal { width: 14cqw; height: 14cqw; font-size: 7cqw; margin-bottom: 2cqw; }
.is-grid .card-icon { width: 38cqw; height: 38cqw; margin: 1cqw 0 3cqw; } .is-grid .card-icon svg { width: 26cqw; height: 26cqw; }
.is-grid .amount { font-size: 21cqw; white-space: nowrap; }
.is-grid .vnd { font-size: 8.4cqw; margin-top: 1.5cqw; }
.is-grid .category { font-size: 6.6cqw; letter-spacing: 0.08em; margin-top: 2.5cqw; line-height: 1.2; }
.is-grid .blurb { font-size: 7.6cqw; margin-top: 3cqw; line-height: 1.3; }
.vnd { display: block; font: 700 13px/1.1 var(--body); color: #9a7a9a; letter-spacing: 0.01em; }
.cert-vnd { margin: 4px 0 0; font: 700 17px var(--body); color: #9a7a9a; }
#inboxVnd { margin: 4px 0 0; font: 700 16px var(--body); color: #9a7a9a; } #inboxVnd:empty { display: none; }
#scr-final .swipe-hint { margin-top: 4px; }
@media (max-height: 720px) {
  #scr-final .final-box { display: none; }
  .card-row.is-grid { width: min(calc(100vw - 24px), 400px, calc((100dvh - 236px) * 0.72)); }
  #scr-final .chooser-head p { font-size: 14px; line-height: 1.3; }
}

/* parade: the cheered friend's name shows in a fixed caption instead of walking off with the figure */
.pr-name { display: none; }
.pr-caption { position: absolute; z-index: 5; left: 16px; right: 16px; top: calc(27% + 56px); margin: 0 auto; max-width: 340px; text-align: center; font: 800 18px/1.25 var(--head); color: var(--ink); pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.pr-caption span { display: inline-block; padding: 5px 14px; border-radius: 999px; background: rgba(255, 246, 234, 0.95); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.pr-caption.on { opacity: 1; }
.pr-count { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(27, 16, 53, 0.62); font-size: 15px; opacity: 1; }
@media (max-height: 720px) { .pr-stage { bottom: calc(128px + var(--safe-b)); } }

/* ================================================================ legibility pass (21 Oct, 13:10): still text, ≥14px body, contrast */
.caul-tip { animation: none; }                                   /* the game tip no longer bobs */
.sdn-tap { animation: none; font-size: 14px; opacity: 0.9; }
.seal { animation: sealPulse 2s ease-in-out 2; text-shadow: 0 1px 3px rgba(90, 30, 0, 0.75); }   /* pulses twice, then sits still */
.seal-hint { font-size: 13px; color: #7a5646; }
.dt-sign { animation-iteration-count: 2; }                      /* her name sign sways twice, then settles */
.title-hint { font-size: 14px; opacity: 0.9; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.map-node .mn-state { font-size: 12px; padding: 2px 7px; }
.series-card p { font-size: 14px; line-height: 1.3; color: #6a4a7a; }
.sc-count { font-size: 13px; color: #6e4f7e; }
.shop-odds { font-size: 13px; opacity: 1; color: var(--cream); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.slot .s-name { font-size: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.small-note { font-size: 14px; color: #6e5262; }
.dialog-note { color: #6e5262; }
.paper .ps { font-size: 14px; color: #7a5664; }
.gr-best, .ge-best { font-size: 14px; color: #6e4f7e; }
.vnd { color: #7d5f7f; } .cert-vnd { color: #7d5f7f; } #inboxVnd { color: #7d5f7f; }
#btnCertShelf { font-size: 14px; }
.choice-kicker { font-size: 15px; }
.seal { background: radial-gradient(circle at 35% 30%, #f5a65a, #d0640f 58%, #9a400a); }
.shop-odds { font-size: 14px; }
.title-kicker { font-size: 14px; letter-spacing: 0.12em; }
.cert-cat { font-size: 13px; letter-spacing: 0.12em; }
.shop-odds { padding: 0 18px; line-height: 1.25; }
@media (max-height: 720px) { .shop-row { bottom: calc(132px + var(--safe-b)); padding-bottom: 4px; } }
@media (min-height: 721px) { .shop-row { bottom: calc(126px + var(--safe-b)); } }
/* once the figure is revealed, the ritual header fades out instead of peeking from behind the figure */
#scr-box .box-top { transition: opacity 0.4s; }
#scr-box:has(#boxResult.on) .box-series, #scr-box:has(#boxResult.on) .box-instr { opacity: 0; }
/* map: the title gets a soft dark band so houses scrolling underneath never sit behind the letters */
#scr-map .screen-head { pointer-events: none; }
#scr-map .map-scroll { z-index: 1; } /* keep the houses' badges under the title band (they used to draw on top of it) */
#scr-map .screen-head h2 { text-shadow: 0 3px 0 #3a1f6b, 0 2px 12px rgba(0, 0, 0, 0.7); }
#scr-map .screen-head { background: linear-gradient(180deg, rgba(27, 16, 53, 0.95) 0%, rgba(27, 16, 53, 0.9) 62%, rgba(27, 16, 53, 0)); }
/* reveal: one soft shine sweep across the figure once it has landed */
.box-fig { position: absolute; }
.box-fig .fig-shine { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 30%; -webkit-mask: radial-gradient(closest-side, #000 70%, transparent); mask: radial-gradient(closest-side, #000 70%, transparent); }
.box-fig .fig-shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-18deg); opacity: 0; }
.box-fig .fig-shine.go::before { animation: figShine 0.9s ease-out 1 forwards; }
@keyframes figShine { 0% { left: -50%; opacity: 0; } 15% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
.reduce .box-fig .fig-shine { display: none; }
.box-fig .keychain, .so-fig .keychain { width: 100%; height: auto; }
/* shelf: keychain hook */
.key-unit .key-rail { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 2px; padding: 14px 6px 4px; }
.key-unit .key-bar { position: absolute; left: 6px; right: 6px; top: 10px; height: 8px; border-radius: 4px; background: linear-gradient(#b98a5c, #7a4a2e); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.key-unit .key-slot { position: relative; width: 70px; min-height: 92px; padding: 0; border: 0; background: none; cursor: pointer; }
.key-unit .key-slot svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 6px rgba(20, 10, 34, 0.35)); }
.key-unit .key-cap { margin: 6px 12px 2px; text-align: center; font-size: 14px; line-height: 1.35; color: var(--cream, #fff4dc); min-height: 2.7em; }

/* ================================================================ v3: focused story choices */
/* the toast on the story screen lives in a band under Skip, left of it, so it never sits on the window or a face */
html.on-story .toast { top: calc(96px + var(--safe-t)); max-width: calc(100% - 28px); font-size: 13.5px; line-height: 1.3; padding: 8px 14px; }
.cast { transform-origin: 50% 100%; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.choice-dim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(ellipse 62% 30% at 50% var(--cp-y, 60%), rgba(255, 214, 140, 0.16), rgba(14, 6, 30, 0.2) 45%, rgba(14, 6, 30, 0.62) 100%); }
#scr-story.choosing .choice-dim { opacity: 1; }
#scr-story.choosing .hid-boo { opacity: 0; pointer-events: none; }
#scr-story.choosing .choice-btns { flex-direction: row; align-items: stretch; justify-content: center; gap: 10px; }
#scr-story.choosing .btn.choice { flex: 1 1 0; width: auto; max-width: 220px; padding: 11px 10px; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.choice-props { position: absolute; z-index: 7; left: 14px; right: 14px; display: flex; justify-content: space-evenly; align-items: flex-end; pointer-events: none; }
.choice-props[hidden] { display: none; }
.choice-props::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -4px; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 226, 160, 0.38), rgba(255, 226, 160, 0)); }
.cp-item { position: relative; height: 100%; flex: 0 1 46%; max-width: 220px; display: flex; justify-content: center; align-items: flex-end; pointer-events: auto; cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.3s, filter 0.3s; }
.choice-props.single .cp-item { flex-basis: 60%; cursor: default; }
.cp-art { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.cp-art svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.cp-item.hot { transform: translateY(-6px) scale(1.07); filter: drop-shadow(0 0 14px rgba(255, 220, 140, 0.75)); }
.cp-item.cold { opacity: 0.55; transform: scale(0.93); filter: saturate(0.7); }
.cp-item.won { filter: drop-shadow(0 0 22px rgba(255, 226, 160, 0.95)); }
/* idle life: glow flicker, shimmer sweep, steam, twinkling */
.cp-pumpkin .cp-glow { animation: cpFlicker 2.6s ease-in-out infinite; transform-origin: 50% 60%; }
.cp-pumpkin .cp-face { animation: cpFace 2.6s ease-in-out infinite; }
.cp-pumpkin.hot .cp-lid, .cp-pumpkin.won .cp-lid { transform: translateY(-8px) rotate(-5deg); }
.cp-lid { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); transform-box: fill-box; transform-origin: 30% 100%; }
.cp-secret .cp-shimmer { animation: cpShimmer 3.2s ease-in-out infinite; }
.cp-secret .cp-seal { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.6s; }
.cp-secret.hot .cp-seal, .cp-secret.won .cp-seal { transform: rotate(360deg) scale(1.12); }
.cp-steam path { animation: cpSteam 2.8s ease-in-out infinite; }
.cp-steam path:nth-child(2) { animation-delay: -1.4s; }
.cp-dust { animation: cpTwinkle 1.8s ease-in-out infinite; }
.cp-dip { transform-box: fill-box; transform-origin: 80% 10%; }
.cp-honey.hot .cp-dip, .cp-honey.won .cp-dip { animation: cpDip 0.9s ease-in-out infinite; }
@keyframes cpFlicker { 0%, 100% { opacity: 0.85; transform: scale(1); } 40% { opacity: 1; transform: scale(1.04); } 55% { opacity: 0.7; } 70% { opacity: 0.95; } }
@keyframes cpFace { 0%, 100% { opacity: 1; } 55% { opacity: 0.82; } }
@keyframes cpShimmer { 0%, 30% { transform: translateX(0); } 70%, 100% { transform: translateX(220px); } }
@keyframes cpSteam { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: 0.75; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes cpTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes cpDip { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) {
  .cast { transition: none; }
  .cp-item, .cp-lid, .cp-seal { transition: none; }
  .cp-pumpkin .cp-glow, .cp-pumpkin .cp-face, .cp-secret .cp-shimmer, .cp-steam path, .cp-dust, .cp-honey.hot .cp-dip, .cp-honey.won .cp-dip { animation: none; }
}
.cp-item::before { content: ""; position: absolute; left: -6%; right: -6%; top: 8%; bottom: -4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 205, 0.34), rgba(255, 240, 205, 0)); pointer-events: none; }

/* series 5 complete: star lanterns drift up behind the figures */
.sdn-lanterns { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#seriesDone > *:not(.sdn-extra) { position: relative; z-index: 1; }
.sdn-lan { position: absolute; bottom: -90px; width: calc(54px * var(--s, 1)); animation: sdnRise 7s linear var(--d, 0s) infinite; opacity: 0.9; filter: drop-shadow(0 0 10px rgba(255, 190, 90, 0.6)); }
.sdn-lan svg { width: 100%; height: auto; display: block; animation: sdnSway 2.4s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes sdnRise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.9; } 85% { opacity: 0.85; } 100% { transform: translateY(-115vh); opacity: 0; } }
@keyframes sdnSway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .sdn-lan, .sdn-lan svg { animation: none; } }
html.reduce .sdn-lan, html.reduce .sdn-lan svg { animation: none !important; }

/* keychain close-up (#keyDialog): same card as the figure details, the keychain hangs big and swings */
.kd-art { display: block; width: min(200px, 52vw); margin: 0 auto 22px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kd-art svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 0 16px var(--glow, transparent)) drop-shadow(0 10px 12px rgba(40, 10, 60, 0.3)); }
.key-card .rarity-chip { font-size: 14px; }
.key-card .fd-series { margin-top: -4px; font-size: 14px; }
.key-card .kd-hint { margin-top: 8px; font-size: 14px; }
.key-card .btn { margin-top: 16px; }
@media (max-height: 700px) { .kd-art { width: min(160px, 44vw); } }