/* ═══ BlissPOP rev 2026-06-13-r21 ═══ polish: done-banner actions+hint, pill pulse, smoother bubble entrance
   ============================================================
   BLISSPOP SHARED DESIGN SYSTEM  —  style.css
   Used by: guest.html, unboxing.html, creator.html, index.html
   ============================================================ */

/* ── 1. GOOGLE FONTS ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@600;700;800&display=swap');

/* ── 2. DESIGN TOKENS ────────────────────────────────────── */
:root {
  --bg-0:      #070412;
  --bg-1:      #120825;
  --bg-2:      #21103f;
  --deep:      #2c1554;
  --purple:    #7b5cff;
  --violet:    #a78bff;
  --coral:     #ff6b8b;
  --coral-2:   #ff8fab;
  --gold:      #ffca48;
  --aqua:      #86e9dd;
  --cream:     #fff3d8;
  --white:     #ffffff;
  --text:      #fff7ff;
  --muted:     rgba(255,247,255,.72);
  --muted-2:   rgba(255,247,255,.56);
  --line:      rgba(255,255,255,.14);
  --glass:     rgba(255,255,255,.06);
  --glass-2:   rgba(255,255,255,.10);
  --shadow:    0 30px 90px rgba(0,0,0,.38);

  --radius-xl: 42px;
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 14px;

  --max:       760px;
  --max-wide:  1180px;
}

/* ── 3. RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 18%  3%, rgba(255,107,139,.28), transparent 24%),
    radial-gradient(circle at 82%  7%, rgba(255,202, 72,.18), transparent 24%),
    radial-gradient(circle at 50% 30%, rgba(123, 92,255,.30), transparent 36%),
    radial-gradient(circle at 50% 86%, rgba(134,233,221,.12), transparent 30%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 42%, var(--bg-0) 100%);
  min-height: 100vh;
  overflow-x: hidden;
}
a    { color: inherit; text-decoration: none; }
img  { max-width: 100%; display: block; }
ul   { list-style: none; padding: 0; margin: 0; }
h1,h2,h3,h4 { margin: 0; }

/* ── 4. STARFIELD ────────────────────────────────────────────
   Stars are generated by js/starfield.js (random positions,
   border-radius:50% circles). No CSS background tiling here.
   ── */
/* Keep body::before only for the top radial glow overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(123,92,255,.15) 0%, transparent 65%);
}

/* Individual star elements injected by starfield.js */
.wp-star {
  position: fixed;
  border-radius: 50%;          /* ← true circle, always */
  pointer-events: none;
  z-index: 0;
  will-change: opacity, transform;
}
/* Twinkle: 6 staggered animation names so stars don't sync */
@keyframes twinkle-a {
  0%,100% { opacity: var(--so); transform: scale(1);    }
  50%      { opacity: calc(var(--so) * 0.25); transform: scale(0.85); }
}
@keyframes twinkle-b {
  0%,100% { opacity: calc(var(--so) * 0.60); transform: scale(0.90); }
  60%      { opacity: var(--so); transform: scale(1.08); }
}
@keyframes twinkle-c {
  0%,100% { opacity: calc(var(--so) * 0.45); }
  40%      { opacity: var(--so); }
  80%      { opacity: calc(var(--so) * 0.30); }
}
@keyframes twinkle-d {
  0%,100% { opacity: var(--so); transform: scale(1.05); }
  35%      { opacity: calc(var(--so) * 0.20); transform: scale(0.80); }
  70%      { opacity: calc(var(--so) * 0.70); transform: scale(1.00); }
}
@keyframes twinkle-e {
  0%,100% { opacity: calc(var(--so) * 0.55); }
  50%      { opacity: calc(var(--so) * 1.00); }
}
@keyframes twinkle-f {
  0%,100% { opacity: calc(var(--so) * 0.80); transform: scale(1); }
  45%      { opacity: calc(var(--so) * 0.15); transform: scale(0.75); }
}

/* ── 5. ANIMATED BG LAYER (meteors + sparkles) ───────────── */
.page-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.meteor {
      position: absolute;
      width: 210px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255, 202, 72, .95), rgba(255, 107, 139, .78), transparent);
      transform: rotate(-18deg);
      opacity: .48;
      animation: meteor 8s ease-in-out infinite;
      filter: drop-shadow(0 0 12px rgba(255,202,72,.72));
    }

    .meteor:nth-child(1) { top: 13%; left: 68%; animation-delay: 0s; }
    .meteor:nth-child(2) { top: 34%; left: 5%; animation-delay: 2.4s; width: 150px; }
    .meteor:nth-child(3) { top: 74%; left: 78%; animation-delay: 4.7s; width: 170px; }

    @keyframes meteor {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(-18deg); opacity: .14; }
      50% { transform: translate3d(-56px, 20px, 0) rotate(-18deg); opacity: .78; }
    }

    .sparkle {
      position: absolute;
      width: 10px;
      height: 10px;
      background: var(--gold);
      border-radius: 2px;
      transform: rotate(45deg);
      opacity: .62;
      animation: float 7s ease-in-out infinite;
      box-shadow: 0 0 20px rgba(255,202,72,.62);
    }

    .sparkle:nth-child(4) { top: 18%; left: 7%; background: var(--coral); box-shadow: 0 0 20px rgba(255,107,139,.6); }
    .sparkle:nth-child(5) { top: 54%; left: 94%; background: var(--aqua); animation-delay: 1.3s; }
    .sparkle:nth-child(6) { top: 82%; left: 11%; background: var(--violet); animation-delay: 2.6s; }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(45deg); }
      50% { transform: translateY(-18px) rotate(45deg); }
    }

