/* Foundation 0.9B.5 — canonical card and unit visuals.
   Presentation only: state and stats remain sourced from the Python view. */

.card-art-frame {
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(106,86,153,.28), transparent 48%),
    linear-gradient(160deg, #171d28, #090c12);
}

.card-art-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.card-art-frame--fallback {
  display: grid;
  place-content: center;
  justify-items: center;
  color: #8f9aab;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(214,182,110,.08) 47% 53%, transparent 54%),
    radial-gradient(circle at 50% 38%, rgba(214,182,110,.13), transparent 35%),
    linear-gradient(160deg, #161b24, #080b10);
}

.card-art-fallback-mark,
.card-art-fallback-copy {
  font-size: .47rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.card-art-fallback-number {
  margin: 3px 0;
  color: #d6b66e;
  font: 800 1.45rem/1 Georgia, serif;
}

.hand-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.command-hand .hand {
  min-height: 258px;
  gap: 10px;
  padding: 2px 2px 8px;
}

.command-hand .hand-card {
  flex: 0 0 158px;
  min-height: 246px;
  padding: 6px;
  border-color: rgba(158,130,71,.66);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(214,182,110,.08), transparent 34%),
    linear-gradient(160deg, #221d15, #0d1117 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 8px 18px rgba(0,0,0,.25);
}

.hand-card-visual {
  position: relative;
  height: 132px;
  overflow: hidden;
  border: 1px solid rgba(214,182,110,.3);
  border-radius: 7px 7px 5px 5px;
  background: #0a0d12;
}

.hand-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,6,9,.04) 50%, rgba(4,6,9,.82) 100%),
    linear-gradient(90deg, rgba(5,7,10,.28), transparent 24% 76%, rgba(5,7,10,.28));
  box-shadow: inset 0 0 18px rgba(0,0,0,.35);
}

.card-art-frame--hand {
  position: absolute;
  inset: 0;
}

.card-art-frame--hand img {
  object-position: center 36%;
  transition: transform .24s ease, filter .24s ease;
}

.hand-card:hover .card-art-frame--hand img,
.hand-card.is-selected .card-art-frame--hand img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.045);
}

.hand-card .card-no {
  position: absolute;
  z-index: 1;
  right: 6px;
  bottom: 5px;
  padding: 3px 6px;
  border: 1px solid rgba(214,182,110,.34);
  border-radius: 999px;
  color: #f0d999;
  background: rgba(4,6,9,.8);
  font-size: .53rem;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.hand-card-copy {
  min-height: 57px;
  padding: 7px 3px 4px;
}

.hand-card .hand-card-copy strong {
  margin: 0;
  overflow: hidden;
  color: #f0eadf;
  font: 800 .9rem/1.05 Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hand-card .hand-card-copy small {
  min-height: 0;
  margin: 4px 0 0;
  display: -webkit-box;
  overflow: hidden;
  color: #98a3b2;
  font: italic .61rem/1.25 Georgia, serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hand-card .hand-card-stats {
  margin: 0;
  gap: 5px;
}

.hand-card .hand-card-stats div {
  padding: 5px 6px;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(4,7,11,.76);
}

.hand-card .hand-card-stats dt {
  color: #768295;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hand-card .hand-card-stats dd {
  color: #e8dfcd;
  font-size: .86rem;
}

.battle-lanes .unit-token {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: flex-end;
  padding: 7px;
  background: #0e131a;
  text-shadow: 0 2px 7px rgba(0,0,0,.98);
}

.battle-lanes .unit-token::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,7,10,.14) 0%, rgba(5,7,10,.32) 38%, rgba(5,7,10,.96) 79%),
    linear-gradient(90deg, rgba(4,6,9,.42), transparent 35% 65%, rgba(4,6,9,.42));
}

.battle-lanes .unit-token > :not(.card-art-frame) {
  position: relative;
  z-index: 1;
}

