:root {
    --ink: #1c2027;
    --paper: #fff8ef;
    --berry: #b8335e;
    --leaf: #6d8573;
    --ready-scale: 1;
    --not-ready-scale: 1;
    --not-ready-opacity: 1;
    --room-left: 0px;
    --room-top: 0px;
    --room-width: 100vw;
    --room-height: 100vh;
    --room-dim: 0;
    --room-blur: 0px;
    --room-dim-color: 0, 0, 0;
    --from-x: 0px;
    --from-y: 0px;
    --cake-wish-dim: 0.68;
    --hotspot-bubble-max-opacity: 0.32;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
    overflow: hidden;
    overflow-x: hidden;
}

button {
    font: inherit;
}

button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.88);
    outline-offset: 4px;
}

.birthday-app {
    min-height: 100vh;
    min-height: 100svh;
    background: #040404;
}

.app-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.scene {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    min-height: 100svh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 700ms ease,
        visibility 0s linear 700ms;
}

.scene.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 700ms ease,
        visibility 0s linear 0s;
}

.room-scene.entrance-fade {
    transition:
        opacity 1000ms ease,
        visibility 0s linear 0s;
}

.intro-scene {
    display: grid;
    place-items: center;
    padding: clamp(24px, 6vw, 76px);
    overflow: hidden;
    color: #f5ead8;
    background:
        radial-gradient(circle at 50% 44%, rgba(75, 55, 38, 0.06), rgba(13, 11, 10, 0.03) 45%, rgba(3, 4, 5, 1) 80%),
        linear-gradient(180deg, #030405 0%, #050507 48%, #070504 100%);
    isolation: isolate;
}

.intro-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(115, 78, 45, 0.16), rgba(30, 22, 17, 0.06) 42%, transparent 78%),
        linear-gradient(180deg, rgba(255, 244, 220, 0), rgba(172, 121, 71, 0.05));
    opacity: 0;
    animation: intro-warm-night 1.3s ease 1.5s forwards;
}

.intro-sky-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0;
    animation: intro-sky-in 1.1s ease 0.5s forwards;
}

.intro-night-glow,
.intro-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.intro-night-glow {
    z-index: 2;
    background:
        radial-gradient(circle at 50% 48%, rgba(156, 106, 62, 0.12), transparent 38%),
        radial-gradient(circle at 52% 82%, rgba(216, 165, 95, 0.06), transparent 42%);
    filter: blur(4px);
    opacity: 0;
    animation: intro-glow-rise 1.4s ease 1.65s forwards;
}

.intro-vignette {
    z-index: 3;
    background:
        radial-gradient(ellipse at 50% 44%, transparent 0 40%, rgba(0, 0, 0, 0.12) 72%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 25%, rgba(0, 0, 0, 0.48));
}

.cover-watermark {
    position: absolute;
    top: clamp(22px, 6vh, 58px);
    left: 50%;
    z-index: -1;
    color: rgba(92, 69, 48, 0.055);
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: clamp(100px, 32vw, 180px);
    font-weight: 500;
    line-height: 0.9;
    transform: translateX(-50%) rotate(-4deg);
    animation: cover-watermark-breathe 8s ease-in-out infinite;
}

.cover-building {
    position: absolute;
    top: clamp(34px, 8vh, 74px);
    left: 50%;
    z-index: -1;
    width: min(94vw, 560px);
    height: clamp(150px, 30vh, 270px);
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(247, 240, 231, 0), rgba(247, 240, 231, 0.18)),
        url("assets/image/Building.webp") center 18% / cover no-repeat;
    filter:
        sepia(0.48)
        saturate(0.52)
        hue-rotate(342deg)
        contrast(0.78)
        brightness(0.92)
        blur(1.2px);
    mix-blend-mode: multiply;
    opacity: 0.072;
    transform: translateX(-50%) rotate(-1.2deg);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.72) 54%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.72) 54%, transparent 100%);
}

.cover-building::after {
    content: "";
    position: absolute;
    inset: -6%;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(92, 69, 48, 0.28), transparent 58%),
        linear-gradient(90deg, transparent, rgba(247, 240, 231, 0.46), transparent);
    opacity: 0.16;
}

.cover-paper-stack {
    position: absolute;
    top: clamp(48px, 10vh, 88px);
    left: 50%;
    z-index: -1;
    width: min(70vw, 360px);
    height: min(32vh, 260px);
    transform: translateX(-50%);
    pointer-events: none;
}

.paper-sheet {
    position: absolute;
    inset: 4% 8%;
    border: 1px solid rgba(82, 62, 43, 0.1);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 252, 246, 0.2), rgba(218, 198, 169, 0.08)),
        rgba(248, 239, 226, 0.12);
    box-shadow:
        0 12px 28px rgba(62, 43, 28, 0.045),
        inset 0 0 18px rgba(255, 255, 255, 0.1);
}

.sheet-one {
    transform: rotate(-6deg);
}

.sheet-two {
    inset: 8% 12% 0 4%;
    opacity: 0.72;
    transform: rotate(5deg);
}

.sheet-three {
    inset: 0 2% 9% 16%;
    opacity: 0.44;
    transform: rotate(-1.5deg);
}

.cover-motifs {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.cover-motif {
    position: absolute;
    display: block;
    color: rgba(78, 57, 38, 0.08);
    opacity: 0.82;
}

.motif-star {
    top: 24%;
    right: 19%;
    width: clamp(18px, 6vw, 34px);
    height: clamp(18px, 6vw, 34px);
    transform: rotate(14deg);
}

.motif-star::before,
.motif-star::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(78, 57, 38, 0.08);
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.motif-star::before {
    width: 1px;
    height: 100%;
}

.motif-star::after {
    width: 100%;
    height: 1px;
}

.motif-branch {
    top: 18%;
    left: 18%;
    width: 70px;
    height: 118px;
    border-left: 1px solid rgba(78, 57, 38, 0.075);
    border-radius: 50%;
    transform: rotate(-20deg);
}

.motif-branch::before,
.motif-branch::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 18px;
    border-top: 1px solid rgba(78, 57, 38, 0.08);
    border-radius: 50%;
}

.motif-branch::before {
    left: 7px;
    top: 34px;
    transform: rotate(-24deg);
}

.motif-branch::after {
    left: 15px;
    top: 62px;
    transform: rotate(18deg);
}

.motif-book {
    right: 20%;
    top: 10%;
    width: 54px;
    height: 36px;
    border: 1px solid rgba(78, 57, 38, 0.075);
    border-radius: 4px 8px 8px 4px;
    transform: rotate(8deg);
}

.motif-book::before {
    content: "";
    position: absolute;
    left: 47%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(78, 57, 38, 0.055);
}

.comic-panel {
    position: absolute;
    z-index: -1;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
}

.panel-one {
    top: 8%;
    left: 7%;
    width: min(42vw, 430px);
    height: min(45vh, 380px);
}

.panel-two {
    right: 6%;
    bottom: 9%;
    width: min(34vw, 360px);
    height: min(30vh, 260px);
    transform: rotate(5deg);
}

.ink-wash {
    position: absolute;
    inset: auto auto 6% 9%;
    z-index: -1;
    width: min(42vw, 420px);
    aspect-ratio: 1.2;
    border-radius: 49% 51% 45% 55%;
    background:
        radial-gradient(circle at 42% 38%, rgba(92, 69, 48, 0.08), transparent 38%),
        radial-gradient(circle at 56% 54%, rgba(92, 69, 48, 0.05), transparent 48%);
    filter: blur(8px);
    opacity: 0.38;
}

.question-bubble {
    position: relative;
    z-index: 4;
    width: min(88vw, 520px);
    max-width: calc(100vw - 28px);
    padding: clamp(26px, 5vw, 42px);
    margin: clamp(108px, 22vh, 190px) 0 0;
    border: 1px solid rgba(247, 231, 208, 0.1);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(34, 27, 23, 0.72), rgba(17, 15, 14, 0.64)),
        rgba(22, 18, 15, 0.56);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(10px);
    animation: intro-card-in 820ms ease 1.88s forwards;
}

.question-bubble::before {
    content: "";
    position: absolute;
    inset: -44px -30px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 54%, rgba(123, 87, 55, 0.08), transparent 70%);
    filter: blur(62px);
    pointer-events: none;
}

.small-title {
    margin: 0 0 10px;
    color: rgba(226, 213, 194, 0.48);
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(5px);
    animation: intro-kicker-in 520ms ease 1.9s forwards;
}

.question-bubble h1 {
    margin: 0;
    color: rgba(255, 246, 229, 0.95);
    font-size: clamp(34px, 9.4vw, 48px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0;
    text-shadow: 0 0 20px rgba(255, 221, 170, 0.1);
    opacity: 0;
    filter: blur(3px);
    transform: translateY(8px);
    animation: intro-heading-in 760ms cubic-bezier(0.2, 0.8, 0.25, 1) 2.2s forwards;
}

.intro-subcopy {
    max-width: 18em;
    margin: 14px 0 0;
    color: rgba(240, 228, 208, 0.68);
    font-size: clamp(16px, 4vw, 19px);
    font-weight: 400;
    line-height: 1.68;
    letter-spacing: 0;
    opacity: 0;
    filter: blur(3px);
    transform: translateY(8px);
    animation: intro-subcopy-in 720ms ease 2.6s forwards;
}

.choice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    min-height: 58px;
    margin-top: 30px;
    opacity: 0;
    transform: translateY(8px);
    animation: intro-buttons-in 620ms ease 3.1s forwards;
}

.choice-button {
    position: relative;
    display: grid;
    min-width: 0;
    width: calc(100% / 1.14);
    height: 56px;
    min-height: 56px;
    max-width: 100%;
    place-items: center;
    border: 1px solid rgba(255, 245, 225, 0.16);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0;
    transform-origin: center;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 120ms ease,
        opacity 260ms ease,
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.choice-button:disabled {
    cursor: default;
}

.primary-choice {
    justify-self: center;
    color: #201b17;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.36), transparent 52%),
        rgba(238, 224, 198, 0.94);
    border-color: rgba(255, 242, 216, 0.62);
    box-shadow:
        0 6px 22px rgba(213, 179, 125, 0.1),
        0 10px 26px rgba(0, 0, 0, 0.18);
    transform: scale(var(--ready-scale));
    overflow: hidden;
}

.primary-choice:hover,
.primary-choice:disabled {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.38), transparent 52%),
        rgba(241, 228, 203, 0.95);
}

.primary-choice:active {
    transform: scale(calc(var(--ready-scale) * 0.985));
}

