/* CSS Variables - Miku Color Palette */
:root {
  --background: hsl(180, 30%, 3%);
  --foreground: hsl(180, 100%, 60%);
  --primary: hsl(174, 100%, 50%);
  --primary-foreground: hsl(180, 30%, 5%);
  --secondary: hsl(180, 100%, 45%);
  --secondary-foreground: hsl(180, 30%, 5%);
  --accent: hsl(330, 80%, 65%);
  --accent-foreground: hsl(180, 30%, 5%);
  --muted: hsl(180, 15%, 12%);
  --muted-foreground: hsl(180, 60%, 50%);
  --border: hsl(180, 100%, 50%);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'VT323', monospace;
  background-color: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23FF00FF' d='M0 0l12 12-4 4 8 8-4 4-8-8-4 4z'/%3E%3C/svg%3E"), auto;
  background-image:
    radial-gradient(2px 2px at 20px 30px, var(--primary), transparent),
    radial-gradient(2px 2px at 40px 70px, var(--secondary), transparent),
    radial-gradient(1px 1px at 90px 40px, hsla(174, 100%, 50%, 0.7), transparent),
    radial-gradient(2px 2px at 130px 80px, var(--secondary), transparent),
    radial-gradient(1px 1px at 160px 30px, var(--primary), transparent),
    radial-gradient(3px 3px at 180px 50px, hsla(330, 80%, 65%, 0.5), transparent);
  background-size: 200px 100px;
}

.font-pixel {
  font-family: 'Press Start 2P', cursive;
}

/* Animations */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes rainbow {
  0% { color: hsl(180, 100%, 50%); }
  25% { color: hsl(174, 100%, 60%); }
  50% { color: hsl(330, 80%, 65%); }
  75% { color: hsl(160, 100%, 45%); }
  100% { color: hsl(180, 100%, 50%); }
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

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

@keyframes wave {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

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

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-25%); }
}

