/* =========================================
   🎀 CEYRA-BIRTHDAY — MAIN STYLESHEET
========================================= */


/* =========================================
   🌸 CSS VARIABLES
========================================= */

:root {
    --pink-soft: #f8dfe7;
    --pink: #efa9bd;
    --pink-dark: #d9829d;

    --cream: #fffaf5;
    --white: #ffffff;
    --peach: #f9d8c7;

    --text-main: #5c454c;
    --text-soft: #8c737a;

    --shadow-soft:
        0 10px 30px rgba(92, 69, 76, 0.10);

    --radius-large: 24px;
    --radius-medium: 16px;
}


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

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


/* =========================================
   🌸 FLOATING BACKGROUND
========================================= */

#floatingParticles {

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;

}


/* =========================================
   💗 FLOATING LOVE PARTICLE
========================================= */

.floating-particle {

    position: absolute;

    bottom: -40px;

    color:
        rgba(239, 169, 189, 0.55);

    font-size: 1rem;

    opacity: 0;

    text-shadow:
        0 0 8px rgba(239, 169, 189, 0.25);

    animation:
        floatUp linear forwards;

    user-select: none;

}


/* =========================================
   ✨ FLOATING ANIMATION
========================================= */

@keyframes floatUp {

    0% {

        transform:
            translateY(0)
            translateX(0)
            rotate(0deg)
            scale(0.8);

        opacity: 0;

    }

    10% {

        opacity: 0.65;

    }

    50% {

        transform:
            translateY(-50vh)
            translateX(18px)
            rotate(12deg)
            scale(1);

    }

    85% {

        opacity: 0.5;

    }

    100% {

        transform:
            translateY(-115vh)
            translateX(-12px)
            rotate(-12deg)
            scale(0.85);

        opacity: 0;

    }

}


/* =========================================
   📱 BASE / MOBILE FIRST
========================================= */

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    body > *:not(#floatingParticles) {

    position: relative;

    z-index: 1;

}

    min-height: 100vh;

 background:
        radial-gradient(
            circle at 50% 0%,
            #ffffff 0%,
            #fffafc 32%,
            #fff3f6 65%,
            #f8dfe7 100%
        );

    color: var(--text-main);

    font-family:
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    line-height: 1.7;

    overflow-x: hidden;
}


/* =========================================
   🫧 SOFT PINK BACKGROUND BUBBLES
========================================= */

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(45px);

    opacity: 0.35;

    animation:
        softFloat 12s ease-in-out infinite alternate;
}


/* =========================================
   🌸 LEFT BUBBLE
========================================= */

body::before {
    top: 18%;
    left: -150px;

    background:
        rgba(239, 169, 189, 0.55);
}


/* =========================================
   🌸 RIGHT BUBBLE
========================================= */

body::after {
    top: 58%;
    right: -150px;

    background:
        rgba(248, 200, 214, 0.55);

    animation-delay: -5s;
}


/* =========================================
   ✨ SOFT FLOAT
========================================= */

@keyframes softFloat {

    from {
        transform:
            translateY(-20px)
            scale(0.95);
    }

    to {
        transform:
            translateY(25px)
            scale(1.08);
    }

}


/* =========================================
   📝 TYPOGRAPHY
========================================= */

h1,
h2,
h3 {
    line-height: 1.2;
    font-weight: 700;
}

h1 {
    font-size: clamp(2.2rem, 10vw, 4rem);
}

h2 {
    font-size: clamp(1.7rem, 7vw, 2.8rem);
}

h3 {
    font-size: 1.2rem;
}

p {
    font-size: 1rem;
}


/* =========================================
   📦 GENERAL LAYOUT
========================================= */

.page,
.scene {
    min-height: 100svh;
}

.section {
    width: 100%;
    padding: 80px 20px;
}

.section-inner {
    width: min(100%, 600px);
    margin: 0 auto;
}


/* =========================================
   ✨ SMALL LABEL
========================================= */

.eyebrow {
    margin-bottom: 14px;

    color: var(--pink-dark);

    font-size: 0.85rem;
    font-weight: 600;

    letter-spacing: 0.08em;
}


/* =========================================
   🔐 PIN PAGE
========================================= */

.pin-page {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.pin-container {
    width: min(100%, 420px);

    padding: 36px 24px;

    text-align: center;

    background: rgba(255, 255, 255, 0.75);

    border: 1px solid rgba(239, 169, 189, 0.25);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-soft);

    backdrop-filter: blur(12px);
}

.pin-container h1 {
    margin-bottom: 14px;
}

