:root {
    --midnight: #090512;
    --purple: #180b2c;
    --purple-soft: #2c1748;
    --rose: #d94c86;
    --rose-soft: #ffabc8;
    --lavender: #bba6ff;
    --gold: #f1c76a;
    --cream: #fff4df;
    --ink: #301229;
    --muted: rgba(255, 244, 223, .76);
    --glass: rgba(255, 255, 255, .08);
    --line: rgba(255, 255, 255, .16);
    --shadow: 0 28px 80px rgba(3, 0, 12, .48);
    --body: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --display: "Playfair Display", Georgia, serif;
    --script: "Great Vibes", cursive;
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    overflow: hidden;
    background: var(--midnight);
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow: hidden;
    color: var(--cream);
    font-family: var(--body);
    background:
        radial-gradient(circle at 50% 14%, rgba(241, 199, 106, .16), transparent 24rem),
        radial-gradient(circle at 18% 20%, rgba(217, 76, 134, .18), transparent 24rem),
        radial-gradient(circle at 85% 74%, rgba(187, 166, 255, .16), transparent 24rem),
        linear-gradient(145deg, #07030f 0%, #180b2c 52%, #10051d 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%);
}

button,
input { font: inherit; }

button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button:disabled {
    cursor: not-allowed;
    opacity: .48;
    transform: none !important;
}

button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 5px;
}

img {
    display: block;
    max-width: 100%;
}

.party-canvas {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
}

.scene {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(18px, 4vw, 58px);
    overflow: hidden auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.99);
}

.scene.is-active {
    display: grid;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    animation: sceneIn .42s ease both;
}

.scene-inner {
    position: relative;
    z-index: 2;
    width: min(1120px, 100%);
    margin: auto;
}

.scene-copy {
    max-width: 650px;
}

.scene-copy.centered,
.gift-layout {
    text-align: center;
}

