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

body {
  background-color: #060000;
  color: #ffffff;
  font-family: "PT Serif", serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 1.5rem;
  overflow-x: hidden;
  position: relative;
}

/* --- Fullscreen Fixed Stranger Things Title Card Background --- */
.uiverse-title-pattern.fullscreen-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.uiverse-title-pattern.fullscreen-bg .bg-glow {
  width: 50rem;
  height: 50rem;
  opacity: 0.28;
}

.uiverse-title-pattern.fullscreen-bg .title-stage {
  transform: scale(1.4);
  opacity: 0.22; /* Subtle ambient backdrop so all UI remains readable */
}

/* --- Full Background Red Sparkles --- */
.sparkle-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.bg-sparkle {
  position: absolute;
  border-radius: 50%;
  background: #ff1a1a;
  box-shadow: 
    0 0 6px #ff0000, 
    0 0 12px rgba(255, 0, 0, 0.8),
    0 0 20px rgba(180, 0, 0, 0.5);
  animation: sparkleFloat var(--duration, 8s) infinite ease-in-out;
  opacity: 0;
}

.bg-sparkle.cross::before,
.bg-sparkle.cross::after {
  content: "";
  position: absolute;
  background: #ff4d4d;
  box-shadow: 0 0 6px #ff0000;
  border-radius: 50%;
}

.bg-sparkle.cross::before {
  width: 180%;
  height: 2px;
  top: 50%;
  left: -40%;
  transform: translateY(-50%);
}

.bg-sparkle.cross::after {
  width: 2px;
  height: 180%;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes sparkleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.3);
  }
  25% {
    opacity: var(--max-opacity, 0.75);
    transform: translateY(-20px) scale(1.1);
  }
  50% {
    opacity: 0.2;
    transform: translateY(-40px) scale(0.6);
  }
  75% {
    opacity: var(--max-opacity, 0.9);
    transform: translateY(-60px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.2);
  }
}

/* --- Click-To-Enter Overlay --- */
.enter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 0, 0, 0.96);
  backdrop-filter: blur(15px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.enter-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.enter-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.enter-glitch {
  font-family: "Cherry Bomb One", cursive;
  font-size: 3.5rem;
  letter-spacing: 0.1em;
  color: #ff0000;
  text-shadow: 0 0 10px #ff0000, 0 0 25px rgba(255, 0, 0, 0.8);
  user-select: none;
}

.enter-btn {
  background: transparent;
  border: 1px solid #ff1a1a;
  color: #ff8080;
  padding: 0.8rem 2rem;
  font-family: "PT Serif", serif;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.enter-btn:hover {
  background: #ff1a1a;
  color: #ffffff;
  box-shadow: 0 0 25px #ff0000;
  transform: scale(1.05);
}

/* --- Foreground Page Layout --- */
.viewport-wrapper {
  width: 100%;
  max-width: 1350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  margin: auto;
  position: relative;
  z-index: 10;
}

/* Top Row: Centered Avatar */
.top-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-badge {
  position: absolute;
  top: -12px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 14px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-family: "PT Serif", serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(15, 0, 0, 0.95);
  border: 1px solid #4d0000;
  color: #aaa;
}

.status-badge.offline .status-dot {
  width: 7px;
  height: 7px;
  background-color: #777;
  border-radius: 50%;
}

.status-badge.live {
  border-color: #ff0000;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
}

.status-badge.live .status-dot {
  width: 7px;
  height: 7px;
  background-color: #ff0000;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff0000;
}

.avatar-glow {
  width: 135px;
  height: 135px;
  border-radius: 50%;
  border: 3px solid #ff1a1a;
  box-shadow: 0 0 26px rgba(255, 0, 0, 0.6), inset 0 0 15px rgba(255, 0, 0, 0.4);
  overflow: hidden;
  background: #110000;
}

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

/* Center Content */
.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  gap: 1rem;
}

.hero-subtext {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  letter-spacing: 0.08em;
  color: #ff4d4d;
  text-shadow: 0 0 10px rgba(255, 50, 50, 0.5);
  max-width: 850px;
  line-height: 1.5;
}

.stream-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem;
  background: rgba(22, 0, 0, 0.9);
  border: 1px solid #6b0707;
  box-shadow: 0 0 16px rgba(150, 0, 0, 0.5);
  border-radius: 35px;
  padding: 0.5rem 0.6rem 0.5rem 1.4rem;
  backdrop-filter: blur(8px);
}