.primary-choice.opening {
    box-shadow:
        0 0 30px rgba(248, 219, 165, 0.26),
        0 12px 30px rgba(0, 0, 0, 0.18);
    animation: gift-open-pulse 220ms ease-out;
}

.shy-choice {
    justify-self: center;
    color: rgba(245, 234, 216, 0.78);
    background: rgba(30, 26, 23, 0.2);
    border-color: rgba(238, 224, 198, 0.28);
    opacity: var(--not-ready-opacity);
    transform: scale(var(--not-ready-scale));
}

.shy-choice:hover {
    background: rgba(255, 245, 225, 0.07);
    border-color: rgba(255, 245, 225, 0.32);
}

.shy-choice:active {
    transform: scale(calc(var(--not-ready-scale) * 0.985));
}

.choice-label,
.button-star-field {
    position: relative;
    z-index: 1;
}

.button-star-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.gift-nudge-star {
    position: absolute;
    left: var(--star-x);
    top: var(--star-y);
    width: var(--star-size);
    height: var(--star-size);
    border-radius: 50%;
    background: rgba(255, 246, 220, var(--star-alpha));
    box-shadow: 0 0 8px rgba(248, 218, 160, 0.32);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: gift-nudge-star 900ms ease-out forwards;
}

.intro-scene.leaving .intro-sky-canvas,
.intro-scene.leaving .intro-night-glow,
.intro-scene.leaving .question-bubble {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-6px) scale(0.985);
    transition:
        opacity 660ms ease,
        filter 660ms ease,
        transform 660ms ease;
}

.intro-scene.leaving::before {
    opacity: 0;
    transition: opacity 660ms ease;
}

.room-scene {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: #120c08;
}

.room-blur-background {
    position: absolute;
    inset: -24px;
    z-index: 0;
    pointer-events: none;
    background: url("assets/image/background.png") center center / cover no-repeat;
    filter: blur(18px) brightness(0.55) saturate(0.9);
    opacity: 0.74;
    transform: scale(1.05);
}

.room-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at 28% 10%, rgba(255, 213, 130, 0.24), transparent 18%);
    filter: blur(6px);
    opacity: 0;
    transition: opacity 900ms ease;
}

.room-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: rgba(var(--room-dim-color), var(--room-dim));
    backdrop-filter: blur(var(--room-blur));
    transition:
        background 520ms ease,
        backdrop-filter 520ms ease;
}

.room-scene.dim-frame {
    --room-dim: 0.32;
    --room-blur: 1.4px;
}

.room-scene.dim-letter {
    --room-dim: 0.76;
    --room-blur: 2px;
    --room-dim-color: 5, 4, 3;
}

.room-scene.dim-letter.letter-paper-active {
    --room-dim: 0.46;
    --room-blur: 1.5px;
    --room-dim-color: 15, 10, 7;
}

.room-scene.dim-music {
    --room-dim: 0;
    --room-blur: 0px;
}

.room-scene.dim-archive {
    --room-dim: 0;
    --room-blur: 0px;
}

.room-scene.lamp-on::before {
    opacity: 1;
}

.room-scene.lamp-on .room-background {
    filter: brightness(1.1) saturate(1.03);
}

.room-scene.phone-active .room-background {
    filter: brightness(0.88) saturate(0.98);
}

.room-scene.phone-active.lamp-on .room-background {
    filter: brightness(0.92) saturate(1);
}

.room-scene.dim-letter .room-background {
    filter: brightness(0.34) blur(2px) saturate(0.78);
}

.room-scene.dim-letter.letter-paper-active .room-background {
    filter: brightness(0.52) blur(1.4px) saturate(0.88);
}

.room-scene.wish-returning .room-background {
    filter: brightness(0.82) blur(1.5px) saturate(0.96);
}

.room-scene.wish-returning.wish-returned .room-background {
    filter: brightness(1) blur(0) saturate(1);
}

.room-scene.review-active .room-hotspot {
    pointer-events: none;
}

.room-scene.cake-wish-active .room-hotspot {
    pointer-events: none;
}

.room-scene.phone-active .room-hotspot {
    pointer-events: none;
}

.room-scene.artwork-view-active .room-hotspot {
    pointer-events: none;
}

.room-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    user-select: none;
    transition: filter 900ms ease;
}

.hotspot-layer {
    position: absolute;
    left: var(--room-left);
    top: var(--room-top);
    z-index: 5;
    width: var(--room-width);
    height: var(--room-height);
}

.room-hotspot {
    position: absolute;
    display: block;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    min-width: 44px;
    min-height: 44px;
    transform-origin: center;
    -webkit-tap-highlight-color: transparent;
    --hotspot-color: 255, 255, 255;
    --hint-strength: 0.7;
    --glow-opacity: 0.052;
    --ring-opacity: 0;
    --spark-opacity: 0;
    transition:
        transform 260ms ease,
        opacity 260ms ease;
}

.room-hotspot:active,
.room-hotspot.is-active {
    transform: scale(0.985);
}

.hotspot-glow,
.hotspot-ring,
.hotspot-sparks {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.hotspot-glow {
    background:
        radial-gradient(ellipse at 50% 52%, rgba(var(--hotspot-color), calc(var(--glow-opacity) * var(--hint-strength))), transparent 64%),
        radial-gradient(ellipse at 50% 72%, rgba(255, 246, 226, calc(0.025 * var(--hint-strength))), transparent 58%);
    filter: blur(10px);
    opacity: 0.28;
    animation: hotspot-breathe 5.8s ease-in-out infinite;
}

.hotspot-ring {
    border: 0;
    box-shadow: none;
    opacity: 0;
    animation: hotspot-ring 7.4s ease-in-out infinite;
}

.hotspot-sparks {
    display: none;
}

.hotspot-sparks i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 238, 198, var(--spark-opacity));
    box-shadow: 0 0 8px rgba(255, 221, 163, 0.38);
    opacity: 0;
    animation: hotspot-spark 5.8s ease-in-out var(--d) infinite;
}

.hidden-hotspot {
    --glow-opacity: 0.048;
    --ring-opacity: 0;
    --spark-opacity: 0;
}

.hidden-hotspot .hotspot-glow {
    opacity: 0.24;
}

.hidden-hotspot .hotspot-ring {
    opacity: 0;
}

.hidden-hotspot:active,
.hidden-hotspot.is-active {
    transform: scale(0.99);
}

.hotspot-bubbles {
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    pointer-events: none;
}

.hotspot-bubbles i {
    position: absolute;
    left: var(--bubble-x);
    top: var(--bubble-y);
    width: var(--bubble-size);
    height: var(--bubble-size);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 250, 236, 0.08);
    box-shadow:
        0 0 4px rgba(255, 248, 231, 0.18),
        0 0 8px rgba(255, 228, 184, 0.08);
    opacity: 0;
    animation: hotspot-bubble var(--bubble-duration) ease-in-out var(--bubble-delay) infinite;
}

.hint-extra-bubbles,
.phone-settle-dots {
    position: absolute;
    inset: -14px;
    border-radius: inherit;
    pointer-events: none;
}

.hint-extra-bubbles i,
.phone-settle-dots i {
    position: absolute;
    left: var(--extra-x);
    top: var(--extra-y);
    width: var(--extra-size);
    height: var(--extra-size);
    border-radius: 50%;
    background: rgba(255, 245, 218, var(--extra-alpha));
    box-shadow: 0 0 8px rgba(246, 199, 124, 0.18);
    opacity: 0;
}

.hint-extra-bubbles i {
    animation: hotspot-extra-bubble 1120ms ease-out forwards;
}

.phone-settle-dots i {
    animation: phone-settle-dot 640ms ease-out forwards;
}

.hotspot-feedback-bubbles {
    position: absolute;
    inset: -12px;
    border-radius: inherit;
    pointer-events: none;
}

.hotspot-feedback-bubbles i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--tap-size);
    height: var(--tap-size);
    border-radius: 50%;
    background: rgba(255, 247, 226, var(--tap-alpha));
    box-shadow: 0 0 7px rgba(255, 232, 186, 0.16);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: hotspot-tap-particle 760ms ease-out forwards;
}

.room-hotspot.feedback .hotspot-glow {
    animation: hotspot-feedback-glow 780ms ease-out forwards;
}

.room-hotspot.hint-boost .hotspot-glow {
    animation: hotspot-idle-boost 1120ms ease-out forwards;
}

.room-hotspot.hint-disabled .hotspot-glow,
.room-hotspot.hint-disabled .hotspot-ring,
.room-hotspot.hint-disabled .hotspot-bubbles {
    opacity: 0;
    animation: none;
}

.room-hotspot.hint-disabled::after {
    opacity: 0;
    animation: none;
}

.room-scene.hints-paused .room-hotspot .hotspot-glow,
.room-scene.hints-paused .room-hotspot .hotspot-ring,
.room-scene.hints-paused .room-hotspot .hotspot-bubbles,
.room-scene.hints-paused .room-hotspot .hotspot-sparks,
.room-scene.hints-paused .room-hotspot::after {
    opacity: 0;
    animation: none;
}

