.card-swap {
  position: relative;
  width: 100%;
  height: 100%;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.card-swap-sizer {
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.card-swap-sizer > span {
  display: block;
  width: 100%;
  max-width: var(--swap-stage-w);
  aspect-ratio: var(--swap-ratio);
}

.card-swap-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--swap-stage-w);
  height: var(--swap-stage-h);
  perspective: 900px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.card-swap-slot {
  position: absolute;
  top: var(--swap-oy);
  left: var(--swap-ox);
  width: var(--swap-w);
  height: var(--swap-h);
  margin: calc(var(--swap-h) / -2) 0 0 calc(var(--swap-w) / -2);
  border-radius: var(--swap-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--swap-shadow);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-swap:focus-visible .card-swap-slot[data-front] {
  outline: 2px solid var(--swap-ink);
  outline-offset: 3px;
}

.card-swap-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: var(--swap-shade);
  opacity: 0;
  pointer-events: none;
}

.card-swap-card {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  background: var(--swap-tile);
  color: var(--swap-ink);
}

.card-swap-card-rim {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--swap-tile-edge),
    inset 0 1px 0 var(--swap-tile-highlight);
  pointer-events: none;
}

.card-swap-frame {
  height: 600px;
  margin-top: 1.2rem;
}

.swap-note {
  margin-top: 1.5rem;
  color: var(--muted);
}

.ability-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #10182a;
}

.ability-photo {
  display: block;
  width: 100%;
  height: 112px;
  flex: 0 0 112px;
  object-fit: cover;
}

.ability-body {
  min-height: 0;
  padding: 0.55rem 0.85rem 0.7rem;
  overflow: hidden;
}

.ability-card.tone-cyan {
  background: linear-gradient(180deg, #123f4a 0%, #10182a 72%);
}

.ability-card.tone-blue {
  background: linear-gradient(180deg, #1a3058 0%, #10182a 72%);
}

.ability-card.tone-violet {
  background: linear-gradient(180deg, #2c2458 0%, #10182a 72%);
}

.ability-card.tone-amber {
  background: linear-gradient(180deg, #3d2c14 0%, #10182a 72%);
}

.ability-card.tone-cyan .kicker,
.ability-card.tone-cyan .band-index { color: #7af0ff; }

.ability-card.tone-blue .kicker,
.ability-card.tone-blue .band-index { color: #9ec1ff; }

.ability-card.tone-violet .kicker,
.ability-card.tone-violet .band-index { color: #c4b5fd; }

.ability-card.tone-amber .kicker,
.ability-card.tone-amber .band-index { color: #f0c27a; }

.ability-card h3 {
  margin: 0.12rem 0 0.28rem;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.ability-card .ability-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

html:not(.js) .card-swap-frame {
  height: auto;
}

html:not(.js) .card-swap {
  display: grid;
  gap: 1rem;
  height: auto;
}

html:not(.js) .ability-card {
  min-height: 220px;
  border-radius: 18px;
}

@media print {
  .card-swap-frame {
    height: auto;
  }

  .card-swap {
    display: grid;
    gap: 1rem;
    height: auto;
  }

  .card-swap-stage,
  .card-swap-sizer,
  .card-swap-shade,
  .swap-note {
    display: none !important;
  }

  .ability-card {
    break-inside: avoid;
    min-height: 0;
    border: 1px solid #ccc;
    border-radius: 12px;
    color: #111;
    background: #fff;
  }
}