/* =========================================================
   Hotel Zumbi Universe — Battle Center
   Path: /css/games/battle-center.css
   V3 — Mobile Fit / Premium Carousel / No Long Scroll
   ========================================================= */

.battle-center {
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  padding: 12px 12px 96px;
  color: #eafff6;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 0%, rgba(61, 255, 184, .18), transparent 34%),
    radial-gradient(circle at 100% 24%, rgba(0, 210, 255, .14), transparent 32%),
    linear-gradient(180deg, #061114 0%, #020609 100%);
}

.battle-center::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(0, 0, 0, .20), rgba(0, 0, 0, .78)),
    url("../../assets/img/arcade-hub.webp") center / cover no-repeat;
  opacity: .26;
}

.battle-center > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Compact Hero
   ========================================================= */

.battle-center__hero {
  position: relative;
  overflow: hidden;

  max-width: 920px;
  margin: 0 auto 10px;
  padding: 14px;

  border: 1px solid rgba(92, 255, 190, .24);
  border-radius: 24px;

  background:
    radial-gradient(circle at 20% 0%, rgba(66, 255, 177, .20), transparent 44%),
    radial-gradient(circle at 90% 20%, rgba(0, 211, 255, .14), transparent 38%),
    linear-gradient(180deg, rgba(9, 28, 33, .84), rgba(3, 9, 12, .94));

  box-shadow:
    0 16px 36px rgba(0, 0, 0, .44),
    0 0 26px rgba(57, 255, 178, .10),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.battle-center__hero--compact {
  min-height: auto;
}

.battle-center__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(90deg, rgba(1, 5, 7, .10), rgba(1, 5, 7, .58)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, .025) 0 1px,
      transparent 1px 8px
    );
}

.battle-center__content {
  position: relative;
  z-index: 1;
}

.battle-center__eyebrow,
.battle-carousel__eyebrow,
.eyebrow {
  margin: 0 0 5px;
  color: #71ffd0;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.battle-center h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 6.2vw, 2.5rem);
  font-weight: 1000;
  line-height: .92;
  letter-spacing: -.055em;
}

.battle-center__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

.battle-stat {
  min-width: 0;
  padding: 9px 10px;

  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 15px;

  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 70%),
    rgba(255, 255, 255, .045);
}

.battle-stat small {
  display: block;
  margin-bottom: 3px;
  color: rgba(234, 255, 246, .62);
  font-size: .52rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.battle-stat strong {
  display: block;
  color: #fff;
  font-size: .86rem;
  font-weight: 1000;
}

/* =========================================================
   Slider
   ========================================================= */

.battle-center__slider {
  max-width: 920px;
  margin: 0 auto;
}

.battle-carousel {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(92, 255, 190, .24);
  border-radius: 24px;

  background:
    radial-gradient(circle at 50% 0%, rgba(74, 255, 177, .18), transparent 42%),
    linear-gradient(180deg, rgba(10, 26, 31, .94), rgba(3, 8, 11, .97));

  box-shadow:
    0 18px 40px rgba(0, 0, 0, .50),
    0 0 30px rgba(60, 255, 180, .11),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

.battle-carousel--cyan {
  border-color: rgba(0, 215, 255, .28);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 215, 255, .20), transparent 42%),
    linear-gradient(180deg, rgba(7, 25, 35, .94), rgba(3, 8, 11, .97));
}

.battle-carousel--gold {
  border-color: rgba(255, 210, 105, .30);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 191, 87, .18), transparent 42%),
    linear-gradient(180deg, rgba(32, 23, 10, .92), rgba(3, 8, 11, .97));
}

.battle-carousel__top {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 7px;
  align-items: center;

  padding: 10px 10px 0;
}

.battle-arrow {
  width: 40px;
  height: 128px;

  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;

  color: #eafff6;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .10), transparent 60%),
    rgba(255, 255, 255, .045);

  font-size: 1.9rem;
  font-weight: 900;
  cursor: pointer;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.battle-arrow:active {
  transform: scale(.97);
}

.battle-carousel__image {
  position: relative;
  overflow: hidden;

  height: clamp(150px, 30vh, 260px);
  border-radius: 21px;

  background:
    radial-gradient(circle at 50% 40%, rgba(88, 255, 190, .22), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
}

.battle-carousel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  filter: saturate(1.12) contrast(1.06);
}

.battle-carousel__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(0, 0, 0, .02) 30%, rgba(0, 0, 0, .72)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .18), transparent 42%);
}

