* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #050713;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.viewport {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(77, 89, 186, 0.34), transparent 34%),
    #050713;
}

.viewport::before {
  position: absolute;
  inset: -2%;
  z-index: 0;
  content: "";
  background-image:
    linear-gradient(rgba(5, 7, 19, 0.22), rgba(5, 7, 19, 0.22)),
    url("../assets/role-select/总背景图.png");
  background-position: center;
  background-size: cover;
  filter: blur(9px) brightness(0.72) saturate(1.08);
  transform: scale(1.04);
}

.stage {
  position: relative;
  z-index: 1;
  width: min(100vw, 150vh);
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
  isolation: isolate;
  background-image: url("../assets/role-select/总背景图.png");
  background-size: 100% 100%;
  background-position: center;
  box-shadow: 0 0 88px rgba(4, 13, 48, 0.76);
}

.stage::before,
.stage::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.stage::before {
  background:
    radial-gradient(circle at 29% 47%, rgba(50, 119, 255, 0.28), transparent 19%),
    radial-gradient(circle at 71% 48%, rgba(218, 77, 255, 0.2), transparent 19%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(2, 3, 12, 0.28) 86%);
  mix-blend-mode: screen;
}

.stage::after {
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 237, 174, 0.75) 0 0.1%, transparent 0.32%),
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.8) 0 0.1%, transparent 0.32%),
    radial-gradient(circle at 67% 18%, rgba(255, 229, 163, 0.76) 0 0.12%, transparent 0.34%),
    radial-gradient(circle at 86% 36%, rgba(255, 255, 255, 0.8) 0 0.1%, transparent 0.32%),
    radial-gradient(circle at 52% 55%, rgba(109, 175, 255, 0.9) 0 0.13%, transparent 0.34%);
  opacity: 0.72;
  animation: twinkle 3.6s ease-in-out infinite alternate;
}

.sprite,
.role-card,
.choose-button {
  position: absolute;
  display: block;
  z-index: 5;
  user-select: none;
  -webkit-user-drag: none;
}

.sprite {
  pointer-events: none;
}

.sprite,
.choose-button img {
  height: auto;
}

/* ── Back Button ──────────────────────────────────────────── */
.back-button {
  position: absolute;
  display: block;
  top: 1.5%;
  left: 1.2%;
  z-index: 30;
  width: 6.55%;
  aspect-ratio: 1;
  transform-origin: center;
  text-decoration: none;
}

.back-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0.7vmin 0.42vmin rgba(0,0,0,0.58))
    drop-shadow(0 0 0.65vmin rgba(255,215,104,0.36));
  transform-origin: center;
  animation: breathe-float 2.05s ease-in-out infinite;
}

.back-button:hover,
.back-button:focus-visible {
  filter: brightness(1.12);
}
.back-button:focus-visible {
  outline: 0.25vmin solid rgba(255,236,161,0.92);
  outline-offset: 0.4vmin;
}

