/* =====================================================
   NIGHTSMILE — JAY + AMARA
   STEP 1 — OPENING + MAIN MENU
===================================================== */


/* =====================================================
   ROOT
===================================================== */

:root {

    --paper: #f6f1e8;
    --paper-light: #fbf8f2;
    --paper-dark: #e9dfd0;

    --red: #a92f38;
    --red-dark: #87252d;
    --pink: #d7a5a5;

    --ink: #292522;
    --muted-ink: #665d55;

    --shadow: rgba(72, 52, 40, 0.18);

    /* FONT SYSTEM */

    --normal: "Poppins", sans-serif;

    --script: "Parisienne", cursive;

    --marker: "Permanent Marker", cursive;

    --serif: "Playfair Display", Georgia, serif;
}


/* =====================================================
   RESET
===================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    width: 100%;
    min-height: 100%;
}


body {

    width: 100%;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255, 255, 255, 0.75),
            transparent 28%
        ),

        radial-gradient(
            circle at 80% 85%,
            rgba(205, 181, 153, 0.15),
            transparent 35%
        ),

        #e7dfd3;

    color: var(--ink);

    /* ALL NORMAL TEXT */
    font-family: var(--normal);

    overflow: hidden;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


/* =====================================================
   EXPERIENCE
===================================================== */

.experience {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
}


/* =====================================================
   SCREENS
===================================================== */

.screen {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(24px)
        scale(0.985);

    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.8s;

    pointer-events: none;
}


.screen.active {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


/* =====================================================
   PAPER SCENE
===================================================== */

.paper-scene {

    position: relative;

    width: min(100% - 32px, 1120px);

    height: min(100% - 32px, 760px);

    margin: auto;

    top: 50%;

    transform: translateY(-50%);

    overflow: hidden;

    background:

        radial-gradient(
            ellipse at 15% 10%,
            rgba(255, 255, 255, 0.8),
            transparent 35%
        ),

        radial-gradient(
            ellipse at 85% 90%,
            rgba(187, 151, 120, 0.08),
            transparent 40%
        ),

        repeating-linear-gradient(
            0deg,
            rgba(120, 90, 65, 0.018) 0,
            rgba(120, 90, 65, 0.018) 1px,
            transparent 1px,
            transparent 5px
        ),

        var(--paper);

    border-radius: 5px;

    box-shadow:
        0 25px 70px rgba(50, 39, 29, 0.18),
        0 5px 18px rgba(50, 39, 29, 0.08);

    border: 1px solid rgba(110, 82, 58, 0.12);
}


/* subtle paper edge */

.paper-scene::before {

    content: "";

    position: absolute;

    inset: 9px;

    border:
        1px solid
        rgba(126, 91, 65, 0.10);

    pointer-events: none;

    z-index: 1;
}


/* =====================================================
   OPENING
===================================================== */

.opening-content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform:
        translate(-50%, -52%);

    width: min(680px, 90%);

    text-align: center;

    z-index: 5;

    padding: 38px 42px 44px;
}

.opening-content::before {

    content: "";

    position: absolute;

    top: 0;

    right: 8%;

    width: 76px;

    height: 24px;

    background: rgba(215, 165, 165, 0.42);

    transform: rotate(6deg);

    box-shadow: 0 2px 5px rgba(72, 52, 40, 0.06);

    z-index: -1;
}

.opening-content::after {

    content: "made with love";

    position: absolute;

    left: 2%;

    top: 15%;

    padding: 7px 10px 6px;

    border: 1px solid rgba(169, 47, 56, 0.28);

    border-radius: 3px;

    color: var(--red);

    font-family: var(--marker);

    font-size: 11px;

    letter-spacing: 0.02em;

    transform: rotate(-8deg);

    opacity: 0.72;

    z-index: -1;
}


/* =====================================================
   OPENING TITLE
===================================================== */

.opening-content h1 {

    /* INTENTIONAL HANDWRITTEN FONT */
    font-family: var(--script);

    font-size:
        clamp(68px, 9vw, 100px);

    font-weight: 400;

    line-height: 0.9;

    color: var(--ink);

    letter-spacing: 0;

    transform: rotate(-3deg);

    opacity: 0;

    animation:
        openingTitleIn 1s
        0.20s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


.opening-content h1 span {

    color: var(--red);

    font-family: var(--script);

    font-size: 0.7em;

    display: inline-block;

    margin-left: 4px;

    transform: rotate(8deg);
}


/* =====================================================
   FROM AMARA
===================================================== */

.from-line {

    /* NORMAL TEXT */
    font-family: var(--normal);

    font-size:
        clamp(18px, 2.2vw, 24px);

    font-weight: 400;

    line-height: 1.25;

    color: var(--ink);

    margin-top: 18px;

    opacity: 0;

    transform: translateY(10px);

    animation:
        openingFromIn 0.8s
        0.3s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


/* =====================================================
   MAIN HEART
===================================================== */

.main-heart {

    color: var(--red);

    font-family: Georgia, serif;

    font-size: 55px;

    line-height: 1;

    margin: 20px 0 22px;

    transform:
        scale(0)
        rotate(-12deg);

    opacity: 0;

    animation:
        heartPop 0.8s
        0.3s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


/* =====================================================
   OPEN BUTTON
===================================================== */

.open-button {

    border: none;

    background: var(--red);

    color: #fff;

    min-width: 145px;

    height: 48px;

    padding: 0 24px;

    border-radius: 100px;

    /* NORMAL TEXT */
    font-family: var(--normal);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.04em;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(128, 38, 44, 0.22);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

    opacity: 0;

    animation:
        openingButtonIn 0.8s
        0.3s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


.open-button::after {

    content: "♡";

    position: absolute;

    right: -22px;

    bottom: -9px;

    color: var(--red);

    font-family: Georgia, serif;

    font-size: 16px;

    transform: rotate(12deg);
}

.open-button {
    position: relative;
}

.open-button:hover {

    background: var(--red-dark);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 26px
        rgba(128, 38, 44, 0.28);
}


.open-button:active {

    transform:
        translateY(0)
        scale(0.97);
}


.open-button .arrow {

    font-size: 18px;

    line-height: 0;

    transition:
        transform 0.25s ease;
}


.open-button:hover .arrow {

    transform:
        translateX(4px);
}


/* =====================================================
   OPENING DECORATION
===================================================== */

.opening-rose {

    position: absolute;

    width:
        clamp(110px, 17vw, 180px);

    left: -15px;

    bottom: -35px;

    opacity: 0.9;

    transform:
        rotate(-12deg);

    filter:
        drop-shadow(
            8px 10px 10px
            rgba(50, 30, 20, 0.16)
        );

    z-index: 2;

    pointer-events: none;

    animation:none
}


/* =====================================================
   HAPPY BOYFRIEND'S DAY
===================================================== */
.boyfriend-day {
    position: absolute;
    right: clamp(25px, 6vw, 75px);
    bottom: clamp(32px, 7vh, 65px);

    width: 390px;

    white-space: nowrap;

    font-family: var(--marker);
    font-size: clamp(24px, 3.2vw, 38px);
    line-height: 1.1;

    text-align: left;

    color: var(--ink);

    transform: rotate(-2deg);

    z-index: 5;
}

/* =====================================================
   DECORATIVE HEARTS
===================================================== */

.decor-heart {

    position: absolute;

    color: var(--red);

    font-family: Georgia, serif;

    z-index: 3;

    pointer-events: none;
}


.heart-one {

    top: 13%;

    left: 10%;

    font-size: 38px;

    transform:
        rotate(-15deg);

    opacity: 0.55;
}


.heart-two {

    top: 17%;

    right: 11%;

    font-size: 25px;

    transform:
        rotate(12deg);

    opacity: 0.35;
}


/* =====================================================
   MENU
===================================================== */

.menu-scene {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 50px 30px 35px;
}


/* =====================================================
   MENU HEADING
===================================================== */

.menu-heading {

    text-align: center;

    position: relative;

    z-index: 5;

    margin-bottom: 38px;
}


/* Decorative handwriting ONLY */

.small-script {

    font-family: var(--script);

    font-size:
        clamp(24px, 3vw, 34px);

    line-height: 0.95;

    transform:
        rotate(-2deg);
}


.menu-heading h2 {

    font-family: var(--script);

    font-size:
        clamp(30px, 4vw, 45px);

    font-weight: 400;

    line-height: 1;

    margin-top: 5px;

    transform:
        rotate(1deg);
}


.menu-heading h2 span {

    color: var(--red);
}


/* NORMAL TEXT */

.menu-intro {

    font-family: var(--normal);

    color: var(--muted-ink);

    font-size: 17px;

    line-height: 1.25;

    margin-top: 13px;
}


/* =====================================================
   GIFT GRID
===================================================== */

.gift-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(150px, 210px)
        );

    gap:
        clamp(14px, 2vw, 24px);

    width: 100%;

    justify-content: center;

    position: relative;

    z-index: 5;
}


/* =====================================================
   GIFT CARD
===================================================== */

.gift-card {

    position: relative;

    min-height: 235px;

    border:
        1px solid
        rgba(120, 90, 65, 0.13);

    border-radius: 20px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,0.62),
            rgba(235,224,210,0.5)
        );

    box-shadow:

        0 8px 25px
        rgba(72, 52, 40, 0.09),

        inset 0 1px 0
        rgba(255,255,255,0.7);

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 22px 15px;

    color: var(--ink);

    transition:

        transform
        0.35s
        cubic-bezier(0.22, 1, 0.36, 1),

        box-shadow
        0.35s ease,

        background
        0.35s ease;
}


.gift-card:nth-child(1) {

    transform:
        rotate(-1.5deg);
}


.gift-card:nth-child(2) {

    transform:
        rotate(1deg);
}


.gift-card:nth-child(3) {

    transform:
        rotate(-0.7deg);
}


.gift-card:hover {

    transform:
        translateY(-8px)
        rotate(0deg);

    box-shadow:
        0 18px 38px
        rgba(72, 52, 40, 0.15);
}


.gift-card:active {

    transform:
        translateY(-2px)
        scale(0.98);
}


/* =====================================================
   GIFT OBJECTS
===================================================== */

.gift-object {

    width: 105px;

    height: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    position: relative;
}


/* =====================================================
   REAL SCRAPBOOK IMAGE
===================================================== */

.real-scrapbook-cover {

    width: 100px;

    height: 100px;

    object-fit: cover;

    border-radius: 10px;

    transform:
        rotate(-4deg);

    box-shadow:
        5px 8px 15px
        rgba(50, 30, 20, 0.18);
}


/* =====================================================
   OLD MINI BOOK
===================================================== */

.mini-book {

    width: 70px;

    height: 88px;

    border-radius:
        5px 7px 7px 5px;

    background:

        linear-gradient(
            100deg,
            #78242b,
            #a52f38 45%,
            #8e272f
        );

    color: #f5e8d8;

    box-shadow:

        -5px 4px 0 #5d1e24,

        7px 10px 17px
        rgba(50, 30, 20, 0.22);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    transform:
        rotate(-6deg);

    position: relative;

    overflow: hidden;
}


.mini-book::after {

    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(255,255,255,0.18);

    pointer-events: none;
}


.mini-book span {

    font-family: var(--script);

    font-size: 14px;

    line-height: 0.95;

    text-align: center;

    position: relative;

    z-index: 2;
}


.mini-book small {

    font-family: Georgia, serif;

    font-size: 16px;

    margin-top: 8px;

    color: #e9a5a5;

    position: relative;

    z-index: 2;
}


/* =====================================================
   RECORD
===================================================== */

.record {

    width: 84px;

    height: 84px;

    border-radius: 50%;

    background:

        repeating-radial-gradient(
            circle,
            #171515 0,
            #171515 2px,
            #242020 3px,
            #171515 4px
        );

    box-shadow:
        4px 8px 15px
        rgba(40, 30, 25, 0.24);

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        rotate(-12deg);
}


.record-label {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: var(--red);

    color: #f8e9da;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: Georgia, serif;

    font-size: 15px;
}


