.brd-root {
  --brd-card-w: 71px;
  --brd-card-h: 95px;
  --brd-gap: 0.5rem;
  --brd-edition-z: 4;
  --brd-seal-z: 8;
  --brd-sticker-z: 9;
  --brd-stake-sticker-z: 10;
  --brd-badge-z: 11;
  --brd-debuff-z: 12;
  --brd-debuff-opacity: 0.78;
  --brd-edition-opacity: 0.32;
  --brd-edition-foil-opacity: 0.26;
  --brd-edition-holographic-opacity: 0.28;
  --brd-edition-polychrome-opacity: 0.30;
  --brd-joker-sticker-size: 19px;
  --brd-joker-sticker-left: 3px;
  --brd-joker-sticker-top: 4px;
  --brd-joker-sticker-gap: 2px;
  color: #f3f3f3;
  background: #151515;
  border-radius: 0.75rem;
  padding: 1rem;
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brd-title {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.brd-section {
  margin-top: 1rem;
}

.brd-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #d7d7d7;
}

.brd-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--brd-gap);
}

.brd-card-wrap {
  width: var(--brd-card-w);
  margin: 0;
}

.brd-card {
  position: relative;
  width: var(--brd-card-w);
  height: var(--brd-card-h);
  image-rendering: pixelated;
  isolation: isolate;
  border-radius: 5px;
  overflow: visible;
}

.brd-card--playing {
  background: #fff;
}

.brd-card--joker {
  background: #000;
}

.brd-card:hover {
  transform: translateY(-2px) scale(1.05);
  z-index: 10;
}

.brd-layer {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}

.brd-enhancement-layer {
  inset: 0;
  z-index: 0;
}

.brd-base-layer {
  inset: 0;
  z-index: 1;
}

.brd-replacement-layer {
  z-index: 1;
}

.brd-soul-layer {
  inset: 0;
  z-index: 3;
}

.brd-edition-layer {
  inset: 0;
  z-index: var(--brd-edition-z);
  mix-blend-mode: screen;
  opacity: var(--brd-edition-opacity);
}

.brd-edition-layer-foil {
  opacity: var(--brd-edition-foil-opacity);
}

.brd-edition-layer-holographic,
.brd-edition-layer-holo {
  opacity: var(--brd-edition-holographic-opacity);
}

.brd-edition-layer-polychrome {
  opacity: var(--brd-edition-polychrome-opacity);
}

.brd-seal-layer {
  inset: 0;
  z-index: var(--brd-seal-z);
}

.brd-sticker-layer {
  z-index: var(--brd-sticker-z);
}

.brd-joker-sticker-stack {
  position: absolute;
  z-index: var(--brd-sticker-z);
  left: var(--brd-joker-sticker-left);
  top: var(--brd-joker-sticker-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brd-joker-sticker-gap);
  pointer-events: none;
}

.brd-joker-sticker-image {
  display: block;
  flex: 0 0 auto;
  width: var(--brd-joker-sticker-size);
  height: var(--brd-joker-sticker-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65));
}

.brd-stake-sticker-layer {
  z-index: var(--brd-stake-sticker-z);
}

.brd-debuff-layer {
  inset: 0;
  z-index: var(--brd-debuff-z);
  opacity: var(--brd-debuff-opacity);
}

.brd-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--brd-edition-z);
  pointer-events: none;
  border-radius: 5px;
  opacity: 0;
}

.brd-edition-foil::after {
  opacity: 0.6;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.8) 40%, rgba(120,180,255,0.7) 55%, transparent 100%);
  mix-blend-mode: hard-light;
}

.brd-edition-holographic::after {
  opacity: 0.55;
  background: linear-gradient(145deg, rgba(255,0,180,0.7), rgba(0,255,255,0.6), rgba(255,255,0,0.5));
  mix-blend-mode: hard-light;
}

.brd-edition-polychrome::after {
  opacity: 0.5;
  background: linear-gradient(125deg, rgba(255,0,0,0.6), rgba(255,255,0,0.55), rgba(0,255,110,0.55), rgba(0,150,255,0.6), rgba(200,0,255,0.6));
  mix-blend-mode: color;
}

.brd-edition-negative {
  filter: invert(1) hue-rotate(165deg) saturate(0.85) brightness(0.75);
}

.brd-debuffed {
  filter: grayscale(1) brightness(0.55);
}

.brd-debuffed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--brd-debuff-z);
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25) 4px, rgba(255,255,255,0.08) 4px, rgba(255,255,255,0.08) 8px);
  pointer-events: none;
}

.brd-badge {
  position: absolute;
  z-index: var(--brd-badge-z);
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  color: white;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-sizing: border-box;
  pointer-events: none;
}

.brd-seal-badge {
  right: 7px;
  bottom: 9px;
}

.brd-sticker-badge {
  left: 2px;
  top: 3px;
}

.brd-joker-sticker-stack .brd-badge {
  position: static;
  width: var(--brd-joker-sticker-size);
  height: var(--brd-joker-sticker-size);
  font-size: 9px;
}

.brd-stake-badge {
  right: 2px;
  top: 2px;
}

.brd-badge-red { background: rgba(150, 20, 20, 0.9); }
.brd-badge-blue { background: rgba(20, 60, 150, 0.9); }
.brd-badge-purple { background: rgba(95, 35, 150, 0.9); }
.brd-badge-gold { background: rgba(155, 110, 15, 0.9); }
.brd-badge-eternal { background: rgba(40, 70, 160, 0.9); }
.brd-badge-perishable { background: rgba(80, 130, 65, 0.9); }
.brd-badge-rental { background: rgba(130, 85, 30, 0.9); }

.brd-card-missing {
  background: #2a2a2a;
  outline: 1px dashed #777;
}

.brd-card-missing::before {
  content: "missing sprite";
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 0.25rem;
  color: #ddd;
  font-size: 0.55rem;
  text-align: center;
}

.brd-caption {
  margin-top: 0.25rem;
  color: #d0d0d0;
  font-size: 0.65rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.brd-count-pill {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 20;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}

.brd-card--voucher {
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
}

.brd-voucher-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Blind & tag items – circular images, not card-shaped */
.brd-card--blind,
.brd-card--tag {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  image-rendering: pixelated;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Match card-wrap width for blinds/tags to standard card width for consistent row spacing */
.brd-card-wrap:has(.brd-card--blind),
.brd-card-wrap:has(.brd-card--tag) {
  width: var(--brd-card-w);
  text-align: center;
}

/* Planetarium grid – per-hand planet, level overlay, play count caption */
.brd-planetarium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 14px 12px;
}
.brd-planet {
  width: auto !important;
  text-align: center;
  transition: opacity 0.15s ease;
}
.brd-planet--unplayed {
  opacity: 0.32;
  filter: grayscale(0.6);
}
.brd-planet-art {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}
.brd-card--planet {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  image-rendering: pixelated;
  object-fit: contain;
  display: block;
}
.brd-planet-level {
  position: absolute;
  right: -4px;
  bottom: -4px;
  background: #ffcb45;
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px #1a1a2e;
  letter-spacing: 0.02em;
}
.brd-planet-played {
  display: inline-block;
  margin-top: 2px;
  color: #98a7c2;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}