.title {
  top: -3.2%;
  left: 28.9%;
  z-index: 22;
  width: 42.2%;
  filter:
    drop-shadow(0 1vmin 0.75vmin rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 1.7vmin rgba(255, 196, 66, 0.32));
  animation: title-arrive 760ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.select-title {
  position: absolute;
  top: 19.8%;
  left: 50%;
  z-index: 24;
  margin: 0;
  color: #ffdf81;
  font-size: clamp(24px, 3.5vmin, 46px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-shadow:
    0 0.22vmin 0 #7b3b12,
    0 0 1.2vmin rgba(255, 194, 78, 0.74),
    0 0.7vmin 1vmin rgba(0, 0, 0, 0.68);
  transform: translateX(-50%);
}

.select-title::before,
.select-title::after {
  position: absolute;
  top: 50%;
  width: 4.4em;
  height: 0.08em;
  content: "";
  background: linear-gradient(90deg, transparent, #d59435 34%, #ffdf83 50%, #d59435 66%, transparent);
}

.select-title::before {
  right: calc(100% + 0.55em);
}

.select-title::after {
  left: calc(100% + 0.55em);
}

.balloon {
  top: 1%;
  right: 13.8%;
  z-index: 12;
  width: 10.2%;
  transform: rotate(4deg);
  filter: drop-shadow(0 0.9vmin 0.6vmin rgba(0, 0, 0, 0.48));
}

.book {
  z-index: 13;
  filter: drop-shadow(0 0.8vmin 0.6vmin rgba(0, 0, 0, 0.52));
}

.book-left {
  top: 11.4%;
  left: -0.5%;
  width: 16.5%;
  transform: rotate(-9deg);
}

.book-right {
  top: 15.5%;
  right: -0.6%;
  width: 15.8%;
  transform: rotate(10deg);
}

.book-page {
  right: 0.6%;
  bottom: 17.6%;
  width: 13%;
  transform: rotate(-4deg);
}

.letter {
  z-index: 14;
  filter:
    drop-shadow(0 0.6vmin 0.4vmin rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 0.7vmin rgba(255, 184, 64, 0.48));
}

.letter-b {
  top: 15.2%;
  left: 15.5%;
  width: 7.7%;
  transform: rotate(8deg);
}

.letter-c {
  top: 16.4%;
  right: 20.2%;
  width: 7.1%;
  transform: rotate(-9deg);
}

.letter-f {
  left: 5.4%;
  bottom: 29.3%;
  width: 7.3%;
  transform: rotate(-7deg);
}

.letter-g {
  right: 7.8%;
  bottom: 28.4%;
  width: 8%;
  transform: rotate(7deg);
}

.letter-h {
  top: 3.3%;
  right: 0.8%;
  width: 7.8%;
  transform: rotate(7deg);
}

.metal-letter {
  position: absolute;
  z-index: 14;
  top: 3.1%;
  left: 12.6%;
  width: 7.8%;
  color: #efb54e;
  text-align: center;
  text-shadow:
    0 0.22vmin 0 #6f3513,
    0 0 0.8vmin rgba(255, 221, 132, 0.65),
    0 0.7vmin 0.55vmin rgba(0, 0, 0, 0.54);
  transform: rotate(-7deg);
}

.metal-letter span {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 8vmin, 90px);
  font-weight: 900;
  line-height: 0.86;
}

.metal-letter small {
  display: block;
  color: #ffc870;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 2.45vmin, 30px);
  font-weight: 700;
  line-height: 1;
}

.role-card {
  top: 25.8%;
  width: 31.5%;
  height: 62.5%;
  transform-origin: center bottom;
  animation: card-rise 820ms ease-out both;
}

.role-boy {
  left: 17.6%;
}

.role-girl {
  right: 17%;
  animation-delay: 90ms;
}

.role-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: 2;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.45;
  background: radial-gradient(circle, rgba(92, 172, 255, 0.58), rgba(34, 97, 255, 0.22) 38%, transparent 68%);
  filter: blur(0.35vmin);
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.role-girl .role-glow {
  background: radial-gradient(circle, rgba(255, 118, 236, 0.55), rgba(153, 65, 255, 0.22) 38%, transparent 68%);
}

.role-card.selected .role-glow,
.role-card:focus-within .role-glow,
.role-card:hover .role-glow {
  opacity: 1;
  filter: blur(0.15vmin);
  transform: translate(-50%, -50%) scale(1.04);
  animation: aura-breathe 1.55s ease-in-out infinite;
}

.character {
  z-index: 6;
  filter:
    drop-shadow(0 1vmin 0.7vmin rgba(0, 0, 0, 0.56))
    drop-shadow(0 0 1.2vmin rgba(255, 218, 113, 0.18));
  transition: transform 180ms ease, filter 180ms ease;
}

.boy-character {
  left: -14.5%;
  bottom: 24.5%;
  width: 91%;
}

.girl-character {
  right: -13.5%;
  bottom: 22.2%;
  width: 94%;
}

.role-card.selected .character,
.role-card:focus-within .character,
.role-card:hover .character {
  filter:
    drop-shadow(0 1vmin 0.7vmin rgba(0, 0, 0, 0.56))
    drop-shadow(0 0 1.8vmin rgba(255, 222, 117, 0.62));
  transform: translateY(-1.2%) scale(1.018);
}

.plaque {
  left: 50%;
  bottom: 10.7%;
  z-index: 10;
  width: 83%;
  filter:
    drop-shadow(0 0.9vmin 0.6vmin rgba(0, 0, 0, 0.56))
    drop-shadow(0 0 0.8vmin rgba(255, 194, 67, 0.3));
  transform: translateX(-50%);
}

.choose-button {
  left: 50%;
  bottom: -0.2%;
  z-index: 18;
  width: 65%;
  border: 0;
  line-height: 0;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0.9vmin 0.56vmin rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 1.1vmin rgba(255, 181, 56, 0.42));
  animation: button-breathe 1.75s ease-in-out infinite;
}

.choose-button img {
  display: block;
  width: 100%;
}

.choose-button::before {
  position: absolute;
  inset: 12% 7%;
  content: "";
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 223, 116, 0.36), transparent 67%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.choose-button:hover::before,
.choose-button:focus-visible::before {
  opacity: 1;
}

.choose-button:focus-visible {
  outline: 0.35vmin solid rgba(255, 236, 161, 0.95);
  outline-offset: 0.45vmin;
}

.glint {
  position: absolute;
  z-index: 28;
  width: 1.75%;
  aspect-ratio: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 44%, rgba(255, 247, 194, 0.96) 48% 52%, transparent 56%),
    linear-gradient(0deg, transparent 44%, rgba(255, 247, 194, 0.96) 48% 52%, transparent 56%);
  filter: drop-shadow(0 0 0.55vmin rgba(255, 208, 72, 0.86));
  transform: rotate(45deg) scale(0.8);
  animation: glint 2.7s ease-in-out infinite;
}

