body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #ffe6eb, #fff0f5); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
* { box-sizing: border-box; }
#noBtn { position: fixed; width: auto; padding: 8px 14px; font-size: 14px; z-index: 9999; transition: 0.05s; }
.main { max-width: 850px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; height: 100vh; }
.quest-main { height: 100vh; display: flex; flex-direction: column; }
.quest-main .block { flex: 1; display: flex; justify-content: center; flex-direction: column; }
.quest-obolonka { flex: 1; display: flex; }
.zag-timer a{text-decoration: none;color: #ff4d6d;}
  .h1-page100 { font-size: 24px; }


.container100 { max-width: 700px; width: 100%; }
.card100 { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.h1-page100 { text-align: center; color: #ff4d6d; margin-bottom: 20px; }
.reason { padding: 10px 0; border-bottom: 1px solid #eee; color: #333; font-size: 15px; }
.reason:last-child { border-bottom: none; }
.btn100 { display: block; text-align: center; margin-top: 20px; background: #ff4d6d; color: white; padding: 12px; border-radius: 12px; text-decoration: none; }
.btn100і:hover { opacity: 0.9; }

/* ================= TIMER ================= */

.timer-box { background: white; padding: 30px; border-radius: 20px; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); max-width: 790px; width: 100%; transition: 0.3s; margin-bottom: 30px; }
.timer-box:hover { transform: translateY(-3px); }
.zag-timer { color: #ff4d6d; margin-bottom: 15px; }
#timer { font-size: 22px; font-weight: bold; color: #333; }

/* ================= STORY ================= */

.story-box { background: white; padding: 30px; border-radius: 20px; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); width: 100%; max-width: 790px; margin-top: 30px; }
.story-box h1 { color: #ff4d6d; margin-bottom: 10px; }
.story-text { color: #444; margin-bottom: 25px; }
.stats { display: flex; gap: 10px; }
.stat { flex: 1; background: #ffe6eb; padding: 15px; border-radius: 15px; transition: 0.3s; }
.stat:hover { transform: scale(1.05); }
.stat-number { font-size: 20px; font-weight: bold; color: #ff4d6d; }
.stat-label { font-size: 12px; margin-top: 5px; color: #333; font-weight: 700; }

/* ================= MINI GAME ================= */

.block { background: #ffe6eb; padding: 41px; border-radius: 20px; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); width: 100%; margin: 0 auto; transition: 0.3s; max-width: 600px; }
.block h3 { color: #ff4d6d; margin-bottom: 40px; margin-top: 0; font-size: 25px; }
.block p { color: #333; margin-bottom: 15px; }
.block button { display: block; width: 100%; margin: 7px auto; padding: 20px 15px; border: none; border-radius: 12px; background: #ff4d6d; color: white; font-size: 14px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(255, 77, 109, 0.2); max-width: 350px; font-size: 19px; }
.block button:hover { background: #e63956; transform: scale(1.03); }
.block button:active { transform: scale(0.97); }

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

.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 10; }
.popup-content { background: white; padding: 30px; border-radius: 20px; text-align: center; max-width: 720px; width: 500px; height: 200px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); animation: pop 0.3s ease; }
.popup-content h2 { margin-bottom: 15px; color: #ff4d6d; font-size: 29px; }
.popup-content button { background: #ff4d6d; color: white; border: none; padding: 20px 40px; border-radius: 10px; cursor: pointer; transition: 0.2s; font-size: 18px; }
.popup-content button:hover { transform: scale(1.05); }

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

#hearts-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.heart { position: absolute; top: -10px; color: #ff4d6d; font-size: 20px; animation: fall linear forwards; opacity: 0.8; }
@keyframes fall { to { transform: translateY(110vh); opacity: 0; } }

/* ================= ANIMATIONS ================= */

@keyframes pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.box-1, .box-3 { flex: 0 0 auto; }
.box-2 { flex: 1; /* 🔥 ключ */ display: flex; width: 100%; background: white; padding: 30px; border-radius: 20px; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); width: 100%; margin: 0 auto; /* transition: 0.3s; */ transition: 0.3s; width: 790px; }


/* MEDIA */

@media (max-width: 800px) {
  .main { width: auto; margin: 0px 2%; }
  .story-box { width: 100%; }
  .box-2 { width: 100%; }
  .timer-box { width: 100%; }
    .h1-page100 { font-size: 19px; }
}


@media (max-width:480px) {
  .popup-content { margin: 0px 10px; width: 100%; }
  .story-box h1 { color: #ff4d6d; margin-bottom: 10px; text-align: center; line-height: 43px; font-size: 24px; }
  .story-text { color: #444; margin-bottom: 20px; font-size: 14px; }
  .box-2 { padding: 15px; }
    .h1-page100 { font-size: 17px; }
}

@media (max-width:430px) {
  .story-text { color: #444; margin-bottom: 20px; font-size: 14px; margin-top: 4px; }
  .story-box h1 { color: #ff4d6d; margin-bottom: 0px; text-align: center; line-height: 43px; font-size: 20px; }
  .block h3 { color: #ff4d6d; margin-bottom: 17px; margin-top: 0; font-size: 22px; }
  #timer { font-size: 18px; font-weight: bold; color: #333; }
  .zag-timer { color: #ff4d6d; margin-bottom: 15px; font-size: 26px; }
}


@media (max-width:380px) {
  .story-box h1 { font-size: 19px; }
  .block h3 { font-size: 19px; }
  .zag-timer { color: #ff4d6d; margin-bottom: 15px; font-size: 24px; }
  .h1-page100 { font-size: 17px; }
}