.memory-light-field {
    position: absolute;
    left: 69.8%;
    top: 10.4%;
    z-index: 6;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.memory-light,
.memory-light-particle {
    position: absolute;
    left: var(--light-x);
    top: var(--light-y);
    width: var(--light-size);
    height: var(--light-size);
    border-radius: 50%;
    pointer-events: none;
}

.memory-light {
    background: rgba(246, 196, 105, var(--light-opacity));
    box-shadow:
        0 0 var(--light-glow) rgba(246, 196, 105, var(--light-glow-opacity)),
        0 0 calc(var(--light-glow) * 1.8) rgba(255, 225, 150, 0.1);
    transform: translate(-50%, -50%);
    animation: memory-light-breathe var(--light-duration) ease-in-out var(--light-delay) infinite;
}

.memory-light.is-new {
    animation:
        memory-light-born 820ms cubic-bezier(0.2, 0.9, 0.25, 1.1) forwards,
        memory-light-breathe var(--light-duration) ease-in-out calc(var(--light-delay) + 820ms) infinite;
}

.memory-light-particle {
    width: var(--particle-size);
    height: var(--particle-size);
    background: rgba(246, 196, 105, var(--particle-opacity));
    box-shadow: 0 0 5px rgba(246, 196, 105, 0.22);
    transform: translate(var(--particle-from-x), var(--particle-from-y)) scale(0.7);
    animation: memory-particle-in 840ms ease-out forwards;
}

.lamp-hotspot {
    left: 13.6%;
    top: 3%;
    z-index: 3;
    width: 30.5%;
    height: 12.8%;
    border-radius: 50%;
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.5;
    --glow-opacity: 0.034;
}

.sofa-cat-hotspot {
    left: 2%;
    top: 32.4%;
    z-index: 4;
    width: 40.5%;
    height: 14.2%;
    border-radius: 48%;
    transform: rotate(2deg);
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.7;
    --glow-opacity: 0.046;
}

.sofa-cat-hotspot:active,
.sofa-cat-hotspot.is-active {
    transform: rotate(2deg) scale(0.99);
}

.cake-hotspot {
    left: 30.5%;
    top: 48.2%;
    z-index: 5;
    width: 28.4%;
    height: 12.7%;
    border-radius: 50%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.95;
    --glow-opacity: 0.068;
}

.carpet-cat-hotspot {
    left: 0.5%;
    top: 72.9%;
    z-index: 4;
    width: 43%;
    height: 18.4%;
    border-radius: 42%;
    transform: rotate(-6deg);
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.66;
    --glow-opacity: 0.044;
}

.carpet-cat-hotspot:active,
.carpet-cat-hotspot.is-active {
    transform: rotate(-6deg) scale(0.99);
}

.art-history-books-hotspot {
    left: 0.2%;
    top: 21.6%;
    z-index: 3;
    width: 18.8%;
    height: 5.8%;
    border-radius: 8px;
    transform: rotate(-1deg);
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.85;
    --glow-opacity: 0.058;
}

.art-history-books-hotspot:active,
.art-history-books-hotspot.is-active {
    transform: rotate(-1deg) scale(0.99);
}

.heroine-hotspot {
    left: 54.2%;
    top: 14.1%;
    z-index: 3;
    width: 35.2%;
    height: 38.8%;
    border-radius: 42% 40% 30% 34%;
    clip-path: polygon(18% 0, 67% 1%, 96% 30%, 100% 100%, 8% 100%, 0 35%);
    transform: rotate(-1.5deg);
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.46;
    --glow-opacity: 0.034;
}

.heroine-hotspot:active,
.heroine-hotspot.is-active {
    transform: rotate(-1.5deg) scale(0.99);
}

.frame-hotspot {
    left: 5.5%;
    top: 46.8%;
    z-index: 4;
    width: 20.8%;
    height: 12.5%;
    border-radius: 14px;
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.9;
    --glow-opacity: 0.064;
}

.letter-hotspot {
    left: 8.8%;
    top: 56.2%;
    z-index: 5;
    width: 31.5%;
    height: 8.2%;
    border-radius: 48%;
    transform: rotate(-6deg);
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.7;
    --glow-opacity: 0.048;
    --spark-opacity: 0;
}

.letter-hotspot:active,
.letter-hotspot.is-active {
    transform: rotate(-6deg) scale(0.985);
}

.artwork-hotspot {
    left: 55.7%;
    top: 54.2%;
    z-index: 3;
    width: 43.5%;
    height: 41.6%;
    border-radius: 10px;
    clip-path: polygon(16% 0, 100% 14%, 89% 100%, 0 84%);
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.58;
    --glow-opacity: 0.04;
}

.artwork-hotspot:active,
.artwork-hotspot.is-active {
    transform: scale(0.99);
}

.artwork-hotspot.is-viewing .hotspot-glow {
    opacity: 0.42;
    animation: artwork-origin-breathe 1.8s ease-in-out infinite;
}

.musicbox-hotspot {
    left: 39.8%;
    top: 81.5%;
    z-index: 4;
    width: 30.5%;
    height: 14.5%;
    border-radius: 18px;
    transform: rotate(-4deg);
    --hotspot-color: 255, 250, 235;
    --hint-strength: 0.75;
    --glow-opacity: 0.052;
    --spark-opacity: 0;
}

.musicbox-hotspot:active,
.musicbox-hotspot.is-active {
    transform: rotate(-4deg) scale(0.985);
}

.phone-hotspot {
    left: 82.7%;
    top: 48.6%;
    z-index: 5;
    width: 14.6%;
    height: 5.8%;
    border-radius: 26%;
    transform: rotate(7deg);
    --hotspot-color: 255, 250, 235;
    --hint-strength: 1;
    --glow-opacity: 0.072;
}

.phone-hotspot:active,
.phone-hotspot.is-active {
    transform: rotate(7deg) scale(0.985);
}

.heroine-note {
    position: absolute;
    left: 71.5%;
    top: 29.2%;
    z-index: 8;
    width: max-content;
    max-width: 27%;
    padding: 8px 12px;
    border: 1px solid rgba(245, 225, 190, 0.16);
    border-radius: 16px;
    color: rgba(255, 244, 222, 0.9);
    background: rgba(35, 25, 18, 0.36);
    box-shadow: 0 5px 18px rgba(18, 11, 7, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
    font-family: "Songti SC", "STSong", Georgia, serif;
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.25;
    transform: translateY(5px) scale(0.96);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition:
        opacity 330ms ease,
        transform 330ms ease,
        visibility 0s linear 330ms;
}

.heroine-note.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
        opacity 330ms ease,
        transform 330ms ease,
        visibility 0s linear 0s;
}

.heroine-note.leaving {
    opacity: 0;
    transform: translateY(-3px) scale(1);
}

.cake-hotspot .hotspot-sparks,
.frame-hotspot .hotspot-sparks {
    display: block;
}

.cake-hotspot .hotspot-sparks i {
    width: 2px;
    height: 2px;
    background: rgba(255, 223, 154, 0.22);
    box-shadow: 0 0 7px rgba(255, 210, 126, 0.22);
}

.frame-hotspot::after,
.art-history-books-hotspot::after,
.phone-hotspot::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.phone-hotspot::after {
    left: 22%;
    top: 34%;
    width: 45%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    filter: blur(0.6px);
    animation: phone-hotspot-sheen 7.4s ease-in-out 1.2s infinite;
}

.frame-hotspot::after {
    right: 18%;
    top: 16%;
    width: 15%;
    height: 1px;
    border-radius: 999px;
    background: rgba(255, 219, 149, 0.48);
    box-shadow: 0 0 8px rgba(255, 210, 128, 0.18);
    transform: rotate(-24deg);
    animation: frame-corner-glint 7.1s ease-in-out 2s infinite;
}

.art-history-books-hotspot::after {
    left: 8%;
    top: 42%;
    width: 82%;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 229, 182, 0.28), transparent);
    filter: blur(1px);
    animation: book-spine-sweep 7.8s ease-in-out 2.7s infinite;
}

.room-fx-canvas {
    position: absolute;
    inset: 0;
    z-index: 13;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.room-intro-hint,
.room-hint-toast {
    position: absolute;
    left: 50%;
    z-index: 12;
    max-width: min(82vw, 360px);
    padding: 9px 15px;
    border: 1px solid rgba(255, 238, 205, 0.1);
    border-radius: 999px;
    color: rgba(248, 236, 216, 0.76);
    background: rgba(36, 24, 15, 0.22);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    font-size: clamp(0.78rem, 3.2vw, 0.9rem);
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition:
        opacity 520ms ease,
        transform 520ms ease;
}

.room-intro-hint {
    top: 16%;
    bottom: auto;
    max-width: min(84vw, 360px);
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    color: rgba(255, 246, 230, 0.68);
    background: transparent;
    box-shadow: none;
    font-size: clamp(13px, 3.4vw, 15px);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

.room-hint-toast {
    bottom: clamp(72px, 12vh, 118px);
    font-size: clamp(0.72rem, 3vw, 0.84rem);
}

.room-intro-hint.visible,
.room-hint-toast.visible {
    opacity: 0.75;
    transform: translate(-50%, 0);
}

.room-intro-hint.visible {
    opacity: 0.72;
}

.room-hint-button {
    position: absolute;
    top: clamp(14px, 3.4vh, 28px);
    right: clamp(12px, 4vw, 24px);
    z-index: 12;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(255, 238, 205, 0.1);
    border-radius: 50%;
    color: rgba(246, 232, 210, 0.42);
    background: rgba(30, 20, 13, 0.16);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
    opacity: 0.36;
    cursor: pointer;
    transition:
        opacity 220ms ease,
        color 220ms ease,
        background 220ms ease,
        transform 220ms ease;
}

.room-hint-button:hover,
.room-hint-button:active {
    opacity: 0.68;
    color: rgba(246, 232, 210, 0.68);
    background: rgba(44, 29, 18, 0.22);
    transform: scale(0.96);
}

.cat-bubble {
    position: absolute;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    transition:
        opacity 360ms ease,
        transform 360ms ease;
}

.cat-bubble {
    max-width: 132px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 240, 214, 0.16);
    border-radius: 9px 9px 9px 3px;
    color: rgba(255, 245, 225, 0.9);
    background: rgba(30, 24, 18, 0.22);
    box-shadow: 0 6px 14px rgba(18, 11, 6, 0.12);
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: 0.82rem;
    line-height: 1.45;
    transform: translate(-14%, 5px);
    backdrop-filter: blur(2px);
}

.cat-bubble.visible {
    opacity: 1;
    transform: translate(-14%, 0);
}

.cake-wish-overlay {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: grid;
    place-items: center;
    padding: 24px;
    pointer-events: none;
    opacity: 0;
    background: rgba(8, 6, 4, 0);
    transition:
        opacity 560ms ease,
        background 620ms ease;
}

.cake-wish-overlay.active {
    pointer-events: auto;
}

.cake-wish-overlay.open {
    opacity: 1;
    background: rgba(8, 6, 4, var(--cake-wish-dim));
}

.cake-wish-overlay.closing {
    opacity: 0;
    background: rgba(8, 6, 4, 0);
}

.wish-cake-stage {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 16px;
    opacity: 0;
    transform: translateY(12px) scale(0.88);
    transition:
        opacity 520ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cake-wish-overlay.open .wish-cake-stage {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cake-wish-overlay.closing .wish-cake-stage {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
}

.wish-cake-button {
    position: relative;
    width: clamp(120px, 38vw, 165px);
    aspect-ratio: 1;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    transform-origin: 50% 70%;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 360ms ease;
}

.cake-hotspot,
.wish-cake-button,
.wish-cake-button * {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.cake-wish-overlay.wish-accepted .wish-cake-button {
    animation: wish-cake-accept 280ms ease-out;
}

.wish-cake-glow {
    position: absolute;
    inset: 17% 4% 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 241, 206, 0.12), transparent 64%);
    filter: blur(9px);
    opacity: 0.12;
    transition: opacity 420ms ease;
}

.cake-wish-overlay.wish-accepted .wish-cake-glow {
    opacity: 0.3;
}

.cake-wish-overlay.counting .wish-cake-glow {
    opacity: 0.24;
}

.wish-cake-plate {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 13%;
    height: 16%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(255, 248, 228, 0.7), rgba(182, 130, 82, 0.42) 60%, rgba(91, 56, 32, 0.18) 100%);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.26);
}