.glint-one {
  left: 36.5%;
  top: 46.8%;
}

.glint-two {
  left: 63.2%;
  top: 39.6%;
  animation-delay: 900ms;
}

.glint-three {
  right: 12.2%;
  bottom: 35.4%;
  animation-delay: 1.55s;
}

.float-slow {
  animation: float-y 5.7s ease-in-out infinite;
}

.float-mid {
  animation: float-y 4.6s ease-in-out infinite;
}

.float-fast {
  animation: float-y 3.8s ease-in-out infinite;
}

@keyframes title-arrive {
  from {
    opacity: 0;
    transform: translateY(-4%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes card-rise {
  from {
    opacity: 0;
    transform: translateY(4%) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes button-breathe {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    filter:
      drop-shadow(0 0.9vmin 0.56vmin rgba(0, 0, 0, 0.58))
      drop-shadow(0 0 1.1vmin rgba(255, 181, 56, 0.42));
  }
  50% {
    transform: translateX(-50%) scale(1.046);
    filter:
      drop-shadow(0 1vmin 0.62vmin rgba(0, 0, 0, 0.54))
      drop-shadow(0 0 2.15vmin rgba(255, 220, 91, 0.72));
  }
}

@keyframes aura-breathe {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@keyframes float-y {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -2.2%;
  }
}

@keyframes glint {
  0%,
  63%,
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.2);
  }
  72% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
  82% {
    opacity: 0;
    transform: rotate(45deg) scale(1.45);
  }
}

@keyframes twinkle {
  from {
    opacity: 0.42;
  }
  to {
    opacity: 0.88;
  }
}

@keyframes breathe-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1.45%) scale(1.025); }
}

@media (max-aspect-ratio: 1536 / 1024) {
  .stage {
    width: auto;
    height: 100vh;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .viewport {
    background: #050713;
  }

  .stage {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    background-size: auto 112%;
    background-position: 50% 43%;
    box-shadow: none;
  }

  .back-button {
    top: 2%;
    left: 2%;
    width: 14%;
  }

  .stage::before {
    background:
      radial-gradient(circle at 31% 50%, rgba(49, 119, 255, 0.3), transparent 25%),
      radial-gradient(circle at 72% 50%, rgba(236, 76, 255, 0.23), transparent 25%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(2, 3, 12, 0.36) 84%);
  }

  .title {
    top: 3.6%;
    left: 8.5%;
    width: 83%;
  }

  .select-title {
    top: 19.2%;
    font-size: 28px;
    white-space: nowrap;
  }

  .select-title::before,
  .select-title::after {
    width: 2.3em;
  }

  .balloon {
    top: 9.2%;
    right: 8%;
    width: 17%;
  }

  .book-left {
    top: 19.5%;
    left: -5%;
    width: 24%;
  }

  .book-right {
    top: 21.2%;
    right: -7%;
    width: 24%;
  }

  .book-page {
    right: -4%;
    bottom: 14%;
    width: 21%;
  }

  .metal-letter {
    top: 9.8%;
    left: 2.5%;
    width: 15%;
  }

  .letter-b {
    top: 25%;
    left: 2%;
    width: 13.5%;
  }

  .letter-c {
    top: 25.7%;
    right: 3%;
    width: 13.5%;
  }

  .letter-f {
    left: 0.5%;
    bottom: 30.2%;
    width: 14%;
  }

  .letter-g {
    right: 1.2%;
    bottom: 30.4%;
    width: 14.5%;
  }

  .letter-h {
    top: 10%;
    right: -1.2%;
    width: 13%;
  }

  .role-card {
    top: 29.5%;
    width: 47.5%;
    height: 59%;
  }

  .role-boy {
    left: 2%;
  }

  .role-girl {
    right: 2%;
  }

  .boy-character {
    left: -27%;
    bottom: 27.1%;
    width: 128%;
  }

  .girl-character {
    right: -25%;
    bottom: 25.6%;
    width: 130%;
  }

  .role-glow {
    top: 33%;
    width: 118%;
  }

  .plaque {
    bottom: 14.8%;
    width: 109%;
  }

  .choose-button {
    bottom: 5.2%;
    width: 86%;
  }

  .glint-one {
    left: 33%;
    top: 47%;
  }

  .glint-two {
    left: 63%;
    top: 45%;
  }

  .glint-three {
    right: 9%;
    bottom: 24%;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .stage {
    width: 100vw;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}