/* Page-owned confirmation screen. The shared shell remains the homepage shell. */
body {
  min-height: 100vh;
  color: #25213a;
  background: #f7f5fb;
  font-family: Helvetica, Arial, sans-serif;
}

/* Keep the copied absolute header legible and reserve its full height below. */
body > header.gaming-hero {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: 122px;
  overflow: visible;
  background: #241345;
  color: #fff;
}

body > header.gaming-hero .gaming-hero__content {
  min-height: 122px;
  background: #241345;
}

body > header.gaming-hero .gaming-hero__photo,
body > header.gaming-hero .gaming-hero__intro { display: none; }

main {
  display: grid;
  min-height: 100vh;
  padding: 170px 28px 78px;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(125, 71, 226, .12), transparent 38%),
    linear-gradient(180deg, #f4f0fc 0%, #fbfaff 52%, #f7f5fb 100%);
}

.success-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, .62fr) minmax(0, 1.38fr);
  align-items: center;
  width: min(100%, 890px);
  min-height: 390px;
  padding: clamp(34px, 6vw, 68px);
  overflow: hidden;
  border: 1px solid #e7e0f2;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(52, 33, 88, .12);
}

.success-panel::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(180deg, #8d5af1, #5b2ac2);
  content: "";
}

.success-panel__ornament {
  position: relative;
  display: grid;
  width: 174px;
  aspect-ratio: 1;
  margin-inline: auto;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #f1eafd 0 42%, #faf7ff 43% 67%, transparent 68%);
}

.success-panel__orbit {
  position: absolute;
  border: 1px solid #ded0f5;
  border-radius: 50%;
}

.success-panel__orbit--outer { inset: 2px; }
.success-panel__orbit--inner { inset: 19px; border-style: dashed; }

.success-panel__check {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 7px solid #fff;
  border-radius: 50%;
  background: #6f32e8;
  box-shadow: 0 8px 22px rgba(80, 40, 155, .22);
  color: #fff;
  font-size: 36px;
  font-weight: 700;
}

.success-panel__spark {
  position: absolute;
  color: #8d5af1;
  font-size: 20px;
}

.success-panel__spark--one { top: 18px; right: 22px; }
.success-panel__spark--two { bottom: 22px; left: 14px; font-size: 13px; }

.success-panel__content { max-width: 500px; }

.success-panel__eyebrow {
  margin: 0 0 13px;
  color: #6f32e8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.success-panel h1 {
  max-width: 480px;
  margin: 0;
  color: #241345;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1.06;
}

.success-panel__message {
  margin: 19px 0 0;
  color: #39344a;
  font-size: 18px;
  line-height: 1.55;
}

.success-panel__note {
  margin: 9px 0 0;
  color: #706b7d;
  font-size: 15px;
  line-height: 1.65;
}

.success-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 29px;
}

.success-panel__button {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.success-panel__button:hover { transform: translateY(-2px); }
.success-panel__button:focus-visible { outline: 3px solid #b89af2; outline-offset: 3px; }

.success-panel__button--primary {
  background-color: #6f32e8;
  box-shadow: 0 7px 17px rgba(86, 42, 176, .2);
  color: #fff;
}

.success-panel__button--primary:hover { background-color: #5724c5; }

.success-panel__button--secondary {
  border-color: #d9c9f3;
  background-color: #f8f4ff;
  color: #5124ad;
}

.success-panel__button--secondary:hover { background-color: #efe7fc; }

.success-panel__footnote {
  position: absolute;
  right: 30px;
  bottom: 22px;
  color: #857e94;
  font-size: 12px;
  letter-spacing: .04em;
}

.success-panel__footnote span { margin-right: 6px; color: #8b5be6; }

@media (max-width: 680px) {
  body > header.gaming-hero,
  body > header.gaming-hero .gaming-hero__content { height: auto; min-height: 0; }

  main { min-height: 100vh; padding: 138px 16px 54px; }

  .success-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 22px;
    min-height: 0;
    padding: 30px 23px 68px;
    border-radius: 20px;
    text-align: center;
  }

  .success-panel__ornament { width: 132px; }
  .success-panel__check { width: 66px; height: 66px; font-size: 31px; }
  .success-panel__content { display: contents; }
  .success-panel__eyebrow { margin: 0; }
  .success-panel h1 { font-size: clamp(31px, 8vw, 40px); }
  .success-panel__message { margin-top: -7px; font-size: 17px; }
  .success-panel__note { margin-top: -12px; }
  .success-panel__actions { justify-content: center; width: 100%; margin-top: 0; }
  .success-panel__button { width: 100%; max-width: 320px; }
  .success-panel__footnote { right: 0; bottom: 19px; left: 0; }
}

@media (max-width: 380px) {
  main { padding-right: 12px; padding-left: 12px; }
  .success-panel { padding-right: 17px; padding-left: 17px; }
  .success-panel__actions { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .success-panel__button { transition: none; }
}