.wish-cake-base {
    position: absolute;
    left: 17%;
    right: 17%;
    bottom: 22%;
    height: 34%;
    border-radius: 14% 14% 24% 24% / 20% 20% 32% 32%;
    background:
        linear-gradient(90deg, rgba(134, 88, 52, 0.22), transparent 18%, transparent 82%, rgba(95, 55, 32, 0.18)),
        linear-gradient(180deg, #f5dcb9 0%, #e3b982 54%, #c98b55 100%);
    box-shadow:
        inset 0 6px 8px rgba(255, 255, 255, 0.22),
        inset 0 -9px 12px rgba(91, 49, 24, 0.2);
}

.wish-cake-icing {
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 49%;
    height: 18%;
    border-radius: 50% 50% 34% 34%;
    background:
        radial-gradient(circle at 18% 88%, #f4d9b4 0 9%, transparent 10%),
        radial-gradient(circle at 40% 94%, #f4d9b4 0 8%, transparent 9%),
        radial-gradient(circle at 63% 90%, #f4d9b4 0 10%, transparent 11%),
        radial-gradient(circle at 84% 86%, #f4d9b4 0 8%, transparent 9%),
        linear-gradient(180deg, #fff2d5, #f0cfa5);
    box-shadow: inset 0 -4px 6px rgba(117, 69, 33, 0.12);
}

.wish-fruit {
    position: absolute;
    z-index: 2;
    width: 8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #9f3541;
    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.28),
        0 2px 4px rgba(65, 29, 15, 0.18);
}

.fruit-one {
    left: 33%;
    bottom: 58%;
}

.fruit-two {
    left: 48%;
    bottom: 60%;
    width: 7%;
    background: #c88646;
}

.fruit-three {
    left: 61%;
    bottom: 57%;
    background: #7f3136;
}

.wish-candle {
    position: absolute;
    z-index: 3;
    bottom: 62%;
    display: grid;
    place-items: center;
    width: 20%;
    height: 42%;
    color: rgba(255, 241, 209, 0.96);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 12vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    text-shadow:
        0 2px 2px rgba(72, 40, 22, 0.36),
        0 0 10px rgba(255, 214, 142, 0.18);
}

.candle-one {
    left: 34%;
}

.candle-two {
    left: 48%;
}

.wish-flame {
    position: absolute;
    left: 50%;
    top: -6%;
    width: 9px;
    height: 15px;
    border-radius: 50% 50% 42% 42%;
    background:
        radial-gradient(circle at 50% 64%, rgba(255, 250, 205, 0.95), transparent 34%),
        linear-gradient(180deg, #fff0a7, #f8a43b 68%, rgba(197, 72, 25, 0.66));
    box-shadow:
        0 0 10px rgba(255, 196, 84, 0.52),
        0 0 20px rgba(255, 145, 56, 0.18);
    transform: translateX(-50%);
    animation: candle-flicker 1.45s ease-in-out infinite;
    transition:
        opacity 320ms ease,
        transform 320ms ease;
}

.cake-wish-overlay.counting .wish-flame {
    box-shadow:
        0 0 13px rgba(255, 202, 96, 0.62),
        0 0 26px rgba(255, 149, 58, 0.22);
    animation-duration: 0.96s;
}

.cake-wish-overlay.candles-out .wish-flame {
    opacity: 0;
    transform: translateX(-50%) translateY(4px) scale(0.35);
}

.cake-countdown {
    position: absolute;
    left: 50%;
    top: 36%;
    z-index: 5;
    color: rgba(247, 236, 214, 0.84);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.35rem, 11vw, 2.9rem);
    font-weight: 300;
    line-height: 1;
    text-shadow:
        0 0 18px rgba(255, 225, 170, 0.16),
        0 2px 14px rgba(0, 0, 0, 0.42);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
}

.cake-countdown.count-pop {
    animation: wish-count-number 800ms ease-in-out forwards;
}

.wish-copy {
    text-align: center;
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.wish-copy p {
    margin: 0;
    color: #f5ead7;
    font-size: clamp(1.42rem, 6vw, 2.15rem);
    line-height: 1.25;
    transform: translateY(0);
    transition:
        opacity 360ms ease,
        transform 360ms ease;
}

.wish-copy small {
    display: block;
    margin-top: 8px;
    color: rgba(245, 234, 215, 0.52);
    font-size: clamp(0.82rem, 3.2vw, 1rem);
    letter-spacing: 0;
    transition: opacity 360ms ease;
}

.cake-wish-overlay.wish-complete .wish-copy small {
    opacity: 0;
}

.cake-wish-overlay.wish-accepted .wish-copy small,
.cake-wish-overlay.counting .wish-copy small {
    opacity: 0;
}

.cake-wish-overlay.wish-complete .wish-cake-stage {
    opacity: 0;
    transform: translateY(4px) scale(0.94);
    transition:
        opacity 420ms ease,
        transform 420ms ease;
}

.wish-blackout-layer {
    position: fixed;
    inset: 0;
    z-index: 15;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    background: #020202;
    transition:
        opacity 650ms ease,
        visibility 0s linear 650ms;
}

.wish-blackout-layer.active {
    visibility: visible;
    transition:
        opacity 650ms ease,
        visibility 0s linear 0s;
}

.wish-blackout-layer.dark {
    opacity: 1;
}

.wish-blackout-layer.reveal {
    opacity: 0;
    transition:
        opacity 850ms ease,
        visibility 0s linear 850ms;
}

.phone-surprise-overlay {
    position: absolute;
    inset: 0;
    z-index: 14;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    background: rgba(15, 10, 6, 0);
    transition:
        opacity 420ms ease,
        background 720ms ease,
        visibility 0s linear 760ms;
}

.phone-surprise-overlay.active {
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 420ms ease,
        background 720ms ease,
        visibility 0s linear 0s;
}

.phone-surprise-overlay.open {
    opacity: 1;
    background: rgba(15, 10, 6, 0.18);
}

.phone-surprise-overlay.closing {
    pointer-events: none;
    opacity: 1;
    background: rgba(15, 10, 6, 0);
}

.phone-overlay-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.floating-phone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(82vw, 360px);
    aspect-ratio: 390 / 812;
    pointer-events: auto;
    opacity: 0;
    transform:
        translate(calc(-50% + var(--phone-from-x, 0px)), calc(-50% + var(--phone-from-y, 0px)))
        scale(var(--phone-from-scale, 0.18))
        rotate(var(--phone-from-rotate, 7deg));
    transform-origin: center;
    transition:
        opacity 520ms ease,
        transform 720ms cubic-bezier(0.22, 0.75, 0.25, 1);
}

.phone-surprise-overlay.open .floating-phone {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.phone-surprise-overlay.closing .floating-phone {
    opacity: 0;
    transform:
        translate(calc(-50% + var(--phone-from-x, 0px)), calc(-50% + var(--phone-from-y, 0px)))
        scale(var(--phone-from-scale, 0.18))
        rotate(var(--phone-from-rotate, 7deg));
}

.phone-close-button {
    position: absolute;
    top: -10px;
    right: -8px;
    z-index: 5;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 245, 230, 0.18);
    border-radius: 50%;
    color: rgba(255, 245, 230, 0.7);
    background: rgba(20, 15, 10, 0.2);
    font-size: 1.08rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px) scale(0.96);
    transition:
        opacity 260ms ease,
        color 220ms ease,
        background 220ms ease,
        transform 260ms ease;
}

.phone-surprise-overlay.open .phone-close-button {
    opacity: 0.74;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.phone-close-button:hover,
.phone-close-button:active {
    color: rgba(255, 248, 236, 0.88);
    background: rgba(34, 24, 17, 0.3);
}

.phone-surprise-overlay.closing .phone-close-button {
    opacity: 0;
    pointer-events: none;
}

.phone-frame {
    width: 100%;
    height: 100%;
    padding: 3.2%;
    border: 1px solid rgba(90, 62, 42, 0.7);
    border-radius: 34px;
    background:
        linear-gradient(145deg, rgba(83, 61, 42, 0.95), rgba(27, 22, 19, 0.98)),
        #1f1814;
    box-shadow:
        0 26px 62px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(235, 193, 126, 0.08),
        inset 0 0 0 1px rgba(245, 228, 195, 0.08);
}

.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 28px;
    background: #f7f7f7;
    color: #151515;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.2);
    transition: opacity 220ms ease;
}

.phone-surprise-overlay.closing .phone-screen {
    opacity: 0.85;
}

.phone-screen::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    z-index: 4;
    width: 31%;
    height: 14px;
    border-radius: 999px;
    background: rgba(18, 18, 18, 0.9);
    transform: translateX(-50%);
}

.wechat-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    grid-auto-flow: column;
    place-content: center;
    gap: 8px;
    background: #f7f7f7;
    opacity: 1;
    transition: opacity 260ms ease;
}

.wechat-loading span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(24, 24, 24, 0.18);
    animation: wechat-loading-dot 880ms ease-in-out infinite;
}

.wechat-loading span:nth-child(2) {
    animation-delay: 120ms;
}

.wechat-loading span:nth-child(3) {
    animation-delay: 240ms;
}

.phone-surprise-overlay.messages-ready .wechat-loading {
    opacity: 0;
    pointer-events: none;
}

.wechat-app {
    position: relative;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    background: #f7f7f7;
    transition: opacity 260ms ease;
}

.phone-surprise-overlay.messages-ready .wechat-app {
    opacity: 1;
}

.phone-surprise-overlay.closing .wechat-app {
    opacity: 0.85;
}

.wechat-view {
    position: absolute;
    inset: 0;
    display: grid;
    min-height: 0;
    background: #f7f7f7;
    transition:
        opacity 340ms ease,
        transform 340ms ease;
}

.wechat-list-view {
    grid-template-rows: auto 1fr auto;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.wechat-chat-view {
    grid-template-rows: auto 1fr auto;
    opacity: 0;
    transform: translateX(25%);
    pointer-events: none;
}

.wechat-app.chat-open .wechat-list-view {
    opacity: 0;
    transform: translateX(-30%);
    pointer-events: none;
}

.wechat-app.chat-open .wechat-chat-view {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.wechat-app.no-chat-transition .wechat-view {
    transition: none;
}

.phone-return-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(28px, 6.4vh, 64px);
    z-index: 2;
    margin: 0;
    color: rgba(245, 235, 220, 0.46);
    font-size: clamp(0.72rem, 3vw, 0.82rem);
    letter-spacing: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 5px);
    transition:
        opacity 520ms ease,
        transform 520ms ease;
}

.phone-surprise-overlay.show-return-hint .phone-return-hint {
    opacity: 1;
    transform: translate(-50%, 0);
}

.phone-surprise-overlay.closing .phone-return-hint {
    opacity: 0;
}

.wechat-header {
    background: #ededed;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.wechat-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 11px 18px 0;
    font-size: 0.76rem;
    font-weight: 700;
}

.status-icons {
    color: rgba(0, 0, 0, 0.72);
    font-size: 0.66rem;
    letter-spacing: 0;
}

.wechat-titlebar {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    min-height: 50px;
    padding: 0 14px 8px;
}

.wechat-titlebar strong {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
}

.wechat-plus {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1.5px solid rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    color: #111;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
}

.wechat-list {
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.wechat-message {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 46px 1fr auto;
    gap: 11px;
    align-items: center;
    min-height: 76px;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    color: #151515;
    background: #fff;
    font: inherit;
    text-align: left;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 360ms ease var(--msg-delay),
        transform 360ms ease var(--msg-delay);
}

.wechat-message-button {
    cursor: pointer;
}

.wechat-message-button:active {
    background: #f3f3f3;
}

.phone-surprise-overlay.messages-ready .wechat-message {
    opacity: 1;
    transform: translateY(0);
}

.wechat-avatar {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1);
}

.wechat-avatar-img,
.wechat-avatar-fallback {
    grid-area: 1 / 1;
}

.wechat-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.wechat-avatar-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.avatar-dad {
    background: linear-gradient(135deg, #6d513a, #2e231a);
}

.avatar-mom {
    background: linear-gradient(135deg, #d19a82, #8c4a43);
}

.avatar-friends {
    background: linear-gradient(135deg, #54c56f, #11984b);
}

.avatar-classmates {
    background: linear-gradient(135deg, #8794ad, #47526b);
}

.wechat-message-main {
    min-width: 0;
}

.wechat-message-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.wechat-message-top strong {
    overflow: hidden;
    font-size: 1.04rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wechat-message-top time {
    flex: 0 0 auto;
    color: rgba(0, 0, 0, 0.26);
    font-size: 0.78rem;
}

.wechat-message p {
    overflow: hidden;
    margin: 6px 0 0;
    color: rgba(0, 0, 0, 0.42);
    font-size: 0.82rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wechat-unread {
    display: grid;
    min-width: 18px;
    height: 18px;
    margin-left: 2px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #fa5151;
    font-size: 0.68rem;
    line-height: 1;
}

.wechat-unread.is-dot {
    min-width: 10px;
    width: 10px;
    height: 10px;
}

.wechat-message-blurred {
    opacity: 0;
    filter: blur(2px);
}

.phone-surprise-overlay.messages-ready .wechat-message-blurred {
    opacity: 0.38;
}

.blurred-avatar,
.wechat-message-blurred .wechat-message-top strong,
.wechat-message-blurred .wechat-message-top time,
.wechat-message-blurred p {
    color: transparent;
    background: rgba(0, 0, 0, 0.1);
}

.wechat-message-blurred .wechat-message-top strong {
    width: 46%;
    height: 16px;
    border-radius: 999px;
}

.wechat-message-blurred .wechat-message-top time {
    width: 30px;
    height: 12px;
    border-radius: 999px;
}

.wechat-message-blurred p {
    width: 72%;
    height: 14px;
    border-radius: 999px;
}

.wechat-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 64px;
    padding-top: 7px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #f7f7f7;
}

.wechat-tabs span {
    position: relative;
    display: grid;
    place-items: end center;
    padding-bottom: 9px;
    color: rgba(0, 0, 0, 0.72);
    font-size: 0.74rem;
}

.wechat-tabs span::before {
    content: "";
    width: 24px;
    height: 20px;
    margin-bottom: 3px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 45% 45%;
}

.wechat-tabs span.active {
    color: #07c160;
}

.wechat-chat-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: end;
    min-height: 86px;
    padding: 0 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #ededed;
}

.wechat-chat-header strong {
    overflow: hidden;
    padding-bottom: 4px;
    color: #111;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wechat-back-button,
.wechat-more-button,
.wechat-compose-icon,
.wechat-send-button {
    border: 0;
    color: #141414;
    background: transparent;
    font: inherit;
}

.wechat-back-button,
.wechat-more-button {
    display: grid;
    width: 38px;
    height: 34px;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
}

.wechat-more-button {
    font-size: 1.2rem;
    letter-spacing: 0.08em;
}

.wechat-chat-messages {
    min-height: 0;
    overflow-y: auto;
    padding: 14px 11px 18px;
    background:
        linear-gradient(rgba(237, 237, 237, 0.88), rgba(237, 237, 237, 0.88)),
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.7), transparent 28%);
    -webkit-overflow-scrolling: touch;
}

.wechat-chat-row {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.wechat-chat-row.from-me {
    justify-content: flex-end;
}

.wechat-chat-row.from-them {
    justify-content: flex-start;
}

.wechat-chat-row .wechat-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    font-size: 0.78rem;
}

.wechat-chat-bubble {
    max-width: 72%;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 0.84rem;
    line-height: 1.42;
    word-break: break-word;
}

.wechat-chat-row.from-them .wechat-chat-bubble {
    color: #171717;
    background: #fff;
}

.wechat-chat-row.from-me .wechat-chat-bubble {
    color: #111;
    background: #95ec69;
}

.wechat-compose {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px auto;
    gap: 7px;
    align-items: end;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #f6f6f6;
}

.wechat-compose-icon {
    display: grid;
    width: 32px;
    height: 34px;
    place-items: center;
    border: 1.6px solid rgba(0, 0, 0, 0.74);
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
}

#wechatInput {
    min-height: 34px;
    max-height: 82px;
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    outline: 0;
    resize: none;
    color: #111;
    background: #fff;
    font: inherit;
    font-size: 0.86rem;
    line-height: 1.45;
}

.wechat-send-button {
    display: grid;
    min-width: 32px;
    height: 34px;
    padding: 0 9px;
    place-items: center;
    border-radius: 5px;
    font-size: 0.82rem;
    line-height: 1;
}

.wechat-send-button.can-send {
    color: #fff;
    background: #07c160;
}

.artwork-viewer {
    --artwork-from-x: 0px;
    --artwork-from-y: 0px;
    --artwork-origin-x: 50vw;
    --artwork-origin-y: 72vh;
    --artwork-origin-width: 120px;
    --artwork-origin-height: 180px;
    position: fixed;
    inset: 0;
    z-index: 28;
    display: grid;
    place-items: center;
    padding: clamp(12px, 4vw, 24px);
    visibility: hidden;
    pointer-events: none;
}

.artwork-viewer::before {
    content: "";
    position: absolute;
    left: var(--artwork-origin-x);
    top: var(--artwork-origin-y);
    z-index: 1;
    width: var(--artwork-origin-width);
    height: var(--artwork-origin-height);
    border-radius: 38%;
    background: radial-gradient(ellipse, rgba(244, 198, 129, 0.16), transparent 70%);
    filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.8);
    transition:
        opacity 420ms ease,
        transform 560ms ease;
}

.artwork-viewer.active {
    visibility: visible;
    pointer-events: auto;
}

.artwork-viewer.open::before {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
}

.artwork-viewer-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0;
    padding: 0;
    background: rgba(10, 7, 5, 0.64);
    opacity: 0;
    cursor: pointer;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    transition: opacity 540ms ease;
}

.artwork-viewer.open .artwork-viewer-backdrop {
    opacity: 1;
}

.artwork-viewer-frame {
    position: relative;
    z-index: 2;
    display: flex;
    width: fit-content;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: 0;
    padding: clamp(6px, 1.7vw, 9px);
    border: 1px solid rgba(241, 216, 178, 0.22);
    border-radius: 3px;
    background: #4b3221;
    box-shadow:
        inset 0 0 0 1px rgba(255, 234, 195, 0.08),
        0 18px 55px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(223, 169, 97, 0.08);
    opacity: 0;
    outline: none;
    transform: translate(var(--artwork-from-x), var(--artwork-from-y)) scale(0.4);
    transform-origin: center;
    transition:
        transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 420ms ease;
}

.artwork-viewer.open .artwork-viewer-frame {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.artwork-viewer.closing .artwork-viewer-frame {
    transition:
        transform 540ms cubic-bezier(0.55, 0, 0.45, 1),
        opacity 430ms ease 70ms;
}

.artwork-viewer-frame img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(88vw, 620px);
    max-height: min(78vh, 820px);
    object-fit: contain;
    user-select: none;
}

.artwork-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(245, 226, 195, 0.18);
    border-radius: 50%;
    color: rgba(255, 244, 222, 0.76);
    background: rgba(28, 19, 13, 0.42);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition:
        color 220ms ease,
        background 220ms ease,
        transform 220ms ease;
}

