:root {
  --aoa-card-bg: #0c1722;
  --aoa-card-panel: #122434;
  --aoa-card-ink: #ecf4f6;
  --aoa-card-muted: #9bb1ba;
  --aoa-card-line: rgba(172, 214, 221, .28);
  --aoa-card-accent: #58c6c0;
  --aoa-card-action: #e9b45b;
  --aoa-card-radius: 16px;
  --aoa-card-touch: 44px;
}

/* Presentation chassis only. No gameplay state, price, rarity or action is invented here. */
.aoa-art-card {
  --aoa-family-accent: var(--aoa-card-accent);
  --aoa-card-glow: var(--aoa-family-glow, rgba(88, 198, 192, .26));
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  color: var(--aoa-card-ink);
  background: var(--aoa-card-bg);
  border: 1px solid var(--aoa-card-line);
  border-radius: var(--aoa-card-radius);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .035);
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.aoa-art-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(135deg, var(--aoa-family-wash, rgba(88, 198, 192, .12)), transparent 42%);
  opacity: .85;
  transform: translate3d(-4%, 0, 0);
  will-change: transform, opacity;
}

.aoa-art-card::after {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: calc(var(--aoa-card-radius) - 6px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .20);
}

.aoa-art-card:hover,
.aoa-art-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--aoa-family-accent);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .30), 0 0 24px var(--aoa-card-glow), inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.aoa-art-card.is-selected {
  border-color: var(--aoa-family-accent);
  box-shadow: 0 0 0 1px var(--aoa-family-accent), 0 0 28px var(--aoa-card-glow), 0 14px 34px rgba(0, 0, 0, .32);
}

.aoa-art-card.is-selected::before {
  inset: -45%;
  opacity: .58;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .20) 48%, transparent 58%), linear-gradient(135deg, var(--aoa-family-wash, rgba(88, 198, 192, .14)), transparent 52%);
  animation: aoa-card-sweep 4.8s ease-in-out infinite;
}

.aoa-art-card.is-legendary {
  --aoa-card-glow: rgba(233, 180, 91, .42);
  border-color: #e9b45b;
}

.aoa-art-card.is-legendary::after {
  border-color: rgba(233, 180, 91, .56);
  box-shadow: inset 0 0 0 1px rgba(233, 180, 91, .22), inset 0 0 24px rgba(233, 180, 91, .08);
}

@keyframes aoa-card-sweep {
  0%, 100% { transform: translate3d(-18%, -3%, 0) rotate(8deg); opacity: .22; }
  48% { transform: translate3d(16%, 3%, 0) rotate(8deg); opacity: .64; }
}

.aoa-art-card__media {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  background: #081018;
}

.aoa-art-card__header,
.aoa-art-card__footer {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--aoa-card-touch);
  padding: .65rem .8rem;
}

.aoa-art-card__header { border-bottom: 1px solid var(--aoa-card-line); }
.aoa-art-card__footer { border-top: 1px solid var(--aoa-card-line); }
.aoa-art-card__title { margin: 0; font-size: 1rem; line-height: 1.4; }
.aoa-art-card__meta { color: var(--aoa-card-muted); font-size: .8rem; }

