.compendium-screen {
  /* html/body/#app are all overflow:hidden (no-scroll app shell), so this
     screen must scroll ITSELF: bounded height, not min-height — with
     min-height:100vh it grew with content (#app is auto-height on menus, so
     percentage heights resolve to auto too) and auto never engaged
     (user, 2026-07-13: unscrollable on every viewport). */
  box-sizing: border-box; height: 100vh; height: 100dvh; padding: clamp(18px, 4vh, 42px) clamp(18px, 4vw, 64px);
  overflow-y: auto;
  background: radial-gradient(circle at 50% 0, rgba(227, 180, 94, .13), transparent 42%), rgba(8, 10, 13, .76);
}
.compendium-shell { width: min(1440px, 100%); margin: 0 auto; }
/* Split reliquary (user, 2026-07-13): a fixed card-viewer pane on the left
   (~2 of the old 7 columns) while only the right side scrolls. The pane is
   sticky inside .compendium-screen's own scroll, so it never leaves view. */
.compendium-split { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(0, 5fr); gap: clamp(14px, 2vw, 28px); align-items: start; }
.compendium-viewer { 
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: min(72vh, 480px); padding: 12px 4px;
}
/* the reading card carries its own fixed size (212x336); the viewer shows it
   at 1:1 — one canonical viewport, no responsive zoom tiers. */
/* scaled a touch under 1:1 so the card AND the Craft button below it both clear
   the 407px viewport height (the viewer is a column: card + craft area). */
