/* css/vg-gamedb.css — the public Bestiary & Armory (inc/gamedb_page.php). Self-contained: it sits on the public site
   (vg-v4.css) and inside the game (header.php) alike, so it keeps its own tokens and grade colors. */
.main-content:has(> .gdb) { max-width: none; padding: 0; }   /* the public site's narrow column (vg-v4.css) */
.gdb {
    --g-bg: rgba(16, 9, 13, 0.86); --g-inset: rgba(6, 3, 5, 0.6); --g-line: rgba(212, 176, 80, 0.18); --g-line2: rgba(139, 26, 26, 0.35);
    --g-text: #d8ccb4; --g-dim: #b9ad98; --g-faint: #958a7a; --g-gold: #d4b050; --g-crimson: #e84848;
    --g-head: 'Cinzel', Georgia, serif; --g-body: 'Inter', system-ui, sans-serif;
    --q0: #9d9d9d; --q1: #ffffff; --q2: #1eff00; --q3: #4a9eff; --q4: #c27bff; --q5: #ff8000;
    --e0: #6f6f6f; --e1: #8d877d; --e2: #1eff00; --e3: #0070dd; --e4: #a335ee; --e5: #ff8000;
    position: relative; z-index: 20; max-width: 1080px; margin: 0 auto; padding: 1rem 16px 2rem;
    font-family: var(--g-body); color: var(--g-text); line-height: 1.55;
}
.gdb a { color: var(--g-gold); text-decoration: none; }
.gdb a:hover { color: var(--g-crimson); }
.gdb .vg2-ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; vertical-align: -0.15em; }
.gdb .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gdb .vg-q-poor { color: var(--q0); } .gdb .vg-q-common { color: var(--q1); } .gdb .vg-q-uncommon { color: var(--q2); }
.gdb .vg-q-rare { color: var(--q3); } .gdb .vg-q-epic { color: var(--q4); } .gdb .vg-q-legendary { color: var(--q5); }
.gdb .q-edge-0 { --edge: var(--e0); } .gdb .q-edge-1 { --edge: var(--e1); } .gdb .q-edge-2 { --edge: var(--e2); }
.gdb .q-edge-3 { --edge: var(--e3); } .gdb .q-edge-4 { --edge: var(--e4); } .gdb .q-edge-5 { --edge: var(--e5); }
.gdb img, .gdb .gdb-boss, .gdb .gdb-full { image-rendering: pixelated; }

.gdb-crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--g-faint); margin-bottom: 1rem; }
.gdb-crumbs__other { margin-left: auto; }

.gdb-hero { text-align: center; padding: 2rem 1rem 1.5rem; margin-bottom: 1.25rem; border: 1px solid var(--g-line2); border-radius: 10px;
    background: radial-gradient(ellipse at 50% 0%, rgba(139, 26, 26, 0.28), transparent 70%), var(--g-bg); }
.gdb-hero--sm { padding: 1.25rem 1rem; text-align: left; }
.gdb-hero h1, .gdb-entry h1 { font-family: var(--g-head); font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0.2rem 0 0.5rem; color: #f0e8d8; line-height: 1.15; }
.gdb-hero--sm h1 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.gdb-hero p { max-width: 62ch; margin: 0 auto; color: var(--g-dim); }
.gdb-hero--sm p { margin: 0; }
.gdb-hero__kicker { font-family: var(--g-head); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-crimson); }

.gdb-search { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0 0.4rem 0 0.9rem; border: 1px solid var(--g-line); border-radius: 8px; background: var(--g-inset); }
.gdb-search .vg2-ic { color: var(--g-faint); flex: none; }
.gdb-search input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; color: var(--g-text); font: inherit; font-size: 1rem; outline: none; }
.gdb-btn { min-height: 38px; padding: 0 1rem; border: 1px solid var(--g-line); border-radius: 6px; background: rgba(139, 26, 26, 0.5); color: #f0e8d8; font-family: var(--g-head); font-size: 0.8rem; letter-spacing: 0.08em; cursor: pointer; }
.gdb-btn:hover { background: rgba(168, 32, 32, 0.7); }

.gdb-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.gdb-tile { display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-bg); }
.gdb-tile__head { display: flex; gap: 0.75rem; align-items: flex-start; }
.gdb-tile__head b { display: block; font-family: var(--g-head); font-size: 1.1rem; color: #f0e8d8; }
.gdb-tile__head small { display: block; color: var(--g-faint); font-size: 0.82rem; line-height: 1.4; }
.gdb-tile__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(139, 26, 26, 0.3); color: var(--g-gold); font-size: 1.25rem; }
.gdb-tile ul { list-style: none; margin: 0.75rem 0; padding: 0; display: grid; gap: 0.2rem; }
.gdb-tile__all { margin-top: auto; font-size: 0.85rem; }

.gdb-l { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 32px; font-weight: 600; }
.gdb .gdb-l:hover span:last-child { text-decoration: underline; }
.gdb-l__ic { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; overflow: hidden; }
.gdb-l__ic img, .gdb-l__ic .gdb-boss { max-width: 28px; max-height: 28px; }
.gdb-l__ic .gdb-boss { width: 28px !important; height: 28px !important; background-size: 224px 28px !important; }