.pin-hint {
    margin-bottom: 24px;
    color: var(--text-soft);
}

.pin-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#pinInput {
    width: 100%;

    padding: 15px;

    border: 1px solid #ead3da;
    border-radius: var(--radius-medium);

    outline: none;

    text-align: center;
    letter-spacing: 0.4em;

    font-size: 1.2rem;

    background: var(--white);
}

#pinInput:focus {
    border-color: var(--pink);
}

.pin-error {
    min-height: 24px;

    margin-top: 12px;

    color: #c56f89;

    font-size: 0.9rem;
}


/* =========================================
   🎀 BUTTONS
========================================= */

button {
    border: none;
    font: inherit;
}

.primary-button,
#unlockButton {
    padding: 14px 22px;

    border-radius: 999px;

    background: var(--pink);

    color: var(--white);

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.primary-button:hover,
#unlockButton:hover {
    background: var(--pink-dark);
}

.primary-button:active,
#unlockButton:active {
    transform: scale(0.96);
}


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

.opening-section {
    display: flex;
    align-items: center;

    min-height: 100svh;

    text-align: center;
}

.opening-section h1 {
    margin-bottom: 24px;
}

.opening-text {
    margin-bottom: 8px;

    color: var(--text-soft);
}


/* =========================================
   🎵 MUSIC SECTION
========================================= */

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


/* =========================================
   🎧 MUSIC PLAYER CARD
========================================= */

.music-player {
    width: 100%;

    margin-top: 35px;
    padding: 28px 20px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 241, 245, 0.85)
        );

    border: 1px solid rgba(239, 169, 189, 0.25);

    box-shadow:
        0 18px 45px rgba(92, 69, 76, 0.12);

    overflow: hidden;
}


/* =========================================
   💿 MUSIC VISUAL
========================================= */

.music-visual {
    position: relative;

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

    width: 100%;

    margin-bottom: 25px;
}


/* =========================================
   🖼️ ALBUM COVER
========================================= */

.album-cover {
    position: relative;
    z-index: 2;

    width: min(65vw, 250px);
    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 18px;

    box-shadow:
        0 15px 35px rgba(92, 69, 76, 0.18);
}


/* =========================================
   💿 VINYL
========================================= */

.vinyl {
    position: absolute;
    z-index: 1;

    width: min(58vw, 220px);
    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background:
        repeating-radial-gradient(
            circle,
            #171317 0px,
            #171317 2px,
            #252025 3px,
            #171317 5px
        );

    transform:
        translateX(35%);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);
}


/* =========================================
   💗 VINYL CENTER
========================================= */

.vinyl-label {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 24%;

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background: var(--pink);

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


/* =========================================
   🔄 VINYL ROTATION
========================================= */

.vinyl.playing {
    animation:
        vinylSpin 5s linear infinite;
}

@keyframes vinylSpin {

    from {
        transform:
            translateX(35%)
            rotate(0deg);
    }

    to {
        transform:
            translateX(35%)
            rotate(360deg);
    }

}


/* =========================================
   🎵 SONG INFORMATION
========================================= */

.song-info {
    margin-bottom: 20px;
}

.song-info h3 {
    font-size: 1.25rem;
}

.song-info p {
    margin-top: 3px;

    color: var(--text-soft);

    font-size: 0.9rem;
}


/* =========================================
   📊 PROGRESS
========================================= */

.progress-container {
    width: 100%;
}

#progressBar {
    width: 100%;

    height: 5px;

    appearance: none;

    border-radius: 999px;

    background: #ecd8de;

    cursor: pointer;
}

#progressBar::-webkit-slider-thumb {
    appearance: none;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: var(--pink);

    cursor: pointer;
}


/* =========================================
   ⏱️ TIME DISPLAY
========================================= */

.time-display {
    display: flex;

    justify-content: space-between;

    margin-top: 7px;

    color: var(--text-soft);

    font-size: 0.75rem;
}


/* =========================================
   🎛️ MUSIC CONTROLS
========================================= */

.music-controls {
    display: flex;

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

    gap: 25px;

    margin: 22px 0;
}

