/* Full-art portrait cards occupy the original consumable row under the player's health. */
.battle-hand, .shop-hand { --card-width: calc(46 * var(--game-unit, 1px)); }
.battle-hand { grid-column: 1; grid-row: 6; align-self: start; display: flex; justify-content: center; align-items: start; gap: 9px; width: max-content; max-width: min(100%, calc(184 * var(--game-unit, 1px))); min-width: 0; margin: 10px auto 0; }
.battle-card { position: relative; flex: 0 1 var(--card-width); width: var(--card-width); min-width: 0; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 6% / 4.5%; background: transparent; box-shadow: none; display: grid; place-items: center; line-height: 0; perspective: calc(var(--card-width) * 3.25); perspective-origin: 50% 55%; }
.card-float, .card-face { display: block; width: 100%; aspect-ratio: 3 / 4; }
/* Smaller painted faces retain the existing stationary tap areas. The floor
   protects readability in a full hand; art never exceeds its available slot. */
.card-float { width: min(100%, max(24px, 78%)); pointer-events: none; transform-style: preserve-3d; transform-origin: 50% 55%; }
.card-face { position: relative; isolation: isolate; overflow: hidden; border-radius: 6% / 4.5%; transform-origin: 50% 55%; transform: translateY(var(--card-lift, 0px)) rotateX(var(--card-lean-x, 0deg)) rotateY(var(--card-lean-y, 0deg)); transition: transform .36s cubic-bezier(.18,.85,.3,1); }
/* Crop empty/supporting space, preserving each painting's gesture or impact. */
.card-face > .supply-card { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; image-rendering: pixelated; }
.card-face > .supply-ward { object-position: 50% 50%; }
.card-face > .supply-fire { object-position: 50% 100%; }
.card-face > .supply-key { object-position: 50% 25%; }
.card-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--card-light-angle, 125deg), var(--card-light, transparent), transparent 90%); opacity: var(--card-light-strength, 0); mix-blend-mode: soft-light; }
.card-mark { position: absolute; right: 3px; bottom: 3px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; max-width: calc(100% - 2px); height: 18px; padding: 0 4px; border-radius: 2px; background: #141b23e6; color: #f8edcf; font: 650 13px/1 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.card-mark .icon { width: 1em; height: 1em; flex: none; stroke-width: 2; }
.card-mark-heart { color: #d5e8b9; }
.card-mark-green-square { color: #9fd49b; }
.battle-card .card-mark, .flight.item .card-mark { right: 1px; bottom: 1px; gap: 1px; height: 11px; padding: 0 2px; border-radius: 1px; font-size: 9px; }
.battle-card .card-mark-cleanse, .flight.item .card-mark-cleanse { font-size: 8px; gap: 0; padding-inline: 1px; }
.battle-card:focus-visible { --card-lift: -1.5px; }
.battle-card:focus-visible, .battle-card:hover { z-index: 1; }
.battle-card.launched { opacity: .25; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) {
  .card-float { transform: none; }
  .card-face { transform: none; transition: none; }
}
:root[data-reduce-motion="true"] .card-float { transform: none; }
:root[data-reduce-motion="true"] .card-face { transform: none; transition: none; }

@media (max-width: 1100px) {
  .battle-hand, .shop-hand { --card-width: 39px; }
  .battle-hand { gap: 7px; }
}
/* Phone items keep their original HUD slot above the player, with portrait proportions. */
@media (max-width: 900px) and (orientation: portrait), (max-width: 699px) {
  .battle-hand, .shop-hand { --card-width: 37px; }
  .battle-hand { grid-row: 4; max-width: 90%; gap: 7px; margin-top: 5px; }
}
@media (max-width: 370px) {
  .battle-hand, .shop-hand { --card-width: 33px; }
  .battle-hand { gap: 5px; }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 640px), (min-width: 700px) and (max-width: 900px) and (orientation: landscape) {
  .battle-hand, .shop-hand { --card-width: 29px; }
  .battle-hand { gap: 5px; margin-top: 4px; }
}