/* ── 6. LAYOUT ───────────────────────────────────────────── */
.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-bottom: 60px;
}
.container-wide {
  width: min(var(--max-wide), calc(100% - 40px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── 7. NAVBAR ───────────────────────────────────────────── */
.nav-wrap {
  position: relative;
  top: 14px;
  z-index: 50;
  padding: 16px 0 0;
  width: min(980px, calc(100% - 40px)) !important;
  margin: 0 auto;
}
.nav-wrap-wide {
  width: min(var(--max-wide), calc(100% - 40px));
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px 14px 22px;
  border-radius: 999px;
  background: rgba(18,8,37,.64);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.brand img {
  width: 240px; height: auto;
  filter: drop-shadow(0 0 12px rgba(255,202,72,.18));
}
.brand-fallback {
  font-family: "Playfair Display", serif;
  font-weight: 800; font-size: 26px; letter-spacing: -1px;
  color: #fff; display: none;
}
.brand-fallback span { color: var(--coral); }

.credit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--coral), var(--gold));
  color: #fff;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 8px 20px rgba(255,107,139,.28);
}

/* ── 8. BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 0;
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .2s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 13px; }

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--coral) 0%, #ff7a70 52%, var(--gold) 130%);
  box-shadow: 0 14px 36px rgba(255,107,139,.30);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(255,107,139,.42); }

.btn-ghost {
  color: var(--text);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,202,72,.34); transform: translateY(-2px); }

.btn-wa {
  color: #fff;
  background: #25D366;
  box-shadow: 0 10px 24px rgba(37,211,102,.22);
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(37,211,102,.34); }

.btn-danger {
  color: #ff6b6b;
  background: rgba(255,107,107,.08);
  border: 1px solid rgba(255,107,107,.28);
}
.btn-danger:hover { background: rgba(255,107,107,.18); transform: translateY(-2px); }

.btn-gold {
  color: var(--bg-0);
  background: linear-gradient(135deg, var(--gold), #ffb347);
  box-shadow: 0 14px 36px rgba(255,202,72,.30);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(255,202,72,.42); }

.btn-full { width: 100%; }
.btn:disabled { opacity: .52; cursor: not-allowed; transform: none !important; }

/* ── 9. GLASS PANEL ──────────────────────────────────────── */
.panel {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 54px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,202,72,.07), transparent 30%),
    radial-gradient(circle at 15% 90%, rgba(255,107,139,.06), transparent 30%);
  pointer-events: none;
}
.panel > * { position: relative; z-index: 1; }
.panel + .panel { margin-top: 20px; }

.panel-sm { padding: 22px; border-radius: var(--radius-md); }

/* ── 10. TYPOGRAPHY ──────────────────────────────────────── */
.kicker {
  font-size: 11px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
h2.wp {
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.1; letter-spacing: -1px;
  margin-bottom: 8px;
}
.sub-text {
  color: var(--muted);
  font-size: 14px; line-height: 1.65; font-weight: 600;
}
.panel-title {
  color: #fff; font-size: 18px; font-weight: 900;
  letter-spacing: -.3px; margin-bottom: 16px;
}

/* ── 11. FORM FIELDS ─────────────────────────────────────── */
.input-wrap { margin-bottom: 20px; }

.input-wrap label {
  display: block;
  font-size: 12px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}

.field {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600;
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  appearance: none;
}
.field:focus {
  border-color: rgba(255,107,139,.60);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 4px rgba(255,107,139,.14);
}
.field::placeholder { color: rgba(255,247,255,.28); }

textarea.field { resize: vertical; min-height: 110px; line-height: 1.6; }
input[type="file"].field {
  padding: 12px 16px;
  cursor: pointer; color: var(--muted-2);
  background: rgba(255,255,255,.04);
}

/* ── 12. DIVIDER ─────────────────────────────────────────── */
.divider { height: 1px; background: var(--line); margin: 22px 0; }

/* ── 13. USER BAR ────────────────────────────────────────── */
.user-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; border-radius: 999px;
  background: rgba(18,8,37,.64); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(20px); margin-top: 22px;
}
.user-info { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 38px; height: 38px;/* border-radius: 50%;
  border: 2px solid var(--gold); object-fit: cover; flex-shrink: 0;*/
}
.user-email { color: #fff; font-weight: 800; font-size: 14px; }

/* ── 14. EVENT BANNER ────────────────────────────────────── */
.event-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: rgba(255,202,72,.08);
  border: 1px solid rgba(255,202,72,.22);
  margin-bottom: 24px;
}
.event-banner img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--gold);
  flex-shrink: 0;
}
.event-banner-text strong { display: block; color: #fff; font-size: 17px; font-weight: 900; }
.event-banner-text span  { color: var(--gold); font-size: 13px; font-weight: 800; }

/* ── 15. SELFIE PREVIEW ──────────────────────────────────── */
.selfie-preview-wrap {
  position: relative;
  width: 110px; height: 110px;
  margin: 0 auto 18px;
  display: none;
}
.selfie-preview-wrap.visible { display: block; }
.selfie-preview-wrap img {
  width: 110px; height: 110px;
  border-radius: 50%; object-fit: cover;
  border: 4px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(255,202,72,.20);
}

/* ── 16. VIBE SELECTOR ───────────────────────────────────── */
.vibe-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.vibe-grid input[type="radio"] { display: none; }
.vibe-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
  font-size: 11px; font-weight: 800; color: var(--muted-2);
}
.vibe-btn .emoji { font-size: 24px; }
.vibe-grid input[type="radio"]:checked + .vibe-btn {
  background: rgba(255,107,139,.18);
  border-color: rgba(255,107,139,.50);
  color: #fff;
  transform: scale(1.06);
}
.vibe-btn:hover { background: rgba(255,255,255,.10); border-color: rgba(255,202,72,.26); }

