/* =====================================================================
   BIRTHDAY PROPHECY — theme (bp.css)
   Design language from docs/game-ideas/visuals/birthday-prophecy-flow.html:
   mystic cream canvas, violet accent, wax-seal red, prophecy-gold —
   ink borders + hard offset shadows.
   Fraunces display / Plus Jakarta Sans body / JetBrains Mono labels.
   ===================================================================== */

:root {
  --bp-cream:  #F5EFF7;
  --bp-paper:  #FEFCFF;
  --bp-ink:    #221230;
  --bp-soft:   #5F4E6E;
  --bp-accent: #7C3AED;
  --bp-accent-deep: #6425D6;
  --bp-accent-soft: #EBDFFC;
  --bp-seal:   #C0284A;
  --bp-seal-soft: #FBDDE5;
  --bp-gold:   #D99A06;
  --bp-gold-soft: #FCF0CE;
  --bp-good:   #2B7A6B;
  --bp-good-soft: #DCEFEA;
  --bp-wa:     #25D366;
  --bp-rule:   rgba(34, 18, 48, .16);
  --bp-shadow: 6px 6px 0 rgba(34, 18, 48, .10);
  --bp-shadow-sm: 3px 3px 0 rgba(34, 18, 48, .14);
  --bp-radius: 18px;
}

/* ── Canvas ─────────────────────────────────────────────────────── */
body.bp-body {
  background: var(--bp-cream);
  background-image:
    radial-gradient(circle at 12% 6%,  rgba(124, 58, 237, .10), transparent 42%),
    radial-gradient(circle at 88% 94%, rgba(217, 154, 6, .09),  transparent 42%);
  color: var(--bp-ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bp-display { font-family: 'Fraunces', Georgia, serif; font-weight: 900; letter-spacing: -.02em; }
.bp-mono    { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-soft); }

.bp-wrap { max-width: 720px; margin: 0 auto; padding: 18px 14px 70px; }

/* ── Top brand bar ──────────────────────────────────────────────── */
.bp-topbar { display: flex; justify-content: center; padding: 14px 10px 0; }
.bp-topbrand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.15rem;
  color: var(--bp-ink); text-decoration: none;
}
.bp-topbrand:hover { color: var(--bp-accent); text-decoration: none; }
.bp-topbrand-emoji { font-size: 1.35rem; animation: bpFloat 3.2s ease-in-out infinite; }

/* ── Cards ──────────────────────────────────────────────────────── */
.bp-card {
  background: var(--bp-paper);
  border: 2px solid var(--bp-ink);
  border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow);
  padding: 22px 20px;
  margin: 18px 0;
  animation: bpRise .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
.bp-card + .bp-card { animation-delay: .08s; }

.bp-hero { text-align: center; padding: 26px 10px 6px; }
.bp-hero-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bp-soft);
}
.bp-hero-kicker::before, .bp-hero-kicker::after { content: ""; width: 26px; height: 2px; background: var(--bp-accent); }
.bp-hero h1 {
  font-family: 'Fraunces', serif; font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 6.4vw, 3rem); line-height: 1.02; margin: 0 0 10px;
}
.bp-hero h1 em { font-style: italic; color: var(--bp-accent); }
.bp-hero-sub { color: var(--bp-soft); font-size: 1.02rem; max-width: 540px; margin: 0 auto; }

