body {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: 'Space Mono', 'Courier New', monospace !important;
  margin: 0;
  padding: 30px;
  line-height: 1.6;
}

/* TERMINAL TEXT STYLES */
.intro-terminal-text {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #b5b5b5 !important;
  text-align: left !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 25px;
}

.about-terminal-text {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  text-align: left !important;
  letter-spacing: 0.5px !important;
  margin-top: 30px;
  margin-bottom: 25px;
}

.terminal-bracket { color: #858585 !important; }
.terminal-tag, .terminal-slash { color: #ff0055 !important; font-weight: bold !important; }
.terminal-list { color: #ffffff !important; padding-left: 5px; }
.terminal-explanation { color: #858585 !important; font-size: 12px !important; display: block; margin-top: 2px; }

.terminal-text-right {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  text-align: right !important;
  letter-spacing: 0.5px !important;
  margin-top: 40px;
}

/* PLAYER HEADER */
.player-terminal-header {
  font-size: 11px !important;
  color: #858585 !important;
  letter-spacing: 2px !important;
  text-align: left !important;
  margin-bottom: 10px !important;
}

.player-box {
  margin-bottom: 25px;
}

/* SOCIAL KACHELN GRID */
.social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

.social-tile {
  position: relative !important;
  display: inline-block !important;
  width: 80px !important;
  height: 80px !important;
  box-sizing: border-box !important;
}

.social-tile img {
  border: 1px solid rgba(133, 133, 133, 0.4) !important;
  padding: 10px !important;
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  background: rgba(0, 0, 0, 0.8) !important;
  transition: all 0.25s ease-in-out !important;
  box-sizing: border-box !important;
  opacity: 0.6;
}

/* HUD LABELS (YT, SC, BC...) */
.social-tile::after {
  position: absolute !important;
  top: 5px !important;
  left: 6px !important;
  font-size: 9px !important;
  font-weight: bold !important;
  color: #A6A6A6 !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.tile-yt::after { content: "YT"; }
.tile-sc::after { content: "SC"; }
.tile-bc::after { content: "BC"; }
.tile-ng::after { content: "NG"; }
.tile-ig::after { content: "IG"; }
.tile-rl::after { content: "RL"; }

/* INDIVIDUELLE FARBEN BEIM HOVER */
.tile-yt:hover img { opacity: 1; border-color: #FF0026 !important; filter: drop-shadow(0 0 10px #FF0026) !important; }
.tile-sc:hover img { opacity: 1; border-color: #ff5500 !important; filter: drop-shadow(0 0 10px #ff5500) !important; }
.tile-bc:hover img { opacity: 1; border-color: #629aa9 !important; filter: drop-shadow(0 0 10px #629aa9) !important; }
.tile-ng:hover img { opacity: 1; border-color: #ffa300 !important; filter: drop-shadow(0 0 10px #ffa300) !important; }
.tile-ig:hover img { opacity: 1; border-color: #ff0080 !important; filter: drop-shadow(0 0 10px #ff0080) !important; }
.tile-rl:hover img { opacity: 1; border-color: #ff3300 !important; filter: drop-shadow(0 0 10px #ff3300) !important; }