/* ── 17. SUCCESS OVERLAY ─────────────────────────────────── */
.success-overlay {
  text-align: center;
  padding: 40px 20px;
  animation: wp-fadein .5s ease;
}
.success-overlay .success-icon {
  font-size: 72px;
  margin-bottom: 16px;
  animation: wp-popin .6s cubic-bezier(.175,.885,.32,1.275);
}
.success-overlay h2 { color: #fff; font-size: 26px; font-weight: 900; margin-bottom: 10px; }
.success-overlay p  { color: var(--muted); font-size: 15px; line-height: 1.65; }

/* ── 18. QUICK-PICK BUTTONS ──────────────────────────────── */
.quick-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.quick-btn {
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.quick-btn:hover { background: rgba(255,107,139,.18); border-color: rgba(255,107,139,.38); color: #fff; }

/* ── 19. VAULT ITEMS ─────────────────────────────────────── */
.vault-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
  transition: background .2s, border-color .2s;
}
.vault-item:hover { background: rgba(255,255,255,.09); border-color: rgba(255,202,72,.22); }
.vault-name  { color: #fff; font-weight: 800; font-size: 15px; }
.vault-date  { color: var(--muted-2); font-size: 12px; margin-top: 2px; font-weight: 700; }

/* ── 20. LINK BOXES ──────────────────────────────────────── */
.link-box {
  padding: 22px; border-radius: var(--radius-md);
  margin-bottom: 16px; word-break: break-all;
}
.link-box.invite { background: rgba(255,107,139,.08); border: 1px solid rgba(255,107,139,.28); }
.link-box.master { background: rgba(125,211,252,.08); border: 1px solid rgba(125,211,252,.28); }
.link-label {
  font-size: 11px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px;
}
.link-box.invite .link-label { color: var(--coral); }
.link-box.master .link-label { color: #7DD3FC; }
.link-text  { color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.link-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 21. GUEST LIST (creator dashboard) ──────────────────── */
.guest-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff; font-weight: 700; font-size: 14px;
}
.guest-item img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold); }
.guest-empty { color: var(--muted-2); font-weight: 700; padding: 12px 0; font-size: 14px; }

/* ── 22. BG SELECTOR (creator form) ─────────────────────── */
.bg-selector { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.bg-selector input[type="radio"] { display: none; }
.bg-selector label { cursor: pointer; flex-shrink: 0; }
.bg-thumb {
  width: 86px; height: 62px; object-fit: cover;
  border-radius: 14px; border: 3px solid transparent;
  transition: border-color .2s, transform .2s; display: block;
}
.custom-bg-thumb {
  width: 86px; height: 62px; border-radius: 14px;
  border: 3px dashed rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--muted-2);
  background: rgba(255,255,255,.05);
  transition: border-color .2s, transform .2s;
}
.bg-selector input[type="radio"]:checked + .bg-thumb,
.bg-selector input[type="radio"]:checked + .custom-bg-thumb {
  border-color: var(--coral); transform: scale(1.06);
}

/* ── 23. GLOBAL RESPONSIVE ───────────────────────────────── */
@media (max-width: 540px) {
  .nav-wrap { top: 0; padding-top: 10px; }
  .navbar { border-radius: 22px; }
  .brand img { width: 130px; }
  .panel { padding: 22px; }
  .user-bar { border-radius: 22px; }
  .vibe-grid { grid-template-columns: repeat(3, 1fr); }
  .modal-card { padding: 52px 22px 28px; }
}

/* SAFE CLEANUP NOTE
   This section still contains shared legacy Creator styles used by creator.html.
   To avoid UI changes, the active rules are preserved here.
   Next deeper refactor should extract Creator-only rules into css/creator.css.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   CREATOR PAGE — 5-Step Wizard, Package Selector, Top-up Modal
   ══════════════════════════════════════════════════════════════ */

/* Auth section */
.logo { width:200px; margin:0 auto 22px; filter: drop-shadow(0 0 14px rgba(255,202,72,.22)); }
.sub  { color:var(--muted); font-weight:700; margin-bottom:28px; font-size:15px; }
.btn-row { display:flex; flex-direction:column; gap:24px; margin-top:36px; }
.field-file { background:rgba(255,255,255,.04); padding:12px 16px; cursor:pointer; color:var(--muted-2); }
.nav-right  { display:flex; align-items:center; gap:10px; }

/* ── WIZARD PROGRESS ── */
.wizard-progress { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:28px; overflow-x:auto; }
.wp-step         { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:52px; }
.wp-step-dot     { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.18); color:var(--muted-2); font-size:13px; font-weight:900; transition:background .3s,border-color .3s,color .3s; }
.wp-step span    { font-size:10px; font-weight:800; color:var(--muted-2); white-space:nowrap; transition:color .3s; }
.wp-step.active .wp-step-dot { background:var(--coral); border-color:var(--coral); color:#fff; }
.wp-step.active span          { color:var(--coral); }
.wp-step.done .wp-step-dot   { background:var(--gold);  border-color:var(--gold);  color:var(--bg-0); }
.wp-step.done span            { color:var(--gold); }
.wp-step-line { flex:1; height:2px; background:rgba(255,255,255,.12); min-width:16px; margin:0 4px 18px; }
.wizard-step  { animation:wp-fadein .3s ease; }
.wizard-nav   { display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:12px; }

/* ── OCCASION GRID ── */
.occasion-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px; }
.occ-label     { cursor:pointer; display:block; }
.occ-label input[type="radio"] { display:none; }
.occ-card      { padding:18px 12px; border-radius:18px; text-align:center; background:rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.10); transition:border-color .2s,transform .2s,background .2s; }
.occ-card:hover { border-color:rgba(255,202,72,.34); transform:translateY(-2px); }
.occ-label input:checked + .occ-card { border-color:var(--coral); background:rgba(255,107,139,.12); box-shadow:0 0 0 3px rgba(255,107,139,.20); transform:translateY(-3px); }
.occ-icon  { font-size:30px; margin-bottom:8px; }
.occ-card strong { display:block; color:#fff; font-size:12px; font-weight:900; }

/* ── SELFIE UPLOAD ZONE ── */
.selfie-upload-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:120px; border-radius:var(--radius-sm); border:2px dashed rgba(255,255,255,.22); background:rgba(255,255,255,.04); cursor:pointer; transition:border-color .2s,background .2s; padding:20px; }
.selfie-upload-zone:hover { border-color:rgba(255,202,72,.44); background:rgba(255,202,72,.04); }
.suz-placeholder { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-size:13px; font-weight:800; }

