@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: #090714;
    font-family: "Press Start 2P", monospace;
    color: #24182c;
}


/* ================= SCREEN ================= */

.screen {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    display: none;

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

    text-align: center;

    overflow: hidden;

    padding: clamp(12px, 3vw, 35px);
}

.screen.active {
    display: flex;
    animation: screenIn .7s ease forwards;
}

@keyframes screenIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }

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


/* ================= PASSWORD ================= */

#password {
    background:
        radial-gradient(circle at 20% 20%, #302152 0 2px, transparent 3px),
        radial-gradient(circle at 80% 30%, #ffffff 0 2px, transparent 3px),
        radial-gradient(circle at 50% 80%, #563c76 0 2px, transparent 3px),
        #080710;
}

.pixel-window {
    width: min(390px, 92vw);
    max-height: 92vh;

    padding: clamp(18px, 4vw, 25px);

    background: #f6c6df;

    border: 5px solid #1c1424;

    box-shadow:
        10px 10px 0 #7e3979,
        -5px -5px 0 #ffffff;

    animation: floatWindow 3s ease-in-out infinite;
}

@keyframes floatWindow {
    50% {
        transform: translateY(-8px);
    }
}

.window-title {
    background: #b34d9b;
    color: white;

    padding: clamp(9px, 2vw, 12px);

    margin-bottom: clamp(16px, 4vw, 25px);

    font-size: clamp(7px, 2vw, 10px);
}

.pixel-window h1 {
    font-size: clamp(17px, 5vw, 22px);
    margin-bottom: 18px;
}

.small-text {
    font-size: clamp(7px, 2vw, 9px);
    margin-bottom: 15px;
}

.display {
    width: 100%;
    height: clamp(40px, 11vw, 45px);

    background: #fff0f8;

    border: 4px solid #24182c;

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

    letter-spacing: clamp(4px, 2vw, 8px);

    font-size: clamp(13px, 4vw, 16px);

    margin-bottom: 18px;
}

.keypad {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: clamp(5px, 2vw, 8px);
}

.keypad button {
    width: 100%;
    height: clamp(45px, 13vw, 55px);

    border: 4px solid #24182c;

    background: #f8d9e9;

    font-family: inherit;

    font-size: clamp(11px, 4vw, 14px);

    cursor: pointer;

    box-shadow: 4px 4px 0 #8f4580;
}

.keypad button:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

#error {
    color: #a91f52;

    font-size: clamp(7px, 2vw, 8px);

    min-height: 18px;

    margin-top: 14px;
}


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

#home,
#letter,
#messages,
#photos,
#song,
#wishes,
#age,
#surprise {
    background:
        radial-gradient(circle at 10% 20%, #ffffff 0 2px, transparent 3px),
        radial-gradient(circle at 90% 15%, #ffffff 0 2px, transparent 3px),
        linear-gradient(
            180deg,
            #8e71ce 0%,
            #bd83ce 45%,
            #f39ac5 100%
        );
}


/* ================= HOME ================= */

.home-content {
    width: min(800px, 92vw);
    z-index: 5;
}

.big-heart,
.huge-heart {
    color: #d72b68;

    font-size: clamp(50px, 12vw, 75px);

    text-shadow:
        6px 6px 0 #641e59;

    animation: heartBeat 1.2s infinite;
}

@keyframes heartBeat {
    50% {
        transform: scale(1.12);
    }
}

.home-content h1 {
    font-size: clamp(18px, 5vw, 42px);

    line-height: 1.5;

    color: white;

    text-shadow: 5px 5px #704080;

    margin: 20px 0;
}

.home-content h2 {
    color: #ffdaec;

    font-size: clamp(14px, 3vw, 20px);
}

.home-content p {
    font-size: clamp(8px, 2.5vw, 11px);

    line-height: 2;

    color: white;

    margin: 25px;
}


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

.pixel-btn,
.surprise {
    max-width: 90vw;

    border: 5px solid #24182c;

    background: #ffc4df;

    padding: clamp(11px, 3vw, 15px) clamp(15px, 4vw, 22px);

    font-family: inherit;

    font-size: clamp(8px, 2.5vw, 10px);

    cursor: pointer;

    box-shadow: 6px 6px 0 #71396e;

    transition: .15s;
}

.pixel-btn:hover,
.surprise:hover {
    transform: translateY(-4px);
}

.pixel-btn:active,
.surprise:active {
    transform: translate(6px, 6px);
    box-shadow: none;
}


/* ================= LETTER ================= */

.envelope {
    width: min(650px, 92vw);

    max-height: 78vh;

    overflow-y: auto;

    padding: clamp(30px, 6vw, 50px) clamp(18px, 5vw, 35px);

    background: #cbb8ea;

    border: 6px solid #251928;

    box-shadow:
        12px 12px 0 #6b3970;

    position: relative;

    animation: envelopeFloat 4s ease-in-out infinite;
}

@keyframes envelopeFloat {
    50% {
        transform: translateY(-8px) rotate(1deg);
    }
}

.envelope:before {
    content: "♥";

    position: absolute;

    top: -45px;

    left: 50%;

    transform: translateX(-50%);

    font-size: clamp(45px, 10vw, 65px);

    color: #f789b5;

    text-shadow: 5px 5px #672051;
}

.letter-paper h1 {
    font-size: clamp(16px, 4vw, 22px);

    line-height: 1.6;

    margin-bottom: 8px;
}

.line {
    width: 70%;

    height: 5px;

    background: #6b3970;

    margin: 25px auto;
}

.letter-paper p {
    font-family: Arial, sans-serif;

    font-size: clamp(14px, 3vw, 18px);

    line-height: 1.8;

    font-weight: bold;
}

.signature {
    margin-top: 20px;

    color: #c14082;
}

.bottom-btn {
    position: absolute;

    bottom: clamp(15px, 4vw, 30px);
}


/* ================= MESSAGES ================= */

.pixel-title {
    position: absolute;

    top: clamp(20px, 6vh, 45px);

    width: 90vw;

    color: white;

    font-size: clamp(12px, 3.5vw, 28px);

    line-height: 1.5;

    text-shadow: 5px 5px #663d80;
}

.message-box {
    width: min(600px, 88vw);

    min-height: clamp(220px, 35vh, 250px);

    max-height: 50vh;

    background: #f4d1df;

    border: 6px solid #24182c;

    box-shadow:
        10px 10px 0 #743c77;

    padding: clamp(20px, 5vw, 35px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    animation: cardFloat 3s infinite ease-in-out;
}

@keyframes cardFloat {
    50% {
        transform: translateY(-8px) rotate(.5deg);
    }
}

#messageNumber {
    font-size: clamp(7px, 2vw, 9px);

    color: #8d4280;

    margin-bottom: 20px;
}

#messageText {
    width: 100%;

    font-family: Arial, sans-serif;

    font-size: clamp(15px, 3vw, 23px);

    font-weight: bold;

    line-height: 1.7;

    max-height: 30vh;

    overflow-y: auto;
}

.message-buttons {
    position: absolute;

    bottom: clamp(65px, 10vh, 90px);

    display: flex;

    gap: clamp(12px, 5vw, 25px);
}

.message-buttons button {
    width: clamp(50px, 15vw, 65px);

    height: clamp(45px, 13vw, 55px);

    border: 5px solid #24182c;

    background: #ffc3df;

    font-family: inherit;

    font-size: clamp(16px, 5vw, 20px);

    cursor: pointer;

    box-shadow: 5px 5px #71396e;
}


/* ================= PHOTOS ================= */

#photos {
    flex-direction: column;

    gap: 5px;
}

