@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Inter:wght@400;600;700;800;900&family=Montserrat:wght@400;700;800;900&family=Outfit:wght@400;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Poppins:wght@400;600;700;800&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

/* ── APPLE-GRADE LUXURY PRESETS & OVERLAY THEMES ── */

/* 1. Apple Aurora Glow (Default Apple Music Style) */
body.theme-apple-aurora,
.theme-apple-aurora,
body.theme-neon,
.theme-neon,
body.theme-default,
.theme-default {
  --bg-panel: rgba(14, 18, 28, 0.76);
  --border-panel: rgba(0, 242, 254, 0.35);
  --accent-primary: #00f2fe;
  --accent-secondary: #a855f7;
  --accent-glow: rgba(0, 242, 254, 0.5);
  --word-highlight: #00f2fe;
  --text-active: #ffffff;
  --text-inactive: rgba(255, 255, 255, 0.35);
  --requester-bg: rgba(56, 189, 248, 0.15);
  --requester-text: #38bdf8;
  --requester-border: rgba(56, 189, 248, 0.35);
}

/* ── MOCHACONSOLE PHYSICAL SKINS & VISUAL GEOMETRY ── */

/* Compound Skin Selectors for Live Stage Canvas and Standalone Overlays */
.skin-ticket.queue-overlay-container,
.queue-overlay-container.skin-ticket,
.skin-ticket.now-playing-card-focused,
.now-playing-card-focused.skin-ticket,
.skin-ticket.timeline-card,
.timeline-card.skin-ticket,
.skin-ticket.timeline-overlay-container,
.timeline-overlay-container.skin-ticket,
.skin-ticket.alert-toast-container,
.alert-toast-container.skin-ticket,
.skin-ticket.compact-ticker-container,
.compact-ticker-container.skin-ticket {
  background: rgba(22, 16, 12, 0.95) !important;
  color: #f5ecd7 !important;
  border: 2px dashed #c8a258 !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), inset 0 0 12px rgba(200, 162, 88, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: relative;
}

.skin-ticket.queue-overlay-container .queue-item-row,
.queue-overlay-container.skin-ticket .queue-item-row {
  background: rgba(36, 26, 18, 0.8) !important;
  border-left: 3px solid #c8a258 !important;
  color: #f5ecd7 !important;
}
.skin-ticket.queue-overlay-container .q-title,
.queue-overlay-container.skin-ticket .q-title,
.skin-ticket.now-playing-card-focused .title-scroll,
.now-playing-card-focused.skin-ticket .title-scroll,
.skin-ticket.timeline-overlay-container .t-title,
.timeline-overlay-container.skin-ticket .t-title,
.skin-ticket.alert-toast-container .alert-song,
.alert-toast-container.skin-ticket .alert-song {
  color: #f5ecd7 !important;
  font-family: 'Cinzel', Georgia, serif !important;
}

/* Sticker - Sleek Dark Kawaii Neon */
.skin-sticker.queue-overlay-container,
.queue-overlay-container.skin-sticker,
.skin-sticker.now-playing-card-focused,
.now-playing-card-focused.skin-sticker,
.skin-sticker.timeline-card,
.timeline-card.skin-sticker,
.skin-sticker.timeline-overlay-container,
.timeline-overlay-container.skin-sticker,
.skin-sticker.alert-toast-container,
.alert-toast-container.skin-sticker,
.skin-sticker.compact-ticker-container,
.compact-ticker-container.skin-sticker {
  background: linear-gradient(135deg, rgba(35, 14, 28, 0.95) 0%, rgba(20, 10, 24, 0.95) 100%) !important;
  color: #ffb6d5 !important;
  border: 2px solid rgba(255, 64, 129, 0.5) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 64, 129, 0.25) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.skin-sticker.queue-overlay-container .queue-item-row,
.queue-overlay-container.skin-sticker .queue-item-row {
  background: rgba(45, 16, 35, 0.75) !important;
  border: 1px solid rgba(255, 182, 213, 0.3) !important;
  border-radius: 12px !important;
  color: #ffb6d5 !important;
}

.skin-sticker.queue-overlay-container .q-title,
.queue-overlay-container.skin-sticker .q-title,
.skin-sticker.now-playing-card-focused .title-scroll,
.now-playing-card-focused.skin-sticker .title-scroll,
.skin-sticker.timeline-overlay-container .t-title,
.timeline-overlay-container.skin-sticker .t-title,
.skin-sticker.alert-toast-container .alert-song,
.alert-toast-container.skin-sticker .alert-song {
  color: #3a1525 !important;
  font-weight: 900 !important;
}

/* Line (Minimal Rule) */
.skin-line.queue-overlay-container,
.queue-overlay-container.skin-line,
.skin-line.now-playing-card-focused,
.now-playing-card-focused.skin-line,
.skin-line.timeline-card,
.timeline-card.skin-line,
.skin-line.timeline-overlay-container,
.timeline-overlay-container.skin-line,
.skin-line.alert-toast-container,
.alert-toast-container.skin-line,
.skin-line.compact-ticker-container,
.compact-ticker-container.skin-line {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.skin-line.queue-overlay-container .queue-item-row,
.queue-overlay-container.skin-line .queue-item-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
}

/* Airy (Frosted Glass) */
.skin-airy.queue-overlay-container,
.queue-overlay-container.skin-airy,
.skin-airy.now-playing-card-focused,
.now-playing-card-focused.skin-airy,
.skin-airy.timeline-card,
.timeline-card.skin-airy,
.skin-airy.timeline-overlay-container,
.timeline-overlay-container.skin-airy,
.skin-airy.alert-toast-container,
.alert-toast-container.skin-airy,
.skin-airy.compact-ticker-container,
.compact-ticker-container.skin-airy {
  background: #1e1e24 !important;
  border: 1px solid #383842 !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Night Glass */
.skin-night-glass.queue-overlay-container,
.queue-overlay-container.skin-night-glass,
.skin-night-glass.now-playing-card-focused,
.now-playing-card-focused.skin-night-glass,
.skin-night-glass.timeline-card,
.timeline-card.skin-night-glass,
.skin-night-glass.timeline-overlay-container,
.timeline-overlay-container.skin-night-glass,
.skin-night-glass.alert-toast-container,
.alert-toast-container.skin-night-glass,
.skin-night-glass.compact-ticker-container,
.compact-ticker-container.skin-night-glass {
  background: rgba(8, 12, 22, 0.94) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.2) !important;
}

/* Framed Program */
.skin-framed-program.queue-overlay-container,
.queue-overlay-container.skin-framed-program,
.skin-framed-program.now-playing-card-focused,
.now-playing-card-focused.skin-framed-program,
.skin-framed-program.timeline-card,
.timeline-card.skin-framed-program,
.skin-framed-program.timeline-overlay-container,
.timeline-overlay-container.skin-framed-program,
.skin-framed-program.alert-toast-container,
.alert-toast-container.skin-framed-program,
.skin-framed-program.compact-ticker-container,
.compact-ticker-container.skin-framed-program {
  background: linear-gradient(135deg, rgba(28, 16, 42, 0.96) 0%, rgba(14, 8, 22, 0.96) 100%) !important;
  border: 2px solid #c084fc !important;
  outline: 1.5px solid #7e22ce !important;
  outline-offset: -5px !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(192, 132, 252, 0.3) !important;
}

/* Vertical Mincho */
.skin-vertical-mincho.queue-overlay-container,
.queue-overlay-container.skin-vertical-mincho,
.skin-vertical-mincho.now-playing-card-focused,
.now-playing-card-focused.skin-vertical-mincho,
.skin-vertical-mincho.timeline-card,
.timeline-card.skin-vertical-mincho,
.skin-vertical-mincho.timeline-overlay-container,
.timeline-overlay-container.skin-vertical-mincho,
.skin-vertical-mincho.alert-toast-container,
.alert-toast-container.skin-vertical-mincho,
.skin-vertical-mincho.compact-ticker-container,
.compact-ticker-container.skin-vertical-mincho {
  background: rgba(26, 20, 16, 0.94) !important;
  border: 1.5px solid #d4af37 !important;
  border-radius: 8px !important;
  font-family: 'Cinzel', serif !important;
}