.artwork-close-button:hover,
.artwork-close-button:focus-visible {
    color: rgba(255, 248, 234, 0.96);
    background: rgba(42, 29, 20, 0.58);
}

.artwork-close-button:active {
    transform: scale(0.96);
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 22px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 420ms ease,
        visibility 0s linear 420ms;
}

.overlay.active {
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 420ms ease,
        visibility 0s linear 0s;
}

.overlay.open {
    opacity: 1;
}

.overlay-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(15, 10, 6, 0.3);
    cursor: pointer;
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

.modal-card {
    position: relative;
    z-index: 2;
    width: min(86vw, 440px);
    max-height: min(82vh, 720px);
    overflow: auto;
    color: #442b1c;
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) scale(0.3);
    transition:
        transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 320ms ease,
        filter 420ms ease;
}

.overlay.open .modal-card {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.overlay.closing .modal-card {
    transition:
        transform 300ms ease,
        opacity 260ms ease,
        filter 260ms ease;
}

.music-modal .modal-card,
.archive-modal .modal-card {
    transform: translateY(10px) scale(0.97);
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 380ms ease,
        filter 380ms ease;
}

.music-modal.open .modal-card,
.archive-modal.open .modal-card {
    transform: translateY(0) scale(1);
}

.music-modal.closing .modal-card,
.archive-modal.closing .modal-card {
    transform: translateY(8px) scale(0.98);
}

.close-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(94, 56, 30, 0.25);
    border-radius: 50%;
    color: #5a3926;
    background: rgba(255, 246, 225, 0.68);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    backdrop-filter: blur(7px);
}