/* Twenty controlled presentation families. They alter silhouette/accent, never game rules. */
.aoa-family-sky-recon { --aoa-family-accent: #55c2d8; --aoa-family-glow: rgba(85, 194, 216, .30); --aoa-family-wash: rgba(85, 194, 216, .14); border-radius: 20px 6px 20px 6px; }
.aoa-family-strike-route { --aoa-family-accent: #e08a55; --aoa-family-glow: rgba(224, 138, 85, .30); --aoa-family-wash: rgba(224, 138, 85, .13); border-inline-start: 3px solid var(--aoa-family-accent); }
.aoa-family-command-deck { --aoa-family-accent: #dfb866; --aoa-family-glow: rgba(223, 184, 102, .32); --aoa-family-wash: rgba(223, 184, 102, .14); border-radius: 22px 22px 10px 10px; }
.aoa-family-sky-spear { --aoa-family-accent: #7fb9ef; --aoa-family-glow: rgba(127, 185, 239, .30); --aoa-family-wash: rgba(127, 185, 239, .12); border-block-end: 3px solid var(--aoa-family-accent); }
.aoa-family-atomic-seal { --aoa-family-accent: #db8b8b; --aoa-family-glow: rgba(219, 139, 139, .34); --aoa-family-wash: rgba(219, 139, 139, .14); border: 2px solid var(--aoa-family-accent); }
.aoa-family-waterway-lord { --aoa-family-accent: #4ca8bd; --aoa-family-glow: rgba(76, 168, 189, .30); --aoa-family-wash: rgba(76, 168, 189, .14); border-radius: 20px 8px 20px 8px; }
.aoa-family-frontline-battalion { --aoa-family-accent: #b59b70; --aoa-family-glow: rgba(181, 155, 112, .26); --aoa-family-wash: rgba(181, 155, 112, .12); }
.aoa-family-armored-column { --aoa-family-accent: #8fa478; --aoa-family-glow: rgba(143, 164, 120, .28); --aoa-family-wash: rgba(143, 164, 120, .12); border-inline-start: 4px solid var(--aoa-family-accent); }
.aoa-family-support-fire { --aoa-family-accent: #c88868; --aoa-family-glow: rgba(200, 136, 104, .28); --aoa-family-wash: rgba(200, 136, 104, .13); border-radius: 8px 20px 8px 20px; }
.aoa-family-attack-rotor { --aoa-family-accent: #94c9a7; --aoa-family-glow: rgba(148, 201, 167, .28); --aoa-family-wash: rgba(148, 201, 167, .12); border-block-start: 3px solid var(--aoa-family-accent); }
.aoa-family-field-skyguard { --aoa-family-accent: #a6b7c2; --aoa-family-glow: rgba(166, 183, 194, .26); --aoa-family-wash: rgba(166, 183, 194, .12); border-radius: 6px 20px 20px 20px; }
.aoa-family-red-breach { --aoa-family-accent: #de6677; --aoa-family-glow: rgba(222, 102, 119, .32); --aoa-family-wash: rgba(222, 102, 119, .13); border-inline-end: 3px solid var(--aoa-family-accent); }
.aoa-family-intercept-array { --aoa-family-accent: #73d7c7; --aoa-family-glow: rgba(115, 215, 199, .30); --aoa-family-wash: rgba(115, 215, 199, .13); border-radius: 18px 6px 18px 6px; }
.aoa-family-photon-gate { --aoa-family-accent: #89d6eb; --aoa-family-glow: rgba(137, 214, 235, .36); --aoa-family-wash: rgba(137, 214, 235, .13); box-shadow: 0 0 0 1px rgba(137, 214, 235, .35), 0 10px 26px rgba(0, 0, 0, .22); }
.aoa-family-depth-lock { --aoa-family-accent: #b9a273; --aoa-family-glow: rgba(185, 162, 115, .28); --aoa-family-wash: rgba(185, 162, 115, .13); border-radius: 16px 16px 6px 16px; }
.aoa-family-launch-shield { --aoa-family-accent: #e4a46e; --aoa-family-glow: rgba(228, 164, 110, .30); --aoa-family-wash: rgba(228, 164, 110, .13); border-block-end: 4px double var(--aoa-family-accent); }
.aoa-family-fort-line { --aoa-family-accent: #a9a28f; --aoa-family-glow: rgba(169, 162, 143, .26); --aoa-family-wash: rgba(169, 162, 143, .12); border-radius: 4px 4px 18px 18px; }
.aoa-family-blue-fortress { --aoa-family-accent: #719ce1; --aoa-family-glow: rgba(113, 156, 225, .30); --aoa-family-wash: rgba(113, 156, 225, .13); border: 1px dashed var(--aoa-family-accent); }
.aoa-family-industrial-arsenal { --aoa-family-accent: #c88955; --aoa-family-glow: rgba(200, 137, 85, .30); --aoa-family-wash: rgba(200, 137, 85, .13); border-radius: 10px; }
.aoa-family-special-containment { --aoa-family-accent: #c7a1e8; --aoa-family-glow: rgba(199, 161, 232, .32); --aoa-family-wash: rgba(199, 161, 232, .14); border: 2px solid var(--aoa-family-accent); }

@media (prefers-reduced-motion: reduce) {
  .aoa-art-card, .aoa-art-card *, .aoa-art-card::before { scroll-behavior: auto !important; transition-duration: .001ms !important; animation: none !important; }
}