.card {
  width: var(--card-w, 130px);
  height: var(--card-h, 182px);
  border-radius: 10px;
  background: var(--bg-card);
  border: 2px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 5px;
  font-size: var(--card-fs, 10px);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* Long-press and right-click on the card never invoke the browser's
     native image / link menu — they just keep the tooltip up. */
  -webkit-touch-callout: none;
  /* Container query context: the clock-emoji and "SP" suffix in the
     stats row hide themselves when the card renders narrow (see
     .card-clock-icon / .card-spirit-suffix below). Width-based, not
     viewport-based, so the deck-builder modal's enlarged cards keep
     the labels even on a phone. */
  container-type: inline-size;
}

.hand-area.opponent .card {
  width: var(--opp-card-w, 90px);
  height: var(--opp-card-h, 126px);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

/* Slide-to-preview focus indicator. Mirrors the :hover lift but is
   JS-driven by DragController so it follows the current focus card as
   the player slides their pointer through the hand — :hover would stay
   pinned to the original tapped card under pointer capture. */
.card.preview-focused:not(.dragging):not(.snap-back) {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

/* While a drag session is active, suppress the browser's natural :hover
   lift on cards. Pointer capture pins :hover to the originally-tapped
   card, so without this the original card stays visually raised even
   after focus has moved (via slide-to-preview) to a different card.
   The actively-dragged card (`.dragging`, z-index 1000) and the focus
   card (`.preview-focused`, with its own lift) are exempt — otherwise
   this rule would wipe out their visuals too. */
.drag-session-active .card:hover:not(.dragging):not(.preview-focused) {
  transform: none;
  box-shadow: none;
  z-index: auto;
}

.card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  transform: translateY(-8px);
}

.card.selectable {
  cursor: pointer;
}

.card.selectable:hover {
  border-color: var(--accent);
}

.card.not-playable {
  opacity: 0.5;
  cursor: not-allowed;
}

.card.not-playable:hover {
  transform: none;
  box-shadow: none;
}

.card.exhausted::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--exhausted-overlay);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

.card.exhausted::before {
  content: '💤';
  position: absolute;
  /* Sits directly below the power badge (which occupies the very top-left
     corner). 24px clears the badge's ~20px footprint plus a small gap. */
  top: 24px;
  left: 2px;
  z-index: 6;
  font-size: 11px;
  line-height: 1;
  background: rgba(15, 15, 25, 0.92);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 2px 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.card.fresh::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fresh-overlay);
  border-radius: 8px;
  pointer-events: none;
}

.card.fresh::before {
  content: '🌱';
  position: absolute;
  /* Sits directly below the power badge — same offset as the exhausted
     badge above; cards are never both fresh and exhausted at the same
     time so the two never collide here. */
  top: 24px;
  left: 2px;
  z-index: 6;
  font-size: 11px;
  line-height: 1;
  background: rgba(20, 50, 25, 0.92);
  color: #fff;
  border: 1px solid rgba(150, 220, 150, 0.4);
  border-radius: 4px;
  padding: 2px 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Locked = exhausted with skipNextRefresh — the character will stay
   exhausted through their next refresh. CardView applies `.locked`
   INSTEAD of `.exhausted` for these so the lock icon replaces the 💤
   badge rather than stacking. Frost-tinted overlay distinguishes locked
   from normal exhaustion at a glance. */
.card.locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--locked-overlay);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

.card.locked::before {
  content: '🔒';
  position: absolute;
  top: 24px;
  left: 2px;
  z-index: 6;
  font-size: 11px;
  line-height: 1;
  background: rgba(20, 30, 70, 0.92);
  color: #fff;
  border: 1px solid rgba(140, 170, 230, 0.4);
  border-radius: 4px;
  padding: 2px 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.card.face-down {
  background: linear-gradient(135deg, #2d1b69 0%, #1a1a4e 50%, #2d1b69 100%);
  border-color: #4a3080;
  cursor: default;
}

.card.face-down:hover {
  transform: none;
  box-shadow: none;
}

.card.face-down::before {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgba(255, 255, 255, 0.15);
}

/* Rarity gem (just below card art, bottom-right) */
.card-rarity-gem {
  position: absolute;
  bottom: -12px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  z-index: 1;
  display: none;
}

.card[data-rarity="uncommon"] .card-rarity-gem {
  display: block;
  background: var(--uncommon-border);
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
}

.card[data-rarity="rare"] .card-rarity-gem {
  display: block;
  background: var(--rare-border);
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
}

.card[data-rarity="legendary"] .card-rarity-gem {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--legendary-border);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.card[data-rarity="legendary"] {
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.12);
}

.card-art {
  min-height: 50px;
  flex: 1 1 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 3px;
  overflow: visible;
  position: relative;
}

.card-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
  /* Take the image out of pointer-event handling so long-press / hover
     fall through to the .card itself. Combined with `draggable="false"`
     and the contextmenu preventDefault on .card, this stops Chrome on
     Android from popping its image context menu when a player holds
     a card to keep the tooltip up. */
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.card-art .placeholder-art {
  font-size: 22px;
  opacity: 0.6;
}

.card-name {
  font-weight: 700;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 2px;
}

/* Spirit is always pinned to the right; clock and armor (when present)
   cluster on the left. With only spirit present, margin-left:auto pushes
   it to the right edge regardless. */
.card-stats .card-spirit {
  margin-left: auto;
}

.card-power {
  font-weight: 700;
  color: var(--accent);
  font-size: 15px;
}

/* Power badge — flush with the card's upper-left corner, looks like an
   extension of the frame that bumps out over the art. Background matches
   the card body so it reads as part of the frame, not an overlay; no
   border, no inset. The bottom-right corner is softly rounded so it
   blends into the art rather than cutting hard into it. */
.card-power-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 1px 7px 2px 6px;
  border-top-left-radius: 10px;     /* matches the card's outer corner */
  border-bottom-right-radius: 6px;  /* soft bump-out into the art */
  background: var(--bg-card);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
  pointer-events: none;
}