/* =====================================================
   ENVELOPE
===================================================== */

.mini-envelope {

    width: 85px;

    height: 60px;

    background: #eee2d2;

    border:
        1px solid
        rgba(95, 70, 50, 0.18);

    box-shadow:
        5px 9px 16px
        rgba(50, 35, 25, 0.16);

    position: relative;

    transform:
        rotate(5deg);
}


.mini-envelope::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 0;

    border-left:
        42px solid transparent;

    border-right:
        42px solid transparent;

    border-top:
        30px solid #d9c9b6;
}


.mini-envelope::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 0;

    border-left:
        42px solid #e7dacb;

    border-right:
        42px solid #e7dacb;

    border-bottom:
        30px solid transparent;
}


.mini-envelope span {

    position: absolute;

    z-index: 3;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    color: var(--red);

    font-size: 20px;
}


/* =====================================================
   GIFT TITLES
===================================================== */

/* NORMAL TEXT = POPPINS */

.gift-title {

    font-family: var(--normal);

    font-size: 18px;

    font-weight: 500;

    line-height: 1.15;

    text-align: center;

    color: var(--ink);
}


.gift-heart {

    position: absolute;

    right: 15px;

    top: 12px;

    color: var(--red);

    font-family: Georgia, serif;

    font-size: 18px;
}


/* =====================================================
   MENU FOOTER
===================================================== */

.menu-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 34px;

    position: relative;

    z-index: 5;
}


/* NORMAL TEXT = POPPINS */

.menu-footer p {

    font-family: var(--normal);

    font-size: 15px;

    line-height: 1.05;

    color: var(--muted-ink);

    text-align: center;
}


.footer-line {

    width: 35px;

    height: 1px;

    background:
        rgba(116, 84, 61, 0.28);
}


/* =====================================================
   PLACEHOLDERS
===================================================== */

.placeholder-screen {

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--paper);
}


.placeholder-content {

    text-align: center;

    font-family: var(--normal);
}


.placeholder-content span {

    font-size: 40px;
}


.placeholder-content h2 {

    font-family: var(--script);

    font-size: 40px;

    margin: 10px 0;
}