.kicker {
    margin: 0 0 12px;
    color: var(--gold);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

h1,
h2 {
    margin: 0;
    font-family: var(--display);
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

h1 {
    max-width: 820px;
    margin-inline: auto;
    font-size: clamp(2.9rem, 8vw, 6.7rem);
}

h2 {
    font-size: clamp(2.2rem, 6.4vw, 5.5rem);
}

p {
    line-height: 1.7;
}

.scene-text {
    max-width: 650px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.party-button,
.soft-button {
    min-height: 48px;
    border-radius: 999px;
    padding: 13px 24px;
    border: 0;
    font-weight: 900;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.party-button {
    color: #261126;
    background: linear-gradient(135deg, #fff2bd, var(--gold) 48%, #ffa9c4);
    box-shadow: 0 18px 38px rgba(241, 199, 106, .22);
}

.soft-button {
    color: var(--cream);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .09);
}

.party-button:hover,
.soft-button:hover {
    transform: translateY(-2px);
}

.music-control {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(390px, calc(100vw - 28px));
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(11, 4, 22, .8);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}

.music-control button {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    color: var(--cream);
    font-size: .9rem;
    font-weight: 900;
    background: rgba(255,255,255,.11);
}

.volume-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

#volumeControl {
    width: 86px;
    accent-color: var(--gold);
}

.music-message {
    position: fixed;
    right: 20px;
    bottom: 78px;
    z-index: 61;
    max-width: min(340px, calc(100vw - 40px));
    margin: 0;
    color: var(--cream);
    font-weight: 800;
    text-align: right;
}

.music-control.unavailable {
    opacity: .55;
}

.music-waves {
    display: flex;
    align-items: end;
    gap: 3px;
    height: 22px;
}

.music-waves span {
    width: 4px;
    height: 7px;
    border-radius: 999px;
    background: var(--gold);
}

.music-control.playing .music-waves span {
    animation: wave .55s ease-in-out infinite alternate;
}

.music-control.playing .music-waves span:nth-child(2) { animation-delay: .12s; }
.music-control.playing .music-waves span:nth-child(3) { animation-delay: .24s; }

.ambient-lights {
    position: absolute;
    inset: -20% -10%;
    background:
        radial-gradient(circle at 50% 44%, rgba(241, 199, 106, .24), transparent 18rem),
        radial-gradient(circle at 42% 54%, rgba(255, 171, 200, .16), transparent 22rem);
    filter: blur(4px);
}

.soft-particles span {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .58;
    animation: particleFloat 5s ease-in-out infinite alternate;
}

.soft-particles span:nth-child(1) { left: 18%; top: 22%; }
.soft-particles span:nth-child(2) { left: 72%; top: 18%; animation-delay: .7s; background: var(--rose-soft); }
.soft-particles span:nth-child(3) { left: 82%; top: 66%; animation-delay: 1.4s; }
.soft-particles span:nth-child(4) { left: 24%; top: 72%; animation-delay: 2.1s; background: var(--lavender); }
.soft-particles span:nth-child(5) { left: 50%; top: 82%; animation-delay: 2.8s; }

.gift-layout {
    display: grid;
    justify-items: center;
    gap: 18px;
}

.premium-gift {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(178px, 28vw, 260px);
    height: clamp(190px, 29vw, 280px);
    margin: clamp(8px, 2vw, 20px) auto;
    border: 0;
    background: transparent;
    transform-style: preserve-3d;
}

.gift-glow {
    position: absolute;
    bottom: 6px;
    width: 155%;
    height: 48%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(241, 199, 106, .28), transparent 68%);
}

.gift-box-3d {
    position: absolute;
    bottom: 20px;
    width: 78%;
    height: 58%;
    border-radius: 18px 18px 26px 26px;
    background:
        linear-gradient(90deg, transparent 41%, rgba(255, 232, 155, .95) 42% 58%, transparent 59%),
        linear-gradient(135deg, #441d62, #d94c86 58%, #241039);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.25),
        inset 0 -28px 34px rgba(34,9,49,.28),
        0 30px 62px rgba(0,0,0,.44);
    animation: giftFloat 2.7s ease-in-out infinite alternate;
}

.gift-box-3d::before {
    content: "";
    position: absolute;
    inset: 45% 0 auto;
    height: 26px;
    background: linear-gradient(90deg, #a46b26, #fff0b1, #a46b26);
}

.gift-lid {
    position: absolute;
    z-index: 3;
    top: 42px;
    width: 92%;
    height: 54px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, transparent 41%, rgba(255, 232, 155, .95) 42% 58%, transparent 59%),
        linear-gradient(135deg, #ff99bd, #4a1d6b);
    box-shadow: 0 18px 34px rgba(0,0,0,.34), inset 0 2px 0 rgba(255,255,255,.27);
    transform-origin: 82% 100%;
    animation: giftFloat 2.7s ease-in-out infinite alternate;
}

.gift-bow {
    position: absolute;
    z-index: 4;
    top: 4px;
    width: 132px;
    height: 76px;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,.32));
    animation: giftFloat 2.7s ease-in-out infinite alternate;
}

.gift-bow::before,
.gift-bow::after {
    content: "";
    position: absolute;
    top: 15px;
    width: 62px;
    height: 46px;
    border: 12px solid var(--gold);
    background: rgba(255,255,255,.12);
}

.gift-bow::before {
    left: 0;
    border-radius: 70% 40% 55% 45%;
    transform: rotate(-18deg);
}

.gift-bow::after {
    right: 0;
    border-radius: 40% 70% 45% 55%;
    transform: rotate(18deg);
}

.gift-scene.gift-opened .premium-gift {
    animation: giftShake .52s ease;
}

.gift-scene.gift-opened .gift-lid {
    animation: lidFly 1s cubic-bezier(.16,1,.3,1) forwards;
}

.gift-scene.gift-opened .gift-bow {
    animation: bowFly 1s cubic-bezier(.16,1,.3,1) forwards;
}

.fairy-lights {
    position: absolute;
    top: 22px;
    left: 6vw;
    right: 6vw;
    height: 70px;
    opacity: .58;
    background:
        radial-gradient(circle, var(--gold) 0 4px, transparent 5px) 0 40px / 86px 24px repeat-x,
        linear-gradient(120deg, transparent 49%, rgba(255,255,255,.2) 50%, transparent 51%);
    animation: blink 2.4s ease-in-out infinite alternate;
}

.cake-layout {
    display: grid;
    justify-items: center;
    gap: clamp(14px, 3vh, 28px);
    text-align: center;
}

.cake-stage {
    position: relative;
    width: min(760px, 96vw);
    height: clamp(300px, 48vh, 430px);
}

.cake-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: min(640px, 86vw);
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(#fff0bd, #a46331);
    transform: translateX(-50%);
    box-shadow: 0 30px 64px rgba(0,0,0,.36);
}

.side-balloons {
    position: absolute;
    top: 18%;
    display: grid;
    gap: 16px;
    opacity: .72;
}

.side-balloons.left { left: 0; }
.side-balloons.right { right: 0; }

.side-balloons span {
    width: clamp(38px, 7vw, 70px);
    height: clamp(54px, 9vw, 92px);
    border-radius: 55% 55% 48% 48%;
    background: radial-gradient(circle at 35% 25%, #fff, var(--rose-soft) 36%, #7b2258);
    box-shadow: inset -10px -15px 25px rgba(0,0,0,.18);
    animation: balloon 3.2s ease-in-out infinite alternate;
}

.side-balloons span:nth-child(2) {
    margin-left: 28px;
    background: radial-gradient(circle at 35% 25%, #fff, var(--lavender) 36%, #5a3a97);
    animation-delay: .5s;
}

.birthday-cake {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 3;
    width: min(475px, 86vw);
    height: 365px;
    transform: translateX(-50%) scale(.88);
    transform-origin: bottom center;
}

.candle-row {
    position: absolute;
    z-index: 7;
    top: 10px;
    left: 50%;
    display: flex;
    gap: clamp(12px, 2.4vw, 23px);
    transform: translateX(-50%);
}

.candle {
    position: relative;
    width: 14px;
    height: 72px;
    border-radius: 999px;
    background: repeating-linear-gradient(135deg, #fff7df 0 12px, #d8c9ff 12px 20px);
}

.candle i {
    position: absolute;
    left: 50%;
    top: -27px;
    width: 21px;
    height: 29px;
    border-radius: 50% 50% 45% 45%;
    background: radial-gradient(circle at 45% 75%, white, #ffd95e 38%, #ff658f 72%);
    filter: drop-shadow(0 0 16px #ffd95e);
    transform: translateX(-50%);
    animation: flame .45s ease-in-out infinite alternate;
}

.candles-out .candle i {
    opacity: 0;
    transform: translateX(-50%) scale(.15) translateY(12px);
    transition: .42s ease;
}

.smoke {
    position: absolute;
    left: 50%;
    top: -16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.58);
    animation: smoke 1.25s ease-out forwards;
}

.cake-name {
    position: absolute;
    z-index: 6;
    top: 148px;
    left: 50%;
    color: #642546;
    font-family: var(--script);
    font-size: clamp(3rem, 9vw, 5rem);
    transform: translateX(-50%);
}

.cake-layer,
.cake-stand,
.cake-slice {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.cake-layer {
    border-radius: 50% / 18%;
    box-shadow: inset 0 -28px 42px rgba(63,13,61,.24), 0 12px 28px rgba(0,0,0,.22);
}

.cake-layer::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: 0;
    height: 32%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,.9), rgba(255,196,218,.72) 58%, transparent 60%);
}

.layer-top { top: 78px; z-index: 4; width: 62%; height: 96px; background: linear-gradient(90deg, #fff2d4, #ffc0d8, #d28bd0); }
.layer-middle { top: 145px; z-index: 3; width: 78%; height: 116px; background: linear-gradient(90deg, #d974a6, #fff0cc, #b89cff); }
.layer-bottom { top: 230px; z-index: 2; width: 94%; height: 126px; background: linear-gradient(90deg, #8a3377, #ff9fc6, #7054bb); }

.cake-stand {
    bottom: 0;
    z-index: 1;
    width: 108%;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(#fff4cf, #bc7a35);
    box-shadow: 0 25px 46px rgba(0,0,0,.32);
}

.cake-slice {
    z-index: 8;
    top: 168px;
    width: 112px;
    height: 148px;
    opacity: 0;
    clip-path: polygon(0 0, 100% 25%, 20% 100%);
    background: repeating-linear-gradient(180deg, #ffc4da 0 32px, #7a2360 32px 50px, #fff2c9 50px 63px);
    transition: opacity .28s ease, transform 1s cubic-bezier(.16,1,.3,1);
}

.cake-cut .cake-slice {
    opacity: 1;
    transform: translate(142px, 24px) rotate(12deg);
}

.cake-knife {
    position: absolute;
    z-index: 10;
    left: 55%;
    top: -38px;
    width: 26px;
    height: 210px;
    opacity: 0;
    border-radius: 14px 14px 4px 4px;
    background: linear-gradient(90deg, #aaa, #fff, #bbb);
    box-shadow: 0 20px 28px rgba(0,0,0,.3);
}

.cake-knife::before {
    content: "";
    position: absolute;
    top: -68px;
    left: 3px;
    width: 20px;
    height: 72px;
    border-radius: 10px;
    background: linear-gradient(#6d3525, #2b130e);
}

.cake-knife.cutting {
    animation: knifeCut 1.35s cubic-bezier(.2,.9,.2,1) forwards;
}

.scene-actions,
.final-actions,
.letter-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.celebration-layout,
.split-layout,
.final-layout {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(300px, .92fr);
    align-items: center;
    gap: clamp(30px, 6vw, 82px);
}

.portrait-frame {
    position: relative;
    width: min(430px, 88vw);
    padding: 10px;
    border: 1px solid rgba(241,199,106,.48);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    box-shadow: var(--shadow), 0 0 52px rgba(217, 76, 134, .16);
}

.portrait-frame::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(241,199,106,.34), transparent 40%, rgba(255,171,200,.24));
}

.portrait-frame img {
    width: 100%;
    height: min(62vh, 590px);
    min-height: 310px;
    object-fit: cover;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--purple-soft), var(--rose), var(--gold));
}

.gallery-layout,
.wishes-layout,
.letter-layout {
    display: grid;
    justify-items: center;
    gap: clamp(20px, 4vh, 36px);
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1.25fr .78fr .78fr;
    grid-auto-rows: minmax(155px, 21vh);
    gap: 14px;
    width: min(1040px, 100%);
}

.gallery-card {
    position: relative;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    color: var(--cream);
    background: rgba(255,255,255,.08);
    box-shadow: 0 18px 45px rgba(0,0,0,.24);
}

.gallery-card.featured {
    grid-row: span 2;
}

.gallery-card.tall {
    grid-row: span 2;
}

.gallery-card.wide {
    grid-column: span 2;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.gallery-card:hover img {
    transform: scale(1.045);
}

.gallery-card span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 42px 14px 13px;
    color: #fff9ee;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    background: linear-gradient(transparent, rgba(8, 2, 15, .78));
}

.wish-panel {
    width: min(880px, 100%);
    padding: clamp(18px, 4vw, 34px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255,255,255,.07);
    box-shadow: var(--shadow);
}

.wish-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 14px;
}

.wish-token {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 128px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 22px;
    color: #2b1130;
    font-weight: 900;
    background: linear-gradient(145deg, #fff2bd, #ffabc8);
    box-shadow: 0 16px 35px rgba(0,0,0,.2);
    transition: transform .22s ease;
}

.wish-token:hover,
.wish-token.is-selected {
    transform: translateY(-4px);
}

.wish-token span {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 42%, rgba(255,255,255,.65) 43% 57%, transparent 58%),
        linear-gradient(135deg, var(--rose), var(--purple-soft));
}

.wish-token.heart span {
    border-radius: 50% 50% 45% 45%;
    background: radial-gradient(circle at 35% 25%, #fff, var(--rose) 42%, #8c285e);
}

.wish-token.star span {
    clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%);
    border-radius: 0;
    background: var(--gold);
}

.wish-output {
    min-height: 88px;
    margin: 22px 0 0;
    padding: 20px;
    border-radius: 18px;
    color: var(--cream);
    text-align: center;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    background: rgba(8, 2, 15, .34);
}

.envelope {
    position: relative;
    display: grid;
    place-items: center;
    width: min(460px, 88vw);
    height: clamp(205px, 34vh, 260px);
    border-radius: 24px;
    color: #6a2a55;
    font-family: var(--script);
    background: linear-gradient(145deg, #fff4d7, #ffc4da);
    box-shadow: var(--shadow);
    transition: transform .35s ease;
}

.envelope:hover {
    transform: translateY(-4px);
}

.envelope p {
    position: relative;
    z-index: 2;
    max-width: 82%;
    margin: 0;
    font-size: clamp(2.1rem, 7vw, 3.8rem);
    line-height: 1.05;
    text-align: center;
}

.envelope-flap {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,.32);
    clip-path: polygon(0 0, 100% 0, 50% 58%);
    transform-origin: top;
    transition: transform .65s ease;
}

.envelope.open .envelope-flap {
    transform: rotateX(150deg);
}

.birthday-letter {
    display: none;
    width: min(860px, 100%);
    max-height: min(68vh, 680px);
    overflow: auto;
    padding: clamp(26px, 5vw, 54px);
    border-radius: 22px;
    color: var(--ink);
    background: #fff6df;
    box-shadow: var(--shadow);
}

.birthday-letter.open {
    display: block;
    animation: letterRise .45s ease both;
}

.letter-scene.letter-open .envelope,
.letter-scene.letter-open #openLetterBtn {
    display: none;
}

.birthday-letter h2 {
    color: #7f3162;
    font-family: var(--script);
}

.birthday-letter .soft-button {
    color: #5f254e;
    border-color: rgba(127,49,98,.22);
    background: rgba(127,49,98,.08);
}

#typedLetter {
    color: rgba(48,18,41,.84);
    font-family: var(--display);
    font-size: clamp(1.08rem, 2vw, 1.32rem);
    line-height: 1.75;
    white-space: pre-line;
}

.signature {
    display: block;
    margin: 24px 0;
    color: #7f3162;
    font-family: var(--script);
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 400;
}

.letter-scene.letter-open {
    background:
        radial-gradient(circle at 50% 22%, rgba(241,199,106,.12), transparent 26rem),
        rgba(4, 1, 10, .44);
}

.final-line {
    display: block;
    margin: 24px 0 28px;
    color: var(--rose-soft);
    font-family: var(--script);
    font-size: clamp(2.15rem, 5.4vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
}

.rose-petal,
.firework-dot,
.floating-balloon {
    position: fixed;
    z-index: 41;
    pointer-events: none;
}

.rose-petal {
    width: 16px;
    height: 11px;
    border-radius: 80% 0 80% 0;
    background: linear-gradient(135deg, #ffd4e3, var(--rose));
}

.firework-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 12px currentColor;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: auto minmax(0, 780px) auto;
    place-items: center;
    gap: 14px;
    padding: 24px;
    background: rgba(5, 1, 12, .9);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lightbox figure {
    display: grid;
    gap: 12px;
    width: 100%;
    margin: 0;
}

.lightbox img {
    max-width: 100%;
    max-height: 78vh;
    margin: auto;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

#lightboxCaption {
    margin: 0;
    color: var(--cream);
    text-align: center;
    font-size: 1.08rem;
}

.lightbox-close,
.lightbox-nav {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 12px 18px;
    color: var(--cream);
    background: rgba(255,255,255,.12);
}

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

@keyframes wave { to { height: 20px; } }
@keyframes blink { to { filter: brightness(1.55); } }
@keyframes particleFloat { to { transform: translateY(-28px); opacity: .25; } }
@keyframes balloon { to { transform: translateY(-18px) rotate(4deg); } }
@keyframes giftFloat { to { transform: translateY(-10px) rotateX(3deg); } }
@keyframes giftShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-2deg); }
    45% { transform: translateX(7px) rotate(2deg); }
    70% { transform: translateX(-4px) rotate(-1deg); }
}
@keyframes lidFly { to { opacity: 0; transform: translateY(-112px) translateX(42px) rotate(24deg) scale(1.05); } }
@keyframes bowFly { to { opacity: 0; transform: translateY(-132px) rotate(-18deg) scale(1.12); } }
@keyframes flame { from { transform: translateX(-50%) rotate(-4deg) scale(.92); } to { transform: translateX(-50%) rotate(4deg) scale(1.08); } }
@keyframes smoke { to { opacity: 0; transform: translateY(-80px) scale(2.4); } }
@keyframes knifeCut {
    0% { opacity: 0; transform: translate(120px, -70px) rotate(42deg); }
    20% { opacity: 1; }
    58% { opacity: 1; transform: translate(-24px, 206px) rotate(4deg); }
    100% { opacity: 0; transform: translate(92px, 76px) rotate(32deg); }
}
@keyframes letterRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sceneIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 900px) {
    .celebration-layout,
    .split-layout,
    .final-layout {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 22px;
    }

    .portrait-frame img {
        height: min(46vh, 430px);
        min-height: 260px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 178px;
    }

    .gallery-card.featured,
    .gallery-card.tall,
    .gallery-card.wide {
        grid-column: auto;
        grid-row: auto;
    }

    .gallery-card.featured {
        grid-column: 1 / -1;
        min-height: 250px;
    }

    .wish-buttons {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

@media (max-width: 600px) {
    html,
    body {
        overflow: hidden;
    }

    .scene {
        align-items: center;
        padding: 12px 14px 78px;
    }

    .scene-inner {
        max-height: calc(100svh - 92px);
        overflow: auto;
        scrollbar-width: thin;
    }

    .kicker {
        margin-bottom: 7px;
        font-size: .66rem;
        letter-spacing: .14em;
    }

    h1 {
        font-size: clamp(2.18rem, 10.8vw, 3.55rem);
    }

    h2 {
        font-size: clamp(1.82rem, 8.4vw, 2.75rem);
    }

    .scene-text {
        margin-top: 10px;
        font-size: 1rem;
        line-height: 1.55;
    }

    .gift-layout,
    .cake-layout,
    .gallery-layout,
    .wishes-layout,
    .letter-layout {
        gap: 12px;
    }

    .premium-gift {
        width: clamp(136px, 45vw, 178px);
        height: clamp(148px, 48vw, 192px);
        margin-block: 2px;
    }

    .gift-lid {
        top: 32px;
        height: 42px;
    }

    .gift-bow {
        top: -2px;
        transform: scale(.82);
    }

    .party-button,
    .soft-button {
        min-height: 44px;
        padding: 11px 20px;
    }

    .cake-stage {
        height: 282px;
    }

    .birthday-cake {
        width: min(410px, 96vw);
        bottom: 4px;
        transform: translateX(-50%) scale(.58);
    }

    .cake-stage::after {
        bottom: 4px;
        height: 54px;
    }

    .side-balloons {
        opacity: .36;
    }

    .side-balloons.left { left: -22px; }
    .side-balloons.right { right: -22px; }

    .scene-actions,
    .final-actions,
    .letter-actions {
        width: 100%;
        flex-direction: column;
    }

    .scene-actions button,
    .final-actions button,
    .letter-actions button {
        width: 100%;
    }

    .final-line {
        margin: 10px 0 14px;
        font-size: clamp(1.38rem, 6.8vw, 1.95rem);
        line-height: 1.12;
    }

    .final-layout {
        gap: 10px;
        padding-bottom: 0;
    }

    .final-scene h2 {
        font-size: clamp(1.78rem, 7.6vw, 2.45rem);
    }

    .final-scene .scene-text {
        margin-top: 8px;
        font-size: .96rem;
    }

    .final-scene .portrait-frame img {
        height: min(25svh, 230px);
        min-height: 170px;
    }

    .portrait-frame {
        width: min(330px, 86vw);
        padding: 7px;
        border-radius: 22px;
    }

    .portrait-frame::before {
        inset: -6px;
        border-radius: 27px;
    }

    .portrait-frame img {
        height: min(34svh, 310px);
        min-height: 220px;
        border-radius: 16px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 138px;
        max-height: 48svh;
        overflow: auto;
        padding-right: 3px;
    }

    .gallery-card.featured {
        grid-column: 1 / -1;
        min-height: 185px;
    }

    .gallery-card span {
        padding: 34px 10px 10px;
        font-size: .76rem;
    }

    .wish-buttons {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .wish-token {
        min-height: 88px;
        border-radius: 18px;
        gap: 6px;
        font-size: .92rem;
    }

    .wish-token span {
        width: 30px;
        height: 30px;
    }

    .wish-panel {
        padding: 14px;
    }

    .wish-output {
        min-height: 70px;
        margin-top: 12px;
        padding: 14px;
        font-size: .95rem;
        line-height: 1.55;
    }

    .envelope {
        width: min(330px, 88vw);
        height: 170px;
    }

    .envelope p {
        font-size: clamp(1.7rem, 8vw, 2.45rem);
    }

    .birthday-letter {
        max-height: calc(100svh - 106px);
        padding: 22px;
    }

    .birthday-letter h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    #typedLetter {
        font-size: 1rem;
        line-height: 1.62;
    }

    .signature {
        margin: 14px 0;
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .music-control {
        left: 12px;
        right: 12px;
        bottom: max(8px, env(safe-area-inset-bottom));
        justify-content: center;
        gap: 6px;
        padding: 6px 8px;
        min-height: 54px;
    }

    .music-control button {
        min-height: 32px;
        padding: 0 8px;
        font-size: .75rem;
        line-height: 1.05;
        white-space: nowrap;
    }

    #volumeControl {
        width: 54px;
    }

    .music-waves {
        width: 18px;
        flex: 0 0 18px;
    }

    .music-message {
        left: 14px;
        right: 14px;
        bottom: 64px;
        text-align: center;
        font-size: .9rem;
    }

    .lightbox {
        grid-template-columns: 1fr;
        padding: 62px 14px 18px;
    }

    .lightbox-nav {
        position: static;
        width: 100%;
    }
}

@media (max-height: 640px) {
    .scene {
        align-items: start;
        padding-top: 16px;
    }

    .gift-layout {
        gap: 10px;
    }

    .premium-gift {
        margin-block: 0;
        transform: scale(.86);
    }

    .cake-stage {
        height: 300px;
    }

    .birthday-cake {
        transform: translateX(-50%) scale(.64);
    }

    .portrait-frame img {
        height: 300px;
        min-height: 240px;
    }
}

@media (max-width: 600px) and (max-height: 700px) {
    .scene {
        padding-top: 8px;
        padding-bottom: 66px;
    }

    .scene-inner {
        max-height: calc(100svh - 76px);
    }

    .cake-stage {
        height: 245px;
    }

    .birthday-cake {
        transform: translateX(-50%) scale(.5);
    }

    .final-layout {
        gap: 7px;
    }

    .final-scene .portrait-frame {
        width: min(300px, 84vw);
        padding: 6px;
    }

    .final-scene .portrait-frame img {
        height: 145px;
        min-height: 145px;
    }

    .final-scene h2 {
        font-size: clamp(1.48rem, 7vw, 2rem);
    }

    .final-scene .scene-text {
        font-size: .88rem;
        line-height: 1.45;
    }

    .final-line {
        margin: 6px 0 9px;
        font-size: clamp(1.22rem, 6vw, 1.65rem);
    }

    .final-actions {
        gap: 8px;
    }

    .final-actions .party-button,
    .final-actions .soft-button {
        min-height: 38px;
        padding-block: 8px;
        font-size: .92rem;
    }

    .music-control {
        min-height: 48px;
    }
}

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