/* bloodboiler – 1:1-Nachbau des GUNS.lol-Profils (Original-Masse uebernommen) */

:root {
  --text-color: #ffffff;
  --text-darker: rgba(255, 255, 255, 0.5);
  --icon-color: #ffffff;
  --background-color: #171717;
  --container-color: rgba(0, 0, 0, 0.01);
  --container-blur: 20px;
  --container-gradient: linear-gradient(25deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.01));
  --container-border: 4px solid rgba(0, 0, 0, 0.3);
  --container-radius: 70px;
  --container-width: 44rem;
  --container-padding: 26px;
  --avatar-border: 2px solid rgba(0, 0, 0, 0.3);
  --color-username-glow: 0px 0px 16.5px #ffffff;
  --panel-background: rgba(0, 0, 0, 0.2);
  --panel-border: 2px solid rgba(0, 0, 0, 0.1);
  --panel-radius: 25px;
  --badge-container-background: rgba(0, 0, 0, 0.2);
  --badge-container-border: 2px solid rgba(0, 0, 0, 0.04);
  --progress-bar-full: rgba(255, 255, 255, 0.3);
  --progress-bar-playing: #ffffff;
  --control-text-color: rgba(255, 255, 255, 0.7);
  --tooltip-bg: rgba(20, 20, 20, 0.39);
  --tooltip-border: 1px solid rgba(26, 26, 26, 0.2);
}

* {
  cursor: url(assets/cursor.png) 16 16, auto !important;
  box-sizing: border-box;
}

html {
  direction: ltr;
}

body {
  margin: 0;
  background: rgb(10, 10, 10);
  color: var(--text-color);
  font-family: Panchang, Onest, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection {
  background: #ffffff;
  color: #171717;
}

/* ---------- Hintergrund ---------- */

.bg-image,
.bg-color,
.bg-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bg-image {
  inset: -51px -78px;
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: cover;
  z-index: -1;
}

.bg-color {
  background: var(--background-color);
  z-index: -2;
}

.bg-overlay {
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
}

/* ---------- Lade-Overlay ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.776);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.loader-glyph {
  font-weight: 600;
  font-size: 23px;
  color: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}

.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

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

/* ---------- Ton-Toggle (oben links) ---------- */

.sound-toggle {
  position: fixed;
  top: 28px;
  left: 28px;
  z-index: 40;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sound-toggle svg {
  width: 26px;
  height: 26px;
}

.sound-toggle:hover {
  transform: scale(1.12);
}

.sound-toggle.off {
  opacity: 0.45;
}

/* ---------- Seite ---------- */

.page {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 50px 0 60px;
}

.container {
  position: relative;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--container-padding);
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: var(--container-color);
  background-image: var(--container-gradient);
  background-clip: border-box;
  background-origin: border-box;
  backdrop-filter: blur(var(--container-blur));
  -webkit-backdrop-filter: blur(var(--container-blur));
}

/* Inhalt der Karte – 3D-Tilt (wie Original: perspective 1000px) */
.inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- Kopf ---------- */

.head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.avatar-wrap {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.avatar {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--avatar-border);
}

.head-main {
  flex: 1 1 auto;
  min-width: 0;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 41px;
}

.name-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.name {
  font-size: 29px;
  font-weight: 600;
  line-height: 41px;
  color: var(--text-color);
  text-shadow: var(--color-username-glow);
  white-space: nowrap;
}

.name .caret {
  font-weight: 400;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

/* ---------- Badges (mit Original-Farben) ---------- */

.badges {
  display: flex;
  align-items: center;
  gap: 5.5px;
  flex-wrap: wrap;
}

.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 18px;
  padding: 0 3px;
  border-radius: 25px;
  background: var(--badge-container-background);
  border: var(--badge-container-border);
  transition: transform 0.2s ease;
}

.badge:hover {
  transform: translateY(-2px);
}

.badge svg {
  width: 18px;
  height: 18px;
  display: block;
}

.badge-1 svg { color: rgb(167, 73, 221); filter: drop-shadow(rgb(167, 73, 221) 0 0 2.5px); }
.badge-2 svg { color: rgb(28, 201, 134); filter: drop-shadow(rgb(28, 201, 134) 0 0 2.5px); }
.badge-3 svg { color: rgb(0, 138, 218); filter: drop-shadow(rgb(0, 138, 218) 0 0 2.5px); }
.badge-4 svg { color: rgb(19, 161, 90); filter: drop-shadow(rgb(19, 161, 90) 0 0 2.5px); }
.badge-5 svg { color: rgb(255, 165, 0); filter: drop-shadow(rgb(255, 165, 0) 0 0 2.5px); }
.badge-6 svg { color: rgb(143, 208, 255); filter: drop-shadow(rgb(143, 208, 255) 0 0 2.5px); }
.badge-7 svg { color: rgb(247, 152, 37); filter: drop-shadow(rgb(247, 152, 37) 0 0 2.5px); }

.badge-img img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* ---------- Tooltips ---------- */

[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--tooltip-bg);
  border: var(--tooltip-border);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  backdrop-filter: blur(6px);
  z-index: 20;
}

