/* cards.css — card faces, character stat overlays, states, preview, menus. */

.card { position: relative; border-radius: var(--card-radius); flex: 0 0 auto; user-select: none; }
.card.face { border: 1px solid rgba(0, 0, 0, 0.6); background: #0c0d10; box-shadow: var(--shadow); }
.card.face img { display: block; width: 100%; height: 100%; border-radius: calc(var(--card-radius) - 1px); object-fit: cover; }
.card.tokenless { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink); }
.card.tokenless .tk-name { font-size: 0.62rem; padding: 0 4px; font-weight: 700; }

/* Sizes per zone */
.card.hand { width: 96px; height: 134px; transition: transform 0.13s, box-shadow 0.13s; }
.card.hand.playable { cursor: pointer; }
/* A click on an actionable card *is* the play, so the card itself reads as the
   button: it lifts and grows a touch under the cursor (no hover menu to aim at). */
.card.hand.playable:hover { transform: translateY(-7px) scale(1.07); box-shadow: 0 0 0 2px var(--accent), 0 12px 26px rgba(0, 0, 0, 0.6); z-index: 8; }
.card.hand:not(.playable) { filter: brightness(0.82); }
/* Play-area cards sit permanently at the (former hover) size — no grow on hover. */
.card.char { width: 92px; height: 129px; }
/* Reserve & Landmark cards share the in-play character size so the resource band
   (Reserve | Hero | Landmarks) reads uniformly with the Expedition row above. */
.card.reserve { width: 92px; height: 129px; }
.card.landmark { width: 92px; height: 129px; }
.card.hero { width: 96px; height: 134px; }
.card.mini { width: 60px; height: 84px; }

