.arena-head { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.arena-title { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.arena-head h2 { margin: 0; font: 700 var(--text-lg)/1.2 var(--font-display); letter-spacing: .04em; }
.arena-alpha {
  font: 700 10px/1 var(--font-display); letter-spacing: .08em;
  padding: 3px 6px; border-radius: 3px;
  background: var(--color-accent); color: #10131a;
}

.arena-note {
  color: var(--color-stage-ink-2); font-size: var(--text-sm); line-height: 1.5;
}
.arena-note b {
  color: var(--color-accent); font-weight: 700; font-size: var(--text-base);
  letter-spacing: .01em;
}


:root[data-mode="arena"] .stage {
  background:
    radial-gradient(120% 80% at 50% -10%, var(--color-stage-2), transparent 60%),
    radial-gradient(90% 26% at 50% 50%, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 72%),
    var(--color-stage);
}



.arena-side {
  border: var(--rule) solid var(--color-stage-line);
  border-radius: 6px; padding: var(--space-sm);
  background: var(--color-stage-2);
  max-width: 36rem; margin-inline: auto;
}

.arena-side + .arena-vs {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: var(--space-xs) auto; max-width: 36rem;
}
.arena-side + .arena-vs::before, .arena-side + .arena-vs::after {
  content: ""; flex: 1; height: var(--rule);
  background: linear-gradient(90deg, transparent, var(--color-stage-line));
}
.arena-side + .arena-vs::after { background: linear-gradient(90deg, var(--color-stage-line), transparent); }
.arena-vs b { font: 700 var(--text-sm)/1 var(--font-display); color: var(--color-accent); letter-spacing: .1em; }

.arena-side.def {
  border-color: color-mix(in srgb, var(--arena-foe, #ff5470) 45%, var(--color-stage-line));
  background: linear-gradient(color-mix(in oklab, var(--arena-foe, #ff5470) 7%, var(--color-stage-2)), var(--color-stage-2));
}
.arena-side.atk {
  border-color: color-mix(in srgb, var(--arena-mine, #6aa9ff) 45%, var(--color-stage-line));
  background: linear-gradient(var(--color-stage-2), color-mix(in oklab, var(--arena-mine, #6aa9ff) 7%, var(--color-stage-2)));
}
.arena-side-head { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-xs); }
.arena-side-head b { font-size: var(--text-sm); }
.arena-side-head .sub { color: var(--color-stage-ink-2); font-size: var(--text-xs); }

.arena-side-head .arena-tier { margin-left: 0; }
.arena-lv { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.arena-lv input { width: 66px; text-align: center; }
.arena-lv label { font-size: var(--text-xs); color: var(--color-stage-ink-2); }



.arena-slots {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2xs);
}
.arena-slot { display: flex; flex-direction: column; gap: 3px; min-width: 0; }


.arena-card { position: relative; cursor: pointer; }


.arena-card.has {
  aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px;
  container-type: inline-size;
}
.arena-card:not(.has) {
  aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 4px;
  border: var(--rule) solid var(--color-stage-line); background: var(--color-stage-3);
}
.arena-card .empty { color: var(--color-stage-ink-2); font-size: var(--text-xl); font-weight: 300; }


.arena-card .nk { width: 100%; height: 100%; aspect-ratio: auto; }

.arena-card .nk-art { top: var(--bw); bottom: var(--bw); height: auto; }

.arena-card .nk-art img { height: 100%; object-fit: cover; object-position: 50% 50%; }

.arena-card .bdg-cls, .arena-card .nk-nm { display: none; }


.arena-card .nk-foot {
  position: absolute; top: var(--bw); left: var(--bw); right: var(--bw); bottom: auto;
  height: 19%; min-height: 0; padding: 0 3cqw 0 15cqw;
  display: flex; align-items: center;
  
  background: linear-gradient(rgba(12, 14, 19, .88), rgba(12, 14, 19, .5) 60%, transparent);
  clip-path: none; border-bottom: 0;
}

.arena-card .nk-foot:not(:has(.nk-stars, .nk-core)) { background: none; }
.arena-card .nk-line1 {
  flex: 1; min-height: 0; padding: 0; gap: 2px;
  align-items: center; justify-content: flex-end;
}
.arena-card .nk-stars img { width: 9cqw; height: 9cqw; }
.arena-card .nk-core { width: 15cqw; height: 15cqw; font-size: 7cqw; }
.arena-card .nk-core.max { font-size: 4.6cqw; }



.arena-card .nk-rail {
  inset: 0; z-index: 3; display: block; gap: 0; pointer-events: none;
}
.arena-card .nk-rail .bdg { pointer-events: auto; }

.arena-card .bdg-fav { position: absolute; top: 3%; left: 3%; width: 15cqw; height: 16.5cqw; }
.arena-card .bdg-fav::after { width: 9cqw; height: 9cqw; }
.arena-card .bdg-code {
  position: absolute; right: 3%; bottom: 3%; top: auto; left: auto;
  width: 15cqw; height: 16.5cqw;
}
.arena-card .bdg-burst {
  position: absolute; top: calc(19% + 4%); left: 3%;
  width: 15cqw; height: 16.5cqw; font-size: 8.5cqw;
}
.arena-card .bdg-burst img { width: 12.5cqw; height: 12.5cqw; }

.arena-card .nk-rail-r { top: calc(19% + 3%); }
.arena-card .nk-cog { width: 15cqw; height: 15cqw; font-size: 8.5cqw; }


.ac-lv {
  position: absolute; left: 4px; bottom: 3px; z-index: 3; display: grid;
  line-height: 1; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none;
}
.ac-lv i { font: 700 6.5cqw/1 var(--font-display); color: rgba(232,234,240,.85); font-style: normal; }
.ac-lv b { font: 700 16cqw/1 var(--font-display); color: #ffd766; }


.ac-cube {
  
  position: absolute; right: calc(3% + 17cqw); bottom: 3%; z-index: 3;
  width: 24cqw; height: 24cqw; display: block; pointer-events: none;
}
.ac-cube img { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6)); }


.arena-card > .x {
  position: absolute; top: 2px; right: 2px; z-index: 5;
  width: 16px; height: 16px; padding: 0; line-height: 1;
  border: var(--rule) solid rgba(232, 234, 240, .45); border-radius: 3px;
  background: rgba(12, 14, 19, .82); color: rgba(232, 234, 240, .9);
  font-size: 9px; cursor: pointer; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.arena-card:hover > .x, .arena-card > .x:focus-visible { opacity: 1; }
.arena-card > .x:hover { border-color: var(--arena-foe, #ff5470); color: var(--arena-foe, #ff5470); }
@media (hover: none) { .arena-card > .x { opacity: 1; } }


.arena-cube {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 3px; min-height: 28px; padding: 2px 3px;
  border: var(--rule) dashed var(--color-stage-line); border-radius: 4px;
  background: var(--color-stage-3); font-size: 11px;
}

.arena-cube select { min-width: 0; width: 100%; }
.arena-cube.on { border-style: solid; border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-stage-line)); }
.arena-cube.drop { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.arena-cube img { width: 22px; height: 22px; object-fit: contain; }
.arena-cube .lv { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-stage-ink-2); }
.arena-cube select { font-size: 11px; padding: 1px 2px; }
.arena-cube .none { color: var(--color-stage-ink-2); }


.arena-cubebar { display: flex; flex-wrap: wrap; gap: 3px; margin-top: var(--space-xs); }
.arena-cubebar > .arena-note { flex: 0 0 100%; margin-bottom: 2px; }
.arena-cubebar .chip {
  display: inline-flex; align-items: center; gap: 4px; cursor: grab;
  padding: 2px 6px; font-size: 11px;
}
.arena-cubebar .chip img { width: 18px; height: 18px; }


.arena-res { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-md); }
@media (max-width: 46rem) { .arena-res { grid-template-columns: 1fr; } }
.arena-team {
  border: var(--rule) solid var(--color-stage-line); border-radius: 6px;
  background: var(--color-stage-2); padding: var(--space-sm);
}
.arena-team.win { border-color: var(--color-accent); }
.arena-team-head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.arena-team-head b { font-size: var(--text-sm); }
.arena-badge {
  font: 700 10px/1 var(--font-display); letter-spacing: .06em; padding: 3px 6px; border-radius: 3px;
  background: var(--color-stage-3); color: var(--color-stage-ink-2);
}
.arena-team.win .arena-badge { background: var(--color-accent); color: #10131a; }

.arena-tier {
  margin-left: auto; font: 700 10px/1 var(--font-display); letter-spacing: .04em;
  padding: 3px 6px; border-radius: 3px; white-space: nowrap;
  border: var(--rule) solid var(--color-stage-line); color: var(--color-stage-ink-2);
}

.arena-burst-warn {
  display: flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-2xs);
  font-size: var(--text-xs); color: var(--color-amber);
}
.arena-burst-warn em {
  flex: none; width: 14px; height: 14px; border-radius: 50%; font-style: normal;
  font: 700 10px/14px var(--font-display); text-align: center;
  background: var(--color-amber); color: #10131a;
}
.arena-mem { display: flex; gap: var(--space-xs); padding: var(--space-2xs) 0; border-top: var(--rule) solid var(--color-stage-line); }
.arena-mem:first-of-type { border-top: 0; }
.arena-face { position: relative; width: 54px; height: 54px; flex: none; border-radius: 4px; overflow: hidden; background: var(--color-stage-3); }

.arena-face img { width: 100%; height: 100%; object-fit: cover; }
.arena-mem.dead .arena-face img { filter: grayscale(1) brightness(.45); }

.arena-mem.dead .arena-face::after {
  content: "DISCONNECTED"; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  font: 700 7px/1.6 var(--font-display); text-align: center; letter-spacing: .04em;
  background: rgba(12, 14, 19, .8); color: var(--arena-foe, #ff5470);
}
.arena-mem-body { flex: 1; min-width: 0; }
.arena-mem-top { display: flex; align-items: baseline; gap: 6px; }
.arena-mem-top .nm { font-size: var(--text-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-mem-top .hp { margin-left: auto; font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.arena-hpbar { height: 4px; border-radius: 2px; background: var(--color-stage-3); overflow: hidden; margin: 3px 0 4px; }
.arena-hpbar i { display: block; height: 100%; background: var(--color-accent); }
.arena-mem.dead .arena-hpbar i { background: var(--arena-foe, #ff5470); }
.arena-rows { display: grid; gap: 1px; font-size: 11px; color: var(--color-stage-ink-2); }
.arena-rows div { display: flex; gap: 5px; }
.arena-rows span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-stage-ink); }
.arena-rows .best span { color: var(--color-accent); border-bottom: 2px solid var(--color-accent); }


.arena-tl { margin-top: var(--space-md); }

.arena-tl canvas {
  width: 100%; display: block; border-radius: 6px;
  border: var(--rule) solid var(--color-stage-line);
  background: var(--color-stage-2);
}
.arena-tl-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: 4px; font-size: 11px; color: var(--color-stage-ink-2); }
.arena-tl-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }


.arena-model { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-stage-ink-2); }
.arena-model ul { margin: 4px 0 0; padding-left: 1.1em; }
.arena-model li { margin: 1px 0; }



.arena-cube { grid-template-columns: minmax(0, 1fr) auto; }
.arena-cube .cube-x {
  border: 0; background: transparent; color: var(--color-stage-ink-2);
  cursor: pointer; font-size: 10px; padding: 0 2px;
}
.arena-cube .cube-x:hover { color: var(--arena-foe, #ff5470); }

.cube-chip {
  padding: 2px; border: var(--rule) solid var(--color-stage-line); border-radius: 4px;
  background: var(--color-stage-3); cursor: grab; line-height: 0;
}
.cube-chip img { width: 22px; height: 22px; }
.cube-chip:hover { border-color: var(--color-accent); }


.arena-replay-sheet { display: none; }
.arena-replay-sheet[open] { display: flex; flex-direction: column; }
.arena-replay-bar {
  flex: none; display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: var(--rule) solid var(--color-stage-line);
  background: var(--color-stage-2);
}
.arena-replay-bar b { font: 700 var(--text-sm)/1.4 var(--font-display); letter-spacing: .06em; }
.arena-replay-bar .sub { color: var(--color-stage-ink-2); font-size: var(--text-xs); }
.arena-replay-bar .btn { margin-left: auto; }
.arena-replay-frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; }