.gdb-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.gdb-chip { min-height: 36px; padding: 0 0.85rem; border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-inset); color: var(--g-dim); font: inherit; font-size: 0.85rem; cursor: pointer; }
.gdb-chip[aria-pressed="true"] { border-color: var(--g-gold); color: #f0e8d8; background: rgba(212, 176, 80, 0.14); }

.gdb-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0.5rem; }
.gdb-row__a { display: flex; align-items: center; gap: 0.75rem; min-height: 60px; padding: 0.45rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; background: var(--g-bg); }
.gdb-row__a:hover { border-color: var(--g-line); background: rgba(30, 14, 20, 0.9); }
.gdb-row__ic, .gdb-card__ic, .gdb-entry__art { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 6px; border: 1px solid var(--edge, var(--e1)); background: radial-gradient(circle, rgba(255,255,255,0.05), rgba(0,0,0,0.5)); overflow: hidden; }
.gdb-row__ic img { max-width: 48px; max-height: 48px; }
.gdb-row__ic .gdb-boss { transform: scale(1); }
.gdb-row__t { min-width: 0; }
.gdb-row__t b { display: block; font-weight: 600; line-height: 1.3; }
.gdb-row__t small { display: block; color: var(--g-faint); font-size: 0.8rem; line-height: 1.35; }
.gdb-glyph { display: grid; place-items: center; color: var(--g-gold); font-size: 1.5rem; }
.gdb-none { color: var(--g-faint); font-style: italic; }
.gdb-h2 { font-family: var(--g-head); font-size: 1.15rem; color: var(--g-gold); margin: 0 0 0.75rem; }
.gdb-row[hidden] { display: none; }

.gdb-entry__head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1rem; }
.gdb-entry__art { width: 84px; height: 84px; border-width: 2px; }
.gdb-entry__art img { width: 72px; height: 72px; max-width: none; }
.gdb-entry__art--big { width: 140px; height: 140px; }
.gdb-entry__art--big .gdb-full { width: 128px; height: 128px; background-size: auto 100%; background-repeat: no-repeat; background-position: 0 0; display: block; }   /* the idle strip's first square frame */
.gdb-entry__art .gdb-glyph { font-size: 2.4rem; }
.gdb-entry__sub { margin: 0; color: var(--g-dim); }
.gdb-quote { margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-left: 3px solid var(--g-line2); background: var(--g-inset); color: var(--g-dim); font-style: italic; border-radius: 0 6px 6px 0; }
.gdb-entry__body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.gdb-facts, .gdb-secs section { padding: 1rem 1.1rem; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-bg); }
.gdb-secs { display: grid; gap: 1rem; }
.gdb-facts h2, .gdb-secs h2 { font-family: var(--g-head); font-size: 1rem; color: var(--g-gold); margin: 0 0 0.6rem; letter-spacing: 0.04em; }
.gdb-facts dl, .gdb-card dl { margin: 0; display: grid; gap: 0.35rem; }
.gdb-facts dl div, .gdb-card dl div { display: grid; grid-template-columns: 7.5em 1fr; gap: 0.5rem; font-size: 0.9rem; }
.gdb-facts dt, .gdb-card dt { color: var(--g-faint); }
.gdb-facts dd, .gdb-card dd { margin: 0; color: var(--g-text); }
.gdb-secs p { margin: 0 0 0.6rem; } .gdb-secs p:last-child { margin-bottom: 0; }
.gdb-list, .gdb-src { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.gdb-src > li { padding: 0.35rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.gdb-src > li:last-child { border-bottom: 0; }
.gdb-list small, .gdb-src small { color: var(--g-faint); }
.gdb-list--cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: 1rem; }
.gdb-swatch { display: inline-block; width: 1em; height: 1em; border-radius: 3px; vertical-align: -0.15em; border: 1px solid rgba(255,255,255,0.3); }
.gdb-title-demo { font-family: var(--g-head); font-size: 1.3rem; }
.gdb-byline { margin-top: 1.25rem; font-size: 0.85rem; color: var(--g-faint); }
.gdb .vg-q-chip { font-weight: 600; }

.gdb-join { margin-top: 2rem; padding: 1.5rem; text-align: center; border: 1px solid var(--g-line2); border-radius: 10px; background: radial-gradient(ellipse at 50% 100%, rgba(139, 26, 26, 0.3), transparent 70%), var(--g-bg); }
.gdb-join h2 { font-family: var(--g-head); color: #f0e8d8; margin: 0 0 0.5rem; }
.gdb-join p { max-width: 54ch; margin: 0 auto 1rem; color: var(--g-dim); }

/* the hover card (js/vg-gamedb.js), styled like the game's item sheet */
.gdb-tip { position: fixed; z-index: 9000; width: 320px; max-width: calc(100vw - 24px); pointer-events: none; }
.gdb-card { padding: 0.8rem 0.9rem; border: 1px solid rgba(212, 176, 80, 0.45); border-radius: 8px; background: rgba(10, 5, 8, 0.97); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); font-size: 0.88rem; }
.gdb-card__head { display: flex; gap: 0.65rem; align-items: center; margin-bottom: 0.55rem; }
.gdb-card__head b { display: block; font-size: 1rem; line-height: 1.25; }
.gdb-card__head small { display: block; color: var(--g-faint); font-size: 0.78rem; }
.gdb-card__ic { width: 52px; height: 52px; }
.gdb-card__about { margin: 0.55rem 0 0; color: #d8c890; font-style: italic; font-size: 0.82rem; }
.gdb-card dl div { grid-template-columns: 6.5em 1fr; font-size: 0.84rem; }

@media (max-width: 760px) {
    .gdb-entry__body { grid-template-columns: 1fr; }
    .gdb-entry__head { align-items: flex-start; }
    .gdb-entry__art--big { width: 104px; height: 104px; }
    .gdb-entry__art--big .gdb-full { width: 96px; height: 96px; }
    .gdb-crumbs__other { margin-left: 0; }
}