.pill-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: #ff9999;
  letter-spacing: 0.05em;
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
}

.pill-dot.live {
  background: #00ff55;
  box-shadow: 0 0 8px #00ff55;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(70, 0, 0, 0.9);
  border: 1px solid #990000;
  border-radius: 25px;
  padding: 0.5rem 1.1rem;
  color: #ffffff;
  text-decoration: none;
  font-family: "PT Serif", serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.pill-btn:hover {
  background: #b30000;
  box-shadow: 0 0 14px #ff0000;
  transform: scale(1.03);
}

.pill-kick-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

/* Social Media Shelf */
.socials-shelf {
  width: 100%;
  max-width: 1300px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(0.4rem, 0.9vw, 0.9rem);
}

.social-pill {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #f0f0f0;
  border-radius: 12px;
  padding: 0.85rem 0.4rem;
  color: #0d0000;
  text-decoration: none;
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-size: clamp(0.7rem, 0.82vw, 0.88rem);
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.social-pill img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  flex-shrink: 0;
}

.social-pill:hover {
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 0 16px rgba(255, 30, 30, 0.8);
}

/* Dual-Track Music Player Widget with Volume Slider */
.bottom-player-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.main {
  background-color: rgba(15, 2, 2, 0.92);
  border: 1px solid #7a0000;
  box-shadow: 0 0 25px rgba(180, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  padding: 1.2em;
  border-radius: 18px;
  width: 440px;
  user-select: none;
}

.currentplaying {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
}

.header-left {
  display: flex;
  align-items: center;
}

.spotify {
  width: 32px;
  height: 32px;
  margin-right: 0.7em;
  filter: drop-shadow(0 0 6px #ff1a1a);
}

.heading {
  color: #ffcccc;
  font-size: 1.1em;
  font-weight: bold;
  font-family: "Cherry Bomb One", cursive;
  letter-spacing: 0.05em;
}

.volume-box {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: #170303;
  padding: 0.35rem 0.6rem;
  border-radius: 20px;
  border: 1px solid #4a0000;
}

.vol-icon {
  font-size: 0.8rem;
}

#volume-slider {
  width: 65px;
  height: 4px;
  accent-color: #ff1a1a;
  cursor: pointer;
}

#volume-display {
  font-family: "PT Serif", serif;
  font-size: 0.75rem;
  color: #ff8080;
  min-width: 25px;
}

.track-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.loader {
  display: flex;
  flex-direction: row;
  height: 4.5em;
  padding: 0 1em;
  transform: rotate(180deg);
  justify-content: right;
  align-items: center;
  border-radius: 12px;
  background-color: #170303;
  border: 1px solid #4a0000;
  transition: .3s ease-in-out;
}

.loader:hover {
  cursor: pointer;
  background-color: #240505;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
}

.loader.active-track {
  border-color: #ff1a1a;
  background-color: #200404;
}

.song {
  position: relative;
  transform: rotate(180deg);
  margin-right: 1.2em;
  color: #ffffff;
  align-self: center;
}

.song .name {
  font-family: "Cherry Bomb One", cursive;
  font-size: 1.05em;
  letter-spacing: 0.05em;
}

.song .artist {
  font-family: "PT Serif", serif;
  font-size: 0.75em;
  color: #ff8080;
}

.albumcover {
  position: relative;
  margin-right: 1em;
  height: 44px;
  width: 44px;
  background-color: #2b0000;
  border: 1px solid #ff1a1a;
  align-self: center;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(180deg);
}

.loading {
  display: flex;
  align-items: center;
  margin-top: 0.2em;
  margin-left: 0.4em;
}

.load {
  width: 3px;
  height: 33px;
  background-color: #ff1a1a;
  box-shadow: 0 0 6px #ff0000;
  animation: 1s move6 infinite;
  border-radius: 5px;
  margin: 0.12em;
}

.loading.paused .load {
  animation-play-state: paused;
  height: 6px;
}

.load:nth-child(1) { animation-delay: 0.2s; }
.load:nth-child(2) { animation-delay: 0.4s; }
.load:nth-child(3) { animation-delay: 0.6s; }

.play {
  position: relative;
  left: 0.35em;
  height: 1.6em;
  width: 1.6em;
  clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);
  background-color: #ffffff;
  transform: rotate(-90deg);
  align-self: center;
  transition: all 0.2s ease;
}

