.brand--link {
  color: inherit;
  text-decoration: none;
}

.battleground-shell {
  max-width: 1180px;
  padding-top: clamp(0.9rem, 2vw, 1.4rem);
}

.battleground-title {
  display: grid;
  place-items: center;
  min-height: 78px;
  margin: 0 0 24px;
  border-radius: 16px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 14px 34px rgba(30, 58, 138, 0.18);
  text-align: center;
}

.battleground-title h1 {
  margin: 0;
  font: 900 clamp(1.25rem, 2.4vw, 1.95rem) "Space Grotesk", "Trebuchet MS", sans-serif;
  letter-spacing: 0;
}

.arena-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1100 / 520;
  border-radius: 16px;
  background: #ffad00;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 16px 34px rgba(143, 76, 15, 0.2);
}

.battle-preloader {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: #0f172a;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.95), rgba(255, 248, 212, 0.82) 44%, rgba(255, 173, 0, 0.94)),
    #ffad00;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.battle-preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.battle-preloader__mark {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 76px;
}

.battle-preloader__mark span {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 3px solid #1e3a8a;
  border-radius: 8px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 22px rgba(30, 58, 138, 0.22);
  font: 900 2rem "PingFang SC", "Microsoft YaHei", serif;
  isolation: isolate;
  transform: translateY(0);
  animation: battle-preloader-tile 2200ms ease-in-out infinite;
}

.battle-preloader__mark span::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.75), rgba(249, 115, 22, 0.86));
  z-index: 0;
  animation: battle-preloader-fill 3200ms ease-in-out infinite;
}

.battle-preloader__mark span::after {
  content: attr(data-char);
  position: relative;
  z-index: 1;
}

.battle-preloader__mark span:nth-child(1)::before {
  animation-delay: 0ms;
}

.battle-preloader__mark span:nth-child(2) {
  animation-delay: 180ms;
}

.battle-preloader__mark span:nth-child(2)::before {
  animation-delay: 260ms;
}

.battle-preloader__mark span:nth-child(3) {
  animation-delay: 360ms;
}

.battle-preloader__mark span:nth-child(3)::before {
  animation-delay: 520ms;
}

.battle-preloader__mark span:nth-child(4) {
  animation-delay: 540ms;
}

.battle-preloader__mark span:nth-child(4)::before {
  animation-delay: 780ms;
}

.battle-preloader p {
  margin: 0;
  font: 900 1.12rem "Space Grotesk", "Trebuchet MS", sans-serif;
}

.battle-preloader small {
  font: 800 0.86rem "Space Grotesk", "Trebuchet MS", sans-serif;
  color: #475569;
}

@keyframes battle-preloader-tile {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes battle-preloader-fill {
  0% {
    height: 0%;
  }

  56% {
    height: 100%;
  }

  100% {
    height: 100%;
  }
}

#battle-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.battle-orientation-prompt {
  display: none;
}

.screen-reader-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.battleground-idiom-link-wrap {
  margin: 18px auto 0;
  padding: 0 1.5rem;
  text-align: center;
}

.battleground-idiom-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 2px solid var(--brand-dark);
  border-radius: 999px;
  color: #ffffff;
  background: var(--brand);
  font: 800 0.98rem "Space Grotesk", "Trebuchet MS", sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(30, 58, 138, 0.24);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.battleground-idiom-link:hover,
.battleground-idiom-link:focus-visible {
  border-color: #172554;
  background: var(--brand-dark);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .battleground-title {
    min-height: 66px;
    margin-bottom: 16px;
    border-radius: 14px;
  }

}

@media (max-width: 760px) and (orientation: portrait) {
  .battleground-page {
    overflow: hidden;
  }

  .battle-orientation-prompt {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding:
      max(24px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
    color: #ffffff;
    background:
      radial-gradient(circle at 50% 42%, rgba(59, 130, 246, 0.34), transparent 42%),
      #0f245f;
    text-align: center;
    font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
  }

  .battle-orientation-prompt__icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 116px;
    margin-bottom: 4px;
    border: 5px solid rgba(255, 255, 255, 0.94);
    border-radius: 16px;
    font-size: 3rem;
    line-height: 1;
    animation: battle-phone-rotate 1800ms ease-in-out infinite;
  }

  .battle-orientation-prompt strong {
    font-size: clamp(1.35rem, 6vw, 1.85rem);
  }

  .battle-orientation-prompt span:last-child {
    color: #dbeafe;
    font-size: 0.98rem;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .battleground-page {
    overflow: hidden;
    background: #0f172a;
  }

  .battleground-page > .topbar,
  .battleground-page .breadcrumbs,
  .battleground-page .battleground-title,
  .battleground-page > .site-footer {
    display: none;
  }

  .battleground-shell {
    display: grid;
    place-items: center;
    width: 100dvw;
    height: 100dvh;
    max-width: none;
    margin: 0;
    padding: 0 max(env(safe-area-inset-right), env(safe-area-inset-left));
  }

  .arena-wrap {
    width: min(100%, 200dvh);
    border-radius: 0;
    box-shadow: none;
  }
}

@keyframes battle-phone-rotate {
  0%,
  20% {
    transform: rotate(0deg);
  }

  70%,
  100% {
    transform: rotate(90deg);
  }
}