.battle-carousel__badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;

  padding: 8px 12px;
  border-radius: 999px;

  color: #04120c;
  background: linear-gradient(180deg, #76ffd0, #32d990);

  font-size: .6rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;

  box-shadow: 0 0 22px rgba(80, 255, 180, .22);
}

.battle-carousel__content {
  padding: 11px 12px 13px;
}

.battle-carousel__content h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 6.4vw, 2.2rem);
  font-weight: 1000;
  line-height: .92;
  letter-spacing: -.045em;
}

.battle-carousel__content p {
  margin: 7px 0 0;
  color: rgba(234, 255, 246, .76);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.28;
}

.battle-carousel__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;

  margin-top: 9px;
}

.battle-carousel__meta > div {
  min-width: 0;
  padding: 8px 8px;

  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;

  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 68%),
    rgba(255, 255, 255, .045);
}

.battle-carousel__meta small,
.battle-carousel__selectors small {
  display: block;
  margin-bottom: 3px;

  color: rgba(234, 255, 246, .56);
  font-size: .5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.battle-carousel__meta strong {
  display: block;
  color: #fff;
  font-size: .68rem;
  font-weight: 1000;
  line-height: 1.12;
}

.battle-carousel__selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;

  margin-top: 8px;
}

.battle-carousel__selectors label {
  min-width: 0;
}

.battle-carousel__selectors select {
  width: 100%;
  height: 36px;
  padding: 0 9px;

  border: 1px solid rgba(113, 255, 208, .22);
  border-radius: 13px;

  color: #eafff6;
  background:
    linear-gradient(180deg, rgba(9, 26, 31, .98), rgba(3, 9, 12, .98));

  font-size: .68rem;
  font-weight: 850;
  outline: 0;
}

.battle-carousel__rewards {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 8px;
  overflow: hidden;
}

.battle-carousel__reward {
  flex: 0 0 auto;
  padding: 5px 7px;

  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;

  color: rgba(234, 255, 246, .80);
  background: rgba(255, 255, 255, .045);

  font-size: .54rem;
  font-weight: 850;
  white-space: nowrap;
}

.battle-carousel__play {
  width: 100%;
  min-height: 42px;
  margin-top: 9px;

  border: 0;
  border-radius: 15px;

  color: #03120b;
  background: linear-gradient(180deg, #76ffd0, #35d990);

  font-size: .8rem;
  font-weight: 1000;
  cursor: pointer;

  box-shadow:
    0 12px 24px rgba(0, 0, 0, .24),
    0 0 24px rgba(74, 255, 177, .18);
}

.battle-carousel__play:active {
  transform: scale(.985);
}

.battle-carousel__play:disabled {
  opacity: .58;
  cursor: not-allowed;
  filter: grayscale(.35);
}

/* =========================================================
   Dots + Mini Cards
   ========================================================= */

.battle-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 8px 0 7px;
}

.battle-carousel__dot {
  width: 8px;
  height: 8px;

  border: 0;
  border-radius: 999px;

  background: rgba(255, 255, 255, .22);
  cursor: pointer;
}

