* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Orbitron", sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: background 0.6s ease, color 0.6s ease;
  background: #0d1117;
  color: #ffffff;
}
.controls {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.controls button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: #ffffffcc;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.controls button:hover { background: #fff; }
.music-control {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 20;
}
.music-control button {
  padding: 10px 20px;
  border-radius: 50px;
  background: #ffffffbb;
  border: none;
  cursor: pointer;
  font-weight: bold;
}
#particles {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.wrapper {
  text-align: center;
  z-index: 5;
}
.logo {
  width: 260px;
  max-width: 75vw;
  filter: drop-shadow(0 0 18px rgba(0,0,0,0.6));
  transition: transform 1s ease;
}
.text-logo {
  margin-top: 1rem;
  width: 400px;
  max-width: 80vw;
}
.splash {
  font-size: 1rem;
  margin-top: 0.5rem;
  opacity: 0.8;
  animation: pulse 3s infinite alternate;
}
@keyframes pulse { from { opacity: 0.4; } to { opacity: 1; } }
body.dark { background: #0c0f16; color: #e6e6e6; }
body.animated .logo { animation: spin 6s linear infinite; }
@keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
body.studio { background: #05070d; color: #b0faff; }
body.studio::before {
  content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.04),
    rgba(255,255,255,0.04) 1px,
    transparent 2px, transparent 3px
  );
  z-index: 2;
}
body.studio .logo,
body.studio .text-logo {
  filter: drop-shadow(0 0 25px rgba(0,255,255,0.4));
}
body.pixel {
  background: #1a1a1a;
  color: #61ff61;
  font-family: "Press Start 2P", monospace;
  image-rendering: pixelated;
}
body.pixel .logo,
body.pixel .text-logo { filter: none; }
body.parallax {
  background: linear-gradient(180deg, #0b0e12 0%, #141820 100%);
  background-size: cover;
  background-attachment: fixed;
}