* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --pink: #ffb6c1;
  --pink-deep: #ff8fab;
  --ink: #5b4a56;
}

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, "Helvetica Neue", sans-serif;
  color: var(--ink);
  overflow: hidden;
}

/* 背景层 */
.bg {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(160deg, #ffe3ef 0%, #fff0f6 45%, #fff7f0 100%);
  background-size: cover; background-position: center;
  transition: opacity .6s ease;
}
.bg-overlay {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .25);
}

/* 主体 */
.stage {
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.6rem; padding: 1.5rem; text-align: center;
}
.question {
  font-size: clamp(2rem, 7vw, 3.4rem);
  font-weight: 800; letter-spacing: .06em; line-height: 1.45;
  color: #4a3644;
  text-shadow:
    0 2px 4px rgba(255, 255, 255, .6),
    0 6px 18px rgba(255, 143, 171, .45);
  animation: float-in 1s ease both;
}
.actions {
  display: flex; align-items: center; justify-content: center;
  gap: 1.8rem; flex-wrap: wrap;
}

/* 按钮 */
.btn {
  border: none; cursor: pointer;
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  font-weight: 600; letter-spacing: .12em;
  padding: .95rem 2.8rem; border-radius: 999px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .35s ease, background-color .35s ease;
  will-change: transform;
}
.btn-yes {
  background: linear-gradient(135deg, #ff9ec2, #ff8fab);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 143, 171, .4);
}
.btn-yes:hover { transform: scale(1.06); box-shadow: 0 14px 30px rgba(255, 143, 171, .5); }
.btn-no {
  background: #fff; color: var(--ink);
  border: 1.5px solid #f6d5e0;
  box-shadow: 0 8px 20px rgba(255, 182, 193, .25);
}
.btn-no:hover { box-shadow: 0 12px 26px rgba(255, 182, 193, .35); }

/* 音乐开关 */
.music-toggle {
  position: fixed; top: 1.1rem; right: 1.1rem; z-index: 30;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
  cursor: pointer; display: grid; place-items: center;
  color: var(--pink-deep);
  box-shadow: 0 4px 14px rgba(255, 182, 193, .35);
  transition: transform .3s ease, background-color .3s ease;
}
.music-toggle:hover { transform: scale(1.08); }
.music-toggle svg { width: 1.3rem; height: 1.3rem; }
.music-toggle .ico { display: grid; place-items: center; }
.music-toggle.paused .ico.on { display: none; }
.music-toggle.paused .ico.off { display: grid; }

/* 弹出卡片 */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.5rem; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(91, 74, 86, .35); backdrop-filter: blur(3px); }
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 1.6rem; padding: 2.8rem 2.2rem;
  max-width: 22rem; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(255, 143, 171, .35);
  animation: pop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
.modal-close {
  position: absolute; top: .7rem; right: 1rem;
  border: none; background: none; font-size: 1.6rem; line-height: 1;
  color: #c9b3bd; cursor: pointer;
  transition: color .2s, transform .2s;
}
.modal-close:hover { color: var(--ink); transform: rotate(90deg); }
.modal-card h2 { font-size: 1.5rem; color: var(--pink-deep); margin-bottom: .9rem; letter-spacing: .05em; }
.card-content { font-size: 1.05rem; line-height: 1.9; white-space: pre-wrap; }

/* 卡片底部两个选项 */
.modal-actions {
  display: flex; gap: .8rem; justify-content: center;
  margin-top: 1.5rem;
}
.modal-btn {
  flex: 1;
  border: none; cursor: pointer;
  font-size: .98rem; font-weight: 600; letter-spacing: .08em;
  padding: .72rem 1rem; border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.modal-btn:hover { transform: translateY(-1px); }
.modal-btn-again {
  background: linear-gradient(135deg, #ff9ec2, #ff8fab); color: #fff;
  box-shadow: 0 6px 16px rgba(255, 143, 171, .4);
}
.modal-btn-close {
  background: #fff; color: var(--ink); border: 1.5px solid #f6d5e0;
  box-shadow: 0 6px 16px rgba(255, 182, 193, .2);
}

@keyframes float-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  from { opacity: 0; transform: scale(.82) translateY(22px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}