* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background-color: #030105;
  color: #dfd4ec;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  font-family: 'JetBrains Mono', monospace;
}

/* 1. Full-Screen Entry Overlay */
#entry-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(16, 6, 24, 0.96) 0%, rgba(2, 1, 3, 1) 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.5s ease;
}

.glitch-enter {
  font-size: 1.15rem;
  color: #c77dff;
  letter-spacing: 4px;
  text-shadow: 0 0 16px rgba(199, 125, 255, 0.8);
  animation: pulseGlitch 2s infinite ease-in-out;
}

@keyframes pulseGlitch {
  0%, 100% { opacity: 0.4; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.03); }
}

.fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Audio Sound Button */
#sound-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  background: rgba(14, 8, 22, 0.65);
  border: 1px solid rgba(157, 78, 221, 0.35);
  color: #c77dff;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

#sound-toggle:hover {
  background: rgba(32, 15, 48, 0.85);
  border-color: #c77dff;
  transform: translateY(-2px);
}

.audio-vis {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.audio-vis .v-bar {
  width: 2px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: height 0.2s ease;
}

.audio-vis.playing .v-bar {
  animation: bounceVis 0.65s ease-in-out infinite alternate;
}

.audio-vis.playing .v-bar:nth-child(1) { animation-delay: 0.1s; }
.audio-vis.playing .v-bar:nth-child(2) { animation-delay: 0.3s; }
.audio-vis.playing .v-bar:nth-child(3) { animation-delay: 0.2s; }
.audio-vis.playing .v-bar:nth-child(4) { animation-delay: 0.4s; }

@keyframes bounceVis {
  0% { height: 3px; }
  100% { height: 12px; }
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(14, 6, 22, 0.9);
  border: 1px solid #9d4edd;
  color: #e0aaff;
  padding: 8px 20px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(157, 78, 221, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 200;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 2. Background Video */
.video-bg-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(125%) brightness(26%) grayscale(65%);
}

.grain-overlay {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 20%, rgba(3, 1, 5, 0.97) 90%);
  pointer-events: none;
}

/* 3. Sleek Chamfered Glass Card */
.profile-frame {
  position: relative;
  z-index: 10;
  width: 92%;
  max-width: 380px;
  background: rgba(13, 8, 20, 0.52);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 24px 22px 28px 22px;
  text-align: center;
  border: 1px solid rgba(157, 78, 221, 0.28);
  clip-path: polygon(
    14px 0%, calc(100% - 14px) 0%, 
    100% 14px, 100% calc(100% - 14px), 
    calc(100% - 14px) 100%, 14px 100%, 
    0% calc(100% - 14px), 0% 14px
  );
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), inset 0 0 30px rgba(157, 78, 221, 0.08);
  cursor: grab;
  touch-action: none;
}

.profile-frame.dragging {
  cursor: grabbing;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.98), 0 0 24px rgba(157, 78, 221, 0.35);
}

.drag-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  cursor: grab;
}

.grip-dots {
  display: flex;
  gap: 4px;
}

.grip-dots span {
  width: 4px;
  height: 4px;
  background: #7a5a92;
  border-radius: 50%;
  opacity: 0.6;
}

.corner-bracket {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: #9d4edd;
  pointer-events: none;
  opacity: 0.8;
}

.top-left { top: 6px; left: 6px; border-top: 2px solid #9d4edd; border-left: 2px solid #9d4edd; }
.top-right { top: 6px; right: 6px; border-top: 2px solid #9d4edd; border-right: 2px solid #9d4edd; }
.bottom-left { bottom: 6px; left: 6px; border-bottom: 2px solid #9d4edd; border-left: 2px solid #9d4edd; }
.bottom-right { bottom: 6px; right: 6px; border-bottom: 2px solid #9d4edd; border-right: 2px solid #9d4edd; }

/* 4. Typewriter Box */
.typewriter-box {
  min-height: 24px;
  margin-bottom: 16px;
}

#typewriter-text {
  font-family: 'Special Elite', monospace;
  font-size: 0.86rem;
  color: #c77dff;
  text-shadow: 0 0 10px rgba(199, 125, 255, 0.5);
  letter-spacing: 0.5px;
}

.cursor {
  font-weight: bold;
  color: #9d4edd;
  animation: blink 0.9s infinite;
}

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

/* 5. Avatar Box */
.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}

.avatar-hex {
  position: relative;
  width: 70px;
  height: 70px;
  margin-bottom: 12px;
  background: rgba(5, 2, 8, 0.8);
  padding: 3px;
  clip-path: polygon(
    10px 0%, calc(100% - 10px) 0%, 
    100% 10px, 100% calc(100% - 10px), 
    calc(100% - 14px) 100%, 10px 100%, 
    0% calc(100% - 10px), 0% 10px
  );
  border: 1px solid rgba(157, 78, 221, 0.4);
  box-shadow: 0 0 15px rgba(157, 78, 221, 0.2);
}

#avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(
    8px 0%, calc(100% - 8px) 0%, 
    100% 8px, 100% calc(100% - 8px), 
    calc(100% - 8px) 100%, 8px 100%, 
    0% calc(100% - 8px), 0% 8px
  );
  pointer-events: none;
}

