/* ==========================================================================
   cards.css — Card Frame Anatomy, Status Badges, Hand Fan Tray Geometry
   Three Kingdoms KARDS Theme: Wei Azure, Shu Ochre, Crests, Badges
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Card Base Anatomy (.game-card & .card-hand)
   -------------------------------------------------------------------------- */
.game-card, .card-hand {
  width: 105px;
  height: 148px;
  border-radius: 6px;
  background: var(--bg-parchment-card);
  border: 2px solid var(--trim-bronze-dark);
  box-shadow: var(--shadow-card-default);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: grab;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.game-card:active, .card-hand:active {
  cursor: grabbing;
}

/* Faction Rim Styles */
.game-card.card-wei, .card-hand.faction-wei, .faction-wei {
  border-color: #2c5282;
  box-shadow: 0 3px 8px rgba(27, 77, 126, 0.4);
}
.game-card.card-shu, .card-hand.faction-shu, .faction-shu {
  border-color: #9b2c2c;
  box-shadow: 0 3px 8px rgba(139, 58, 43, 0.4);
}

.card-inner-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Card Header: Cost & Name */
.card-header-bar, .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
  border-bottom: 1px solid var(--trim-bronze-dark);
}

.card-cost-seal, .card-cost-badge {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #f6e05e, #b7791f);
  border: 1px solid #744210;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono-numbers);
  font-size: 11px;
  font-weight: bold;
  color: #1a202c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}
.cost-discounted {
  background: radial-gradient(circle, #48bb78, #276749) !important;
  color: #fff !important;
  border-color: #2f855a !important;
}
.cost-original {
  font-size: 9px;
  text-decoration: line-through;
  opacity: 0.7;
  margin-left: 2px;
}

.card-title-text, .card-name-banner {
  font-family: var(--font-serif-calligraphy);
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  flex: 1;
  text-align: center;
}

.card-action-cost-badge {
  font-size: 10px;
  color: #f6e05e;
  font-family: var(--font-mono-numbers);
  font-weight: bold;
  flex-shrink: 0;
}

.card-troop-banner, .troop-crest-icon {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  font-size: 9.5px;
  font-family: var(--font-serif-calligraphy);
  background: rgba(0, 0, 0, 0.4);
  color: var(--trim-gold-bright);
}

/* Card Artwork Box */
.card-art-frame {
  height: 52px;
  background: #232936;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--trim-bronze-dark);
}
.card-art-placeholder {
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 80%);
}

/* Card Description / Keywords Box */
.card-text-pane, .card-body {
  flex: 1;
  padding: 3px 5px;
  background: var(--bg-parchment-light);
  color: #1a202c;
  font-size: 9px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.card-keywords-container, .keyword-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 2px;
}
.keyword-badge, .keyword-chip {
  padding: 0 3px;
  border-radius: 2px;
  background: #2d3748;
  color: var(--trim-gold-bright);
  font-size: 8px;
  font-weight: bold;
}
.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Combat Stats Discs (Attack & Defense) */
.card-footer-stats, .card-stats-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
  background: #181c24;
  border-top: 1px solid var(--trim-bronze-dark);
}

.stat-disc, .stat-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono-numbers);
  font-size: 10.5px;
  font-weight: 900;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.stat-atk {
  background: linear-gradient(180deg, #e53e3e, #9b2c2c);
  color: #fff;
  border: 1px solid #feb2b2;
}
.stat-hp {
  background: linear-gradient(180deg, #38a169, #22543d);
  color: #fff;
  border: 1px solid #9ae6b4;
}

/* --------------------------------------------------------------------------
   2. Hidden Cards (Face-Down Opponent Mystery Cards)
   -------------------------------------------------------------------------- */
.card-hidden {
  background: #181c24;
  border: 2px solid var(--trim-bronze-dark);
  cursor: default;
}
.card-back-pattern {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.4) 10px,
    rgba(255, 255, 255, 0.03) 10px,
    rgba(255, 255, 255, 0.03) 20px
  );
}
.card-back-border {
  width: 85%;
  height: 88%;
  border: 1px solid var(--trim-bronze-light);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-back-crest {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--trim-gold-antique);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif-calligraphy);
  font-size: 20px;
  font-weight: bold;
}
.faction-wei .card-back-crest {
  background: var(--faction-wei-dark);
  color: #ebf8ff;
}
.faction-shu .card-back-crest {
  background: var(--faction-shu-dark);
  color: #fff5f5;
}

/* --------------------------------------------------------------------------
   3. Battlefield Unit Token Styling (.unit-token & .board-unit)
   -------------------------------------------------------------------------- */