.play.is-playing {
  clip-path: none;
  background: transparent;
  border-left: 5px solid #ffffff;
  border-right: 5px solid #ffffff;
  width: 15px;
  height: 16px;
  transform: none;
  left: 0.2em;
}

@keyframes move6 {
  0% { height: 0.2em; }
  25% { height: 0.8em; }
  50% { height: 1.6em; }
  100% { height: 0.2em; }
}

/* --- Stranger Things Background Component Styling --- */
.uiverse-title-pattern {
  --reset-time: 10s;
  background-color: transparent;
  user-select: none;
  box-sizing: border-box;
}

.uiverse-title-pattern .bg-glow,
.uiverse-title-pattern .bg-noise,
.uiverse-title-pattern .dust-layer,
.uiverse-title-pattern .doodle-layer,
.uiverse-title-pattern .doodle,
.uiverse-title-pattern .title-stage,
.uiverse-title-pattern .neon-line,
.uiverse-title-pattern .neon-line-inner,
.uiverse-title-pattern .main-title,
.uiverse-title-pattern .letter {
  box-sizing: border-box;
}

.uiverse-title-pattern .bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle, rgba(180, 0, 0, 0.25) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  animation: glowBreathing 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

.uiverse-title-pattern .bg-noise {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.25;
  z-index: 2;
  pointer-events: none;
  animation: noiseJitter 0.4s infinite;
}

.uiverse-title-pattern .dust-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.uiverse-title-pattern .dust-layer::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 3rem 4rem 1px rgba(255, 0, 0, 0.6), 18rem 7rem 1px rgba(255, 0, 0, 0.8);
  animation: dustDrift 20s linear infinite;
}

.uiverse-title-pattern .title-stage {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.uiverse-title-pattern .main-title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  color: transparent;
  line-height: 0.9;
  font-size: clamp(4.5rem, 9vw, 9.5rem);
  letter-spacing: -0.05em;
  margin-bottom: 0.1em;
}

.uiverse-title-pattern .main-title .letter:first-child,
.uiverse-title-pattern .main-title .letter:last-child {
  font-size: 1.25em;
}

.uiverse-title-pattern .letter {
  position: relative;
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.5);
  -webkit-text-stroke: 2.2px #f00;
  text-shadow: 0 0 6px rgba(255, 0, 0, 0.9), 0 0 16px rgba(255, 0, 0, 0.7), 0 0 35px rgba(200, 0, 0, 0.5);
  animation: letterIntro var(--reset-time) cubic-bezier(0.2, 0.8, 0.2, 1) infinite,
             neonFlicker var(--reset-time) linear infinite;
  animation-delay: var(--d), 0s;
}

.uiverse-title-pattern .letter::before,
.uiverse-title-pattern .letter::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  pointer-events: none;
}

.uiverse-title-pattern .letter::before {
  -webkit-text-stroke: 1.2px rgba(255, 60, 60, 0.75);
  transform: translate(2px, -2px) rotate(-1.5deg);
  z-index: -1;
  animation: sketchJitter 0.18s infinite alternate;
}

.uiverse-title-pattern .letter::after {
  -webkit-text-stroke: 1.2px rgba(200, 0, 0, 0.55);
  transform: translate(-2px, 1px) rotate(1.5deg);
  z-index: -2;
  animation: sketchJitter2 0.2s infinite alternate;
}

.uiverse-title-pattern .neon-line {
  position: relative;
  width: 0%;
  height: 2.5px;
  background: transparent;
  margin: 0.45em 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lineReveal var(--reset-time) cubic-bezier(0.8, 0, 0.2, 1) infinite;
}

.uiverse-title-pattern .neon-line.top-line { margin-bottom: 0.7em; }
.uiverse-title-pattern .neon-line.bottom-line { margin-top: 0.45em; }