[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.views[data-tip]::after,
.badge[data-tip]::after {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
}

.views[data-tip]:hover::after,
.badge[data-tip]:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* ---------- Bio ---------- */

.bio {
  margin: 3px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

.joined {
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- Inhalt ---------- */

.content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.panel {
  width: 317px;
  max-width: 100%;
  padding: 10px;
  border-radius: var(--panel-radius);
  background: var(--panel-background);
  border: var(--panel-border);
}

.presence {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 104px;
}

.discord-avatar {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.discord-avatar img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0, 0, 0, 0.15);
}

.discord-avatar .online {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
}

.presence-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.presence-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-color);
}

.presence-name .clan {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.presence-name .xo {
  font-size: 12px;
  font-weight: 400;
  color: #fff;
}

.presence-status img {
  width: 20px;
  height: 20px;
  display: block;
}

.spotify iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 80px;
}

/* ---------- Socials ---------- */

.socials {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 30px;
  padding: 0 15px;
}

.social {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.social svg {
  width: 36px;
  height: 36px;
  color: #ffffff !important;
  filter: drop-shadow(#ffffff 1px 0 7px) !important;
}

.social:hover {
  transform: translateY(-3px) scale(1.05);
}

/* ---------- Views ---------- */

.views {
  position: absolute;
  bottom: 22px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.views-count {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 550;
  font-size: 10px;
  color: #fff;
}

.views-count svg {
  width: 19px;
  height: 19px;
}

/* ---------- Musik-Panel (unter der Karte) ---------- */

.audio-panel {
  position: relative;
  z-index: 1;
  width: calc(var(--container-width) - 34px);
  max-width: calc(100% - 24px);
  margin: 30px auto 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: var(--container-color);
  background-image: var(--container-gradient);
  backdrop-filter: blur(var(--container-blur));
  -webkit-backdrop-filter: blur(var(--container-blur));
}

.cover {
  width: 65px;
  height: 65px;
  border-radius: calc(var(--container-radius) - 10px);
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid rgba(0, 0, 0, 0.3);
}

.audio-main {
  flex: 1 1 auto;
  min-width: 0;
}

.audio-title {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.time {
  font-weight: 400;
  font-size: 11px;
  color: var(--control-text-color);
  min-width: 28px;
}

.progress {
  flex: 1 1 auto;
  padding: 6px 0;
  outline: none;
}

.progress-track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--progress-bar-full);
}

.progress-played {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 2px;
  background: var(--progress-bar-playing);
}

.progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.18s ease;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.progress:hover .progress-thumb,
.progress:focus .progress-thumb {
  opacity: 1;
}

.ctrl-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

.ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.ctrl svg {
  width: 20px;
  height: 20px;
}

.ctrl:hover {
  transform: scale(1.15);
}

.ctrl-play {
  width: 30px;
  height: 30px;
}

/* ---------- Einblend-Animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: revealIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes revealIn {
  to {
    opacity: 1;
    transform: none;
  }
}

body.force-show .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ---------- Responsiv ---------- */

@media (max-width: 720px) {
  .container {
    padding: 18px;
    border-radius: 44px;
  }

  .head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .name-row {
    justify-content: center;
    flex-wrap: wrap;
  }

  .content {
    flex-direction: column;
    align-items: stretch;
  }

  .panel {
    width: 100%;
  }

  .name {
    font-size: 24px;
    line-height: 32px;
  }

  .audio-panel {
    width: calc(100% - 24px);
    border-radius: 44px;
  }
}