.music-modal .close-overlay,
.archive-modal .close-overlay {
    border: 1px solid rgba(230, 207, 174, 0.18);
    color: rgba(242, 225, 200, 0.75);
    background: rgba(230, 207, 174, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.music-modal .close-overlay:hover,
.music-modal .close-overlay:active,
.archive-modal .close-overlay:hover,
.archive-modal .close-overlay:active {
    background: rgba(230, 207, 174, 0.18);
}

.modal-kicker {
    margin: 0 0 8px;
    color: rgba(86, 53, 32, 0.62);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.modal-card h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.modal-card p {
    font-size: clamp(1rem, 3.6vw, 1.12rem);
    line-height: 1.75;
}

.frame-card {
    padding: clamp(34px, 8vw, 50px) clamp(26px, 7vw, 44px);
    border: 10px solid #744b26;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 248, 229, 0.97), rgba(238, 213, 176, 0.96)),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.35), transparent 28%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 223, 154, 0.28),
        inset 0 0 24px rgba(92, 47, 18, 0.12),
        0 24px 54px rgba(0, 0, 0, 0.32),
        0 0 26px rgba(255, 190, 116, 0.12);
    text-align: center;
}

.frame-card::before,
.frame-card::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(110, 64, 29, 0.22);
    pointer-events: none;
}

.frame-card::after {
    inset: 18px;
    border-color: rgba(154, 94, 46, 0.18);
}

.frame-card p {
    margin: 20px 0 24px;
}

.modal-action,
.music-actions button {
    min-height: 42px;
    border: 1px solid rgba(91, 54, 31, 0.42);
    border-radius: 999px;
    color: #fff8ef;
    background: linear-gradient(180deg, rgba(104, 66, 38, 0.94), rgba(66, 39, 24, 0.94));
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 10px 22px rgba(46, 24, 11, 0.22);
}

.modal-action {
    min-width: 142px;
    padding: 0 22px;
}

.frame-modal.to-flower .modal-card {
    opacity: 0;
    filter: blur(3px) brightness(1.12);
    transform: translate(0, 0) scale(0.9);
}

.modal-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.modal-sparks span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--spark-size);
    height: var(--spark-size);
    border-radius: 50%;
    background: var(--spark-color);
    box-shadow: 0 0 14px var(--spark-color);
    opacity: 0;
    animation: modal-spark 2.2s ease-out var(--spark-delay) forwards;
}

.letter-modal {
    padding: 16px;
}

.letter-modal .overlay-backdrop {
    background: rgba(5, 4, 3, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.letter-sequence-skip {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 18px);
    right: 18px;
    z-index: 4;
    border: 0;
    padding: 8px 4px;
    color: rgba(246, 234, 214, 0.42);
    background: transparent;
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 420ms ease,
        color 240ms ease;
}

.letter-modal.open.sequence-mode .letter-sequence-skip {
    opacity: 1;
    pointer-events: auto;
}

.letter-sequence-skip:hover,
.letter-sequence-skip:active {
    color: rgba(246, 234, 214, 0.64);
}

.letter-sequence-skip[hidden] {
    display: none;
}

.letter-sequence-stage {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 2;
    width: min(86vw, 600px);
    height: min(34svh, 280px);
    min-height: 220px;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 520ms ease;
}

.letter-modal.open.sequence-mode .letter-sequence-stage {
    opacity: 1;
}

.letter-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    color: rgba(249, 239, 221, 0.94);
    font-family: "Noto Serif SC", "Songti SC", "STSong", "Microsoft YaHei", serif;
    font-size: clamp(1.25rem, 5.4vw, 1.5rem);
    font-weight: 450;
    line-height: 1.7;
    white-space: pre-line;
    text-shadow: 0 0 12px rgba(238, 207, 160, 0.1);
    opacity: 0;
    filter: blur(5px);
    transform: translateY(calc(-50% + 22px)) scale(0.96);
    transition:
        transform 680ms cubic-bezier(0.22, 0.75, 0.25, 1),
        opacity 650ms ease,
        filter 680ms ease,
        color 680ms ease;
}

.letter-line.current {
    color: rgba(249, 239, 221, 0.95);
    opacity: 1;
    filter: blur(0);
    transform: translateY(-50%) scale(1);
}

.letter-line.previous {
    color: rgba(220, 205, 183, 0.34);
    opacity: 0.34;
    filter: blur(1.2px);
    transform: translateY(calc(-50% - 70px)) scale(0.82);
}

.letter-line.old {
    color: rgba(220, 205, 183, 0.18);
    opacity: 0;
    filter: blur(4px);
    transform: translateY(calc(-50% - 108px)) scale(0.7);
}

.letter-line-age.current {
    font-size: clamp(1.34rem, 5.9vw, 1.62rem);
}

.letter-line-bridge.current {
    font-size: clamp(1.12rem, 4.8vw, 1.32rem);
    opacity: 0.88;
}

.letter-line-wish.current {
    font-weight: 500;
}

.letter-line-birthday.current {
    font-size: clamp(1.35rem, 5.8vw, 1.64rem);
}

.letter-line-finale.current {
    font-size: clamp(1.55rem, 6.7vw, 1.86rem);
    font-weight: 500;
    transform: translateY(-50%) scale(1);
    transition:
        transform 900ms cubic-bezier(0.22, 0.75, 0.25, 1),
        opacity 900ms ease,
        filter 900ms ease,
        color 900ms ease;
}

.letter-line-stagger span {
    display: block;
    opacity: 0;
    transform: translateY(6px);
}

.letter-line-stagger.current span {
    animation: letter-line-part 520ms ease var(--line-stagger) forwards;
}

.letter-line-stagger.previous span,
.letter-line-stagger.old span {
    opacity: 1;
    transform: translateY(0);
}

.letter-modal.sequence-ending .letter-line {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-50%) scale(1.03);
    transition:
        opacity 820ms ease,
        filter 820ms ease,
        transform 820ms ease;
}

.letter-modal .letter-card {
    display: flex;
    width: min(88vw, 560px);
    height: min(82svh, 760px);
    max-height: 82svh;
    flex-direction: column;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    padding: clamp(24px, 6vw, 34px) 0 16px;
    border: 1px solid rgba(95, 68, 45, 0.15);
    border-radius: 14px;
    color: #3b2a20;
    background:
        linear-gradient(145deg, rgba(248, 240, 222, 0.98), rgba(237, 221, 194, 0.97));
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.26),
        inset 0 0 34px rgba(96, 66, 42, 0.065);
    opacity: 0;
    filter: blur(1px);
    transform: translateY(18px) scale(0.97);
    transition:
        transform 820ms cubic-bezier(0.22, 0.75, 0.25, 1),
        opacity 760ms ease,
        filter 760ms ease,
        visibility 0s linear 820ms;
}

.letter-modal.open.sequence-mode .letter-card {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) scale(0.97);
}

.letter-modal.full-mode .letter-card {
    visibility: visible;
    pointer-events: auto;
    transition:
        transform 820ms cubic-bezier(0.22, 0.75, 0.25, 1),
        opacity 760ms ease,
        filter 760ms ease,
        visibility 0s linear 0s;
}

.letter-modal.open.full-mode .letter-card {
    opacity: 0;
    filter: blur(1px);
    transform: translateY(18px) scale(0.97);
}

.letter-modal.full-mode.paper-opening .letter-card {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

.letter-modal.full-mode.paper-closing .letter-card,
.letter-modal.full-mode.closing .letter-card {
    opacity: 0;
    filter: blur(1.5px);
    transform: translateY(12px) scale(0.985);
    transition:
        transform 320ms ease,
        opacity 300ms ease,
        filter 300ms ease,
        visibility 0s linear 320ms;
}

.letter-modal .letter-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    background:
        radial-gradient(circle at 18% 14%, rgba(70, 47, 31, 0.55) 0 1px, transparent 1.6px),
        radial-gradient(circle at 72% 26%, rgba(70, 47, 31, 0.38) 0 1px, transparent 1.5px),
        radial-gradient(circle at 38% 82%, rgba(70, 47, 31, 0.44) 0 1px, transparent 1.7px),
        repeating-linear-gradient(100deg, transparent 0 17px, rgba(91, 61, 38, 0.22) 18px, transparent 19px);
}

.letter-modal .letter-card::after {
    content: "";
    position: absolute;
    inset: 11px;
    z-index: 0;
    border: 1px solid rgba(95, 68, 45, 0.08);
    border-radius: 10px;
    pointer-events: none;
}

.letter-modal .letter-card > * {
    position: relative;
    z-index: 1;
}

.letter-modal .close-overlay {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(80, 55, 35, 0.12);
    border-radius: 12px;
    color: rgba(71, 49, 34, 0.55);
    background: rgba(80, 55, 35, 0.04);
    font-size: 1.04rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.letter-modal .close-overlay:hover,
.letter-modal .close-overlay:active {
    color: rgba(71, 49, 34, 0.76);
    background: rgba(80, 55, 35, 0.075);
}

.letter-modal .modal-kicker {
    margin: 0;
    padding: 0 clamp(24px, 6vw, 32px);
    color: rgba(74, 51, 37, 0.38);
    font-size: 0.66rem;
    font-weight: 600;
}

.letter-modal .letter-title {
    margin: 5px 0 0;
    padding: 0 clamp(24px, 6vw, 32px);
    color: rgba(74, 51, 37, 0.48);
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
}

.letter-body {
    min-height: 0;
    flex: 1 1 auto;
    margin-top: 16px;
    padding: 0 clamp(24px, 6vw, 32px) 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #4a3325;
    font-family: "Noto Serif SC", "Songti SC", "STSong", "Microsoft YaHei", serif;
    font-size: clamp(0.97rem, 4.02vw, 1.03rem);
    line-height: 1.9;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.letter-body::-webkit-scrollbar {
    width: 4px;
}

.letter-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(94, 62, 38, 0.18);
}

.letter-paragraph {
    margin: 0 0 21px;
    white-space: pre-line;
}

.letter-salutation {
    margin-bottom: 24px;
    color: #3b2a20;
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: clamp(1.12rem, 4.6vw, 1.25rem);
    font-weight: 500;
}

.letter-emphasis {
    color: #3a261b;
    font-weight: 500;
}

.letter-birthday {
    margin-top: 28px;
}

.letter-welcome {
    color: #3a261b;
    font-size: clamp(1.08rem, 4.5vw, 1.18rem);
    font-weight: 500;
}

.letter-epilogue {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 clamp(24px, 6vw, 32px) 8px;
    color: rgba(74, 51, 37, 0.42);
    font-size: 0.72rem;
    line-height: 1.35;
}

.letter-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 16px;
    padding: 0 clamp(24px, 6vw, 32px) 0;
    opacity: 1;
    transition: opacity 420ms ease;
}

