/* themes/default/modules/arena/arena.css
 *
 * Arena pages page-level glue. Усі візуальні atoms — у widgets/arena/* CSS.
 */

.kp-page--arena {
  display: flex;
  flex-direction: column;
  gap: 12px 16px;
  padding: 12px 16px;
  max-width: 1080px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .kp-page--arena { padding: 16px 20px; gap: 16px 20px; }
}

.kp-page--arena__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

@media (max-width: 720px) {
  .kp-page--arena__top { grid-template-columns: 1fr; }
}

/* ───── Guest landing ───── */

.kp-arena-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px;
  background:
    radial-gradient(ellipse at top,
      color-mix(in srgb, var(--arena-accent) 12%, transparent) 0%,
      transparent 60%),
    var(--arena-panel);
  border: 1px solid var(--arena-border);
  border-radius: 14px;
}

.kp-arena-guest__icon {
  font-size: 80px;
  line-height: 1;
  filter: drop-shadow(0 0 32px rgba(239,100,67,.12));
}

.kp-arena-guest__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--arena-text);
}

.kp-arena-guest__subtitle {
  margin: 0;
  max-width: 480px;
  font-size: 1rem;
  color: var(--arena-muted);
  line-height: 1.2;
}

.kp-arena-guest__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kp-arena-guest__btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--arena-panel);
  color: var(--arena-text);
  border: 1px solid var(--arena-border);
  border-radius: 14px;
  font-family: var(--arena-font);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s var(--arena-ease),
              transform .12s var(--arena-ease);
}
.kp-arena-guest__btn:hover { border-color: var(--arena-border-h); transform: translateY(-1px; }

.kp-arena-guest__btn--primary {
  background: linear-gradient(135deg, var(--arena-accent) 0%, color-mix(in srgb, var(--arena-accent) 60%, var(--arena-gold)) 100%;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--arena-accent) 30%, transparent);
}

/* ─── /arena/battles — wave 991 ─── */

.kp-page--arena-battles {
  max-width: 1200px;
  margin-inline: auto;
  padding: 24px 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 720px) {
  .kp-page--arena-battles { padding: 16px 12px 50px; }
}

.w-arena-battles-list {
  display: flex;
  flex-direction: column;
}

/* Empty state */
.w-arena-battles-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--arena-panel) var(--arena-bg));
  border: 1px solid var(--arena-border) var(--arena-text));
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.w-arena-battles-empty__icon {
  font-size: 56px;
  opacity: 0.5;
  margin-block-end: 4px;
}

.w-arena-battles-empty__title {
  margin: 0;
  font-family: var(--arena-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--arena-text) var(--arena-bg));
}

.w-arena-battles-empty__text {
  margin: 0;
  font-size: 1rem;
  color: var(--arena-muted) var(--arena-muted));
  max-width: 40ch;
  line-height: 1.5;
}

.w-arena-battles-empty__cta {
  margin-block-start: 14px;
  padding: 11px 22px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--arena-accent) var(--arena-accent));
  color: #ffffff #fff);
  border: 0;
  border-radius: 10px;
  transition: background 0.18s ease, transform 0.18s ease;
}

.w-arena-battles-empty__cta:hover {
  background: #ff7a5c #ff7a5c);
  transform: translateY(-1px;
}

/* ─── Arena auxiliary pages — wave 992 ─── */

.kp-page--arena-aux {
  max-width: 1100px;
  margin-inline: auto;
  padding: 24px 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 720px) {
  .kp-page--arena-aux { padding: 16px 12px 50px; }
}

.w-arena-aux-nav__link.is-active {
  background: var(--arena-sunk) var(--arena-sunk));
  color: var(--arena-accent) var(--arena-accent));
}

.w-arena-aux-table tbody tr.is-top {
  background: color-mix(in srgb, var(--arena-accent) var(--arena-accent)) 4%, transparent);
}

.w-arena-settings-row.is-on {
  background: color-mix(in srgb, var(--arena-accent) var(--arena-accent)) 6%, var(--arena-sunk));
  border-color: color-mix(in srgb, var(--arena-accent) var(--arena-accent)) 30%, var(--arena-border));
}

.w-arena-chip.is-active {
  background: var(--arena-accent) var(--arena-accent));
  border-color: var(--arena-accent) var(--arena-accent));
  color: #ffffff #fff);
}

.w-arena-chip.is-ok {
  background: color-mix(in srgb, var(--arena-green) var(--arena-green)) 16%, var(--arena-panel));
  border-color: color-mix(in srgb, var(--arena-green) var(--arena-green)) 35%, var(--arena-border));
  color: var(--arena-green) var(--arena-green));
}

.w-arena-chip.is-muted {
  opacity: 0.7;
}