/* Minimal Pure */
.skin-minimal-pure.queue-overlay-container,
.queue-overlay-container.skin-minimal-pure,
.skin-minimal-pure.now-playing-card-focused,
.now-playing-card-focused.skin-minimal-pure,
.skin-minimal-pure.timeline-card,
.timeline-card.skin-minimal-pure,
.skin-minimal-pure.timeline-overlay-container,
.timeline-overlay-container.skin-minimal-pure,
.skin-minimal-pure.alert-toast-container,
.alert-toast-container.skin-minimal-pure,
.skin-minimal-pure.compact-ticker-container,
.compact-ticker-container.skin-minimal-pure {
  background: rgba(18, 18, 22, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

/* 9. Clean Pure (No Lines / 100% Borderless Text, Numbers & Images Only) */
.skin-clean-pure.queue-overlay-container,
.queue-overlay-container.skin-clean-pure,
.skin-clean-pure.now-playing-card-focused,
.now-playing-card-focused.skin-clean-pure,
.skin-clean-pure.timeline-card,
.timeline-card.skin-clean-pure,
.skin-clean-pure.timeline-overlay-container,
.timeline-overlay-container.skin-clean-pure,
.skin-clean-pure.alert-toast-container,
.alert-toast-container.skin-clean-pure,
.skin-clean-pure.compact-ticker-container,
.compact-ticker-container.skin-clean-pure {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.skin-clean-pure .queue-overlay-header,
.skin-clean-pure .queue-item-row,
.skin-clean-pure .timeline-card,
.skin-clean-pure .alert-meta,
.skin-clean-pure .compact-ticker-container {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

.skin-clean-pure .q-rank-badge {
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--accent-primary, #00f2fe) !important;
}

/* Rounded Tag */
.skin-rounded-tag.queue-overlay-container,
.queue-overlay-container.skin-rounded-tag,
.skin-rounded-tag.now-playing-card-focused,
.now-playing-card-focused.skin-rounded-tag,
.skin-rounded-tag.timeline-card,
.timeline-card.skin-rounded-tag,
.skin-rounded-tag.timeline-overlay-container,
.timeline-overlay-container.skin-rounded-tag,
.skin-rounded-tag.alert-toast-container,
.alert-toast-container.skin-rounded-tag,
.skin-rounded-tag.compact-ticker-container,
.compact-ticker-container.skin-rounded-tag {
  background: #1c1c22 !important;
  border: 1.5px solid #ff007a !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 30px rgba(255, 0, 122, 0.25) !important;
}

/* 1. Ticket / Retro Paper Skin (Authentic Concert Stub Ticket) */
body.skin-ticket,
.skin-ticket {
  --bg-panel: #faf7f0;
  --border-panel: #d8d0c2;
  --accent-primary: #b85d38;
  --accent-secondary: #8c4122;
  --accent-glow: rgba(184, 93, 56, 0.25);
  --word-highlight: #c44d21;
  --text-active: #2b2823;
  --text-inactive: #756f66;
  --requester-bg: #ece6dc;
  --requester-text: #8c4122;
  --requester-border: #d4cdc3;
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
}

body.skin-ticket .now-playing-card-focused,
.skin-ticket .now-playing-card-focused,
body.skin-ticket .queue-overlay-container,
.skin-ticket .queue-overlay-container,
body.skin-ticket .timeline-card,
.skin-ticket .timeline-card,
body.skin-ticket .alert-toast-container,
.skin-ticket .alert-toast-container {
  background: #faf7f0 !important;
  color: #2b2823 !important;
  border: 2px dashed #b8a690 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 0 0 1px #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
}

body.skin-ticket .now-playing-card-focused::before,
.skin-ticket .now-playing-card-focused::before,
body.skin-ticket .queue-overlay-container::before,
.skin-ticket .queue-overlay-container::before {
  content: 'ADMISSION TICKET · LIVE CONCERT';
  display: block;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #8c4122;
  border-bottom: 1px dashed #b8a690;
  padding-bottom: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

body.skin-ticket .title-scroll,
.skin-ticket .title-scroll,
body.skin-ticket .q-title,
.skin-ticket .q-title,
body.skin-ticket .t-title,
.skin-ticket .t-title,
body.skin-ticket .alert-song,
.skin-ticket .alert-song {
  color: #2b2823 !important;
  font-family: 'Cinzel', Georgia, serif !important;
}

body.skin-ticket .k-line,
.skin-ticket .k-line {
  color: #756f66 !important;
}

body.skin-ticket .k-line.active,
.skin-ticket .k-line.active {
  color: #b85d38 !important;
  text-shadow: none !important;
}

body.skin-ticket .k-word.active,
.skin-ticket .k-word.active {
  color: #b85d38 !important;
  text-decoration: underline;
  text-shadow: none !important;
}

body.skin-ticket .queue-item-row,
.skin-ticket .queue-item-row {
  background: #f1ece1 !important;
  border-left: 3px solid #b85d38 !important;
}

/* 2. Sticker / Kawaii Vtuber 3D Pop Badge Skin */
body.skin-sticker,
.skin-sticker {
  --bg-panel: #fff0f5;
  --border-panel: #ffffff;
  --accent-primary: #ff4081;
  --accent-secondary: #f50057;
  --accent-glow: rgba(255, 64, 129, 0.45);
  --word-highlight: #ff1769;
  --text-active: #3a1525;
  --text-inactive: #8c5b70;
  --requester-bg: #ffe0eb;
  --requester-text: #d81b60;
  --requester-border: #ff80ab;
  font-family: 'Outfit', 'Zen Maru Gothic', sans-serif;
}

body.skin-sticker .now-playing-card-focused,
.skin-sticker .now-playing-card-focused,
body.skin-sticker .queue-overlay-container,
.skin-sticker .queue-overlay-container,
body.skin-sticker .timeline-card,
.skin-sticker .timeline-card,
body.skin-sticker .alert-toast-container,
.skin-sticker .alert-toast-container {
  background: linear-gradient(135deg, #ffffff 0%, #fff0f5 100%) !important;
  color: #3a1525 !important;
  border: 3.5px solid #ffffff !important;
  border-radius: 28px !important;
  box-shadow: 5px 6px 0px rgba(0, 0, 0, 0.85), 0 10px 25px rgba(255, 64, 129, 0.3) !important;
  transform: rotate(-1.5deg);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.skin-sticker .title-scroll,
.skin-sticker .title-scroll,
body.skin-sticker .q-title,
.skin-sticker .q-title,
body.skin-sticker .t-title,
.skin-sticker .t-title,
body.skin-sticker .alert-song,
.skin-sticker .alert-song {
  color: #3a1525 !important;
  font-weight: 900 !important;
}

body.skin-sticker .k-line,
.skin-sticker .k-line {
  color: #8c5b70 !important;
}

body.skin-sticker .k-line.active,
.skin-sticker .k-line.active {
  color: #ff1769 !important;
  text-shadow: 0 0 15px rgba(255, 64, 129, 0.4) !important;
}

body.skin-sticker .queue-item-row,
.skin-sticker .queue-item-row {
  background: #ffe6f0 !important;
  border: 2px solid #ffb6d5 !important;
  border-radius: 16px !important;
}

body.skin-sticker .q-title,
.skin-sticker .q-title {
  color: #3a1525 !important;
}

/* 3. Airy / Liquid Frosted Glass Skin */
body.skin-airy,
.skin-airy {
  --bg-panel: rgba(240, 248, 255, 0.18);
  --border-panel: rgba(255, 255, 255, 0.35);
  --accent-primary: #537fa7;
  --accent-secondary: #2e4a66;
  --accent-glow: rgba(83, 127, 167, 0.4);
  --word-highlight: #38bdf8;
  --text-active: #ffffff;
  --text-inactive: rgba(255, 255, 255, 0.55);
  --requester-bg: rgba(255, 255, 255, 0.15);
  --requester-text: #e0f2fe;
  --requester-border: rgba(255, 255, 255, 0.3);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

body.skin-airy .now-playing-card-focused,
.skin-airy .now-playing-card-focused,
body.skin-airy .queue-overlay-container,
.skin-airy .queue-overlay-container,
body.skin-airy .timeline-card,
.skin-airy .timeline-card,
body.skin-airy .alert-toast-container,
.skin-airy .alert-toast-container {
  background: #1e1e24 !important;
  border: 1px solid #383842 !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 4. Line / Minimal Rule (Zero Box) Skin */
body.skin-line,
.skin-line {
  --bg-panel: transparent;
  --border-panel: transparent;
  --accent-primary: #00f2fe;
  --accent-secondary: #4facfe;
  --accent-glow: rgba(0, 242, 254, 0.5);
  --word-highlight: #00f2fe;
  --text-active: #ffffff;
  --text-inactive: rgba(255, 255, 255, 0.45);
}

body.skin-line .now-playing-card-focused,
.skin-line .now-playing-card-focused,
body.skin-line .queue-overlay-container,
.skin-line .queue-overlay-container,
body.skin-line .timeline-card,
.skin-line .timeline-card,
body.skin-line .alert-toast-container,
.skin-line .alert-toast-container {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.skin-line .queue-item-row,
.skin-line .queue-item-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
}

/* 5. Framed Program / Classical Concert Ribbon Skin */
body.skin-framed-program,
.skin-framed-program {
  --bg-panel: rgba(22, 14, 34, 0.94);
  --border-panel: #c084fc;
  --accent-primary: #c084fc;
  --accent-secondary: #a855f7;
  --accent-glow: rgba(192, 132, 252, 0.55);
  --word-highlight: #f0abfc;
  --text-active: #faf5ff;
  --text-inactive: rgba(250, 245, 255, 0.45);
  --requester-bg: rgba(192, 132, 252, 0.15);
  --requester-text: #e9d5ff;
  --requester-border: rgba(192, 132, 252, 0.4);
  font-family: 'Outfit', 'Cinzel', sans-serif;
}

body.skin-framed-program .now-playing-card-focused,
.skin-framed-program .now-playing-card-focused,
body.skin-framed-program .queue-overlay-container,
.skin-framed-program .queue-overlay-container,
body.skin-framed-program .timeline-card,
.skin-framed-program .timeline-card,
body.skin-framed-program .alert-toast-container,
.skin-framed-program .alert-toast-container {
  background: linear-gradient(135deg, rgba(28, 16, 42, 0.96) 0%, rgba(14, 8, 22, 0.96) 100%) !important;
  border: 2px solid #c084fc !important;
  outline: 1.5px solid #7e22ce !important;
  outline-offset: -5px !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(192, 132, 252, 0.3) !important;
}

/* 6. Night Glass / Deep Obsidian Skin */
body.skin-night-glass,
.skin-night-glass {
  --bg-panel: rgba(8, 12, 22, 0.94);
  --border-panel: rgba(56, 189, 248, 0.35);
  --accent-primary: #38bdf8;
  --accent-secondary: #0284c7;
  --accent-glow: rgba(56, 189, 248, 0.45);
  --word-highlight: #00f2fe;
  --text-active: #f8fafc;
  --text-inactive: rgba(248, 250, 252, 0.45);
  --requester-bg: rgba(56, 189, 248, 0.15);
  --requester-text: #38bdf8;
  --requester-border: rgba(56, 189, 248, 0.35);
}

body.skin-night-glass .now-playing-card-focused,
.skin-night-glass .now-playing-card-focused,
body.skin-night-glass .queue-overlay-container,
.skin-night-glass .queue-overlay-container,
body.skin-night-glass .timeline-card,
.skin-night-glass .timeline-card,
body.skin-night-glass .alert-toast-container,
.skin-night-glass .alert-toast-container {
  background: rgba(8, 12, 22, 0.94) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.2) !important;
}

/* 7. Classic Serif Mincho Skin (Luxury Concert Hall) */
body.skin-vertical-mincho,
.skin-vertical-mincho {
  --bg-panel: rgba(26, 20, 16, 0.94);
  --border-panel: #d4af37;
  --accent-primary: #ffd700;
  --accent-secondary: #c5a059;
  --accent-glow: rgba(212, 175, 55, 0.5);
  --word-highlight: #fff2a8;
  --text-active: #fffaf0;
  --text-inactive: rgba(255, 250, 240, 0.45);
  --requester-bg: rgba(212, 175, 55, 0.15);
  --requester-text: #ffd700;
  --requester-border: rgba(212, 175, 55, 0.4);
  font-family: 'Cinzel', 'Zen Old Mincho', serif !important;
}

body.skin-vertical-mincho .now-playing-card-focused,
.skin-vertical-mincho .now-playing-card-focused,
body.skin-vertical-mincho .queue-overlay-container,
.skin-vertical-mincho .queue-overlay-container,
body.skin-vertical-mincho .timeline-card,
.skin-vertical-mincho .timeline-card,
body.skin-vertical-mincho .alert-toast-container,
.skin-vertical-mincho .alert-toast-container {
  background: radial-gradient(circle at 0% 0%, #2e221b 0%, #17110e 100%) !important;
  border: 1.5px solid #d4af37 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(212, 175, 55, 0.25) !important;
}

body.skin-vertical-mincho .title-scroll,
.skin-vertical-mincho .title-scroll,
body.skin-vertical-mincho .q-title,
.skin-vertical-mincho .q-title,
body.skin-vertical-mincho .t-title,
.skin-vertical-mincho .t-title {
  font-family: 'Cinzel', Georgia, serif !important;
  letter-spacing: 0.5px;
}

/* 8. Capsule Lanyard Tag Skin */
body.skin-rounded-tag,
.skin-rounded-tag {
  --bg-panel: rgba(20, 26, 36, 0.92);
  --border-panel: rgba(255, 255, 255, 0.4);
  --accent-primary: #38bdf8;
  --accent-secondary: #818cf8;
  --accent-glow: rgba(56, 189, 248, 0.45);
  --word-highlight: #38bdf8;
  --text-active: #ffffff;
  --text-inactive: rgba(255, 255, 255, 0.5);
  font-family: 'Outfit', sans-serif;
}

body.skin-rounded-tag .now-playing-card-focused,
.skin-rounded-tag .now-playing-card-focused,
body.skin-rounded-tag .queue-overlay-container,
.skin-rounded-tag .queue-overlay-container,
body.skin-rounded-tag .timeline-card,
.skin-rounded-tag .timeline-card,
body.skin-rounded-tag .alert-toast-container,
.skin-rounded-tag .alert-toast-container {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 40px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

/* 9. High Contrast Headline Poster Skin */
body.skin-poster,
.skin-poster {
  --bg-panel: #0a0a0c;
  --border-panel: #fbbf24;
  --accent-primary: #fbbf24;
  --accent-secondary: #f59e0b;
  --accent-glow: rgba(251, 191, 36, 0.5);
  --word-highlight: #fef08a;
  --text-active: #ffffff;
  --text-inactive: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: 'Outfit', 'Montserrat', sans-serif;
}

body.skin-poster .now-playing-card-focused,
.skin-poster .now-playing-card-focused,
body.skin-poster .queue-overlay-container,
.skin-poster .queue-overlay-container,
body.skin-poster .timeline-card,
.skin-poster .timeline-card,
body.skin-poster .alert-toast-container,
.skin-poster .alert-toast-container {
  background: #0a0a0c !important;
  border: 3px solid #fbbf24 !important;
  border-radius: 8px !important;
  box-shadow: 6px 6px 0px #fbbf24, 0 12px 30px rgba(0, 0, 0, 0.9) !important;
}

body.skin-poster .title-scroll,
.skin-poster .title-scroll,
body.skin-poster .q-title,
.skin-poster .q-title,
body.skin-poster .t-title,
.skin-poster .t-title,
body.skin-poster .k-line,
.skin-poster .k-line {
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

/* ── ARRANGEMENT MODES ── */
body.arrange-wave .k-line.active,
.arrange-wave .k-line.active {
  animation: waveMotion 1.8s ease-in-out infinite;
}

@keyframes waveMotion {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

body.arrange-vertical .k-line,
.arrange-vertical .k-line {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

body.arrange-arc .k-line.active,
.arrange-arc .k-line.active {
  transform: perspective(600px) rotateX(15deg);
}

body.arrange-floating .k-line.active,
.arrange-floating .k-line.active {
  animation: floatingAmbient 3s ease-in-out infinite alternate;
}

@keyframes floatingAmbient {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(-12px) scale(1.04);
  }
}

/* ── DYNAMIC POSITION DRIFT & KINETIC FLOAT MODES ── */
body.drift-float #lyricsContainer,
body.drift-float #stageLyricsLine,
.drift-float #lyricsContainer,
.drift-float #stageLyricsLine,
.drift-float .draggable-element {
  animation: lyricGentleFloat 4.5s ease-in-out infinite alternate;
}

@keyframes lyricGentleFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-14px) rotate(0.6deg);
  }

  100% {
    transform: translateY(8px) rotate(-0.6deg);
  }
}

body.drift-kinetic #lyricsContainer,
body.drift-kinetic #stageLyricsLine,
.drift-kinetic #lyricsContainer,
.drift-kinetic #stageLyricsLine,
.drift-kinetic .draggable-element {
  animation: lyricKineticBounce 2.6s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

@keyframes lyricKineticBounce {
  0% {
    transform: translateY(4px) scale(0.98);
  }

  50% {
    transform: translateY(-18px) scale(1.02) rotate(1deg);
  }

  100% {
    transform: translateY(-6px) scale(1) rotate(-0.8deg);
  }
}

/* Random Line Shift classes applied organically on line changes */
.k-line-wrapper.drift-shift-0 {
  transform: translate(0px, 0px);
}

.k-line-wrapper.drift-shift-1 {
  transform: translate(-24px, -12px) rotate(-0.8deg);
}

.k-line-wrapper.drift-shift-2 {
  transform: translate(26px, 12px) rotate(0.8deg);
}

.k-line-wrapper.drift-shift-3 {
  transform: translate(-18px, 14px) rotate(0.6deg);
}

.k-line-wrapper.drift-shift-4 {
  transform: translate(20px, -14px) rotate(-0.6deg);
}

.k-line-wrapper.drift-shift-5 {
  transform: translate(0px, -18px) scale(1.02);
}

#stageLyricsLine.drift-shift-0 {
  transform: translate(0px, 0px);
}

#stageLyricsLine.drift-shift-1 {
  transform: translate(-24px, -12px) rotate(-0.8deg);
}

#stageLyricsLine.drift-shift-2 {
  transform: translate(26px, 12px) rotate(0.8deg);
}

#stageLyricsLine.drift-shift-3 {
  transform: translate(-18px, 14px) rotate(0.6deg);
}

#stageLyricsLine.drift-shift-4 {
  transform: translate(20px, -14px) rotate(-0.6deg);
}

#stageLyricsLine.drift-shift-5 {
  transform: translate(0px, -18px) scale(1.02);
}

/* ── FONT FAMILY PRESETS ── */
body.ff-modern {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

body.ff-rounded {
  font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
}

body.ff-outfit {
  font-family: 'Outfit', sans-serif;
}

body.ff-mono {
  font-family: 'JetBrains Mono', Consolas, monospace;
}

/* ── LYRICS MOTION DYNAMICS & ANIMATION EFFECTS (MOCHACONSOLE) ── */

/* 1. Neon Glow & Word-by-Word Pulse */
body.effect-glow .k-word.active,
.effect-glow .k-word.active {
  text-shadow: 0 0 20px var(--accent-primary), 0 0 40px var(--accent-glow);
  animation: wordGlowPulse 0.8s ease-in-out infinite alternate;
}

@keyframes wordGlowPulse {
  0% {
    transform: scale(1.02);
    filter: brightness(1);
  }

  100% {
    transform: scale(1.12);
    filter: brightness(1.25);
    text-shadow: 0 0 25px var(--accent-primary), 0 0 50px var(--accent-glow);
  }
}

/* 2. Bounce Pop & Spring In */
body.effect-pop .k-line.active,
.effect-pop .k-line.active {
  animation: lyricPopIn 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

body.effect-pop .k-word.active,
.effect-pop .k-word.active {
  animation: wordPopSpring 0.28s cubic-bezier(0.2, 0.85, 0.3, 1.3) both;
}

@keyframes lyricPopIn {
  0% {
    transform: scale(0.88) translateY(6px);
    opacity: 0.5;
  }

  60% {
    transform: scale(1.06) translateY(-2px);
    opacity: 1;
  }

  100% {
    transform: scale(1.03) translateY(0);
    opacity: 1;
  }
}

@keyframes wordPopSpring {
  0% {
    transform: scale(0.85);
  }

  65% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1.08);
  }
}

/* 3. Smooth Slide In from Bottom */
body.effect-slide .k-line.active,
.effect-slide .k-line.active {
  animation: lyricSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lyricSlideUp {
  0% {
    transform: translateY(22px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 4. 3D Flip In (MochaConsole 3D Perspective Flip) */
body.effect-flip .k-line.active,
.effect-flip .k-line.active {
  animation: lyricFlip3D 0.42s cubic-bezier(0.2, 0.8, 0.25, 1) both;
  transform-origin: 50% 80%;
}

@keyframes lyricFlip3D {
  0% {
    transform: perspective(500px) rotateX(-70deg) translateY(12px);
    opacity: 0;
  }

  100% {
    transform: perspective(500px) rotateX(0deg) translateY(0);
    opacity: 1;
  }
}

/* 5. Cinematic Focus & Unblur */
body.effect-focus .k-line.active,
.effect-focus .k-line.active {
  animation: lyricFocusSharp 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes lyricFocusSharp {
  0% {
    filter: blur(8px);
    opacity: 0.2;
    transform: scale(0.96);
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1.03);
  }
}

/* 6. Float & Breathe Ambient (Soft Continuous Floating) */
body.effect-float .k-line.active,
.effect-float .k-line.active {
  animation: lyricFloatBreathe 2.4s ease-in-out infinite alternate;
}

@keyframes lyricFloatBreathe {
  0% {
    transform: translateY(0) scale(1.02);
  }

  100% {
    transform: translateY(-5px) scale(1.05);
  }
}

/* 7. Gentle Tilt & Sway (Playful Vtuber Vibe) */
body.effect-sway .k-line.active,
.effect-sway .k-line.active {
  animation: lyricSwayTilt 2.2s ease-in-out infinite;
}

@keyframes lyricSwayTilt {

  0%,
  100% {
    transform: rotate(0deg) scale(1.03);
  }

  25% {
    transform: rotate(2deg) scale(1.04);
  }

  75% {
    transform: rotate(-2deg) scale(1.04);
  }
}

/* 8. Clean Minimal Fade */
body.effect-none .k-line.active,
.effect-none .k-line.active {
  animation: lyricFadeIn 0.25s ease-out both;
}

@keyframes lyricFadeIn {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

/* ── BACKGROUND CUSTOMIZATION MODES ── */

html,
body {
  background: transparent !important;
  background-color: transparent !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 100% Transparent Cutout Mode (Zero Box / Direct Stream Overlay) */
body.bg-transparent,
.bg-transparent {
  --bg-panel: transparent !important;
  --border-panel: transparent !important;
  --bg-card: transparent !important;
  --border-card: transparent !important;
}

body.bg-transparent .lyrics-only-container,
body.bg-transparent .now-playing-card-focused,
body.bg-transparent .queue-overlay-container,
body.bg-transparent .timeline-card,
body.bg-transparent .alert-toast-container,
body.bg-transparent .compact-ticker-container,
body.bg-transparent .overlay-container,
body.bg-transparent .now-playing-card {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.bg-transparent .k-line {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.85);
}

body.bg-transparent .title-scroll,
body.bg-transparent .q-title,
body.bg-transparent .t-title,
body.bg-transparent .artist-text {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8);
}

/* Solid Mode (No glass blur) */
body.bg-solid {
  --bg-panel: #141418;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

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

body {
  background: transparent !important;
  font-family: var(--font-main);
  color: var(--text-active);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  box-sizing: border-box;
}

/* Alignment utilities */
body.align-left {
  justify-content: flex-start;
  align-items: flex-end;
  padding: 24px;
}

body.align-center {
  justify-content: center;
  align-items: flex-end;
  padding: 24px;
}

body.align-right {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 24px;
}

body.align-top-left {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px;
}

body.align-top-center,
body.align-top {
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
}

body.align-top-right {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 24px;
}

body.align-bottom-left {
  justify-content: flex-start;
  align-items: flex-end;
  padding: 24px;
}

body.align-bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 24px;
}

body.align-bottom {
  justify-content: center;
  align-items: flex-end;
  padding: 24px;
}

/* Now Playing Card Internal Layout Alignment */
body.align-left .now-playing-card-focused,
.now-playing-card-focused.align-left {
  flex-direction: row !important;
  text-align: left !important;
  align-items: center !important;
}
body.align-left .now-playing-card-focused .playing-meta,
.now-playing-card-focused.align-left .playing-meta {
  align-items: flex-start !important;
  text-align: left !important;
}
body.align-left .now-playing-card-focused .title-scroll,
body.align-left .now-playing-card-focused .artist-text,
.now-playing-card-focused.align-left .title-scroll,
.now-playing-card-focused.align-left .artist-text {
  text-align: left !important;
}
body.align-left .now-playing-card-focused .req-user-badge,
.now-playing-card-focused.align-left .req-user-badge {
  justify-content: flex-start !important;
}

body.align-center .now-playing-card-focused,
.now-playing-card-focused.align-center {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
}
body.align-center .now-playing-card-focused .playing-meta,
.now-playing-card-focused.align-center .playing-meta {
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}
body.align-center .now-playing-card-focused .title-scroll,
body.align-center .now-playing-card-focused .artist-text,
.now-playing-card-focused.align-center .title-scroll,
.now-playing-card-focused.align-center .artist-text {
  text-align: center !important;
  width: 100% !important;
}
body.align-center .now-playing-card-focused .req-user-badge,
.now-playing-card-focused.align-center .req-user-badge {
  justify-content: center !important;
}

body.align-right .now-playing-card-focused,
.now-playing-card-focused.align-right {
  flex-direction: row-reverse !important;
  text-align: right !important;
  align-items: center !important;
}
body.align-right .now-playing-card-focused .playing-meta,
.now-playing-card-focused.align-right .playing-meta {
  align-items: flex-end !important;
  text-align: right !important;
}
body.align-right .now-playing-card-focused .title-scroll,
body.align-right .now-playing-card-focused .artist-text,
.now-playing-card-focused.align-right .title-scroll,
.now-playing-card-focused.align-right .artist-text {
  text-align: right !important;
}
body.align-right .now-playing-card-focused .req-user-badge,
.now-playing-card-focused.align-right .req-user-badge {
  justify-content: flex-end !important;
}

/* ── Queue Overlay Item Row Layout (Standard Left vs Reverse Right) ── */
.queue-overlay-container.layout-right .queue-item-row,
.queue-item-row.layout-right,
body.layout-right .queue-item-row,
body.item-align-right .queue-item-row {
  flex-direction: row-reverse !important;
  text-align: right !important;
}

.queue-overlay-container.layout-right .q-meta,
.queue-item-row.layout-right .q-meta,
body.layout-right .q-meta,
body.item-align-right .q-meta {
  align-items: flex-end !important;
  text-align: right !important;
}

.queue-overlay-container.layout-right .q-user,
.queue-item-row.layout-right .q-user,
body.layout-right .q-user,
body.item-align-right .q-user {
  justify-content: flex-end !important;
}

.queue-overlay-container.layout-right .req-user-badge,
.queue-item-row.layout-right .req-user-badge,
body.layout-right .req-user-badge,
body.item-align-right .req-user-badge {
  justify-content: flex-end !important;
  flex-direction: row-reverse !important;
}

.queue-overlay-container.layout-right .queue-overlay-header,
body.layout-right .queue-overlay-header,
body.item-align-right .queue-overlay-header {
  flex-direction: row-reverse !important;
}

.queue-overlay-container.layout-right .queue-title,
body.layout-right .queue-title,
body.item-align-right .queue-title {
  flex-direction: row-reverse !important;
}

/* ── Alert Toast Layout (Standard Left vs Reverse Right) ── */
.alert-toast-container.layout-right,
body.layout-right .alert-toast-container,
body.item-align-right .alert-toast-container {
  flex-direction: row-reverse !important;
  text-align: right !important;
}

.alert-toast-container.layout-right .alert-meta,
body.layout-right .alert-toast-container .alert-meta,
body.item-align-right .alert-toast-container .alert-meta {
  align-items: flex-end !important;
  text-align: right !important;
}

.alert-toast-container.layout-right .alert-user,
body.layout-right .alert-toast-container .alert-user,
body.item-align-right .alert-toast-container .alert-user {
  text-align: right !important;
  justify-content: flex-end !important;
}

/* ── Compact Ticker Layout (Standard Left vs Reverse Right) ── */
.compact-ticker-container.layout-right,
body.layout-right .compact-ticker-container,
body.item-align-right .compact-ticker-container {
  flex-direction: row-reverse !important;
}

.compact-ticker-container.layout-right .ticker-badge-live,
body.layout-right .compact-ticker-container .ticker-badge-live,
.compact-ticker-container.layout-right .ticker-badge,
body.layout-right .compact-ticker-container .ticker-badge {
  order: 2 !important;
}

.compact-ticker-container.layout-right .ticker-marquee-wrapper,
body.layout-right .compact-ticker-container .ticker-marquee-wrapper,
.compact-ticker-container.layout-right .ticker-marquee,
body.layout-right .compact-ticker-container .ticker-marquee {
  order: 1 !important;
  text-align: right !important;
}

/* Font size presets */
body.font-sm .k-line {
  font-size: 18px;
}

body.font-sm .k-line.active {
  font-size: 22px;
}

body.font-md .k-line {
  font-size: 24px;
}

body.font-md .k-line.active {
  font-size: 28px;
}

body.font-lg .k-line {
  font-size: 32px;
}

body.font-lg .k-line.active {
  font-size: 38px;
}

body.font-xl .k-line {
  font-size: 40px;
}

body.font-xl .k-line.active {
  font-size: 48px;
}

/* ── 1. FOCUSED LYRICS ONLY OVERLAY (100% Zero-Box Transparent Cutout) ── */
.lyrics-only-container,
#lyricsBox,
.lyrics-only-viewport,
.lyrics-scroll-box,
#lyricsContainer {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
}

.lyrics-only-viewport {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.lines-all .lyrics-only-viewport {
  height: 480px;
  max-height: 80vh;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent 100%);
}

.lyrics-scroll-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  top: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.align-left .lyrics-scroll-box {
  align-items: flex-start;
  text-align: left;
}

body.align-right .lyrics-scroll-box {
  align-items: flex-end;
  text-align: right;
}

body.align-center .lyrics-scroll-box {
  align-items: center;
  text-align: center;
}

.k-line-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.k-line {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-inactive, rgba(255, 255, 255, 0.45));
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.45;
  transform: scale(0.96);
  transform-origin: left center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

body.align-center .k-line,
body.align-center .k-trans-line {
  text-align: center;
  transform-origin: center center;
}

.k-line.active {
  color: var(--text-active, #ffffff);
  font-size: 34px;
  opacity: 1;
  transform: scale(1.02);
  text-shadow: 0 0 20px var(--accent-glow), 0 2px 10px rgba(0, 0, 0, 0.9);
}

body.bg-transparent .k-line.active {
  text-shadow: 0 0 24px var(--accent-glow), 0 2px 6px rgba(0, 0, 0, 1), 0 4px 16px rgba(0, 0, 0, 0.9);
}

/* Secondary Translation Subtitle line */
.k-trans-line {
  font-size: var(--mc-sub-size, 16px);
  font-weight: 600;
  color: var(--text-inactive, rgba(255, 255, 255, 0.6));
  opacity: 0.75;
  transition: all 0.25s ease;
  display: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.k-line-wrapper.active .k-trans-line {
  display: block;
  color: var(--accent-primary, #00f2fe);
  opacity: 0.95;
}

/* Clean, Non-overlapping Word Segment & Sweep Structure */
.mc-word-segment {
  position: relative;
  display: inline-block;
  white-space: pre;
  margin-right: 0.22em;
  vertical-align: baseline;
}

.mc-word-layout {
  position: relative;
  display: inline-block;
}

.mc-word-base {
  position: relative;
  display: inline-block;
  white-space: pre;
  color: inherit;
  transition: color 0.12s ease, transform 0.15s ease, filter 0.15s ease;
}

/* ── KTV ULTRA-SMOOTH KARAOKE SWEEP (CLEAN SINGLE TEXT LAYER) ── */
body.effect-sweep .mc-word-segment.is-word-timed .mc-word-base,
.effect-sweep .mc-word-segment.is-word-timed .mc-word-base {
  color: transparent !important;
  background-image: linear-gradient(90deg,
      var(--word-highlight, var(--accent-primary, #00f2fe)) 0%,
      var(--word-highlight, var(--accent-primary, #00f2fe)) var(--mc-word-progress, 0%),
      var(--text-inactive, rgba(255, 255, 255, 0.45)) var(--mc-word-progress, 0%),
      var(--text-inactive, rgba(255, 255, 255, 0.45)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: background-image;
}

body.effect-sweep .mc-word-segment.is-word-timed.active .mc-word-base,
.effect-sweep .mc-word-segment.is-word-timed.active .mc-word-base {
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

/* Non-sweep word active states (scale, pop, bounce, float, slide, none, etc.) */
body:not(.effect-sweep) .k-word.active .mc-word-base,
body:not(.effect-sweep) .mc-word-segment.active .mc-word-base {
  color: var(--word-highlight, var(--accent-primary, #00f2fe)) !important;
  filter: drop-shadow(0 0 12px var(--accent-glow, rgba(0, 242, 254, 0.8)));
}

body:not(.effect-sweep) .k-word.passed .mc-word-base,
body:not(.effect-sweep) .mc-word-segment.passed .mc-word-base {
  color: var(--text-active, #ffffff);
}

body.effect-scale .k-word.active .mc-word-base,
.effect-scale .k-word.active .mc-word-base {
  transform: scale(1.15);
}

/* ── HIT FX BURST ANIMATIONS (KARAOKE NOTE HIT) ── */
.fx-hit-ripple::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  border: 2px solid var(--word-highlight, var(--accent-primary));
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  pointer-events: none;
  animation: hitRippleBurst 0.4s ease-out forwards;
}

@keyframes hitRippleBurst {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}

.fx-hit-bounce .mc-word-base {
  animation: hitBouncePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes hitBouncePop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18) translateY(-4px);
  }

  100% {
    transform: scale(1.05) translateY(0);
  }
}

.fx-hit-sparkle::before {
  content: '✨';
  position: absolute;
  top: -12px;
  right: -6px;
  font-size: 12px;
  animation: hitSparkle 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes hitSparkle {
  0% {
    transform: scale(0.5) translateY(4px);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) translateY(-4px);
    opacity: 1;
  }

  100% {
    transform: scale(0.8) translateY(-8px);
    opacity: 0;
  }
}

/* Dynamic Motion Modes */
body.motion-float .k-line.active,
.motion-float .k-line.active {
  animation: gentleFloat 3s ease-in-out infinite alternate;
}

@keyframes gentleFloat {
  0% {
    transform: scale(1.02) translateY(0px);
  }

  100% {
    transform: scale(1.02) translateY(-6px);
  }
}

body.motion-drift .k-line-wrapper:nth-child(odd),
.motion-drift .k-line-wrapper:nth-child(odd) {
  animation: driftLeft 4s ease-in-out infinite alternate;
}

body.motion-drift .k-line-wrapper:nth-child(even),
.motion-drift .k-line-wrapper:nth-child(even) {
  animation: driftRight 4s ease-in-out infinite alternate;
}

@keyframes driftLeft {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-8px);
  }
}

@keyframes driftRight {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(8px);
  }
}

body.motion-scatter .k-line-wrapper:nth-child(3n+1) {
  transform: translateX(-12px) translateY(2px);
}

body.motion-scatter .k-line-wrapper:nth-child(3n+2) {
  transform: translateX(14px) translateY(-2px);
}

body.motion-scatter .k-line-wrapper:nth-child(3n+3) {
  transform: translateX(0px) translateY(4px);
}

/* ── 2. NOW PLAYING OVERLAY (LUXURY VINYL & PLAYER CARD) ── */
.now-playing-card-focused {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-panel);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 35px var(--accent-glow);
  max-width: 520px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

body.bg-transparent .now-playing-card-focused {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.vinyl-art-wrapper {
  position: relative;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
}

.vinyl-disc {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #333 0%, #1a1a1a 20%, #111 45%, #222 55%, #0a0a0a 85%, #000 100%);
  border: 2px solid rgba(255, 255, 255, 0.18);
  animation: spinVinyl 6s linear infinite;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.1);
}

.vinyl-art {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-panel);
  animation: spinVinyl 6s linear infinite;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

@keyframes spinVinyl {
  100% {
    transform: rotate(360deg);
  }
}

.playing-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-scroll {
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-active, #ffffff);
  letter-spacing: -0.2px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.artist-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-inactive, rgba(255, 255, 255, 0.65));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Audio Wave Visualizer */
.audio-waves {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}

.wave-bar {
  width: 3px;
  background: var(--accent-primary, #00f2fe);
  border-radius: 3px;
  animation: wavePulse 0.9s ease-in-out infinite alternate;
  box-shadow: 0 0 6px var(--accent-glow);
}

.wave-bar:nth-child(1) {
  height: 35%;
  animation-delay: 0.1s;
}

.wave-bar:nth-child(2) {
  height: 90%;
  animation-delay: 0.3s;
}

.wave-bar:nth-child(3) {
  height: 60%;
  animation-delay: 0.15s;
}

.wave-bar:nth-child(4) {
  height: 100%;
  animation-delay: 0.4s;
}

.wave-bar:nth-child(5) {
  height: 50%;
  animation-delay: 0.25s;
}

@keyframes wavePulse {
  0% {
    transform: scaleY(0.25);
  }

  100% {
    transform: scaleY(1);
  }
}

/* ── 3. FOCUSED UP NEXT / QUEUE OVERLAY (HIGH-END STREAMER CARD) ── */
.queue-overlay-container {
  width: 100%;
  max-width: 460px;
  background: var(--bg-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-panel);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 30px var(--accent-glow);
}

body.bg-transparent .queue-overlay-container {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.queue-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.queue-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent-primary, #00f2fe);
  display: flex;
  align-items: center;
  gap: 7px;
  text-shadow: 0 0 10px var(--accent-glow);
}

.queue-count-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  background: var(--requester-bg, rgba(0, 242, 254, 0.15));
  color: var(--requester-text, #00f2fe);
  border: 1px solid var(--requester-border, rgba(0, 242, 254, 0.35));
  border-radius: 14px;
}

.queue-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
}

.queue-item-row:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(3px);
}

.queue-item-row.is-first {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.12), rgba(255, 215, 0, 0.03));
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
}

.queue-item-row.is-now-playing {
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.18), rgba(0, 242, 254, 0.05));
  border-color: rgba(0, 242, 254, 0.5);
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.25);
}

.q-rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  font-family: var(--font-mono, monospace);
  flex-shrink: 0;
}

.q-rank-now {
  background: linear-gradient(135deg, #00f2fe, #4facfe);
  color: #000;
  width: auto;
  min-width: 44px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

.q-rank-1 {
  background: rgba(0, 242, 254, 0.18);
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.4);
}

.q-rank-2 {
  background: rgba(255, 215, 0, 0.18);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.q-rank-3 {
  background: rgba(255, 117, 140, 0.18);
  color: #ff758c;
  border: 1px solid rgba(255, 117, 140, 0.4);
}

.q-rank-default {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-inactive, rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.q-thumb {
  width: 44px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.q-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.q-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
}

.q-user {
  font-size: 10px;
  color: var(--requester-text, #00f2fe);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── 4. TIMELINE OVERLAY (PREV - NOW - NEXT) ── */
.timeline-overlay-container {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 820px;
}

.timeline-card {
  flex: 1;
  background: var(--bg-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 14px 16px;
  opacity: 0.6;
  transform: scale(0.94);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-card.now-playing {
  flex: 1.4;
  opacity: 1;
  transform: scale(1.04);
  border: 1.5px solid var(--accent-primary, #00f2fe);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 30px var(--accent-glow);
  background: var(--bg-panel);
}

body.bg-transparent .timeline-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.t-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  color: var(--accent-primary, #00f2fe);
}

.t-title {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.t-artist {
  font-size: 11px;
  color: var(--text-inactive, rgba(255, 255, 255, 0.65));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 5. NOTIFICATION TOAST ALERT OVERLAY ── */
.alert-toast-container {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid var(--border-panel);
  border-radius: 24px;
  padding: 16px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px var(--accent-glow);
  transform: translateX(-130%) scale(0.9);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 0;
  max-width: 480px;
}

.alert-toast-container.show {
  transform: translateX(0);
  opacity: 1;
}

.alert-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--requester-bg);
  border: 1px solid var(--requester-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent-primary);
}

.alert-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.alert-headline {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-primary);
  letter-spacing: 0.5px;
}

.alert-song {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.alert-user {
  font-size: 12px;
  color: var(--requester-text);
  font-weight: 700;
}

/* ── 6. COMPACT TICKER BAR OVERLAY ── */
.compact-ticker-container {
  width: 100%;
  background: var(--bg-panel, #141417);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--border-panel, #2c2c32);
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 16px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  color: #ffffff !important;
}

.ticker-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  background: var(--requester-bg, rgba(0, 242, 254, 0.2));
  color: var(--requester-text, #00f2fe);
  border: 1px solid var(--requester-border, rgba(0, 242, 254, 0.4));
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.ticker-marquee,
.ticker-marquee-wrapper,
.ticker-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.compact-ticker-container .ticker-text strong {
  color: #ffffff !important;
  font-weight: 800;
}

.compact-ticker-container .req-user-badge {
  color: var(--accent-primary, #00f2fe) !important;
  background: rgba(0, 242, 254, 0.15) !important;
  border: 1px solid rgba(0, 242, 254, 0.35) !important;
  border-radius: 4px;
  padding: 2px 6px;
}

.hidden {
  display: none !important;
}

/* ── 7. ADVANCED WORD HIT IMPACT VISUAL FX ── */
.word-hit-wrapper {
  position: relative;
  display: inline-block;
}

/* 1. Ripple Effect */
.k-word.fx-hit-ripple::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: 2px solid var(--word-highlight, #00f2fe);
  box-shadow: 0 0 14px var(--accent-glow, rgba(0, 242, 254, 0.6));
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 1;
  pointer-events: none;
  animation: wordHitRipple 0.55s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes wordHitRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
}

/* 2. NoteHit Diamond Burst */
.k-word.fx-hit-diamond::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  border: 2px solid var(--word-highlight, #ffd700);
  background: rgba(255, 215, 0, 0.15);
  box-shadow: 0 0 16px var(--accent-glow, rgba(255, 215, 0, 0.8));
  transform: translate(-50%, -50%) rotate(45deg) scale(0.3);
  opacity: 1;
  pointer-events: none;
  animation: wordHitDiamond 0.6s cubic-bezier(0.15, 0.9, 0.3, 1) forwards;
}

@keyframes wordHitDiamond {
  0% {
    transform: translate(-50%, -50%) rotate(45deg) scale(0.3);
    opacity: 1;
  }

  60% {
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) rotate(45deg) scale(2.2);
    opacity: 0;
  }
}

/* 3. Chevron Push FX */
.k-word.fx-hit-chevron::before,
.k-word.fx-hit-chevron::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-top: 2.5px solid var(--word-highlight, #00f2fe);
  border-right: 2.5px solid var(--word-highlight, #00f2fe);
  pointer-events: none;
  opacity: 1;
}

.k-word.fx-hit-chevron::before {
  left: -8px;
  transform: translateY(-50%) rotate(-135deg);
  animation: wordHitChevronLeft 0.5s ease-out forwards;
}

.k-word.fx-hit-chevron::after {
  right: -8px;
  transform: translateY(-50%) rotate(45deg);
  animation: wordHitChevronRight 0.5s ease-out forwards;
}

@keyframes wordHitChevronLeft {
  0% {
    transform: translateY(-50%) rotate(-135deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(-50%) rotate(-135deg) translateX(24px) scale(0.5);
    opacity: 0;
  }
}

@keyframes wordHitChevronRight {
  0% {
    transform: translateY(-50%) rotate(45deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(-50%) rotate(45deg) translateX(24px) scale(0.5);
    opacity: 0;
  }
}

/* 4. CrossFlash Star Rays */
.k-word.fx-hit-cross::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, var(--word-highlight, #fff) 0%, transparent 70%);
  clip-path: polygon(50% 0%, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%);
  box-shadow: 0 0 24px var(--accent-glow, rgba(255, 255, 255, 0.9));
  transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  opacity: 1;
  pointer-events: none;
  animation: wordHitCross 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes wordHitCross {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -50%) scale(2.4) rotate(45deg);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(3.2) rotate(90deg);
    opacity: 0;
  }
}

/* 5. SlashCut Light Blade */
.k-word.fx-hit-slash::after {
  content: '';
  position: absolute;
  left: -20%;
  top: 50%;
  width: 140%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffffff, var(--word-highlight, #00f2fe), transparent);
  box-shadow: 0 0 16px var(--word-highlight, #00f2fe);
  transform: translateY(-50%) rotate(-25deg) scaleX(0);
  pointer-events: none;
  animation: wordHitSlash 0.45s ease-out forwards;
}

@keyframes wordHitSlash {
  0% {
    transform: translateY(-50%) rotate(-25deg) scaleX(0);
    opacity: 1;
  }

  40% {
    transform: translateY(-50%) rotate(-25deg) scaleX(1.3);
    opacity: 1;
  }

  100% {
    transform: translateY(-50%) rotate(-25deg) scaleX(1.8);
    opacity: 0;
  }
}

/* 6. ShockSquare 14° Rotated Flash */
.k-word.fx-hit-square::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  border: 2px solid var(--word-highlight, #ff007a);
  box-shadow: 0 0 18px var(--accent-glow, rgba(255, 0, 122, 0.8));
  transform: translate(-50%, -50%) rotate(14deg) scale(0.2);
  opacity: 1;
  pointer-events: none;
  animation: wordHitSquare 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes wordHitSquare {
  0% {
    transform: translate(-50%, -50%) rotate(14deg) scale(0.2);
    opacity: 1;
    filter: brightness(2.6);
  }

  60% {
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) rotate(14deg) scale(2.4);
    opacity: 0;
  }
}

/* ── 8. LINE ENTER & EXIT ANIMATIONS ── */
.anim-enter-fade {
  animation: mcLineFadeIn 0.5s ease-out forwards;
}

.anim-enter-slide {
  animation: mcLineSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-enter-pop {
  animation: mcLinePopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.anim-enter-focus {
  animation: mcLineFocusIn 0.65s ease-out forwards;
}

.anim-enter-flip {
  animation: mcLineFlipIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.anim-enter-converge {
  animation: mcLineConvergeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mcLineFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mcLineSlideIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mcLinePopIn {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }

  70% {
    opacity: 1;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mcLineFocusIn {
  from {
    opacity: 0.15;
    filter: blur(12px);
  }

  to {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes mcLineFlipIn {
  from {
    opacity: 0;
    transform: perspective(700px) rotateX(-72deg) translateY(0.28em);
  }

  to {
    opacity: 1;
    transform: perspective(700px) rotateX(0deg) translateY(0);
  }
}

@keyframes mcLineConvergeIn {
  from {
    opacity: 0;
    letter-spacing: 12px;
    filter: blur(4px);
  }

  to {
    opacity: 1;
    letter-spacing: inherit;
    filter: blur(0);
  }
}

/* Exit Animations */
.anim-exit-fade {
  animation: mcLineFadeOut 0.4s ease-in forwards;
}

.anim-exit-lift {
  animation: mcLineLiftOut 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anim-exit-sink {
  animation: mcLineSinkOut 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anim-exit-disperse {
  animation: mcLineDisperseOut 0.5s ease-in forwards;
}

@keyframes mcLineFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mcLineLiftOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-24px);
  }
}

@keyframes mcLineSinkOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes mcLineDisperseOut {
  from {
    opacity: 1;
    letter-spacing: inherit;
    filter: blur(0);
  }

  to {
    opacity: 0;
    letter-spacing: 16px;
    filter: blur(8px);
  }
}

/* ── 9. ADVANCED MULTI-TIER LYRICS LAYOUT & TYPOGRAPHY ENGINE ── */
.k-line {
  position: relative;
  width: 100%;
  display: block;
}

.k-line.layout-spatial {
  position: relative;
  width: 100%;
  min-height: 120px;
}

.mc-word-segment {
  position: relative;
  z-index: 1;
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 72%;
}

.k-line.layout-spatial .mc-word-segment {
  position: absolute;
  left: var(--mc-word-x, 50%);
  top: var(--mc-word-y, 50%);
  transform: translate(-50%, -50%);
}

/* MochaConsole Shadow System: per-segment drop-shadow */
body[data-shadow="on"] .mc-word-segment {
  filter: drop-shadow(var(--mc-shadow-x, 0) var(--mc-shadow-y, 6px) var(--mc-shadow-blur, 12px) var(--mc-shadow-color, rgba(0, 0, 0, .72)));
}

.mc-word-layout {
  position: relative;
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 72%;
}

.mc-word-motion {
  position: relative;
  display: inline-grid;
  white-space: pre;
  transform-origin: 50% 82%;
  isolation: isolate;
}

.mc-word-ghost,
.mc-word-base {
  grid-area: 1 / 1;
  position: relative;
  display: inline-block;
  white-space: pre;
}

.mc-word-ghost {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-text-stroke: 0 transparent;
  color: var(--accent-primary, #00f2fe);
  text-shadow: 0 0 16px var(--accent-glow, rgba(0, 242, 254, 0.8));
  mix-blend-mode: screen;
  display: none;
}

.effect-glow .mc-word-ghost {
  display: inline-block;
}

.effect-glow .mc-word-segment.active .mc-word-ghost {
  opacity: 1;
}

.mc-word-base {
  z-index: 2;
  -webkit-text-stroke-width: var(--mc-lyric-outline-width, 0px);
  -webkit-text-stroke-color: var(--mc-lyric-outline-color, transparent);
  paint-order: stroke fill;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── KTV GRADIENT SWEEP FILL (MochaConsole Engine) ── */
.effect-sweep .mc-word-segment .mc-word-base {
  color: rgba(255, 255, 255, 0.65);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.65);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.effect-sweep .mc-word-segment.upcoming .mc-word-base {
  color: rgba(255, 255, 255, 0.6);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.effect-sweep .mc-word-segment.active .mc-word-base {
  padding-block: var(--mc-sweep-glyph-bleed, 2px);
  margin-block: calc(0px - var(--mc-sweep-glyph-bleed, 2px));
  color: transparent;
  -webkit-text-stroke: 0 transparent;
  paint-order: fill;
  background-image: linear-gradient(var(--mc-sweep-angle, 90deg),
      var(--mc-word-fill-color, #ffffff) 0,
      var(--mc-word-fill-color, #ffffff) var(--mc-word-progress, 0%),
      rgba(255, 255, 255, 0.5) var(--mc-word-progress, 0%),
      rgba(255, 255, 255, 0.5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: background-image;
}

.effect-sweep .mc-word-segment.passed .mc-word-base {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background-image: none;
  text-shadow: 0 0 16px var(--accent-glow, rgba(0, 242, 254, 0.7)), 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Mask to dim the unsung portion (MochaConsole technique) */
.effect-sweep .mc-word-segment.active .mc-word-motion {
  -webkit-mask-image: linear-gradient(var(--mc-sweep-angle, 90deg),
      #000 0, #000 var(--mc-word-progress, 0%),
      rgba(0, 0, 0, var(--mc-sweep-unsung, 0.55)) var(--mc-word-progress, 0%),
      rgba(0, 0, 0, var(--mc-sweep-unsung, 0.55)) 100%);
  mask-image: linear-gradient(var(--mc-sweep-angle, 90deg),
      #000 0, #000 var(--mc-word-progress, 0%),
      rgba(0, 0, 0, var(--mc-sweep-unsung, 0.55)) var(--mc-word-progress, 0%),
      rgba(0, 0, 0, var(--mc-sweep-unsung, 0.55)) 100%);
  -webkit-mask-clip: no-clip;
  mask-clip: no-clip;
}

/* Fully sung words keep full opacity */
.effect-sweep .mc-word-segment.passed .mc-word-motion {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Sweep with drop-shadow for outline glow */
.effect-sweep .mc-word-segment.active {
  filter: drop-shadow(0 0 14px var(--accent-glow, rgba(0, 242, 254, 0.85))) drop-shadow(0 0 4px #ffffff);
}

/* 3D Bounce Pop */
.effect-pop .mc-word-segment.active .mc-word-motion {
  animation: mcWordPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mcWordPop {
  0% {
    transform: scale(0.85);
  }

  60% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1.05);
  }
}

/* 3D Flip */
.effect-flip .mc-word-segment.active .mc-word-motion {
  animation: mcWordFlip 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes mcWordFlip {
  0% {
    transform: perspective(600px) rotateX(-70deg) translateY(0.2em);
  }

  100% {
    transform: perspective(600px) rotateX(0deg) translateY(0);
  }
}

/* Cinematic Focus */
.effect-focus .mc-word-segment.active .mc-word-motion {
  animation: mcWordFocus 0.4s ease-out forwards;
}

@keyframes mcWordFocus {
  0% {
    filter: blur(8px);
    opacity: 0.3;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

/* Tilt Sway */
.effect-sway .mc-word-segment.active .mc-word-motion {
  animation: mcWordSway 0.5s ease-in-out forwards;
}

@keyframes mcWordSway {
  0% {
    transform: rotate(0deg);
  }

  40% {
    transform: rotate(-6deg) scale(1.08);
  }

  80% {
    transform: rotate(4deg) scale(1.04);
  }

  100% {
    transform: rotate(0deg) scale(1.02);
  }
}

/* ── HOLLOW SHELL & SERIF STYLES (MOCHACONSOLE) ── */
.layout-hollow .mc-word-segment.is-hollow-eligible .mc-word-base,
.arrange-hollow .mc-word-segment.is-hollow-eligible .mc-word-base {
  opacity: 0 !important;
  background-image: none !important;
  -webkit-text-fill-color: transparent !important;
}

.layout-hollow .mc-word-segment.is-hollow-eligible .mc-word-hollow-main,
.arrange-hollow .mc-word-segment.is-hollow-eligible .mc-word-hollow-main {
  opacity: 1 !important;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.mc-shell-s .mc-word-hollow-main {
  filter: url(#mcLyricShellSPrimary);
}

.mc-shell-m .mc-word-hollow-main {
  filter: url(#mcLyricShellMPrimary);
}

.mc-shell-l .mc-word-hollow-main {
  filter: url(#mcLyricShellLPrimary);
}

/* ── WORD BADGE SHAPES ── */
.badge-shape-diamond .mc-word-segment,
.badge-shape-diamond .k-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  min-width: 42px;
  border: 1.5px solid var(--accent-primary, #ffd700);
  background: rgba(18, 16, 26, 0.75);
  border-radius: 6px;
  margin: 0 4px;
  box-shadow: 0 0 12px var(--accent-glow, rgba(255, 215, 0, 0.4));
  transition: all 0.25s ease;
}

.badge-shape-circle .mc-word-segment,
.badge-shape-circle .k-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  min-width: 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(10, 24, 42, 0.65);
  margin: 0 4px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
  transition: all 0.25s ease;
}

.badge-shape-bubble .mc-word-segment,
.badge-shape-bubble .k-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  min-width: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--accent-primary, rgba(45, 212, 191, 0.6));
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), rgba(8, 32, 38, 0.7));
  box-shadow: 0 0 15px var(--accent-glow, rgba(45, 212, 191, 0.4)), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  margin: 0 4px;
  transition: all 0.25s ease;
}

/* ── GLOW TOGGLE CONTROLS ── */
body.glow-off,
.glow-off {
  --accent-glow: transparent !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body.glow-off .k-line,
body.glow-off .k-line.active,
body.glow-off .k-word,
body.glow-off .k-word.active,
body.glow-off .k-word.passed,
body.glow-off .mc-word-base,
body.glow-off .mc-word-segment,
body.glow-off .mc-word-segment.active,
body.glow-off .mc-word-segment.passed,
.glow-off .k-line,
.glow-off .k-line.active,
.glow-off .k-word,
.glow-off .k-word.active,
.glow-off .k-word.passed,
.glow-off .mc-word-base,
.glow-off .mc-word-segment,
.glow-off .mc-word-segment.active,
.glow-off .mc-word-segment.passed {
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

body.glow-off .mc-word-ghost,
.glow-off .mc-word-ghost {
  display: none !important;
  opacity: 0 !important;
  text-shadow: none !important;
}

body.glow-off [class*="fx-hit-"]::before,
body.glow-off [class*="fx-hit-"]::after,
.glow-off [class*="fx-hit-"]::before,
.glow-off [class*="fx-hit-"]::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

body.glow-off .q-rank-badge,
body.glow-off .alert-icon-box,
body.glow-off .now-playing-card-focused,
body.glow-off .queue-overlay-container,
body.glow-off .timeline-card,
.glow-off .q-rank-badge,
.glow-off .alert-icon-box,
.glow-off .now-playing-card-focused,
.glow-off .queue-overlay-container,
.glow-off .timeline-card {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* ── LINE COUNT DISPLAY MODES ── */
body.lines-1 .lyrics-only-viewport {
  height: 60px !important;
}

body.lines-2 .lyrics-only-viewport {
  height: 105px !important;
}

body.lines-3 .lyrics-only-viewport {
  height: 150px !important;
}

/* ── MINIMALIST & CLEAN SKINS ── */
body.skin-minimal-pure,
.skin-minimal-pure {
  --bg-panel: #141418;
  --border-panel: #2c2c32;
  --accent-glow: transparent;
}

body.skin-minimal-pure .now-playing-card-focused,
.skin-minimal-pure .now-playing-card-focused,
body.skin-minimal-pure .queue-overlay-container,
.skin-minimal-pure .queue-overlay-container {
  background: #141418 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #2c2c32 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}