.music-controls button {
    display: flex;

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

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: transparent;

    color: var(--text-main);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.music-controls button:active {
    transform: scale(0.9);
}

.music-controls .play-button {
    width: 58px;
    height: 58px;

    background: var(--pink);

    color: white;

    font-size: 1.1rem;
}


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

.playlist-container {
    margin-top: 30px;

    text-align: left;
}

.playlist-title {
    margin-bottom: 12px;

    color: var(--text-soft);

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.05em;
}


/* =========================================
   🎵 PLAYLIST ITEM
========================================= */

.playlist-item {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 11px;

    border-radius: 13px;

    background: transparent;

    cursor: pointer;

    transition:
        background 0.2s ease;
}

.playlist-item:hover {
    background: rgba(239, 169, 189, 0.12);
}

.playlist-item.active {
    background: rgba(239, 169, 189, 0.18);
}

.playlist-item img {
    width: 42px;
    height: 42px;

    object-fit: cover;

    border-radius: 8px;
}

.playlist-item-info {
    min-width: 0;
}

.playlist-item-title {
    overflow: hidden;

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

    font-size: 0.9rem;

    font-weight: 600;
}

.playlist-item-artist {
    color: var(--text-soft);

    font-size: 0.75rem;
}


/* =========================================
   📸 MEMORIES
========================================= */

.memories-section {
    text-align: center;
}

.section-description {
    max-width: 500px;

    margin: 12px auto 0;

    color: var(--text-soft);

    font-size: 0.9rem;

    line-height: 1.7;
}


/* =========================================
   📸 POLAROID GRID — SCRAPBOOK
========================================= */

.memory-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px;
    width: 100%;
    margin-top: 45px;
}


/* =========================================
   🖼️ POLAROID
========================================= */

.polaroid {
    position: relative;
    width: min(78vw, 330px);
    padding: 12px 12px 24px;
    background: #ffffff;
    border-radius: 3px;

    box-shadow:
        0 12px 30px
        rgba(92, 69, 76, 0.16);

    cursor: pointer;

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

    isolation: isolate;
}


/* =========================================
   ↔️ ALTERNATING POSITION
========================================= */

.polaroid:nth-child(odd) {
    align-self: flex-start;
    margin-left: 4%;
}

.polaroid:nth-child(even) {
    align-self: flex-end;
    margin-right: 4%;
}


/* =========================================
   📸 POLAROID IMAGE
========================================= */

.polaroid img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}


/* =========================================
   📝 POLAROID CAPTION
========================================= */

.polaroid-caption {
    min-height: 25px;
    margin-top: 12px;
    padding: 0 5px;

    color: #55454b;

    font-family:
        "Comic Sans MS",
        cursive;

    font-size: 0.72rem;
    line-height: 1.4;
    text-align: center;
}


/* =========================================
   🔄 POLAROID ROTATIONS
========================================= */

.polaroid:nth-child(1) {
    transform: rotate(-2.5deg);
}

.polaroid:nth-child(2) {
    transform: rotate(2.8deg);
}

.polaroid:nth-child(3) {
    transform: rotate(-1.8deg);
}

.polaroid:nth-child(4) {
    transform: rotate(2.2deg);
}

.polaroid:nth-child(5) {
    transform: rotate(-2.8deg);
}

.polaroid:nth-child(6) {
    transform: rotate(1.7deg);
}

.polaroid:nth-child(7) {
    transform: rotate(-1.5deg);
}

.polaroid:nth-child(8) {
    transform: rotate(2.5deg);
}


/* =========================================
   💋 KISS STICKER
========================================= */

.polaroid::after {
    content: "💋";

    position: absolute;
    z-index: 3;

    font-size: 1.8rem;

    filter:
        drop-shadow(
            0 3px 5px
            rgba(92, 69, 76, 0.18)
        );

    pointer-events: none;
}


/* =========================================
   💋 KISS POSITION — ODD
========================================= */

.polaroid:nth-child(odd)::after {
    top: -15px;
    right: -13px;

    transform:
        rotate(12deg)
        scale(1.05);
}


/* =========================================
   💋 KISS POSITION — EVEN
========================================= */

.polaroid:nth-child(even)::after {
    bottom: -13px;
    left: -15px;

    transform:
        rotate(-15deg)
        scale(0.95);
}


/* =========================================
   💗 SOFT KISS GLOW
========================================= */

.polaroid::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 45px;
    height: 35px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(239, 169, 189, 0.35),
            rgba(239, 169, 189, 0)
        );

    filter: blur(5px);

    pointer-events: none;
}


/* =========================================
   💗 KISS GLOW POSITION — ODD
========================================= */

.polaroid:nth-child(odd)::before {
    top: -8px;
    right: -8px;
}


/* =========================================
   💗 KISS GLOW POSITION — EVEN
========================================= */

.polaroid:nth-child(even)::before {
    bottom: -8px;
    left: -8px;
}


/* =========================================
   🖱️ POLAROID HOVER
========================================= */