.w-arena-ach-card.is-locked { opacity: 0.65; }
.w-arena-ach-card.is-unlocked {
  border-color: color-mix(in srgb, var(--arena-accent) var(--arena-accent)) 30%, var(--arena-border));
  opacity: 1;
}

.w-arena-ach-card--bronze.is-unlocked { border-color: color-mix(in srgb, #cd7f32 40%, var(--arena-border)); }
.w-arena-ach-card--silver.is-unlocked { border-color: color-mix(in srgb, #c0c0c0 40%, var(--arena-border)); }
.w-arena-ach-card--gold.is-unlocked   { border-color: color-mix(in srgb, var(--arena-gold) 50%, var(--arena-border)); }

/* ════════════════════════════════════════════════════════════════════════
   v1.1.3.295 — CYBER DARK OVERLAY
   Перетворює legacy "soft cozy" Arena стилі у cyber tactical look.
   Базується на --accent (orange #ef6443), --mono (JetBrains Mono),
   та accent corner brackets.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Page wrapper — accent border baseline ─── */
.kp-page--arena,
.kp-page--arena-aux,
.kp-page--arena-battles {
  font-family: var(--font);
}

/* ─── Guest landing — cyber tactical ─── */
.kp-arena-guest {
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--arena-accent) 14%, transparent), transparent 55%),
    radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--arena-cyan) 8%, transparent), transparent 60%),
    var(--arena-panel);
  border: 1px solid var(--arena-border);
  border-radius: var(--r);
  overflow: hidden;
  padding: 32px 24px !important;
}
.kp-arena-guest::before,
.kp-arena-guest::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border-color: var(--arena-accent);
}
.kp-arena-guest::before {
  top: -1px; left: -1px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-left-radius: var(--r);
}
.kp-arena-guest::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid;
  border-right: 2px solid;
  border-bottom-right-radius: var(--r);
}
.kp-arena-guest__icon {
  font-size: 64px !important;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--arena-accent) 35%, transparent));
}
.kp-arena-guest__title {
  font-family: var(--mono) !important;
  color: var(--arena-text) !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 1.6rem !important;
}
.kp-arena-guest__subtitle {
  color: var(--arena-muted) !important;
  font-size: .92rem !important;
  max-width: 480px;
  line-height: 1.5;
}
.kp-arena-guest__btn {
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  font-size: .9rem !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  transition: all .18s var(--ease);
}
.kp-arena-guest__btn--primary {
  background: var(--arena-accent) !important;
  border-color: var(--arena-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--arena-accent) 28%, transparent);
}
.kp-arena-guest__btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--arena-accent) 40%, transparent);
}
.w-arena-aux-nav__link.is-active {
  background: color-mix(in srgb, var(--arena-accent) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--arena-accent) 35%, transparent) !important;
  color: var(--arena-accent) !important;
}
.w-arena-aux-table tbody tr.is-top td {
  background: color-mix(in srgb, var(--arena-gold) 6%, transparent) !important;
}
.w-arena-aux-table tbody tr.is-top:nth-child(1) td {
  background: color-mix(in srgb, var(--arena-gold) 12%, transparent) !important;
  border-left: 3px solid var(--arena-gold) !important;
}
.w-arena-aux-table tbody tr.is-top:nth-child(2) td {
  background: color-mix(in srgb, #c0c0c0 8%, transparent) !important;
  border-left: 3px solid #c0c0c0 !important;
}
.w-arena-aux-table tbody tr.is-top:nth-child(3) td {
  background: color-mix(in srgb, #cd7f32 8%, transparent) !important;
  border-left: 3px solid #cd7f32 !important;
}

/* ─── Match page — cyber combat scene ─── */
.arena-card {
  background: var(--arena-panel) !important;
  border: 1px solid var(--arena-border) !important;
  border-radius: var(--r) !important;
}
.arena-card--accent {
  position: relative;
  border-color: color-mix(in srgb, var(--arena-accent) 40%, var(--arena-border)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--arena-accent) 18%, transparent),
              0 12px 32px color-mix(in srgb, var(--arena-accent) 12%, transparent);
}
.arena-card--accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--arena-accent), transparent);
}
.arena-versus {
  font-family: var(--mono) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--arena-accent) !important;
  text-align: center;
  letter-spacing: .08em;
  text-shadow: 0 0 24px color-mix(in srgb, var(--arena-accent) 40%, transparent);
}
.arena-health__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hp), color-mix(in srgb, var(--hp) 80%, var(--arena-gold)));
  border-radius: inherit;
  transition: width .3s var(--ease);
}
.arena-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 99px;
  font-family: var(--mono) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--arena-cell);
  border: 1px solid var(--arena-border);
  color: var(--arena-muted);
}
.w-arena-ach-card.is-locked {
  opacity: .55;
  filter: grayscale(.4);
}
.w-arena-ach-card.is-unlocked {
  border-color: color-mix(in srgb, var(--arena-accent) 30%, var(--arena-border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--arena-accent) 4%, var(--arena-panel)), var(--arena-panel)) !important;
}
.w-arena-ach-card--bronze.is-unlocked {
  border-color: color-mix(in srgb, #cd7f32 40%, var(--arena-border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, #cd7f32 6%, var(--arena-panel)), var(--arena-panel)) !important;
}
.w-arena-ach-card--silver.is-unlocked {
  border-color: color-mix(in srgb, #c0c0c0 40%, var(--arena-border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, #c0c0c0 6%, var(--arena-panel)), var(--arena-panel)) !important;
}
.w-arena-ach-card--gold.is-unlocked {
  border-color: color-mix(in srgb, var(--arena-gold) 40%, var(--arena-border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--arena-gold) 8%, var(--arena-panel)), var(--arena-panel)) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v1.1.3.295 — New layout sections (progress + bottom + quicknav)
   ════════════════════════════════════════════════════════════════════════ */

.kp-page--arena__progress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  align-items: stretch;
}

@media (max-width: 720px) {
  .kp-page--arena__progress {
    grid-template-columns: 1fr;
  }
}

.kp-page--arena__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  align-items: stretch;
}

