* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}

/* subtle animated background sheen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  transform: translateZ(0);
  pointer-events: none;
  animation: sheen 8s linear infinite;
}

@keyframes sheen {
  0% { transform: translateX(-30%); opacity: .7 }
  50% { transform: translateX(30%); opacity: .9 }
  100% { transform: translateX(-30%); opacity: .7 }
}

.container {
  background: rgba(255, 255, 255, 0.95);
  padding: 32px 26px;
  border-radius: 18px;
  text-align: center;
  width: min(520px, 90vw);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  animation: fadeIn 1.1s ease;
}

h1 {
  color: #e75480;
  margin-bottom: 10px;
}

/* gentle attention pulse */
h1 { animation: pulse 4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

h2 {
  color: #d6336c;
  margin: 20px 0;
}

p {
  color: #555;
  font-size: 15px;
  line-height: 1.45;
}

.lead { font-size:16px; margin-bottom:6px }

.buttons {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  position: relative;
}

button {
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.2s ease;
  position: relative;
}

.btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center }
.btn:focus { outline: 3px solid rgba(214,50,100,0.18); outline-offset:3px }
.btn.primary { box-shadow: 0 8px 20px rgba(255,77,109,0.18) }
.btn.playful { box-shadow: 0 6px 16px rgba(214,50,100,0.08) }
.btn:active { transform: translateY(2px) scale(.995) }

#yesBtn {
  background-color: #ff4d6d;
  color: white;
}

#yesBtn:hover {
  background-color: #e63950;
  transform: scale(1.1);
}

#noBtn {
  background-color: #ffd6e0;
  color: #b03060;
  box-shadow: 0 6px 18px rgba(214,50,100,0.12);
}

#response {
  margin-top: 20px;
  font-size: 18px;
  color: #d6336c;
  font-weight: bold;
}

/* Playful floating hearts background */
.hearts {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}


.heart {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translateY(120vh) rotate(0deg);
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'><path fill='%23ff4d6d' d='M23.6 0c-2 0-3.9 1-5 2.6C17 1 15.1 0 13.1 0 8 0 4.4 3.6 4.4 8.7c0 7.6 12 13.6 12 13.6s12-6 12-13.6C28.4 3.6 24.8 0 23.6 0z'/></svg>");
  opacity: 0.95;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  from { transform: translateY(120vh) translateX(0) scale(0.6); opacity: 0 }
  20% { opacity: 1 }
  to { transform: translateY(-20vh) translateX(40px) scale(1.05); opacity: 0 }
}

/* confetti pieces */
.confetti {
  position: absolute;
  width: 10px;
  height: 16px;
  opacity: 0.95;
  transform-origin: center;
  animation: confettiDrop linear forwards;
}

@keyframes confettiDrop {
  0% { transform: translateY(-10vh) rotate(0deg) scale(1); opacity:1 }
  100% { transform: translateY(120vh) rotate(650deg) scale(.9); opacity: 0 }
}