/* ── PACKAGE SELECTOR ── */
.package-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.pkg-label { cursor:pointer; display:block; }
.pkg-label input[type="radio"] { display:none; }
.pkg-card  { border-radius:20px; border:2px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); overflow:hidden; transition:border-color .22s,transform .22s,box-shadow .22s; }
.pkg-card:hover { border-color:rgba(255,202,72,.32); transform:translateY(-2px); }
.pkg-label input:checked + .pkg-card { border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,107,139,.22),0 14px 40px rgba(0,0,0,.30); transform:translateY(-4px); }
.pkg-header  { padding:14px 12px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; }
.pkg-simple  { background:linear-gradient(135deg,rgba(167,139,255,.28),rgba(123,92,255,.18)); }
.pkg-premium   { background:linear-gradient(135deg,rgba(255,107,139,.28),rgba(255,202,72,.18)); }
.pkg-party   { background:linear-gradient(135deg,rgba(134,233,221,.24),rgba(123,92,255,.20)); }
.pkg-emoji   { font-size:28px; }
.pkg-header strong { color:#fff; font-size:14px; font-weight:900; }
.pkg-body    { padding:12px 14px; }
.pkg-price   { color:#fff; font-size:26px; font-weight:900; letter-spacing:-1px; margin-bottom:10px; text-align:center; }
.pkg-price span { font-size:12px; color:var(--muted-2); font-weight:700; letter-spacing:0; }
.pkg-features { list-style:none; padding:0; margin:0; display:grid; gap:5px; }
.pkg-features li { font-size:11px; font-weight:700; color:var(--muted); padding-left:14px; position:relative; }
.pkg-features li::before { content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:900; }
.pkg-badge-wrap { padding:8px 12px 12px; text-align:center; }
.pkg-badge  { display:inline-block; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:900; }
.simple-badge { background:rgba(167,139,255,.18); color:var(--violet); }
.premium-badge  { background:rgba(255,202,72,.18);  color:var(--gold); }
.party-badge  { background:rgba(134,233,221,.18); color:var(--aqua); }
.credit-cost-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 16px; border-radius:14px; margin-top:8px; background:rgba(255,202,72,.08); border:1px solid rgba(255,202,72,.22); color:var(--muted); font-size:13px; font-weight:700; }
.credit-cost-bar strong { color:var(--gold); font-size:20px; font-weight:900; }

/* ── BACKGROUND GRID ── */
.bg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bg-item-label { cursor:pointer; display:block; }
.bg-item-label input[type="radio"] { display:none; }
.bg-item-card  { border-radius:16px; overflow:hidden; border:2px solid rgba(255,255,255,.10); transition:border-color .2s,transform .2s; }
.bg-item-card:hover { border-color:rgba(255,202,72,.34); transform:translateY(-2px); }
.bg-item-label input:checked + .bg-item-card { border-color:var(--coral); transform:translateY(-3px); box-shadow:0 0 0 3px rgba(255,107,139,.22); }
.bg-item-thumb { width:100%; height:72px; object-fit:cover; background:var(--bg-2); display:block; }
.bg-item-foot  { padding:8px 10px; background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:space-between; }
.bg-item-foot strong { color:#fff; font-size:11px; font-weight:900; }
.bg-recommended { font-size:9px; font-weight:900; color:var(--gold); }

/* ── REVIEW CARD ── */
.review-card  { padding:22px; border-radius:var(--radius-md); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
.review-row   { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.review-row:last-child { border-bottom:none; }
.rr-label { color:var(--muted-2); font-size:12px; font-weight:800; width:90px; flex-shrink:0; }
.rr-value { color:#fff; font-size:14px; font-weight:700; }
.review-master-photo { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); flex-shrink:0; }

/* ── THEME SELECTOR ── */
.theme-selector { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.theme-selector input[type="radio"] { display:none; }
.theme-card-label { cursor:pointer; display:block; }
.theme-card-inner { border-radius:18px; border:2px solid rgba(255,255,255,.10); overflow:hidden; transition:border-color .22s,transform .22s,box-shadow .22s; background:rgba(255,255,255,.05); }
.theme-card-inner:hover { border-color:rgba(255,202,72,.34); transform:translateY(-2px); }
.theme-selector input:checked + .theme-card-inner { border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,107,139,.22),0 14px 36px rgba(0,0,0,.28); transform:translateY(-3px); }
.theme-thumb  { width:100%; height:80px; object-fit:cover; display:block; background:var(--bg-2); }
.theme-info   { padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.theme-info-left strong { display:block; color:#fff; font-size:13px; font-weight:900; }
.theme-info-left span   { display:block; color:var(--muted-2); font-size:11px; font-weight:700; margin-top:2px; }
.theme-music-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; background:rgba(255,202,72,.12); border:1px solid rgba(255,202,72,.22); color:var(--gold); font-size:10px; font-weight:900; white-space:nowrap; }
.custom-theme-inner { border-radius:18px; border:2px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.04); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:20px; color:var(--muted-2); font-size:13px; font-weight:800; transition:border-color .22s,background .22s; min-height:140px; }
.custom-theme-inner .ct-icon { font-size:28px; }
.custom-theme-inner:hover { border-color:rgba(255,202,72,.34); background:rgba(255,202,72,.04); }
.theme-selector input:checked + .custom-theme-inner { border-color:var(--coral); border-style:solid; box-shadow:0 0 0 3px rgba(255,107,139,.22); }

/* ── TOP-UP MODAL ── */
.topup-backdrop { position:fixed; inset:0; z-index:400; background:rgba(5,2,15,.78); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.topup-backdrop.show { opacity:1; pointer-events:auto; }
.topup-card { width:min(460px,calc(100% - 40px)); padding:40px 30px 32px; border-radius:36px; background:rgba(10,6,24,.97); border:1px solid rgba(255,202,72,.32); box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 80px rgba(255,202,72,.12); text-align:center; transform:scale(.88) translateY(20px); transition:all .42s cubic-bezier(.175,.885,.32,1.275); position:relative; }
.topup-backdrop.show .topup-card { transform:scale(1) translateY(0); }
.topup-close { position:absolute; top:16px; right:20px; background:none; border:none; color:var(--muted-2); font-size:1.6rem; cursor:pointer; line-height:1; transition:color .2s,transform .2s; }
.topup-close:hover { color:var(--coral); transform:rotate(90deg); }
.topup-icon  { font-size:52px; margin-bottom:12px; }
.topup-card h3 { color:#fff; font-family:"Playfair Display",serif; font-size:22px; font-weight:800; margin:0 0 10px; }
.topup-card > p { color:var(--muted); font-size:14px; line-height:1.65; margin:0 0 22px; }
.topup-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.topup-plan  { padding:18px 10px; border-radius:18px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.10); cursor:pointer; text-align:center; transition:border-color .2s,transform .2s,background .2s; }
.topup-plan:hover   { border-color:rgba(255,202,72,.40); background:rgba(255,202,72,.08); transform:translateY(-2px); }
.topup-plan.selected { border-color:var(--coral); background:rgba(255,107,139,.12); box-shadow:0 0 0 3px rgba(255,107,139,.20); transform:translateY(-3px); }
.tp-credits { color:var(--gold); font-size:26px; font-weight:900; letter-spacing:-1px; }
.tp-label   { color:var(--muted-2); font-size:11px; font-weight:800; margin-top:2px; }
.tp-price   { color:#fff; font-size:18px; font-weight:900; margin-top:8px; }
.tp-save    { color:var(--aqua); font-size:10px; font-weight:800; margin-top:2px; min-height:14px; }
.topup-footer-note { color:rgba(255,247,255,.40); font-size:11px; font-weight:700; margin-top:14px; }

/* ── RESPONSIVE ── */
@media (max-width:580px) { .package-selector { grid-template-columns:1fr; } }
@media (max-width:540px) {
  .occasion-grid  { grid-template-columns:repeat(2,1fr); }
  .bg-grid        { grid-template-columns:repeat(2,1fr); }
  .package-selector { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════
   UNBOXING PAGE — consolidated clean version
   Used by: unboxing.html
   Notes:
   - Scene-specific frame/orbit/bubble values are applied by unboxing.js.
   - Orbit ring pixel sizing/color is applied by JS via cssText.
   - Duplicate legacy unboxing rules have been removed.
   ══════════════════════════════════════════════════════════ */

/* ── Scene CSS variables set by theme-loader.js / unboxing.js ── */
:root {
  --scene-title-font:     "Playfair Display", serif;
  --scene-title-size:     clamp(26px, 4vw, 48px);
  --scene-title-color:    #ffffff;
  --scene-title-shadow:   0 4px 20px rgba(0,0,0,.70);
  --scene-subtitle-font:  "Inter", sans-serif;
  --scene-subtitle-color: #ffca48;
  --scene-subtitle-style: normal;

  /* ══════════════════════════════════════════════════════════
     UNIFIED MESSAGE BOX SIZE SYSTEM (Simple / Premium — no avatar)
     One fixed box size shared by ALL scenes. Width is fixed
     (responsive via vw), height locked to a 3:2 aspect ratio so the
     background IMAGE never distorts. Long wishes scroll inside .wbi-wish.
     To resize globally: change these vars. To resize one scene:
     override these vars on that scene's container.
     ══════════════════════════════════════════════════════════ */
  --msgbox-width:        clamp(180px, 19vw, 210px); /* fixed responsive width */
  --msgbox-aspect:       3 / 2;                      /* W/H = image ratio (210x140) */
  --msgbox-height:       140px;                      /* fixed height (used where aspect-ratio can't be) */
  --msgbox-wish-max:     84px;                        /* max wish text height before it scrolls */
  --msgbox-pad-y:        clamp(13px, 1.5vw, 18px);
  --msgbox-pad-x:        clamp(15px, 1.7vw, 20px);
  --msgbox-name-size:    clamp(12px, 1.1vw, 14px);
  --msgbox-wish-size:    clamp(11px, 1vw, 12.5px);
  --msgbox-wish-line:    1.55;
  --msgbox-radius:       20px;
}

/* ── Unboxing page shell ── */
body.unboxing-page {
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.unboxing-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 20px 16px 32px;
  gap: 0;
  position: relative;
  z-index: 1;
}

/* ── Header above frame ── */
.unboxing-header {
  text-align: center;
  padding: 0 0 18px;
  width: 100%;
}

.ub-logo {
  width: clamp(100px, 14vw, 160px);
  height: auto;
  margin: 0 auto 10px;
  display: block;
  opacity: .92;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
}

.ub-name {
  font-family: var(--scene-title-font);
  font-size: var(--scene-title-size);
  color: var(--scene-title-color);
  text-shadow: var(--scene-title-shadow);
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0 0 6px;
  line-height: 1.1;
}

.ub-title {
  font-family: var(--scene-subtitle-font);
  font-style: var(--scene-subtitle-style);
  font-size: clamp(14px, 1.8vw, 20px);
  color: var(--scene-subtitle-color);
  font-weight: 700;
  margin: 0;
}

/* ── Main reveal frame ── */
.reveal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--bg-1);
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  transform: translateZ(0);
  will-change: transform;
}

.frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(5,2,15,.18);
}

/* ── Premium / Party motion ── */
.reveal-frame.wp-motion-enabled {
  background-attachment: scroll;
  animation: wp-scene-breathe 22s ease-in-out infinite;
}

@keyframes wp-scene-breathe {
  0%, 100% { background-size: 100%; background-position: center; }
  50%      { background-size: 106%; background-position: center; }
}

.reveal-frame.wp-motion-enabled::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,202,72,.16), transparent 28%),
    radial-gradient(circle at 20% 18%, rgba(255,107,139,.10), transparent 26%),
    radial-gradient(circle at 82% 24%, rgba(167,139,255,.10), transparent 28%);
  mix-blend-mode: screen;
  opacity: .75;
  animation: wp-glow-breathe 5.8s ease-in-out infinite;
}

@keyframes wp-glow-breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: .90; }
}

