@font-face {
  font-family: pixel;
  src: url("assets/font.ttf");
}

body {
  margin:0;
  overflow:hidden;
  font-family: pixel;
  background:black;
}

/* START */
#startScreen {
  position:fixed;
  width:100%;
  height:100%;
}

#startBg {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* START BUTTON */
#startBtn {
  position:absolute;
  bottom:20%;
  left:50%;
  transform:translateX(-50%);
  z-index:20;

  font-family: pixel;
  font-size:16px;
  padding:14px 24px;

  border:3px solid white;
  background:#111;
  color:white;

  box-shadow:4px 4px 0 black;
}

/* GAME */
#game {
  width:100vw;
  height:100vh;
  background-size:cover;
  background-position:center;
  position:relative;
}

/* OVERLAY */
#overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:black;
  opacity:0;
  transition:0.3s;
  z-index:2;
}

/* NARRATOR */
#narrator {
  position:absolute;
  top:10%;
  left:8%;
  right:8%;

  color:white;
  font-size:16px;
  line-height:1.4;

  background:rgba(0,0,0,0.6);
  padding:14px;
  border-radius:8px;

  z-index:10;
}

/* TAP HINT (DÜZGÜN HALİ) */
#tapHint {
  position:absolute;
  bottom:12%;
  left:50%;
  transform:translateX(-50%);

  font-size:14px;
  color:white;

  opacity:0;
  transition:opacity 0.4s;

  z-index:9;
}

/* CHOICES */
#choices {
  position:absolute;
  bottom:20%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:20px;
  z-index:10;
}

#yesBtn, #noBtn {
  font-family: pixel;
  font-size:14px;
  padding:12px 20px;
  border:3px solid white;
  color:white;
}

#yesBtn { background:#ff2f6d; }
#noBtn { background:#333; }