/* Animation Classes */
.animate-blink { animation: blink 1s step-end infinite; }
.animate-rainbow { animation: rainbow 3s linear infinite; }
.animate-marquee { animation: marquee 15s linear infinite; }
.animate-sparkle { animation: sparkle 1.5s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-wave { animation: wave 1s ease-in-out infinite; display: inline-block; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s ease-in-out infinite; }
.animate-spin { animation: spin 3s linear infinite; }
.animate-spin-slow { animation: spin-slow 4s linear infinite; }

/* Glow Effect */
.glow-cyan {
  text-shadow:
    0 0 5px var(--primary),
    0 0 10px var(--primary),
    0 0 20px var(--primary),
    0 0 40px var(--primary);
}

/* Retro Border */
.retro-box {
  border: 3px solid var(--primary);
  box-shadow:
    0 0 10px hsla(174, 100%, 50%, 0.5),
    0 0 20px hsla(174, 100%, 50%, 0.3),
    5px 5px 0 var(--accent),
    inset 0 0 30px hsla(174, 100%, 50%, 0.2);
  background-color: var(--muted);
  padding: 1rem;
}

/* Container */
.container {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  position: relative;
  z-index: 20;
}

/* Floating Elements */
.floating-elements {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.floating-emoji {
  position: absolute;
  font-size: 1.5rem;
  animation: float 3s ease-in-out infinite;
}

@media (min-width: 768px) {
  .floating-emoji { font-size: 1.875rem; }
}

.falling-note {
  position: absolute;
  top: -20px;
  color: var(--secondary);
  animation: fall 8s linear infinite;
}

/* Marquee */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(to right, var(--primary), var(--secondary), var(--primary));
  padding: 0.5rem 0;
}

.marquee-text {
  display: inline-block;
  animation: marquee 15s linear infinite;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.875rem;
  color: var(--primary-foreground);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

@media (min-width: 768px) {
  .marquee-text { font-size: 1rem; }
}

/* GIF Bar */
.gif-bar {
  background-color: hsla(180, 15%, 12%, 0.5);
  border-bottom: 2px solid var(--primary);
}

.animated-gifs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

/* Pixel Art Elements */
.pixel-heart {
  width: 14px;
  height: 12px;
  background:
    linear-gradient(to right, transparent 2px, var(--secondary) 2px, var(--secondary) 4px, transparent 4px, transparent 6px, var(--secondary) 6px, var(--secondary) 8px, transparent 8px, transparent 10px, var(--secondary) 10px, var(--secondary) 12px, transparent 12px) 0 0,
    linear-gradient(to right, var(--secondary) 14px) 0 2px,
    linear-gradient(to right, var(--secondary) 14px) 0 4px,
    linear-gradient(to right, transparent 2px, var(--secondary) 2px, var(--secondary) 12px, transparent 12px) 0 6px,
    linear-gradient(to right, transparent 4px, var(--secondary) 4px, var(--secondary) 10px, transparent 10px) 0 8px,
    linear-gradient(to right, transparent 6px, var(--secondary) 6px, var(--secondary) 8px, transparent 8px) 0 10px;
  background-size: 14px 2px;
  background-repeat: no-repeat;
  animation: pulse 2s ease-in-out infinite;
}

.pixel-star {
  width: 10px;
  height: 10px;
  background:
    linear-gradient(to right, transparent 4px, var(--accent) 4px, var(--accent) 6px, transparent 6px) 0 0,
    linear-gradient(to right, transparent 2px, var(--accent) 2px, var(--accent) 8px, transparent 8px) 0 2px,
    linear-gradient(to right, var(--accent) 10px) 0 4px,
    linear-gradient(to right, transparent 2px, var(--accent) 2px, var(--accent) 8px, transparent 8px) 0 6px,
    linear-gradient(to right, transparent 4px, var(--accent) 4px, var(--accent) 6px, transparent 6px) 0 8px;
  background-size: 10px 2px;
  background-repeat: no-repeat;
  animation: spin-slow 4s linear infinite;
}

.dancing-note {
  font-size: 1.5rem;
  color: var(--secondary);
  animation: bounce 0.6s ease-in-out infinite;
}

.spinning-cd {
  width: 32px;
  height: 32px;
  border: 4px solid var(--secondary);
  border-radius: 50%;
  background-color: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 3s linear infinite;
}

.cd-center {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--secondary);
}

/* Header */
.header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.header-notes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.header-note {
  position: absolute;
  font-size: 1.5rem;
  color: var(--secondary);
  animation: float 3s ease-in-out infinite;
}

.header-emojis {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.header-emojis span {
  font-size: 2.5rem;
}

.twintails {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.twintail {
  width: 16px;
  height: 64px;
  background: linear-gradient(to bottom, var(--secondary), hsla(180, 100%, 45%, 0.5));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: float 3s ease-in-out infinite;
}

.main-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.5rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .main-title { font-size: 2rem; }
}

.subtitle {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.875rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .subtitle { font-size: 1.125rem; }
}

.blink-text {
  color: var(--accent);
  font-size: 1.125rem;
  animation: blink 1s step-end infinite;
}

.bouncing-pixels {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 1rem;
}

.bouncing-pixel {
  width: 8px;
  height: 8px;
  background-color: var(--secondary);
  animation: bounce 0.6s ease-in-out infinite;
}

/* Pixel Divider */
.pixel-divider {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.divider-pixel {
  width: 12px;
  height: 12px;
  background-color: var(--primary);
  animation: pulse 2s ease-in-out infinite;
}

/* Main Grid */
.main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .main-grid {
    grid-template-columns: 1fr 2fr;
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Box Titles */
.box-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.75rem;
  margin-bottom: 1rem;
  text-align: center;
}

.box-title.primary { color: var(--primary); }
.box-title.secondary { color: var(--secondary); }

/* Navigation */
.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-link {
  display: block;
  background-color: var(--background);
  border: 2px solid var(--secondary);
  padding: 0.5rem 0.75rem;
  color: var(--secondary);
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
}

.nav-link:hover {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.nav-link:hover span {
  display: inline-block;
  animation: bounce 0.6s ease-in-out infinite;
}

/* Pulse Bar */
.pulse-bar {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 1rem;
}

.pulse-pixel {
  width: 8px;
  height: 8px;
  background-color: var(--secondary);
  animation: pulse 2s ease-in-out infinite;
}

/* Stats */
.stats-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
  position: relative;
}

.bounce-heart {
  font-size: 2.5rem;
  animation: bounce 0.5s ease-in-out infinite;
}

.sparkle-overlay {
  position: absolute;
  top: -4px;
  right: calc(50% - 24px);
  font-size: 1.125rem;
  animation: sparkle 1.5s ease-in-out infinite;
}

.stats-label {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.625rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
  text-align: center;
}

.visitor-counter {
  background-color: var(--background);
  border: 2px solid var(--secondary);
  padding: 0.5rem 1rem;
  display: inline-block;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.visitor-counter span {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.125rem;
  color: var(--secondary);
  letter-spacing: 0.1em;
  animation: pulse 2s ease-in-out infinite;
}

.status-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.status-online {
  font-size: 0.75rem;
  color: var(--secondary);
}

.status-singing {
  font-size: 0.75rem;
  color: var(--accent);
}

.stats-bar {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 0.75rem;
}

.stats-pixel {
  width: 4px;
  height: 12px;
  background-color: var(--secondary);
  animation: pulse 2s ease-in-out infinite;
}

/* Mini Banner */
.mini-banner {
  text-align: center;
}

.mini-emojis {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.mini-emojis span {
  font-size: 1.25rem;
  animation: bounce 1s ease-in-out infinite;
}

.miku-forever {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.625rem;
  color: var(--primary);
}

/* Welcome Text */
.welcome-text {
  color: var(--secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.emoji-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.5rem;
}

/* Song Section */
.equalizer {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 1rem;
}

.eq-bar {
  width: 4px;
  background-color: var(--secondary);
  animation: pulse 0.3s ease-in-out infinite;
}

.song-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.song-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--secondary);
  padding: 0.5rem;
  background-color: var(--background);
  cursor: pointer;
  transition: background-color 0.3s;
}

.song-item:hover {
  background-color: hsla(180, 100%, 45%, 0.2);
}

.song-item:hover .song-icon {
  animation: spin 0.5s linear infinite;
}

.song-item:hover .play-icon {
  opacity: 1;
}

.song-icon {
  color: var(--accent);
}

.song-info {
  flex: 1;
}

.song-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.625rem;
  color: var(--secondary);
}

.song-artist {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.play-icon {
  color: var(--secondary);
  opacity: 0;
  transition: opacity 0.3s;
}

/* Now Playing */
.now-playing {
  margin-top: 1rem;
  border: 2px solid var(--secondary);
  padding: 0.5rem;
  background-color: var(--background);
}

.now-playing-label {
  font-size: 0.75rem;
  color: var(--secondary);
  text-align: center;
  margin-bottom: 0.5rem;
}

.now-playing-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.now-playing-marquee span {
  color: var(--secondary);
  font-size: 0.875rem;
}

.progress-bar {
  height: 8px;
  background-color: var(--muted);
  border: 1px solid var(--secondary);
  margin-top: 0.5rem;
}

.progress-fill {
  height: 100%;
  width: 45%;
  background-color: var(--secondary);
}

/* Under Construction */
.under-construction {
  text-align: center;
}

.construction-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.construction-content > span {
  font-size: 2.5rem;
}

.construction-sub {
  font-size: 0.75rem;
  color: var(--secondary);
  margin-top: 0.25rem;
}

.construction-emojis {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.5rem;
}

/* Two Column */
.two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .two-column {
    grid-template-columns: 1fr 1fr;
  }
}

/* Guestbook */
.guestbook-entries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.guestbook-entry {
  border: 1px solid var(--secondary);
  padding: 0.5rem;
  background-color: var(--background);
}

.entry-name {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.625rem;
  color: var(--primary);
}

.entry-message {
  font-size: 0.875rem;
  color: var(--secondary);
}

.entry-date {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.guestbook-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 0.5rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: none;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.625rem;
  cursor: pointer;
  transition: all 0.3s;
}

.guestbook-btn:hover {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

/* Facts List */
.facts-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.facts-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--secondary);
}

.fact-star {
  color: var(--accent);
}

.leek-emoji {
  text-align: center;
  margin-top: 1rem;
  font-size: 1.875rem;
}

/* GIF Divider */
.gif-divider {
  margin: 2rem 0;
  border-top: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  padding: 1rem 0;
}

/* Webring */
.webring {
  text-align: center;
}

.webring-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.webring-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-family: 'Press Start 2P', cursive;
  font-size: 0.625rem;
  cursor: pointer;
  transition: color 0.3s;
}

.webring-btn:hover {
  color: var(--primary);
}

.webring-label {
  color: var(--secondary);
  font-size: 0.875rem;
}

.webring-member {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.75rem;
}

.webring-bar {
  margin-top: 0.75rem;
}

.webring-pulse {
  width: 8px;
  height: 4px;
  background-color: var(--primary);
  animation: pulse 2s ease-in-out infinite;
}

/* Footer */
.footer {
  margin-top: 2rem;
  text-align: center;
  border-top: 2px dashed var(--primary);
  padding-top: 1.5rem;
}

.footer-emojis {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.footer-resolution {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.badge {
  font-size: 0.75rem;
  border: 2px solid;
  padding: 0.25rem 0.5rem;
}

.badge-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.badge-secondary {
  color: var(--secondary);
  border-color: var(--secondary);
}

.badge-accent {
  color: var(--accent);
  border-color: var(--accent);
}

.footer-pixels {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 1.5rem;
}

.footer-pixel {
  width: 8px;
  height: 8px;
  background-color: var(--primary);
  animation: pulse 2s ease-in-out infinite;
}

.bottom-marquee {
  margin-top: 2rem;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--background);
  border: 2px solid var(--primary);
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

/* ========================================
   VOCALOID MUSIC PLAYER STYLES
   ======================================== */

.music-player-box {
  background: linear-gradient(135deg, var(--muted) 0%, hsla(180, 20%, 8%, 1) 100%);
}

/* Player Visualization */
.player-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--background);
  border: 2px solid var(--secondary);
}

.player-gif-container {
  width: 150px;
  height: 150px;
  border: 3px solid var(--primary);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  box-shadow: 0 0 20px hsla(174, 100%, 50%, 0.3);
}

.player-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-gif-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dancing-miku {
  font-size: 3rem;
  animation: bounce 0.5s ease-in-out infinite;
}

.dancing-notes {
  font-size: 1.5rem;
  color: var(--secondary);
  animation: wave 0.5s ease-in-out infinite;
}

.player-gif-container.playing .dancing-miku {
  animation: bounce 0.3s ease-in-out infinite;
}

.player-gif-container.playing .dancing-notes {
  animation: wave 0.3s ease-in-out infinite;
}

/* Large Equalizer */
.equalizer-large {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  padding: 0 1rem;
}

.eq-bar-large {
  width: 6px;
  background: linear-gradient(to top, var(--primary), var(--accent));
  border-radius: 2px;
  transition: height 0.1s ease;
}

.eq-bar-large.paused {
  height: 4px !important;
  animation: none;
}

/* Now Playing Info */
.now-playing-info {
  text-align: center;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background: var(--background);
  border: 1px solid var(--secondary);
}

#now-playing-status {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.625rem;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

/* Player Controls */
.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.player-btn {
  width: 40px;
  height: 40px;
  background: var(--background);
  border: 2px solid var(--secondary);
  color: var(--secondary);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-btn:hover {
  background: var(--secondary);
  color: var(--background);
  box-shadow: 0 0 10px var(--secondary);
}

.player-btn.play-btn {
  width: 50px;
  height: 50px;
  font-size: 1.25rem;
  border-color: var(--primary);
  color: var(--primary);
}

.player-btn.play-btn:hover {
  background: var(--primary);
}

.player-btn.play-btn.playing {
  background: var(--primary);
  color: var(--background);
}

.player-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--background);
}