.placeholder-content p {

    color: var(--muted-ink);

    font-family: var(--normal);
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(18px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes openingTitleIn {

    from {

        opacity: 0;

        transform:
            translateY(18px)
            rotate(-3deg)
            scale(0.96);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            rotate(-3deg)
            scale(1);
    }
}


@keyframes openingFromIn {

    from {

        opacity: 0;

        transform:
            translateY(12px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes heartPop {

    0% {

        opacity: 0;

        transform:
            scale(0)
            rotate(-12deg);
    }

    65% {

        opacity: 1;

        transform:
            scale(1.12)
            rotate(4deg);
    }

    100% {

        opacity: 1;

        transform:
            scale(1)
            rotate(0);
    }
}


@keyframes openingButtonIn {

    from {

        opacity: 0;

        transform:
            translateY(14px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}

@media (max-width: 700px) {

    /* Keep the opening content area where its decorations belong */
    .opening-screen .opening-content {
        top: 50%;
        left: 50%;
        width: 90%;
        transform: translate(-50%, -52%);
        text-align: center;
    }

    /* Move ONLY the actual content down */
    .opening-screen .opening-content h1 {
        font-size: clamp(58px, 17vw, 78px);
        position: relative;
        top: 60px;
    }

    .opening-screen .from-line {
        font-family: var(--normal);
        font-size: 19px;
        line-height: 1.25;
        margin-top: 77px;
    }

    .opening-screen .main-heart {
        font-size: 48px;
        margin: 22px 0 24px;
    }

    .opening-screen .open-button {
        height: 48px;
        min-width: 145px;
    }

    /* Happy Boyfriend's Day */
    .opening-screen .boyfriend-day {
        right: 52px;
        bottom: 78px;
        width: 150px;
        font-family: var(--marker);
        font-size: 25px;
        line-height: 1.15;
        text-align: left;
        white-space: normal;
        transform: rotate(-3deg);
        z-index: 5;
    }
}

@media (max-width: 380px) {

    .opening-screen .opening-content {
        top: 50%;
        width: 92%;
    }

    .opening-screen .opening-content h1 {
        font-size: 52px;
        top: 48px;
    }

    .opening-screen .from-line {
        font-size: 18px;
        margin-top: 68px;
    }

    .opening-screen .main-heart {
        font-size: 42px;
        margin: 20px 0 22px;
    }

    .opening-screen .boyfriend-day {
        right: 12px;
        bottom: 105px;
        width: 135px;
        font-size: 17px;
    }
}
.opening-screen .opening-content h1 span {
    display: none;
}
/* =====================================================
   SCREEN 2 — MOBILE
   ===================================================== */

@media (max-width: 700px) {

    .menu-screen .menu-scene {
        width: calc(100% - 24px);
        height: calc(100% - 24px);
        padding: 32px 16px 24px;
    }

    /* Heading */
    .menu-screen .menu-heading {
        margin-bottom: 24px;
    }

    .menu-screen .small-script {
        font-size: 25px;
    }

    .menu-screen .menu-heading h2 {
        font-size: 38px;
        margin-top: 4px;
    }

    .menu-screen .menu-intro {
        font-size: 14px;
        line-height: 1.35;
        margin-top: 10px;
    }

    /* 2 cards on top, 1 centered underneath */
    .menu-screen .gift-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
        max-width: 360px;
    }

    .menu-screen .gift-card {
        min-height: 190px;
        width: 100%;
        padding: 18px 10px;
        border-radius: 17px;
    }

    /* Third card centered */
    .menu-screen .gift-card:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 14px) / 2);
    }

    /* Objects */
    .menu-screen .gift-object {
        width: 82px;
        height: 82px;
        margin-bottom: 12px;
    }

    .menu-screen .real-scrapbook-cover {
        width: 78px;
        height: 78px;
    }

    .menu-screen .record {
        width: 70px;
        height: 70px;
    }

    .menu-screen .record-label {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .menu-screen .mini-envelope {
        width: 72px;
        height: 51px;
    }

    .menu-screen .mini-envelope::before {
        border-left-width: 36px;
        border-right-width: 36px;
        border-top-width: 25px;
    }

    .menu-screen .mini-envelope::after {
        border-left-width: 36px;
        border-right-width: 36px;
        border-bottom-width: 25px;
    }

    .menu-screen .mini-envelope span {
        font-size: 17px;
    }

    /* Card titles */
    .menu-screen .gift-title {
        font-size: 14px;
        line-height: 1.2;
    }

    .menu-screen .gift-heart {
        right: 10px;
        top: 9px;
        font-size: 16px;
    }

    /* Footer */
    .menu-screen .menu-footer {
        margin-top: 22px;
        gap: 10px;
    }

    .menu-screen .menu-footer p {
        font-size: 12px;
        line-height: 1.1;
    }

    .menu-screen .footer-line {
        width: 25px;
    }
}


/* Smaller phones */
@media (max-width: 380px) {

    .menu-screen .menu-scene {
        padding: 27px 13px 20px;
    }

    .menu-screen .menu-heading {
        margin-bottom: 19px;
    }

    .menu-screen .small-script {
        font-size: 23px;
    }

    .menu-screen .menu-heading h2 {
        font-size: 34px;
    }

    .menu-screen .menu-intro {
        font-size: 13px;
        margin-top: 8px;
    }

    .menu-screen .gift-grid {
        gap: 11px;
        max-width: 330px;
    }

    .menu-screen .gift-card {
        min-height: 175px;
        padding: 15px 8px;
    }

    .menu-screen .gift-card:nth-child(3) {
        width: calc((100% - 11px) / 2);
    }

    .menu-screen .gift-object {
        width: 72px;
        height: 72px;
        margin-bottom: 10px;
    }

    .menu-screen .real-scrapbook-cover {
        width: 70px;
        height: 70px;
    }

    .menu-screen .record {
        width: 62px;
        height: 62px;
    }

    .menu-screen .gift-title {
        font-size: 13px;
    }

    .menu-screen .menu-footer {
        margin-top: 17px;
    }

    .menu-screen .menu-footer p {
        font-size: 11px;
    }
}
/* =========================================================
   SCREEN 3 — OUR LITTLE STORY
   ========================================================= */

.scrapbook-screen {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(215,165,165,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(169,47,56,.06),
            transparent 28%
        ),
        var(--paper);
}


/* ---------------------------------------------------------
   SCENE
--------------------------------------------------------- */

.scrapbook-scene {

    position: relative;

    width: min(1120px, calc(100% - 32px));
    height: min(760px, calc(100% - 32px));

    margin: 0 auto;

    top: 50%;

    transform: translateY(-50%);

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 15% 10%,
            rgba(255,255,255,.8),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 85% 90%,
            rgba(187,151,120,.08),
            transparent 40%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(120,90,65,.018) 0,
            rgba(120,90,65,.018) 1px,
            transparent 1px,
            transparent 5px
        ),
        var(--paper);

    border:
        1px solid rgba(110,82,58,.12);

    border-radius: 5px;

    box-shadow:
        0 25px 70px rgba(50,39,29,.18),
        0 5px 18px rgba(50,39,29,.08);

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ---------------------------------------------------------
   BACK
--------------------------------------------------------- */

.scrapbook-back {

    position: absolute;

    top: 28px;
    left: 32px;

    border: 0;
    background: transparent;

    font-family: var(--normal);
    font-size: 13px;

    color: var(--muted-ink);

    cursor: pointer;

    z-index: 30;

    transition:
        color .2s ease,
        transform .2s ease;
}

.scrapbook-back:hover {
    color: var(--red);
    transform: translateX(-3px);
}


/* ---------------------------------------------------------
   HEADING
--------------------------------------------------------- */

.scrapbook-heading {

    position: relative;

    margin-top: 45px;

    text-align: center;

    z-index: 20;
}

.scrapbook-heading span {

    display: block;

    font-family: var(--script);

    font-size: 36px;

    line-height: 1;

    color: var(--red);

    transform: rotate(-2deg);
}

.scrapbook-heading h2 {

    margin-top: 8px;

    font-family: var(--normal);

    font-size: 15px;

    font-weight: 500;

    letter-spacing: .04em;

    color: var(--ink);
}


/* ---------------------------------------------------------
   CLOSED BOOK
--------------------------------------------------------- */

.scrapbook-cover-view {

    flex: 1;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding-bottom: 45px;

    animation:
        scrapbookFadeIn
        .7s
        ease
        both;
}

.scrapbook-cover {

    display: block;

    width: clamp(250px, 31vw, 355px);

    max-height: 54vh;

    object-fit: contain;

    filter:
        drop-shadow(
            0 22px 22px
            rgba(72,52,40,.20)
        )
        drop-shadow(
            0 5px 7px
            rgba(72,52,40,.12)
        );

    transform: rotate(-1.5deg);

    transition:
        transform .35s ease,
        filter .35s ease;
}

.scrapbook-cover:hover {

    transform:
        rotate(0deg)
        translateY(-5px);

    filter:
        drop-shadow(
            0 27px 25px
            rgba(72,52,40,.22)
        );
}


/* ---------------------------------------------------------
   OPEN BUTTON
--------------------------------------------------------- */

.scrapbook-open-button {

    margin-top: 25px;

    min-width: 155px;
    height: 46px;

    padding: 0 22px;

    border: 0;
    border-radius: 999px;

    background: var(--red);
    color: white;

    font-family: var(--normal);
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    box-shadow:
        0 8px 18px
        rgba(169,47,56,.18);

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

.scrapbook-open-button:hover {

    background: var(--red-dark);

    transform: translateY(-2px);

    box-shadow:
        0 11px 22px
        rgba(169,47,56,.23);
}

.scrapbook-open-button span {
    margin-left: 5px;
}


/* ---------------------------------------------------------
   OPEN BOOK VIEW
--------------------------------------------------------- */

.scrapbook-book-view {

    flex: 1;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    padding:
        5px
        25px
        20px;

    animation:
        scrapbookBookOpen
        .65s
        ease
        both;
}

.scrapbook-book-view[hidden] {
    display: none !important;
}


/* ---------------------------------------------------------
   BOOK
--------------------------------------------------------- */

.scrapbook-book {

    position: relative;

    width: min(900px, 92%);

    height: min(540px, 65vh);

    perspective: 1800px;

    perspective-origin:
        center center;

    transform-style: preserve-3d;
}


/* Actual open-book image */

.scrapbook-open-art {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;

    z-index: 1;

    filter:
        drop-shadow(
            0 18px 25px
            rgba(72,52,40,.18)
        );
}


/* ---------------------------------------------------------
   PHOTO LAYER
--------------------------------------------------------- */

.book-photo-layer {

    position: absolute;

    left: 12%;
    right: 12%;

    top: 13%;
    bottom: 13%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    z-index: 5;

    pointer-events: none;
}

.book-photo-side {

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;
}


/* ---------------------------------------------------------
   PHOTO
--------------------------------------------------------- */

.photo-card {

    position: relative;

    width: 58%;

    max-width: 195px;

    padding:
        9px
        9px
        24px;

    background:
        #fffdf9;

    box-shadow:
        0 7px 13px
        rgba(55,40,30,.18),
        0 2px 4px
        rgba(55,40,30,.08);
}

.photo-card img {

    display: block;

    width: 100%;

    height: auto;

    max-height: 220px;

    object-fit: contain;
}

.left-side .photo-card {
    transform: rotate(-2.5deg);
}

.right-side .photo-card {
    transform: rotate(2deg);
}


/* ---------------------------------------------------------
   WASHI TAPE
--------------------------------------------------------- */

.photo-tape {

    position: absolute;

    width: 58px;
    height: 17px;

    top: -9px;
    left: 50%;

    transform:
        translateX(-50%)
        rotate(-4deg);

    background:
        rgba(215,165,165,.75);

    box-shadow:
        0 1px 3px
        rgba(60,40,30,.08);

    z-index: 10;
}

.right-side .photo-tape {
    transform:
        translateX(-50%)
        rotate(4deg);
}


/* ---------------------------------------------------------
   SHORT HANDWRITTEN NOTE
--------------------------------------------------------- */

.photo-note {

    margin-top: 9px;

    font-family: var(--marker);

    font-size: 10px;

    line-height: 1.25;

    text-align: center;

    color: var(--ink);

    transform: rotate(-1deg);
}

.right-side .photo-note {
    transform: rotate(1deg);
}


/* ---------------------------------------------------------
   DOODLE
--------------------------------------------------------- */

.photo-doodle {

    position: absolute;

    right: -8px;
    bottom: -11px;

    color: var(--red);

    font-family: Georgia, serif;

    font-size: 19px;

    transform:
        rotate(12deg);
}


/* ---------------------------------------------------------
   TURNING PAGE
--------------------------------------------------------- */

.turning-sheet {

    position: absolute;

    top: 13%;
    right: 12%;

    width: 38%;
    height: 74%;

    z-index: 15;

    display: none;

    transform-style: preserve-3d;

    transform-origin:
        left center;
}

.turning-face {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(120,90,65,.08),
            rgba(255,255,255,.5) 9%,
            rgba(255,255,255,.12)
        );

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transform-style: preserve-3d;

    box-shadow:
        3px 5px 12px
        rgba(55,40,30,.14);
}

.turning-front {
    transform: rotateY(0);
}

.turning-back {
    transform: rotateY(180deg);
}


/* Photo on turning page */

.turning-photo-card {

    position: absolute;

    width: 58%;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%)
        rotate(2deg);

    padding:
        9px
        9px
        24px;

    background: #fffdf9;

    box-shadow:
        0 7px 13px
        rgba(55,40,30,.18);
}

.turning-photo-card img {

    display: block;

    width: 100%;

    height: auto;

    max-height: 220px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   REVEAL
--------------------------------------------------------- */

.reveal-layer {

    position: absolute;

    left: 12%;
    right: 12%;

    top: 13%;
    bottom: 13%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    z-index: 3;

    pointer-events: none;

    opacity: 0;
}

.reveal-photo-side {

    display: flex;

    align-items: center;
    justify-content: center;
}

.reveal-layer .photo-card {
    width: 58%;
}


/* ---------------------------------------------------------
   PAGE TURN ANIMATION
--------------------------------------------------------- */

.turning-sheet.turn-next {

    display: block;

    animation:
        pageFlipNext
        .95s
        cubic-bezier(.645,.045,.355,1)
        forwards;
}

@keyframes pageFlipNext {

    0% {
        transform:
            rotateY(0deg);
    }

    45% {
        transform:
            rotateY(-90deg);
    }

    100% {
        transform:
            rotateY(-180deg);
    }
}


.turning-sheet.turn-prev {

    display: block;

    left: 12%;
    right: auto;

    transform-origin:
        right center;

    animation:
        pageFlipPrev
        .95s
        cubic-bezier(.645,.045,.355,1)
        forwards;
}

@keyframes pageFlipPrev {

    0% {
        transform:
            rotateY(0deg);
    }

    45% {
        transform:
            rotateY(90deg);
    }

    100% {
        transform:
            rotateY(180deg);
    }
}


/* ---------------------------------------------------------
   CONTROLS
--------------------------------------------------------- */

.scrapbook-controls {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    z-index: 30;
}

.scrapbook-controls button {

    width: 34px;
    height: 34px;

    border:
        1px solid
        rgba(72,52,40,.15);

    border-radius: 50%;

    background:
        var(--paper-light);

    color: var(--ink);

    font-family: var(--normal);

    cursor: pointer;

    transition:
        .2s ease;
}

.scrapbook-controls button:hover:not(:disabled) {

    background: var(--red);

    color: white;

    transform: scale(1.05);
}

.scrapbook-controls button:disabled {

    opacity: .35;

    cursor: default;
}

#scrapbookCounter {

    min-width: 55px;

    text-align: center;

    font-family: var(--normal);

    font-size: 11px;

    color: var(--muted-ink);

    letter-spacing: .08em;
}

.scrapbook-swipe-hint {

    margin: 0 0 5px;

    font-family: var(--marker);

    font-size: 10px;

    color:
        rgba(102,93,85,.65);
}

@media (max-width: 700px) {

    .scrapbook-scene {
        width: calc(100% - 24px);
        height: calc(100% - 24px);
    }

    .scrapbook-back {
        top: 19px;
        left: 18px;
        font-size: 11px;
    }

    .scrapbook-heading {
        margin-top: 200px;
    }

    .scrapbook-heading span {
        font-size: 30px;
    }

    .scrapbook-heading h2 {
        font-size: 12px;
        margin-top: 6px;
    }

    /* CLOSED BOOK + OPEN BOOK BUTTON */
    .scrapbook-cover-view {
        transform: translateY(-45px);
    }

    .scrapbook-cover {
        width: min(72vw, 300px);
        max-height: 48vh;
    }

    .scrapbook-open-button {
        height: 44px;
        min-width: 145px;
        margin-top: 10px;
        font-size: 12px;
    }

    /* OPEN BOOK */
 .scrapbook-book-view {
    padding: 0 2px 0;
    margin-top: -55px;
}

    .scrapbook-book {
        width: 100%;
        height: min(440px, 59vh);
    }

    /* CONTROLS CLOSE TO BOOK */
.scrapbook-controls {
    gap: 12px;
    margin-top: -2px;
}

    .scrapbook-controls button {
        width: 31px;
        height: 31px;
    }

.scrapbook-swipe-hint {
    font-size: 20px;
    margin-top: 3px;
    margin-bottom: 0;
}

    .scrapbook-close-button {
        margin-top: 5px;
    }

    .book-photo-layer {
        left: 9%;
        right: 9%;
        top: 14%;
        bottom: 14%;
    }

    .photo-card {
        width: 62%;
        max-width: 145px;
        padding: 6px 6px 18px;
    }

    .photo-card img {
        max-height: 170px;
    }

    .photo-note {
        margin-top: 6px;
        font-size: 8px;
        line-height: 1.2;
    }

    .photo-tape {
        width: 43px;
        height: 13px;
        top: -7px;
    }

    .photo-doodle {
        font-size: 14px;
        right: -5px;
        bottom: -8px;
    }

    .turning-sheet {
        top: 14%;
        right: 9%;
        width: 41%;
        height: 72%;
    }

    .turning-sheet.turn-prev {
        left: 9%;
        right: auto;
    }

    .turning-photo-card {
        width: 62%;
        padding: 6px 6px 18px;
    }

    .turning-photo-card img {
        max-height: 170px;
    }
}


@media (max-width: 380px) {

    .scrapbook-heading {
        margin-top: 65px;
    }

    .scrapbook-heading span {
        font-size: 27px;
    }

    .scrapbook-cover-view {
        transform: translateY(-40px);
    }

    .scrapbook-book-view {
        transform: translateY(-35px);
    }

    .scrapbook-book {
        height: min(390px, 56vh);
    }

    .scrapbook-controls {
        margin-top: 3px;
    }

    .photo-card {
        width: 66%;
        padding: 5px 5px 16px;
    }

    .photo-card img {
        max-height: 145px;
    }

    .photo-note {
        font-size: 7px;
    }
}

/* ---------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------- */

@keyframes scrapbookFadeIn {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

@keyframes scrapbookBookOpen {

    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* =========================================================
   SCRAPBOOK — OUTSIDE DOODLES
========================================================= */

.scrapbook-doodles {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
}

.doodle {
    position: absolute;
    color: var(--red);
    opacity: .65;
}

.doodle-heart {
    left: 13%;
    top: 25%;
    font-family: Georgia, serif;
    font-size: 28px;
    transform: rotate(-12deg);
}

.doodle-star {
    right: 14%;
    top: 20%;
    font-family: Georgia, serif;
    font-size: 20px;
    transform: rotate(12deg);
}

.doodle-spark {
    left: 8%;
    bottom: 25%;
    font-family: Georgia, serif;
    font-size: 22px;
    transform: rotate(-15deg);
}

.doodle-line {
    right: 8%;
    bottom: 24%;
    font-family: var(--marker);
    font-size: 28px;
    transform: rotate(8deg);
}

.doodle-mini-heart {
    right: 17%;
    bottom: 18%;
    font-family: Georgia, serif;
    font-size: 14px;
    transform: rotate(15deg);
}
@media (max-width: 700px) {

    .doodle-heart {
        font-size: 21px;
    }

    .doodle-star {
        font-size: 16px;
    }

    .doodle-spark {
        font-size: 17px;
    }

    .doodle-line {
        font-size: 21px;
    }

    .doodle-mini-heart {
        font-size: 12px;
    }
}
/* =========================================================
   CLOSE SCRAPBOOK
========================================================= */

.scrapbook-close-button {
    display: none;

    border: 1px solid rgba(169,47,56,.25);
    background: transparent;

    color: var(--red);

    padding: 8px 18px;

    border-radius: 999px;

    font-family: var(--normal);
    font-size: 11px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.scrapbook-close-button:hover {
    background: var(--red);
    color: white;
    transform: translateY(-2px);
}

.scrapbook-close-button.show {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* =========================================================
   SCREEN 4 — SONGS THAT REMIND ME OF YOU
========================================================= */

.music-screen {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(215,165,165,.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(169,47,56,.06),
            transparent 35%
        ),
        #e7dfd3;
}


/* =========================================================
   MUSIC SCENE
========================================================= */

.music-scene {
    position: relative;

    width: min(1400px, calc(100% - 80px));
    height: calc(100% - 48px);

    margin: 24px auto;
    padding: 45px 70px 25px;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            ellipse at 15% 10%,
            rgba(255,255,255,.8),
            transparent 35%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(120,90,65,.018) 0,
            rgba(120,90,65,.018) 1px,
            transparent 1px,
            transparent 5px
        ),
        var(--paper);

    border: 1px solid rgba(110,82,58,.12);
    border-radius: 5px;

    box-shadow:
        0 25px 70px rgba(50,39,29,.18),
        0 5px 18px rgba(50,39,29,.08);

    overflow: hidden;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.music-back {
    position: absolute;

    top: 48px;
    left: 38px;

    border: none;
    background: transparent;

    color: var(--muted-ink);
    font-family: var(--normal);
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;
    z-index: 10;

    transition: .2s ease;
}

.music-back:hover {
    color: var(--red);
    transform: translateX(-3px);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.music-layout {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;
    gap: 65px;

    padding: 35px 15px 20px;
}


/* =========================================================
   ALBUM COLUMN
========================================================= */

.music-album-column {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.album-cover-wrap {
    width: min(100%, 560px);

    position: relative;

    transform: rotate(-2deg);

    filter:
        drop-shadow(
            0 22px 22px
            rgba(72,52,40,.20)
        );

    transition:
        transform .35s ease;
}

.album-cover-wrap:hover {
    transform:
        rotate(0deg)
        translateY(-5px);
}

.music-album-cover {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    border: 8px solid #f5ecdf;

    box-shadow:
        0 0 0 1px rgba(90,65,48,.12);
}


/* =========================================================
   ALBUM CAPTION
========================================================= */

.album-caption {
    width: 100%;

    text-align: center;
    margin-top: 18px;
}

.album-caption span {
    display: block;

    font-family: var(--script);
    color: var(--red);

    font-size: 27px;
}

.album-caption p {
    margin-top: 3px;

    font-family: var(--normal);
    color: var(--muted-ink);

    font-size: 11px;
}


/* =========================================================
   HIDE CASSETTE FROM ALBUM COLUMN
========================================================= */

.music-album-column > .cassette-area {
    display: none;
}


/* =========================================================
   MUSIC CONTENT
========================================================= */

.music-content {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =========================================================
   HEADING
========================================================= */

.music-heading {
    margin-bottom: 18px;
}

.music-heading span {
    display: block;

    font-family: var(--script);
    color: var(--red);

    font-size: 38px;
    line-height: .9;

    transform: rotate(-2deg);
}

.music-heading h2 {
    font-family: var(--script);

    color: var(--red);

    font-size: 64px;
    font-weight: 400;
    line-height: 1;

    margin-top: 8px;

    transform: rotate(1deg);
}

.music-heading p {
    font-family: var(--normal);
    color: var(--muted-ink);

    font-size: 15px;
    line-height: 1.5;

    margin-top: 14px;
}


/* =========================================================
   CASSETTE BESIDE SONG HEADING
========================================================= */

.music-content > .cassette-area {
    width: 100%;
    height: auto;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    margin: 5px 0 25px;
}

.music-content > .cassette-area .cassette-tape {
    position: relative;

    width: 290px;
    height: 160px;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #604c43,
            #80675a 40%,
            #403631
        );

    border: 3px solid #3b302b;

    box-shadow:
        4px 7px 15px
        rgba(50,30,20,.22);

    overflow: hidden;

    transform: rotate(2deg);
}

.music-content > .cassette-area .cassette-tape::before {
    content: "";

    position: absolute;
    inset: 7px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 5px;
}

.music-content > .cassette-area .cassette-label {
    position: absolute;

    left: 25px;
    right: 25px;
    top: 25px;

    height: 70px;

    background: #ead9c8;
    border-radius: 2px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 2px 4px rgba(40,25,18,.13);

    z-index: 2;
}

.music-content > .cassette-area .cassette-title {
    font-family: var(--marker);
    font-size: 17px;

    text-align: center;
}

.music-content > .cassette-area .cassette-subtitle {
    font-family: var(--normal);
    font-size: 9px;

    margin-top: 4px;
    letter-spacing: .1em;
}

.music-content > .cassette-area .cassette-window {
    position: absolute;

    left: 67px;
    right: 67px;
    bottom: 20px;

    height: 31px;

    background: #302925;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 2px;
}

.music-content > .cassette-area .cassette-reel {
    width: 27px;
    height: 27px;

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 0deg,
            #a98f7b 0deg 30deg,
            #4a3b34 30deg 60deg
        );

    border: 3px solid #c4aa95;

    display: flex;
    align-items: center;
    justify-content: center;
}

.music-content > .cassette-area .cassette-reel span {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #342b27;
}


/* =========================================================
   SONG LIST
========================================================= */

.song-list {
    width: 100%;

    border-top:
        1px solid
        rgba(110,82,58,.15);
}

.song-item {
    display: flex;
    align-items: center;

    min-height: 64px;
    padding: 7px 4px;

    border-bottom:
        1px solid
        rgba(110,82,58,.15);

    transition:
        background .2s ease,
        padding .2s ease;
}

.song-item:hover,
.song-item.active-song {
    background: rgba(215,165,165,.10);
    padding-left: 9px;
}

.song-art {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;

    color: #f7dfc9;
    font-family: Georgia, serif;
    font-size: 23px;
}

.song-art-one {
    background: linear-gradient(145deg, #9b4b42, #4b3330);
}

.song-art-two {
    background: linear-gradient(145deg, #b58b73, #684c43);
}

.song-art-three {
    background: linear-gradient(145deg, #b77b83, #633c47);
}

.song-info {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    margin-left: 13px;
}

.song-info strong {
    font-family: var(--normal);

    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
}

.song-info span {
    font-family: var(--normal);

    color: var(--muted-ink);
    font-size: 10px;

    margin-top: 4px;
}

.song-play {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    border: 1px solid rgba(169,47,56,.3);
    border-radius: 50%;

    background: transparent;
    color: var(--red);

    font-size: 9px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .2s ease;
}

.song-play:hover {
    background: var(--red);
    color: white;
    transform: scale(1.05);
}

.song-more {
    border: none;
    background: transparent;

    color: var(--red);
    cursor: pointer;

    font-size: 18px;
    margin-left: 6px;
}


/* =========================================================
   PLAY ALL
========================================================= */

.play-all-button {
    align-self: flex-start;

    margin-top: 18px;

    border: none;

    background: var(--red);
    color: white;

    border-radius: 999px;

    min-width: 165px;
    height: 48px;

    padding: 0 16px;

    display: flex;
    align-items: center;
    gap: 10px;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(128,38,44,.20);

    transition: .25s ease;
}

.play-all-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 13px 25px
        rgba(128,38,44,.25);
}

.play-circle {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: rgba(255,255,255,.17);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
}

.play-all-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.play-all-text strong {
    font-family: var(--normal);
    font-size: 11px;
}

.play-all-text small {
    font-family: var(--normal);
    font-size: 8px;

    opacity: .7;
    margin-top: 2px;
}


/* =========================================================
   FOOTER
========================================================= */

.music-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: auto;
}

.music-footer span {
    width: 25px;
    height: 1px;

    background: rgba(169,47,56,.28);
}

.music-footer p {
    font-family: var(--marker);

    font-size: 10px;
    color: var(--muted-ink);

    transform: rotate(-2deg);
}


/* =========================================================
   MINI PLAYER
========================================================= */

.mini-music-player {
    position: absolute;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    width: min(92%, 430px);
    min-height: 58px;

    border: none;
    border-radius: 9px;

    background: #f5e5d4;
    color: var(--ink);

    box-shadow:
        0 12px 28px
        rgba(50,30,20,.22);

    display: none;
    align-items: center;

    padding: 7px 10px;

    cursor: pointer;
    z-index: 40;

    text-align: left;
}

.mini-music-player.show {
    display: flex;
}

.mini-song-art {
    width: 43px;
    height: 43px;

    flex-shrink: 0;
    overflow: hidden;

    border-radius: 3px;
}

.mini-song-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-song-info {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding-left: 10px;
    min-width: 0;
}

.mini-song-info strong {
    font-family: var(--normal);

    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-song-info span {
    font-family: var(--normal);

    font-size: 9px;
    color: var(--muted-ink);

    margin-top: 2px;
}

.mini-play {
    color: var(--red);
    font-size: 14px;
    padding: 10px;
}

.mini-expand {
    color: var(--red);
    font-size: 14px;
    padding: 10px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .music-scene {
        width: calc(100% - 24px);
        height: calc(100% - 24px);

        margin: 12px auto;
        padding: 48px 15px 25px;

        overflow-y: auto;
    }

    .music-back {
        top: 17px;
        left: 17px;
        font-size: 10px;
    }

    .music-layout {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;

        gap: 25px;
        padding: 0;
    }

    .music-album-column {
        width: 100%;
    }

    .album-cover-wrap {
        width: min(85vw, 350px);
    }

    .music-content {
        width: 100%;
        align-items: center;
    }

    .music-heading {
        text-align: center;
    }

    .music-heading span {
        font-size: 24px;
    }

    .music-heading h2 {
        font-size: 39px;
    }

    .music-heading p {
        font-size: 11px;
    }

    .music-content > .cassette-area {
        justify-content: center;
        margin: 15px 0 25px;
    }

    .music-content > .cassette-area .cassette-tape {
        width: 245px;
        height: 143px;
    }

    .music-content > .cassette-area .cassette-label {
        top: 18px;
        left: 20px;
        right: 20px;
        height: 62px;
    }

    .music-content > .cassette-area .cassette-window {
        left: 53px;
        right: 53px;
        bottom: 16px;
        height: 35px;
    }

    .music-content > .cassette-area .cassette-reel {
        width: 28px;
        height: 28px;
    }

    .song-list {
        margin-top: 15px;
        gap: 7px;
    }

    .song-item {
        min-height: 57px;
        padding: 7px 9px;
    }

    .song-art {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .song-info strong {
        font-size: 11px;
    }

    .song-info span {
        font-size: 9px;
    }

    .music-footer {
        margin-top: 25px;
    }
}

/* =====================================================
   MUSIC ROOM — CLEAN FINAL POSITIONING
===================================================== */

.music-scene {
    position: relative;
    overflow: hidden;
}

/* MAIN TWO-COLUMN LAYOUT */

.music-layout {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;
    gap: 65px;

    padding: 55px 45px 45px;
}

/* ALBUM SIDE */

.music-album-column {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.album-cover-wrap {
    width: min(100%, 460px);

    position: relative;

    transform: rotate(-2deg);

    filter:
        drop-shadow(
            0 22px 22px
            rgba(72, 52, 40, .20)
        );
}

.music-album-cover {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;
    object-fit: cover;

    border: 8px solid #f5ecdf;

    box-shadow:
        0 0 0 1px rgba(90,65,48,.12);
}

.album-caption {
    width: 100%;

    text-align: center;
    margin-top: 18px;
}

.album-caption span {
    display: block;

    font-family: var(--script);
    color: var(--red);

    font-size: 27px;
}

.album-caption p {
    margin-top: 3px;

    font-family: var(--normal);
    color: var(--muted-ink);

    font-size: 11px;
}

/* HIDE ALBUM-SIDE CASSETTE */

.music-album-column > .cassette-area {
    display: none;
}

/* RIGHT MUSIC CONTENT */
/* RIGHT SIDE: HEADING + CASSETTE BESIDE EACH OTHER */

.music-content {
    width: 100%;
    min-width: 0;

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 245px !important;
    grid-template-rows: auto auto auto !important;

    grid-template-areas:
        "heading cassette"
        "playall playall"
        "songs songs" !important;

    align-items: center;
    column-gap: 25px;
}

/* TEXT */

.music-content .music-heading {
    grid-area: heading !important;

    width: auto !important;
    margin: 0 !important;

    text-align: left;
}

/* CASSETTE BESIDE THE TEXT */

.music-content > .cassette-area {
    grid-area: cassette !important;

    position: relative !important;
    inset: auto !important;

    width: 245px !important;
    height: 145px !important;

    margin: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* CASSETTE ITSELF */

.music-content > .cassette-area .cassette-tape {
    position: relative !important;

    width: 245px !important;
    height: 145px !important;

    transform: rotate(3deg);
}

/* PLAY ALL UNDER BOTH */

.music-content .play-all-button {
    grid-area: playall !important;

    width: 100% !important;

    margin-top: 35px !important;
}

/* SONGS UNDER PLAY ALL */

.music-content .song-list {
    grid-area: songs !important;

    width: 100% !important;

    margin-top: 18px !important;
}

/* FOOTER */

.music-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: auto;
}

.music-footer span {
    width: 25px;
    height: 1px;

    background: rgba(169,47,56,.28);
}

.music-footer p {
    font-family: var(--script);
    font-size: 18px;
    font-weight: 400;

    color: var(--muted-ink);

    transform: rotate(-2deg);
}
/* =====================================================
   NOW PLAYING SCREEN
===================================================== */

.music-player {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: none !important;
    flex-direction: column;
    align-items: center;

    overflow: hidden;

    padding: 35px;

    background:
        linear-gradient(
            180deg,
            #75272f,
            #91343d 52%,
            #75272f
        );

    color: white;

    z-index: 9999 !important;
}

.music-player.open {
    display: flex !important;
}


/* CLOSE */

.music-player .player-close {
    position: absolute;

    top: 28px;
    right: 30px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,.15);
    color: white;

    font-size: 25px;

    cursor: pointer;

    z-index: 100;
}


/* FILM REELS — KEEPING THE TWO-REEL STYLE */

.music-player .memory-film-reel {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 220px;
    height: 78vh;

    overflow: hidden;

    z-index: 1;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 12%,
        black 88%,
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        black 12%,
        black 88%,
        transparent
    );
}

.music-player .memory-film-left {
    left: 35px;
}

.music-player .memory-film-right {
    right: 35px;
}

.music-player .film-track {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.music-player .film-frame {
    position: relative;

    flex: 0 0 auto;

    width: 190px;
    height: 142px;

    margin: 0 auto;
    padding: 7px;

    background: #ead9c8;

    box-shadow:
        0 8px 20px rgba(35,15,15,.3);
}

.music-player .film-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.music-player .film-frame::before,
.music-player .film-frame::after {
    content: "";

    position: absolute;

    top: 8px;
    bottom: 8px;

    width: 7px;

    background:
        repeating-linear-gradient(
            to bottom,
            #ead9c8 0 8px,
            transparent 8px 16px
        );
}

.music-player .film-frame::before {
    left: -10px;
}

.music-player .film-frame::after {
    right: -10px;
}

.music-player .memory-film-left .film-track {
    animation: filmMoveUp 25s linear infinite;
}

.music-player .memory-film-right .film-track {
    animation: filmMoveDown 25s linear infinite;
}

@keyframes filmMoveUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(calc(-50% - 8px));
    }
}

@keyframes filmMoveDown {
    from {
        transform: translateY(calc(-50% - 8px));
    }

    to {
        transform: translateY(0);
    }
}


/* NOW PLAYING CONTENT */

.music-player .player-cassette,
.music-player .player-song-info,
.music-player .player-progress,
.music-player .player-controls,
.music-player .player-note {
    position: relative;
    z-index: 20;
}

.music-player .player-cassette {
    margin-top: 35px;
}

.music-player .player-cassette-tape {
    width: 360px;
    height: 205px;

    transform: rotate(-2deg);

    box-shadow:
        0 18px 35px rgba(35,15,15,.35);
}

.music-player .player-song-info {
    margin-top: 28px;

    text-align: center;
}

.music-player .player-eyebrow {
    font-family: var(--marker);
    font-size: 13px;
    letter-spacing: .12em;

    opacity: .8;
}

.music-player .player-song-info h3 {
    margin-top: 8px;

    font-family: var(--script);
    font-size: 48px;
    font-weight: 400;
    line-height: 1;
}

.music-player .player-song-info p {
    margin-top: 8px;

    font-family: var(--normal);
    font-size: 15px;

    opacity: .85;
}


/* PROGRESS */

.music-player .player-progress {
    width: 470px;
    max-width: 65%;

    margin-top: 34px;
}

.music-player .progress-track {
    width: 100%;
    height: 6px;

    overflow: hidden;

    background: rgba(255,255,255,.3);
    border-radius: 999px;
}

.music-player .progress-fill {
    width: 0;
    height: 100%;

    background: white;
}

.music-player .progress-times {
    display: flex;
    justify-content: space-between;

    margin-top: 9px;

    font-family: var(--normal);
    font-size: 11px;

    opacity: .8;
}


/* CONTROLS */

.music-player .player-controls {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 25px;

    margin-top: 30px;
}

.music-player .player-controls button {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: transparent;
    color: white;

    font-family: Arial, sans-serif;
    font-size: 21px;

    cursor: pointer;
}

.music-player .player-controls button:hover {
    background: rgba(255,255,255,.12);
}

.music-player .player-controls .main-play-button {
    width: 78px;
    height: 78px;

    background: #fff;
    color: #812d38;

    font-size: 25px;

    box-shadow:
        0 12px 25px rgba(35,15,15,.3);
}


/* NOTE */

.music-player .player-note {
    margin-top: 32px;

    padding: 20px 40px;

    background: #f7e4d0;
    color: #563735;

    transform: rotate(-2deg);

    box-shadow:
        0 10px 25px rgba(35,15,15,.25);
}

.music-player .player-note p {
    margin: 0;

    font-family: var(--marker);
    font-size: 15px;
    line-height: 1.45;

    text-align: center;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .music-scene {
        width: calc(100% - 24px);
        height: calc(100% - 24px);

        margin: 12px auto;

        padding: 48px 15px 25px;
    }

    .music-back {
        top: 17px;
        left: 17px;

        font-size: 10px;
    }

    .music-heading span {
        font-size: 24px;
    }

    .music-heading h2 {
        font-size: 38px;
    }

    .music-heading p {
        font-size: 11px;
    }

    .cassette-tape {
        width: 245px;
        height: 143px;
    }

    .cassette-label {
        top: 18px;
        left: 20px;
        right: 20px;
        height: 62px;
    }

    .cassette-window {
        left: 53px;
        right: 53px;
        bottom: 16px;
        height: 35px;
    }

    .cassette-reel {
        width: 28px;
        height: 28px;
    }

    .song-list {
        margin-top: 15px;
        gap: 7px;
    }

    .song-item {
        min-height: 57px;
        padding: 7px 9px;
    }

    .song-art {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .song-info strong {
        font-size: 11px;
    }

    .song-info span {
        font-size: 9px;
    }

    .music-footer {
        padding-top: 12px;
    }

    .music-footer p {
        font-size: 15px;
    }

@media (max-width: 700px) {

    .mini-music-player {
        position: fixed !important;

        right: 12px !important;
        bottom: 12px !important;

        width: calc(100% - 24px) !important;

        z-index: 1000 !important;
    }
}

/* NOW PLAYING MOBILE */

.music-player .player-cassette {
    margin-top: 175px;
}

.music-player .player-song-info {
    margin-top: 32px;
}

.music-player .player-progress {
    margin-top: 32px;
}

.music-player .player-controls {
    margin-top: 28px;
}

.music-player .player-note {
    margin-top: 28px;
}
}

/* =====================================================
   NOW PLAYING CASSETTE FIX + ROLLING REELS
===================================================== */

.music-player .player-cassette {
    position: relative;
    z-index: 30;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 35px;
}

.music-player .player-cassette-tape {
    position: relative;

    width: 360px;
    height: 205px;

    overflow: hidden;

    background: #765f56;
    border: 4px solid #3b302c;
    border-radius: 12px;

    transform: rotate(-2deg);

    box-shadow:
        0 18px 35px rgba(35, 15, 15, .35),
        inset 0 0 0 2px rgba(255, 255, 255, .16);
}

/* Cassette label */

.music-player .player-cassette-tape .cassette-label {
    position: absolute;

    top: 27px;
    left: 35px;
    right: 35px;

    height: 75px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #ead9c8;
    color: #2e2522;

    border-radius: 2px;

    z-index: 3;
}

/* Tape window */

.music-player .player-cassette-tape .cassette-window {
    position: absolute;

    left: 75px;
    right: 75px;
    bottom: 27px;

    height: 48px;

    background: #302723;
    border-radius: 50%;

    z-index: 2;
}

/* Reels */

.music-player .player-cassette-tape .cassette-reel {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    border: 6px dotted #ead9c8;
    border-radius: 50%;

    background: #51413a;

    z-index: 5;
}

/* Correct reel positions */

.music-player .player-cassette-tape .cassette-reel:first-child {
    left: 78px;
}

.music-player .player-cassette-tape .cassette-reel:last-child {
    right: 78px;
}

/* Inner reel hubs */

.music-player .player-cassette-tape .cassette-reel::after {
    content: "";

    position: absolute;
    inset: 9px;

    border-radius: 50%;
    background: #ead9c8;
}

/* Rolling animation */

.music-player .player-cassette-tape.playing .cassette-reel {
    animation: nowPlayingCassetteRoll .8s linear infinite;
}

@keyframes nowPlayingCassetteRoll {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}


/* MOBILE CASSETTE */

@media (max-width: 700px) {

    .music-player .player-cassette {
        margin-top: 110px;
    }

    .music-player .player-cassette-tape {
        width: 275px;
        height: 158px;
    }

    .music-player .player-cassette-tape .cassette-label {
        top: 20px;
        left: 25px;
        right: 25px;
        height: 58px;
    }

    .music-player .player-cassette-tape .cassette-window {
        left: 57px;
        right: 57px;
        bottom: 20px;
        height: 36px;
    }

    .music-player .player-cassette-tape .cassette-reel {
        width: 32px;
        height: 32px;

        border-width: 5px;
    }

    .music-player .player-cassette-tape .cassette-reel:first-child {
        left: 55px;
    }

    .music-player .player-cassette-tape .cassette-reel:last-child {
        right: 55px;
    }

    .music-player .player-cassette-tape .cassette-reel::after {
        inset: 7px;
    }
}
/* =====================================================
   MAIN MUSIC ROOM — MOBILE RESTORED
===================================================== */

@media (max-width: 700px) {

    .music-scene {
        width: calc(100% - 24px) !important;
        height: calc(100% - 24px) !important;

        margin: 12px auto !important;
        padding: 48px 15px 25px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .music-scene .music-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        height: auto !important;

        padding: 0 !important;
        gap: 25px !important;
    }

    /* ALBUM */

    .music-scene .music-album-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        flex-shrink: 0 !important;
    }

    .music-scene .album-cover-wrap {
        width: min(85vw, 350px) !important;
        max-width: 100% !important;

        margin: 0 auto !important;
    }

    .music-scene .music-album-cover {
        width: 100% !important;
        height: auto !important;
    }

    .music-scene .album-caption {
        margin-top: 13px !important;
        text-align: center !important;
    }

    .music-scene .album-caption span {
        font-size: 23px !important;
    }

    .music-scene .album-caption p {
        font-size: 10px !important;
        margin-top: 2px !important;
    }

    /* HIDE CASSETTE ONLY IN MAIN MUSIC ROOM */

    .music-scene .cassette-area {
        display: none !important;
    }

    /* CONTENT */

    .music-scene .music-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 0 !important;

        margin-top: 0 !important;
    }

    .music-scene .music-heading {
        width: 100% !important;
        margin: 0 !important;

        text-align: center !important;
    }

    .music-scene .music-heading span {
        display: block !important;

        font-family: var(--normal) !important;
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .music-scene .music-heading h2 {
        margin: 3px 0 0 !important;

        font-size: 39px !important;
        line-height: 1 !important;
    }

    .music-scene .music-heading p {
        margin-top: 8px !important;

        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    /* PLAY ALL */

    .music-scene .play-all-button {
        width: 100% !important;
        height: 58px !important;

        margin-top: 18px !important;
        flex-shrink: 0 !important;
    }

    /* SONG LIST */

    .music-scene .song-list {
        width: 100% !important;

        margin-top: 15px !important;
        gap: 7px !important;

        flex-shrink: 0 !important;
    }

    .music-scene .song-item {
        width: 100% !important;
        min-height: 57px !important;

        padding: 7px 9px !important;
    }

    .music-scene .song-art {
        width: 39px !important;
        height: 39px !important;
        flex-basis: 39px !important;
    }

    .music-scene .song-info strong {
        font-size: 11px !important;
    }

    .music-scene .song-info span {
        font-size: 9px !important;
    }

    /* FOOTER */

    .music-scene .music-footer {
        position: static !important;

        width: 100% !important;
        margin-top: 25px !important;
        padding-top: 12px !important;

        text-align: center !important;
        order: 999 !important;

        flex-shrink: 0 !important;
    }

    .music-scene .music-footer p {
        font-size: 15px !important;
    }
}
/* =====================================================
   NOW PLAYING — MOBILE HORIZONTAL FILM REEL
===================================================== */

@media (max-width: 700px) {

    /* Hide the second reel completely on mobile */
    .music-player .memory-film-right {
        display: none !important;
    }

    /* One horizontal reel across the top */
   .music-player .memory-film-left {
    top: 0;
    left: 0;

    width: 100%;
    height: 155px;

    transform: none;

    mask-image: linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent
    );

    z-index: 1;
}

.music-player .memory-film-left .film-track {
    flex-direction: row;
    width: max-content;
    gap: 14px;

    animation: mobileFilmMove 25s linear infinite;
}
    .music-player .memory-film-left .film-frame {
        flex: 0 0 auto !important;

        width: 120px !important;
        height: 92px !important;

        margin: 12px 0 0 !important;
        padding: 5px !important;
    }

    .music-player .memory-film-left .film-frame::before,
    .music-player .memory-film-left .film-frame::after {
        width: 5px !important;

        top: 6px !important;
        bottom: 6px !important;
    }

    .music-player .memory-film-left .film-frame::before {
        left: -7px !important;
    }

    .music-player .memory-film-left .film-frame::after {
        right: -7px !important;
    }

    /* Keep the cassette below the horizontal reel */
    .music-player .player-cassette {
        position: relative !important;
        z-index: 20 !important;

        margin-top: 165px !important;
    }

    @keyframes mobileFilmMove {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(calc(-50% - 5px));
        }
    }
}
/* =====================================================
   NOW PLAYING — MOBILE FINAL POSITION
===================================================== */

@media (max-width: 700px) {

    /* Move the horizontal film reel downward */
    .music-player .memory-film-left {
        top: 55px !important;
        height: 155px !important;
    }

    /* Keep the reel visible above everything */
    .music-player .memory-film-left {
        z-index: 5 !important;
    }

    /* Push the cassette and everything below it down */
    .music-player .player-cassette {
        margin-top: 180px !important;
    }

    .music-player .player-song-info {
        margin-top: 10px !important;
    }

    .music-player .player-progress {
        margin-top: 10px !important;
    }

    .music-player .player-controls {
        margin-top: 10px !important;
    }

    .music-player .player-note {
        margin-top: 10px !important;
    }
}
/* =====================================================
   MAIN MUSIC ROOM — DESKTOP FINAL LAYOUT
===================================================== */

@media (min-width: 701px) {

    .music-scene {
        position: relative;
        width: min(1400px, calc(100% - 80px));
        height: calc(100% - 48px);

        margin: 24px auto;
        padding: 0;

        overflow: hidden;
    }

    .music-scene .music-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 55px;

        width: min(1080px, 94%);
        height: 100%;

        margin: 0 auto;
        padding: 45px 15px 65px;
    }

    /* =========================
       LEFT — ALBUM
    ========================= */

    .music-scene .music-album-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
    }

    .music-scene .album-cover-wrap {
        width: min(365px, 100%);

        transform: rotate(-2deg);
        filter: drop-shadow(
            0 12px 18px rgba(70, 45, 30, .18)
        );
    }

    .music-scene .music-album-cover {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;

        border: 8px solid #f5ecdf;
        box-shadow: 0 4px 12px rgba(70, 45, 30, .12);
    }

    .music-scene .album-caption {
        width: 100%;
        margin-top: 18px;
        text-align: center;
    }

    .music-scene .album-caption span {
        display: block;
        font-family: var(--script);
        color: var(--red);
        font-size: 27px;
    }

    .music-scene .album-caption p {
        margin-top: 3px;
        font-family: var(--normal);
        color: var(--muted-ink);
        font-size: 11px;
    }

    /* Hide cassette from album side */

    .music-scene .music-album-column > .cassette-area {
        display: none !important;
    }

    /* =========================
       RIGHT — MUSIC CONTENT
    ========================= */

    .music-scene .music-content {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) 260px;
        grid-template-rows: auto auto auto;

        grid-template-areas:
            "heading cassette"
            "playall playall"
            "songs songs";

        align-content: start;
        align-items: start;

        column-gap: 22px;
        row-gap: 0;

        width: 100%;
        min-width: 0;

        padding-top: 15px;
    }

    /* =========================
       HEADING
    ========================= */

    .music-scene .music-heading {
        grid-area: heading;

        width: 100%;
        min-width: 0;

        margin: 0;
        text-align: left;
    }

    .music-scene .music-heading span {
        display: block;

        font-family: var(--script);
        color: var(--red);

        font-size: 37px;
        line-height: 1;

        white-space: nowrap;
    }

    .music-scene .music-heading h2 {
        margin-top: 8px;

        font-family: var(--script);
        color: var(--red);

        font-size: 58px;
        font-weight: 400;
        line-height: .98;

        white-space: nowrap;
    }

    .music-scene .music-heading p {
        margin-top: 18px;

        font-family: var(--normal);
        color: var(--muted-ink);

        font-size: 14px;
        line-height: 1.4;
    }

    /* =========================
       CASSETTE BESIDE HEADING
    ========================= */

    .music-scene .music-content > .cassette-area {
        grid-area: cassette;

        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 260px;
        height: 145px;

        margin: 8px 0 0;
    }

    .music-scene .music-content > .cassette-area .cassette-tape {
        width: 260px;
        height: 145px;

        transform: rotate(3deg);
    }

    /* =========================
       PLAY ALL
    ========================= */

    .music-scene .play-all-button {
        grid-area: playall;

        width: 100%;
        height: 48px;

        margin-top: 28px;
    }

    /* =========================
       PLAYLIST
    ========================= */

    .music-scene .song-list {
        grid-area: songs;

        width: 100%;

        margin-top: 10px;
        padding-bottom: 5px;
    }

    .music-scene .song-item {
        min-height: 60px;
        padding: 6px 4px;
    }

    /* =========================
       FOOTER
    ========================= */

    .music-scene .music-footer {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 20px;

        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 5;
    }

    .music-scene .music-footer p {
        font-family: var(--script);
        font-size: 18px;
        color: var(--muted-ink);
    }
}
/* =====================================================
   NIGHTSMILE POSTAL SERVICE
===================================================== */

.mail-screen {
    background:
        radial-gradient(
            ellipse at 50% 20%,
            rgba(255, 255, 255, 0.85),
            transparent 55%
        ),
        #e7dfd3;
}

.mail-scene {
    position: relative;
    width: min(100% - 32px, 1120px);
    height: min(100% - 32px, 760px);
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 50% 10%,
            rgba(255,255,255,0.85),
            transparent 45%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(120, 90, 65, 0.018) 0,
            rgba(120, 90, 65, 0.018) 1px,
            transparent 1px,
            transparent 5px
        ),
        var(--paper);
    border: 1px solid rgba(110, 82, 58, 0.12);
    border-radius: 5px;
    box-shadow:
        0 25px 70px rgba(50, 39, 29, 0.18),
        0 5px 18px rgba(50, 39, 29, 0.08);
}

/* BACK BUTTON */

.mail-back {
    position: absolute;
    top: 28px;
    left: 30px;
    z-index: 10;
    border: none;
    background: transparent;
    color: var(--muted-ink);
    font-family: var(--normal);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.25s ease;
}

.mail-back:hover {
    color: var(--red);
}

/* HEADER */

.mail-header {
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    z-index: 5;
}

.mail-eyebrow {
    font-family: var(--marker);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--red);
}

.mail-header h2 {
    margin-top: 10px;
    font-family: var(--script);
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 400;
    line-height: 1;
    transform: rotate(-2deg);
}

.mail-header p {
    margin-top: 14px;
    color: var(--muted-ink);
    font-family: var(--normal);
    font-size: 14px;
    line-height: 1.5;
}

/* MAILBOX */

.mailbox-area {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: min(430px, 70%);
    height: 310px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 4;
}

.mailbox-glow {
    position: absolute;
    width: 270px;
    height: 180px;
    border-radius: 50%;
    background: rgba(169, 47, 56, 0.08);
    filter: blur(35px);
    pointer-events: none;
}

.mailbox-image {
    position: absolute;
    width: 100%;
    max-width: 390px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 18px rgba(50, 30, 20, 0.18));
    transition:
        opacity 0.65s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    user-select: none;
    pointer-events: none;
}

.mailbox-open {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
}

.mailbox-closed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mailbox-area.opened .mailbox-closed {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
}

.mailbox-area.opened .mailbox-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ENVELOPE */

.mail-envelope {
    position: absolute;
    width: 155px;
    height: 105px;
    left: 50%;
    top: 30%;
    transform: translate(-50%, 25px) scale(0.7);
    opacity: 0;
    z-index: 3;
    transition:
        opacity 0.8s ease 0.35s,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
    pointer-events: none;
}

.mailbox-area.opened .mail-envelope {
    opacity: 1;
    transform: translate(-50%, -35px) scale(1);
}

.envelope-front {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f9eee0;
    border: 1px solid #d9bfa7;
    border-radius: 4px;
    box-shadow: 0 12px 25px rgba(50, 30, 20, 0.2);
    overflow: hidden;
}

.envelope-front::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            transparent 49.5%,
            #d8bda5 50%,
            transparent 50.5%
        ),
        linear-gradient(
            225deg,
            transparent 49.5%,
            #d8bda5 50%,
            transparent 50.5%
        );
    opacity: 0.75;
}