.compendium-viewer .card { zoom: .82; cursor: default; }
.compendium-viewer-hint { max-width: 20ch; color: var(--ash); font-size: .85rem; letter-spacing: .04em; text-align: center; opacity: .75; }
.compendium-viewer-slot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.compendium-viewer-craft { min-height: 38px; text-align: center; }
.compendium-craft-btn, .compendium-craft-confirm-btn, .craft-yes, .craft-no, .craft-step {
  border: 1px solid var(--gold); border-radius: 4px; color: #17140d; background: linear-gradient(var(--gold-bright), var(--gold));
  font-family: var(--font-display); letter-spacing: .05em; cursor: pointer;
}
.compendium-craft-btn { min-width: 148px; padding: 8px 14px; }
.compendium-craft-btn:hover:not(:disabled), .compendium-craft-btn:focus-visible, .compendium-craft-confirm-btn:hover, .craft-yes:hover { box-shadow: 0 0 14px rgba(255, 181, 71, .6); outline: none; }
.compendium-craft-btn:disabled { cursor: not-allowed; color: var(--ash); border-color: var(--came); background: rgba(255, 255, 255, .06); }
.compendium-owned-max { margin: 8px 0 0; color: var(--ash); font-family: var(--font-chrome); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.compendium-tile.viewing { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
/* padding-right reserves the top-right corner for the global chrome (Back +
   settings cog) so the essence badge never sits under them (user). */
.compendium-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; padding-right: 158px; border-bottom: 1px solid rgba(227, 180, 94, .35); }
.compendium-kicker { margin: 0 0 2px; color: var(--amber); font-family: var(--font-chrome); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.compendium-header h1 { margin: 0; color: var(--gold-bright); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 400; letter-spacing: .08em; }
.compendium-header-actions { display: flex; align-items: center; gap: 12px; }
/* Essence indicator and Back are IDENTICAL in size (user, 2026-07-14); the
   essence reads as a value badge (glyph + bright fill), the Back as a button
   (dark outline) — so they're the same footprint but unmistakably different. */
.compendium-header-actions .compendium-essence,
.compendium-header-actions .menu-back {
  box-sizing: border-box; height: 42px; min-width: 104px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 10px; font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .05em;
}
.compendium-essence {
  color: #17150e; border: 2px solid transparent;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)) padding-box, var(--gilt-lit) border-box;
}
.compendium-essence .essence-glyph { font-size: 1.05rem; line-height: 1; }
.compendium-essence strong { font-family: var(--font-display); font-size: 1.2rem; line-height: 1; }
.compendium-filters { display: grid; gap: 10px; margin: 18px 0 10px; }
.compendium-name-filter { display: grid; width: min(360px, 100%); gap: 5px; color: var(--ash); font-family: var(--font-chrome); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.compendium-filters input { box-sizing: border-box; min-width: 0; width: 100%; border: 1px solid var(--came); border-radius: 3px; background: var(--lead); color: var(--bone); font: 600 1rem var(--font-body); padding: 8px 10px; }
.compendium-filters input:focus { border-color: var(--gold); outline: 1px solid var(--gold); }
.compendium-filters .db-filters { margin: 0; align-items: flex-start; }
.compendium-filters .db-filter-group { flex-wrap: wrap; }
.compendium-result-count { margin: 0 0 12px; color: var(--gold); font-family: var(--font-chrome); }
/* Match the deck-builder pool density exactly: dense grid of compact .pool-tile
   cards (same .pool-tile / .pool-art / .pool-name / .pool-type from main.css),
   extended only with ownership state (unowned greyed, craftable badge). */
.compendium-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-content: start; padding: 4px 0 24px; }
.compendium-tile.owned { background: linear-gradient(var(--lead), var(--lead)) padding-box, var(--gilt-lit) border-box; }
.compendium-tile.unowned { filter: grayscale(1); opacity: .58; }
.compendium-tile.unowned:hover { filter: grayscale(.5); opacity: .9; }
.compendium-empty { border: 1px dashed var(--came); padding: 42px 20px; text-align: center; color: var(--ash); }
.compendium-empty h2 { margin: 0; color: var(--gold); font-family: var(--font-display); font-weight: 400; }
.compendium-empty p { margin: 6px 0 0; }
.compendium-craft-dialog { display: grid; gap: 16px; text-align: center; }
.craft-card-name { margin: 0; color: var(--gold-bright); font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .05em; }
.craft-qty { display: flex; align-items: center; justify-content: center; gap: 12px; }
.craft-step { width: 34px; height: 34px; padding: 0; font-size: 1.25rem; line-height: 1; }
.craft-step:disabled { cursor: not-allowed; color: var(--ash); border-color: var(--came); background: rgba(255, 255, 255, .05); }
.craft-qty-value { min-width: 2ch; color: var(--gold-bright); font-family: var(--font-display); font-size: 1.5rem; }
.craft-total { margin: 0; color: var(--bone); font-family: var(--font-chrome); letter-spacing: .06em; }
.compendium-craft-confirm-btn { justify-self: center; min-width: 130px; padding: 9px 18px; }
.craft-confirm-actions { display: flex; justify-content: center; gap: 10px; }
.craft-yes, .craft-no { min-width: 76px; padding: 8px 14px; }
.craft-no { color: var(--bone); border-color: var(--came); background: var(--lead); }
.compendium-craft-confirmation { position: fixed; inset: 50% auto auto 50%; z-index: 210; transform: translate(-50%, -50%); min-width: 210px; padding: 14px 20px; border: 1px solid var(--gold); border-radius: 5px; color: var(--gold-bright); background: rgba(13, 14, 18, .94); box-shadow: 0 0 32px rgba(255, 181, 71, .34); font-family: var(--font-display); letter-spacing: .06em; text-align: center; animation: compendium-confirm 2.1s ease both; }
.compendium-craft-confirmation.leaving { opacity: 0; transition: opacity .5s ease; }
.compendium-craft-forge { animation: compendium-forge .85s ease-out; }
@keyframes compendium-forge { 0% { filter: brightness(1); box-shadow: none; } 35% { filter: brightness(1.45) sepia(.25); box-shadow: 0 0 40px 12px rgba(255, 192, 77, .72); } 100% { filter: brightness(1); box-shadow: none; } }
@keyframes compendium-confirm { 0%, 100% { opacity: 0; } 10%, 72% { opacity: 1; } }

@media (max-width: 640px) { .compendium-screen { padding: 18px; overflow-x: hidden; } .compendium-header { align-items: flex-start; flex-direction: column; } .compendium-header-actions { width: 100%; justify-content: space-between; } .compendium-filters input, .compendium-screen .menu-back { min-height: 44px; } .compendium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 390px) { .compendium-essence { min-width: 0; } .compendium-grid { grid-template-columns: minmax(0, 1fr); } }