@media (max-width: 720px) {
  .kp-page--arena__bottom {
    grid-template-columns: 1fr;
  }
}

/* Empty state */
.w-arena-battles-empty {
  text-align: center;
  padding: 40px 20px !important;
  background: var(--arena-panel) !important;
  border: 1px dashed var(--arena-border) !important;
  border-radius: var(--r) !important;
  margin-top: 14px;
}
.w-arena-battles-empty__icon {
  font-size: 3rem;
  margin-bottom: 10px;
  opacity: .5;
}
.w-arena-battles-empty__title {
  font-family: var(--mono) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--arena-muted) !important;
  margin-bottom: 6px !important;
}
.w-arena-battles-empty__text {
  font-size: .82rem !important;
  color: var(--arena-dim) !important;
  margin-bottom: 14px;
  line-height: 1.5;
}
.w-arena-battles-empty__cta {
  display: inline-block;
  font-family: var(--mono) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 18px !important;
  background: var(--arena-accent) !important;
  border: 1px solid var(--arena-accent) !important;
  border-radius: 10px !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: all .18s var(--ease);
}
.w-arena-battles-empty__cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px;
}

/* List wrapper */
.w-arena-battles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.w-arena-battles-pager__btn[aria-disabled="true"],
.w-arena-battles-pager__btn.is-disabled {
  opacity: .4;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   v1.1.3.299 — INSPECT page cyber overlay
   /arena/inspect/{login} — підглядання за чужим гравцем
   ════════════════════════════════════════════════════════════════════════ */

.arena-inspect {
  font-family: var(--font);
}
.arena-inspect__tab.is-active {
  background: color-mix(in srgb, var(--arena-accent) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--arena-accent) 35%, transparent) !important;
  color: var(--arena-accent) !important;
}
.arena-inspect__pane.is-active {
  display: block;
}
.arena-inspect__cmp-btn.is-active {
  background: color-mix(in srgb, var(--arena-accent) 15%, transparent) !important;
  color: var(--arena-accent) !important;
  border-color: color-mix(in srgb, var(--arena-accent) 30%, transparent) !important;
}

/* Generic arena buttons (used in inspect) */
.arena-btn {
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  font-size: .82rem !important;
  padding: 10px 18px !important;
  background: var(--arena-cell) !important;
  border: 1px solid var(--arena-border) !important;
  border-radius: 10px !important;
  color: var(--arena-text) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all .18s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.arena-btn:hover {
  background: var(--arena-cell-h) !important;
  border-color: var(--arena-accent) !important;
  color: var(--arena-accent) !important;
}
.arena-btn--primary {
  background: var(--arena-accent) !important;
  border-color: var(--arena-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--arena-accent) 28%, transparent);
}
.arena-btn--primary:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px;
  color: #fff !important;
}

/* Empty state */
.arena-empty {
  text-align: center;
  padding: 30px 20px !important;
  color: var(--arena-dim) !important;
  font-family: var(--mono) !important;
  font-size: .82rem !important;
}

/* Battle grid (inspect) */
.battle-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px !important;
}
@media (max-width: 540px) {
  .battle-grid {
    grid-template-columns: 1fr;
  }
}