#status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #06020c;
}

.status-ingame { background-color: #90ba3c; box-shadow: 0 0 8px #90ba3c; }
.status-online { background-color: #57cbde; box-shadow: 0 0 8px #57cbde; }
.status-idle { background-color: #f0b232; }
.status-dnd { background-color: #f23f43; }
.status-offline { background-color: #6b5b7b; }

.username {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  letter-spacing: 2.5px;
  color: #f5edff;
  text-transform: uppercase;
}

.status-tracker {
  font-size: 0.72rem;
  color: #9e85b3;
  margin-top: 5px;
  letter-spacing: 0.8px;
}

/* 6. Spotify Card */
.spotify-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(20, 10, 30, 0.8) 0%, rgba(10, 5, 16, 0.85) 100%);
  border: 1px solid rgba(157, 78, 221, 0.35);
  padding: 10px 14px;
  margin: 14px auto 0 auto;
  border-radius: 10px;
  width: 100%;
  max-width: 320px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(157, 78, 221, 0.08);
}

.spotify-album-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

#spotify-art {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.spotify-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  flex-grow: 1;
}

.spotify-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  color: #1ed760;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.spotify-badge i {
  font-size: 0.75rem;
}

.spotify-title {
  font-size: 0.78rem;
  color: #f7f1ff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spotify-sub {
  font-size: 0.66rem;
  color: #a48bb8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
  flex-shrink: 0;
}

.eq-bars .bar {
  width: 2.5px;
  background: #1ed760;
  border-radius: 1px;
  animation: bounceBar 0.8s ease-in-out infinite alternate;
}

.eq-bars .bar:nth-child(1) { animation-delay: 0.1s; }
.eq-bars .bar:nth-child(2) { animation-delay: 0.3s; }
.eq-bars .bar:nth-child(3) { animation-delay: 0.2s; }
.eq-bars .bar:nth-child(4) { animation-delay: 0.4s; }

@keyframes bounceBar {
  0% { height: 2px; }
  100% { height: 14px; }
}

/* 7. Badges */
.social-badges {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

.badge-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(22, 12, 34, 0.6);
  border: 1px solid rgba(157, 78, 221, 0.3);
  color: #c77dff;
  text-decoration: none;
  font-size: 1.25rem;
  clip-path: polygon(
    8px 0%, calc(100% - 8px) 0%, 
    100% 8px, 100% calc(100% - 8px), 
    calc(100% - 8px) 100%, 8px 100%, 
    0% calc(100% - 8px), 0% 8px
  );
  transition: all 0.22s ease;
  cursor: pointer;
}

.badge-link:hover {
  transform: translateY(-3px) scale(1.06);
  background: rgba(48, 20, 75, 0.85);
  border-color: #c77dff;
  color: #ffffff;
  box-shadow: 0 0 18px rgba(199, 125, 255, 0.6);
}

.badge-link:active {
  transform: scale(0.92);
}

/* Mouse Sparkles */
.cursor-particle {
  position: fixed;
  pointer-events: none;
  width: 4px;
  height: 4px;
  background: #c77dff;
  border-radius: 50%;
  box-shadow: 0 0 8px #9d4edd;
  z-index: 9998;
  animation: fadeParticle 0.6s forwards ease-out;
}

@keyframes fadeParticle {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.1) translateY(10px); }
}