/* Progress Bar */
.player-progress-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

.time-display {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.5rem;
  color: var(--secondary);
  min-width: 35px;
}

.player-progress-bar {
  flex: 1;
  height: 12px;
  background: var(--background);
  border: 2px solid var(--secondary);
  cursor: pointer;
  position: relative;
}

.player-progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--primary), var(--accent));
  width: 0%;
  transition: width 0.1s linear;
}

.player-progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: var(--primary);
  border: 2px solid var(--secondary);
  border-radius: 2px;
  cursor: grab;
  left: 0%;
  opacity: 0;
  transition: opacity 0.2s;
}

.player-progress-bar:hover .player-progress-handle {
  opacity: 1;
}

/* Volume Control */
.volume-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.volume-icon {
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.volume-icon:hover {
  transform: scale(1.2);
}

.volume-bar {
  width: 100px;
  height: 8px;
  background: var(--background);
  border: 2px solid var(--secondary);
  cursor: pointer;
  position: relative;
}

.volume-fill {
  height: 100%;
  background: var(--secondary);
  width: 70%;
}

/* Playlist */
.playlist-container {
  margin-top: 1rem;
  border-top: 2px dashed var(--secondary);
  padding-top: 1rem;
}

.playlist-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.625rem;
  text-align: center;
  margin-bottom: 0.75rem;
  color: var(--primary);
}