.photo-area {
    position: relative;

    width: min(700px, 92vw);

    height: min(500px, 62vh);

    flex-shrink: 1;
}

.photo {
    position: absolute;

    background: #fff;

    padding: clamp(6px, 1.5vw, 10px);

    border: 4px solid #24182c;

    box-shadow: 8px 8px 0 #71396e;

    animation: photoFloat 4s infinite ease-in-out;
}

.photo img {
    width: clamp(90px, 15vw, 170px);

    height: clamp(105px, 17vw, 190px);

    object-fit: cover;

    display: block;
}

.photo span {
    position: absolute;

    right: -15px;

    top: -20px;

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

    color: #e23378;
}


/* DESKTOP */

.p1 {
    left: -2%;

    top: 5%;

    transform: rotate(-7deg);
}

.p2 {
    right: -2%;

    top: 8%;

    transform: rotate(-8deg);

    animation-delay: .7s;
}

.p5 {
    right: -2%;

    bottom: 2%;

    transform: rotate(9deg);

    animation-delay: .7s;
}

.p6 {
    left: 50%;

    bottom: 0;

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

    animation-delay: .7s;
}

.p7 {
    left: -2%;

    bottom: 2%;

    transform: rotate(8deg);

    animation-delay: .7s;
}

@keyframes photoFloat {
    50% {
        margin-top: -12px;
    }
}


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