.envelope-stamp {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--red);
    color: var(--red);
    font-size: 15px;
    z-index: 2;
}

.envelope-address {
    position: absolute;
    left: 18px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.envelope-address small {
    font-family: var(--normal);
    font-size: 8px;
    letter-spacing: 0.15em;
    color: var(--muted-ink);
}

.envelope-address strong {
    font-family: var(--script);
    font-size: 30px;
    font-weight: 400;
    color: var(--ink);
}

.envelope-from {
    position: absolute;
    right: 12px;
    bottom: 9px;
    font-family: var(--marker);
    font-size: 9px;
    color: var(--red);
    transform: rotate(-5deg);
    z-index: 2;
}

/* INSTRUCTION */

.mail-instruction {
    position: absolute;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    max-width: 90%;
    text-align: center;
    color: var(--muted-ink);
    font-family: var(--normal);
    font-size: 12px;
    transition: opacity 0.4s ease;
}

.instruction-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    animation: mailPulse 1.5s infinite;
}

@keyframes mailPulse {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.mailbox-area.opened ~ .mail-instruction {
    opacity: 0;
}

/* DELIVERY CARD */

.delivery-card {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 20px);
    width: min(340px, 85%);
    padding: 20px 25px;
    text-align: center;
    background: rgba(255, 250, 242, 0.96);
    border: 1px solid rgba(169, 47, 56, 0.18);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(50, 30, 20, 0.1);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        visibility 0.6s;
    z-index: 8;
}

