@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;
  
}

.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, 90vw);
  padding: 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: 12px;
  margin-bottom: 25px;
  font-size: 10px;
}

.pixel-window h1 {
  font-size: 22px;
  margin-bottom: 18px;
}

.small-text {
  font-size: 9px;
  margin-bottom: 15px;
}

.display {
  height: 45px;
  background: #fff0f8;
  border: 4px solid #24182c;

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

  letter-spacing: 8px;
  font-size: 16px;

  margin-bottom: 18px;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.keypad button {
  height: 55px;

  border: 4px solid #24182c;
  background: #f8d9e9;

  font-family: inherit;
  font-size: 14px;

  cursor: pointer;

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

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

#error {
  color: #a91f52;
  font-size: 8px;
  min-height: 18px;
  margin-top: 14px;
}


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

#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-content {
  z-index: 5;
}

.big-heart,
.huge-heart {
  color: #d72b68;
  font-size: 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(22px, 7vw, 42px);
  color: white;
  text-shadow: 5px 5px #704080;
  margin: 20px 0;
}

.home-content h2 {
  color: #ffdaec;
  font-size: 20px;
}

.home-content p {
  font-size: 9px;
  line-height: 2;
  color: white;
  margin: 25px;
}


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

.pixel-btn,
.surprise {
  border: 5px solid #24182c;

  background: #ffc4df;

  padding: 15px 22px;

  font-family: inherit;
  font-size: 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, 88vw);
  min-height: 360px;

  padding: 50px 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(-12px) rotate(1deg);
  }
}

.envelope:before {
  content: "♥";

  position: absolute;

  top: -45px;
  left: 50%;

  transform: translateX(-50%);

  font-size: 65px;

  color: #f789b5;

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

.letter-paper h1 {
  font-size: 22px;
  line-height: 1.6;
}

.line {
  width: 70%;
  height: 5px;
  background: #6b3970;
  margin: 25px auto;
}

.letter-paper p {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  font-weight: bold;
}

.signature {
  margin-top: 20px;
  color: #c14082;
}

.bottom-btn {
  position: absolute;
  bottom: 30px;
}


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

.pixel-title {
  position: absolute;
  top: 45px;

  color: white;

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

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

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

  min-height: 250px;

  background: #f4d1df;

  border: 6px solid #24182c;

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

  padding: 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: 9px;
  color: #8d4280;
  margin-bottom: 30px;
}

#messageText {
  font-family: Arial, sans-serif;
  font-size: 23px;
  font-weight: bold;
  line-height: 1.5;
}

.message-buttons {
  position: absolute;
  bottom: 90px;

  display: flex;
  gap: 25px;
}

.message-buttons button {
  width: 65px;
  height: 55px;

  border: 5px solid #24182c;

  background: #ffc3df;

  font-family: inherit;
  font-size: 20px;

  cursor: pointer;

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


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

.photo-area {
  position: relative;

  width: min(700px, 90vw);
  height: 500px;
}

.photo {
  position: absolute;

  background: #fff;

  padding: 10px;

  border: 4px solid #24182c;

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

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

.photo img {
  width: 170px;
  height: 190px;

  object-fit: cover;

  display: block;
}

.photo span {
  position: absolute;

  right: -15px;
  top: -20px;

  font-size: 30px;

  color: #e23378;
}

.p1 {
  right: 100%;
  top: 30px;
  transform: rotate(-7deg);
}

.p2 {
  right: -15%;
  top: 60px;
  transform: rotate(-8deg);
  animation-delay: .7s;
}


.p5 {
  right:-15%;
  top: 350px;
  transform: rotate(9deg);
  animation-delay: .7s;
}

.p6 {
  right: 36%;
  top: 340px;
  transform: rotate(-8deg);
  animation-delay: .7s;
}

.p7 {
  right: 100%;
  top: 350px;
  transform: rotate(8deg);
  animation-delay: .7s;
}


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


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

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

  background: #e8a9d4;

  border: 6px solid #24182c;

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

  padding: 20px;
}

.player-top {
  background: #71396e;
  color: white;

  padding: 12px;

  font-size: 9px;
}

.album {
  width: 180px;
  height: 180px;

  margin: 25px auto;

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

  font-size: 35px;

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

  border: 5px solid #24182c;

  color: #a839ad;
}

.music-player h2 {
  font-size: 17px;
}

.music-player p {
  font-size: 9px;
  line-height: 1.8;
  margin: 12px;
}


.play-button {
  width: 65px;
  height: 65px;

  border-radius: 50%;

  border: 5px solid #24182c;

  background: #ffc4df;

  font-size: 20px;

  cursor: pointer;

  box-shadow: 5px 5px #71396e;
}
/* ================= WISHES ================= */

.wish-card {
  background: #f4d1df;

  border: 6px solid #24182c;

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

  padding: 35px;

  width: min(550px, 85vw);

  text-align: left;
}

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

  font-size: 18px;

  font-weight: bold;

  line-height: 2;

  margin: 8px 0;
}


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

.age-card {
  display: flex;
  gap: 15px;

  margin-bottom: 50px;
}

.age-card div {
  background: #f5dce9;

  border: 5px solid #24182c;

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

  width: 110px;

  padding: 18px 5px;
}

.age-card strong {
  display: block;

  font-size: 25px;

  background: white;

  padding: 12px;

  margin-bottom: 10px;
}

