/* ==========================================================
   Music Box — a romantic anniversary card
   Burgundy velvet, candlelight and antique gold; Cormorant and Pinyon Script.
   ========================================================== */
.mb {
  --g-bg: #220b11; --g-bg2: #2f1118; --g-ink: #f9ebe0; --g-muted: rgba(249, 235, 224, 0.75);
  --g-accent: #d9a85b; --g-accent2: #f6d49a; --g-card: #fbf3e8; --g-card-ink: #3a1820;
  --g-display: 'Cormorant Garamond', serif; --g-script: 'Pinyon Script', cursive;
  --g-body: 'Cormorant Garamond', serif; --g-label: 'Cormorant SC', 'Cormorant Garamond', serif;
}
.mb .vx-loader { background: radial-gradient(circle at 50% 40%, #5a1a26, #220b11 70%); }
.mb .gr-dear, .mb .gr-to, .mb .gr-letter-to, .mb .gr-letter-sign, .mb .gr-wish p, .mb .gr-flip-back { font-style: normal; }
.mb .gr-to, .mb .gr-letter-to { font-size: 1.9rem; }
.mb .gr-letter-sign { font-size: 1.5rem; }
.mb .gr-letter-p, .mb .gr-p, .mb .gr-tl p { font-size: 1.14rem; }
.mb .gr-flip-back { font-size: 1.3rem; line-height: 1.3; }
.mb .gr-wish p { font: italic 400 1.05rem/1.5 var(--g-body); }
.mb .gr-big { font-weight: 500; font-style: italic; }
.mb .gr-kicker, .mb .gr-hint, .mb .gr-stage-sub { letter-spacing: 0.2em; font-size: 0.8rem; }

.mb-turn { position: absolute; inset: -18%; width: 136%; height: 136%; fill: none; stroke: var(--g-accent2); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--g-accent2)); animation: mb-spin 3s linear infinite; }
@keyframes mb-spin { to { transform: rotate(-360deg); } }

.mb-numbers { background: radial-gradient(circle at 50% 0%, #4a1622, var(--g-bg) 70%); }

.mb-song { background: radial-gradient(circle at 50% 40%, #3a121b, var(--g-bg) 75%); }
.mb-record { position: relative; width: min(240px, 66vw); aspect-ratio: 1; margin: 6px auto 24px; border-radius: 50%; background: repeating-radial-gradient(circle, #141012 0 2px, #1d181a 2px 4px); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(255, 255, 255, 0.04); animation: mb-spin 6s linear infinite reverse; }
.mb-record::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, 0.08) 25%, transparent 30% 70%, rgba(255, 255, 255, 0.06) 75%, transparent 80%); }
.mb-label { position: absolute; inset: 32%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(#8a2a3a, #5a1626); border: 2px solid var(--g-accent); }
.mb-label img { width: 70%; }
.mb-song-title { margin: 0; font: italic 500 2rem var(--g-display); color: var(--g-accent2); }
.mb-song-artist { margin: 4px 0 20px; font: 500 0.8rem var(--g-label); letter-spacing: 0.2em; color: var(--g-muted); }
.mb-play { margin: 0 auto; }

.mb-finale-key { height: 150px; width: auto; margin: 0 auto 8px; transform: rotate(-20deg); filter: drop-shadow(0 0 24px rgba(246, 212, 154, 0.5)); }
@media (prefers-reduced-motion: reduce) { .mb-turn, .mb-record { animation: none; } }