.polaroid:hover {
    z-index: 5;

    box-shadow:
        0 18px 40px
        rgba(92, 69, 76, 0.22);
}


/* =========================================
   ✨ HOVER — ODD
========================================= */

.polaroid:nth-child(odd):hover {
    transform:
        rotate(-1deg)
        translateY(-5px)
        scale(1.02);
}


/* =========================================
   ✨ HOVER — EVEN
========================================= */

.polaroid:nth-child(even):hover {
    transform:
        rotate(1deg)
        translateY(-5px)
        scale(1.02);
}


/* =========================================
   📱 TOUCH FEEDBACK
========================================= */

.polaroid:active {
    transform:
        scale(0.97);
}


/* =========================================
   🔍 MEMORY OVERLAY
========================================= */

.memory-overlay {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

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

    flex-direction: column;

    padding: 30px 20px;

    background:
        rgba(35, 24, 29, 0.55);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    opacity: 1;

    transition:
        opacity 0.3s ease;

}


/* =========================================
   🔒 HIDDEN OVERLAY
========================================= */

.memory-overlay.hidden {

    display: none;

}


/* =========================================
   📸 ENLARGED POLAROID
========================================= */

.memory-modal {

    position: relative;

    width: min(
        82vw,
        380px
    );

    padding: 14px 14px 25px;

    background: #ffffff;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.3);

    transform:
        scale(0.85)
        rotate(-2deg);

    animation:
        memoryOpen
        0.35s
        ease forwards;

}


/* =========================================
   ✨ OPEN ANIMATION
========================================= */

@keyframes memoryOpen {

    from {

        opacity: 0;

        transform:
            scale(0.85)
            rotate(-4deg);

    }

    to {

        opacity: 1;

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

    }

}


/* =========================================
   🖼️ MODAL IMAGE
========================================= */

.memory-photo-wrapper img {

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

}


/* =========================================
   📝 MODAL CAPTION
========================================= */

.memory-modal-caption {

    margin-top: 14px;

    padding: 0 8px;

    color: #55454b;

    font-family:
        "Comic Sans MS",
        cursive;

    font-size: 0.95rem;

    line-height: 1.5;

    text-align: center;

}


/* =========================================
   💭 OVERLAY HINT
========================================= */

.memory-hint {

    margin-top: 18px;

    color:
        rgba(255, 255, 255, 0.8);

    font-size: 0.75rem;

    letter-spacing: 0.03em;

}


/* =========================================
   📱 TOUCH FEEDBACK
========================================= */

.polaroid:active {

    transform:
        scale(0.97);

}


/* =========================================
   💭 STORY — FROM THEN UNTIL NOW
========================================= */

.story-section {

    background:
        rgba(248, 223, 231, 0.25);

}


/* =========================================
   📖 STORY CONTAINER
========================================= */

#storyContainer {

    width: 100%;
    margin-top: 40px;

}


/* =========================================
   📖 STORY CHAPTER
========================================= */

.story-chapter {

    position: relative;

    width: 100%;

    margin-bottom: 14px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid
        rgba(239, 169, 189, 0.18);

    border-radius:
        var(--radius-medium);

    box-shadow:
        var(--shadow-soft);

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

}


/* =========================================
   📖 STORY HEADER
========================================= */

.story-header {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 72px;

    padding: 18px;

    gap: 14px;

    cursor: pointer;

    user-select: none;

}


/* =========================================
   🌷 STORY ICON
========================================= */

.story-icon {

    flex-shrink: 0;

    display: flex;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        rgba(239, 169, 189, 0.18);

    font-size: 1.15rem;

    transition:
        transform 0.35s ease,
        background 0.35s ease;

}


/* =========================================
   📝 STORY TITLE
========================================= */

.story-title {

    flex: 1;

    color:
        var(--text-main);

    font-size:
        0.95rem;

    font-weight:
        600;

    line-height:
        1.4;

}


/* =========================================
   ➕ STORY ARROW
========================================= */

.story-arrow {

    flex-shrink: 0;

    display: flex;

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

    width: 28px;
    height: 28px;

    color:
        var(--pink-dark);

    font-size:
        1.3rem;

    font-weight:
        400;

    transition:
        transform 0.35s ease;

}


/* =========================================
   📜 STORY CONTENT
========================================= */

.story-content {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.45s ease;

}


/* =========================================
   📜 STORY CONTENT INNER
========================================= */

.story-content-inner {

    min-height: 0;

    overflow: hidden;

}


/* =========================================
   💭 STORY TEXT
========================================= */

