/* Darkpool inventory (M16) — collectible-card grid + program detail + swap. */

.inv__layout {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 380px);
  gap: 18px;
  align-items: start;
}
.inv__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.inv__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }

.inv__flash {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  font-family: var(--font-display);
  font-size: 18px; letter-spacing: 0.1em;
  color: var(--acid);
  border: 1px solid var(--acid);
  background: rgba(0,0,0,0.85);
  padding: 8px 18px;
  text-shadow: 0 0 8px rgba(182,255,92,0.6);
  animation: invFlash 2.2s ease-out forwards;
}
@keyframes invFlash {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* sections */
.inv-section { display: flex; flex-direction: column; gap: 10px; }
.inv-section__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px dashed var(--void-line); padding-bottom: 6px;
}
.inv-section__title {
  font-family: var(--font-display);
  font-size: 18px;
}
.inv-section__title--mag  { color: var(--magenta); text-shadow: 0 0 6px var(--magenta-glow); }
.inv-section__title--cyan { color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); }
.inv-section__title--bone { color: var(--bone); }
.inv-section__hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--bone-dim);
}
.inv-grid { display: grid; gap: 12px; }
.inv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.inv-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* program card */
.pcard {
  border: 1px solid var(--void-line);
  background: rgba(0,0,0,0.4);
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, transform 120ms;
  position: relative;
  min-height: 200px;
  user-select: none;
}
.pcard:hover { transform: translateY(-1px); }
.pcard.is-selected {
  border-color: var(--bone);
  box-shadow: 0 0 0 1px var(--bone) inset;
}
.pcard--attack { border-left: 3px solid var(--magenta-deep); }
.pcard--attack:hover { border-color: var(--magenta); }
.pcard--defense { border-left: 3px solid var(--cyan-deep); }
.pcard--defense:hover { border-color: var(--cyan); }
.pcard--empty {
  border-style: dashed;
  align-items: center; justify-content: center;
  background: transparent;
}
.pcard--empty:hover { border-color: var(--ash); }

/* eligible swap target — pulses to draw the eye */
.pcard.is-eligible {
  border-color: var(--acid);
  box-shadow: 0 0 0 1px var(--acid) inset, 0 0 14px rgba(182,255,92,0.35);
  animation: pcard-eligible 1500ms ease-in-out infinite;
}
@keyframes pcard-eligible {
  0%, 100% { box-shadow: 0 0 0 1px var(--acid) inset, 0 0 10px rgba(182,255,92,0.25); }
  50%      { box-shadow: 0 0 0 1px var(--acid) inset, 0 0 20px rgba(182,255,92,0.55); }
}

/* in-card swap button — hidden until card is selected or eligible */
.pcard__actions {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.pcard__swap-btn {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--void-line);
  color: var(--bone-dim);
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
  display: none;
}
.pcard.is-selected .pcard__swap-btn,
.pcard.is-eligible .pcard__swap-btn,
.pcard.is-swap-source .pcard__swap-btn {
  display: inline-block;
}
.pcard.is-selected:not(.is-swap-source) .pcard__swap-btn {
  border-color: var(--bone);
  color: var(--bone);
  background: var(--bg-panel);
}
.pcard.is-selected:not(.is-swap-source) .pcard__swap-btn:hover {
  background: var(--bone);
  color: var(--bg);
}
.pcard.is-swap-source .pcard__swap-btn {
  border-color: var(--rust);
  color: var(--rust);
  background: rgba(255,138,60,0.05);
}
.pcard.is-swap-source .pcard__swap-btn:hover {
  background: var(--rust);
  color: var(--bg);
}
.pcard.is-eligible .pcard__swap-btn {
  border-color: var(--acid);
  color: var(--acid);
  background: rgba(182,255,92,0.08);
  text-shadow: 0 0 6px rgba(182,255,92,0.4);
  font-size: 12px;
  padding: 6px 12px;
}
.pcard.is-eligible .pcard__swap-btn:hover {
  background: var(--acid);
  color: var(--bg);
  text-shadow: none;
}

/* Stat-delta preview shown on eligible swap targets.
   Sits inline below the stats row so it doesn't fight with the
   role label or program art. */