.delivery-card.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.delivery-label {
    font-family: var(--marker);
    color: var(--red);
    font-size: 10px;
    letter-spacing: 0.13em;
}

.delivery-card h3 {
    margin-top: 7px;
    font-family: var(--script);
    font-size: 30px;
    font-weight: 400;
}

.delivery-card p {
    margin-top: 8px;
    color: var(--muted-ink);
    font-size: 12px;
    line-height: 1.6;
}

.collect-mail-button {
    margin-top: 15px;
    padding: 11px 18px;
    border: none;
    border-radius: 100px;
    background: var(--red);
    color: white;
    font-family: var(--normal);
    font-size: 11px;
    cursor: pointer;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.collect-mail-button:hover {
    background: var(--red-dark);
    transform: translateY(-2px);
}

/* LETTER OVERLAY */

.letter-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    background: rgba(45, 32, 25, 0.48);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
    z-index: 30;
}

.letter-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.letter-paper {
    position: relative;
    width: min(570px, 100%);
    max-height: 90%;
    overflow-y: auto;
    padding: 48px clamp(25px, 6vw, 65px);
    background:
        repeating-linear-gradient(
            0deg,
            rgba(120, 90, 65, 0.025) 0,
            rgba(120, 90, 65, 0.025) 1px,
            transparent 1px,
            transparent 5px
        ),
        #fffaf0;
    border: 1px solid #dfcdb8;
    box-shadow: 0 25px 70px rgba(25, 15, 10, 0.3);
    transform: translateY(30px) rotate(-1deg);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.letter-overlay.visible .letter-paper {
    transform: translateY(0) rotate(-1deg);
}

.letter-close {
    position: absolute;
    top: 14px;
    right: 18px;
    border: none;
    background: transparent;
    color: var(--muted-ink);
    font-size: 25px;
    cursor: pointer;
}

.letter-topline {
    display: block;
    text-align: center;
    font-family: var(--marker);
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--red);
}