.card-art-frame--unit {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.card-art-frame--unit img {
  object-position: center 34%;
  filter: saturate(.92) contrast(1.05) brightness(.86);
  transform: scale(1.025);
  transition: filter .2s ease, transform .2s ease;
}

.unit-token:hover .card-art-frame--unit img,
.unit-token.is-selected .card-art-frame--unit img {
  filter: saturate(1.08) contrast(1.08) brightness(.92);
  transform: scale(1.07);
}

.battle-lanes .unit-token .unit-top {
  position: absolute;
  top: 6px;
  right: 6px;
  left: 6px;
  color: #d6dde7;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.battle-lanes .unit-token .unit-top span {
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(4,6,9,.68);
  backdrop-filter: blur(3px);
}

.battle-lanes .unit-token > strong {
  color: #fff8e9;
  font: 800 clamp(.62rem, .72vw, .82rem)/1.05 Georgia, serif;
}

.battle-lanes .unit-token > small {
  min-height: 1.4em;
  color: #b7c0cd;
  font-size: .51rem;
}

.battle-lanes .unit-token .unit-stats {
  margin-top: 5px;
  color: #f2eadb;
  font-size: .58rem;
}

.battle-lanes .unit-token .token-badges {
  margin-top: 4px;
}

.battle-lanes .unit-token .token-badges span {
  padding: 2px 4px;
  color: #d8dee7;
  background: rgba(12,17,24,.88);
  font-size: .47rem;
}

.battle-lanes .unit-token.exhausted {
  opacity: 1;
  filter: none;
}

.battle-lanes .unit-token.exhausted .card-art-frame--unit img {
  filter: grayscale(.82) saturate(.28) brightness(.54);
}

.battle-lanes .unit-token.exhausted::after {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(8,10,13,.18) 9px 12px),
    linear-gradient(180deg, rgba(5,7,10,.28), rgba(5,7,10,.97) 78%);
}

.battle-lanes .unit-token.own.ready {
  box-shadow: inset 0 0 0 1px rgba(106,176,134,.12), 0 7px 18px rgba(0,0,0,.26);
}

.battle-lanes .unit-token.enemy.ready {
  box-shadow: inset 0 0 0 1px rgba(205,108,120,.1), 0 7px 18px rgba(0,0,0,.26);
}

.selection-card-art {
  width: min(132px, 78%);
  aspect-ratio: 941 / 1672;
  margin-bottom: 11px;
  overflow: hidden;
  border: 1px solid rgba(214,182,110,.58);
  border-radius: 8px;
  background: #090c11;
  box-shadow: 0 12px 26px rgba(0,0,0,.46), 0 0 0 2px rgba(214,182,110,.05);
}

.selection-card-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.selection-card-art--fallback {
  display: grid;
  place-content: center;
  justify-items: center;
  color: #7f8a99;
  background:
    radial-gradient(circle at 50% 34%, rgba(214,182,110,.14), transparent 28%),
    linear-gradient(145deg, #171c25, #080b10);
}

.selection-card-art--fallback > span:first-child {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.selection-card-art--fallback > span:nth-child(2) {
  margin: 6px 0;
  color: #d6b66e;
  font: 800 2.15rem/1 Georgia, serif;
}

.selection-card-art--fallback small {
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .command-hand .hand-card {
    flex-basis: 150px;
  }

  .selection-card-art {
    width: 142px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-art-frame img {
    transition: none !important;
  }

  .hand-card:hover .card-art-frame img,
  .unit-token:hover .card-art-frame img,
  .hand-card.is-selected .card-art-frame img,
  .unit-token.is-selected .card-art-frame img {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .battle-lanes .unit-token .unit-top span {
    backdrop-filter: none;
    background: #090c11;
  }
}

@media (forced-colors: active) {
  .card-art-frame,
  .selection-card-art {
    border: 1px solid CanvasText;
  }

  .hand-card-visual::after,
  .battle-lanes .unit-token::after {
    background: transparent;
  }
}