.card.actionable { cursor: pointer; box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
/* Actionable Reserve cards lift under the cursor the same way hand cards do. */
.card.reserve.actionable { transition: transform 0.13s, box-shadow 0.13s; }
.card.reserve.actionable:hover { transform: translateY(-7px) scale(1.07); box-shadow: 0 0 0 2px var(--accent), 0 12px 26px rgba(0, 0, 0, 0.6); z-index: 8; }
/* A card whose play is mid-resolution (a Character waiting for a lane pick) stays
   lifted and pulsing in its hand/Reserve slot so it's clearly the one being placed. */
.card.placing { cursor: default; transform: translateY(-7px) scale(1.07); z-index: 7; animation: placepulse 0.85s infinite alternate; }
@keyframes placepulse {
  from { box-shadow: 0 0 0 3px var(--accent), 0 12px 26px rgba(0, 0, 0, 0.6); }
  to { box-shadow: 0 0 0 3px var(--accent), 0 0 16px var(--accent), 0 12px 26px rgba(0, 0, 0, 0.6); }
}
/* Selected in an in-board pick (Setup's 3-of-6 Mana choice): no border — just shade
   the card down (like an exhausted/spent card) to read as "set aside as Mana". */
.card.picked { filter: brightness(0.48) grayscale(0.3); box-shadow: var(--shadow); }
/* No lift/scale on hover for cards in play; the hover preview shows the big image. */
.card.exhausted { transform: rotate(86deg); }
.card.fleeting-c { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }

/* Cost badge. Hand Cost is blue and Reserve Cost orange, matching the gems printed
   on the cards (blue sampled from the card art's Hand-Cost circle). */
.cost {
  position: absolute; top: -7px; left: -7px; width: 26px; height: 26px; border-radius: 50%;
  background: #4090c8; color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; border: 2px solid #000; z-index: 4;
}
.cost.reserve-cost { background: var(--accent); color: #160c04; }

/* Badges */
.badge {
  position: absolute; z-index: 5; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  font-size: 0.66rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
/* Boost shown with the real punch-board +1 / +2 token */
.badge.boost-tok { top: -10px; right: -10px; width: 26px; height: 26px; padding: 0; border: none; background: none; border-radius: 50%; }
.badge.boost-tok img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75)); }
.badge.boost-tok .boost-count { position: absolute; bottom: -5px; right: -5px; background: #160c04; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 8px; font-size: 0.6rem; padding: 0 3px; line-height: 1.35; }
/* Status chips shown with the real punch-board markers (image, no pill background) */
.badge.fleeting { bottom: -8px; right: -8px; width: 26px; height: 26px; min-width: 0; padding: 0; border: none; background: none; border-radius: 50%; }
.badge.anchored { bottom: -8px; left: -8px; width: 26px; height: 26px; min-width: 0; padding: 0; border: none; background: none; border-radius: 50%; }
.badge.asleep { top: -8px; left: -8px; width: 26px; height: 26px; min-width: 0; padding: 0; border: none; background: none; border-radius: 50%; }
.badge.fleeting img, .badge.anchored img, .badge.asleep img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75)); }
.badge.type-tag {
  bottom: 3px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75);
  color: var(--accent-soft); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.58rem; border: none;
}
/* Counter chip on a Landmark (e.g. Kelon counters) */
.badge.counter { top: -8px; right: -8px; min-width: 20px; height: 20px; background: #2b6cb0; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); font-size: 0.7rem; }

/* Keyword badges */
.badge.gigantic { top: -9px; left: 50%; transform: translateX(-50%); background: #c9952f; color: #160c04; }
.badge.tough { bottom: 2px; left: 50%; transform: translateX(-50%); background: #5a6b8c; color: #fff; }
.badge.defender { top: -8px; left: 50%; transform: translateX(-50%); background: #b0563f; color: #fff; }
/* Faded echo of a Gigantic body shown in the other lane */
.card.char.ghost { opacity: 0.4; filter: grayscale(0.35); pointer-events: none; outline: 1px dashed var(--line); }
.card.char.ghost:hover { transform: none; }

/* Exhausted Hero — desaturate rather than rotate (the FP marker rides on it) */
.card.hero.hero-spent img { filter: grayscale(0.65) brightness(0.62); }

/* Target highlight (expedition picker, etc.) */
.card.targetable { cursor: pointer; outline: 2px solid var(--accent); box-shadow: 0 0 14px var(--accent); animation: tpulse 0.9s infinite alternate; }
@keyframes tpulse { from { box-shadow: 0 0 6px var(--accent); } to { box-shadow: 0 0 18px var(--accent); } }

/* Event pulses */
.card.pulse-play { animation: pop 0.3s ease; }
@keyframes pop { from { transform: scale(0.7); opacity: 0.3; } to { transform: scale(1); opacity: 1; } }

/* Hover preview — large image, fixed right of board (over the sidebar). */
#card-preview { position: fixed; right: 310px; top: 50%; transform: translateY(-50%); display: none; width: 380px; z-index: 200; pointer-events: none; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.7)); }
#card-preview img { width: 100%; display: block; border-radius: 16px; border: 2px solid var(--accent); box-sizing: border-box; }
/* Previewing a bot card → border in the opponent's faction accent. */
#card-preview.opp img { border-color: var(--accent-opp); }
/* Re-scope every accent inside the opponent's board (and its Discard viewer) to the
   bot's faction, so reserve-cost badges, rings, etc. read as the bot — not as you. */
.opp-area, #discard-viewer.disc-opp {
  --accent: var(--accent-opp); --accent-soft: var(--accent-opp-soft); --accent-glow: var(--accent-opp-glow);
}

/* Context menu */
#context-menu { position: fixed; display: none; flex-direction: column; gap: 2px; background: var(--bg-2); border: 1px solid var(--accent); border-radius: 9px; padding: 5px; z-index: 150; box-shadow: var(--shadow); }
.menu-btn { background: transparent; border: none; text-align: left; white-space: nowrap; padding: 7px 12px; border-radius: 6px; }
.menu-btn:hover:not(:disabled) { background: var(--accent); color: #160c04; }