.arena-card__head {
  padding: 12px 14px !important;
  border-bottom: 1px dashed var(--arena-border) !important;
  font-family: var(--mono);
}
.arena-card__title {
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: var(--arena-text) !important;
  margin: 0 !important;
  letter-spacing: .02em;
}
.arena-card__body {
  padding: 14px !important;
}

/* Charts (stats page) */
.arena-chart {
  background: var(--arena-panel) !important;
  border: 1px solid var(--arena-border) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  font-family: var(--font);
}
.arena-chart__title {
  font-family: var(--mono) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--arena-accent) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.arena-chart__svg {
  background: var(--arena-cell) !important;
  border: 1px solid var(--arena-border) !important;
  border-radius: 8px !important;
  display: block;
  max-width: 100%;
}
.arena-chart__bar--win {
  fill: var(--hp) !important;
}
.arena-chart__bar--loss {
  fill: var(--red, #ef4444) !important;
}
.arena-chart__bar--draw {
  fill: var(--arena-gold) !important;
}
.arena-chart__max {
  font-family: var(--mono);
  font-size: .68rem;
  fill: var(--arena-dim);
}
.arena-chart__legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.arena-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--arena-muted);
}
.arena-chart__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.arena-chart__swatch--win { background: var(--hp); }
.arena-chart__swatch--loss { background: var(--red, #ef4444); }
.arena-chart__swatch--draw { background: var(--arena-gold); }

/* Rank tiles */
.arena-rank-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}
.arena-rank {
  background: var(--arena-cell) !important;
  border: 1px solid var(--arena-border) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  font-family: var(--mono);
  text-align: center;
}

/* Country tabs (stats / countries page) */
.arena-countries__tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 6px !important;
  background: var(--arena-panel) !important;
  border: 1px solid var(--arena-border) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow-x: auto;
}
.arena-countries__tab,
[class*="arena-countries__tab"] {
  font-family: var(--mono) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  padding: 8px 14px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--arena-dim) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all .15s var(--ease);
}
.arena-countries__tab.is-active,
[class*="arena-countries__tab"].is-active {
  background: color-mix(in srgb, var(--arena-accent) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--arena-accent) 35%, transparent) !important;
  color: var(--arena-accent) !important;
}
.arena-countries__period-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--arena-cyan) 6%, var(--arena-panel));
  border: 1px solid color-mix(in srgb, var(--arena-cyan) 25%, var(--arena-border));
  border-left: 2px solid var(--arena-cyan);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--arena-muted);
  margin-bottom: 10px;
}

/* Page head (used inside arena-card__head) */
.kp-page-head__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kp-page-head__title {
  font-family: var(--mono) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--arena-text) !important;
  margin: 0 !important;
  letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════════════
   v391: MATCH PAGE ANIMATIONS
═══════════════════════════════════════════════════════════════════ */

/* Result banner */
.kp-match-result--win {
  animation: kpMatchWinPulse .6s cubic-bezier(.16,1,.3,1) both;
  background: rgba(34,197,94,.2) !important;
  border-color: rgba(34,197,94,.4) !important;
  color: #22c55e !important;
}
.kp-match-result--lose {
  animation: kpMatchLosePulse .6s cubic-bezier(.16,1,.3,1) both;
  background: rgba(239,68,68,.15) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #ef4444 !important;
}
.kp-match-result--draw {
  animation: kpMatchWinPulse .4s ease both;
}

@keyframes kpMatchWinPulse {
  0%   { transform: scale(.7); opacity:0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity:1; }
}
@keyframes kpMatchLosePulse {
  0%   { transform: scale(.8) translateY(-4px; opacity:0; }
  100% { transform: scale(1) translateY(0); opacity:1; }
}

/* Stage intro */
.kp-match-stage--reveal .arena-combatant {
  animation: kpMatchCombatantIn .5s cubic-bezier(.16,1,.3,1) both;
}
.kp-match-stage--reveal .arena-combatant:last-child {
  animation-delay: .1s;
}
@keyframes kpMatchCombatantIn {
  from { opacity:0; transform:translateY(12px; }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── v391: HISTORY INFINITE SCROLL ────────────────────────────── */
.kp-arena-load-more {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.kp-arena-load-more__btn {
  padding: 10px 28px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--cell, rgba(255,255,255,.04));
  color: var(--text, #ddd8d0);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, transform .1s;
}
.kp-arena-load-more__btn:hover { background: var(--cell-h, rgba(255,255,255,.08)); }
.kp-arena-load-more__btn:active { transform: scale(.97); }
.kp-arena-load-more__btn:disabled { opacity: .5; cursor: default; }
.kp-arena-load-more__spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--accent, #ef6443);
  border-radius: 50%;
  animation: kpSpin .7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes kpSpin { to { transform: rotate(360deg); } }