/* Week cards */
.week-wrap { margin: 18px 0 6px }
.week-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; color:#6b2744 }
.week-header small { color:#8b5576; font-size:12px }
.week { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items:start }
.card { background: linear-gradient(180deg,#fff,#fff7f9); border-radius:14px; padding:14px; box-shadow: 0 10px 26px rgba(0,0,0,0.06); transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .2s ease; position:relative; overflow:hidden }
.card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 50px rgba(0,0,0,0.10) }
.day-index { font-size:12px; color:#b35a7a }
.day-name { font-weight:700; color:#5a2037; margin:8px 0 }
.card .icon { font-size:28px; display:block; margin-bottom:8px }
.badge { position:absolute; top:10px; right:10px; padding:6px 8px; border-radius:999px; font-size:12px; font-weight:700 }
.badge.today { background: linear-gradient(90deg,#ff7aa2,#ff4d6d); color:white }
.badge.tomorrow { background:#ffd6e0; color:#b03060 }
.badge.done { background: linear-gradient(90deg,#c6ffd8,#8ef5b6); color:#1b6b3a }
.card .hint { font-size:12px; color:#8b5576; margin-top:6px }

.badge.locked { background: #f0e6ea; color:#8b5576; border:1px dashed rgba(139,85,118,0.14) }
.card.locked { opacity:0.94 }
.card.locked::after { content: ''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); border-radius:inherit }

/* pop-in animation for cards */
.card { opacity:0; transform: translateY(12px) scale(.99) }
.card.pop-in { animation: popIn .45s cubic-bezier(.2,.85,.25,1) forwards }
@keyframes popIn{ to { opacity:1; transform: translateY(0) scale(1) } }

/* subtle glow when unlocking */
.card.unlock-glow { box-shadow: 0 22px 60px rgba(255,122,162,0.12); transform: translateY(-6px) scale(1.02) }

@media (max-width:420px) {
  .card { min-width:220px }
}

/* hidden / reveal helpers */
.hidden { display:none }
.week-wrap.revealed { animation: fadeIn 0.7s ease; }

/* toast */
.val-toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(12px); bottom: 22px; background: rgba(20,10,20,0.92); color: #fff; padding: 10px 14px; border-radius: 999px; font-size:14px; opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease }
.val-toast.visible { opacity:1; transform: translateX(-50%) translateY(0) }

/* Celebration visuals when week is revealed */
.celebrate-banner {
  position: fixed;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,#ff7aa2,#ffd166,#ff4d6d);
  color: white;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.6px;
  box-shadow: 0 12px 40px rgba(255,77,109,0.18);
  z-index: 1200;
  transition: top .6s cubic-bezier(.2,.9,.2,1), opacity .4s ease;
  opacity: 0;
}
.celebrate-banner.show { top: 18px; opacity: 1 }

.container.celebrate { transform: scale(1.015); box-shadow: 0 30px 80px rgba(214,50,100,0.12) }

.ribbon { position: absolute; left: -12px; top: -10px; background: linear-gradient(90deg,#ff4d6d,#ff7aa2); color: white; padding:6px 12px; border-radius:6px; font-weight:800; transform: rotate(-12deg); box-shadow: 0 6px 18px rgba(214,50,100,0.12); font-size:12px }

/* subtle confetti behind container */
.celebrate-bg { position: absolute; inset: -40px; z-index: -1; pointer-events: none }

@media (prefers-reduced-motion: reduce) {
  .celebrate-banner, .card.pop-in { transition: none; animation: none }
}

/* Detail modal for day wishes */
.detail-overlay { position: fixed; inset: 0; background: rgba(10,6,10,0.45); display:flex; align-items:center; justify-content:center; z-index:1300; padding:20px }
.detail-card { width: min(720px, 96vw); max-width:720px; background: linear-gradient(180deg,#fff,#fffefc); border-radius:14px; padding:20px 22px; box-shadow: 0 30px 90px rgba(0,0,0,0.28); text-align:center; position:relative; transform: translateY(18px) scale(.98); opacity:0; animation: detailPop .48s cubic-bezier(.2,.9,.2,1) forwards }
.detail-close { position:absolute; right:12px; top:12px; background: rgba(0,0,0,0.06); border:none; padding:8px 10px; border-radius:8px; cursor:pointer }
.detail-emoji { font-size:48px; margin-bottom:6px }
.detail-title { font-size:20px; font-weight:800; color:#5a2037; margin-bottom:8px }
.detail-quote { font-size:16px; color:#6b2744; margin:12px 0 18px; line-height:1.45 }
.detail-actions { display:flex; gap:12px; justify-content:center; margin-top:10px }
.detail-actions .btn { padding:10px 14px; min-width:110px }

@keyframes detailPop { to { transform: translateY(0) scale(1); opacity:1 } }

/* small sparkle behind card */
.detail-sparkle { position:absolute; inset: -30px; z-index: -1; pointer-events:none; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0) 20%), radial-gradient(circle at 80% 80%, rgba(255,200,220,0.8) 0, rgba(255,200,220,0) 18%); filter: blur(14px); opacity:0.9 }

/* message input */
.detail-input { width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,0.08); border-radius:8px; font-size:14px; margin:12px 0; font-family:inherit; resize:none; max-height:80px; background:rgba(255,255,255,0.6) }
.detail-input:focus { outline:none; border-color:#ff7aa2; box-shadow: 0 0 0 3px rgba(255,122,162,0.1) }

/* private message view */
.private-message-screen { width:100%; max-width:500px; background: linear-gradient(180deg, #fff8fb, #fff); border-radius:14px; padding:28px 20px; text-align:center; box-shadow: 0 30px 90px rgba(0,0,0,0.28); position:relative }
.private-label { font-size:12px; color:#8b5576; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:6px }
.private-icon { font-size:40px; margin:12px 0 }
.private-message-text { font-size:16px; color:#5a2037; line-height:1.5; margin:16px 0; word-wrap:break-word; min-height:40px }
.private-back { display:inline-block; margin-top:14px; padding:8px 14px; background:rgba(255,77,109,0.1); color:#ff4d6d; border:none; border-radius:999px; cursor:pointer; font-size:13px }
.private-back:hover { background:rgba(255,77,109,0.18) }

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive tweaks */
@media (max-width: 420px) {
  .container { padding: 20px; border-radius: 14px }
  .buttons { flex-direction: column; gap: 12px }
  button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .container, .heart { animation: none }
}