.letter-date {
    margin-top: 10px;
    text-align: center;
    font-family: var(--script);
    font-size: 21px;
    color: var(--muted-ink);
}

.letter-paper h3 {
    margin-top: 35px;
    font-family: var(--script);
    font-size: 38px;
    font-weight: 400;
}

.letter-content {
    margin-top: 20px;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.9;
    color: var(--ink);
}

.letter-content p {
    margin-bottom: 20px;
}

.letter-content strong {
    color: var(--red);
    font-family: var(--script);
    font-size: 28px;
    font-weight: 400;
}

.letter-signature {
    margin-top: 30px;
    text-align: right;
    font-family: var(--marker);
    font-size: 13px;
    color: var(--red);
    transform: rotate(-4deg);
}

/* MOBILE */

@media (max-width: 600px) {

    .mail-scene {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }

    .mail-header {
        top: 60px;
    }

    .mail-header h2 {
        font-size: 45px;
    }

    .mail-header p {
        font-size: 12px;
    }

    .mailbox-area {
        width: 95%;
        top: 48%;
    }

    .mail-instruction {
        bottom: 65px;
        font-size: 10px;
    }

    .delivery-card {
        bottom: 25px;
    }

    .letter-paper {
        padding: 40px 25px;
    }

    .letter-content {
        font-size: 14px;
        line-height: 1.8;
    }

}
/* FIX — KEEP ALL NIGHTSMILE SCREENS FULL-SIZE */
main {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 620px;
}