.song-list .song-item {
  transition: all 0.2s;
}

.song-list .song-item.active {
  background: hsla(174, 100%, 50%, 0.2);
  border-color: var(--primary);
}

.song-list .song-item.active .song-icon {
  animation: spin 1s linear infinite;
  color: var(--primary);
}

.song-list .song-item .play-icon {
  opacity: 1;
  color: var(--secondary);
}

.song-list .song-item.active .play-icon {
  color: var(--primary);
}

/* Add Song Info */
.add-song-info {
  margin-top: 1rem;
  text-align: center;
  padding: 0.5rem;
  background: var(--background);
  border: 1px dashed var(--secondary);
}

.add-song-text {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ========================================
   GIF GALLERY STYLES
   ======================================== */

.gif-gallery-box {
  background: linear-gradient(135deg, hsla(330, 30%, 10%, 0.5) 0%, var(--muted) 100%);
}

.gif-gallery-intro {
  text-align: center;
  color: var(--secondary);
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.gif-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .gif-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gif-item {
  text-align: center;
}

.gif-frame {
  width: 100%;
  aspect-ratio: 1;
  border: 3px solid var(--secondary);
  overflow: hidden;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 3px 3px 0 var(--accent);
}

.gif-frame:hover {
  border-color: var(--primary);
  box-shadow: 0 0 15px var(--primary), 3px 3px 0 var(--accent);
  transform: scale(1.05);
}

.gif-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gif-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 2rem;
  animation: pulse 1s ease-in-out infinite;
}

.gif-fallback .spin-emoji {
  animation: spin 1s linear infinite;
}

.gif-caption {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.5rem;
  color: var(--accent);
  margin-top: 0.5rem;
  text-shadow: 0 0 5px var(--accent);
}

.gif-gallery-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--secondary);
}

