:root{
  --bg: #0f0a1f;
  --card: #1a1333;
  --text: #ffffff;
  --muted: #c7b8ff;
  --accent: #ff4d8d;
  --accent-2: #ffa3c4;
  --shadow: rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 70% -10%, #261c4f 0%, var(--bg) 40%),
              radial-gradient(900px 700px at -10% 20%, #1b1238 0%, var(--bg) 50%),
              var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

.header{
  padding:32px 20px 12px;
  text-align:center;
}
.title{
  font-size: clamp(28px, 5vw, 52px);
  line-height:1.1;
  margin:0;
  letter-spacing:.5px;
}
.subtitle{opacity:.85;margin:8px 0 0;font-size:clamp(14px,2.2vw,18px)}

.container{
  max-width:980px;
  margin:0 auto;
  padding:20px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin-top:20px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow: 0 10px 30px var(--shadow);
  padding:18px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position:relative;
  overflow:hidden;
}
.card:hover{transform: translateY(-3px); border-color: rgba(255,255,255,.2); box-shadow: 0 16px 40px var(--shadow)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  background: radial-gradient(120% 120% at 50% 0%, var(--accent) 0%, var(--accent-2) 60%, #ffc5d9 100%);
  color:#1b0412;
  font-weight:700;
  border:none;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(255,77,141,.35);
  transition: transform .15s ease;
}
.btn:active{transform: translateY(2px)}

.muted{color:var(--muted); font-size: 0.95rem}

footer{opacity:.7; padding:28px; text-align:center}

/* Floating hearts background */
.heart-bubble{
  --size: 10px;
  position: fixed;
  bottom:-20px;
  pointer-events:none;
  animation: rise 10s linear infinite;
  filter: drop-shadow(0 6px 10px rgba(255,77,141,.25));
}
.heart-bubble svg{opacity:.8}
@keyframes rise{
  0%{transform: translateY(0) translateX(0) scale(.8); opacity:0}
  10%{opacity:.7}
  100%{transform: translateY(-110vh) translateX(var(--x)) scale(1.2); opacity:0}
}

/* Modal */
.modal{
  position: fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  z-index: 40;
}
.modal.open{display:flex}
.modal-card{
  width:min(720px, 92vw);
  max-height: 88vh;
  overflow:auto;
  background: var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  padding:22px;
}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.modal-title{font-weight:800; letter-spacing:.3px; font-size:1.2rem}
.icon-btn{
  background:transparent;border:none;color:var(--text);cursor:pointer;font-size:20px;line-height:1; padding:6px;border-radius:10px
}
.modal-body{line-height:1.6}
.modal-body p{margin:.6em 0}
.center{text-align:center}

/* Candle */
.cake{
  display:inline-block;
  margin-top:8px;
}
.flame{
  transform-origin: center bottom;
  animation: flicker 1.2s ease-in-out infinite;
}
@keyframes flicker {
  0%,100% { transform: scale(1) translateX(0) }
  50% { transform: scale(1.05) translateX(1px) }
}
.flame.off{animation:none; opacity:0}
.hint{opacity:.8; font-size:.95rem}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  padding:8px 12px; border-radius:999px; border:1px dashed rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
  font-weight:600; font-size:.95rem
}

/* Compliments hearts board */
.board{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap:10px; margin-top:12px
}
.board .h{
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,77,141,.75) 0%, rgba(255,77,141,.5) 60%, rgba(255,77,141,.35) 100%);
  color:#290816; font-weight:800;
  border-radius:18px; padding:14px 10px; text-align:center;
  cursor:pointer; user-select:none;
  transition: transform .15s ease, filter .2s ease;
  box-shadow: 0 8px 20px rgba(255,77,141,.25);
}
.board .h:hover{transform: translateY(-2px); filter: brightness(1.05)}
.board .h.revealed{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: var(--muted);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: none;
}

/* Small utility */
.small{font-size:.9rem; opacity:.9}
a.link{color:#ffd1e2; text-underline-offset:3px}