@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Press+Start+2P&display=swap');

body {
  background-color: #0e0e10;
  color: white;
  font-family: 'Inter', sans-serif;
}

.gradient-bg {
  background: linear-gradient(135deg, #9147ff 0%, #772ce8 50%, #00ff7f 100%);
}

.stream-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(145, 71, 255, 0.3);
}

.glow-effect {
  box-shadow: 0 0 15px rgba(145, 71, 255, 0.5);
}

.pixel-border {
  position: relative;
}

.pixel-border::before {
  content: "";
  position: absolute;
  top: -5px; left: -5px; right: -5px; bottom: -5px;
  border: 3px solid #00ff7f;
  border-image: repeating-linear-gradient(
    45deg,
    #00ff7f,
    #00ff7f 10px,
    #9147ff 10px,
    #9147ff 20px
  ) 5;
  z-index: -1;
}

.typewriter {
  overflow: hidden;
  border-right: .15em solid #00ff7f;
  white-space: nowrap;
  animation: typing 3.5s steps(40,end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to   { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50%      { border-color: #00ff7f }
}

.social-sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,15,20,0.8);
  backdrop-filter: blur(10px);
  border-radius: 0 12px 12px 0;
  padding: 16px 8px;
  z-index: 40;
  box-shadow: 4px 0 15px rgba(0,0,0,0.3);
  border-right: 2px solid #9147ff;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 8px 0;
  border-radius: 8px;
  color: white;
  transition: all .3s;
  position: relative;
}

.social-icon:hover {
  transform: translateX(5px) scale(1.1);
}

.social-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: #9147ff;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  margin-left: 10px;
}

.social-icon:hover::after {
  opacity: 1;
}

.hellcase-banner {
  background: linear-gradient(135deg,#FF5F1F 0%,#FF8C00 100%);
  animation: hellcase-pulse 2s infinite;
}

@keyframes hellcase-pulse {
  0%   { box-shadow:0 0 0 0 rgba(255,95,31,0.4); }
  70%  { box-shadow:0 0 0 10px rgba(255,95,31,0); }
  100% { box-shadow:0 0 0 0 rgba(255,95,31,0); }
}