.letter-actions[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}

.letter-actions button {
    border: 0;
    padding: 5px 0;
    color: rgba(74, 51, 37, 0.62);
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1.2;
}

.letter-actions button:hover,
.letter-actions button:active {
    color: rgba(74, 51, 37, 0.82);
}

.music-card {
    padding: clamp(28px, 7vw, 42px);
    border: 1px solid rgba(226, 196, 150, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 232, 185, 0.035), transparent 22%, transparent 78%, rgba(42, 24, 13, 0.16)),
        linear-gradient(145deg, rgba(82, 58, 38, 0.94), rgba(42, 30, 21, 0.96));
    color: #f2e3ca;
    box-shadow:
        0 16px 45px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(235, 210, 175, 0.07),
        inset 0 0 28px rgba(21, 12, 7, 0.22);
    text-align: center;
}

.music-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(226, 196, 150, 0.12);
    border-radius: 5px;
    pointer-events: none;
}

.music-card .modal-kicker {
    color: rgba(226, 204, 169, 0.6);
}

.music-card h2 {
    color: #f1dfc2;
}

.music-card p:not(.modal-kicker) {
    color: rgba(241, 223, 194, 0.72);
}

.birthday-track-label {
    margin-top: 14px;
    color: rgba(241, 223, 194, 0.54) !important;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.music-mark {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    place-items: center;
    border: 1px solid rgba(226, 196, 150, 0.18);
    border-radius: 50%;
    color: rgba(227, 201, 159, 0.82);
    font-size: 1.9rem;
    background: rgba(224, 194, 150, 0.07);
    box-shadow: inset 0 0 18px rgba(255, 213, 142, 0.05);
}

.music-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.music-actions button {
    min-width: 78px;
    padding: 0 16px;
    border: 1px solid rgba(235, 210, 175, 0.23);
    color: #eddbc0;
    background: rgba(224, 194, 150, 0.12);
    box-shadow: none;
}

.music-actions button:hover,
.music-actions button:active {
    background: rgba(224, 194, 150, 0.23);
    border-color: rgba(235, 210, 175, 0.32);
}

.archive-card {
    padding: clamp(32px, 8vw, 48px) clamp(26px, 7vw, 44px);
    border: 1px solid rgba(95, 62, 35, 0.32);
    border-radius: 7px;
    color: #4a301d;
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 244, 205, 0.18), transparent 20%),
        radial-gradient(circle at 85% 86%, rgba(87, 52, 25, 0.14), transparent 24%),
        linear-gradient(90deg, rgba(78, 46, 23, 0.12), transparent 12%, transparent 88%, rgba(78, 46, 23, 0.16)),
        linear-gradient(135deg, #dcc294, #c8a46e);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.3),
        inset 0 0 40px rgba(74, 48, 29, 0.14),
        inset 0 0 0 1px rgba(255, 242, 204, 0.16);
    text-align: center;
}

.archive-card::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(103, 61, 29, 0.16);
    border-radius: 4px;
    pointer-events: none;
}

.archive-card h2 {
    color: #4a301d;
    font-size: clamp(1.8rem, 7vw, 2.65rem);
}

.archive-card .modal-kicker {
    color: rgba(74, 48, 29, 0.58);
}

.archive-card p:not(.modal-kicker) {
    color: rgba(74, 48, 29, 0.72);
    opacity: 0;
    filter: blur(3px);
    transform: scale(0.96);
}

.archive-modal.open .archive-card p:not(.modal-kicker) {
    animation: archive-prompt-in 680ms ease 160ms forwards;
}

.archive-start {
    min-width: 128px;
    min-height: 42px;
    border: 1px solid rgba(95, 62, 35, 0.45);
    border-radius: 999px;
    color: #ead4ad;
    background: rgba(76, 49, 28, 0.9);
    cursor: pointer;
    font-weight: 700;
    box-shadow:
        0 10px 20px rgba(62, 35, 15, 0.2),
        inset 0 0 14px rgba(235, 210, 175, 0.08);
}

.archive-start:hover,
.archive-start:active {
    background: rgba(86, 55, 31, 0.96);
}

.art-review-overlay {
    position: fixed;
    inset: 0;
    z-index: 36;
    display: grid;
    place-items: center;
    padding: 24px;
    pointer-events: none;
    opacity: 0;
    perspective: 900px;
    background:
        radial-gradient(circle at 50% 48%, rgba(82, 50, 27, 0.26), transparent 38%),
        linear-gradient(180deg, #020101, #090705 55%, #0e0a07);
    transition: opacity 620ms ease;
}

.art-review-overlay.active {
    opacity: 1;
}

.art-review-item {
    width: min(86vw, 560px);
    color: #eee1c9;
    text-align: center;
    opacity: 0;
    filter: blur(8px);
    transform: translateZ(-200px) scale(0.35);
    transition:
        opacity 420ms ease,
        filter 520ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.art-review-item.show {
    opacity: 1;
    filter: blur(0);
    transform: translateZ(0) scale(1);
}

.art-review-item.exit {
    opacity: 0;
    filter: blur(3px);
    transform: scale(1.35) translateY(-15px);
}

.review-era {
    margin: 0 0 8px;
    color: #c49b5a;
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: clamp(2rem, 9vw, 4rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.review-time {
    margin: 0 0 18px;
    color: rgba(238, 225, 201, 0.64);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.review-body {
    display: grid;
    gap: 10px;
    margin: 0 auto;
    color: rgba(238, 225, 201, 0.9);
    font-size: clamp(1rem, 4vw, 1.22rem);
    line-height: 1.68;
}

.review-body p {
    margin: 0;
}

.review-body strong {
    color: #c49b5a;
    font-weight: 700;
}

.art-review-final {
    position: absolute;
    inset: auto 24px 18vh;
    margin: 0;
    color: #eee1c9;
    text-align: center;
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: clamp(1.35rem, 6vw, 2.4rem);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 520ms ease,
        transform 520ms ease;
}

.art-review-final.visible {
    opacity: 1;
    transform: translateY(0);
}

.page-transition {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 215, 149, 0.22), transparent 0 18%, rgba(0, 0, 0, 0.84) 62%),
        #020101;
    transition: opacity 620ms ease;
}

.page-transition.active {
    opacity: 1;
}

.room-entrance-overlay {
    position: fixed;
    inset: 0;
    z-index: 34;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: rgba(247, 238, 222, 0.72);
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(105, 72, 43, 0.14) 0%,
            rgba(73, 48, 30, 0.07) 28%,
            rgba(18, 13, 9, 0.02) 52%,
            rgba(4, 3, 2, 0) 75%
        ),
        #050403;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 460ms ease,
        visibility 0s linear 460ms;
}

.room-entrance-overlay::before {
    content: "";
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(105, 72, 43, 0.14) 0%,
            rgba(73, 48, 30, 0.07) 28%,
            rgba(18, 13, 9, 0.02) 52%,
            rgba(4, 3, 2, 0) 75%
        );
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity 450ms ease,
        transform 1000ms ease;
}

.room-entrance-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}

.room-entrance-overlay.active::before {
    opacity: 1;
}

.room-entrance-overlay.revealing {
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 1000ms ease,
        visibility 0s linear 1000ms;
}

.room-entrance-overlay.revealing::before {
    transform: scale(1.08);
}

.room-entrance-copy {
    position: relative;
    z-index: 2;
    width: min(82vw, 420px);
    margin: 0;
    color: rgba(247, 238, 222, 0.72);
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: clamp(13px, 3.5vw, 15px);
    font-weight: 400;
    letter-spacing: 0.07em;
    line-height: 1.7;
    text-align: center;
    text-shadow:
        0 0 7px rgba(255, 239, 211, 0.18),
        0 0 18px rgba(214, 168, 108, 0.08);
    opacity: 0;
    transform: translateY(5px);
    transition:
        opacity 450ms ease,
        transform 450ms ease;
}

.room-entrance-overlay.active .room-entrance-copy {
    opacity: 0.72;
    transform: translateY(0);
    animation: room-entrance-copy-breathe 3.2s ease-in-out infinite;
}

.room-entrance-overlay.revealing .room-entrance-copy {
    opacity: 0;
    transform: translateY(-1px);
    transition:
        opacity 520ms ease,
        transform 520ms ease;
}

.room-entrance-dust {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 700ms ease;
}

.room-entrance-overlay.active .room-entrance-dust {
    opacity: 1;
}

.room-entrance-overlay.revealing .room-entrance-dust {
    opacity: 0.42;
}

.room-entrance-dust i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: rgba(255, 233, 194, var(--a));
    box-shadow: 0 0 6px rgba(214, 168, 108, 0.1);
    animation: room-entrance-dust 4.6s ease-in-out var(--d) infinite;
}

.flower-page {
    min-height: 100vh;
    overflow: hidden;
    background: #020202;
}

.flower-scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 36%, rgba(255, 101, 145, 0.13), transparent 24%),
        radial-gradient(ellipse at 50% 78%, rgba(124, 13, 45, 0.22), transparent 38%),
        linear-gradient(180deg, #000 0%, #040102 56%, #090304 100%);
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 520ms ease,
        transform 520ms ease;
}

.particle-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100vw;
    height: 100vh;
}

.particle-vignette {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 42%, transparent 0 46%, rgba(0, 0, 0, 0.34) 74%, rgba(0, 0, 0, 0.86) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.02));
}

.return-room-button {
    position: fixed;
    left: 50%;
    bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 4;
    min-height: 38px;
    border: 1px solid rgba(235, 210, 175, 0.15);
    border-radius: 999px;
    padding: 0 16px;
    color: rgba(245, 232, 210, 0.65);
    background: rgba(35, 24, 16, 0.15);
    cursor: pointer;
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-size: 0.94rem;
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition:
        opacity 700ms ease,
        transform 700ms ease,
        color 220ms ease,
        background 220ms ease,
        border-color 220ms ease;
}