/* United-attack bonus power: a "+N" badge that sits flush under the
   primary attacker's power badge, showing the summed power of all
   joiners. Mirrors .card-power-badge dimensions so the two read as a
   stacked pair. Only ever attached to a .united-primary card. */
.card-power-bonus {
  position: absolute;
  top: 18px;                        /* sits right under .card-power-badge */
  left: 0;
  z-index: 4;
  padding: 1px 7px 2px 6px;
  border-bottom-right-radius: 6px;
  background: var(--bg-card);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.1;
  pointer-events: none;
}

.card-armor {
  font-weight: 700;
  color: #a0a0b0;
  font-size: 10px;
}

.card-spirit {
  font-weight: 600;
  color: var(--spirit-blue);
  font-size: 12px;
}

.card-clock {
  font-weight: 600;
  color: #d6b75a;
  font-size: 12px;
}

/* Below ~80px wide the clock emoji + " SP" suffix overflow the stats row
   on phones, leaving the player squinting at "⏱" with no number visible.
   Drop both labels at that size so just the colored numbers remain — the
   color (yellow / spirit-blue) carries the meaning, and a tap opens the
   tooltip with full labels. Container-scoped so an enlarged card (deck-
   builder modal) keeps the labels regardless of viewport. */
@container (max-width: 80px) {
  .card-clock-icon,
  .card-spirit-suffix {
    display: none;
  }
  /* Without the " SP" suffix the spirit number sits flush right, where the
     rarity gem (bottom: -12px, right: -3px) sat happily under the "SP"
     text. Lift the gem by its radius so it clears the digit. */
  .card-rarity-gem {
    bottom: -8.5px;
  }
}

.card-ability-icon {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 12px;
  cursor: help;
  z-index: 5;
}

.card-tags {
  font-size: 7px;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-ability-text {
  font-size: 8px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
  padding: 0 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-type-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 8px;
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 5;
}

.card-type-badge.action {
  background: rgba(78, 168, 222, 0.3);
  color: var(--spirit-blue);
  z-index: 5;
}

.card-type-badge.reaction {
  background: rgba(233, 69, 96, 0.3);
  color: var(--accent);
  z-index: 5;
}

/* Ring card display (slightly different from hand card) */
.ring-slot .card {
  width: 100%;
  height: 100%;
}

.ring-slot .card:hover {
  transform: none;
}

.ring-slot .card.selected {
  transform: translateY(-6px);
}

/* Activate ability button */
.activate-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--spirit-blue);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  z-index: 15;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: background 0.15s;
}

.activate-btn:hover {
  background: #3b8abf;
}

/* Support indicator */
.support-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 8px;
  background: rgba(255, 215, 0, 0.3);
  color: var(--gold);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
}

/* Card tooltip */
.card-tooltip {
  position: fixed;
  z-index: 1000;
  width: 220px;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.card-tooltip .tooltip-art {
  margin: -12px -12px 8px -12px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  line-height: 0;
}

.card-tooltip .tooltip-art img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  object-position: top;
}

.card-tooltip .tooltip-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

/* Rarity rendered as a colored dot at the right edge of the tooltip's
   name row (replaces the previous spelled-out "uncommon" / "rare" /
   "legendary" word). The flex parent right-aligns it. */
.card-tooltip .tooltip-rarity-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.card-tooltip .tooltip-rarity-dot[data-rarity="uncommon"]  { background: var(--uncommon-border); }
.card-tooltip .tooltip-rarity-dot[data-rarity="rare"]      { background: var(--rare-border); }
.card-tooltip .tooltip-rarity-dot[data-rarity="legendary"] {
  background: var(--legendary-border);
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}

.card-tooltip .tooltip-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
}

.card-tooltip .tooltip-ability {
  background: rgba(255, 255, 255, 0.05);
  padding: 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.card-tooltip .tooltip-tags {
  color: var(--text-secondary);
  font-size: 10px;
}

.card-tooltip .tooltip-flavor {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 10px;
  margin-top: 4px;
}