/*
 * CaseDays — Battles: блок главной, лобби, конструктор, просмотр батла.
 * Только токены из tokens.css. Теней нет, глубина — слоями surface.
 */

/* ---------- Заголовок с иконкой (главная, лобби, батл) ---------- */
.battles-block__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.battles-block__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  color: var(--accent);
}

.battles-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ---------- Лобби ---------- */
.battles {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

.battles__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.battles__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.segmented a.segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.battles__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.battles__how {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.battles__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.battles__step {
  display: flex;
  gap: var(--sp-3);
  color: var(--text-muted);
}

.battles__step-num {
  flex: none;
  color: var(--accent);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-black);
}

/* Строка лобби: раунды/статус · кейсы · места · режим · действие и стоимость */
.battle-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}

.battle-row--running {
  background: linear-gradient(90deg, var(--accent-soft) 0%, var(--surface-2) 40%);
}

.battle-row--completed,
.battle-row--cancelled {
  background: var(--surface-1);
}

.battle-row__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.battle-row__ring {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--surface-3);
  border-radius: 50%;
  font-weight: var(--fw-black);
}

.battle-row--waiting .battle-row__ring { border-color: var(--accent); }
.battle-row--running .battle-row__ring { border-color: var(--success); }

.battle-row__status {
  color: var(--text-muted);
  white-space: nowrap;
}

.battle-row__cases {
  display: flex;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.battle-row__case {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-control);
  background: var(--surface-3);
  color: var(--text-muted);
}

.battle-row__case img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.battle-row__case--more {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.battle-row__players {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.battle-row__count {
  min-width: 32px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.battle-row__avatars {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.battle-row__avatar {
  display: grid;
  place-items: center;
}

.battle-row__avatar--empty {
  width: 28px;
  height: 28px;
  border: 1px dashed var(--line);
  border-radius: 50%;
  color: var(--text-muted);
}

.battle-row__avatar--winner .avatar {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.battle-row__bot {
  color: var(--text-muted);
}

.battle-row__vs {
  padding: 0 var(--sp-1);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
}

.battle-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}

.battle-row__cost {
  white-space: nowrap;
}

.battle-row__cost b {
  color: var(--text);
}

/* ---------- Конструктор ---------- */
.battle-create.modal--wide .modal__inner {
  width: min(960px, calc(100vw - 32px));
}

.battle-create__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.battle-create__cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
  max-height: min(46vh, 520px);
  margin: 0;
  padding: 0 var(--sp-1) 0 0;
  overflow-y: auto;
  list-style: none;
}

.battle-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  text-align: center;
  transition: border-color var(--dur-micro) var(--ease);
}

.battle-case.is-selected {
  border-color: var(--accent);
}

.battle-case__media {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  color: var(--text-muted);
}

.battle-case__media img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.battle-case__title {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.battle-case__price {
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.battle-case__qty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: var(--fw-bold);
}

.battle-create__summary {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: var(--border);
  background: var(--surface-2);
}

.battle-create__total {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.battle-create__total b {
  color: var(--accent);
}

.battle-create__actions {
  display: flex;
  gap: var(--sp-2);
}

/* ---------- Просмотр батла ---------- */
.battle {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

.battle__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-6);
}

.battle__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.battle__title p {
  margin: 0;
}

.battle__status--waiting { background: var(--accent-soft); color: var(--accent); }
.battle__status--running { background: var(--success-soft); color: var(--success); }

.battle__facts {
  display: flex;
  gap: var(--sp-6);
  margin: 0;
}

.battle__facts .stat__value {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.battle__actions:empty {
  display: none;
}

.battle__rounds {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  padding: 0 0 var(--sp-1);
  overflow-x: auto;
  list-style: none;
}

.battle__round {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  padding: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--text-muted);
  transition: border-color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}

.battle__round img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.battle__round.is-current {
  border-color: var(--accent);
  color: var(--text);
}

.battle__round.is-played {
  opacity: 0.5;
}

.battle__result {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-bold);
}

.battle__arena {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-4);
}

.battle__arena--3 { --cols: 3; }
.battle__arena--4 { --cols: 4; }

.battle__arena--team {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr);
}

.battle__vs {
  align-self: center;
  color: var(--accent);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
}