/* ── Master photo + frame ──
   master-center covers the full frame so scene percentages in
   master_wrap_size are relative to the reveal frame, not auto content.
*/
.master-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  pointer-events: none;
}

.master-photo-wrap {
  position: relative;
  display: block;
  width: clamp(230px, 38%, 360px);
  height: clamp(230px, 38%, 360px);
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  animation: wp-float 3.8s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(0 0 24px var(--theme-orbit-glow, rgba(255,202,72,.40)));
  flex-shrink: 0;
}

.wp-motion-enabled .master-photo-wrap {
  animation:
    wp-float 3.8s ease-in-out infinite,
    wp-master-glow 5s ease-in-out infinite;
}

@keyframes wp-master-glow {
  0%,100% { filter: drop-shadow(0 0 18px var(--theme-orbit-glow, rgba(255,202,72,.45))); }
  50%     { filter: drop-shadow(0 0 38px var(--theme-orbit-glow, rgba(255,202,72,.85))); }
}

.master-photo-wrap img#masterPhoto {
  position: absolute;
  top: 12%;
  left: 12%;
  width: 76%;
  height: 76%;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 50%;
  z-index: 1;
  pointer-events: auto;
  animation: none;
  border: none;
  box-shadow: none;
  display: block;
  min-width: 10px;
  min-height: 10px;
}