/* ── Buttons ────────────────────────────────────────────────────── */
.bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 20px;
  background: var(--bp-accent); color: #fff;
  border: 2px solid var(--bp-ink); border-radius: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1rem;
  box-shadow: var(--bp-shadow-sm); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none; user-select: none;
}
.bp-btn:hover, .bp-btn:focus { color: #fff; text-decoration: none; background: var(--bp-accent-deep); transform: translate(-1px, -2px); box-shadow: 5px 6px 0 rgba(34,18,48,.16); }
.bp-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(34,18,48,.16); }
.bp-btn-gold  { background: var(--bp-gold); }
.bp-btn-gold:hover, .bp-btn-gold:focus { background: #BE8605; }
.bp-btn-seal  { background: var(--bp-seal); }
.bp-btn-seal:hover, .bp-btn-seal:focus { background: #A31F3D; }
.bp-btn-ghost { background: var(--bp-paper); color: var(--bp-ink); box-shadow: none; }
.bp-btn-ghost:hover, .bp-btn-ghost:focus { background: var(--bp-accent-soft); color: var(--bp-ink); }
.bp-btn-wa    { background: var(--bp-wa); }
.bp-btn-wa:hover, .bp-btn-wa:focus { background: #1EB456; }
.bp-btn[disabled] { opacity: .55; pointer-events: none; }

/* ── Forms ──────────────────────────────────────────────────────── */
.bp-label { display: block; font-weight: 800; font-size: .92rem; margin: 14px 0 6px; }
.bp-hint  { font-size: .78rem; color: var(--bp-soft); margin: 4px 0 8px; }
.bp-input, .bp-select, .bp-textarea {
  width: 100%; padding: 12px 14px;
  background: #fff; color: var(--bp-ink);
  border: 2px solid var(--bp-ink); border-radius: 12px;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.bp-input:focus, .bp-select:focus, .bp-textarea:focus {
  outline: none; border-color: var(--bp-accent); box-shadow: 0 0 0 4px rgba(124, 58, 237, .18);
}
.bp-input-err { border-color: var(--bp-seal) !important; animation: bpShake .4s ease; }
.bp-err { display: none; color: var(--bp-seal); font-size: .8rem; font-weight: 700; margin-top: 6px; }
.bp-err.show { display: block; animation: bpRise .25s ease both; }
.bp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Chips / avatars ────────────────────────────────────────────── */
.bp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; background: var(--bp-accent-soft);
  border: 2px solid var(--bp-ink); border-radius: 999px;
  font-size: .84rem; font-weight: 700; cursor: pointer; user-select: none;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.bp-chip:hover { transform: translateY(-2px) rotate(-1deg); }
.bp-chip.selected { background: var(--bp-accent); color: #fff; }

.bp-avatars { display: flex; flex-wrap: wrap; gap: 9px; }
.bp-avatar {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: #fff;
  border: 2px solid var(--bp-ink); border-radius: 14px; cursor: pointer;
  transition: transform .14s cubic-bezier(.2,.9,.3,1.4), background .14s ease, box-shadow .14s ease;
}
.bp-avatar:hover { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.bp-avatar.selected { background: var(--bp-accent-soft); border-color: var(--bp-accent); box-shadow: var(--bp-shadow-sm); transform: scale(1.08); }

/* ── Wizard steps / progress ────────────────────────────────────── */
.bp-progress { margin: 4px 0 6px; }
.bp-progress-track { height: 12px; background: #fff; border: 2px solid var(--bp-ink); border-radius: 999px; overflow: hidden; }
.bp-progress-fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(-45deg, var(--bp-accent) 0 12px, var(--bp-gold) 12px 24px);
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width .5s cubic-bezier(.2, .9, .3, 1);
  animation: bpCandy 6s linear infinite;
}
.bp-progress-label { text-align: center; margin-top: 7px; }
.bp-step { display: none; }
.bp-step.active { display: block; animation: bpStepIn .38s cubic-bezier(.2, .9, .3, 1.1) both; }
.bp-step-title { font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; margin: 4px 0 4px; }
.bp-step-title em { font-style: italic; color: var(--bp-accent); }
.bp-nav { display: flex; gap: 10px; margin-top: 18px; }
.bp-nav .bp-back { flex: 0 0 auto; width: auto; padding-inline: 16px; }
.bp-nav .bp-next { flex: 1; }

/* ── Goal rows (create + predict + reveal) ──────────────────────── */
.bp-goal {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--bp-ink); border-radius: 13px; background: #fff;
  padding: 11px 13px; margin: 8px 0; font-weight: 700; font-size: .94rem;
}
.bp-goal .em { font-size: 1.25rem; }
.bp-goal-actions { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }

/* Believe / Doubt pills */
.bp-bd { display: flex; gap: 8px; margin: 8px 0 14px; }
.bp-bd-opt {
  flex: 1; text-align: center; padding: 10px 8px;
  border: 2px solid var(--bp-ink); border-radius: 12px; background: #fff;
  font-weight: 800; font-size: .9rem; cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.bp-bd-opt:hover { transform: translateY(-2px); }
.bp-bd-opt.believe.selected { background: var(--bp-good); color: #fff; }
.bp-bd-opt.doubt.selected   { background: var(--bp-seal); color: #fff; }

/* Over / Under */
.bp-line {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-weight: 600;
  background: var(--bp-ink); color: #fff; border-radius: 9px; padding: 3px 10px; font-size: .85rem;
}
.bp-secret-badge {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-weight: 700;
  background: var(--bp-seal-soft); color: var(--bp-seal); border-radius: 9px;
  padding: 2px 8px; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  margin-left: 6px; vertical-align: middle;
}
.bp-ou { display: flex; gap: 8px; margin: 10px 0 14px; }
.bp-ou-opt {
  flex: 1; text-align: center; padding: 10px 8px;
  border: 2px solid var(--bp-ink); border-radius: 12px; background: #fff;
  font-weight: 800; font-size: .9rem; cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.bp-ou-opt:hover { transform: translateY(-2px); }
.bp-ou-opt.selected { background: var(--bp-accent); color: #fff; }

/* Headline options */
.bp-opt {
  display: block; width: 100%; text-align: left;
  background: #fff; border: 2px solid var(--bp-ink); border-radius: 13px;
  padding: 12px 14px; margin: 8px 0; font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: transform .13s ease, background .13s ease;
}
.bp-opt:hover { transform: translateX(4px); background: var(--bp-accent-soft); }
.bp-opt.selected { background: var(--bp-accent); color: #fff; }
.bp-opt.winner { background: var(--bp-gold-soft); border-color: var(--bp-gold); }

/* ── The wax-sealed envelope ────────────────────────────────────── */
.bp-envelope {
  border: 2px solid var(--bp-ink); border-radius: 16px;
  background: var(--bp-seal-soft); padding: 18px; text-align: center;
  box-shadow: var(--bp-shadow-sm); position: relative;
}
.bp-envelope .wax {
  font-size: 2.4rem; display: inline-block;
  animation: bpPop .6s cubic-bezier(.2, .9, .3, 1.6) both;
}
.bp-envelope .e-t { font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.05rem; margin-top: 6px; }
.bp-envelope .e-s { font-size: .78rem; color: var(--bp-soft); }

/* ── Forecast meters ────────────────────────────────────────────── */
.bp-meter-row { margin: 14px 0; }
.bp-meter-row .q { font-weight: 800; font-size: .95rem; margin-bottom: 7px; }
.bp-meter { height: 16px; border: 2px solid var(--bp-ink); border-radius: 99px; overflow: hidden; background: #fff; display: flex; }
.bp-meter i { display: block; height: 100%; background: var(--bp-good); transition: width .9s cubic-bezier(.2,.9,.3,1); }
.bp-meter i.doubt { background: var(--bp-seal); }
.bp-meter-lbls { display: flex; justify-content: space-between; font-size: .74rem; font-weight: 700; color: var(--bp-soft); margin-top: 4px; }
.bp-meter-lbls .skull { color: var(--bp-seal); }

/* ── Countdown ──────────────────────────────────────────────────── */
.bp-countdown { display: flex; justify-content: center; gap: 8px; margin: 14px 0 4px; }
.bp-cd-cell { text-align: center; }
.bp-cd-num {
  min-width: 54px; padding: 11px 8px;
  background: var(--bp-ink); color: #fff;
  border-radius: 12px; border: 2px solid var(--bp-ink);
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 1.35rem;
  box-shadow: var(--bp-shadow-sm);
}
.bp-cd-num.tick { animation: bpPulse .5s ease; }
.bp-cd-lbl { margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-soft); }

/* ── Leaderboard ────────────────────────────────────────────────── */
.bp-lead {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--bp-ink); border-radius: 13px; background: #fff;
  padding: 11px 14px; margin: 8px 0; font-weight: 800; font-size: .95rem;
  animation: bpRise .45s cubic-bezier(.2,.9,.3,1.2) both;
}
.bp-lead .pts { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--bp-accent); }
.bp-lead.win { background: var(--bp-gold-soft); border-color: var(--bp-gold); box-shadow: var(--bp-shadow-sm); }
.bp-lead.win .crown { font-size: 1.3rem; animation: bpFloat 2.6s ease-in-out infinite; }
.bp-badge-dl {
  flex-basis: 100%; margin-top: 8px; padding: 8px 12px;
  border: 2px solid var(--bp-ink); border-radius: 11px; background: #fff;
  font-weight: 800; font-size: .78rem; cursor: pointer;
}
.bp-badge-dl:hover { background: var(--bp-gold-soft); }

/* ── Judge (reveal day) rows ────────────────────────────────────── */
.bp-verdict-row { display: flex; gap: 6px; margin: 8px 0 14px; }
.bp-verdict {
  flex: 1; text-align: center; border: 2px solid var(--bp-ink); border-radius: 11px;
  background: #fff; padding: 9px 6px; font-size: .8rem; font-weight: 800; cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.bp-verdict:hover { transform: translateY(-2px); }
.bp-verdict.selected.yes     { background: var(--bp-good); color: #fff; }
.bp-verdict.selected.no      { background: var(--bp-seal); color: #fff; }
.bp-verdict.selected.partial { background: var(--bp-gold); color: #fff; }
.bp-verdict.selected         { background: var(--bp-accent); color: #fff; }

/* ── Stats strip ────────────────────────────────────────────────── */
.bp-stats { display: flex; gap: 10px; margin: 14px 0; }
.bp-stat {
  flex: 1; text-align: center; background: #fff;
  border: 2px solid var(--bp-ink); border-radius: 14px; padding: 12px 8px;
}
.bp-stat b { display: block; font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.5rem; color: var(--bp-accent); }
.bp-stat span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bp-soft); }

/* ── Live counter / links / share ───────────────────────────────── */
.bp-live {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bp-good-soft); border: 2px solid var(--bp-ink); border-radius: 999px;
  padding: 7px 15px; font-weight: 800; font-size: .86rem;
}
.bp-live-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--bp-good); animation: bpPing 1.8s ease-out infinite; }

.bp-linkbox { display: flex; gap: 8px; margin: 8px 0; }
.bp-linkbox .bp-input { font-size: .82rem; font-weight: 600; color: var(--bp-soft); }
.bp-copy-btn { flex: 0 0 auto; width: auto; padding-inline: 15px; }
.bp-copied { background: var(--bp-good) !important; color: #fff !important; }
.bp-share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bp-share-row .bp-btn { width: auto; flex: 1 1 44%; font-size: .85rem; padding: 10px 12px; }

/* ── My prophecies strip ────────────────────────────────────────── */
.bp-mine { display: flex; flex-direction: column; gap: 8px; }
.bp-mine-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--bp-ink); border-radius: 13px;
  padding: 10px 14px; font-weight: 800; text-decoration: none; color: var(--bp-ink);
  transition: transform .13s ease, background .13s ease;
}
.bp-mine-row:hover { transform: translateX(4px); background: var(--bp-accent-soft); color: var(--bp-ink); text-decoration: none; }
.bp-mine-row .date { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--bp-soft); }

/* ── How-it-works ───────────────────────────────────────────────── */
.bp-how { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
@media (min-width: 560px) { .bp-how { grid-template-columns: repeat(3, 1fr); } }
.bp-how-card { background: #fff; border: 2px solid var(--bp-ink); border-radius: 14px; padding: 14px; text-align: center; }
.bp-how-card .em { font-size: 1.7rem; }
.bp-how-card h4 { font-family: 'Fraunces', serif; font-weight: 900; font-size: .98rem; margin: 6px 0 3px; }
.bp-how-card p { font-size: .78rem; color: var(--bp-soft); margin: 0; }

/* ── Birthday Radar (violet skin) ───────────────────────────────── */
.bp-radar { background: linear-gradient(180deg, #FEFCFF, #F3ECFC); }
.bp-radar-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bp-radar-head .em { font-size: 2rem; }
.bp-radar-list { display: flex; flex-direction: column; gap: 8px; }
.bp-radar-row {
  display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--bp-ink); border-radius: 13px;
  padding: 9px 12px; text-decoration: none; color: var(--bp-ink);
  transition: transform .13s ease, background .13s ease;
}
.bp-radar-row:hover { transform: translateX(4px); background: var(--bp-accent-soft); color: var(--bp-ink); text-decoration: none; }
.bp-radar-date {
  font-family: 'JetBrains Mono', monospace; font-size: .66rem; font-weight: 600;
  background: var(--bp-ink); color: #fff; border-radius: 9px; padding: 6px 4px; text-align: center;
}
.bp-radar-person { min-width: 0; }
.bp-radar-person b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-radar-person small { display: block; color: var(--bp-soft); font-size: .72rem; font-weight: 700; }
.bp-radar-cta { font-size: .72rem; font-weight: 900; color: var(--bp-good); white-space: nowrap; }
.bp-radar-mini { border: 2px dashed var(--bp-rule); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.bp-radar-mini .bp-label { margin-top: 0; }

/* ── Confetti ───────────────────────────────────────────────────── */
.bp-confetti { position: fixed; top: -14px; z-index: 2000; pointer-events: none; animation: bpConfetti linear forwards; }
@keyframes bpConfetti {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(108vh) rotate(720deg); opacity: .85; }
}

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes bpRise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bpStepIn { from { opacity: 0; transform: translateX(26px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bpPop    { 0% { opacity: 0; transform: scale(.3) rotate(-14deg); } 70% { transform: scale(1.15) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes bpFloat  { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes bpPulse  { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes bpShake  {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-7px) rotate(-3deg); }
  30% { transform: translateX(6px)  rotate(3deg); }
  45% { transform: translateX(-5px) rotate(-2deg); }
  60% { transform: translateX(4px)  rotate(2deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
}
@keyframes bpPing  { 0% { box-shadow: 0 0 0 0 rgba(43,122,107,.45); } 80%, 100% { box-shadow: 0 0 0 9px rgba(43,122,107,0); } }
@keyframes bpCandy { from { background-position: 0 0; } to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .bp-card, .bp-step.active, .bp-lead, .bp-envelope .wax,
  .bp-topbrand-emoji, .bp-progress-fill, .bp-lead.win .crown { animation: none !important; }
  .bp-btn, .bp-chip, .bp-avatar, .bp-opt { transition: none; }
}

@media (max-width: 420px) {
  .bp-card { padding: 18px 14px; }
  .bp-cd-num { min-width: 46px; font-size: 1.15rem; }
  .bp-share-row .bp-btn { flex: 1 1 100%; }
  .bp-radar-row { grid-template-columns: 56px minmax(0, 1fr); }
  .bp-radar-cta { grid-column: 2; }
}

/* ── Year-over-year chain ──────────────────────────────────────── */
.bp-chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bp-chain-arrow { color: var(--bp-soft); font-weight: 800; }
.bp-chain-pill {
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  border: 2px solid var(--bp-ink); font-weight: 800; font-size: .85rem;
  background: #fff; color: var(--bp-ink); text-decoration: none;
}
.bp-chain-pill:hover { background: var(--bp-accent-soft); color: var(--bp-ink); text-decoration: none; }
.bp-chain-pill.current { background: var(--bp-accent); border-color: var(--bp-accent); color: #fff; }
.bp-chain-pill.sealed { background: var(--bp-seal-soft); color: var(--bp-seal); border-color: var(--bp-seal); }