/*
 * cards.css — shared card tile and card modal styles
 * Sourced from game.html; used by game.html, lobby.html, and any future pages.
 */

/* ── Card type accent colors (extend :root) ── */
:root {
  --c-bioform:  #52E87A;
  --c-protocol: #38C8D4;
  --c-catalyst: #C8943A;
  --c-mutation: #D858A8;
}

/* ── Card tile ── */
.card {
  background: var(--undergrowth);
  border: 1px solid var(--plating);
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  width: 160px;
  flex-shrink: 0;
  touch-action: none;
  transition: transform 0.15s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card:hover { border-color: var(--cold-steel); }

.card-header {
  padding: 0.22rem 0.5rem;
  border-bottom: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex-shrink: 0;
}
.bioform  .card-header { background: color-mix(in srgb, var(--c-bioform)  20%, var(--undergrowth)); border-color: color-mix(in srgb, var(--c-bioform)  28%, var(--plating)); }
.protocol .card-header { background: color-mix(in srgb, var(--c-protocol) 20%, var(--undergrowth)); border-color: color-mix(in srgb, var(--c-protocol) 28%, var(--plating)); }
.catalyst .card-header { background: color-mix(in srgb, var(--c-catalyst) 20%, var(--undergrowth)); border-color: color-mix(in srgb, var(--c-catalyst) 28%, var(--plating)); }
.mutation .card-header { background: color-mix(in srgb, var(--c-mutation) 20%, var(--undergrowth)); border-color: color-mix(in srgb, var(--c-mutation) 28%, var(--plating)); }

.hname {
  font-weight: bold;
  font-size: 0.76rem;
  color: var(--bone-moss);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.hpips {
  font-size: 0.62rem;
  color: var(--toxic-flash);
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.2;
}
.card.ip .hpips { display: none; }

.card-content {
  flex: 1;
  padding: 0.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card-content.effect-centered { justify-content: center; text-align: center; }

/* Non-in-play bioform tiles reserve exactly three lines for the ability list so
   every tile is the same height: shorter lists leave empty space, longer ones
   clamp with an ellipsis. (In-play tiles use chips and are excluded.) */
.card:not(.ip).bioform .card-content {
  flex: none;
  height: calc(0.66rem * 1.3 * 3 + 0.5rem);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ability-line { font-size: 0.66rem; color: var(--cold-steel); line-height: 1.3; }

.ability-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.59rem;
  border: 1px solid rgba(90,120,112,0.22);
  background: rgba(90,120,112,0.08);
  color: var(--cold-steel);
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.chip-more { color: #3F6058; border-color: rgba(63,96,88,0.2); background: rgba(63,96,88,0.06); }

.effect-text {
  font-size: 0.7rem;
  color: var(--bone-moss);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalyst .effect-text { color: var(--cold-steel); font-size: 0.66rem; }

.card-toxin { font-size: 0.64rem; color: #C03030; margin-top: 0.1rem; }

.bottom-bar {
  border-top: 1px solid;
  padding: 0.2rem 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.bioform .bottom-bar {
  background: color-mix(in srgb, var(--c-bioform)  10%, var(--deep-canopy));
  border-color: color-mix(in srgb, var(--c-bioform)  22%, var(--plating));
}
.catalyst .bottom-bar {
  background: color-mix(in srgb, var(--c-catalyst) 10%, var(--deep-canopy));
  border-color: color-mix(in srgb, var(--c-catalyst) 22%, var(--plating));
}

.stat-grp      { display: flex; align-items: baseline; gap: 0.2rem; }
.stat-val-pair { display: flex; align-items: baseline; }
.stat-lbl  { font-size: 0.57rem; letter-spacing: 0.05em; text-transform: uppercase; }
.stat-val  { font-size: 0.88rem; font-weight: bold; line-height: 1; }
.bioform .stat-lbl { color: color-mix(in srgb, var(--c-bioform) 55%, var(--cold-steel)); }
.bioform .stat-val { color: var(--c-bioform); }
.vit-full { color: var(--c-bioform) !important; }
.sb-pos { color: var(--splice-green); font-size: 0.68rem; font-weight: bold; line-height: 1; }
.sb-neg { color: var(--mutagen);      font-size: 0.68rem; font-weight: bold; line-height: 1; }

.dur-lbl  { font-size: 0.57rem; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--c-catalyst) 55%, var(--cold-steel)); }
.dur-pips { display: flex; gap: 4px; align-items: center; }
.dur-pip  { width: 9px; height: 9px; border-radius: 50%; background: var(--c-catalyst); flex-shrink: 0; }
.dur-pip.spent { background: color-mix(in srgb, var(--c-catalyst) 18%, var(--plating)); }
.dur-inf  { font-size: 1rem; color: var(--c-catalyst); line-height: 1; }

/* Affinity icons — Noto Emoji font */
.affinity-icon {
  font-family: "Noto Emoji", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-variant-emoji: text;
  line-height: 1;
}

/* Single-affinity inner border via inset box-shadow */
.card.has-affinity { border: 2px solid var(--aff-color-1); }

/* Dual-affinity gradient border — left/right split, gradient only near center */
.card.dual-affinity {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--undergrowth), var(--undergrowth)) padding-box,
    linear-gradient(to right, var(--aff-color-1) 43%, var(--aff-color-2) 57%) border-box;
}

.card-footer {
  border-top: 1px solid var(--plating);
  padding: 0.14rem 0.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  flex-shrink: 0;
}
.footer-type  { font-size: 0.57rem; color: #3F5550; }
.footer-rarity { /* center col, auto-width */ }
.footer-aff   { font-size: 0.72rem; display: flex; justify-content: flex-end; gap: 1px; }
.rp { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.rp-c { background: #3A5048; }
.rp-u { background: #4A7060; }
.rp-r { background: #3858A0; }
.rp-e { background: #6A3880; }
.rp-l { background: #907030; }

/* ── Card modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.78); display: flex; justify-content: center; align-items: center; z-index: 200; }

.modal-box {
  background: var(--undergrowth);
  border: 1px solid var(--plating);
  border-radius: 8px;
  max-width: 360px;
  width: 90%;
  max-height: 85vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 1px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.5), 0 20px 60px rgba(0,0,0,0.35);
  animation: box-pop 0.22s cubic-bezier(0.2,0,0,1);
}
@keyframes box-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Type-tinted header */
.modal-header {
  padding: 0.55rem 0.9rem 0.45rem;
  border-bottom: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  flex-shrink: 0;
  position: relative;
}
.modal-box.bioform  .modal-header { background: color-mix(in srgb, var(--c-bioform)  20%, var(--undergrowth)); border-color: color-mix(in srgb, var(--c-bioform)  28%, var(--plating)); }
.modal-box.protocol .modal-header { background: color-mix(in srgb, var(--c-protocol) 20%, var(--undergrowth)); border-color: color-mix(in srgb, var(--c-protocol) 28%, var(--plating)); }
.modal-box.catalyst .modal-header { background: color-mix(in srgb, var(--c-catalyst) 20%, var(--undergrowth)); border-color: color-mix(in srgb, var(--c-catalyst) 28%, var(--plating)); }
.modal-box.mutation .modal-header { background: color-mix(in srgb, var(--c-mutation) 20%, var(--undergrowth)); border-color: color-mix(in srgb, var(--c-mutation) 28%, var(--plating)); }

.modal-close { position: absolute; top: 0; right: 0; background: none; border: none; color: var(--cold-steel); font-size: 1rem; cursor: pointer; line-height: 1; display: flex; align-items: flex-start; justify-content: flex-end; min-width: 40px; min-height: 40px; padding: 0.5rem 0.6rem; transition: scale 0.1s ease; }
.modal-close:hover { color: var(--bone-moss); }
.modal-close:active { scale: 0.9; }
.modal-name { font-size: 1.05rem; font-weight: bold; color: var(--bone-moss); padding-right: 1.8rem; line-height: 1.2; text-wrap: balance; }
.modal-cost-row { display: flex; align-items: baseline; gap: 0.4rem; }
.modal-cost-pips { font-size: 0.68rem; color: var(--toxic-flash); letter-spacing: 0.1em; }
.modal-cost-label { font-size: 0.75rem; color: var(--amber-spore); }

/* Scrollable body */
.modal-body { padding: 0.65rem 0.9rem 0.5rem; display: flex; flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; }

/* Stat bar (bioform) */
.modal-stat-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--plating);
}
.modal-stat-bar.bioform .stat-lbl { color: color-mix(in srgb, var(--c-bioform) 55%, var(--cold-steel)); }
.modal-stat-bar.bioform .stat-val { color: var(--c-bioform); font-size: 1.1rem; }
.modal-stat-bar .stat-lbl { font-size: 0.65rem; }
.modal-stat-bar .stat-val-pair { display: flex; align-items: baseline; }

/* Duration bar (catalyst) */
.modal-dur-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; margin-bottom: 0.55rem; border-bottom: 1px solid var(--plating); }
.modal-dur-bar .dur-lbl  { font-size: 0.65rem; }
.modal-dur-bar .dur-pip  { width: 11px; height: 11px; }
.modal-dur-bar .dur-inf  { font-size: 1.15rem; }

.modal-section { font-size: 0.68rem; color: var(--cold-steel); letter-spacing: 0.09em; text-transform: uppercase; margin: 0.55rem 0 0.25rem; }
.modal-section:first-child { margin-top: 0; }
.modal-ability { font-size: 0.83rem; margin-bottom: 0.3rem; line-height: 1.4; }
.modal-ability-name { color: var(--splice-green); font-weight: bold; }
.modal-ability-desc { color: var(--bone-moss); }
.modal-desc { font-size: 0.83rem; color: var(--bone-moss); line-height: 1.5; word-break: break-word; margin-bottom: 0.35rem; text-wrap: pretty; }
.modal-buff { font-size: 0.83rem; color: var(--splice-green); margin-bottom: 0.2rem; }
.modal-mutation-name { color: var(--toxic-flash); }
.modal-perm-gain { font-size: 0.83rem; color: var(--amber-spore); margin-bottom: 0.2rem; }
.modal-perm-source { font-weight: bold; color: var(--bone-moss); }
.modal-play-hint { font-size: 0.78rem; color: var(--cold-steel); margin-top: 0.6rem; }
.btn-play-modal { background: var(--splice-green); color: var(--void-green); font-weight: bold; padding: 0.4rem 1.2rem; margin-top: 0.65rem; border-radius: 4px; font-family: monospace; font-size: 0.93rem; cursor: pointer; border: none; transition: filter 0.12s, scale 0.1s ease; }
.btn-play-modal:hover { filter: brightness(1.1); }
.btn-play-modal:active:not(:disabled) { scale: 0.96; }
.btn-play-modal:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

/* Modal affinity border (consistent with card tile) */
.modal-box.has-affinity { border: 2px solid var(--aff-color-1); }
.modal-box.dual-affinity {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--undergrowth), var(--undergrowth)) padding-box,
    linear-gradient(to right, var(--aff-color-1) 43%, var(--aff-color-2) 57%) border-box;
}

.modal-affinity-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.modal-affinity-tag { display: flex; align-items: center; gap: 0.25rem; font-size: 0.83rem; color: var(--bone-moss); text-transform: capitalize; }
.modal-affinity-tag .affinity-icon { font-size: 0.95rem; }

/* Modal footer — 3-column, labeled */
.modal-footer {
  border-top: 1px solid var(--plating);
  padding: 0.4rem 0.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex-shrink: 0;
}
.modal-footer-col { display: flex; flex-direction: column; gap: 0.15rem; }
.modal-footer-col--center { align-items: center; }
.modal-footer-col--right  { align-items: flex-end; }
.modal-footer-label { font-size: 0.60rem; color: var(--cold-steel); letter-spacing: 0.08em; text-transform: uppercase; }
.modal-footer-value { font-size: 0.82rem; color: var(--bone-moss); text-transform: capitalize; }

/* Inline modal (generator) — no overlay, no close button */
.inline-modal { max-width: 360px; }

/* ── Filter multiselect (dropdown popover + checkbox list) ─────────────────
   Shared by the lobby filter rows and the admin Card list view. */
.filter-ms { position: relative; display: inline-flex; }
.filter-ms-btn {
  background: var(--void-green);
  border: 1px solid var(--plating);
  color: var(--bone-moss);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-family: monospace;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.filter-ms-btn:hover { border-color: var(--cold-steel); }
.filter-ms-btn.active { border-color: var(--splice-green); color: var(--splice-green); }
.filter-ms-caret { font-size: 0.6rem; opacity: 0.7; }
.filter-ms.open .filter-ms-caret { transform: rotate(180deg); }

.filter-ms-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 170px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--undergrowth);
  border: 1px solid var(--plating);
  border-radius: 5px;
  padding: 0.3rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.filter-ms-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--bone-moss);
  white-space: nowrap;
  user-select: none;
}
.filter-ms-row:hover { background: var(--void-green); }
.filter-ms-all { font-weight: bold; color: var(--cold-steel); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; }
.filter-ms-sep { height: 1px; background: var(--plating); margin: 0.25rem 0.2rem; }
.filter-ms-opt-label { display: inline-flex; align-items: center; gap: 0.3rem; text-transform: capitalize; }

.filter-ms-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid var(--cold-steel);
  background: transparent;
  position: relative;
}
.filter-ms-check.on { background: var(--splice-green); border-color: var(--splice-green); }
.filter-ms-check.on::after {
  content: '✓';
  position: absolute;
  inset: 0;
  color: var(--undergrowth);
  font-size: 0.7rem;
  line-height: 14px;
  text-align: center;
  font-weight: bold;
}
.filter-ms-check.some { background: var(--cold-steel); border-color: var(--cold-steel); }
.filter-ms-check.some::after {
  content: '–';
  position: absolute;
  inset: 0;
  color: var(--undergrowth);
  font-size: 0.8rem;
  line-height: 12px;
  text-align: center;
  font-weight: bold;
}