.gallery-note {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ========================================
   VOCALOID CHARACTERS SECTION
   ======================================== */

.vocaloid-chars-box {
  background: linear-gradient(135deg, var(--muted) 0%, hsla(174, 20%, 8%, 0.8) 100%);
}

.vocaloid-chars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .vocaloid-chars {
    grid-template-columns: repeat(8, 1fr);
  }
}

.char-item {
  text-align: center;
  padding: 0.5rem;
  background: var(--background);
  border: 2px solid var(--secondary);
  transition: all 0.3s;
  cursor: pointer;
}

.char-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px hsla(174, 100%, 50%, 0.3);
}

.char-item:hover .char-icon {
  animation: bounce 0.5s ease-in-out infinite;
}

.char-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.char-name {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.4rem;
  color: var(--secondary);
}

.char-color {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.375rem;
  margin-top: 0.125rem;
}

/* Miku special hover */
.char-item.miku:hover {
  border-color: #39C5BB;
  box-shadow: 0 0 15px #39C5BB;
}

.char-item.rin:hover {
  border-color: #FFCC00;
  box-shadow: 0 0 15px #FFCC00;
}

.char-item.len:hover {
  border-color: #FFEE11;
  box-shadow: 0 0 15px #FFEE11;
}

.char-item.luka:hover {
  border-color: #FFB6C1;
  box-shadow: 0 0 15px #FFB6C1;
}

.char-item.kaito:hover {
  border-color: #3366CC;
  box-shadow: 0 0 15px #3366CC;
}

.char-item.meiko:hover {
  border-color: #DE3C3C;
  box-shadow: 0 0 15px #DE3C3C;
}

.char-item.gumi:hover {
  border-color: #6AB04C;
  box-shadow: 0 0 15px #6AB04C;
}

.char-item.ia:hover {
  border-color: #FFD1DC;
  box-shadow: 0 0 15px #FFD1DC;
}

/* ========================================
   ADDITIONAL ANIMATIONS
   ======================================== */

@keyframes eq-bounce {
  0%, 100% { height: 4px; }
  50% { height: var(--max-height, 30px); }
}