/* Full-art treatment is restricted to cards in the battle, never the collection. */
.battle-layout :is(.board-row, .hand-row) .card {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: #141a1d;
  border-radius: 6px;
  box-shadow: 0 3px 9px #0005;
}
.battle-layout :is(.board-row, .hand-row) .card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}
.battle-layout :is(.board-row, .hand-row) .card-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.battle-layout :is(.board-row, .hand-row) .card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #080d1330, transparent 32%, #080d1330 48%, #080d13eb 80%, #080d13 100%);
  pointer-events: none;
}
.battle-layout :is(.board-row, .hand-row) .card-top { position: absolute; inset: 5px auto auto 5px; z-index: 2; }
.battle-layout :is(.board-row, .hand-row) .cost { width: 25px; height: 25px; font-size: 13px; border: 1px solid #b9e5ff99; box-shadow: 0 2px 6px #0007; }
.battle-layout :is(.board-row, .hand-row) :is(.card-text, .card-type, .rarity) { display: none; }
.battle-layout :is(.board-row, .hand-row) .card-name {
  position: absolute;
  inset: auto 4px 45px;
  height: auto;
  max-height: 30px;
  display: block;
  overflow: hidden;
  color: #fff4de;
  font-size: 12px;
  line-height: 1.2;
  text-shadow: 0 1px 4px #000;
  overflow-wrap: anywhere;
  z-index: 1;
}
.battle-layout :is(.board-row, .hand-row) .keywords {
  position: absolute;
  inset: auto 3px 27px;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 3px;
  min-height: 0;
  height: 15px;
  overflow: hidden;
  z-index: 1;
}
.battle-layout :is(.board-row, .hand-row) .keywords span { flex-shrink: 0; padding: 0 3px; border: 0; border-radius: 2px; background: #c9b47c26; color: #edd4a0; font-size: 10px; line-height: 15px; }
.battle-layout :is(.board-row, .hand-row) .stats { position: absolute; inset: auto 5px 4px; padding: 0; display: flex; justify-content: space-between; z-index: 1; }
.battle-layout :is(.board-row, .hand-row) .stats span { min-width: 0; min-height: 20px; padding: 1px 4px; border: 0; background: #10191beb; font-size: 12px; border-radius: 3px; box-shadow: none; }
.battle-layout :is(.board-row, .hand-row) .stats .atk { color: #ffa9a0; }
.battle-layout :is(.board-row, .hand-row) .stats .hp { color: #b3e8c3; }
.battle-layout :is(.board-row, .hand-row) .non-minion .stats { display: none; }
.battle-layout :is(.board-row, .hand-row) .non-minion .card-name { bottom: 12px; }
.battle-layout .hand-row .card.unplayable { opacity: 1; filter: saturate(.75); }
.battle-layout .hand-row .card.unplayable .cost { background: #495565; }
.battle-layout .board-card.selected { outline: 2px solid #a0dbe0; outline-offset: -3px; }
.battle-layout :is(.board-card, .hero).attack-drop-ready { outline: 2px solid #a5dfcf; outline-offset: -3px; box-shadow: inset 0 0 18px #8ccaba24; }
.battle-layout .hero.attack-drop-hover { outline: 2px solid #da9991; outline-offset: -3px; }
.battle-layout .hero.attack-drop-hover.attack-drop-ready { outline-color: #bcebd9; background: #2c443e; }
.battle-layout .hand-row .card.ready::after { z-index: 4; }

.card-inspector {
  width: min(360px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  margin: auto;
  border: 0;
  overflow: visible;
  background: transparent;
  color: #f0eee6;
  font-family: inherit;
}
.card-inspector::backdrop { background: #04080cba; backdrop-filter: blur(4px); }
.card-inspector .inspect-stage { perspective: 1200px; height: min(510px, calc(100dvh - 100px)); }
.card-inspector .inspect-flipper { height: 100%; position: relative; transform-style: preserve-3d; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
.card-inspector.is-back .inspect-flipper { transform: rotateY(180deg); }
.card-inspector .inspect-face { position: absolute; inset: 0; border: 1px solid #ad9663; border-radius: 8px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #182125; box-shadow: 0 16px 60px #0008; }
.card-inspector .inspect-front { background: #182125; }
.card-inspector .inspect-art { width: 100%; height: 100%; object-fit: contain; }
.card-inspector .inspect-front-name { position: absolute; inset: auto 0 0; padding: 28px 16px 18px; text-align: center; background: linear-gradient(transparent, #081014ed); font-size: 23px; }
.card-inspector .inspect-back { transform: rotateY(180deg); display: flex; flex-direction: column; background: linear-gradient(145deg, #243239, #151b1e 65%); }
.card-inspector header { flex: 0 0 auto; padding: 22px 22px 16px; border-bottom: 1px solid #a992603d; }
.card-inspector .inspect-meta { font-size: 12px; color: #cbb98d; }
.card-inspector h2 { margin: 10px 0; color: #f6e3b8; font-family: Georgia, "Songti SC", serif; font-size: 24px; line-height: 1.35; overflow-wrap: anywhere; }
.card-inspector .inspect-stats { margin: 0; font-size: 14px; color: #b9e2dc; }
.card-inspector .inspect-reading { min-height: 0; overflow: auto; padding: 20px 22px; font-size: 15px; line-height: 1.85; overscroll-behavior: contain; }
.card-inspector .inspect-effect { margin: 0; white-space: pre-wrap; }
.card-inspector dl { margin: 20px 0 0; }
.card-inspector dt { color: #e1c388; font-weight: 700; font-size: 13px; }
.card-inspector dd { margin: 0 0 12px; font-size: 13px; color: #c0ced1; }
.card-inspector .inspect-actions { display: flex; gap: 8px; padding-top: 12px; }
.card-inspector button { min-height: 40px; flex: 1; padding: 8px; border: 1px solid #7b806f; border-radius: 5px; background: #202a2e; color: #f0eee6; font: inherit; font-size: 13px; cursor: pointer; }
.card-inspector button:disabled { opacity: .5; cursor: not-allowed; }
.card-inspector button:focus-visible { outline: 2px solid #a7e3e6; outline-offset: 3px; }
.card-inspector [hidden] { display: none; }
.battle-layout .card { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.battle-layout .card img { pointer-events: none; -webkit-user-drag: none; }
.battle-layout .hand-row .card { touch-action: pan-x; cursor: grab; }
.battle-layout .hand-row .card:active { cursor: grabbing; }
.battle-layout .player-panel.hand-drop-ready { outline: 2px solid #b5dfda; outline-offset: -3px; background-color: #233b39; }
.battle-layout .hand-drag-layer { position: fixed; inset: 0; display: block; z-index: 60; pointer-events: none; margin: 0; padding: 0; overflow: visible; }
.battle-layout .hand-drag-layer .card { width: 130px; height: 182px; min-height: 0; max-height: none; margin: 0; opacity: .94; transition: none; box-shadow: 0 16px 25px #0009; }
@media (prefers-reduced-motion: reduce) {
  .card-inspector .inspect-flipper { transition: none; }
  .battle-layout :is(.board-row, .hand-row) .card { transition: none; }
}