*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#08090d;--paper:#f1eee8;--muted:#a9a5a0;--line:rgba(255,255,255,.11);--accent:#e9c9a8}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--paper);font-family:Inter,system-ui,sans-serif;font-weight:300;overflow-x:hidden}
.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.stars{position:fixed;inset:0;pointer-events:none;opacity:.6;background-image:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.5px);background-size:97px 113px;z-index:0}
main{position:relative;z-index:1}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;position:relative;overflow:hidden}
.hero-glow{position:absolute;width:70vw;height:70vw;max-width:650px;max-height:650px;border-radius:50%;background:radial-gradient(circle,rgba(221,185,148,.16),transparent 67%);filter:blur(10px)}
.eyebrow,.section-label,.date{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.hero h1{font:600 clamp(68px,16vw,150px)/.85 "Cormorant Garamond",serif;letter-spacing:-.04em;position:relative}
em{font-style:italic;color:var(--accent)}
.hero-sub{margin-top:25px;color:var(--muted);font-size:13px;letter-spacing:.04em;position:relative}
.enter{margin-top:55px;background:transparent;color:var(--paper);border:1px solid var(--line);padding:15px 20px;border-radius:100px;display:flex;gap:30px;font:400 11px Inter;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.3s}
.enter:hover{background:var(--paper);color:var(--bg)}
.section{max-width:1150px;margin:auto;padding:130px 25px}
.story-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:50px;align-items:end}
h2{font:500 clamp(50px,8vw,100px)/.86 "Cormorant Garamond",serif;letter-spacing:-.035em}
.story-intro p,.gallery-heading p{color:var(--muted);line-height:1.8;font-size:14px;max-width:450px}
.timeline{margin-top:100px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.timeline article{padding:35px 25px 20px;border-right:1px solid var(--line)}
.timeline article:last-child{border-right:0}
.timeline h3{font:500 28px "Cormorant Garamond",serif;margin:25px 0 12px}
.timeline p{font-size:13px;line-height:1.7;color:var(--muted)}
.memory-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 60px;
}

.memory {
    min-height: 390px;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 30px;
    overflow: hidden;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    border: 1px solid rgba(255,255,255,0.08);
}

.memory::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.82) 0%,
            rgba(0,0,0,0.38) 40%,
            rgba(0,0,0,0.05) 75%
        );

    z-index: 0;
}

.memory > div {
    position: relative;
    z-index: 1;
}

.memory span {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
}

.memory h3 {
    font: 500 48px "Cormorant Garamond", serif;
    margin: 8px 0;
}

.memory p {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,0.72);
    max-width: 320px;
}


/* MOBILE */

