/* ============================================================================
   THE UNMADE — gallery page (extends main.css)
   The art is always dark, so card interiors use fixed light-grey inks while
   the page chrome follows the theme.
   NOTE: no rarity rank or curation labels are rendered anywhere (by design).
   ========================================================================= */

.nav a[aria-current="page"] { color: var(--ink); }

/* ---------------------------------------------------------------- chips -- */
.gallery-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.7rem 0 2.4rem; }
.chip {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--ink-3); border: 1px solid var(--line-2);
  padding: .42rem .75rem; text-transform: uppercase;
  background: var(--bg-2);
}
.band.alt .chip { background: var(--bg); }

.gallery-hint { font-family: var(--mono); font-size: .74rem; color: var(--ink-4); letter-spacing: .04em; margin: 0 0 1rem; }

/* ----------------------------------------------------------------- grid -- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 14px;
}

.g-card {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 0; margin: 0; cursor: pointer;
  border: 1px solid var(--line); background: #08080a;
  font: inherit; color: #e9e9ec;
  transition: border-color .16s, transform .16s;
}
.g-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.g-card:focus-visible { outline: 2px solid var(--stake); outline-offset: 2px; }
.g-card.gilded { border-color: rgba(226, 183, 90, .45); }
.g-card.gilded:hover { border-color: rgba(255, 216, 97, .85); }
.g-card.spectral { border-color: rgba(148, 196, 214, .4); }
.g-card.spectral:hover { border-color: rgba(197, 238, 255, .85); }
html[data-theme="dark"] .g-card { border-color: #2b2b35; }
html[data-theme="dark"] .g-card:hover { border-color: #3d3d4a; }
html[data-theme="dark"] .g-card.gilded { border-color: rgba(226, 183, 90, .5); }
html[data-theme="dark"] .g-card.spectral { border-color: rgba(148, 196, 214, .45); }

.g-img { display: block; background: #08080a; }
.g-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }

.g-traits {
  display: block; padding: .7rem .8rem .8rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: #8f8f9a;
}

/* rarity tier badge (broad buckets only — never exact rank) */
.g-badge {
  position: absolute; top: .55rem; left: .55rem; z-index: 2;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .55rem; border: 1px solid #2e2e37;
  background: rgba(8, 8, 10, .82); color: #cfcfd6;
  pointer-events: none;
}
.g-badge.t-mythic { color: #ffd866; border-color: rgba(226, 183, 90, .6); }
.g-badge.t-legendary { color: #d9f4ff; border-color: rgba(148, 196, 214, .6); }
.g-badge.t-rare { color: #4ade9b; border-color: rgba(74, 222, 155, .45); }
.g-badge.t-uncommon { color: #9fc0e8; border-color: rgba(120, 150, 210, .42); }
.g-badge.t-common { color: #8f8f9a; border-color: rgba(110, 110, 120, .38); }

.gallery-note { margin-top: 1.6rem; font-size: .84rem; color: var(--ink-3); max-width: 74ch; }

/* ------------------------------------------------------------- lightbox -- */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 3vh 3vw; }
.lb[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(3, 3, 5, .88); }
.lb-panel {
  position: relative; z-index: 1; margin: 0;
  width: min(900px, 100%); max-height: 94vh; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--line-2);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
@media (max-width: 720px) { .lb-panel { grid-template-columns: 1fr; } }
.lb-imgwrap { background: #08080a; min-height: 0; }
.lb-imgwrap img { display: block; width: 100%; height: auto; }
.lb-close {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  width: 2.1rem; height: 2.1rem; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(8, 8, 10, .75);
  color: #e9e9ec; font-size: 1.15rem; line-height: 1;
}
.lb-close:hover { border-color: rgba(255, 255, 255, .65); }
.lb-info { padding: 1.35rem 1.4rem 1.5rem; min-width: 0; }
.lb-name { display: block; font-family: var(--mono); font-size: 1.02rem; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.lb-sub { display: block; margin-top: .45rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--ink-4); text-transform: uppercase; }
.lb-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1.25rem; }
.lb-traits > div { background: var(--bg-2); padding: .6rem .75rem; }
.lb-traits dt { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.lb-traits dd { margin: .25rem 0 0; font-size: .86rem; color: var(--ink); }

@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .g-meta { padding: .5rem .55rem .1rem; }
  .g-traits { padding: .05rem .55rem .6rem; font-size: .62rem; }
}