.pcard__swap-delta {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.pcard__swap-delta-stat {
  border: 1px solid var(--void-line);
  padding: 1px 5px;
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pcard__swap-delta-stat--up {
  color: var(--acid);
  border-color: var(--acid);
  text-shadow: 0 0 4px rgba(182,255,92,0.4);
}
.pcard__swap-delta-stat--down {
  color: var(--rust);
  border-color: var(--rust);
}
.pcard__swap-delta-stat--zero {
  color: var(--ash);
}

/* Reserve a little extra room at the bottom for the in-card button. */
.pcard {
  padding-bottom: 36px;
}

.pcard__head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pcard__rarity { color: var(--bone-dim); }
.pcard__rarity--common { color: var(--ash); }
.pcard__rarity--rare   { color: var(--cyan); }
.pcard__rarity--epic   { color: #c08aff; }
.pcard__rarity--mythic { color: #ffd86b; text-shadow: 0 0 6px rgba(255,216,107,0.5); }
.pcard__role {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pcard__role--attack  { color: var(--magenta); }
.pcard__role--defense { color: var(--cyan); }
/* mythic-only ambient glow, mirrors the catalog */
.pcard--mythic { box-shadow: 0 0 18px rgba(255,216,107,0.10); }
.pcard__art {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 0;
  border-top: 1px dashed var(--void-line);
  border-bottom: 1px dashed var(--void-line);
  min-height: 60px;
}
.pcard__name {
  font-family: var(--font-display);
  color: var(--bone);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard__type {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.pcard__stats {
  display: flex; gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}
.pcard__stat {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-display);
}
.pcard__stat-lbl {
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.05em;
}
.pcard__stat-val {
  font-size: 18px;
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.pcard__stat-val--mag  { color: var(--magenta); text-shadow: 0 0 6px var(--magenta-glow); }
.pcard__stat-val--cyan { color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); }
.pcard__stat-val--inert { color: var(--ash); }
.pcard__empty-mark {
  font-family: var(--font-body);
  color: var(--ash);
  letter-spacing: 0.1em;
  font-size: 14px;
}
.pcard__slot-empty {
  position: absolute; top: 8px; left: 10px;
  font-family: var(--font-body);
  color: var(--ash);
  font-size: 11px;
}

/* detail pane */
.detail-pane { padding: 14px 16px; }
.detail-pane__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px dashed var(--void-line);
  padding-bottom: 6px; margin-bottom: 10px;
}
.detail-pane__hero {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
}
.detail-pane__hero-name {
  font-family: var(--font-display);
  color: var(--magenta);
  text-shadow: 0 0 6px var(--magenta-glow);
  font-size: 26px;
  line-height: 1;
}
.detail-pane__hero-sub {
  font-family: var(--font-body);
  font-size: 13px;
  margin-top: 6px;
}
.detail-pane__flavor {
  border-left: 2px solid var(--magenta-deep);
  padding: 6px 10px;
  margin: 0 0 14px 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--bone-dim);
  white-space: pre-wrap;
  background: rgba(255,79,216,0.04);
}
.detail-pane__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  border-top: 1px dashed var(--void-line);
  padding-top: 12px;
}
.detail-stat { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.detail-stat__lbl {
  font-family: var(--font-display);
  color: var(--ash);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.detail-stat__val {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.detail-stat__val--mag  { color: var(--magenta); text-shadow: 0 0 6px var(--magenta-glow); }
.detail-stat__val--cyan { color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); }
.detail-stat__val--inert { color: var(--ash); }
.detail-stat__hint {
  font-family: var(--font-body);
  color: var(--bone-dim);
  font-size: 11px;
}
.detail-pane__empty {
  text-align: center; padding: 24px 0;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
  color: var(--ash);
}

/* extended dossier sections (long-form lore) */
.detail-pane__section-head {
  font-family: var(--font-display);
  color: var(--ash);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 14px;
  margin-bottom: 6px;
  border-top: 1px dashed var(--void-line);
  padding-top: 10px;
}
.detail-pane__dossier-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--bone-dim);
  margin: 0;
  white-space: normal;
}

.detail-intel {
  margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.detail-intel__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  align-items: baseline;
}
.detail-intel__row dt {
  color: var(--ash);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}
.detail-intel__row dd {
  margin: 0;
  color: var(--bone);
}

.detail-oplog__quote {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--acid);
  background: rgba(182,255,92,0.04);
  border-left: 2px solid var(--acid);
  padding: 6px 10px;
  margin: 0;
  white-space: pre-wrap;
  text-shadow: 0 0 4px rgba(182,255,92,0.25);
}
.detail-oplog__attr {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--bone-dim);
  text-align: right;
  margin-top: 4px;
}

/* legend */
.inv-legend {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--bone-dim);
  border: 1px dashed var(--void-line);
  padding: 10px 12px;
  margin: 0;
  background: rgba(0,0,0,0.2);
  white-space: pre-wrap;
}

@media (max-width: 1100px) {
  .inv__layout { grid-template-columns: 1fr; }
  .inv__side { position: static; }
  .inv-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .inv-grid--3, .inv-grid--4 { grid-template-columns: 1fr 1fr; }
  /* Tighten buttons to fit two side-by-side inside the narrow mobile card
     while keeping the full word labels readable. */
  .pcard__actions { gap: 3px; }
  .pcard__info-btn, .pcard__swap-btn {
    font-size: 9px;
    letter-spacing: 0;
    padding: 4px 5px;
  }
}

/* ── [ ⓘ INFO ] button + info modal ─────────────────────────────────────
   Adds a per-card info button (always visible, side-by-side with [ ⇄ SWAP ]
   inside .pcard__actions) and a centered modal that opens on click.
   Reversible: delete this block + the `.pcard__info-btn` / `.inv-modal*`
   markup in inventory.html, then restore the original `.pcard__swap-btn`
   absolute-positioning rules. */
.pcard__info-btn {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--void-line);
  color: var(--bone-dim);
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.pcard__info-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(92,242,255,0.06);
}

.inv-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.inv-modal[hidden] { display: none; }
.inv-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
}
.inv-modal__content {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--magenta-deep);
  padding: 32px 20px 18px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 24px rgba(255,79,216,0.10);
}
.inv-modal__close {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--ash);
  color: var(--ash);
  cursor: pointer;
  text-transform: uppercase;
}
.inv-modal__close:hover {
  border-color: var(--magenta);
  color: var(--magenta);
}