@media (max-width: 700px) {

    .memory-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 45px;
    }

    .memory {
        min-height: 390px;
        padding: 24px;
    }

    .memory h3 {
        font-size: 46px;
    }

}
.manali{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.college{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.dates{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.food {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:50px}
.gallery{margin-top:55px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.photo{aspect-ratio:1/1;overflow:hidden;background:linear-gradient(145deg,#181a20,#0e1015);position:relative}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}
.photo:hover img{transform:scale(1.05)}
.photo.empty:after{content:"your photo";position:absolute;inset:0;display:grid;place-items:center;color:#555;font:italic 25px "Cormorant Garamond"}
.gallery-note{margin-top:20px;color:#666;font-size:11px}
code{color:#aaa}
.reasons h2{margin-top:50px}
.reasons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:60px}
.reason{text-align:left;color:var(--paper);background:transparent;border:1px solid var(--line);padding:28px;min-height:170px;cursor:pointer;transition:.35s}
.reason:hover{background:rgba(255,255,255,.045);transform:translateY(-3px)}
.reason span{font-size:10px;color:#666}
.reason strong{display:block;font:500 34px "Cormorant Garamond",serif;margin:18px 0 8px}
.reason small{display:block;color:var(--muted);font-size:12px;line-height:1.6}
.letter{padding-top:70px;padding-bottom:160px}
.letter-card{max-width:780px;margin:auto;border:1px solid var(--line);padding:55px clamp(28px,7vw,80px);background:rgba(255,255,255,.018)}
.letter-card h2{font-size:62px;margin:35px 0}
.letter-text{font:400 18px/1.8 "Cormorant Garamond",serif;color:#d4d0ca}
.letter-text p{margin-bottom:23px}
.letter-text strong{font-weight:600;color:var(--paper)}
.signoff{margin-top:45px!important;font-size:21px}
.final{min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(233,201,168,.13),transparent 35%),#07080b}
.final-content{position:relative;z-index:2;padding:30px}
.final h2{font-size:clamp(70px,13vw,145px);margin:30px 0}
.final p:not(.eyebrow){color:var(--muted);font-size:13px}
.final-heart{font-size:20px;color:var(--accent);margin-top:60px;animation:pulse 2s infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.6}}
footer{text-align:center;padding:35px;color:#4e4d4a;font-size:9px;letter-spacing:.15em;text-transform:uppercase}
@media(max-width:700px){
 .section{padding:95px 20px}
 .story-intro,.timeline{grid-template-columns:1fr}
 .story-intro{gap:35px}
 .timeline{margin-top:65px}
 .timeline article{border-right:0;border-bottom:1px solid var(--line);padding:28px 0}
 .memory-grid{grid-template-columns:1fr}
 .memory{min-height:300px}
 .gallery-heading{display:block}
 .gallery-heading p{margin-top:25px}
 .gallery{grid-template-columns:repeat(2,1fr)}
 .reasons-grid{grid-template-columns:1fr}
 .letter-card{padding:38px 24px}
 .letter-card h2{font-size:54px}
 .letter-text{font-size:17px}
}

.music-toggle{position:absolute;bottom:28px;right:28px;border:1px solid var(--line);background:rgba(8,9,13,.55);backdrop-filter:blur(10px);color:#aaa;padding:10px 13px;border-radius:99px;font:9px Inter;letter-spacing:.16em;cursor:pointer;display:flex;align-items:center;gap:8px}
.music-dot{width:6px;height:6px;border-radius:50%;background:#666;display:block}
.music-toggle.playing{color:var(--accent)}
.music-toggle.playing .music-dot{background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 1s infinite}
.reasons21 h2{margin-top:50px}
.reason-list{margin-top:60px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}
.reason-list div{padding:21px 12px;border-bottom:1px solid var(--line);font:400 19px "Cormorant Garamond",serif;color:#c9c5bf}
.reason-list div:nth-child(odd){border-right:1px solid var(--line)}
.reason-list em{color:var(--accent)}
.star-section{min-height:80svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:#05070b}
.starfield{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px);background-size:83px 97px;opacity:.38;animation:drift 18s linear infinite}
.star-content{position:relative;z-index:2;padding:30px}
.star-symbol{font-size:35px;color:var(--accent);margin:35px 0}
.star-content h2{font-size:clamp(58px,9vw,105px)}
.star-content p{margin-top:35px;color:var(--muted);font-size:13px}
@keyframes drift{to{background-position:83px 97px}}
@media(max-width:700px){
 .music-toggle{right:15px;bottom:18px}
 .reason-list{grid-template-columns:1fr}
 .reason-list div:nth-child(odd){border-right:0}
 .star-section{min-height:75svh}
}

/* 60-photo chronological memory wall */
.memory-scroller-wrap{margin-top:55px;position:relative}
.memory-scroller{overflow-x:auto;overflow-y:hidden;padding:2px 0 18px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#4b4b4b transparent;overscroll-behavior-x:contain;touch-action:pan-x}
.memory-scroller::-webkit-scrollbar{height:7px}
.memory-scroller::-webkit-scrollbar-track{background:rgba(255,255,255,.035);border-radius:10px}
.memory-scroller::-webkit-scrollbar-thumb{background:#444;border-radius:10px}
.memory-rows{display:grid;grid-template-rows:repeat(3,180px);grid-auto-flow:column;grid-auto-columns:180px;gap:9px;width:max-content}
.memory-tile{position:relative;width:180px;height:180px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.08);scroll-snap-align:start}
.memory-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,filter .6s ease}
.memory-tile:hover img{transform:scale(1.045);filter:brightness(.86)}
.memory-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58),transparent 38%);pointer-events:none}
.memory-meta{position:absolute;z-index:2;left:10px;bottom:9px;right:10px;font-size:8px;letter-spacing:.13em;color:rgba(255,255,255,.82);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memory-index{position:absolute;z-index:2;top:8px;right:9px;font-size:8px;color:rgba(255,255,255,.65);letter-spacing:.08em}
.scroll-hint{text-align:center;margin-top:15px;color:#666;font-size:8px;letter-spacing:.22em;display:flex;justify-content:center;gap:14px;align-items:center}
.scroll-hint span{color:#aaa;font-size:12px}
@media(max-width:700px){
 .memory-rows{grid-template-rows:repeat(3,145px);grid-auto-columns:145px;gap:7px}
 .memory-tile{width:145px;height:145px}
 .memory-meta{font-size:7px;left:7px;bottom:7px}
 .memory-index{top:7px;right:7px}
 .memory-scroller{padding-bottom:14px}
}


/* ================================
   BUBU & DUDU GAME
================================ */

.game-section {
    max-width: 1000px;
    margin: auto;
    padding: 130px 25px;
    text-align: center;
}

.game-intro {
    margin-top: 50px;
}

.game-intro h2 {
    font-size: clamp(60px, 9vw, 105px);
}

.game-intro p {
    margin: 35px auto;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

.game-start {
    padding: 14px 25px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--paper);
    border-radius: 100px;
    font-size: 10px;
    letter-spacing: .18em;
    cursor: pointer;
    transition: .3s;
}

.game-start:hover {
    background: var(--paper);
    color: var(--bg);
}


/* GAME AREA */

.game-wrapper {
    display: none;
    margin-top: 60px;
}

.game-wrapper.active {
    display: block;
}

.game-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #777;
    font-size: 9px;
    letter-spacing: .18em;
}


/* BOARD */

.game-board {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border: 1px solid var(--line);

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(233,201,168,.08),
            transparent 55%
        ),
        #090a0f;
}


/* BUBU */

.game-character {
    position: absolute;
    width: 70px;
    height: 70px;
    left: 25px;
    top: 25px;
    z-index: 10;
    transition: left 0.08s linear, top 0.08s linear;
}

.game-character img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.game-character.dudu {
    width: 75px;
    height: 75px;
}


/* COLLECTIBLES */

.game-item {
    position: absolute;

    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    font-size: 30px;

    cursor: pointer;

    animation: itemFloat 2.5s ease-in-out infinite;

    transition:
        transform .3s,
        opacity .3s;
}

.game-item:hover {
    transform: scale(1.25);
}

.game-item.collected {
    opacity: 0;
    transform: scale(2);
    pointer-events: none;
}


/* POSITIONS */

.item-1 {
    left: 25%;
    top: 25%;
}

.item-2 {
    right: 22%;
    top: 20%;
}

.item-3 {
    left: 18%;
    bottom: 25%;
}

.item-4 {
    right: 28%;
    bottom: 23%;
}

.item-5 {
    left: 50%;
    top: 55%;
}


@keyframes itemFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


/* MESSAGE */

.game-message {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    width: 90%;

    color: var(--accent);

    font: italic 18px "Cormorant Garamond", serif;

    opacity: 0;

    transition: opacity .3s;

    pointer-events: none;
}

.game-message.show {
    opacity: 1;
}


/* CONTROLS */

.game-controls {
    margin-top: 18px;
}

.game-controls button {
    width: 44px;
    height: 44px;

    margin: 3px;

    border: 1px solid var(--line);
    background: transparent;

    color: var(--paper);

    font-size: 16px;

    cursor: pointer;
}

.game-controls button:hover {
    background: rgba(255,255,255,.06);
}


/* COMPLETE */

.game-complete {
    display: none;

    margin-top: 80px;

    padding: 70px 25px;

    border-top: 1px solid var(--line);
}

.game-complete.show {
    display: block;
}

.complete-bears {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 25px;
}

.complete-bears img {
    width: 85px;
    height: 85px;
    object-fit: contain;
}

.complete-bears span {
    font-size: 28px;
}

.game-complete h2 {
    margin: 30px 0;
    font-size: clamp(60px, 9vw, 100px);
}

.game-complete p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

.complete-message {
    margin-top: 25px;
}

.complete-message strong {
    color: var(--paper);
}

.complete-star {
    margin-top: 45px;
    color: var(--accent);
    font-size: 25px;
}


/* MOBILE */

@media (max-width: 700px) {

    .game-section {
        padding: 95px 20px;
    }

    .game-board {
        height: 430px;
    }

    .game-character {
        left: 25px;
        top: 35px;
    }

    .game-item {
        font-size: 27px;
    }

}


/* =====================================================
   DARK RASPBERRY HEARTS — BIRTHDAY WEBSITE BACKGROUND
   CSS-only: no images, HTML changes, or JS required
   ===================================================== */

:root {
    --bg: #10050c;
    --accent: #d76b9a;
}

/* Deep burgundy base with a subtle raspberry glow */
html {
    background: #10050c;
}

body {
    background:
        radial-gradient(
            ellipse at 18% 25%,
            rgba(126, 13, 64, 0.34),
            transparent 43%
        ),
        radial-gradient(
            ellipse at 82% 70%,
            rgba(103, 10, 52, 0.3),
            transparent 46%
        ),
        linear-gradient(
            155deg,
            #10050c 0%,
            #260817 48%,
            #13050e 100%
        );
    background-attachment: fixed;
}

/* Replace the original plain starfield with layered hearts */
.stars {
    background: none;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    isolation: isolate;
}

/* Glossy, dimensional raspberry hearts */
.stars::before {
    content: "♥";
    position: absolute;
    inset: 0;
    display: block;

    color: rgba(173, 28, 89, 0.43);
    font-family: Georgia, serif;
    font-size: clamp(145px, 25vw, 290px);
    line-height: 1;

    /* Multiple heart silhouettes at different positions */
    text-shadow:
        0 3px 2px rgba(255, 119, 174, 0.42),
        0 -7px 15px rgba(244, 58, 135, 0.24),
        0 14px 24px rgba(0, 0, 0, 0.65),
        25px 160px 0 rgba(125, 13, 64, 0.40),
        25px 160px 2px rgba(244, 91, 155, 0.22),
        -165px 355px 0 rgba(111, 12, 58, 0.43),
        -165px 355px 2px rgba(255, 109, 170, 0.2),
        180px 520px 0 rgba(144, 15, 71, 0.35),
        180px 520px 3px rgba(255, 113, 174, 0.19),
        -35px 710px 0 rgba(116, 12, 57, 0.38),
        -35px 710px 3px rgba(247, 89, 153, 0.2),
        190px 880px 0 rgba(137, 17, 69, 0.34);

    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
    opacity: 0.83;

    animation: raspberryDrift 24s ease-in-out infinite alternate;
    will-change: transform;
}

/* Small, restrained white starbursts */
.stars::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        /* Starburst 1 */
        radial-gradient(
            circle,
            rgba(255, 239, 248, 0.95) 0 1px,
            rgba(255, 209, 232, 0.55) 2px,
            transparent 7px
        ),
        linear-gradient(
            90deg,
            transparent 48%,
            rgba(255, 228, 242, 0.75) 49.5%,
            white 50%,
            rgba(255, 228, 242, 0.75) 50.5%,
            transparent 52%
        ),
        linear-gradient(
            0deg,
            transparent 43%,
            rgba(255, 228, 242, 0.7) 49%,
            white 50%,
            rgba(255, 228, 242, 0.7) 51%,
            transparent 57%
        ),
        /* Starburst 2 */
        radial-gradient(
            circle,
            rgba(255, 244, 250, 0.9) 0 1px,
            rgba(255, 208, 231, 0.45) 2px,
            transparent 6px
        ),
        linear-gradient(
            90deg,
            transparent 48%,
            rgba(255, 228, 242, 0.65) 49.5%,
            white 50%,
            rgba(255, 228, 242, 0.65) 50.5%,
            transparent 52%
        ),
        linear-gradient(
            0deg,
            transparent 43%,
            rgba(255, 228, 242, 0.6) 49%,
            white 50%,
            rgba(255, 228, 242, 0.6) 51%,
            transparent 57%
        );

    background-size:
        60px 60px,
        54px 54px,
        54px 54px,
        45px 45px,
        40px 40px,
        40px 40px;

    background-position:
        57% 32%,
        57% 32%,
        57% 32%,
        25% 69%,
        25% 69%,
        25% 69%;

    background-repeat: no-repeat;
    opacity: 0.43;
    animation: sparklePulse 5s ease-in-out infinite alternate;
}

/* Slow, atmospheric movement */
@keyframes raspberryDrift {
    from {
        transform: translate3d(-5px, -8px, 0);
    }
    to {
        transform: translate3d(8px, 12px, 0);
    }
}

@keyframes sparklePulse {
    from {
        opacity: 0.22;
    }
    to {
        opacity: 0.52;
    }
}

/* Keep the existing website content above the background */
main {
    position: relative;
    z-index: 1;
}

/* Keep the birthday website dark and readable */
.hero,
.section,
.star-section,
.final {
    position: relative;
}

/* Reduce movement for visitors who prefer less animation */
@media (prefers-reduced-motion: reduce) {
    .stars::before,
    .stars::after {
        animation: none;
    }
}

/* Smaller hearts on narrow phone screens */
@media (max-width: 700px) {
    .stars::before {
        font-size: 155px;
        text-shadow:
            0 3px 2px rgba(255, 119, 174, 0.35),
            0 -5px 12px rgba(244, 58, 135, 0.2),
            0 12px 20px rgba(0, 0, 0, 0.6),
            100px 155px 0 rgba(125, 13, 64, 0.4),
            -80px 340px 0 rgba(111, 12, 58, 0.4),
            120px 520px 0 rgba(144, 15, 71, 0.35),
            -35px 700px 0 rgba(116, 12, 57, 0.38),
            115px 870px 0 rgba(137, 17, 69, 0.32);
    }

    .stars::after {
        background-size:
            48px 48px,
            42px 42px,
            42px 42px,
            36px 36px,
            32px 32px,
            32px 32px;

        background-position:
            58% 28%,
            58% 28%,
            58% 28%,
            24% 67%,
            24% 67%,
            24% 67%;
    }
}



/* PERSONAL VOICE NOTE BUTTON */

.voice-note {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    margin: 30px auto 24px;
}

.voice-note-button {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;

    color: #f5dce8;
    background: rgba(104, 17, 56, 0.48);
    border: 1px solid rgba(233, 132, 174, 0.65);
    border-radius: 50%;

    font-size: 15px;
    cursor: pointer;

    box-shadow:
        0 0 0 6px rgba(181, 54, 105, 0.07),
        0 0 25px rgba(195, 52, 112, 0.15);

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.voice-note-button:hover {
    background: rgba(153, 35, 86, 0.7);
    transform: scale(1.07);

    box-shadow:
        0 0 0 8px rgba(181, 54, 105, 0.09),
        0 0 30px rgba(195, 52, 112, 0.28);
}

.voice-note-button span {
    display: block;
    margin-left: 2px;
}

.voice-note-button.playing {
    animation: voiceNotePulse 2s ease-in-out infinite;
}

.voice-note-label {
    color: #a9a0a5;
}

#voiceNoteLabel {
    margin: 0;
    color: #a9a0a5;
    font-size: 10px;
    letter-spacing: 0.13em;
    text-align: center;
}

@keyframes voiceNotePulse {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(195, 52, 112, 0.08);
    }
    50% {
        box-shadow: 0 0 0 11px rgba(195, 52, 112, 0.025);
    }
}

@media (prefers-reduced-motion: reduce) {
    .voice-note-button.playing {
        animation: none;
    }
}

/* Move the voice note upward without changing other elements */
.voice-note {
    margin-top: -35px;
}


/* FIX: lift the voice note without shifting the birthday content */

.final-content {
    position: relative;
}

.voice-note {
    position: absolute;
    left: 50%;
    top: -105px;
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    z-index: 5;
}

/* The audio should play, but must not occupy visible layout space */
#voiceNoteAudio {
    display: none;
}

/* Keep the button centered when hovered */
.voice-note-button:hover {
    transform: scale(1.07);
}

@media (max-width: 700px) {
    .voice-note {
        top: -95px;
    }
}


/* =========================================
   ROMANTIC FIVE-SONG PLAYLIST
   ========================================= */

.music-player {
    position: absolute;
    z-index: 15;
    right: 28px;
    bottom: 28px;
    font-family: Inter, sans-serif;
}

.music-player .music-toggle {
    position: static;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.playlist-chevron {
    color: #d78aaa;
    font-size: 16px;
    margin-left: 3px;
    transition: transform .25s ease;
}

.music-toggle[aria-expanded="true"] .playlist-chevron {
    transform: rotate(180deg);
}

.music-dot {
    flex-shrink: 0;
}

.music-player .music-toggle.playing .music-dot {
    background: #d76b9a;
    box-shadow: 0 0 12px #d76b9a;
    animation: pulse 1s infinite;
}

/* Dropdown panel */

.playlist-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(290px, calc(100vw - 32px));

    padding: 10px;
    border: 1px solid rgba(220, 112, 160, .24);
    border-radius: 15px;

    background: rgba(20, 7, 16, .96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
    animation: playlistAppear .2s ease-out;
}

.playlist-menu[hidden] {
    display: none;
}

@keyframes playlistAppear {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.playlist-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px 14px;

    color: #e9a3c1;
    font-size: 9px;
    letter-spacing: .16em;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.playlist-track {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 9px;

    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #eee4e9;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease;
}

.playlist-track:hover {
    background: rgba(215, 107, 154, .10);
}

.playlist-track.active {
    background: rgba(215, 107, 154, .13);
}

.track-number {
    min-width: 20px;
    color: #9d7588;
    font-size: 10px;
}

.track-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.track-info strong {
    font-size: 12px;
    font-weight: 400;
}

.track-info small {
    color: #a99aa2;
    font-size: 10px;
}

.playlist-track.active .track-info strong,
.playlist-track.active .track-play {
    color: #e879ad;
}

.track-play {
    color: #b69aaa;
    font-size: 11px;
}

.playlist-footer {
    padding: 12px 10px 7px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #a99aa2;
    font-size: 10px;
    text-align: center;
    letter-spacing: .04em;
}

@media (max-width: 700px) {
    .music-player {
        right: 15px;
        bottom: 18px;
    }

    .playlist-menu {
        width: min(280px, calc(100vw - 30px));
    }
}