.battle-player {
  --reel-step: 132px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  transition: border-color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}

.battle-player--me {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface-2) 30%);
}

.battle-player--winner {
  border-color: var(--accent);
}

.battle-player--lost {
  opacity: 0.6;
}

.battle-player--empty {
  border: 1px dashed var(--line);
  background: var(--surface-1);
}

.battle-player__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.battle-player__avatar .icon {
  color: var(--text-muted);
}

.battle-player__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.battle-player__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-bold);
}

.battle-player__total {
  color: var(--accent);
  font-weight: var(--fw-black);
  white-space: nowrap;
}

.battle-player__got {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--accent);
  font-weight: var(--fw-bold);
}

/* Лента раунда: окно в один предмет, движение сверху вниз к выигрышу */
.battle-reel {
  position: relative;
  height: var(--reel-step);
  border-radius: var(--radius-control);
  background: var(--surface-1);
  overflow: hidden;
}

.battle-reel::before,
.battle-reel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 16px;
  pointer-events: none;
}

.battle-reel::before { top: 0; background: linear-gradient(180deg, var(--surface-1), transparent); }
.battle-reel::after { bottom: 0; background: linear-gradient(0deg, var(--surface-1), transparent); }

.battle-reel__strip {
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.battle-reel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--reel-step);
  padding: var(--sp-2);
  text-align: center;
}

.battle-reel.is-done .battle-reel__item {
  background: linear-gradient(0deg, color-mix(in srgb, var(--rarity, var(--surface-3)) 22%, transparent) 0%, transparent 70%);
}

.battle-drop__img {
  width: 96px;
  height: 72px;
  object-fit: contain;
}

.battle-drop__placeholder {
  width: 40px;
  height: 40px;
  color: var(--rarity, var(--text-muted));
}

.battle-drop__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--rarity, var(--text));
  font-weight: var(--fw-bold);
}

.battle-drop__price {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--text-muted);
}

.battle-player__drops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.battle-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2);
  border-bottom: 2px solid var(--rarity, var(--surface-3));
  border-radius: var(--radius-control);
  background: var(--surface-1);
  text-align: center;
}

.battle-drop .battle-drop__img {
  width: 72px;
  height: 54px;
}

.battle-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-2);
  text-align: center;
}

.battle-slot__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
}

.battle__fair h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
}

.battle__fair .details__mono {
  overflow-wrap: anywhere;
}

/* ---------- Адаптив ---------- */
@media (max-width: 1279px) {
  .battles__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .battle__facts {
    grid-column: 1 / -1;
    order: 3;
  }

  .battle__arena--4,
  .battle__arena--team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle__arena--team .battle__vs {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (max-width: 1023px) {
  .battle-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "state cases side"
      "state players mode";
    row-gap: var(--sp-2);
  }

  .battle-row__state { grid-area: state; }
  .battle-row__cases { grid-area: cases; }
  .battle-row__players { grid-area: players; }
  .battle-row__mode { grid-area: mode; justify-self: end; }
  .battle-row__side { grid-area: side; }
}

@media (max-width: 767px) {
  .battles__tools {
    width: 100%;
  }

  .battles__tools .btn {
    flex: 1;
  }

  .battles__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .battle-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "cases cases"
      "players side"
      "state mode";
    padding: var(--sp-3);
  }

  .battle-row__state {
    flex-direction: row;
    gap: var(--sp-2);
  }

  .battle-row__ring {
    width: 32px;
    height: 32px;
    border-width: 2px;
    font-size: var(--fs-small);
  }

  .battle-row__case {
    width: 48px;
    height: 48px;
  }

  .battle-row__case img {
    width: 40px;
    height: 40px;
  }

  .battle__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .battle__facts {
    justify-content: space-between;
    gap: var(--sp-3);
  }

  .battle__arena,
  .battle__arena--3,
  .battle__arena--4,
  .battle__arena--team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
  }

  .battle-player {
    --reel-step: 112px;
    padding: var(--sp-2);
  }

  .battle-player__head {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .battle-player__drops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle-drop__img {
    width: 80px;
    height: 60px;
  }

  .battle-create__cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle-create__summary,
  .battle-create__actions {
    width: 100%;
  }

  .battle-create__actions .btn {
    flex: 1;
  }
}