.screen {
    width: 100%;
    height: 100%;
    min-height: 620px;
}
/* =====================================================
   NIGHTSMILE POSTAL SCREEN — CLEAN FINAL LAYOUT
===================================================== */


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width: 701px) {

    .mail-scene {
        position: relative;
        width: calc(100% - 70px);
        height: calc(100% - 45px);
        min-height: 560px;

        margin: 22px auto;
        padding: 0;

        overflow: hidden;
    }

    /* BACK BUTTON */

    .mail-back {
        position: absolute;
        top: 28px;
        left: 38px;
        z-index: 30;
    }

    /* ================================================
       MAIN HEADER — LEFT OF MAILBOX
    ================================================ */

    .mail-header {
        position: absolute;

        top: 50%;
        left: 13%;

        width: 330px;

        margin: 0;
        transform: translateY(-50%);

        text-align: left;
        z-index: 10;
    }

    .mail-eyebrow {
        display: block;

        font-size: 12px;
        letter-spacing: .13em;
        line-height: 1.4;

        text-align: left;
        white-space: nowrap;
    }

    .mail-header h2 {
        margin-top: 18px;

        font-size: clamp(45px, 4.2vw, 67px);
        line-height: 1.02;

        text-align: left;
        transform: rotate(-2deg);
    }

    .mail-header h2 span {
        display: inline;
        white-space: nowrap;
        font-size: .72em;
    }

    .mail-header p {
        margin-top: 28px;

        font-size: 15px;
        line-height: 1.65;

        text-align: left;
    }

    /* TO / FROM */

    .mail-recipient {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;

        margin-top: 25px;

        font-family: var(--marker);
        font-size: 10px;
        letter-spacing: .04em;
        color: var(--red);
    }

    .mail-recipient span:first-child {
        padding-right: 15px;
        border-right: 1px solid rgba(169, 47, 56, .3);
    }

    /* ================================================
       MAILBOX — CENTER
    ================================================ */

    .mailbox-area {
        position: absolute;

        top: 51%;
        left: 53%;

        width: min(410px, 34vw);
        height: 310px;

        margin: 0;
        transform: translate(-50%, -50%);

        z-index: 15;
    }

    .mailbox-image {
        max-width: 100%;
    }

    /* ================================================
       INSTRUCTION — UNDER MAILBOX
    ================================================ */

    .mail-instruction {
        position: absolute;

        top: calc(51% + 185px);
        left: 53%;

        bottom: auto;

        width: 280px;
        max-width: 280px;

        transform: translateX(-50%);

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        padding: 13px 18px;

        background: rgba(255, 250, 242, .82);
        border: 1px solid rgba(169, 47, 56, .14);
        border-radius: 50px;

        box-shadow: 0 7px 20px rgba(70, 40, 30, .06);

        text-align: center;
        z-index: 20;
    }

    .instruction-heart {
        flex-shrink: 0;

        color: var(--red);
        font-family: Georgia, serif;
        font-size: 19px;
    }

    .instruction-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }

    .instruction-copy strong {
        font-family: var(--normal);
        font-size: 11px;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
    }

    .instruction-copy span {
        font-family: var(--normal);
        font-size: 9px;
        color: var(--muted-ink);
        white-space: nowrap;
    }

    .instruction-arrow {
        flex-shrink: 0;
        color: var(--red);
        font-size: 16px;
    }

    /* ================================================
       POSTAL DETAILS — RIGHT SIDE
    ================================================ */

    .postal-mark-left {
        position: absolute;

        top: 37%;
        left: auto;
        right: 8%;

        font-family: var(--marker);
        font-size: 12px;
        line-height: 1.55;
        letter-spacing: .12em;

        text-align: center;
        color: var(--red);
        opacity: .58;

        transform: rotate(9deg);
        z-index: 5;
    }

    .postal-mark-right {
        position: absolute;

        top: 27%;
        right: 8%;

        font-family: var(--marker);
        font-size: 12px;
        line-height: 1.55;
        letter-spacing: .12em;

        text-align: center;
        color: var(--red);
        opacity: .58;

        transform: rotate(-8deg);
        z-index: 5;
    }

    .postal-stamp {
        position: absolute;

        right: 7%;
        bottom: 19%;

        width: 88px;
        height: 88px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        border: 1px dashed rgba(169, 47, 56, .42);
        border-radius: 50%;

        color: var(--red);
        opacity: .58;

        transform: rotate(10deg);
        z-index: 5;
    }

    .postal-stamp span {
        font-family: var(--marker);
        font-size: 7px;
        line-height: 1.4;
        letter-spacing: .08em;
        text-align: center;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .mail-scene {
        position: relative;

        width: calc(100% - 22px);
        height: calc(100% - 22px);
        min-height: 0;

        margin: 11px auto;
        padding: 65px 16px 25px;

        display: flex;
        flex-direction: column;
        align-items: center;

        overflow-y: auto;
        overflow-x: hidden;
    }

    .mail-back {
        position: absolute;
        top: 22px;
        left: 20px;
        z-index: 30;
    }

    /* HEADER FIRST */

    .mail-header {
        position: relative;
        top: auto;
        left: auto;

        width: 100%;
        max-width: 370px;

        margin: 0;
        transform: none;

        text-align: center;
        order: 1;
    }

    .mail-eyebrow {
        font-size: 10px;
        text-align: center;
    }

    .mail-header h2 {
        margin-top: 12px;
        font-size: 43px;
        line-height: 1;
        text-align: center;
    }

    .mail-header p {
        margin-top: 15px;
        font-size: 12px;
        line-height: 1.55;
        text-align: center;
    }

    .mail-recipient {
        justify-content: center;
        margin-top: 15px;
        font-size: 8px;
    }

    /* MAILBOX DIRECTLY BELOW HEADER */

    .mailbox-area {
        position: relative;
        top: auto;
        left: auto;

        width: min(390px, 94vw);
        height: 285px;

        margin: 10px 0 0;
        transform: none;

        order: 2;
        flex-shrink: 0;
    }

    /* INSTRUCTION BELOW MAILBOX */

    .mail-instruction {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;

        width: auto;
        max-width: 90%;

        margin-top: 3px;
        transform: none;

        padding: 10px 14px;

        order: 3;
    }

    .instruction-copy strong {
        font-size: 10px;
    }

    .instruction-copy span {
        font-size: 9px;
    }

    /* HIDE EXTRA DECORATIONS ON MOBILE */

    .postal-mark-left,
    .postal-mark-right {
        display: none;
    }

    .postal-stamp {
        display: none;
    }
}
/* =====================================================
   NIGHTSMILE POSTAL SCREEN — REFERENCE LAYOUT
===================================================== */


/* =====================================================
   DESKTOP LAYOUT
===================================================== */

