/* Phase 36.3 game shell. The battle body is the arena; options are interaction zones. */
body {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgb(255 255 255 / 0.018) 1px, transparent 1px),
    radial-gradient(circle at 50% -8%, rgb(125 255 178 / 0.075), transparent 22rem),
    radial-gradient(circle at 16% 26rem, rgb(125 220 255 / 0.055), transparent 17rem),
    #06080f;
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
}

.site-header {
  min-height: 3.75rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(6 8 15 / 0.78);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.site-header.is-scrolled {
  box-shadow: none;
}

.site-header__container {
  min-height: 3.75rem;
}

.site-header__logo {
  gap: 0.55rem;
  min-height: 2rem;
  color: rgb(244 247 255 / 0.92);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-header__logo-mark {
  width: 1.65rem;
  height: 1.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7dffb2;
  box-shadow: none;
}

.site-header__logo-text {
  font-size: 0.85rem;
  font-weight: var(--font-weight-extrabold);
}

.site-header__nav {
  gap: clamp(var(--space-4), 3vw, var(--space-8));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.site-header__nav a {
  position: relative;
  min-height: 2.5rem;
  border-radius: 0;
  color: rgb(244 247 255 / 0.72);
  font-size: 0.78rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  padding: 0;
  text-transform: uppercase;
}

.site-header__nav a::after {
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 0;
  height: 2px;
  background: #7dffb2;
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  content: "";
}

.site-header__nav a:hover {
  background: transparent;
  color: #f4f7ff;
}

.site-header__nav a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-header__language-select {
  min-height: 2.35rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 0;
  background: rgb(255 255 255 / 0.035);
  color: rgb(244 247 255 / 0.82);
  font-size: 0.78rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.04em;
}

.site-header__icon-button {
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0;
  background: rgb(255 255 255 / 0.035);
  color: #f4f7ff;
  box-shadow: none;
}

.site-header__mobile-menu {
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(6 8 15 / 0.96);
}

.site-header__mobile-menu a {
  border-radius: 0;
  background: transparent;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-header__language--mobile .site-header__language-select {
  min-height: 3.35rem;
  border-color: rgb(255 255 255 / 0.12);
  background: transparent;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.game-start {
  position: relative;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: clamp(30rem, 66svh, 40rem);
  padding-block: clamp(var(--space-5), 3.4vw, var(--space-8));
  text-align: center;
}

.game-start::before,
.game-start::after {
  position: absolute;
  inset-inline: clamp(1rem, 8vw, 8rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(244 247 255 / 0.10), rgb(125 255 178 / 0.22), rgb(244 247 255 / 0.10), transparent);
  content: "";
}

.game-start::before {
  top: clamp(1.8rem, 5vh, 3.4rem);
}

.game-start::after {
  bottom: clamp(1.8rem, 5vh, 3.4rem);
}

.game-start__content {
  position: relative;
  z-index: 1;
  justify-items: center;
  width: min(100%, 66rem);
  gap: clamp(var(--space-2), 1.2vw, var(--space-4));
}

.game-start__kicker,
.battle-component__game-label {
  color: #7dffb2;
  font-size: clamp(0.82rem, 0.9vw, 0.95rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.17em;
  line-height: 1;
  text-transform: uppercase;
}

.game-start__title {
  max-width: 16ch;
  color: #f4f7ff;
  font-size: clamp(2.35rem, 4.35vw, 3.9rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow:
    0.04rem 0.04rem 0 rgb(125 220 255 / 0.30),
    -0.04rem 0.04rem 0 rgb(255 92 92 / 0.20),
    0 0.75rem 2.25rem rgb(0 0 0 / 0.58);
}

.game-start__battle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(2.6rem, 5vw, 3.2rem) minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  width: min(100%, 54rem);
  min-height: clamp(10rem, 21vw, 16rem);
  margin-block: clamp(0.35rem, 1.2vw, 0.85rem);
  gap: clamp(var(--space-2), 2.6vw, var(--space-6));
  pointer-events: none;
}

.game-start__contender {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(9rem, 19vw, 14.5rem);
  object-fit: contain;
  filter:
    saturate(1.04)
    drop-shadow(0 1.5rem 2.2rem rgb(0 0 0 / 0.48))
    drop-shadow(0 0 1.4rem rgb(125 255 178 / 0.10));
}

.game-start__contender--left {
  transform: translateX(0.8rem) rotate(-1deg) scale(1.04);
}

.game-start__contender--right {
  transform: translateX(-0.8rem) rotate(1deg) scale(1.02);
}

.game-start__vs {
  display: grid;
  position: relative;
  z-index: 1;
  width: clamp(2.35rem, 4.8vw, 3rem);
  height: clamp(2.35rem, 4.8vw, 3rem);
  place-items: center;
  border: 1px solid rgb(125 255 178 / 0.42);
  background: rgb(6 8 15 / 0.58);
  color: #7dffb2;
  font-size: clamp(0.66rem, 1.2vw, 0.76rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.06em;
  line-height: 1;
  box-shadow: 0 0 1.1rem rgb(125 255 178 / 0.10);
}

.game-start__description {
  max-width: 28rem;
  color: rgb(244 247 255 / 0.68);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: var(--font-weight-bold);
}

.game-start__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: min(100%, 15rem);
  gap: var(--space-3);
  border: 0;
  background: transparent;
}

.game-start__play,
.battle-intro__button,
.battle-component__next-button,
.battle-component__action-link {
  min-height: 3.1rem;
  border: 0;
  border-radius: 0;
  background: rgb(244 247 255 / 0.08);
  color: #f4f7ff;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-start__play {
  min-width: 15rem;
  background: #7dffb2;
  color: #06110c;
}

.battle-intro__button,
.battle-component__next-button {
  background: #7dffb2;
  color: #06110c;
}

.game-start__play:hover,
.battle-intro__button:hover,
.battle-component__next-button:hover,
.battle-component__action-link:hover {
  background: #f4f7ff;
  color: #06080f;
  box-shadow: none;
  transform: translateY(-1px);
}

@media (width > 760px) {
  .game-start__content {
    gap: clamp(var(--space-3), 1.5vw, var(--space-5));
  }

  .game-start__actions {
    margin-top: 0.15rem;
  }

  .game-start__play {
    min-height: 3.2rem;
  }
}

.challenge-start {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  width: min(100% - (var(--container-padding) * 2), 54rem);
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
  margin-bottom: clamp(var(--space-8), 6.5vw, var(--space-12));
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-block: var(--space-2) var(--space-8);
}

.challenge-picker {
  display: grid;
  justify-items: center;
  gap: clamp(var(--space-4), 2.5vw, var(--space-6));
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  text-align: center;
}

.challenge-picker__title {
  color: #f4f7ff;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.challenge-picker__subtitle {
  color: rgb(244 247 255 / 0.52);
  font-size: 0.82rem;
  font-weight: var(--font-weight-bold);
}

.challenge-picker__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(6.5rem, 1fr));
  width: 100%;
  gap: clamp(var(--space-4), 2.4vw, var(--space-6)) clamp(var(--space-4), 2.5vw, var(--space-6));
  border: 0;
  background: transparent;
}

.challenge-picker__card {
  --challenge-accent: #f4f7ff;
  --challenge-icon-scale: 1;
  display: grid;
  position: relative;
  min-height: 5.85rem;
  min-width: 0;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.2rem;
  text-align: center;
  text-decoration: none;
}

.discovery-section[hidden] {
  display: none !important;
}

.challenge-picker__card:hover,
.challenge-picker__card:focus,
.challenge-picker__card:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 0;
  transform: none;
}

.challenge-picker__icon {
  width: clamp(3.2rem, 4.8vw, 4.25rem);
  height: clamp(3.2rem, 4.8vw, 4.25rem);
  object-fit: contain;
  filter: saturate(0.98) drop-shadow(0 0.75rem 1.25rem rgb(0 0 0 / 0.30));
  transform: scale(var(--challenge-icon-scale));
  transition: filter 140ms ease-out, transform 140ms ease-out;
}

.challenge-picker__card:hover .challenge-picker__icon,
.challenge-picker__card:focus .challenge-picker__icon,
.challenge-picker__card:focus-visible .challenge-picker__icon {
  filter:
    saturate(1.15)
    brightness(1.08)
    drop-shadow(0 0.85rem 1.35rem rgb(0 0 0 / 0.32))
    drop-shadow(0 0 0.9rem color-mix(in srgb, var(--challenge-accent) 28%, transparent));
  transform: translateY(-0.16rem) scale(calc(var(--challenge-icon-scale) * 1.055));
}

.challenge-picker__card:focus-visible .challenge-picker__icon {
  outline: 2px solid rgb(244 247 255 / 0.78);
  outline-offset: 0.4rem;
}

.challenge-picker__card-title {
  color: #f4f7ff;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 140ms ease-out, transform 140ms ease-out;
}

.challenge-picker__card:hover .challenge-picker__card-title,
.challenge-picker__card:focus .challenge-picker__card-title,
.challenge-picker__card:focus-visible .challenge-picker__card-title {
  color: var(--challenge-accent);
}

.challenge-picker__card:focus .challenge-picker__card-title,
.challenge-picker__card:focus-visible .challenge-picker__card-title {
  text-shadow: 0 0 0.9rem color-mix(in srgb, var(--challenge-accent) 42%, transparent);
}

.challenge-picker__card[data-mode-key="phones"] {
  --challenge-accent: #7ddcff;
  --challenge-icon-scale: 1.06;
}

.challenge-picker__card[data-mode-key="football-legends"] {
  --challenge-accent: #7dffb2;
  --challenge-icon-scale: 0.84;
}

.challenge-picker__card[data-mode-key="streaming"] {
  --challenge-accent: #ff5c5c;
  --challenge-icon-scale: 1.16;
}

.challenge-picker__card[data-mode-key="fast-food"] {
  --challenge-accent: #ffb257;
  --challenge-icon-scale: 0.96;
}

.challenge-picker__card[data-mode-key="gaming-consoles"] {
  --challenge-accent: #53e7ff;
  --challenge-icon-scale: 0.95;
}

.challenge-picker__card[data-mode-key="social-apps"] {
  --challenge-accent: #d98cff;
  --challenge-icon-scale: 1.06;
}

.challenge-picker__card[data-mode-key="cars"] {
  --challenge-accent: #ff5b5b;
  --challenge-icon-scale: 1.38;
}

.challenge-picker__card[data-mode-key="operating-systems"] {
  --challenge-accent: #ff8f68;
  --challenge-icon-scale: 1.04;
}

.battle-page {
  padding-top: 0;
}

.battle-page .battle-component,
.battle-component {
  width: min(100% - (var(--container-padding) * 2), 116rem);
  max-width: 116rem;
}

.battle-component {
  gap: var(--space-3);
  border-top: 0;
  padding-top: var(--space-2);
}

.battle-component__heading {
  color: #f4f7ff;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.battle-component__description,
.battle-component__game-rule {
  color: rgb(244 247 255 / 0.50);
}

.battle-component.is-lobby .battle-component__meta,
.battle-component.is-lobby .battle-component__body,
.battle-component.is-lobby .battle-component__next {
  display: none;
}

.battle-intro {
  width: min(100%, 24rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: var(--space-4);
  padding: 0;
}

.battle-intro__text {
  color: rgb(244 247 255 / 0.64);
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
}

.battle-intro__rules {
  display: none;
}

.battle-component__score,
.battle-component.is-predict-game .battle-component__score,
.battle-component.is-predict-game.is-playing .battle-component__score {
  color: #f4f7ff;
  text-shadow: 0 0 1.25rem rgb(125 255 178 / 0.18);
}

.battle-component__streak,
.battle-component.is-predict-game .battle-component__streak,
.battle-component__timer,
.battle-component.is-predict-game .battle-component__timer {
  color: #7dffb2;
}

.battle-component.is-predict-game .battle-component__meta {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.battle-component__body,
.battle-component.is-predict-game .battle-component__body,
.battle-component.is-predict-game.is-playing .battle-component__body {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  min-height: clamp(31rem, 70vh, 45rem);
  border: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgb(255 255 255 / 0.16) 50%, transparent calc(50% + 1px)),
    radial-gradient(ellipse at 50% 48%, rgb(125 255 178 / 0.07), transparent 34rem),
    rgb(8 11 19 / 0.72);
}

.battle-component.is-playing .battle-option,
.battle-component.is-phone-mode .battle-option,
.battle-component.has-selection .battle-option,
.battle-component.is-reveal-choice .battle-option,
.battle-component.is-winner-focus .battle-option,
.battle-component.is-final-result .battle-option,
.battle-option {
  display: grid;
  min-height: 100%;
  grid-template-rows: 1fr;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.battle-component.is-phone-mode .battle-option {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.battle-option[aria-disabled="false"]:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.battle-option[aria-disabled="false"]:active {
  transform: none;
}

.battle-option.is-selected {
  background: transparent;
  box-shadow: none;
}

.battle-option.is-selected::after {
  border-radius: 0;
  background: #7dffb2;
  color: #06110c;
}

.battle-component__vs {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgb(125 255 178 / 0.48);
  border-radius: 0;
  background: #06080f;
  color: #7dffb2;
  font-size: 0.8rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.battle-component.is-revealing .battle-component__vs {
  width: auto;
  min-width: 7rem;
  height: 2.45rem;
  padding-inline: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.battle-option__image {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 0;
  background: transparent;
}

.battle-option__image[data-visual-type="photo"],
.battle-option__image[data-visual-type="cover"] {
  padding: 0;
}

.battle-option__image[data-visual-type="logo"],
.battle-option__image[data-visual-type="render"],
.battle-option__image:not([data-visual-type]) {
  background: transparent;
}

.battle-option__image[data-visual-type="photo"] .battle-option__logo,
.battle-option__image[data-visual-type="cover"] .battle-option__logo {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.battle-option__image[data-visual-type="render"] .battle-option__logo {
  width: auto;
  max-width: min(92%, 42rem);
  height: auto;
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 2rem 3rem rgb(0 0 0 / 0.42));
  transform: scale(var(--battle-render-scale, 1));
}

.battle-component.is-phone-mode .battle-option__image[data-visual-type="render"] .battle-option__logo {
  max-width: min(94%, 42rem);
  max-height: 92%;
  transform: scale(var(--battle-render-scale, 1));
}

.battle-option__image[data-visual-type="logo"] .battle-option__logo {
  width: min(48%, 21rem);
  max-width: 21rem;
  height: auto;
  max-height: 48%;
  object-fit: contain;
  filter: drop-shadow(0 1.4rem 2.2rem rgb(0 0 0 / 0.44));
}

.battle-component__next {
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 0;
  background: rgb(8 11 19 / 0.92);
  box-shadow: none;
}

.battle-component.is-final-danger .battle-component__next {
  width: min(calc(100vw - 2rem), 40rem);
  max-width: 40rem;
  gap: 0.85rem;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.battle-component.is-predict-game-over .battle-component__next.is-game-over {
  width: min(calc(100vw - 2rem), 40rem);
  max-width: 40rem;
  gap: 0.85rem;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  border-color: rgb(255 99 125 / 0.62);
  background:
    linear-gradient(135deg, rgb(255 99 125 / 0.18), transparent 52%),
    rgb(8 11 19 / 0.94);
}

.battle-component__result-choice,
.battle-component.is-predict-game-over .battle-component__next.is-game-over .battle-component__result-choice {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.battle-component.is-final-danger .battle-component__result-message,
.battle-component.is-predict-game-over .battle-component__result-message {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  font-size: 0.98rem;
  line-height: 1.25;
}

.battle-component.is-final-danger .battle-component__actions,
.battle-component.is-predict-game-over .battle-component__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 0.65rem;
}

.battle-component.is-final-danger .battle-component__next-button,
.battle-component.is-final-danger .battle-component__action-link,
.battle-component.is-predict-game-over .battle-component__next-button,
.battle-component.is-predict-game-over .battle-component__action-link {
  width: 100%;
  min-height: 3rem;
  font-size: 0.78rem;
  line-height: 1.05;
  padding-inline: 0.75rem;
}

.battle-component__share {
  gap: 0.45rem;
  padding-top: 0.9rem;
  border-top-color: rgb(244 247 255 / 0.12);
}

.battle-component__share-prompt {
  color: #f4f7ff;
  font-size: 0.82rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0;
}

.battle-component__share-button {
  min-height: 2.8rem;
  min-width: min(100%, 13rem);
  border: 0;
  border-radius: 0;
  background: rgb(244 247 255 / 0.10);
  color: #f4f7ff;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  line-height: 1.05;
  padding-inline: 0.9rem;
  text-transform: uppercase;
}

.battle-component__share-button:hover {
  background: #f4f7ff;
  color: #06080f;
  box-shadow: none;
  transform: translateY(-1px);
}

.battle-component__copy-link {
  min-height: 1.6rem;
  color: rgb(244 247 255 / 0.66);
  font-size: 0.76rem;
  letter-spacing: 0;
}

.battle-component__copy-link:hover {
  color: #f4f7ff;
}

.battle-component__share-status {
  min-height: 1.1rem;
  color: #7dffb2;
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .challenge-picker__icon,
  .challenge-picker__card-title {
    transition: none;
  }

  .challenge-picker__card:hover .challenge-picker__icon,
  .challenge-picker__card:focus .challenge-picker__icon,
  .challenge-picker__card:focus-visible .challenge-picker__icon {
    transform: none;
  }
}

@media (width <= 760px) {
  .site-header__container {
    min-height: 3.5rem;
  }

  .game-start {
    min-height: auto;
    padding-block: var(--space-6) var(--space-4);
  }

  .game-start__title {
    max-width: 13ch;
    font-size: clamp(1.78rem, 8.3vw, 2.72rem);
  }

  .game-start__kicker {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }

  .game-start__battle {
    grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr);
    width: min(100%, 22rem);
    min-height: clamp(7rem, 31vw, 8.4rem);
    gap: 0.35rem;
    margin-block: 0.15rem;
  }

  .game-start__contender {
    height: clamp(6.4rem, 29vw, 8rem);
  }

  .game-start__contender--left {
    transform: translateX(0.35rem) rotate(-1deg) scale(1.03);
  }

  .game-start__contender--right {
    transform: translateX(-0.35rem) rotate(1deg) scale(1.02);
  }

  .game-start__vs {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.66rem;
  }

  .game-start__description {
    max-width: 22rem;
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .game-start__actions {
    width: min(100%, 20rem);
  }

  .game-start__play {
    width: 100%;
    min-width: 0;
  }

  .challenge-start {
    width: min(100% - (var(--container-padding) * 2), 27rem);
    margin-top: -0.3rem;
    margin-bottom: var(--space-8);
    padding-block: 0 var(--space-6);
  }

  .challenge-picker {
    gap: var(--space-4);
  }

  .challenge-picker__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
  }

  .challenge-picker__card {
    min-height: 5.65rem;
    gap: 0.35rem;
    padding: 0.15rem;
  }

  .challenge-picker__icon {
    width: 3.45rem;
    height: 3.45rem;
  }

  .challenge-picker__card-title {
    font-size: 0.9rem;
  }

  .battle-component__body,
  .battle-component.is-predict-game .battle-component__body,
  .battle-component.is-predict-game.is-playing .battle-component__body {
    min-height: clamp(32rem, 74vh, 42rem);
    grid-template-columns: 1fr;
    background:
      linear-gradient(180deg, transparent calc(50% - 1px), rgb(255 255 255 / 0.16) 50%, transparent calc(50% + 1px)),
      radial-gradient(ellipse at 50% 48%, rgb(125 255 178 / 0.07), transparent 26rem),
      rgb(8 11 19 / 0.72);
  }

  .battle-component__vs {
    top: 50%;
  }

  .battle-option__image[data-visual-type="render"] .battle-option__logo {
    max-width: 96%;
    max-height: 93%;
    transform: scale(var(--battle-render-scale, 1));
  }

  .battle-component.is-phone-mode .battle-option__image[data-visual-type="render"] .battle-option__logo {
    max-width: 98%;
    max-height: 95%;
  }

  .battle-option__image[data-visual-type="logo"] .battle-option__logo {
    width: min(56%, 13rem);
    max-height: 56%;
  }

  .battle-component.is-predict-game .battle-component__score {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }

  .battle-component.is-final-danger .battle-component__next,
  .battle-component.is-predict-game-over .battle-component__next.is-game-over {
    width: min(calc(100vw - 1.5rem), 21rem);
    max-width: 21rem;
    gap: 0.55rem;
    padding-inline: 0.85rem;
  }

  .battle-component.has-selection.is-final-danger .battle-component__next {
    padding-block: 0.85rem;
  }

  .battle-component.is-final-danger .battle-component__result-choice,
  .battle-component.is-predict-game-over .battle-component__next.is-game-over .battle-component__result-choice {
    font-size: clamp(1.65rem, 8vw, 2.3rem);
    line-height: 0.95;
  }

  .battle-component.is-final-danger .battle-component__result-message,
  .battle-component.is-predict-game-over .battle-component__result-message {
    gap: 0.15rem 0.7rem;
    font-size: 0.85rem;
  }

  .battle-component.is-final-danger .battle-component__actions,
  .battle-component.is-predict-game-over .battle-component__actions {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .battle-component.is-final-danger .battle-component__next-button,
  .battle-component.is-final-danger .battle-component__action-link,
  .battle-component.is-predict-game-over .battle-component__next-button,
  .battle-component.is-predict-game-over .battle-component__action-link {
    min-height: 2.45rem;
    font-size: 0.74rem;
  }
}