/* ===============================
   RESET
================================*/
* {
  box-sizing: border-box;
}

/* ===============================
   BODY
================================*/
body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #ffd1dc, #ffe6f2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Comic Sans MS', 'Segoe UI', cursive;
  overflow: hidden;
}

/* ===============================
   POPUP (HOME CONTAINER)
================================*/
#popup {
  width: 95vw;              /* FULL WIDTH ON MOBILE */
  max-width: none;          /* REMOVE SIZE LIMIT */
  padding: 50px;            /* BIG PADDING */
  background: #ffb6c1;
  border-radius: 35px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

/* TITLE */
#popup h1 {
  font-size: 38px;          /* BIG TEXT */
  color: #b30059;
  margin-bottom: 40px;
}

/* ===============================
   BUTTONS
================================*/
button {
  font-size: 28px;          /* BIG BUTTON TEXT */
  padding: 22px 48px;       /* BIG TAP AREA */
  border-radius: 40px;
  border: none;
  cursor: pointer;
  margin: 10px;
}

/* YES BUTTON */
#yes {
  background: #ff4081;
  color: white;
  box-shadow: 0 8px 16px rgba(255,64,129,0.5);
}

/* NO BUTTON */
#no {
  background: white;
  color: #ff4081;
  position: absolute;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* ===============================
   RESULT MODAL
================================*/
#resultModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 999;
  padding-top: 8vh;
  text-align: center;
}

/* YAY TEXT */
#resultModal h2 {
  font-size: 42px;          /* HUGE TEXT */
  color: #ff69b4;
  margin-bottom: 25px;
}

/* GIF / IMAGE */
#resultModal img {
  width: 98vw;              /* ALMOST FULL SCREEN */
  max-width: none;          /* NO SIZE LIMIT */
  max-height: 75vh;
  border-radius: 35px;
  box-shadow: 0 12px 35px rgba(255,105,180,0.6);
}

/* ===============================
   DESKTOP OVERRIDES
================================*/
@media (min-width: 769px) {

  #popup {
    width: 420px;
    padding: 35px;
  }

  #popup h1 {
    font-size: 28px;
  }

  button {
    font-size: 20px;
    padding: 14px 32px;
  }

  #resultModal h2 {
    font-size: 30px;
  }

  #resultModal img {
    width: 500px;
    max-height: 70vh;
  }
}