.age-card span {
  font-size: 7px;
}


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

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

  padding: 45px;

  background: #f5d0e0;

  border: 6px solid #24182c;

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

.surprise-box h1 {
  color: #c52e70;

  font-size: 28px;

  margin: 20px;
}

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

  font-size: 19px;

  font-weight: bold;

  line-height: 1.7;
}

.final {
  color: #a42d72;
  margin-top: 25px;
}


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

.hearts {
  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 100;
}

.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;
  }
}


/* ================= RESPONSIVE FIX ================= */

.screen {
    padding: 15px;
}

.home-content,
.envelope,
.message-box,
.music-player,
.wish-card,
.age-card,
.surprise-box {
    max-width: 100%;
}

/* TEXT */
.home-content h1 {
    font-size: clamp(18px, 4vw, 42px);
}

.pixel-title {
    font-size: clamp(13px, 3vw, 28px);
}

#messageText {
    font-size: clamp(15px, 2vw, 23px);
}

/* BUTTONS */
.pixel-btn,
.surprise {
    max-width: 90vw;
    white-space: normal;
}

/* AGE */
.age-card {
    max-width: 100%;
}

.age-card div {
    flex-shrink: 1;
}

/* PHONE */
@media (max-width: 600px) {

    .screen {
        padding: 12px;
    }

    /* Letter */
    .envelope {
        width: 92vw;
        max-height: 72vh;
        overflow-y: auto;
        padding: 25px 16px;
    }

    /* Messages */
    .message-box {
        width: 90vw;
        min-height: 210px;
        padding: 20px 15px;
    }

    #messageText {
        font-size: 16px;
        line-height: 1.7;
    }

    .message-buttons {
        bottom: 75px;
    }

    /* Photos */
    .photo-area {
        width: 90vw;
        height: 65vh;
        transform: scale(.55);
    }

    /* Song */
    .music-player {
        width: 90vw;
    }

    /* Wishes */
    .wish-card {
        width: 90vw;
        max-height: 65vh;
        overflow-y: auto;
    }

    /* Age */
    .age-card {
        width: 90vw;
        gap: 6px;
    }

    .age-card div {
        width: 29vw;
        max-width: 95px;
    }

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

    /* Surprise */
    .surprise-box {
        width: 90vw;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* ALL BUTTONS */
    .pixel-btn,
    .surprise {
        position: relative;
        z-index: 20;
    }
}

@media (max-width: 600px) {

   /* ================= MOBILE PHOTOS FIX ================= */

@media (max-width: 600px) {

    .photo-area {
        width: 100vw;
        height: 520px;
        position: relative;
        transform: none;
    }

    .photo {
        width: 120px;
        padding: 6px;
        box-sizing: border-box;
    }

    .photo img {
        width: 108px;
        height: 125px;
        object-fit: cover;
    }

    .photo span {
        font-size: 20px;
    }

    /* الصورة الأولى */
    .p1 {
        left: 4%;
        right: auto;
        top: 15px;
        transform: rotate(-6deg);
    }

    /* الصورة الثانية */
    .p2 {
        right: 4%;
        left: auto;
        top: 15px;
        transform: rotate(6deg);
    }

    /* الصورة الثالثة */
    .p5 {
        left: 4%;
        right: auto;
        top: 270px;
        transform: rotate(5deg);
    }

    /* الصورة الرابعة */
    .p6 {
        left: 50%;
        right: auto;
        top: 285px;
        transform: translateX(-50%) rotate(-5deg);
    }

    /* الصورة الخامسة */
    .p7 {
        right: 4%;
        left: auto;
        top: 270px;
        transform: rotate(6deg);
    }
}

/* ================= TEXT + BUTTON RESPONSIVE FIX ================= */

@media (max-width: 600px) {

    /* العناوين */
    .screen h1 {
        font-size: clamp(18px, 5vw, 26px);
        line-height: 1.5;
    }

    /* الكلام العادي */
    .screen p {
        font-size: clamp(12px, 3.5vw, 17px);
        line-height: 1.8;
    }

    /* الرسائل */
    #messageText {
        font-size: clamp(14px, 4.2vw, 20px);
        line-height: 1.8;
    }

    /* الورقة / الخطاب */
    .letter-paper h1 {
        font-size: clamp(17px, 5vw, 24px);
    }

    .letter-paper p {
        font-size: clamp(13px, 3.5vw, 17px);
        line-height: 1.8;
    }

    /* الأزرار */
    button {
        font-size: clamp(11px, 3vw, 15px);
        padding: 12px 18px;
        max-width: 90%;
    }

    /* أزرار التنقل */
    .nav-btn,
    .next-btn,
    .prev-btn {
        font-size: clamp(10px, 2.8vw, 14px);
    }

    /* عداد العمر */
    .age-card strong {
        font-size: clamp(18px, 5vw, 28px);
    }

    .age-card span {
        font-size: clamp(9px, 2.5vw, 13px);
    }

    /* مفاتيح الباسورد */
    .key {
        font-size: clamp(14px, 4vw, 20px);
    }

    /* رسالة الـ Surprise */
    .surprise-box h1 {
        font-size: clamp(18px, 5vw, 27px);
    }

    .surprise-box p {
        font-size: clamp(12px, 3.5vw, 17px);
        line-height: 1.8;
    }
}