/* DXDCS.GG theme polish */
html, body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(250, 58, 58, 0.08), transparent 55%),
    #0d0d0d;
}
.card {
  background: #171717;
  border-color: rgba(255, 255, 255, 0.08);
}
.btn-ghost {
  background: #232323;
  border-color: rgba(255, 255, 255, 0.08);
}
.btn-ghost:hover:not(:disabled) {
  background: #2b2b2b;
}
.pill {
  background: #1b1b1b;
  border-color: rgba(255, 255, 255, 0.08);
}

.splash {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========== Boot splash ========== */
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 50% 36%, rgba(250, 58, 58, 0.16), transparent 46%),
    #0d0d0d;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  contain: layout paint;
}

#boot-splash.boot-splash--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#boot-splash .boot-icon {
  width: 128px;
  height: 128px;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(250, 58, 58, 0.5));
  will-change: transform, filter, opacity;
  animation:
    boot-icon-in 0.95s cubic-bezier(0.22, 1, 0.36, 1) both,
    boot-icon-pulse 2.2s ease-in-out 0.95s infinite;
}

#boot-splash .boot-wordmark {
  position: relative;
  width: min(68vw, 230px);
  height: 48px;
  will-change: transform, opacity;
  animation: boot-word-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

#boot-splash .dxd-logo {
  font-family: "Unbounded", "SF Pro Display", sans-serif;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#boot-splash .dxd-logo text {
  text-transform: uppercase;
  font-size: 232px;
  font-weight: 900;
  letter-spacing: 0.02em;
  stroke-width: 2;
  stroke: #fa3a3a;
  fill: #0d0d0d;
  font-family: "Unbounded", sans-serif;
  animation: dxd-stroke 4s linear infinite alternate;
}

#boot-splash .dxd-logo__accent {
  fill: #ffffff;
  stroke: #ffffff;
  animation: dxd-stroke-accent 4s linear infinite alternate;
}

#boot-splash .boot-bar {
  width: 112px;
  height: 3px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 37%, #1a1a1a 63%);
  background-size: 400% 100%;
  opacity: 0;
  animation:
    boot-bar-in 0.5s ease 0.35s both,
    splash-bar-pulse 1.35s ease-in-out 0.35s infinite;
}

@keyframes boot-icon-in {
  0% { opacity: 0; transform: scale(0.55) rotate(-10deg); filter: drop-shadow(0 0 0 rgba(250, 58, 58, 0)); }
  60% { opacity: 1; transform: scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: drop-shadow(0 0 26px rgba(250, 58, 58, 0.5)); }
}

@keyframes boot-icon-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(250, 58, 58, 0.38)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 30px rgba(250, 58, 58, 0.58)); }
}

@keyframes boot-word-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes boot-bar-in {
  from { opacity: 0; transform: scaleX(0.65); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes splash-bar-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@keyframes dxd-stroke {
  0% {
    fill: #0d0d0d;
    stroke: #ffffff;
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    stroke-width: 2;
  }
  30% {
    fill: #0d0d0d;
    stroke: #ffffff;
  }
  80% {
    fill: #0d0d0d;
    stroke: #fa3a3a;
    stroke-width: 3;
  }
  100% {
    fill: #fa3a3a;
    stroke: #0d0d0d;
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
  }
}

@keyframes dxd-stroke-accent {
  0% {
    fill: #0d0d0d;
    stroke: #ffffff;
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    stroke-width: 2;
  }
  30% {
    fill: #0d0d0d;
    stroke: #ffffff;
  }
  80% {
    fill: #0d0d0d;
    stroke: #ffffff;
    stroke-width: 3;
  }
  100% {
    fill: #ffffff;
    stroke: #0d0d0d;
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
  }
}

/* gift action icon */
.action-icon svg image {
  filter: drop-shadow(0 2px 4px rgba(250, 58, 58, 0.35));
}
.action.card .action-icon {
  overflow: visible;
}

/* loot action icon */
.action-icon svg image[href*="crystal"] {
  filter: drop-shadow(0 2px 5px rgba(224, 195, 90, 0.45));
}

/* Rating list: subtle separators between users */
.rating .list {
  gap: 0;
}
.rating .list > .row {
  border-radius: 0;
  position: relative;
}
.rating .list > .row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 48px;
  right: 10px;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}