:root{
  --bg:#0b0f14; --fg:#e6eef7; --muted:#9fb3c8; --accent:#66e0ff; --chip:#1e2837; --line:#1b2a3d;
  --thumb:110px; /* default tile width (compact) */
}
*{box-sizing:border-box}
.muted{color:var(--muted)} .small{font-size:12px}
.btn{background:#122035;border:1px solid #2a3b55;color:var(--fg);border-radius:10px;padding:8px 12px;cursor:pointer}
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:10px 0}
.chip{background:var(--chip);border:1px solid #2a3b55;padding:8px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:8px}
.fallback{margin:12px 0}
.fallback-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--thumb), var(--thumb))); /* fixed tile columns */
  gap:12px;
  padding:16px;
  justify-content:center; /* center the fixed columns */
}
.section-title{grid-column:1/-1;margin-top:18px;font-weight:700;color:var(--accent);border-left:3px solid var(--accent);padding-left:10px}

.card{position:relative;width:100%;aspect-ratio:63/88;border-radius:12px;overflow:hidden;background:#0d1422;border:1px solid #26364f;cursor:pointer;transition:transform .12s ease}
.card:hover{transform:scale(1.03)}
.card img{width:100%;height:100%;object-fit:contain;display:block;background:#0d1422}
.card img { content-visibility: auto; contain-intrinsic-size: 840px 600px; }


.meta{position:absolute;inset:auto 6px 6px 6px;background:linear-gradient(180deg,transparent,#0009);padding:6px 8px;border-radius:8px;color:#dbe7f5;font-size:12px;display:flex;justify-content:space-between;gap:6px}
.empty{color:var(--muted);text-align:center;padding:20px}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;place-items:center;background:#000b;backdrop-filter:blur(2px);z-index:50;padding:16px}
.lightbox.open{display:grid}
.dialog{display:grid;grid-template-columns:minmax(280px,48vw) min(420px,40vw);gap:18px;align-items:center;max-width:96vw}
@media (max-width: 1000px){ .dialog{grid-template-columns:1fr;max-width:min(96vw,780px);} }
.zoom{position:relative;height:min(82vh,760px);aspect-ratio:63/88;width:auto;background:#0c1220;border:1px solid #345;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px #000b;display:grid;place-items:center}
.zoom img{width:100%;height:100%;object-fit:contain;background:#0c1220}
.info{max-height:min(82vh,760px);overflow:auto;background:linear-gradient(180deg,#0e1726,#0c1220);border:1px solid #2a3b55;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.info h3{margin:0;font-size:20px;color:#eaf2ff}
.info .desc{white-space:pre-wrap;color:#cfe1ff}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.close{background:#0b1628;border:1px solid #345;color:#cfe4ff;border-radius:10px;padding:6px 10px;cursor:pointer}
#search{background:#0f1a2b;border:1px solid #2a3b55;color:var(--fg);border-radius:10px;padding:6px 8px}

/* Badges & stats */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{background:#132036;border:1px solid #29405f;color:#dbe7f5;padding:6px 10px;border-radius:999px;font-size:12px}
.stats{display:flex;flex-wrap:wrap;gap:8px}
.stat{background:#0f1a2b;border:1px solid #2a3b55;color:#e6f2ff;padding:6px 10px;border-radius:10px;font-weight:600;font-size:13px}
.flavor{margin:4px 0 0 0;color:#b7c9e6;font-style:italic;opacity:.95}