.catalog-nav { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:0 20px; margin:0 auto 22px; }
.catalog-tab { display:inline-flex; align-items:center; gap:14px; min-height:64px; font:15px 'Share Tech Mono',monospace; color:var(--green); background:var(--bg2); border:1px solid var(--border); padding:8px 24px 8px 12px; cursor:pointer; transition:border-color .15s, background .15s; }
.catalog-tab:hover { border-color:var(--green-dim); }
.catalog-tab[aria-pressed="true"] { color:var(--bg); background:var(--green); border-color:var(--green); }
.catalog-tab .tab-count { margin-left:10px; opacity:.75; }
/* A fanned hand of three thumbnails; it opens a little on hover. */
.tab-fan { position:relative; flex:none; width:60px; height:46px; }
.tab-fan img { position:absolute; left:15px; top:4px; width:30px; height:38px; object-fit:cover; background:#020802; border:1px solid rgba(57,255,20,.45); box-shadow:0 3px 8px rgba(0,0,0,.65); transition:transform .22s ease; }
.tab-fan img:nth-child(1) { transform:translateX(-11px) rotate(-14deg); }
.tab-fan img:nth-child(2) { transform:translateX(11px) rotate(14deg); }
.tab-fan img:nth-child(3) { z-index:1; transform:translateY(-2px); }
.catalog-tab:hover .tab-fan img:nth-child(1) { transform:translateX(-15px) rotate(-20deg); }
.catalog-tab:hover .tab-fan img:nth-child(2) { transform:translateX(15px) rotate(20deg); }
.catalog-tab:hover .tab-fan img:nth-child(3) { transform:translateY(-5px); }
.catalog-tab[aria-pressed="true"] .tab-fan img { border-color:rgba(4,17,4,.75); box-shadow:0 3px 8px rgba(0,0,0,.45); }
@media (prefers-reduced-motion:reduce) { .tab-fan img { transition:none; } }
.catalog-tab:focus-visible, .collectible-card:focus-visible, .collectible-details:focus-visible, .collectible-sort:focus-visible { outline:2px solid var(--amber); outline-offset:4px; }
.toggle-btn:disabled { opacity:.35; cursor:not-allowed; }
/* The count is announced to screen readers after each search; it is not shown. */
.catalog-summary { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#catalog-description { display:none; }
#catalog-empty { margin:20px auto 60px; padding:24px; max-width:700px; text-align:center; color:var(--amber); line-height:1.7; }
#collectible-grid[hidden], #collectible-table-view[hidden], #catalog-empty[hidden] { display:none; }
/* Search results across categories: one heading per group, the tabs show match counts. */
.search-group { display:flex; align-items:center; gap:12px; margin:0; font:700 11px 'Orbitron',sans-serif; letter-spacing:3px; color:#92e27c; }
.search-group::before { content:''; flex:none; width:3px; height:13px; background:var(--green); box-shadow:0 0 8px rgba(57,255,20,.6); }
.search-group::after { content:''; order:2; flex:1; height:1px; background:linear-gradient(90deg, rgba(57,255,20,.4), rgba(57,255,20,.05)); }
.search-group span { order:3; font:12px 'Share Tech Mono',monospace; letter-spacing:1px; color:var(--text-dim); }
.search-group[hidden] { display:none; }
#sg-backpacks { max-width:1400px; margin:4px auto 14px; padding:0 20px; }
#collectible-grid .search-group { grid-column:1 / -1; margin:10px 0 0; }
#collectible-grid .search-group:first-child { margin-top:0; }
.catalog-searching #grid, .catalog-searching #table-view { padding-bottom:30px; }
.search-group-row th { padding:22px 0 10px; border-bottom:0; background:none; font:700 11px 'Orbitron',sans-serif; letter-spacing:3px; color:#92e27c; }
.search-group-row th span { margin-left:12px; font:12px 'Share Tech Mono',monospace; letter-spacing:1px; color:var(--text-dim); }
.search-group-row:hover th { background:none; }
.catalog-tab.is-empty { opacity:.45; }
.collectible-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; font:inherit; color:inherit; background:var(--card-bg); border:1px solid var(--border); padding:24px; cursor:pointer; min-width:0; transition:border-color .2s, transform .2s; }
.collectible-card:hover { border-color:var(--amber); transform:translateY(-3px); }
.collectible-kicker { font-size:12px; letter-spacing:2px; color:var(--amber); margin-bottom:16px; }
.collectible-card h2 { font:700 18px/1.5 'Orbitron',sans-serif; margin:0 0 20px; overflow-wrap:anywhere; }
.collectible-card-heading { display:flex; gap:14px; align-items:flex-start; width:100%; }
.collectible-thumbnail { object-fit:contain; flex-shrink:0; background:#040d04; border:1px solid var(--border); margin-bottom:20px; }
.collectible-table-name { display:flex; gap:12px; align-items:center; }
.collectible-table-name .collectible-thumbnail { margin:0; }
#collectible-preview { position:fixed; width:180px; background:#040d04; border:1px solid var(--green); box-shadow:0 0 24px var(--green-glow); opacity:0; pointer-events:none; z-index:10000; transform:translateY(6px); transition:opacity .15s,transform .15s; }
#collectible-preview.visible { opacity:1; transform:none; }
#collectible-preview img { display:block; width:100%; height:214px; object-fit:contain; padding:8px; }
.collectible-preview-label { padding:8px; border-top:1px solid var(--border); font:14px/1.4 'Share Tech Mono',monospace; color:var(--green); text-align:center; }
@media (hover:none), (pointer:coarse) { #collectible-preview { display:none; } }
@media (prefers-reduced-motion:reduce) { #collectible-preview { transition:none; } }
.collectible-effects { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.collectible-effect { font-size:14px; line-height:1.5; color:#c6eab9; padding:6px 10px; border:1px solid #36582c; background:#10200b; }
.collectible-place { color:var(--amber); font-size:16px; line-height:1.5; }
.collectible-id { font-size:12px; color:#91ab87; overflow-wrap:anywhere; margin-top:5px; }
.collectible-hint { display:block; font-size:12px; letter-spacing:1px; margin-top:22px; color:var(--green); }
#collectible-table-view { max-width:1400px; margin:0 auto; padding:0 20px 80px; overflow-x:auto; }
.collectible-table { width:100%; border-collapse:collapse; min-width:640px; font-size:14px; }
.collectible-table th { color:var(--amber); text-align:left; padding:16px; border-bottom:1px solid var(--green-dim); }
.collectible-table td { vertical-align:top; padding:18px 16px; border-bottom:1px solid var(--border); line-height:1.6; }
.collectible-table tr:hover td { background:var(--card-bg); }
.collectible-sort, .collectible-details { font:inherit; color:inherit; cursor:pointer; background:transparent; border:0; padding:0; text-align:left; }
.collectible-details { color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.collectible-dialog { margin:auto; width:min(640px,calc(100% - 28px)); max-height:85dvh; padding:32px; color:var(--green); background:var(--card-bg); border:1px solid var(--green-dim); overflow-y:auto; box-shadow:0 0 50px #000; }
.collectible-dialog::backdrop { background:rgba(0,0,0,.85); }
.collectible-dialog h2 { font:700 22px/1.5 'Orbitron',sans-serif; padding-right:22px; margin-bottom:24px; }
.collectible-dialog h3 { font-size:14px; letter-spacing:2px; color:var(--amber); margin:24px 0 12px; }
.collectible-dialog p { font-size:16px; line-height:1.7; color:#c0d0b6; }
.collectible-dialog a { color:var(--green); font-size:14px; }
.collectible-dialog .collectible-close { position:absolute; top:12px; right:14px; background:transparent; border:0; color:var(--green); font-size:28px; cursor:pointer; padding:4px 8px; }
.collectible-dialog .source-effects { font-size:13px; color:#91ab87; margin-top:12px; }
@media(max-width:600px) { .catalog-tab { flex:1; flex-direction:column; gap:6px; padding:10px 6px; } .catalog-tab .tab-count { display:block; margin:4px 0 0; } .collectible-dialog { padding:24px 20px; } .collectible-dialog h2 { font-size:18px; } .collectible-card { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .collectible-card { transition:none; } }
/* Collectible pop-up: text left, location photo right; everything visible without scrolling on desktop. */
.collectible-dialog.has-photo { width:min(980px,calc(100% - 28px)); }
.cd-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0 28px; }
.has-photo .cd-grid { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head photo" "body photo"; align-items:start; }
.has-photo .cd-head { grid-area:head; } .has-photo .cd-body { grid-area:body; } .has-photo .cd-photo { grid-area:photo; }
.has-photo .cd-head h2 { margin-bottom:14px; }
.has-photo .cd-body p { font-size:15px; line-height:1.55; }
.has-photo .cd-body h3 { margin:16px 0 8px; }
.has-photo .cd-body .collectible-effects { margin-bottom:10px; }
.cd-photo { margin:0; width:min(420px,calc(85dvh - 150px)); }
.cd-photo a { display:block; }
.cd-photo img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border:1px solid var(--border); }
.cd-photo figcaption { color:var(--amber); font-size:14px; line-height:1.45; margin-top:8px; }
.cd-photo-tabs { display:flex; gap:6px; margin:0 34px 8px 0; }  /* room for the close button */
.cd-photo-tabs button { flex:1; font:inherit; font-size:12px; letter-spacing:1px; padding:7px 8px; cursor:pointer; color:#91ab87; background:transparent; border:1px solid #36582c; }
.cd-photo-tabs button[aria-selected="true"] { color:var(--card-bg, #0a1408); background:var(--green); border-color:var(--green); }
.cd-photo-tabs button:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
@media (max-width:760px) {
  .has-photo .cd-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "photo" "body"; }
  .cd-photo { width:100%; margin:0 0 6px; }
  .has-photo .cd-head h2 { margin-bottom:10px; }
  .cd-photo-tabs button { font-size:11px; letter-spacing:.5px; padding:6px; white-space:nowrap; }
}