@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
* { box-sizing: border-box; }
body { font-family: 'VT323', monospace; background:#FFD1DC; margin:0; }

/* Immersive mode - hide UI elements, keep note style */
.immersive-mode {
  overflow:hidden;
}

.immersive-hidden {
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity 0.4s ease-out !important;
}

/* Move note up during immersive mode */
.immersive-mode .notes-content {
  margin-top:-120px;
  transition:margin-top 0.4s ease-out;
}

/* Confetti container */
.confetti-container { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10000; overflow:hidden; }
.confetti-piece { position:fixed; pointer-events:none; will-change:transform; }

.launcher-header { text-align:center; padding:24px 12px 8px; font-size:42px; color:#000080; }
.launcher-main { display:flex; flex-direction:column; gap:16px; max-width:500px; margin:0 auto 40px; padding:0 16px; }
.app-card { display:block; background:#ffe8e8; border:2px solid #000; padding:16px 18px; text-decoration:none; color:#000; box-shadow:4px 4px 0 #000; transition:all .2s; }
.app-card:hover { transform:translateY(-2px); box-shadow:6px 6px 0 #000; }
.app-card:active { transform:translateY(2px); box-shadow:2px 2px 0 #000; }
.app-title { font-size:28px; }
.app-desc { font-size:16px; color:#222; }
.app-card.logout { background:#ffb3c6; }
.top-bar { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#000080; color:#fff; font-size:22px; }
.back-link { color:#fff; text-decoration:none; font-size:20px; }
.game-wrapper { display:flex; flex-direction:column; align-items:center; padding:16px; }
canvas { max-width:100%; height:auto; image-rendering:pixelated; background:#000; }
.hud { margin-top:8px; display:flex; gap:24px; font-size:20px; }
.notes-page { display:flex; gap:18px; padding:16px; flex-wrap:wrap; }
.notes-sidebar { flex:0 0 180px; display:flex; flex-direction:column; gap:10px; }
.notes-content { flex:1 1 260px; min-width:260px; max-height:80vh; overflow-y:auto; }
#notesList button { display:block; width:100%; text-align:center; background:#ffe8e8; border:2px solid #000; padding:8px 10px; margin:4px 0; font-size:20px; cursor:pointer; box-shadow:2px 2px 0 #000; transition:all .2s; }
#notesList button:hover { transform:translateY(-2px); box-shadow:4px 4px 0 #000; }
#notesList button:active { transform:translateY(0); box-shadow:1px 1px 0 #000; }
.note-text { background:#fff; padding:16px 20px; min-height:200px; border:2px solid #000; white-space:pre-wrap; font-size:18px; line-height:1.6; max-height:75vh; overflow-y:auto; }
.markdown-content h1, .markdown-content h2, .markdown-content h3 { margin-top:20px; margin-bottom:12px; color:#000080; }
.markdown-content h1 { font-size:32px; border-bottom:2px solid #000080; padding-bottom:6px; }
.markdown-content h2 { font-size:28px; }
.markdown-content h3 { font-size:24px; }
.markdown-content p { margin:12px 0; white-space:normal; }
.markdown-content ul, .markdown-content ol { margin:12px 0; padding-left:30px; }
.markdown-content li { margin:6px 0; }
.markdown-content code { background:#ffe8e8; padding:2px 6px; border:1px solid #000; font-family:'VT323',monospace; font-size:16px; }
.markdown-content pre { background:#ffe8e8; padding:12px; border:2px solid #000; overflow-x:auto; margin:12px 0; }
.markdown-content pre code { background:none; padding:0; border:none; }
.markdown-content blockquote { border-left:4px solid #000080; padding-left:16px; margin:12px 0; font-style:italic; color:#333; }
.markdown-content a { color:#000080; text-decoration:underline; }
.markdown-content a:hover { color:#FF1493; }
.markdown-content strong { font-weight:bold; color:#000; }
.markdown-content em { font-style:italic; }
.markdown-content hr { border:none; border-top:2px solid #000; margin:20px 0; }
.next-release { width:100%; }
.large-countdown { font-size:30px; line-height:1.15; width:100%; display:block; text-align:center; padding:14px 10px; background:#000080; color:#fff; border:2px solid #000; box-shadow:4px 4px 0 #000; font-weight:400; margin:0 auto; }
.login-main { max-width:380px; margin:0 auto; padding:0 20px 40px; }
.form-panel { display:flex; flex-direction:column; gap:18px; background:#ffe8e8; border:2px solid #000; box-shadow:4px 4px 0 #000; padding:28px 30px 32px; }
.input-label { display:flex; flex-direction:column; gap:6px; font-size:22px; }
.input-label input { font-family:inherit; font-size:22px; padding:10px 12px; border:2px solid #000; background:#fff; box-shadow:2px 2px 0 #000; }
.btn-action { font-family:inherit; font-size:24px; padding:12px 16px; background:#000080; color:#fff; border:2px solid #000; cursor:pointer; box-shadow:4px 4px 0 #000; transition:all .2s; }
.btn-action:hover { transform:translateY(-2px); box-shadow:6px 6px 0 #000; }
.btn-action:active { transform:translateY(2px); box-shadow:2px 2px 0 #000; }
.info-text { background:#fff3cd; border:2px solid #000; padding:12px 16px; margin:10px 0; font-size:18px; box-shadow:3px 3px 0 #000; }
.spotify-status { background:#d4edda; border:2px solid #000; padding:12px 16px; margin:10px 0 20px; font-size:20px; box-shadow:3px 3px 0 #000; text-align:center; }
.status-subtext { margin:8px 0 0; font-size:16px; opacity:0.9; }
.reconnect-section { background:#f0f0f0; border:2px solid #000; padding:16px; margin-top:20px; box-shadow:3px 3px 0 #000; text-align:center; }
.btn-secondary { display:inline-block; font-family:inherit; font-size:18px; padding:10px 14px; background:#C0C0C0; border:2px solid #000; cursor:pointer; box-shadow:3px 3px 0 #000; transition:all .2s; text-decoration:none; margin-top:10px; }
.btn-secondary:hover { transform:translateY(-2px); box-shadow:5px 5px 0 #000; }
.btn-secondary:active { transform:translateY(2px); box-shadow:1px 1px 0 #000; }
.error { background:#ffb3c6; border:2px solid #000; padding:8px 10px; margin:0 0 16px; font-size:18px; }
/* Mobile controls generic */
#mobile-controls { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
#mobile-controls .row { display:flex; justify-content:center; gap:10px; }
#mobile-controls button { font-family:'VT323', monospace; font-size:28px; padding:10px 16px; background:#ffe8e8; border:2px solid #000; box-shadow:3px 3px 0 #000; min-width:64px; border-radius:6px; cursor:pointer; transition:all .2s; }
#mobile-controls button:hover { transform:translateY(-2px); box-shadow:5px 5px 0 #000; }
#mobile-controls button:active { transform:translateY(2px); box-shadow:1px 1px 0 #000; }
@media (max-width:600px){
  .launcher-header { font-size:34px; }
  .app-title { font-size:24px; }
  .hud { font-size:18px; }
  .notes-sidebar { flex:1 1 100%; max-width:100%; }
  .notes-content { flex:1 1 100%; }
  .large-countdown { font-size:34px; }
}

/* Heart particle effect (used on index and notes) */
.heart-particle { position:fixed; pointer-events:none; font-size:20px; color:#ff69b4; animation:float-up 2s ease-out forwards; z-index:1000; }
@keyframes float-up { 0% { opacity:1; transform:translateY(0) scale(1); } 100% { opacity:0; transform:translateY(-100px) scale(0.5); } }

/* Mad image on index */
#madGif { cursor:pointer; transition:transform .2s; width:120px; height:120px; display:block; margin:0 auto 20px; }
#madGif:hover { transform:scale(1.1); }
#madGif:active { transform:scale(0.95); }

/* Marcell gif above canvas on game page */
#marcellGif { display:block; margin:0 auto 10px; width:120px; height:120px; }

/* Game HUD and controls */
.hud-bar { display:flex; gap:26px; justify-content:center; font-size:22px; color:#000080; margin-top:6px; }
.hud-bar span { min-width:90px; display:inline-block; text-align:center; }
#gameOverOverlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,0.78); color:#fff; font-size:30px; letter-spacing:1px; text-align:center; padding:20px; }
#gameContainer { position:relative; width:100%; max-width:380px; }
#pauseBtn { position:absolute; top:6px; right:6px; background:#C0C0C0; border:2px solid #000; font-family:'VT323', monospace; font-size:20px; padding:4px 10px; cursor:pointer; box-shadow:3px 3px 0 #000; transition:all .2s; }
#pauseBtn:hover { transform:translateY(-2px); box-shadow:5px 5px 0 #000; }
#pauseBtn:active { transform:translateY(2px); box-shadow:1px 1px 0 #000; }

/* Notes page Jo image */
#joGif { cursor:pointer; transition:transform .2s; width:120px; height:120px; display:block; margin:0 auto 20px; }
#joGif:hover { transform:scale(1.1); }
#joGif:active { transform:scale(0.95); }

/* Floating audio player on index */
.floating-player { position:fixed; bottom:20px; right:20px; background:rgba(255,209,220,0.95); border:2px solid #000; border-radius:15px; padding:15px; box-shadow:4px 4px 0 #000; z-index:1000; backdrop-filter:blur(10px); min-width:200px; }
.player-title { font-family:'VT323', monospace; font-size:16px; color:#000; text-align:center; margin-bottom:10px; font-weight:bold; }
.player-controls { display:flex; gap:10px; justify-content:center; align-items:center; }
.player-btn { background:#ffe8e8; border:2px solid #000; font-family:'VT323', monospace; font-size:18px; padding:8px 12px; cursor:pointer; box-shadow:2px 2px 0 #000; transition:all .2s; }
.player-btn:hover { transform:translateY(-2px); box-shadow:4px 4px 0 #000; }
.player-btn:active { transform:translateY(0); box-shadow:1px 1px 0 #000; }
.player-btn.playing { background:#FF1493; color:#fff; }
.player-progress { width:100%; height:6px; background:#ddd; border:1px solid #000; border-radius:3px; margin:10px 0; overflow:hidden; }
.progress-bar { height:100%; background:#FF1493; width:0%; transition:width .1s; }
.player-time { font-family:'VT323', monospace; font-size:14px; color:#000; text-align:center; margin-top:5px; }
.player-minimize { position:absolute; top:5px; right:5px; background:#ffe8e8; border:1px solid #000; font-family:'VT323', monospace; font-size:12px; padding:2px 6px; cursor:pointer; box-shadow:1px 1px 0 #000; }
.player-minimize:hover { background:#FF1493; color:#fff; }
.player-minimized { width:60px; height:60px; padding:10px; }
.player-minimized .player-title,
.player-minimized .player-controls,
.player-minimized .player-progress,
.player-minimized .player-time { display:none; }
.player-minimized .player-minimize { top:50%; left:50%; transform:translate(-50%, -50%); font-size:16px; padding:8px 12px; }

.game-over-screen { display:flex; flex-direction:column; align-items:center; gap:18px; }
.game-over-screen .winner-name { font-size:48px; color:#FF1493; font-weight:700; }

/* Confetti styles */
.confetti-container { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:2000; }
.confetti-piece { position:absolute; width:10px; height:14px; opacity:0.95; transform-origin:center; will-change:transform, opacity; }
@keyframes confetti-fall {
  0% { transform: translate3d(0,-10vh,0) rotate(0deg); opacity:1; }
  100% { transform: translate3d(var(--tx,0), 110vh, 0) rotate(720deg); opacity:0.85; }
}
@keyframes confetti-sway {
  0% { transform: translateX(0); }
 50% { transform: translateX(20px); }
 100% { transform: translateX(0); }
}

/* Playlist Guesser specific styles */
.playlist-guesser { display:flex; flex-direction:column; align-items:center; gap:18px; padding:20px; }
.playlist-guesser .current-track { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:520px; width:100%; }
.playlist-guesser .album-cover { width:300px; height:300px; object-fit:cover; border:4px solid #000; box-shadow:6px 6px 0 #000; background:#fff; }

/* Loading animation */
.loading-overlay { position:fixed; inset:0; background:rgba(255,209,220,0.95); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9999; }
.loading-hourglass { width:120px; height:120px; filter: brightness(0) saturate(100%) invert(9%) sepia(100%) saturate(7477%) hue-rotate(247deg) brightness(95%) contrast(148%); animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.1); opacity:0.8; } }
.loading-text { margin-top:20px; font-size:28px; color:#000080; text-align:center; }
.loading-subtext { margin-top:8px; font-size:18px; color:#333; text-align:center; }
.playlist-guesser .song-title { font-size:22px; margin:0; text-align:center; }
.playlist-guesser .artist-name { font-size:18px; margin:0; text-align:center; color:#333; }
.playlist-guesser .player-scores { width:100%; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.playlist-guesser .player-guess-buttons { width:100%; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.playlist-guesser .player-guess-button { font-size:18px; padding:8px 12px; background:#ffe8e8; border:2px solid #000; cursor:pointer; box-shadow:3px 3px 0 #000; transition:all .2s; }
.playlist-guesser .player-guess-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:5px 5px 0 #000; }
.playlist-guesser .player-guess-button:active:not(:disabled) { transform:translateY(0); box-shadow:2px 2px 0 #000; }
.playlist-guesser .player-guess-button:disabled { opacity:0.45; cursor:not-allowed; box-shadow:none; }

/* Center game controls and give breathing room between guesses and the next-button */
.playlist-guesser .game-controls { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; margin-top:12px; }
.playlist-guesser .player-guess-buttons { margin-bottom:10px; }
.playlist-guesser .game-controls .btn-action { align-self:center; margin:0; }
.playlist-guesser #nextSongButton { min-width:180px; }
.playlist-guesser .audio-controls { display:flex; gap:10px; align-items:center; }
.playlist-guesser .radio-button { position:relative; width:70px; height:70px; background:rgba(255,209,220,0.95); border:4px solid #000; border-radius:50%; cursor:pointer; box-shadow:4px 4px 0 #000; transition:all .2s; display:flex; align-items:center; justify-content:center; font-size:0; }
.playlist-guesser .radio-button:hover { transform:translateY(-2px); box-shadow:6px 6px 0 #000; }
.playlist-guesser .radio-button:active { transform:translateY(0); box-shadow:2px 2px 0 #000; }
.playlist-guesser .radio-button.playing { background:#000080; }
.playlist-guesser .radio-button::before { content:''; position:absolute; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent #000080; left:50%; top:50%; transform:translate(-40%, -50%); }
.playlist-guesser .radio-button.playing::before { content:''; position:absolute; width:8px; height:24px; background:#ffffff; left:calc(50% - 12px); top:50%; transform:translateY(-50%); border:none; }
.playlist-guesser .radio-button.playing::after { content:''; position:absolute; width:8px; height:24px; background:#ffffff; left:calc(50% + 5px); top:50%; transform:translateY(-50%); }
.playlist-guesser .radio-button:disabled { opacity:0.5; cursor:not-allowed; box-shadow:2px 2px 0 #000; }
.playlist-guesser .radio-button:disabled:hover { transform:none; box-shadow:2px 2px 0 #000; }

@media (max-width:600px) {
  .playlist-guesser .album-cover { width:250px; height:250px; }
  .playlist-guesser .song-title { font-size:20px; }
  .playlist-guesser .artist-name { font-size:18px; }
  .playlist-guesser .player-guess-button { font-size:16px; padding:8px 10px; }
  .playlist-guesser .radio-button { width:60px; height:60px; }
}

/* ========== GAME OVER SCREEN ANIMATIONS ========== */
.game-over-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; text-align:center; padding:40px 20px; }
.game-over-title { font-size:48px; margin-bottom:20px; animation:bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* Winner Container */
.winner-container { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; margin:20px 0; position:relative; }

/* Crown animation */
.winner-crown { font-size:80px; animation:spin-bounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }

/* Winner name with multiple animations */
.winner-name-animated { 
  font-size:56px; 
  font-weight:bold; 
  color:#000080; 
  text-transform:uppercase; 
  letter-spacing:3px;
  animation:
    winner-scale 1.5s ease-in-out infinite,
    winner-glow 1.5s ease-in-out infinite,
    winner-rotate 2s linear infinite;
  text-shadow:
    3px 3px 0 #000,
    6px 6px 0 rgba(255, 0, 0, 0.3),
    9px 9px 0 rgba(255, 215, 0, 0.3);
  filter:drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
}

/* Sparkles effect */
.winner-sparkles { position:absolute; width:100%; height:200px; }
.sparkle { position:absolute; font-size:30px; animation:sparkle-fall 2s ease-in forwards; }

/* Scores List */
.final-scores-list { 
  background:rgba(255, 209, 220, 0.9); 
  border:4px solid #000; 
  padding:20px; 
  border-radius:10px; 
  box-shadow:6px 6px 0 #000; 
  min-width:280px;
  animation:slide-up 0.6s ease-out;
}

.final-scores-list div { 
  font-size:24px; 
  padding:10px; 
  border-bottom:2px solid #000; 
  animation:score-pop 0.6s ease-out backwards;
}

.final-scores-list div:last-child { border-bottom:none; }

.final-scores-list div:nth-child(1) { animation-delay:0.1s; }
.final-scores-list div:nth-child(2) { animation-delay:0.2s; }
.final-scores-list div:nth-child(3) { animation-delay:0.3s; }
.final-scores-list div:nth-child(4) { animation-delay:0.4s; }
.final-scores-list div:nth-child(5) { animation-delay:0.5s; }

.restart-btn { 
  animation:pulse-button 0.8s ease-in-out infinite; 
  min-width:200px;
}

/* ========== KEYFRAME ANIMATIONS ========== */
@keyframes bounce-in {
  0% { transform:scale(0) translateY(-40px); opacity:0; }
  50% { transform:scale(1.1); }
  100% { transform:scale(1) translateY(0); opacity:1; }
}

@keyframes spin-bounce {
  0% { transform:rotateY(0) rotateX(0) scale(1); }
  25% { transform:rotateY(90deg) rotateX(15deg) scale(1.15); }
  50% { transform:rotateY(180deg) scale(1); }
  75% { transform:rotateY(270deg) rotateX(-15deg) scale(1.15); }
  100% { transform:rotateY(360deg) scale(1); }
}

@keyframes winner-scale {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.2); }
}

@keyframes winner-glow {
  0%, 100% { filter:drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)) drop-shadow(3px 3px 0 #000); }
  50% { filter:drop-shadow(0 0 30px rgba(255, 215, 0, 0.9)) drop-shadow(3px 3px 0 #000); }
}

@keyframes winner-rotate {
  0%, 100% { transform:rotateZ(-2deg); }
  50% { transform:rotateZ(2deg); }
}

@keyframes sparkle-fall {
  0% { opacity:1; transform:translateY(-200px) scale(1); }
  100% { opacity:0; transform:translateY(100px) scale(0); }
}

@keyframes slide-up {
  0% { transform:translateY(40px); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}

@keyframes score-pop {
  0% { transform:scale(0.5); opacity:0; }
  100% { transform:scale(1); opacity:1; }
}

@keyframes pulse-button {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.05); }
}

@keyframes confetti-fall {
  0% { opacity:1; transform:translateY(0) translateX(0) rotateZ(0deg); }
  100% { opacity:0; transform:translateY(var(--ty, 500px)) translateX(var(--tx, 0)) rotateZ(360deg); }
}

/* Music Player Styles */
.music-player-container {
  position:fixed;
  bottom:-100px;
  left:0;
  right:0;
  z-index:100;
  padding:12px 12px 20px;
  background:linear-gradient(transparent, #FFD1DC 30%);
  transition:bottom 0.4s ease-out;
}

.music-player-container.hidden {
  bottom:-150px;
  pointer-events:none;
}

.music-player-container:not(.hidden) {
  bottom:0;
}

.music-player {
  background:#ffe8e8;
  border:2px solid #000;
  padding:12px 16px;
  box-shadow:4px 4px 0 #000;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  border-radius:16px;
  max-width:400px;
  margin:0 auto;
}

.player-cover {
  flex-shrink:0;
  width:56px;
  height:56px;
  border:2px solid #000;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
  position:relative;
}

.player-cover:hover {
  transform:scale(1.08);
  transition:transform .2s;
}

.cover-image {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

.cover-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:28px;
  background:radial-gradient(circle, #fff 50%, #ffe8e8 100%);
  border-radius:50%;
}

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

.player-title {
  font-size:16px;
  font-weight:bold;
  color:#000080;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.player-artist {
  font-size:14px;
  color:#333;
}

.player-progress {
  width:100%;
  height:6px;
  background:#fff;
  border:1px solid #000;
  cursor:pointer;
  overflow:hidden;
  border-radius:999px;
}

.progress-bar {
  height:100%;
  background:#000080;
  width:0%;
  transition:width .1s linear;
}

.player-time {
  font-size:12px;
  color:#555;
}

.music-player.playing .cover-image,
.music-player.playing .cover-placeholder {
  animation:cover-spin 9s linear infinite;
}

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

/* Add padding to notes content when player is visible */
body:has(.music-player-container) .notes-content {
  padding-bottom:100px;
}

/* Lyrics Typewriter */
.lyrics-typewriter {
  font-family:'VT323', monospace;
  font-size:18px;
  color:#000080;
  line-height:1.8;
  min-height:30px;
  white-space:pre-wrap;
  word-wrap:break-word;
}

.lyrics-typewriter::after {
  content:'|';
  animation:cursor-blink 0.7s infinite;
  color:#000080;
}

@keyframes cursor-blink {
  0%, 50% { opacity:1; }
  51%, 100% { opacity:0; }
}

/* ===== IMPORTANT LYRICS EFFECTS ===== */

/* Background color shift during important lyric */
.immersive-mode {
  transition: background-color 0.8s ease-in-out;
}

.immersive-mode.important-moment {
  background: url('/protected_assets/assets/mad/bg.png') center center / cover no-repeat fixed;
}

.immersive-mode.important-moment .notes-content {
  background: transparent;
}

.immersive-mode.important-moment .note-text {
  background: rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.2);
  transition: all 0.5s ease;
}

/* Glowing text for important lyrics */
.lyrics-typewriter.important-glow {
  color: #fff;
  text-shadow: 
    0 0 10px #ff69b4,
    0 0 20px #ff69b4,
    0 0 40px #ff1493,
    0 0 80px #ff1493;
  transition: all 0.4s ease;
}

.lyrics-typewriter.important-glow::after {
  color: #ff69b4;
  text-shadow: 0 0 10px #ff69b4;
}

/* Screen pulse/vignette effect */
.screen-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255,20,147,0.15) 100%);
}

.screen-vignette.active {
  opacity: 1;
  animation: vignette-pulse 2s ease-in-out infinite;
}

@keyframes vignette-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Sparkle particles for important moments */
.sparkle-particle {
  position: fixed;
  pointer-events: none;
  font-size: 16px;
  z-index: 1500;
  animation: sparkle-float 1.5s ease-out forwards;
}

@keyframes sparkle-float {
  0% { 
    opacity: 1; 
    transform: translateY(0) scale(1) rotate(0deg); 
  }
  100% { 
    opacity: 0; 
    transform: translateY(-60px) scale(0.3) rotate(180deg); 
  }
}

/* Music player glow during important moment */
.immersive-mode.important-moment .music-player {
  box-shadow: 
    4px 4px 0 #000,
    0 0 20px rgba(255,20,147,0.5),
    0 0 40px rgba(255,20,147,0.3);
  transition: box-shadow 0.5s ease;
}

.immersive-mode.important-moment .cover-image,
.immersive-mode.important-moment .cover-placeholder {
  box-shadow: 
    0 0 15px rgba(255,20,147,0.6),
    0 0 30px rgba(255,20,147,0.4);
}

/* Player styling during important moment - same dark atmosphere */
.immersive-mode.important-moment .music-player {
  background: linear-gradient(135deg, #1a0a2e 0%, #16213e 100%);
  border-color: rgba(255,20,147,0.5);
}

.immersive-mode.important-moment .player-title,
.immersive-mode.important-moment .player-artist {
  color: #fff;
  text-shadow: 0 0 10px rgba(255,20,147,0.5);
}

.immersive-mode.important-moment .player-time {
  color: rgba(255,255,255,0.8);
}

.immersive-mode.important-moment .progress-bar {
  background: linear-gradient(90deg, #ff1493, #ff69b4);
  box-shadow: 0 0 10px rgba(255,20,147,0.6);
}

.immersive-mode.important-moment .player-progress {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,20,147,0.3);
}

/* ===== MUSIC NOTE BUTTON - Special styling ===== */
.btn-music-note {
  background: linear-gradient(135deg, #1a0a2e 0%, #16213e 50%, #0f3460 100%) !important;
  color: #fff !important;
  border: 2px solid rgba(255,20,147,0.5) !important;
  box-shadow: 
    2px 2px 0 #000,
    0 0 15px rgba(255,20,147,0.3),
    inset 0 0 20px rgba(255,20,147,0.1) !important;
  text-shadow: 0 0 10px rgba(255,20,147,0.5);
  position: relative;
  overflow: hidden;
}

.btn-music-note::before {
  content: '🎵';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: 0.8;
  animation: music-note-float 2s ease-in-out infinite;
}

.btn-music-note:hover {
  box-shadow: 
    4px 4px 0 #000,
    0 0 25px rgba(255,20,147,0.5),
    inset 0 0 30px rgba(255,20,147,0.2) !important;
  border-color: rgba(255,20,147,0.8) !important;
}

.btn-music-note:hover::before {
  animation: music-note-bounce 0.5s ease-in-out infinite;
}

@keyframes music-note-float {
  0%, 100% { transform: translateY(-50%) rotate(-5deg); }
  50% { transform: translateY(-55%) rotate(5deg); }
}

@keyframes music-note-bounce {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-60%) scale(1.2); }
}