@media (min-width: 701px) {

    .mail-scene {
        position: relative;

        width: calc(100% - 70px);
        height: calc(100% - 45px);

        margin: 22px auto;
        padding: 0;

        overflow: hidden;
    }


    /* BACK BUTTON */

    .mail-back {
        position: absolute;
        top: 28px;
        left: 38px;
        z-index: 50;
    }


    /* =================================================
       TOP CENTER HEADER
    ================================================= */

    .mail-header {
        position: absolute;

        top: 52px;
        left: 50%;

        width: 650px;
        max-width: 70%;

        margin: 0;
        transform: translateX(-50%);

        text-align: center;
        z-index: 20;
    }

    .mail-eyebrow {
        display: block;

        font-family: var(--marker);
        font-size: 12px;
        letter-spacing: .12em;

        color: var(--red);
        white-space: nowrap;
    }

    .mail-header h2 {
        margin-top: 13px;

        font-family: var(--script);
        font-size: clamp(55px, 5vw, 78px);
        font-weight: 400;
        line-height: .95;

        color: var(--ink);
        white-space: nowrap;
        transform: rotate(-2deg);
    }

    .mail-header h2 span {
        font-family: Georgia, serif;
        font-size: .72em;
        white-space: nowrap;
    }

    .header-heart-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;

        margin-top: 15px;

        color: var(--red);
        font-family: Georgia, serif;
        font-size: 25px;
    }

    .header-heart-divider span {
        display: block;

        width: 105px;
        height: 1px;

        background: rgba(169, 47, 56, .45);
    }


    /* =================================================
       LEFT SIDE NOTE
    ================================================= */

    .mail-side-note {
        position: absolute;

        left: 13%;
        top: 51%;

        width: 325px;

        transform: translateY(-50%);

        z-index: 15;
    }

    .note-line {
        width: 100%;
        height: 1px;

        margin-bottom: 28px;

        background: rgba(169, 47, 56, .2);
    }

    .mail-side-note p {
        margin: 0;

        font-family: var(--normal);
        font-size: 16px;
        line-height: 1.7;

        color: var(--muted-ink);
    }

    .mail-recipient {
        display: flex;
        align-items: center;
        gap: 17px;

        margin-top: 27px;

        font-family: var(--marker);
        font-size: 10px;
        letter-spacing: .04em;

        color: var(--red);
    }

    .mail-recipient span:first-child {
        padding-right: 17px;
        border-right: 1px solid rgba(169, 47, 56, .3);
    }


    /* =================================================
       ROSE ON LEFT
    ================================================= */

    .mail-rose-decoration {
        position: absolute;

        left: 3%;
        bottom: 25%;

        width: 135px;

        opacity: .85;
        transform: rotate(-5deg);

        pointer-events: none;
        z-index: 4;
    }

    .mail-rose-decoration img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;

        filter: sepia(.12) saturate(.8);
    }


    /* =================================================
       CENTER MAILBOX
    ================================================= */

    .mailbox-area {
        position: absolute;

        left: 52%;
        top: 55%;

        width: min(410px, 34vw);
        height: 315px;

        margin: 0;

        transform: translate(-50%, -50%);

        z-index: 15;
    }


    /* =================================================
       RIGHT POSTAL DETAILS
    ================================================= */

    .mail-postal-details {
        position: absolute;

        top: 24%;
        right: 7%;

        width: 230px;
        height: 410px;

        z-index: 8;
    }

    .airmail-stamp {
        position: absolute;

        top: 0;
        right: 0;

        width: 125px;
        height: 145px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;

        border: 2px solid rgba(169, 47, 56, .45);
        outline: 1px dashed rgba(169, 47, 56, .35);
        outline-offset: 6px;

        color: var(--red);

        transform: rotate(5deg);
    }

    .stamp-heading {
        font-family: var(--marker);
        font-size: 15px;
        letter-spacing: .08em;
    }

    .stamp-heart {
        font-family: Georgia, serif;
        font-size: 40px;
        opacity: .65;
    }

    .stamp-footer {
        font-family: var(--marker);
        font-size: 9px;
        letter-spacing: .08em;
    }

    .postal-cancellation {
        position: absolute;

        top: 30px;
        left: -20px;

        width: 130px;
        height: 130px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;

        border: 2px solid rgba(130, 91, 68, .3);
        border-radius: 50%;

        color: rgba(130, 91, 68, .65);

        transform: rotate(-15deg);
    }

    .postal-cancellation span {
        font-family: var(--marker);
        font-size: 9px;
        letter-spacing: .1em;
    }

    .postal-cancellation strong {
        font-family: Georgia, serif;
        font-size: 28px;
        font-weight: 400;
    }

    .special-delivery-stamp {
        position: absolute;

        top: 190px;
        left: 25px;

        padding: 12px 17px;

        border: 1px solid rgba(169, 47, 56, .5);

        font-family: var(--marker);
        font-size: 15px;
        line-height: 1.35;
        letter-spacing: .07em;

        color: var(--red);

        transform: rotate(-8deg);
    }

    .special-delivery-stamp span {
        font-size: 17px;
    }

    .handle-with-love {
        position: absolute;

        right: -5px;
        bottom: 0;

        font-family: var(--script);
        font-size: 23px;
        line-height: 1.1;

        color: rgba(130, 91, 68, .5);

        transform: rotate(-8deg);
    }


    /* =================================================
       INSTRUCTION UNDER MAILBOX
    ================================================= */

    .mail-instruction {
        position: absolute;

        left: 52%;
        bottom: 58px;

        width: 380px;
        min-height: 76px;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;

        padding: 14px 24px;

        transform: translateX(-50%);

        background: rgba(255, 250, 242, .9);
        border: 1px solid rgba(169, 47, 56, .18);
        border-radius: 50px;

        box-shadow: 0 10px 30px rgba(70, 40, 30, .07);

        z-index: 25;
    }

    .instruction-heart {
        color: var(--red);
        font-family: Georgia, serif;
        font-size: 29px;
    }

    .instruction-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .instruction-copy strong {
        font-family: var(--normal);
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
    }

    .instruction-copy span {
        font-family: var(--normal);
        font-size: 10px;
        color: var(--muted-ink);
        white-space: nowrap;
    }

    .instruction-arrow {
        color: var(--red);
        font-size: 23px;
    }

}


/* =====================================================
   DESKTOP — MAILBOX + DELIVERY CARD COMPOSITION
   ===================================================== */

@media (min-width: 901px) {

    /* Smooth movement when mailbox opens */
    .mailbox-area {
        transition:
            left 0.9s cubic-bezier(0.22, 1, 0.36, 1),
            top 0.9s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Move mailbox slightly left, but keep it central */
    .mailbox-area.opened {
        left: 43%;
        top: 54%;
        transform: translate(-50%, -50%);
    }

    /* Keep the mailbox large and prominent */
    .mailbox-area.opened .mailbox-image {
        max-width: 390px;
    }

    /* Keep envelope attached to mailbox */
    .mailbox-area.opened .mail-envelope {
        transform: translate(-50%, -35px) scale(0.92);
    }

    /* Delivery card sits close to mailbox */
    .delivery-card {
        left: 65%;
        top: 54%;
        bottom: auto;

        width: 360px;
        padding: 24px 28px;

        transform: translate(25px, -50%);

        transition:
            opacity 0.7s ease,
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.7s;
    }

    /* Slide card gently into position */
    .delivery-card.visible {
        transform: translate(0, -50%);
    }

}
/* =====================================================
   LETTER TYPEWRITER EFFECT
   ===================================================== */

.letter-content p,
.letter-signature {
    visibility: hidden;
}

.letter-content p.typing,
.letter-signature.typing {
    visibility: visible;
}

.letter-content p.finished,
.letter-signature.finished {
    visibility: visible;
}
/* =====================================================
   FINAL EXPERIENCE SCREEN
===================================================== */

.final-screen {
    min-height: 100vh;
}

.final-scene {
    position: relative;
    min-height: 100vh;
    padding: 42px 7%;
    text-align: center;
}

.final-back {
    position: absolute;
    top: 35px;
    left: 42px;
    border: none;
    background: none;
    font-family: var(--normal);
    font-size: 15px;
    color: #765c52;
    cursor: pointer;
}

.final-heading {
    margin: 35px auto 35px;
}

.final-heading span {
    font-family: var(--marker);
    color: #b52e38;
    font-size: 15px;
}

.final-heading h2 {
    font-family: var(--script);
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 400;
    color: #292321;
    margin: 8px 0 12px;
}

.final-heading p {
    font-family: var(--normal);
    font-size: 17px;
    line-height: 1.7;
    color: #765c52;
}

.scratch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto;
}

.scratch-card {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #eadbca;
    border: 10px solid #fffaf2;
    box-shadow: 0 12px 30px rgba(70, 40, 30, 0.15);
    transform: rotate(-2deg);
}

.scratch-card:nth-child(2) {
    transform: rotate(2deg);
}

.scratch-card:nth-child(3) {
    transform: rotate(-1deg);
}

.scratch-card img,
.scratch-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.scratch-card img {
    object-fit: cover;
}

.scratch-canvas {
    cursor: crosshair;
    touch-action: none;
}

.scratch-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #fffaf2;
    font-family: var(--marker);
    font-size: 20px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.final-message {
    opacity: 0;
    transform: translateY(25px);
    pointer-events: none;
    transition: 1s ease;
    margin-top: 45px;
}

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

.final-message span {
    font-family: var(--marker);
    color: #b52e38;
}

.final-message h1 {
    font-family: var(--script);
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 400;
    color: #292321;
    margin: 10px 0;
}

.final-message p {
    font-family: var(--normal);
    color: #765c52;
    font-size: 17px;
    line-height: 1.7;
}
.final-experience-button {
    display: block;
    margin: 35px auto 0;
    padding: 14px 28px;
    border: none;
    border-radius: 30px;
    background: #b8323d;
    color: white;
    font-family: var(--normal);
    font-size: 15px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.5s ease;
}

.final-experience-button.show {
    opacity: 1;
    transform: translateY(0);
}

.final-experience-button:hover {
    background: #962b35;
}
.scratch-label {
    transition: opacity 0.5s ease;
}

.scratch-label.hidden {
    opacity: 0;
    visibility: hidden;
    display: none;
}
.final-screen {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
}

.final-scene {
    min-height: 100vh;
    padding-bottom: 120px;
}

.final-message {
    display: block;
    min-height: 250px;
    padding: 40px 20px;
}


/* =====================================================
   MOBILE LAYOUT
===================================================== */

@media (max-width: 700px) {

    .mail-scene {
        width: calc(100% - 20px);
        height: calc(100% - 20px);

        margin: 10px auto;
        padding: 65px 15px 25px;

        overflow-y: auto;
    }

    .mail-back {
        top: 22px;
        left: 20px;
    }

    .mail-header {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;
        max-width: 100%;

        margin: 0;
        transform: none;

        text-align: center;
    }

    .mail-eyebrow {
        font-size: 9px;
        white-space: normal;
    }

    .mail-header h2 {
        margin-top: 12px;

        font-size: 43px;
        line-height: 1;

        white-space: normal;
    }

    .header-heart-divider {
        margin-top: 12px;
        font-size: 21px;
    }

    .header-heart-divider span {
        width: 55px;
    }

    .mail-side-note {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;
        max-width: 320px;

        margin: 20px auto 0;
        transform: none;

        text-align: center;
    }

    .note-line {
        margin-bottom: 17px;
    }

    .mail-side-note p {
        font-size: 13px;
        line-height: 1.6;
    }

    .mail-recipient {
        justify-content: center;
        margin-top: 17px;
        font-size: 8px;
    }

    .mail-rose-decoration {
        display: none;
    }

    .mailbox-area {
        position: relative;

        top: auto;
        left: auto;

        width: min(390px, 95vw);
        height: 290px;

        margin: 10px auto 0;

        transform: none;
    }

    .mail-postal-details {
        display: none;
    }

    .mail-instruction {
        position: relative;

        left: auto;
        bottom: -50px;

        width: max-content;
        max-width: 95%;
        min-height: 0;

        margin: 5px auto 0;
        padding: 11px 17px;

        transform: none;
    }

    .instruction-heart {
        font-size: 21px;
    }

    .instruction-copy strong {
        font-size: 10px;
    }

    .instruction-copy span {
        font-size: 9px;
    }

    .instruction-arrow {
        font-size: 18px;
    }
}

/* =====================================================
   MOBILE FIX — MAIL + LETTER + FINAL SCREENS
===================================================== */

@media (max-width: 600px) {

    /* Stop the global fixed screen height from clipping content */
    .screen#mail,
    .screen#final {
        height: auto;
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* =================================================
       FINAL SCRATCH SCREEN
    ================================================= */

    #final .final-scene {
        width: 100%;
        min-height: 100svh;
        height: auto;
        padding: 75px 18px 90px;
        box-sizing: border-box;
    }

    #final .final-back {
        top: 25px;
        left: 20px;
        font-size: 13px;
    }

    #final .final-heading {
        width: 100%;
        margin: 15px auto 35px;
    }

    #final .final-heading h2 {
        font-size: 42px;
        line-height: 1.05;
    }

    #final .final-heading p {
        font-size: 13px;
        line-height: 1.8;
    }

    #final .scratch-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
        max-width: none;
    }

    #final .scratch-card {
        width: min(88vw, 320px);
        aspect-ratio: 4 / 5;
        flex-shrink: 0;
    }

    #final .scratch-label {
        font-size: 18px;
    }

    #final .final-message {
        width: 100%;
        margin: 65px auto 0;
        padding: 35px 10px;
        box-sizing: border-box;
    }

    #final .final-message h1 {
        font-size: 42px;
        line-height: 1.08;
    }

    #final .final-message p {
        font-size: 13px;
        line-height: 1.8;
    }

} 
/* =====================================================
   MOBILE — SHOW FINAL EXPERIENCE BUTTON
===================================================== */

@media (max-width: 700px) {

    .menu-screen .menu-scene {
        height: auto !important;
        min-height: calc(100svh - 24px);
        overflow-y: auto !important;
        overflow-x: hidden;
        padding-bottom: 45px;
    }

    .menu-screen .final-experience-button {
        display: block !important;
        position: relative;
        z-index: 20;
        margin: 28px auto 20px;
        visibility: visible !important;
        opacity: 1 !important;
    }

}
/* FIX MOBILE SCRATCH INTERACTION */

.scratch-canvas {
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
    cursor: crosshair;
}