:root{
  --pink:#ff6ea9;
  --pink2:#ffb0d2;
  --bg:#050814;
  --paper:#fffef8;
}

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

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:"Segoe UI",sans-serif;
  background:var(--bg);
}

#game{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* =========================
   INTRO
========================= */

#intro{
  position:fixed;
  inset:0;
  z-index:9999;

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

  overflow:hidden;

  background:
  radial-gradient(
    circle at center,
    #263b72 0%,
    #050814 70%
  );
}

#introOverlay{
  position:absolute;
  inset:0;

  background:
  radial-gradient(
    transparent,
    rgba(0,0,0,.65)
  );

  animation:introZoom 12s ease infinite;
}

#introContent{
  position:relative;
  z-index:2;

  text-align:center;
  color:white;
}

.introHeart{
  font-size:120px;

  margin-bottom:20px;

  animation:
  pulse 2.5s infinite,
  fadeUp 1.5s ease;
}

#intro h1{
  font-size:70px;
  margin-bottom:15px;
}

#intro p{
  font-size:22px;
  opacity:.9;
  margin-bottom:35px;
}

#startBtn{
  border:none;

  padding:16px 42px;

  border-radius:50px;

  color:white;

  cursor:pointer;

  font-size:18px;

  background:
  linear-gradient(
    45deg,
    var(--pink),
    var(--pink2)
  );

  box-shadow:
  0 0 30px rgba(255,110,169,.45);
}

#startBtn:hover{
  transform:scale(1.06);
}

/* =========================
   HUD
========================= */

#hud{
  display:none;

  position:fixed;

  top:20px;
  left:20px;

  z-index:50;

  color:white;

  padding:16px;

  border-radius:16px;

  background:
  rgba(0,0,0,.35);

  backdrop-filter:blur(12px);
}

#worldName{
  font-size:24px;
  font-weight:700;
}

#mission{
  margin-top:8px;
}

#memoryCount{
  margin-top:8px;
}

/* =========================
   ACTION
========================= */

#actionHint{
  display:none;

  position:fixed;

  bottom:35px;
  left:50%;

  transform:
  translateX(-50%);

  z-index:60;

  color:white;

  background:
  rgba(255,110,169,.9);

  padding:14px 24px;

  border-radius:40px;
}

/* =========================
   POPUP
========================= */

#memoryPopup{
  display:none;

  position:fixed;
  inset:0;

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

  background:
  rgba(0,0,0,.85);

  z-index:999;

  padding:20px;
}

#memoryCard{
  position:relative;

  width:min(92%,750px);

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

/* RAPTİYE */

.pin{
  position:absolute;

  top:-25px;

  font-size:48px;

  z-index:10;
}

/* FOTOĞRAF */

.photoFrame{

  background:white;

  padding:12px;
  padding-bottom:55px;

  border-radius:4px;

  box-shadow:
  0 20px 45px rgba(0,0,0,.4);

  transform:rotate(-3deg);

  z-index:3;
}

#memoryPhoto{
  width:320px;
  display:block;
}

/* GÜNLÜK SAYFASI */

.diaryPage{

  width:100%;

  margin-top:-15px;

  background:var(--paper);

  border-radius:12px;

  padding:40px;

  position:relative;

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

/* PEMBE ÇİZGİ */

.diaryPage::before{

  content:"";

  position:absolute;

  top:0;
  bottom:0;

  left:60px;

  width:3px;

  background:#ffb8cf;
}

/* SATIRLAR */

.diaryPage::after{

  content:"";

  position:absolute;

  inset:0;

  background:
  repeating-linear-gradient(
    transparent,
    transparent 35px,
    rgba(0,0,0,.05) 36px
  );

  pointer-events:none;
}

.pageDate{

  text-align:right;

  color:#888;

  margin-bottom:20px;

  position:relative;
  z-index:2;
}

#noteText{

  position:relative;
  z-index:2;

  color:#333;

  font-size:22px;

  line-height:2;

  padding-left:30px;

  font-family:
  "Segoe Print",
  cursive;
}

#continueBtn{

  margin-top:35px;

  border:none;

  background:
  linear-gradient(
    45deg,
    var(--pink),
    var(--pink2)
  );

  color:white;

  padding:14px 30px;

  border-radius:40px;

  cursor:pointer;

  font-size:17px;

  position:relative;
  z-index:2;
}

/* =========================
   FINAL
========================= */

#finalScreen{

  display:none;

  position:fixed;
  inset:0;

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

  background:
  radial-gradient(
    circle,
    #1f2d55,
    #050814
  );

  z-index:1000;
}

#finalCard{

  text-align:center;

  color:white;

  width:min(90%,700px);
}

#finalCard h1{

  font-size:100px;

  margin-bottom:10px;
}

#finalCard h2{

  font-size:50px;

  margin-bottom:25px;
}

#finalMessage{

  font-size:24px;

  line-height:1.8;
}

/* =========================
   ANIMS
========================= */

@keyframes pulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.1);
  }

  100%{
    transform:scale(1);
  }
}

@keyframes fadeUp{

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

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

@keyframes introZoom{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }
}

@media(max-width:768px){

  #intro h1{
    font-size:42px;
  }

  .introHeart{
    font-size:90px;
  }

  #memoryPhoto{
    width:100%;
  }

  #noteText{
    font-size:18px;
  }

  .diaryPage{
    padding:25px;
  }
}