.uiverse-title-pattern .neon-line-inner {
  width: 100%;
  height: 100%;
  border-top: 1.5px solid #f00;
  border-bottom: 1.5px solid #f00;
  box-shadow: 0 0 6px #f00, 0 0 12px #f00, 0 0 22px #a00, inset 0 0 2px #f00;
}

.uiverse-title-pattern .neon-line-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px dashed rgba(255, 0, 0, 0.55);
  transform: rotate(0.2deg);
  animation: doodleJitter 0.2s infinite alternate;
}

.uiverse-title-pattern .doodle-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.uiverse-title-pattern .doodle {
  position: absolute;
  opacity: 0;
  animation: doodleFadeBlink 5s infinite;
}

.uiverse-title-pattern .doodle.spark { width: 12px; height: 12px; }
.uiverse-title-pattern .doodle.spark::before,
.uiverse-title-pattern .doodle.spark::after {
  content: "";
  position: absolute;
  background: #f00;
  box-shadow: 0 0 8px #f00;
  border-radius: 50%;
}
.uiverse-title-pattern .doodle.spark::before { width: 100%; height: 2px; top: 5px; left: 0; }
.uiverse-title-pattern .doodle.spark::after { width: 2px; height: 100%; top: 0; left: 5px; }

.uiverse-title-pattern .doodle.scratch {
  width: 18px;
  height: 2px;
  background: transparent;
  border-top: 2px solid #f00;
  border-bottom: 1px solid #a00;
  transform: rotate(-35deg);
  box-shadow: 0 0 5px #f00;
}

.uiverse-title-pattern .doodle.dot {
  width: 4px;
  height: 4px;
  background: #f00;
  border-radius: 50%;
  box-shadow: 0 0 9px #f00;
}

.uiverse-title-pattern .d1 { animation-delay: 3s; }
.uiverse-title-pattern .d2 { animation-delay: 4.2s; }
.uiverse-title-pattern .d3 { animation-delay: 3.5s; }
.uiverse-title-pattern .d4 { animation-delay: 4.8s; }
.uiverse-title-pattern .d5 { animation-delay: 3.9s; }
.uiverse-title-pattern .d6 { animation-delay: 5.1s; }

@keyframes letterIntro {
  0% { opacity: 0; filter: blur(12px); transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.5); }
  30%, 68% { opacity: 1; filter: blur(0); transform: translate(0, 0) rotate(0deg) scale(1); }
  92%, 100% { opacity: 0; filter: blur(12px); transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.5); }
}

@keyframes lineReveal {
  0%, 16% { width: 0%; opacity: 0; }
  36%, 68% { width: 110%; opacity: 1; }
  84%, 100% { width: 0%; opacity: 0; }
}

@keyframes glowBreathing {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

@keyframes neonFlicker {
  0%, 30%, 62%, 100% { opacity: 1; }
  20%, 64% { opacity: 0.35; }
  92%, 100% { opacity: 0; }
}

@keyframes doodleJitter {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(1px, -1px) rotate(0.3deg); }
  100% { transform: translate(-1px, 1px) rotate(-0.3deg); }
}

@keyframes sketchJitter {
  0% { transform: translate(2px, -2px) rotate(-1.5deg); }
  100% { transform: translate(3px, -1px) rotate(-1deg); }
}

@keyframes sketchJitter2 {
  0% { transform: translate(-2px, 1px) rotate(1.5deg); }
  100% { transform: translate(-3px, 2px) rotate(1deg); }
}

@keyframes noiseJitter {
  0% { background-position: 0 0; }
  50% { background-position: 2px -2px; }
  100% { background-position: -2px 2px; }
}

@keyframes dustDrift {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-12rem) translateX(5rem); }
}

@keyframes doodleFadeBlink {
  0%, 10%, 100% { opacity: 0; transform: scale(0.5); }
  5% { opacity: 1; transform: scale(1.2); }
}

/* Responsive Breakpoints */
@media (max-width: 950px) {
  .socials-shelf { flex-wrap: wrap; justify-content: center; }
  .social-pill { flex: 1 1 calc(25% - 0.6rem); }
}

@media (max-width: 600px) {
  .social-pill { flex: 1 1 calc(50% - 0.6rem); }
  .main { width: 100%; max-width: 340px; }
}