.unit-token, .board-unit {
  width: 95px;
  height: 135px;
  border-radius: 5px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card-default);
  background: var(--bg-parchment-card);
  border: 2px solid var(--trim-bronze-dark);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.2s ease;
}
.unit-token:hover, .board-unit:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.unit-card-core {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.unit-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
}
.unit-name-text {
  font-family: var(--font-serif-calligraphy);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}
.unit-action-cost {
  color: #f6e05e;
  font-family: var(--font-mono-numbers);
  font-size: 9px;
}

.unit-portrait-mini {
  flex: 1;
  background: #232936;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 2px;
}
.unit-kw-row {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1px;
}
.unit-kw-mini {
  padding: 0 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--trim-gold-bright);
  font-size: 8px;
  font-weight: bold;
}

.unit-stats-bar {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px;
  background: #14171d;
}
.unit-stat-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono-numbers);
  font-size: 10.5px;
  font-weight: bold;
}
.unit-stat-pill.unit-atk {
  color: #fc8181;
}
.unit-stat-pill.unit-hp {
  color: #68d391;
}
.unit-stat-pill.val-buffed {
  color: #63b3ed !important;
}
.unit-stat-pill.val-damaged {
  color: #f56565 !important;
}

/* Status Overlays */
.status-suppressed::after, .unit-status-tag.tag-suppressed {
  content: "⛓️ 压制";
  position: absolute;
  inset: 0;
  background: rgba(45, 55, 72, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #cbd5e0;
  border-radius: 5px;
  z-index: 10;
}
.status-inhibited::after, .unit-status-tag.tag-inhibited {
  content: "🚫 抑制";
  position: absolute;
  inset: 0;
  background: rgba(116, 42, 42, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #feb2b2;
  border-radius: 5px;
  z-index: 10;
}

.unit-facedown, .status-facedown {
  background: #1a202c !important;
  border: 2px dashed #718096 !important;
}
.unit-facedown-token {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 6px;
  color: #a0aec0;
  font-size: 11px;
}

/* Action States */
.status-can-act {
  box-shadow: 0 0 10px rgba(72, 187, 120, 0.6);
  border-color: #48bb78;
}
.status-exhausted {
  filter: grayscale(40%) brightness(85%);
  cursor: default;
}
.unit-acting-active, .unit-selected, .state-selected {
  outline: 3px solid var(--trim-gold-bright) !important;
  box-shadow: 0 0 16px rgba(240, 201, 120, 0.8) !important;
}

/* --------------------------------------------------------------------------
   4. Player Hand Fan Tray Geometry & Hover Focus
   -------------------------------------------------------------------------- */
.hand-fan-tray {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  perspective: 1000px;
}

.hand-card-fan {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  position: relative;
}

/* Natural Arc Geometry using CSS Custom Variables */
.hand-card-fan .game-card, .hand-card-fan .card-hand {
  position: absolute;
  bottom: 8px;
  transform-origin: bottom center;
  transform: translateX(var(--fan-offset-x, 0px)) 
             translateY(var(--fan-offset-y, 0px)) 
             rotate(var(--fan-angle, 0deg));
  z-index: var(--fan-z-index, 1);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), z-index 0.1s ease;
}

/* Hover Focus State */
.hand-card-fan .game-card:hover, .hand-card-fan .card-hand:hover {
  transform: translateX(var(--fan-offset-x, 0px)) 
             translateY(-48px) 
             rotate(0deg) 
             scale(1.2) !important;
  z-index: 100 !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.8), 0 0 16px var(--trim-gold-bright);
  border-color: var(--trim-gold-bright);
}

/* Selected or Dragging State */
.card-hand.selected {
  outline: 3px solid var(--trim-gold-bright) !important;
  transform: translateY(-40px) scale(1.15) !important;
  z-index: 90 !important;
}
.game-card.dragging, .card-drag-ghost {
  opacity: 0.88;
  transform: scale(1.08) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.9);
  cursor: grabbing;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Singleton Floating Hover Inspector Tooltip
   -------------------------------------------------------------------------- */
.card-inspector-tooltip {
  position: fixed;
  z-index: 9990;
  width: 300px;
  background: var(--bg-dark-wood);
  border: 2px solid var(--trim-gold-antique);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.15s ease;
}
.card-inspector-tooltip.hidden {
  display: none !important;
}
.inspector-card {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--trim-bronze-dark);
  padding-bottom: 6px;
}
.inspector-name {
  font-family: var(--font-serif-calligraphy);
  font-size: 15px;
  color: var(--trim-gold-bright);
}
.inspector-cost-bar {
  display: flex;
  gap: 8px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 6px;
  border-radius: 4px;
}
.inspector-skill h4, .inspector-glossary h4 {
  font-size: 11px;
  color: var(--trim-gold-antique);
  margin-bottom: 2px;
}
.inspector-glossary ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inspector-glossary li {
  font-size: 11px;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 6px;
  border-radius: 3px;
}