.music-player {
    width: min(390px, 90vw);

    background: #e8a9d4;

    border: 6px solid #24182c;

    box-shadow: 10px 10px 0 #71396e;

    padding: clamp(15px, 4vw, 20px);
}

.player-top {
    background: #71396e;

    color: white;

    padding: 12px;

    font-size: clamp(7px, 2vw, 9px);
}

.album {
    width: clamp(130px, 45vw, 180px);

    height: clamp(130px, 45vw, 180px);

    margin: 25px auto;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: clamp(25px, 8vw, 35px);

    background:
        linear-gradient(
            135deg,
            #ffc8e2,
            #9367c5
        );

    border: 5px solid #24182c;

    color: #a839ad;
}

.music-player h2 {
    font-size: clamp(13px, 4vw, 17px);
}

.music-player p {
    font-size: clamp(8px, 2.5vw, 9px);

    line-height: 1.8;

    margin: 12px;
}

.play-button {
    width: clamp(55px, 17vw, 65px);

    height: clamp(55px, 17vw, 65px);

    border-radius: 50%;

    border: 5px solid #24182c;

    background: #ffc4df;

    font-size: clamp(17px, 5vw, 20px);

    cursor: pointer;

    box-shadow: 5px 5px #71396e;
}


/* ================= WISHES ================= */

.wish-card {
    background: #f4d1df;

    border: 6px solid #24182c;

    box-shadow: 10px 10px #71396e;

    padding: clamp(20px, 5vw, 35px);

    width: min(550px, 88vw);

    max-height: 55vh;

    overflow-y: auto;

    text-align: left;
}

.wish-card p {
    font-family: Arial, sans-serif;

    font-size: clamp(14px, 3vw, 18px);

    font-weight: bold;

    line-height: 2;

    margin: 8px 0;
}


/* ================= AGE ================= */

.age-card {
    display: flex;

    justify-content: center;

    gap: clamp(7px, 2vw, 15px);

    margin-bottom: 40px;
}

.age-card div {
    background: #f5dce9;

    border: 5px solid #24182c;

    box-shadow: 6px 6px #71396e;

    width: clamp(80px, 22vw, 110px);

    padding: clamp(10px, 3vw, 18px) 5px;
}

.age-card strong {
    display: block;

    font-size: clamp(17px, 5vw, 25px);

    background: white;

    padding: clamp(8px, 2vw, 12px);

    margin-bottom: 10px;
}

.age-card span {
    font-size: clamp(6px, 1.8vw, 7px);
}


/* ================= SURPRISE ================= */

.surprise-box {
    width: min(600px, 90vw);

    max-height: 75vh;

    overflow-y: auto;

    padding: clamp(25px, 6vw, 45px);

    background: #f5d0e0;

    border: 6px solid #24182c;

    box-shadow: 12px 12px #71396e;
}