.return-room-button.visible {
    opacity: 0.65;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.return-room-button:hover,
.return-room-button:active {
    opacity: 1;
    color: rgba(245, 232, 210, 0.94);
    background: rgba(54, 36, 22, 0.24);
    border-color: rgba(235, 210, 175, 0.24);
}

.flower-page.leaving .flower-scene {
    opacity: 0;
    transform: scale(0.992);
}

@keyframes cover-watermark-breathe {
    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

@keyframes intro-sky-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.9;
    }
}

@keyframes intro-warm-night {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes intro-glow-rise {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes intro-card-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes intro-kicker-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 0.48;
        transform: translateY(0);
    }
}

@keyframes intro-heading-in {
    from {
        opacity: 0;
        filter: blur(3px);
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes intro-subcopy-in {
    from {
        opacity: 0;
        filter: blur(3px);
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes intro-buttons-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gift-nudge-star {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(4px) scale(0.5);
    }

    18% {
        opacity: 0.78;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--star-dx), var(--star-dy)) scale(0.25);
    }
}

@keyframes gift-open-pulse {
    0%,
    100% {
        transform: scale(var(--ready-scale));
    }

    48% {
        transform: scale(calc(var(--ready-scale) * 1.02));
    }
}

@keyframes hotspot-breathe {
    0%,
    100% {
        opacity: 0.42;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.76;
        transform: scale(1.04);
    }
}

@keyframes hotspot-ring {
    0%,
    100% {
        opacity: 0.26;
        transform: scale(0.985);
    }

    50% {
        opacity: 0.48;
        transform: scale(1.015);
    }
}

@keyframes hotspot-spark {
    0% {
        opacity: 0;
        transform: translateY(4px) scale(0.72);
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.42);
    }
}

@keyframes hotspot-bubble {
    0%,
    100% {
        opacity: 0;
        transform: translate(0, 4px) scale(0.72);
    }

    42% {
        opacity: var(--bubble-alpha);
        transform: translate(var(--bubble-drift-x), -7px) scale(1.08);
    }
}

@keyframes hotspot-extra-bubble {
    0% {
        opacity: 0;
        transform: translate(0, 5px) scale(0.68);
    }

    36% {
        opacity: var(--extra-alpha);
    }

    100% {
        opacity: 0;
        transform: translate(var(--extra-drift-x), -10px) scale(0.46);
    }
}

@keyframes hotspot-idle-boost {
    0%,
    100% {
        opacity: 0.28;
        transform: scale(0.98);
    }

    42% {
        opacity: 0.86;
        transform: scale(1.075);
    }
}

@keyframes hotspot-feedback-glow {
    0% {
        opacity: 0.22;
        transform: scale(0.94);
    }

    32% {
        opacity: 0.62;
        transform: scale(1.04);
    }

    100% {
        opacity: 0.22;
        transform: scale(1);
    }
}

@keyframes artwork-origin-breathe {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.98);
    }

    50% {
        opacity: 0.44;
        transform: scale(1.025);
    }
}

@keyframes hotspot-tap-particle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
    }

    26% {
        opacity: var(--tap-alpha);
    }

    100% {
        opacity: 0;
        transform:
            translate(calc(-50% + var(--tap-x)), calc(-50% + var(--tap-y)))
            scale(0.42);
    }
}

@keyframes phone-hotspot-sheen {
    0%,
    72%,
    100% {
        opacity: 0;
        transform: translateX(-8px) rotate(5deg);
    }

    78% {
        opacity: 0.45;
    }

    86% {
        opacity: 0;
        transform: translateX(10px) rotate(5deg);
    }
}

@keyframes frame-corner-glint {
    0%,
    68%,
    100% {
        opacity: 0;
        transform: rotate(-24deg) scaleX(0.4);
    }

    73% {
        opacity: 0.6;
        transform: rotate(-24deg) scaleX(1);
    }

    80% {
        opacity: 0;
        transform: rotate(-24deg) scaleX(0.72);
    }
}

@keyframes book-spine-sweep {
    0%,
    64%,
    100% {
        opacity: 0;
        transform: translateX(-18%) scaleX(0.35);
    }

    72% {
        opacity: 0.58;
    }

    82% {
        opacity: 0;
        transform: translateX(18%) scaleX(1);
    }
}

@keyframes phone-settle-dot {
    0% {
        opacity: 0;
        transform: translateY(4px) scale(0.68);
    }

    35% {
        opacity: var(--extra-alpha);
    }

    100% {
        opacity: 0;
        transform: translate(var(--extra-drift-x), -12px) scale(0.4);
    }
}

@keyframes wechat-loading-dot {
    0%,
    100% {
        opacity: 0.2;
        transform: translateY(2px) scale(0.9);
    }

    48% {
        opacity: 0.52;
        transform: translateY(-2px) scale(1.05);
    }
}

@keyframes memory-light-born {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    58% {
        opacity: var(--light-opacity);
        transform: translate(-50%, -50%) scale(1.35);
    }

    100% {
        opacity: var(--light-opacity);
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes memory-light-breathe {
    0%,
    100% {
        opacity: calc(var(--light-opacity) * 0.82);
        transform: translate(-50%, -50%) scale(0.94);
    }

    50% {
        opacity: calc(var(--light-opacity) * 0.88);
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes memory-particle-in {
    0% {
        opacity: 0;
        transform: translate(var(--particle-from-x), var(--particle-from-y)) scale(0.7);
    }

    28% {
        opacity: var(--particle-opacity);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
}

@keyframes candle-flicker {
    0%,
    100% {
        transform: translateX(-50%) rotate(-2deg) scaleY(0.96);
    }

    45% {
        transform: translateX(-50%) rotate(3deg) scaleY(1.06);
    }
}

@keyframes wish-cake-accept {
    0%,
    100% {
        transform: scale(1);
    }

    48% {
        transform: scale(1.025);
    }
}

@keyframes wish-count-number {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    24%,
    68% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes modal-spark {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }

    18% {
        opacity: 0.82;
    }

    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.2);
    }
}

@keyframes letter-line-part {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes archive-prompt-in {
    0% {
        opacity: 0;
        filter: blur(3px);
        transform: scale(0.96);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes room-entrance-copy-breathe {
    0%,
    100% {
        opacity: 0.68;
        transform: translateY(0);
    }

    50% {
        opacity: 0.78;
        transform: translateY(-2px);
    }
}

@keyframes room-entrance-dust {
    0%,
    100% {
        opacity: 0;
        transform: translate(0, 4px) scale(0.8);
    }

    42% {
        opacity: 1;
        transform: translate(2px, -5px) scale(1);
    }

    72% {
        opacity: 0.45;
        transform: translate(-1px, -9px) scale(0.72);
    }
}

@media (max-width: 720px) {
    .intro-scene {
        place-items: center;
        padding: 22px;
    }

    .question-bubble {
        width: min(88vw, 520px);
        max-width: calc(100vw - 32px);
        margin: clamp(88px, 19vh, 156px) 0 0;
    }

    .choice-row {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
        min-height: 126px;
    }

.choice-button {
        width: calc(100% / 1.14);
    }

    .primary-choice {
        width: calc(100% / 1.14);
    }

    .panel-one {
        width: 72vw;
        height: 38vh;
    }

    .panel-two {
        width: 62vw;
        height: 26vh;
    }

    .lamp-hotspot {
        left: 13.6%;
        top: 3%;
        width: 30.5%;
        height: 12.8%;
    }

    .sofa-cat-hotspot {
        left: 2%;
        top: 32.4%;
        width: 40.5%;
        height: 14.2%;
    }

    .cake-hotspot {
        left: 30.5%;
        top: 48.2%;
        width: 28.4%;
        height: 12.7%;
    }

    .carpet-cat-hotspot {
        left: 0.5%;
        top: 72.9%;
        width: 43%;
        height: 18.4%;
    }

    .art-history-books-hotspot {
        left: 0.2%;
        top: 21.6%;
        width: 18.8%;
        height: 5.8%;
    }

    .frame-hotspot {
        left: 5.5%;
        top: 46.8%;
        width: 20.8%;
        height: 12.5%;
    }

    .letter-hotspot {
        left: 8.8%;
        top: 56.2%;
        width: 31.5%;
        height: 8.2%;
    }

    .musicbox-hotspot {
        left: 39.8%;
        top: 81.5%;
        width: 30.5%;
        height: 14.5%;
    }

    .phone-hotspot {
        left: 82.7%;
        top: 48.6%;
        width: 14.6%;
        height: 5.8%;
    }

    .overlay {
        padding: 18px;
    }

    .modal-card {
        width: min(88vw, 420px);
    }

    .frame-card {
        padding: 34px 24px 30px;
    }

    .letter-modal .letter-card {
        width: min(88vw, 560px);
        padding-top: 26px;
    }

    .letter-modal .modal-kicker,
    .letter-modal .letter-title,
    .letter-body,
    .letter-epilogue,
    .letter-actions {
        padding-right: 20px;
        padding-left: 20px;
    }

    .letter-sequence-skip {
        right: 16px;
    }

    .music-actions {
        gap: 8px;
    }
}

@media (max-aspect-ratio: 9 / 16) {
    .lamp-hotspot {
        left: 13.4%;
        top: 2.9%;
    }

    .sofa-cat-hotspot {
        left: 1.8%;
        top: 32.2%;
    }

    .cake-hotspot {
        left: 30.2%;
        top: 48.1%;
    }

    .carpet-cat-hotspot {
        left: 0.2%;
        top: 72.8%;
    }

    .art-history-books-hotspot {
        left: 0;
        top: 21.5%;
    }

    .frame-hotspot {
        left: 5.8%;
        top: 46.8%;
    }

    .letter-hotspot {
        left: 8.4%;
        top: 56.1%;
    }

    .musicbox-hotspot {
        left: 39.4%;
        top: 81.4%;
    }

    .phone-hotspot {
        left: 82.4%;
        top: 48.5%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .intro-sky-canvas {
        opacity: 0.78;
    }

    .intro-scene::before,
    .intro-night-glow,
    .question-bubble,
    .small-title,
    .question-bubble h1,
    .intro-subcopy,
    .choice-row {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .small-title {
        opacity: 0.48 !important;
    }

    .room-entrance-overlay,
    .room-entrance-overlay::before,
    .room-entrance-copy {
        transition-duration: 420ms !important;
    }

    .room-entrance-overlay.revealing::before {
        transform: scale(1) !important;
    }

    .room-entrance-overlay.active .room-entrance-copy {
        animation: none !important;
    }

    .room-scene.entrance-fade {
        transition-duration: 700ms !important;
    }

    .room-entrance-dust {
        display: none;
    }
}