/*
 * end-screen.css
 * Final screen with animated dark gradient, floating lights and stats.
 */

.end-screen {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.end-screen .screen-scroll {
  position: relative;
  z-index: 2;
}

.end-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 144, 69, 0.18), transparent 32%),
    radial-gradient(circle at 84% 72%, rgba(118, 22, 16, 0.4), transparent 36%),
    radial-gradient(circle at 50% 110%, rgba(255, 118, 54, 0.12), transparent 42%),
    linear-gradient(128deg, #030101 0%, #170403 26%, #4a0d08 52%, #8b2d18 72%, #050202 100%);
  background-size: 210% 210%;
  animation: endGradientShift 13s var(--ease-standard) infinite alternate;
}

.end-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, transparent 0 32%, rgba(0, 0, 0, 0.18) 68%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32));
  pointer-events: none;
}

.end-light {
  position: absolute;
  width: clamp(80px, 30vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 144, 0.34), rgba(255, 119, 56, 0.12) 42%, transparent 72%);
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: 0.72;
  transform: translate3d(0, 0, 0);
  animation: endLightFloat 11s var(--ease-standard) infinite alternate;
}

.end-light--one {
  top: 8%;
  left: -16%;
  animation-duration: 10s;
}

.end-light--two {
  top: 24%;
  right: -20%;
  width: clamp(130px, 44vw, 360px);
  animation-duration: 14s;
  animation-delay: -4s;
}

.end-light--three {
  bottom: -14%;
  left: 18%;
  width: clamp(130px, 42vw, 330px);
  opacity: 0.55;
  animation-duration: 12s;
  animation-delay: -6s;
}

.end-light--four {
  top: 58%;
  right: 18%;
  width: clamp(60px, 21vw, 170px);
  opacity: 0.46;
  animation-duration: 8s;
  animation-delay: -2s;
}

.end-screen .screen-inner {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.end-title {
  max-width: 11em;
  margin-inline: auto;
  font-size: var(--font-size-xxl);
  color: #fff4df;
}

.end-card {
  width: min(92vw, 620px);
  max-width: 100%;
}

/*
 * ui.createBasicMessageScreen() adds .end-card directly to the .text-box.
 * Therefore the selector must target the same element, not a child .text-box.
 */
.end-card.text-box {
  box-shadow: var(--shadow-strong), 0 0 46px rgba(255, 123, 58, 0.18);
}

.stats-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 2.4vw, 14px);
  width: min(620px, 100%);
  max-width: 100%;
  margin-inline: auto;
}

.stat-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: clamp(12px, 3.2vw, 18px);
  border: 1px solid rgba(255, 218, 155, 0.28);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 218, 155, 0.12), transparent 36%),
    rgba(8, 3, 3, 0.54);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.stat-card[data-stat-id="time"] {
  grid-column: 1 / -1;
}

.stat-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-value {
  color: #fff4df;
  font-size: clamp(1.36rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.stat-card--success-rate {
  grid-column: auto;
  border-color: rgba(255, 157, 79, 0.48);
}

.end-actions {
  display: grid;
  gap: clamp(10px, 2.5vw, 14px);
  width: min(420px, 100%);
  margin-inline: auto;
}

.end-prize-button {
  width: min(100%, 390px);
  justify-self: center;
  text-decoration: none;
}

.end-prize-button.game-button {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 236, 190, 0.26), transparent 42%),
    linear-gradient(180deg, rgba(255, 190, 104, 0.98), rgba(184, 78, 28, 0.96));
  color: #220805;
  border-color: rgba(255, 232, 181, 0.72);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(255, 173, 83, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.end-prize-button.game-button:hover,
.end-prize-button.game-button:focus-visible {
  color: #1a0604;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.38),
    0 0 44px rgba(255, 190, 104, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.end-restart-button {
  width: min(100%, 360px);
  justify-self: center;
}

@keyframes endGradientShift {
  0% {
    background-position: 0% 48%;
    filter: hue-rotate(0deg) saturate(1);
  }

  50% {
    background-position: 100% 38%;
    filter: hue-rotate(-10deg) saturate(1.14);
  }

  100% {
    background-position: 45% 100%;
    filter: hue-rotate(8deg) saturate(1.08);
  }
}

@keyframes endLightFloat {
  0% {
    transform: translate3d(-10%, -5%, 0) scale(0.94);
  }

  100% {
    transform: translate3d(13%, 10%, 0) scale(1.09);
  }
}

@media (max-width: 520px) {
  .stats-panel {
    width: min(520px, 100%);
    gap: 8px;
  }

  .stat-card {
    padding: 11px 8px;
    border-radius: var(--radius-md);
  }

  .stat-label {
    font-size: clamp(0.62rem, 2.55vw, 0.74rem);
    letter-spacing: 0.035em;
  }

  .stat-value {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }
}

@media (max-width: 360px) {
  .stats-panel {
    gap: 7px;
  }

  .stat-card {
    padding: 10px 6px;
  }

  .stat-value {
    font-size: clamp(1rem, 5.2vw, 1.36rem);
  }

  .end-actions {
    gap: 9px;
  }
}

@supports not (height: 100dvh) {
  .end-screen,
  .end-screen .screen-inner {
    min-height: 100vh;
  }
}