.master-photo-wrap img#masterFrameOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  animation: none;
}

.master-photo-wrap img#masterFrameOverlay[src]:not([src=""]) {
  display: block;
}

/* Master photo shape variants — size/inset remains controlled by JS */
.master-photo-shape-circle  .master-photo-wrap img#masterPhoto,
.master-photo-shape-oval    .master-photo-wrap img#masterPhoto { border-radius: 50%; }

.master-photo-shape-star .master-photo-wrap img#masterPhoto {
  border-radius: 0;
  clip-path: polygon(50% 0%,61.8% 38.2%,100% 38.2%,69.1% 61.8%,80.9% 100%,50% 76.4%,19.1% 100%,30.9% 61.8%,0% 38.2%,38.2% 38.2%);
}

.master-photo-shape-hexagon .master-photo-wrap img#masterPhoto {
  border-radius: 0;
  clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}

.master-photo-shape-square .master-photo-wrap img#masterPhoto {
  border-radius: 12px;
}

/* ── Prop layer ── */
#themeProp {
  position: absolute;
  z-index: 8;
  pointer-events: none;
}

/* ── Orbit rings ── */
.orbit-ring {
  display: none;
  pointer-events: none;
  z-index: 4;
}

@keyframes wp-ring-glow {
  0%,100% { opacity: .85; }
  50%     { opacity: 1; }
}

@keyframes wp-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes wp-orbit-pulse {
  0%,100% { opacity: .35; }
  50%     { opacity: .80; }
}

/* ── Guest stars ── */
#starsContainer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: visible;
  pointer-events: none;
}

#starsContainer .guest-star {
  pointer-events: auto;
}

/* While Show All is open, the orbiting stars underneath must not be hover/
   clickable — only the message bubbles and the backdrop receive input. */
.reveal-frame.show-all-active #starsContainer .guest-star {
  pointer-events: none !important;
}
.reveal-frame.show-all-active #starsContainer .all-inline-bubble {
  pointer-events: auto !important;
}

.guest-star {
  position: absolute;
  width: 84px;
  height: 84px;
  display: block;
  cursor: pointer;
  z-index: 10;
  background: transparent;
  animation: wp-star-shine 2s ease-in-out infinite;
  transition: transform .3s ease;
  transform: translate(-50%, -50%) translateZ(0);
  will-change: transform, opacity;
  filter: drop-shadow(0 0 8px rgba(255,202,72,.65));
}

.guest-star:hover {
  transform: translate(-50%,-50%) scale(1.35) rotate(8deg) translateZ(0) !important;
  z-index: 20;
  animation: none;
  filter:
    drop-shadow(0 0 22px rgba(255,202,72,1))
    drop-shadow(0 8px 20px rgba(0,0,0,.55));
}

.wp-motion-enabled .guest-star:hover {
  filter:
    drop-shadow(0 0 24px var(--theme-orbit-glow, rgba(255,202,72,1)))
    drop-shadow(0 6px 18px rgba(0,0,0,.55));
}

.guest-star img.guest-star-photo {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.guest-star img.guest-star-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.guest-star.no-frame img.guest-star-photo,
.guest-star.shape-star img.guest-star-photo {
  border-radius: 0;
  clip-path: polygon(50% 0%,61.8% 38.2%,100% 38.2%,69.1% 61.8%,80.9% 100%,50% 76.4%,19.1% 100%,30.9% 61.8%,0% 38.2%,38.2% 38.2%);
}

.guest-star.no-frame img.guest-star-photo {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.guest-star.shape-circle img.guest-star-photo,
.guest-star.shape-oval img.guest-star-photo { border-radius: 50%; }

.guest-star.shape-hexagon img.guest-star-photo {
  border-radius: 0;
  clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}

.guest-star.shape-square img.guest-star-photo {
  border-radius: 8px;
}

.guest-star .star-name {
  display: none;
}

/* ── Inline wish bubble ── */
.wish-bubble-inline {
  position: absolute;
  z-index: 20;
  width: var(--msgbox-width);
  /* Fixed height keeps the background image ratio. Flex column lets the wish
     text fill the leftover space and scroll inside — so content never spills
     out the bottom of the box. (Scrollbar dragging works now that the live
     star layer is blocked by the Show All backdrop.) */
  height: var(--msgbox-height, 140px);
  display: flex;
  flex-direction: column;
  padding: var(--msgbox-pad-y) var(--msgbox-pad-x);
  overflow: hidden;
  border-radius: var(--msgbox-radius);
  border: 1px solid var(--theme-msg-border-full, rgba(167,139,255,.45));
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(255,202,72,.12), transparent 30%),
    rgba(10,5,28,.92);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: wbi-pop .34s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes wbi-pop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wish-bubble-inline::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.26), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(255,202,72,.16), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
  opacity: .75;
  mix-blend-mode: screen;
}

.wish-bubble-inline::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -12px 28px rgba(0,0,0,.16);
}

.wish-bubble-inline > * {
  position: relative;
  z-index: 2;
}

.wish-bubble-inline.has-img-bg {
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: var(--msgbox-pad-y) var(--msgbox-pad-x);
  color: #fff;
}

.wish-bubble-inline.has-img-bg::before,
.wish-bubble-inline.has-img-bg::after {
  display: none;
}

.wbi-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  padding: 0;
  border: none;
  background: none;
  color: rgba(255,255,255,.55);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s;
}

.wbi-close:hover { color: var(--coral); }

.wbi-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.wbi-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--black);
  flex-shrink: 0;
}

.wbi-name {
  color: #fff;
  font-size: var(--msgbox-name-size);
  font-weight: 900;
  line-height: 1.2;
}

