/* Front Page Center 1.0.4 — sprite behavior refinement and placement polish. */
@media (max-width: 991.98px) {
  .arena-nav-panel {
    max-width: calc(100% - 16px) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
  }

  .arena-nav-links,
  .arena-nav.is-open .arena-nav-links,
  .arena-nav-actions,
  .arena-nav.is-open .arena-nav-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .arena-nav-actions,
  .arena-nav.is-open .arena-nav-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .arena-nav-actions > *,
  .arena-nav.is-open .arena-nav-actions > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .arena-nav-icon-action,
  .arena-nav.is-open .arena-nav-icon-action {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    contain: paint;
  }

  .arena-nav-action-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .arena-nav-action-copy {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .arena-nav-action-copy strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .arena-nav-action-copy small {
    display: -webkit-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .arena-lang-switch {
    min-width: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
}

@media (max-width: 420px) {
  .arena-nav-panel {
    inset-inline: 8px !important;
    max-width: calc(100% - 16px) !important;
    padding: 10px !important;
  }

  .arena-nav-links,
  .arena-nav.is-open .arena-nav-links {
    gap: 7px !important;
  }

  .arena-nav-links a,
  .arena-nav.is-open .arena-nav-links a {
    min-width: 0 !important;
    padding-inline: 8px !important;
    font-size: .73rem !important;
  }

  .arena-nav-actions,
  .arena-nav.is-open .arena-nav-actions { gap: 8px !important; }

  .arena-nav-icon-action,
  .arena-nav.is-open .arena-nav-icon-action {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    min-height: 54px !important;
    padding: 7px 8px !important;
  }

  .arena-nav-action-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .arena-nav-action-copy strong { font-size: .78rem !important; }
  .arena-nav-action-copy small { font-size: .62rem !important; }
}

@media (max-width: 350px) {
  .arena-nav-actions,
  .arena-nav.is-open .arena-nav-actions { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (hover: none) and (pointer: coarse) {
  .arena-nav-icon-action:hover,
  .arena-nav-icon-action:focus-visible,
  .arena-nav-icon-action.is-expanded { transform: none !important; }
}

@media (max-width: 991.98px) {
  .arena-nav.is-open .arena-nav-actions > .arena-lang-switch,
  .arena-nav.is-open .arena-nav-actions > .arena-nav-icon-action,
  .arena-nav.is-open .arena-nav-actions > .arena-nav-cart-action {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

.arena-hero,
.arena-section,
.arena-protagonist-card,
.arena-command-card,
.arena-step-track {
  position: relative;
}

.arena-sprite-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: clip;
}

.arena-container,
.arena-hero-content,
.arena-hero-stage,
.arena-why-layout,
.arena-pricing-grid,
.arena-custom-experience-layout,
.arena-communication-layout,
.arena-certificate-layout,
.arena-device-grid,
.arena-feature-grid,
.arena-audience-grid,
.arena-multiplayer-layout,
.arena-scene-grid,
.arena-command-grid,
.arena-step-track {
  position: relative;
  z-index: 2;
}

.arena-section-sprite {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 12px rgba(0,0,0,.45)) drop-shadow(0 0 20px rgba(255,82,192,.08));
  opacity: .98;
  user-select: none;
  pointer-events: none;
}

/* 01 walker */
.arena-sprite-layer-hero .arena-sprite-walker {
  bottom: 10px;
  left: -84px;
  width: clamp(106px, 13.6vw, 168px);
  animation: arenaSpritePatrolFlipWide 24s linear infinite;
}


/* 02 fire mage attached to the top hinge of the first How It Works card */
.arena-step-card {
  position: relative;
  overflow: visible;
}

.arena-step-card .arena-sprite-mage-card {
  top: 0;
  left: 50%;
  width: clamp(126px, 13.8vw, 184px);
  z-index: 6;
  transform: translate(-50%, -72%);
  transform-origin: 50% 100%;
}

/* 03 potion attached to protagonist card hinge */
.arena-protagonist-card { overflow: visible; }
.arena-protagonist-card .arena-sprite-potion-card {
  top: -24px;
  left: -14px;
  width: clamp(72px, 7.8vw, 106px);
  z-index: 4;
  transform-origin: 18% 8%;
  animation: arenaPotionHingeTilt 3.8s ease-in-out infinite;
}

/* 04 jet */
.arena-sprite-layer-devices .arena-sprite-jet {
  top: 12px;
  left: clamp(6px, 1.4vw, 18px);
  width: clamp(124px, 15.6vw, 192px);
  animation: arenaSpriteFlightPatrol 16s ease-in-out infinite;
  transform-origin: center center;
}

/* 05 torch */
.arena-sprite-layer-venues .arena-sprite-torch {
  bottom: 24px;
  inset-inline-end: clamp(10px, 1.8vw, 28px);
  width: clamp(46px, 5.4vw, 82px);
  opacity: .92;
}

/* 06 blue character */
.arena-sprite-layer-audiences .arena-sprite-heroine {
  bottom: 18px;
  inset-inline-end: clamp(10px, 2.4vw, 28px);
  width: clamp(84px, 8.8vw, 124px);
}

/* 07 dragon */
.arena-sprite-layer-pricing .arena-sprite-dragon {
  bottom: 18px;
  inset-inline-end: clamp(8px, 1.6vw, 22px);
  width: clamp(84px, 8.2vw, 124px);
  animation: arenaSpriteHoverPatrol 14s ease-in-out infinite;
}

/* 08 chicken above command shade */
.arena-command-card { overflow: hidden; }
.arena-command-card .arena-command-shade { position: absolute; inset: 0; z-index: 1; }
.arena-command-card .arena-sprite-chicken-card {
  right: 12px;
  bottom: 18px;
  width: clamp(58px, 6.1vw, 88px);
  z-index: 2;
  animation: arenaSpriteFloat 4.2s ease-in-out infinite;
}
.arena-command-card .arena-command-copy,
.arena-command-card img:first-child { position: relative; z-index: 2; }
.arena-command-card .arena-command-copy { z-index: 3; }

/* 09 spirit */
.arena-sprite-layer-certificates .arena-sprite-spirit {
  bottom: 18px;
  inset-inline-start: clamp(10px, 2vw, 26px);
  width: clamp(102px, 11vw, 164px);
  animation: arenaSpriteHop 2.4s ease-in-out .5s infinite;
}

/* 10 runner */
.arena-sprite-layer-control .arena-sprite-runner {
  bottom: 14px;
  left: -96px;
  width: clamp(112px, 12.2vw, 176px);
  animation: arenaSpritePatrolFlipWide 21s linear infinite;
}

@keyframes arenaSpritePatrolFlipWide {
  0%   { transform: translateX(0) scaleX(1); }
  49.5%{ transform: translateX(min(84vw, 1180px)) scaleX(1); }
  50.5%{ transform: translateX(min(84vw, 1180px)) scaleX(-1); }
  100% { transform: translateX(0) scaleX(-1); }
}

@keyframes arenaSpriteFlightPatrol {
  0%   { transform: translateX(0) translateY(0) scaleX(1); }
  12.5%{ transform: translateX(min(17vw, 180px)) translateY(-6px) scaleX(1); }
  25%  { transform: translateX(min(34vw, 360px)) translateY(3px) scaleX(1); }
  37.5%{ transform: translateX(min(52vw, 560px)) translateY(-8px) scaleX(1); }
  49.5%{ transform: translateX(min(70vw, 920px)) translateY(0) scaleX(1); }
  50.5%{ transform: translateX(min(70vw, 920px)) translateY(0) scaleX(-1); }
  62.5%{ transform: translateX(min(52vw, 560px)) translateY(-8px) scaleX(-1); }
  75%  { transform: translateX(min(34vw, 360px)) translateY(3px) scaleX(-1); }
  87.5%{ transform: translateX(min(17vw, 180px)) translateY(-6px) scaleX(-1); }
  100% { transform: translateX(0) translateY(0) scaleX(-1); }
}

@keyframes arenaSpriteHoverPatrol {
  0%   { transform: translateX(0) translateY(0) scaleX(1); }
  12.5%{ transform: translateX(min(7vw, 80px)) translateY(-6px) scaleX(1); }
  25%  { transform: translateX(min(14vw, 160px)) translateY(2px) scaleX(1); }
  37.5%{ transform: translateX(min(21vw, 240px)) translateY(-8px) scaleX(1); }
  49.5%{ transform: translateX(min(28vw, 320px)) translateY(0) scaleX(1); }
  50.5%{ transform: translateX(min(28vw, 320px)) translateY(0) scaleX(-1); }
  62.5%{ transform: translateX(min(21vw, 240px)) translateY(-8px) scaleX(-1); }
  75%  { transform: translateX(min(14vw, 160px)) translateY(2px) scaleX(-1); }
  87.5%{ transform: translateX(min(7vw, 80px)) translateY(-6px) scaleX(-1); }
  100% { transform: translateX(0) translateY(0) scaleX(-1); }
}

@keyframes arenaSpriteFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes arenaSpriteHop {
  0%, 70%, 100% { transform: translateY(0); }
  35% { transform: translateY(-10px); }
}

@keyframes arenaPotionHingeTilt {
  0%, 55%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-10deg); }
  16% { transform: rotate(9deg); }
  24% { transform: rotate(-7deg); }
  32% { transform: rotate(5deg); }
  40% { transform: rotate(-3deg); }
  48% { transform: rotate(1deg); }
}

@media (max-width: 991.98px) {
  .arena-sprite-layer-hero .arena-sprite-walker,
  .arena-sprite-layer-control .arena-sprite-runner {
    width: 108px;
  }

  .arena-sprite-layer-hero .arena-sprite-walker { animation-duration: 20s; }
  .arena-sprite-layer-control .arena-sprite-runner { animation-duration: 18s; }

  .arena-sprite-layer-devices .arena-sprite-jet {
    width: 132px;
    top: 8px;
    animation-duration: 13s;
  }

  .arena-sprite-layer-pricing .arena-sprite-dragon { width: 74px; }
  .arena-sprite-layer-certificates .arena-sprite-spirit { width: 110px; }
  .arena-step-card .arena-sprite-mage-card {
    width: 136px;
    transform: translate(-50%, -68%);
  }
  .arena-protagonist-card .arena-sprite-potion-card { width: 64px; }
  .arena-command-card .arena-sprite-chicken-card { width: 58px; }
}

@media (max-width: 640px) {
  .arena-sprite-layer-hero .arena-sprite-walker,
  .arena-sprite-layer-control .arena-sprite-runner { width: 90px; }

  .arena-sprite-layer-audiences .arena-sprite-heroine {
    bottom: 8px;
    inset-inline-end: 8px;
    width: 56px;
  }

  .arena-sprite-layer-venues .arena-sprite-torch {
    bottom: 12px;
    inset-inline-end: 8px;
    width: 34px;
  }

  .arena-sprite-layer-devices .arena-sprite-jet {
    top: 4px;
    width: 104px;
    animation-duration: 11s;
  }

  .arena-sprite-layer-pricing .arena-sprite-dragon {
    bottom: 10px;
    inset-inline-end: 8px;
    width: 56px;
  }

  .arena-sprite-layer-certificates .arena-sprite-spirit {
    bottom: 10px;
    inset-inline-start: 8px;
    width: 74px;
  }


  .arena-step-card .arena-sprite-mage-card {
    width: 100px;
    transform: translate(-50%, -64%);
  }

  .arena-protagonist-card .arena-sprite-potion-card {
    top: -16px;
    left: -8px;
    width: 50px;
  }

  .arena-command-card .arena-sprite-chicken-card {
    right: 8px;
    bottom: 12px;
    width: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-sprite-layer-hero .arena-sprite-walker,
  .arena-sprite-layer-devices .arena-sprite-jet,
  .arena-sprite-layer-control .arena-sprite-runner,
  .arena-command-card .arena-sprite-chicken-card,
  .arena-sprite-layer-certificates .arena-sprite-spirit,
  .arena-sprite-layer-pricing .arena-sprite-dragon,
  .arena-protagonist-card .arena-sprite-potion-card {
    animation: none !important;
  }
}

/* Front Page Center 1.0.6 targeted sprite visibility and placement corrections. */
.arena-protagonist-card .arena-sprite-potion-card {
  top: -29px;
  left: -24px;
}

.arena-sprite-layer-control {
  z-index: 5;
  overflow: visible;
}

.arena-sprite-layer-control .arena-sprite-chicken-control {
  top: 14px;
  left: 50%;
  width: clamp(72px, 7.4vw, 104px);
  transform: translateX(-50%);
  animation: arenaChickenControlFloat 3.8s ease-in-out infinite;
  z-index: 6;
}

.arena-command-grid {
  position: relative;
  overflow: visible;
}

.arena-command-grid .arena-sprite-runner-grid {
  top: -84px;
  left: -70px;
  width: clamp(104px, 10.8vw, 150px);
  z-index: 7;
  animation: arenaRunnerGridPatrol 18s linear infinite;
}

.arena-price-card.is-featured,
.arena-price-card:has(.arena-sprite-dragon-card) {
  overflow: visible !important;
}

.arena-price-card .arena-sprite-dragon-card {
  top: -58px;
  left: 14px;
  width: clamp(78px, 7.5vw, 112px);
  z-index: 8;
  animation: arenaDragonCardPatrol 8.5s ease-in-out infinite;
}

@keyframes arenaChickenControlFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes arenaRunnerGridPatrol {
  0% { transform: translateX(0) scaleX(1); }
  49.5% { transform: translateX(min(72vw, 930px)) scaleX(1); }
  50.5% { transform: translateX(min(72vw, 930px)) scaleX(-1); }
  100% { transform: translateX(0) scaleX(-1); }
}

@keyframes arenaDragonCardPatrol {
  0% { transform: translateX(0) translateY(0) scaleX(1); }
  20% { transform: translateX(34px) translateY(-7px) scaleX(1); }
  45% { transform: translateX(100px) translateY(1px) scaleX(1); }
  50% { transform: translateX(112px) translateY(-5px) scaleX(-1); }
  75% { transform: translateX(48px) translateY(1px) scaleX(-1); }
  100% { transform: translateX(0) translateY(0) scaleX(-1); }
}

@media (max-width: 991.98px) {
  .arena-sprite-layer-control .arena-sprite-chicken-control {
    top: 10px;
    width: 76px;
  }

  .arena-command-grid .arena-sprite-runner-grid {
    top: -66px;
    left: -38px;
    width: 98px;
    animation-duration: 15s;
  }

  .arena-price-card .arena-sprite-dragon-card {
    top: -44px;
    width: 78px;
  }
}

@media (max-width: 640px) {
  .arena-sprite-layer-control .arena-sprite-chicken-control {
    top: 6px;
    width: 58px;
  }

  .arena-command-grid .arena-sprite-runner-grid {
    top: -52px;
    left: -26px;
    width: 72px;
    animation-duration: 12s;
  }

  .arena-price-card .arena-sprite-dragon-card {
    top: -36px;
    left: 8px;
    width: 62px;
  }

  @keyframes arenaDragonCardPatrol {
    0% { transform: translateX(0) translateY(0) scaleX(1); }
    45% { transform: translateX(54px) translateY(-5px) scaleX(1); }
    50% { transform: translateX(60px) translateY(-2px) scaleX(-1); }
    100% { transform: translateX(0) translateY(0) scaleX(-1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-sprite-layer-control .arena-sprite-chicken-control,
  .arena-command-grid .arena-sprite-runner-grid,
  .arena-price-card .arena-sprite-dragon-card {
    animation: none !important;
  }
}

/* Front Page Center 1.0.7 — Control card structure repair and 05 torch title-hinge placement. */

/* Restore the original Control card layout. The earlier generic img:first-child rule
   incorrectly placed background images in normal flow. */
.arena-control {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: clamp(72px, 7vw, 112px);
}

.arena-control .arena-container,
.arena-control .arena-command-grid {
  position: relative;
  z-index: 3;
}

.arena-command-grid {
  align-items: stretch;
  overflow: visible;
  padding-top: clamp(72px, 7vw, 104px);
  padding-bottom: 10px;
}

.arena-command-card {
  position: relative !important;
  min-width: 0;
  min-height: clamp(460px, 38vw, 540px);
  overflow: hidden !important;
  isolation: isolate;
}

.arena-command-card > img:not(.arena-section-sprite) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
  transform: scale(1.02);
}

.arena-command-card > .arena-command-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none;
}

.arena-command-card > .arena-command-copy {
  position: absolute !important;
  inset-inline: clamp(18px, 2vw, 26px) !important;
  bottom: clamp(18px, 2vw, 26px) !important;
  z-index: 4 !important;
  max-width: calc(100% - 36px);
}

.arena-command-card > .arena-command-copy h3 {
  margin: 0 0 8px;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.arena-command-card > .arena-command-copy p {
  margin: 0;
  line-height: 1.55;
}

/* Keep decorative control sprites above the grid without distorting card geometry. */
.arena-sprite-layer-control {
  z-index: 4;
  overflow: hidden;
}

.arena-sprite-layer-control .arena-sprite-chicken-control {
  top: clamp(10px, 1.2vw, 18px);
}

.arena-command-grid .arena-sprite-runner-grid {
  top: clamp(-72px, -5vw, -54px);
  z-index: 6;
}

/* Prevent the large 09 sprite from the preceding Certificate section leaking
   into the Control cards. */
.arena-certificates {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.arena-certificates .arena-sprite-layer-certificates {
  overflow: hidden;
}

/* 05 torch: top-center above the Venues section title, not a lower corner. */
.arena-scenes {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(118px, 10vw, 158px);
}

.arena-sprite-layer-venues-title {
  z-index: 4;
  overflow: visible;
}

.arena-sprite-layer-venues-title .arena-sprite-torch-title {
  top: clamp(24px, 3vw, 48px);
  left: 50%;
  width: clamp(58px, 6.2vw, 92px);
  opacity: .96;
  transform: translateX(-50%);
  z-index: 5;
}

.arena-scenes .arena-section-heading {
  position: relative;
  z-index: 5;
}

@media (max-width: 991.98px) {
  .arena-command-grid {
    padding-top: 76px;
  }

  .arena-command-card {
    min-height: 480px;
  }

  .arena-scenes {
    padding-top: 118px;
  }

  .arena-sprite-layer-venues-title .arena-sprite-torch-title {
    top: 24px;
    width: 70px;
  }
}

@media (max-width: 640px) {
  .arena-control {
    padding-bottom: 72px;
  }

  .arena-command-grid {
    padding-top: 62px;
    gap: 18px;
  }

  .arena-command-card {
    min-height: 420px;
    border-radius: 22px;
  }

  .arena-command-card > .arena-command-copy {
    inset-inline: 18px !important;
    bottom: 18px !important;
    max-width: calc(100% - 36px);
  }

  .arena-command-card > .arena-command-copy h3 {
    font-size: clamp(1.15rem, 5vw, 1.45rem);
  }

  .arena-command-card > .arena-command-copy p {
    font-size: .9rem;
    line-height: 1.5;
  }

  .arena-command-grid .arena-sprite-runner-grid {
    top: -48px;
  }

  .arena-scenes {
    padding-top: 102px;
  }

  .arena-sprite-layer-venues-title .arena-sprite-torch-title {
    top: 20px;
    width: 58px;
  }
}