.surprise-box h1 {
    color: #c52e70;

    font-size: clamp(19px, 5vw, 28px);

    line-height: 1.5;

    margin: 20px;
}

.surprise-box p {
    font-family: Arial, sans-serif;

    font-size: clamp(14px, 3vw, 19px);

    font-weight: bold;

    line-height: 1.8;
}

.final {
    color: #a42d72;

    margin-top: 25px;
}


/* ================= FLOATING HEARTS ================= */

.hearts {
    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 100;

    overflow: hidden;
}

.heart {
    position: absolute;

    color: #ffb4d7;

    font-size: 15px;

    animation: rise linear forwards;

    opacity: .8;
}

@keyframes rise {

    from {
        transform:
            translateY(110vh)
            rotate(0);

        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    to {
        transform:
            translateY(-15vh)
            rotate(360deg);

        opacity: 0;
    }
}


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

@media (max-width: 600px) {

    .screen {
        padding: 10px;
    }

    .pixel-window {
        width: 92vw;

        padding: 16px;

        box-shadow:
            6px 6px 0 #7e3979,
            -3px -3px 0 #ffffff;
    }

    .envelope {
        width: 92vw;

        max-height: 72vh;

        padding: 30px 15px;
    }

    .letter-paper {
        padding: 20px 14px;
    }

    .letter-paper p {
        font-size: clamp(13px, 4vw, 15px);

        line-height: 1.8;
    }

    .bottom-btn {
        bottom: 12px;
    }


    /* PHOTOS */

    #photos {
        padding-top: 45px;
        padding-bottom: 10px;
    }

    #photos .pixel-title {
        top: 18px;
    }

    .photo-area {
        width: 94vw;

        height: 390px;

        transform: none;
    }

    .photo {
        padding: 5px;

        border-width: 3px;

        box-shadow: 5px 5px 0 #71396e;
    }

    .photo img {
        width: clamp(78px, 25vw, 105px);

        height: clamp(95px, 30vw, 125px);
    }

    .photo span {
        right: -10px;
        top: -16px;

        font-size: 20px;
    }

    .p1 {
        left: 1%;
        right: auto;

        top: 10px;

        transform: rotate(-7deg);
    }

    .p2 {
        right: 1%;
        left: auto;

        top: 10px;

        transform: rotate(8deg);
    }

    .p5 {
        left: 1%;
        right: auto;

        bottom: 0;

        transform: rotate(7deg);
    }

    .p6 {
        left: 50%;
        right: auto;

        bottom: -5px;

        transform: translateX(-50%) rotate(-7deg);
    }

    .p7 {
        right: 1%;
        left: auto;

        bottom: 0;

        transform: rotate(8deg);
    }


    /* MESSAGES */

    .message-box {
        width: 91vw;

        min-height: 230px;

        padding: 20px 13px;
    }

    #messageText {
        font-size: clamp(14px, 4.2vw, 18px);

        line-height: 1.7;
    }

    .message-buttons {
        bottom: 58px;
    }


    /* AGE */

    .age-card {
        gap: 6px;
    }

    .age-card div {
        width: 28vw;

        padding: 9px 3px;

        box-shadow: 4px 4px #71396e;
    }

}


/* ================================================= */
/* =============== VERY SMALL PHONES ============== */
/* ================================================= */

@media (max-width: 380px) {

    .pixel-title {
        font-size: 11px;
    }

    .home-content h1 {
        font-size: 17px;
    }

    .photo-area {
        height: 350px;
    }

    .photo img {
        width: 78px;
        height: 95px;
    }

    .message-box {
        min-height: 215px;
    }

    #messageText {
        font-size: 13px;
    }

    .wish-card p {
        font-size: 13px;
    }

    .age-card div {
        width: 27vw;
    }

    .age-card strong {
        font-size: 16px;
    }

}