.wbi-vibe { display: none; }

.wbi-wish {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  color: rgba(255,255,255,.90);
  font-size: var(--msgbox-wish-size);
  font-weight: 600;
  line-height: var(--msgbox-wish-line);
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--reveal-scrollbar-thumb, rgba(255,255,255,.32)) transparent;
}
.wbi-wish::-webkit-scrollbar { width: 8px; }
.wbi-wish::-webkit-scrollbar-thumb {
  background: var(--reveal-scrollbar-thumb, rgba(255,255,255,.42));
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.wbi-wish::-webkit-scrollbar-track { background: transparent; }


/* Premium final-reveal message card text — scrollbar wide enough to grab and
   drag with a mouse (the card sits on a pointer-events:none overlay, so the
   text must own pointer events itself). */
.premium-msg-text {
  scrollbar-width: thin;
  scrollbar-color: rgba(122,61,40,.55) transparent;
}
.premium-msg-text::-webkit-scrollbar { width: 8px; }
.premium-msg-text::-webkit-scrollbar-thumb {
  background: rgba(122,61,40,.55);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.premium-msg-text::-webkit-scrollbar-thumb:hover { background: rgba(122,61,40,.78); background-clip: padding-box; }
.premium-msg-text::-webkit-scrollbar-track { background: transparent; }

.wbi-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.btn-gold-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--gold), #ffb347);
  color: #1a0a00;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.btn-gold-sm:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255,202,72,.40);
}

/* ── Control dock below frame ── */
.ub-control-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.ub-icon-btn,
.ub-icon-pill {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(255,247,255,.88);
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
}

.ub-icon-btn {
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.ub-icon-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,202,72,.12);
  border-color: rgba(255,202,72,.34);
}

.ub-icon-pill {
  color: var(--gold);
  border-color: rgba(255,202,72,.28);
  background: rgba(255,202,72,.10);
}

.ub-control-label {
  font-size: 12px;
}

#musicToast,
.music-toast {
  min-height: 22px;
  text-align: center;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

#musicToast.show,
.music-toast.show {
  opacity: 1;
}

/* ── Replay / tap hint below frame ── */
.ub-replay-bar {
  width: 100%;
  padding: 12px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.tap-hint { display: none; }

.ub-tap-hint {
  text-align: center;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 10px 0 0;
  animation: wp-pulse-opacity 3s ease-in-out infinite;
}

@keyframes wp-pulse-opacity {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}

/* ── All done banner ── */
.all-done-banner {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
  background: rgba(5,2,15,.72);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.all-done-banner.show {
  opacity: 1;
  pointer-events: auto;
}

.all-done-banner .big-star {
  font-size: 64px;
  animation: wp-popin .8s ease-in-out infinite alternate;
}

.all-done-banner h2 {
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: clamp(28px, 5vw, 54px);
}

.all-done-banner p {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

/* Banner action buttons + hint (guides the guest to Show All) */
.all-done-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
}
.all-done-hint {
  margin-top: 4px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.62) !important;
  animation: ad-hint-glow 2.4s ease-in-out infinite;
}
@keyframes ad-hint-glow {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
/* Gentle staged entrance for the banner content */
.all-done-banner.show .big-star { animation: wp-popin .8s ease-in-out infinite alternate, ad-rise .5s ease both; }
.all-done-banner.show h2        { animation: ad-rise .5s .06s ease both; }
.all-done-banner.show > p       { animation: ad-rise .5s .12s ease both; }
.all-done-banner.show .all-done-actions { animation: ad-rise .5s .18s ease both; }
@keyframes ad-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Count pill: pulse softly while wishes remain, calm once all opened */
#guestCountPill.has-remaining {
  animation: pill-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,202,72,.5);
}
@keyframes pill-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,202,72,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(255,202,72,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,202,72,0); }
}
#guestCountPill.all-done {
  border-color: rgba(134,233,221,.6);
}

/* ── Intro countdown ── */
#introCurtain {
  position: fixed;
  inset: 0;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Same as loader: keep original page starry background visible */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  color: #fff;
  pointer-events: auto;
}

#introCurtain.hidden {
  display: none !important;
}

#wpLoader.hidden,
#introCurtain.hidden,
#pageNav.hidden,
#frameWrap.hidden,
#tapHint.hidden,
#autoRevealBtn.hidden,
#musicBtn.hidden,
#guestCountPill.hidden,
#keepsakeBtn.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ══════════════════════════════════════════════════════
   BlissPOP Intro Countdown - Clean Starry Version
   Keep original dark starry background, remove icon/count circles
   ══════════════════════════════════════════════════════ */


.intro-card {
  width: min(420px, calc(100vw - 48px));
  text-align: center;
  padding: 28px 24px 24px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  overflow: visible;
  animation: intro-card-rise .65s cubic-bezier(.2,.9,.2,1) both;
}

/* remove rotating/glowing card layer */
.intro-card::before {
  display: none;
}

.intro-card > * {
  position: relative;
  z-index: 2;
}

/* star area */
.intro-orb {
  width: auto;
  height: auto;
  margin: 0 auto 18px;
  position: relative;
  display: grid;
  place-items: center;
}

/* remove circle behind star */
.intro-star {
  width: auto;
  height: auto;
  display: inline-block;
  font-size: 34px;
  border-radius: 0;
  background: transparent;
  filter:
    drop-shadow(0 0 10px rgba(255,202,72,.75))
    drop-shadow(0 0 24px rgba(255,107,139,.25));
  animation: intro-star-pop 1.4s ease-in-out infinite;
}


.intro-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--theme-primary, #ffca48);
  text-shadow: 0 0 16px rgba(255,202,72,.42);
}

#introText {
  margin: 0;
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow:
    0 0 18px rgba(255,255,255,.16),
    0 4px 24px rgba(0,0,0,.55);
}

/* remove circle behind countdown number */
.intro-countdown {
  margin: 20px auto 10px;
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;

  font-size: clamp(58px, 12vw, 82px);
  line-height: 1;
  font-weight: 1000;
  color: #ffd45c;

  border: none;
  box-shadow: none;

  text-shadow:
    0 0 18px rgba(255,202,72,.75),
    0 0 42px rgba(255,107,139,.24),
    0 5px 22px rgba(0,0,0,.65);
}

