.title-scene {
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(96 48 26 / 22%) 0, transparent 42%),
    linear-gradient(180deg, #2a1c14 0%, #17100c 100%);
}

.title-sky {
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: 48%;
  overflow: hidden;
  background:
    linear-gradient(180deg, #6a3825 0%, #9c6238 58%, #d39a52 100%);
}

.title-sky::after {
  position: absolute;
  right: -10%;
  bottom: -50px;
  left: -10%;
  height: 110px;
  border-radius: 50% 50% 0 0;
  background: #654022;
  content: "";
  transform: rotate(-3deg);
}

.title-sun {
  position: absolute;
  top: 52px;
  right: 42px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #f7d488;
  box-shadow: 0 0 50px rgb(247 212 136 / 48%);
}

.title-stadium {
  position: absolute;
  right: 12%;
  bottom: 16px;
  width: 48%;
  height: 72px;
  border: 8px solid rgb(41 24 17 / 76%);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  opacity: 0.72;
}

.title-content {
  width: 100%;
  padding-top: 6vh;
  text-align: center;
}

.game-title {
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 11vw, 4rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 0.98;
  text-shadow: 0 5px 22px rgb(0 0 0 / 52%);
}

.game-title span,
.game-title strong {
  display: block;
}

.game-title span {
  font-size: 0.56em;
  letter-spacing: 0.2em;
}

.game-title strong {
  color: #ffe7a9;
}

.title-subtitle {
  margin-bottom: 22px;
  color: var(--color-sand-light);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.title-character {
  position: relative;
  width: min(58vw, 250px);
  height: clamp(170px, 25vh, 230px);
  margin: 0 auto 14px;
  border-radius: 48% 48% 22px 22px;
  background:
    radial-gradient(circle at 50% 32%, rgb(242 197 92 / 14%), transparent 42%),
    linear-gradient(180deg, rgb(39 26 18 / 20%), rgb(17 12 9 / 76%));
}

.title-character.has-art {
  width: min(64vw, 276px);
  border-color: rgb(255 229 162 / 48%);
  border-radius: 46% 46% 30px 30px / 34% 34% 20px 20px;
  background-color: #4b3325;
  background-image:
    linear-gradient(180deg, rgb(255 234 187 / 7%) 0%, rgb(35 22 14 / 4%) 54%, rgb(25 16 12 / 80%) 100%),
    radial-gradient(circle at 50% 38%, rgb(255 226 151 / 26%), rgb(139 84 41 / 18%) 58%, rgb(43 25 16 / 58%) 100%),
    url("../assets/characters/naiwa-title-cutout.png");
  background-blend-mode: normal, soft-light, normal;
  background-position: center, center, center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, auto 101%;
  box-shadow:
    inset 0 0 0 1px rgb(255 244 213 / 12%),
    inset 0 -36px 48px rgb(32 18 12 / 30%),
    0 20px 48px rgb(11 7 5 / 42%),
    0 0 42px rgb(226 153 70 / 12%);
}

.title-character.has-art::after {
  position: absolute;
  right: 14%;
  bottom: 8px;
  left: 14%;
  height: 14px;
  border-radius: 50%;
  background: rgb(28 17 12 / 40%);
  filter: blur(7px);
  content: "";
}

.title-message {
  min-height: 24px;
  margin-bottom: 18px;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.title-actions {
  display: grid;
  width: min(100%, 310px);
  gap: 10px;
  margin: 0 auto;
}

.version-label {
  margin: 18px 0 0;
  color: var(--color-faint);
  font-size: 0.68rem;
}