/* The Gallery. Six creatures to a row on a wide screen, fewer as it narrows — a card whose type
   has been squeezed under 12px is not a smaller card, it is an unreadable one. */

#gallery{padding:22px 16px calc(56px + env(safe-area-inset-bottom));max-width:1180px;margin:0 auto}

.gal-top{border-bottom:1px solid var(--hair);padding-bottom:20px;margin-bottom:22px}
.gal-title{font-size:30px;letter-spacing:.1em;line-height:1;margin:10px 0 12px}
.gal-lede{margin:0 0 10px;font-size:13px;line-height:1.9;color:var(--txt-2);max-width:64ch;letter-spacing:.02em}
.gal-count{margin:0;font-size:12px;line-height:1.9;color:var(--txt-3);max-width:64ch;letter-spacing:.02em}

/* ── the wall ───────────────────────────────────────────
   Virtualised: `ui/gallery.js` positions about fifty pooled cards absolutely inside a spacer the
   full height of all 186,592. **`--gc-cols` and `--gc-row` are the single source of the layout** —
   the script reads them off this element rather than keeping its own copy, so the media queries
   below stay the only place the shape of the grid is decided. Change the card's height and
   `--gc-row` must follow it, or the rows will overlap. */
/* ── the tools ──────────────────────────────────────────
   A search and a filter per gene. They sit above the wall and never scroll with it. */
/* Compact on purpose: eight controls in one line, and the wall is what the page is for. Nothing
   here is bigger than it has to be to stay tappable — 12px type and a 30px control, which is the
   floor this project sets for both. */
.gal-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px}
.gal-search{flex:1 1 150px;min-width:0;font:inherit;font-size:12px;color:var(--txt);
            background:var(--well);border:1px solid var(--hair);border-radius:3px;padding:6px 8px}
.gal-search::placeholder{color:var(--txt-3)}
.gal-search:focus-visible{outline:1px solid var(--hair-2);outline-offset:1px}
.gal-tools select{font:inherit;font-size:12px;color:var(--txt-2);background:var(--well);
                  border:1px solid var(--hair);border-radius:3px;padding:6px 4px 6px 6px;
                  max-width:112px}
.gal-tools select:hover{color:var(--txt)}
.gal-tools .btn{font-size:12px;padding:6px 9px;white-space:nowrap;letter-spacing:.04em}
.gal-tools .btn[hidden]{display:none}
.gal-flip[aria-pressed="true"]{color:var(--txt);border-color:var(--hair-2)}
.gal-hits{font-size:12px;letter-spacing:.04em;color:var(--txt-3);margin-left:auto;white-space:nowrap}
.gal-empty{margin:40px 0;text-align:center;font-size:13px;color:var(--txt-3);letter-spacing:.04em}
.gal-empty[hidden]{display:none}

.gwall{position:relative;--gc-cols:6;--gc-row:252px}
.gcard{position:absolute;top:0;left:0;width:16.6667%;height:var(--gc-row);
       font:inherit;color:inherit;text-align:center;cursor:pointer;
       background:none;border:1px solid var(--hair);border-radius:4px;padding:14px 10px 12px;
       display:flex;flex-direction:column;align-items:center;gap:10px;
       transition:border-color .18s;contain:layout paint;overflow:hidden;justify-content:flex-start}
.gcard[hidden]{display:none}
.gcard:hover{border-color:var(--hair-2)}
.gcard:focus-visible{outline:1px solid var(--hair-2);outline-offset:2px}

/* The rarest trait a creature carries lights its edge — the one thing you can read across a
   whole wall at arm's length, before any of the type resolves. */
.gcard[data-tier="t3"]{border-color:rgb(199 155 255 / .38)}
.gcard[data-tier="t4"]{border-color:rgb(255 201 92 / .42)}
.gcard[data-tier="t5"]{border-color:rgb(255 122 224 / .46)}
.gcard[data-tier="t6"]{border-color:rgb(255 92 77 / .6);box-shadow:0 0 18px rgb(255 92 77 / .16)}

/* Scales with its column instead of being a fixed 120px, so the three- and two-column layouts
   have room for the four lines of type underneath rather than clipping the last one. */
.gcard-stage{width:min(118px,100%);aspect-ratio:1;flex:0 0 auto}
.gcard-stage canvas{width:100%;height:100%}
.gcard-meta{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;min-width:0}
.gcard-no{font-size:12px;letter-spacing:.14em;color:var(--txt-3)}
.gcard-name{font-size:13px;letter-spacing:.06em;color:var(--txt);
            max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcard-tier{font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.gcard-tier .stars{font-size:12px;letter-spacing:.06em}
.gcard-odds{font-size:12px;letter-spacing:.04em;color:var(--txt-3);
            max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The number is real text in the card, not `content: attr(...)` — generated content is not
   reliably announced, and the position in the run is information rather than decoration. */

/* ── one of them, opened ────────────────────────────────── */
.gal-card{width:min(400px,100%)}
.gal-no{margin:0 0 4px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3)}
.gal-name{font-size:24px;letter-spacing:.1em;margin-bottom:8px}
.gal-verdict{font-size:15px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.gal-tags{justify-content:center;margin-bottom:12px}
.gal-odds{margin:0 0 16px;font-size:12px;letter-spacing:.05em;color:var(--txt-3)}
.gal-id{justify-content:center;text-align:center}
.gal-id .idcode{font-size:12px}

/* ── the toolbar on a phone ─────────────────────────────────
   Search on its own line, six filters three-across, then the buttons and the count. Four short
   rows instead of seven tall ones — the toolbar is how you get to the wall, not the thing you
   came for, and at 176px it was taking a third of the screen before a single creature appeared. */
@media (max-width:620px){
  .gal-search{flex:1 1 100%}
  .gal-tools select{flex:1 1 30%;max-width:none;padding:6px 2px 6px 5px}
  .gal-tools .btn{flex:0 0 auto}
  .gal-hits{margin-left:auto}
}

@media (max-width:900px){ .gwall{--gc-cols:4} }
@media (max-width:620px){ .gwall{--gc-cols:3;--gc-row:226px} .gcard{padding:10px 6px;gap:8px} }