.intro-countdown.pop {
  animation: intro-count-pop .42s cubic-bezier(.2,1.3,.3,1) both;
}

.intro-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.68);
  text-shadow: 0 3px 14px rgba(0,0,0,.45);
}

/* keep simple animations */
@keyframes intro-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes intro-card-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes intro-star-pop {
  0%, 100% {
    transform: scale(.94) rotate(-4deg);
  }
  50% {
    transform: scale(1.12) rotate(5deg);
  }
}

@keyframes intro-count-pop {
  0% {
    transform: scale(.68);
    opacity: .35;
  }
  65% {
    transform: scale(1.14);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 560px) {
  .intro-card {
    width: min(360px, calc(100vw - 40px));
    padding: 24px 20px;
  }

  #introText {
    font-size: clamp(24px, 7vw, 34px);
  }

  .intro-countdown {
    font-size: clamp(58px, 16vw, 78px);
  }
}

/* ══════════════════════════════════════════════════════
   BlissPOP Unboxing Loader
   First screen: collecting wishes
   ══════════════════════════════════════════════════════ */

#wpLoader {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.wp-loader-card {
  width: min(360px, calc(100vw - 48px));
  min-height: 210px;
  padding: 34px 28px 30px;
  border-radius: 32px;
  text-align: center;
  color: #fff8ff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,202,72,.18), transparent 38%),
    linear-gradient(180deg, rgba(42,20,78,.72), rgba(18,8,40,.72));
  border: 0px solid rgba(255,255,255,.14);
  box-shadow:
    0 24px 80px rgba(0,0,0,.45),
    0 0 50px rgba(167,139,255,.16),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: wp-loader-float 3.2s ease-in-out infinite;
}

.wp-loader-star {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  font-size: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,202,72,.26), transparent 62%);
  filter:
    drop-shadow(0 0 12px rgba(255,202,72,.7))
    drop-shadow(0 0 28px rgba(255,107,139,.35));
  animation: wp-loader-star-pop 1.45s ease-in-out infinite;
}

.wp-loader-title {
  margin: 0 0 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,.18);
}

.wp-loader-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.66);
}

.wp-loader-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
}

.wp-loader-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--theme-primary, #ffca48);
  box-shadow: 0 0 14px rgba(255,202,72,.75);
  animation: wp-loader-dot 1.1s ease-in-out infinite;
}

.wp-loader-dots span:nth-child(2) {
  animation-delay: .16s;
}

.wp-loader-dots span:nth-child(3) {
  animation-delay: .32s;
}

@keyframes wp-loader-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes wp-loader-star-pop {
  0%, 100% {
    transform: scale(.92) rotate(-4deg);
    opacity: .82;
  }
  50% {
    transform: scale(1.12) rotate(5deg);
    opacity: 1;
  }
}

@keyframes wp-loader-dot {
  0%, 100% {
    transform: translateY(0);
    opacity: .45;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ── Landscape hint ── */
.landscape-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  color: #fff;
  text-align: center;
  background: rgba(7,4,18,.95);
}

.landscape-hint.show { display: flex; }

.landscape-hint .lh-icon {
  font-size: 64px;
  animation: wp-rotate-phone 1.5s ease-in-out infinite;
}

.landscape-hint p {
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,.80);
}

@keyframes wp-rotate-phone {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(90deg); }
  60%  { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

/* ── Particles engine shapes ── */
.wp-particle {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  border-radius: 50%;
  animation: wp-rise var(--dur, 6s) linear var(--delay, 0s) forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 8px currentColor);
}

.wp-particle-circle,
.wp-particle-dot,
.wp-particle-sparkle,
.wp-particle-diamond,
.wp-particle-heart {
  border-radius: 50%;
  clip-path: none;
}

.wp-particle-star {
  border-radius: 0;
  clip-path: polygon(50% 0%,61.8% 38.2%,100% 38.2%,69.1% 61.8%,80.9% 100%,50% 76.4%,19.1% 100%,30.9% 61.8%,0% 38.2%,38.2% 38.2%);
}

/* ── Unboxing responsive ── */
@media (min-width: 1400px) {
  .unboxing-layout { max-width: 1400px; }
}

@media (min-width: 1800px) {
  .unboxing-layout { max-width: 1600px; }
}

@media (max-width: 1024px) {
  .unboxing-layout {
    max-width: 100%;
    padding: 16px 12px 24px;
  }
}

@media (max-width: 768px) {
  .reveal-frame {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }

  .ub-name {
    font-size: clamp(22px, 6vw, 32px);
  }
}

@media (max-width: 560px) {
  .ub-control-dock { gap: 8px; }

  .ub-icon-btn,
  .ub-icon-pill {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 12px;
  }

  .ub-control-label { display: none; }
}

@media (max-width: 480px) {
  .reveal-frame { aspect-ratio: 3 / 4; }
  .unboxing-header { padding-bottom: 12px; }
}

/* Optional page rotation for portrait mobile.
   If landscape hint is enough, this block can be removed safely. */
@media (max-width: 768px) and (orientation: portrait) {
  #unboxingPage.force-landscape {
    transform: rotate(90deg);
    transform-origin: center center;
    width: 100vh;
    height: 100vw;
    position: fixed;
    top: calc((100vh - 100vw) / 2);
    left: calc((100vw - 100vh) / 2);
    overflow: hidden;
  }
}

/* Guest star gentle pulse */
.guest-star {
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
}

.guest-star.guest-pulse {
  animation:
    wp-guest-pulse var(--guest-pulse-duration, 2.8s) ease-in-out infinite,
    wp-star-shine 2.2s ease-in-out infinite;
}

@keyframes wp-guest-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

/* Opened star can stop pulsing or become softer */
.guest-star.opened {
  animation: none;
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.low-motion-page .meteor,
.low-motion-page .sparkle {
  display: none !important;
}

.low-motion-page .wp-star {
  animation: none !important;
  opacity: 0.45;
}

.low-motion-page .panel,
.low-motion-page .navbar,
.low-motion-page .auth-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}