.battle-carousel__dot.is-active {
  width: 24px;
  background: linear-gradient(90deg, #76ffd0, #00d7ff);
}

.battle-carousel__mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.battle-mini-card {
  position: relative;
  overflow: hidden;

  min-height: 58px;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 15px;

  color: #fff;
  background: rgba(255, 255, 255, .045);

  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.battle-mini-card img {
  width: 100%;
  height: 58px;
  object-fit: cover;
  display: block;

  opacity: .62;
  filter: saturate(.8) contrast(1.02);
}

.battle-mini-card span {
  position: absolute;
  inset: auto 6px 5px;

  color: #fff;
  font-size: .54rem;
  font-weight: 1000;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
}

.battle-mini-card.is-active {
  border-color: rgba(113, 255, 208, .55);
  box-shadow:
    0 0 22px rgba(76, 255, 185, .14),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.battle-mini-card.is-active img {
  opacity: .95;
  filter: saturate(1.12) contrast(1.08);
}

/* =========================================================
   Desktop / Tablet
   ========================================================= */

@media (min-width: 760px) {
  .battle-center {
    height: auto;
    min-height: 100dvh;
    padding: 18px 24px 110px;
    overflow: hidden;
  }

  .battle-center__hero {
    padding: 22px 26px;
  }

  .battle-carousel {
    border-radius: 30px;
  }

  .battle-carousel__top {
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    padding: 12px 12px 0;
  }

  .battle-arrow {
    width: 54px;
    height: 220px;
  }

  .battle-carousel__image {
    height: clamp(210px, 40vh, 320px);
    border-radius: 24px;
  }

  .battle-carousel__content {
    padding: 18px 22px 20px;
  }

  .battle-carousel__content p {
    font-size: .86rem;
    line-height: 1.42;
  }

  .battle-carousel__meta strong {
    font-size: .82rem;
  }

  .battle-carousel__selectors select {
    height: 42px;
    font-size: .78rem;
  }

  .battle-carousel__reward {
    font-size: .61rem;
  }

  .battle-carousel__play {
    min-height: 48px;
    font-size: .88rem;
  }

  .battle-mini-card {
    min-height: 74px;
    border-radius: 18px;
  }

  .battle-mini-card img {
    height: 74px;
  }

  .battle-mini-card span {
    font-size: .65rem;
  }
}

/* =========================================================
   Mobile Fit
   ========================================================= */

@media (max-width: 520px) {
  .battle-center {
    height: 100dvh;
    min-height: 100dvh;
    padding: 8px 8px 92px;
    overflow: hidden;
  }

  .battle-center__hero {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 22px;
  }

  .battle-center h1 {
    font-size: 1.52rem;
    line-height: .9;
  }

  .battle-center__eyebrow {
    font-size: .56rem;
    margin-bottom: 4px;
  }

  .battle-center__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 9px;
  }

  .battle-stat {
    padding: 8px 7px;
    border-radius: 14px;
  }

  .battle-stat small {
    font-size: .44rem;
    margin-bottom: 2px;
  }

  .battle-stat strong {
    font-size: .76rem;
  }

  .battle-carousel {
    border-radius: 22px;
  }

  .battle-carousel__top {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
    padding: 8px 8px 0;
  }

  .battle-arrow {
    width: 34px;
    height: 118px;
    border-radius: 15px;
    font-size: 1.6rem;
  }

  .battle-carousel__image {
    height: 136px;
    border-radius: 18px;
  }

  .battle-carousel__badge {
    right: 8px;
    bottom: 8px;
    padding: 7px 10px;
    font-size: .54rem;
  }

  .battle-carousel__content {
    padding: 9px 10px 10px;
  }

  .battle-carousel__eyebrow {
    font-size: .56rem;
    margin-bottom: 4px;
  }

  .battle-carousel__content h2 {
    font-size: 1.48rem;
    line-height: .9;
  }

  .battle-carousel__content p {
    margin-top: 6px;
    font-size: .7rem;
    line-height: 1.22;
  }

  .battle-carousel__meta {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
  }

  .battle-carousel__meta > div {
    padding: 7px 6px;
    border-radius: 13px;
  }

  .battle-carousel__meta small,
  .battle-carousel__selectors small {
    font-size: .45rem;
    margin-bottom: 2px;
  }

  .battle-carousel__meta strong {
    font-size: .61rem;
    line-height: 1.08;
  }

  .battle-carousel__selectors {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 7px;
  }

  .battle-carousel__selectors select {
    height: 34px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: .63rem;
  }

  .battle-carousel__rewards {
    gap: 4px;
    margin-top: 7px;
    max-height: 26px;
  }

  .battle-carousel__reward {
    padding: 5px 6px;
    font-size: .49rem;
  }

  .battle-carousel__play {
    min-height: 39px;
    margin-top: 8px;
    border-radius: 14px;
    font-size: .76rem;
  }

  .battle-carousel__dots {
    margin: 7px 0 6px;
  }

  .battle-carousel__mini {
    gap: 6px;
  }

  .battle-mini-card {
    min-height: 50px;
    border-radius: 13px;
  }

  .battle-mini-card img {
    height: 50px;
  }

  .battle-mini-card span {
    font-size: .49rem;
    bottom: 4px;
  }
}

@media (max-width: 380px) {
  .battle-center {
    padding: 6px 7px 88px;
  }

  .battle-center__hero {
    padding: 10px;
  }

  .battle-center h1 {
    font-size: 1.38rem;
  }

  .battle-carousel__image {
    height: 118px;
  }

  .battle-arrow {
    height: 104px;
  }

  .battle-carousel__content h2 {
    font-size: 1.34rem;
  }

  .battle-carousel__content p {
    font-size: .66rem;
  }

  .battle-carousel__play {
    min-height: 36px;
  }

  .battle-mini-card,
  .battle-mini-card img {
    height: 44px;
    min-height: 44px;
  }
}