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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0c10;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}

#videoPlayer {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.2) contrast(1.1) saturate(1.2);
  transition: opacity 2.2s ease-in-out, filter 2.2s ease-in-out;
  z-index: 1;
  pointer-events: none;
}

#click-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 10, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(20px);
  transition: opacity 1.8s ease, backdrop-filter 1.8s ease;
  flex-direction: column;
}

#big-hua {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 250px;
  color: #0a2e5e;
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
  letter-spacing: 12px;
  white-space: nowrap;
  z-index: 5;
  filter: drop-shadow(0 0 10px #0a2e5e);
  mix-blend-mode: lighten;
  animation: huaBoxPulse 2.5s infinite;
}

@keyframes huaBoxPulse {
  0%, 100% { opacity: 0.15; filter: drop-shadow(0 0 10px #0a2e5e); }
  25% { opacity: 0.35; filter: drop-shadow(0 0 18px #1a4ea0); }
  50% { opacity: 0.25; filter: drop-shadow(0 0 15px #2a6ecf); }
  75% { opacity: 0.3; filter: drop-shadow(0 0 17px #1a4ea0); }
}

#click-overlay p {
  font-size: 24px;
  color: rgba(50, 100, 180, 0.9);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(80, 150, 220, 0.7);
  animation: textPulse 2.8s ease-in-out infinite alternate;
  position: relative;
  z-index: 10;
}

#click-overlay.fade-away {
  opacity: 0;
  backdrop-filter: blur(0);
  pointer-events: none;
}

.hidden { display: none; }

.content-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  z-index: 20;
}

.profile-box {
  width: 420px;
  padding: 35px 70px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(30, 50, 100, 0.2);
  box-shadow: 0 0 20px rgba(10, 20, 40, 0.5), inset 0 0 25px rgba(30, 50, 100, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 1.2s ease;
  animation: boxGlowPulse 5s ease-in-out infinite alternate;
}

@keyframes boxGlowPulse {
  0% { box-shadow: 0 0 10px rgba(10,20,40,0.3), inset 0 0 20px rgba(30,50,100,0.05); }
  50% { box-shadow: 0 0 22px rgba(30,60,120,0.5), inset 0 0 28px rgba(50,90,150,0.15); }
  100% { box-shadow: 0 0 10px rgba(10,20,40,0.3), inset 0 0 20px rgba(30,50,100,0.05); }
}

.profile-box.visible { opacity: 1; }

.profile-container { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }

.profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(50, 100, 180, 0.4);
  box-shadow: 0 0 25px rgba(50,100,180,0.15), 0 0 50px rgba(10,20,40,0.2);
}

.name-text { font-size: 30px; color: #cfe0f5; font-weight: 700; letter-spacing: 4px; text-shadow: 0 0 8px rgba(50,120,200,0.5); }

.description-text { font-size: 16px; color: #a0bcd6; font-weight: 500; letter-spacing: 2px; text-shadow: 0 0 6px rgba(50,100,180,0.3); }

.icon-row { margin-top: 18px; display: flex; gap: 16px; align-items: center; position: relative; }

.roblox-logo, .discord-logo {
  width: 32px;
  height: 32px;
  cursor: pointer;
  opacity: 0.9;
  transition: transform 0.25s, opacity 0.25s, filter 0.3s;
  animation: emberGlow 4s ease-in-out infinite;
}

.roblox-logo:hover, .discord-logo:hover { transform: scale(1.1); opacity: 1; }

@keyframes emberGlow {
  0%,100% { filter: brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(1500%) hue-rotate(200deg) brightness(55%) contrast(120%) drop-shadow(0 0 6px rgba(50,60,120,0.5)); }
  50% { filter: brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(1500%) hue-rotate(200deg) brightness(85%) contrast(130%) drop-shadow(0 0 14px rgba(80,100,200,0.8)); }
}

#copied-text { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 13px; color: white; opacity: 0; transition: opacity 0.3s; text-shadow: 0 0 6px rgba(50,100,180,0.6); }

.audio-bar {
  position: fixed; top: 15px; left: 15px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: rgba(5,5,20,0.65);
  padding: 8px 14px;
  border-radius: 30px;
  box-shadow: 0 0 18px rgba(50,100,180,0.25), inset 0 0 8px rgba(50,100,180,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(50,80,160,0.3);
}

.audio-bar button {
  background: none; border: none; color: rgba(80,150,220,0.85); font-size: 16px; cursor: pointer;
  text-shadow: 0 0 8px rgba(50,100,180,0.6);
  transition: transform 0.2s, filter 0.2s;
}

.audio-bar button:hover { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(80,150,220,0.8)); }

.audio-bar input[type=range] {
  -webkit-appearance: none; width: 90px; height: 5px; background: rgba(30,30,50,0.6);
  border-radius: 4px; outline: none;
}

.audio-bar input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #2a5cff;
  box-shadow: 0 0 8px rgba(50,100,200,0.8); cursor: pointer; transition: transform 0.2s;
}

.audio-bar input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); }

@keyframes textPulse { 0% { opacity:0.6; transform: scale(1); } 100% { opacity:1; transform: scale(1.05); } }

.hidden { display: none; }