/* card.css – Complete Updated Styles for Riftbound Eco Proxy */


/* Container in horizontal mode */
#card-container.layout-horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fill, 63mm);
  grid-auto-rows: 88mm;
  gap: 0px;
  padding: 16px;
  justify-content: start;
}

/* Base card wrapper */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  background: #fff;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

/* Quantity badge */
.qty-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2000; 
}

/* === Unit / Spell / Gear Shared Styles === */

/* Top bar: cost + power icons and might */
.card .top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;       /* vertical centering */
  padding: 0 6px;            /* horizontal padding only */
  height: 14mm;              /* slightly taller for breathing room */
  border-bottom: 1px solid #000;
  box-sizing: border-box;
}
.card .cost,
.card .might {
  font-size: 14pt;           /* unified text size */
  font-weight: bold;
  display: flex;
  align-items: center;       /* center icon and text */
  gap: 4px;
}
.card .cost .cost-icon,
.card .might img {
  width: 16px;               /* uniform icon sizing */
  height: 16px;
}

/* Name bar */
.card .name {
  padding: 4px 6px;
  font-size: 12pt;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  flex-shrink: 0;
}

.card .middle {
  position: relative;
  flex: 1;
  padding: 6px 6px 6px 9px;   /* extra left padding preserved */
  display: flex;
  flex-direction: column;
  justify-content: center;    /* center vertically */
  align-items: flex-start;    /* start at left edge */
  text-align: middle;           /* remove justified spacing */
  font-size: 9pt;
  overflow-y: auto;
  overflow-x: visible;
}
 .middle .desc-wrap {
  display: block;                /* not a flex item */
  width: 100%;
}

/* Color indicator inside middle */
 .middle .color-indicator {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  z-index: 2;
  word-wrap: break-word;
}
 .middle .color-indicator img {
  width: 18px;
  height: 18px;
  display: inline-block;     
  vertical-align: text-bottom;
}
 .middle .color-text {
  font-size: 8pt;
  font-weight: bold;
  text-transform: capitalize;
  color: #000;
  white-space: nowrap;
}

/* Bottom bar: type/tags only, left-justified */
 .bottom-bar {
  padding: 4px 6px;
  border-top: 1px solid #000;
  height: 10mm;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-size: 8pt;
  font-weight: bold;
}
 .type-line {
  white-space: nowrap;
}

/* === Battlefield Cards === */
.card.battlefield {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #000;
  background: #fff;
  box-sizing: border-box;
  overflow: visible;
}

.card.battlefield .bf-columns {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Side panels – auto width, centered vertically, padded horizontally */
.card.battlefield .bf-col.side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;       /* added 8px left/right padding */
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* LEFT panel: vertical-rl, left‐aligned text */
.card.battlefield .bf-col.side.left .bf-text {
  writing-mode: vertical-rl;
  white-space: normal;
  font-size: 8pt;
  line-height: 1.2;
  text-align: start;      /* left‐align along flow */
  margin: 0;
  padding: 0;
  word-break: break-word;
}

/* RIGHT panel: vertical-rl + 180° rotation, left‐aligned text */
.card.battlefield .bf-col.side.right .bf-text {
  writing-mode: vertical-rl;
  white-space: normal;
  font-size: 8pt;
  line-height: 1.2;
  text-align: start;
  margin: 0;
  padding: 0;
  word-break: break-word;
  transform: rotate(180deg);
  transform-origin: center;
}

/* Center panel – fills remaining space */
.card.battlefield .bf-col.center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

/* “BATTLEFIELD” label */
.card.battlefield .bf-type-text {
  font-size: 12pt;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
  color: #000;
}

/* Name under the label */
.card.battlefield .bf-name {
  font-size: 10pt;
  text-align: center;
  color: #000;
}


/* === Legend Cards === */
.card.legend {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 1) Top third: legend-header */
.card.legend .legend-header {
  flex: 1 1 33.33%;
  display: flex;
  align-items: flex-start;       /* keep header items at top */
  justify-content: space-between;
  padding: 6px 8px;
  box-sizing: border-box;
}
.card.legend .legend-icons {
  display: flex;
  flex-direction: column;        /* stack icons vertically */
  align-items: center;
  gap: 6px;
}
.card.legend .legend-icons img {
  width: 50px;
  height: 50px;
}
.card.legend .legend-title {
  font-size: 10pt;
  font-weight: bold;
  text-transform: uppercase;
  align-self: flex-start;        /* move “LEGEND” to top of header */
}

/* 2) Middle third: legend-name */
.card.legend .legend-name {
  flex: 1 1 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
  text-align: center;
  /* no border */
}
.card.legend .legend-name .main-title {
  font-size: 18pt;      /* a bit larger for the character name */
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
}
.card.legend .legend-name .subtitle {
  font-size: 12pt;      /* slightly smaller moniker */
  font-weight: normal;  /* remove bold */
  font-style: italic;
  margin: 4px 0 0 0;
  color: #333;
}
/* 3) Bottom third: legend-body */
.card.legend .legend-body {
  flex: 1 1 33.33%;          /* fills bottom third */
  align-items: center;       /* vertical centering */
  padding: 6px 10px;
  box-sizing: border-box;
  overflow-y: auto;
  text-align: left;
  font-size: 10pt;
}
.card.legend .legend-body-text {
  width: 100%;
}

/* === Rune Cards === */
.card.rune {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #000;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

/* Title at top (no bottom border) */
.card.rune .rune-title {
  flex: 0 0 auto;
  padding: 8px 6px;
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
  text-transform: uppercase;
  /* border-bottom: 1px solid #000;  <-- removed */
  box-sizing: border-box;
}

/* Centered symbol */
.card.rune .rune-image {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  box-sizing: border-box;
}
.card.rune .rune-image img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

/* Inline icons (shared) */
.inline-icon {
  width: 12px;
  height: 12px;
  vertical-align: text-bottom;
  display: inline-block;
}
/* 1. Absolutely position the full proxy image */
.card .card-img {
  position: absolute;         /* ← add this */
  top: 0;                     /* ← fill the card */
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* if you want to preserve aspect */
  z-index: 0 !important;      /* keep behind everything */
}
/* Hover bar styling */
.card .hover-bar {
  position: absolute;
  left: 0;
  width: 100%;
  display: none;
  bottom: 0px;
  z-index: 1000 !important; 
}
.card .hover-bar button {
  flex: 1;
  margin: 0;
  border-radius: 0;
}
.card .add-btn,
.card .remove-btn {
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  width: 24px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
}

/* Button hover state: dark→light gray */
.card .add-btn:hover,
.card .remove-btn:hover {
  background: rgba(200, 200, 200, 0.9);
}
.card:hover .hover-bar {
  display: flex;
}

/* Move quantity badge to bottom right */
.card .qty-badge {
  top: auto;
  bottom: 4px;
  right: 4px;
  z-index: 2000;
}

#close-search {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 1.2em;
  cursor: pointer;
}

#search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, 63mm);
  grid-auto-rows: 88mm;
  gap: 0;
  padding: 0;
}

#search-results .card {
  width: 100%;
  height: 100%;
}