.story-text {

    padding:
        0 20px;

    color:
        var(--text-soft);

    font-size:
        0.95rem;

    line-height:
        1.8;

    opacity:
        0;

    transform:
        translateY(-5px);

    transition:
        opacity 0.3s ease,
        transform 0.35s ease,
        padding 0.45s ease;

}


/* =========================================
   💗 STORY OPEN
========================================= */

.story-chapter.open {

    box-shadow:
        0 14px 35px
        rgba(92, 69, 76, 0.14);

}


/* =========================================
   📖 OPEN CONTENT
========================================= */

.story-chapter.open .story-content {

    grid-template-rows: 1fr;

}


.story-chapter.open .story-text {

    padding:
        0 20px 22px;

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================
   ✨ OPEN ICON
========================================= */

.story-chapter.open .story-icon {

    transform:
        rotate(8deg);

    background:
        rgba(239, 169, 189, 0.28);

}


/* =========================================
   ➖ CHANGE PLUS WHEN OPEN
========================================= */

.story-chapter.open .story-arrow {

    transform:
        rotate(45deg);

}


/* =========================================
   📱 TOUCH FEEDBACK
========================================= */

.story-header:active {

    transform:
        scale(0.98);

}


/* =========================================
   💻 TABLET / DESKTOP
========================================= */

@media (min-width: 600px) {

    .story-title {

        font-size:
            1rem;

    }

    .story-header {

        padding:
            20px;

    }

}


/* =========================================
   💌 LETTER INTRO
========================================= */

.letter-intro-section {
    text-align: center;
}

.letter-intro-section h2 {
    margin-bottom: 30px;
}


/* =========================================
   💌 BIRTHDAY LETTER PAGE
========================================= */

.scene {
    width: 100%;

    padding: 70px 20px;
}

.letter-container {
    width: min(100%, 650px);
    margin: 0 auto;
}

.letter-content {
    margin: 40px 0;

    padding: 28px 22px;

    background: rgba(255, 255, 255, 0.8);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-soft);
}

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


/* =========================================
   🌙 FINAL SURPRISE
========================================= */

.final-surprise {
    position: fixed;
    inset: 0;

    z-index: 200;

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

    background: #080608;

    overflow: hidden;
}


/* =========================================
   ✨ PINK LIGHT
========================================= */

.final-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #f7b4ca;

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

    opacity: 0;

    filter: blur(8px);

    box-shadow:
        0 0 20px #f7b4ca,
        0 0 50px #f7b4ca,
        0 0 100px #f7b4ca;

    transition:
        transform 2.5s ease,
        opacity 1.5s ease,
        filter 2.5s ease;
}


/* =========================================
   💗 GLOW ACTIVE
========================================= */

.final-surprise.glow-active .final-glow {
    transform:
        translate(-50%, -50%)
        scale(25);

    opacity: 1;

    filter: blur(30px);
}


/* =========================================
   📝 FINAL MESSAGE
========================================= */

.final-message {
    position: relative;

    z-index: 2;

    width: min(90%, 600px);

    padding: 20px;

    text-align: center;

    color: #fff;

    font-size:
        clamp(1.5rem, 7vw, 3rem);

    font-weight: 600;

    line-height: 1.4;

    opacity: 0;

    transition:
        opacity 1s ease;
}


/* =========================================
   ✨ MESSAGE VISIBLE
========================================= */

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


/* =========================================
   🎂 FINAL BIRTHDAY MESSAGE
========================================= */

.final-message.final {
    font-size:
        clamp(2rem, 10vw, 4rem);

    font-weight: 700;

    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px rgba(247, 180, 202, 0.7);
}


/* =========================================
   🔍 MEMORY OVERLAY
========================================= */

.memory-overlay {
    position: fixed;
    inset: 0;

    z-index: 100;

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

    padding: 24px;

    background: rgba(30, 20, 24, 0.45);

    backdrop-filter: blur(12px);
}


/* =========================================
   👻 HIDDEN UTILITY
========================================= */

.hidden {
    display: none !important;
}


/* =========================================
   📲 TABLET
========================================= */

@media (min-width: 600px) {

    .section {
        padding: 100px 32px;
    }

    .pin-input-wrapper {
        flex-direction: row;
    }

    #pinInput {
        flex: 1;
    }

    #unlockButton {
        flex-shrink: 0;
    }

    #memoryGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}


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

@media (min-width: 900px) {

    .section {
        padding: 120px 40px;
    }

    #memoryGrid {
        grid-template-columns: repeat(2, 1fr);
    }

}