/* ============================================================
   Encyclopedia screen — "Forged Lantern". Loaded after ui-ranking.css: reuses
   .pveHead / .pveTabs / .pveTab (tab rows), .fld (labelled filter), the custom
   Select and the shared press-and-hold popup (render/inspector.js: data-hold).
   Cursors: never a bare value (CLAUDE.md §4). No backdrop-filter (§7).
   See docs/subsystems/encyclopedia-ui.md.
   ============================================================ */

/* ---------- tab rows: never scroll; fit on phones ---------- */
.encHead{ margin-bottom: 4px; }
#encyclopediaScreen .pveTabs.sm{ margin: 16px 0 0; display: inline-flex; }
@media (max-width: 640px){
  #encyclopediaScreen .pveTabs, #encyclopediaScreen .pveHead .pveTabs{ display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; border-radius: 24px; gap: 3px; padding: 4px; overflow: visible; }
  #encyclopediaScreen .pveTab{ flex: 1 1 auto; min-height: 40px; padding: 0 8px; font-size: .8rem; white-space: nowrap; justify-content: center; text-align: center; }
  /* 6 top tabs: a 3 x 2 grid, never squeezed onto one line. */
  #encyclopediaScreen .pveHead .pveTabs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
  #encyclopediaScreen .pveHead .pveTab{ padding: 0 4px; font-size: .8rem; min-width: 0; }
  #encyclopediaScreen .pveTabs.sm{ display: grid; grid-template-columns: repeat(2, 1fr); }
  #encyclopediaScreen .pveTabs.sm.three{ grid-template-columns: repeat(3, 1fr); }
  #encyclopediaScreen .pveTabs.sm .pveTab{ flex: none; }
}

/* ---------- filters ---------- */
.encFilters{ display: flex; gap: 12px; margin: 16px 0 0; flex-wrap: wrap; }
.encFilters .fld{ width: min(220px, 100%); }
.encFilters.hidden, .pveTabs.hidden{ display: none; }
@media (max-width: 640px){ .encFilters .fld{ width: calc(50% - 6px); } }

/* ---------- card grids (masonry columns: cards of very different heights pack) ---------- */
.encGrid{ columns: calc(340px / var(--ui-zoom, 1)) auto; column-gap: 16px; margin-top: 18px; }
.encGrid.one{ columns: 1; max-width: calc(860px / var(--ui-zoom, 1)); }
.encGrid > *{ break-inside: avoid; margin: 0 0 16px; }
.encGrid > .hint{ column-span: all; }
@media (max-width: 640px){ .encGrid{ columns: 1; } }
.encCard{
  display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  background-image: var(--grain), var(--glass-bg); background-color: hsl(var(--h) 16% 8% / .82); text-align: left; color: inherit; font: inherit;
}
.encCard.click{ cursor: var(--cur-click, pointer); transition: border-color var(--t-fast); }
.encCard.click:hover, .encCard.click:focus-visible{ border-color: var(--accent-hi); }
.encCard header{ display: flex; align-items: center; gap: 12px; border: 0; margin: 0; padding: 0; }
.encCard header > div{ flex: 1; min-width: 0; }
.encCard header b{ display: block; font: 700 1.15rem/1.15 var(--f-display); color: var(--c-text); }
.encCard header small{ display: block; margin-top: 3px; color: var(--c-dim); font: 500 .82rem var(--f-body); }
.encCard p{ margin: 0; color: var(--c-text); opacity: .88; font: 400 .92rem/1.55 var(--f-body); }
.encIc{ flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid var(--c-line); background: hsl(var(--h) 20% 12%); font-size: 1.3rem; }
.encIc.lg{ width: 56px; height: 56px; font-size: 1.7rem; }
.encIc .heroPortrait{ width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: cover; }
.encGo{ width: 20px; height: 20px; fill: none; stroke: var(--c-dim); stroke-width: 2; stroke-linecap: round; transform: rotate(-90deg); flex: none; }

/* ---------- facts + used-by chips ---------- */
.encFacts{ display: flex; flex-wrap: wrap; gap: 6px; }
.encFacts span{ display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 999px; background: hsl(var(--h) 20% 12% / .9); border: 1px solid var(--c-line); }
.encFacts i{ font: 600 .64rem var(--f-body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--c-dim); }
.encFacts b{ font: 600 .85rem var(--f-body); color: var(--c-text); }
.encFacts.big span{ flex-direction: column; align-items: flex-start; gap: 0; border-radius: 14px; min-width: 150px; }
.encUsed{ display: flex; flex-direction: column; gap: 8px; }
.encUsedRow{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.encUsedRow i{ font: 600 .7rem var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); margin-right: 2px; }
.encUsed .chip{
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 600 .76rem var(--f-body); color: var(--c-text);
  background: hsl(var(--h) 20% 14% / .9); border: 1px solid var(--c-line);
}
.encUsed button.chip{ cursor: var(--cur-click, pointer); touch-action: none; -webkit-user-select: none; user-select: none; box-shadow: none; text-transform: none; letter-spacing: 0; }
.encUsed button.chip:hover{ border-color: var(--accent-hi); background: hsl(var(--h) 20% 14% / .9); color: var(--c-text); }
.encFacts b.hold{ text-decoration: underline dotted hsl(var(--h) 30% 70% / .6); text-underline-offset: 4px; cursor: var(--cur-click, pointer); touch-action: none; -webkit-user-select: none; user-select: none; }

/* ---------- spell / aura / summon detail ---------- */
.encBack{ margin-top: 18px; min-height: 44px; }
.encDetail{
  margin-top: 16px; padding: 22px; border-radius: 28px; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  background-image: var(--grain), var(--glass-bg); background-color: hsl(var(--h) 16% 8% / .82); display: flex; flex-direction: column; gap: 14px;
}
.encDetail header{ display: flex; align-items: center; gap: 14px; border: 0; margin: 0; padding: 0; }
.encDetail h2{ font: 700 1.8rem var(--f-display); margin: 0; }
.encDetail h3{ font: 700 .8rem var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dim); margin: 10px 0 0; }
.encDetail p{ margin: 0; font: 400 .95rem/1.55 var(--f-body); }
.encDetail .encLead{ opacity: .88; }
.encTblWrap{ overflow-x: auto; border-radius: 16px; border: 1px solid var(--c-line); }
.encTbl{ border-collapse: collapse; width: 100%; min-width: 720px; font: 500 .85rem var(--f-body); }
.encTbl th, .encTbl td{ padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.encTbl thead th{ color: var(--c-dim); font: 600 .72rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; background: hsl(var(--h) 16% 10%); }
.encTbl tbody th{ text-align: left; position: sticky; left: 0; background: hsl(var(--h) 16% 9%); font: 600 .84rem var(--f-body); color: var(--c-text); }
.encTbl tbody tr:nth-child(even) td{ background: hsl(var(--h) 20% 12% / .35); }

/* ---------- game modes: map beside the mode, one fixed frame ---------- */
.encCard.gmCard{ flex-direction: row; gap: 20px; align-items: stretch; }
.gmMap{ flex: none; width: 300px; height: 200px; align-self: flex-start; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--c-line); }
.gmMap img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gmMap span{ position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: hsl(var(--h) 20% 6% / .8); font: 600 .68rem var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.gmBody{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* The mode's board (render/board-layout-diagram.js): deployment tiles and towers. */
.gmBoard{ flex: none; align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gmBoard span{ font: 600 .68rem var(--f-body); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
@media (max-width: 640px){ .encCard.gmCard{ flex-direction: column; } .gmMap{ width: 100%; height: 170px; } .gmBoard{ align-self: center; } }

/* ---------- gameplay sections ---------- */
.encGpSec{
  margin-top: 18px; padding: 22px 24px; border-radius: 28px; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  background-image: var(--grain), var(--glass-bg); background-color: hsl(var(--h) 16% 8% / .82);
}
.encGpSec > h2{ font: 700 1.6rem var(--f-display); margin: 0 0 10px; }
.encGpIntro{ max-width: 900px; margin-bottom: 6px; }
.encGpIntro p, .encTopic p, .encTopic li{ font: 400 .95rem/1.6 var(--f-body) !important; opacity: .9; margin: 0 0 10px; }
.encTopics{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 14px; align-items: start; }
.encTopics.single{ grid-template-columns: minmax(0, 1fr); }
.encTopics.figs{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.encTopics.abil{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.encTopics.abil > .encTopic.full{ grid-column: 1 / -1; }
@media (max-width: 900px){ .encTopics.abil{ grid-template-columns: minmax(0, 1fr); } }
.encTopic{ padding: 16px; border-radius: 20px; border: 1px solid var(--c-line); background: hsl(var(--h) 18% 10% / .7); min-width: 0; }
.encTopic h3{ font: 700 1.15rem var(--f-display); margin: 0 0 8px; color: var(--accent-hi); }
.encTopic h4{ font: 700 1rem var(--f-display); margin: 12px 0 6px; }
.encTopic ul{ list-style: disc; margin: 8px 0; padding-left: 20px; }
.encTopic li{ display: list-item; margin: 0 0 7px; padding: 0; }
.encTopic > div[style*="display:flex"]{ display: flex !important; flex-wrap: wrap; gap: 14px !important; margin: 12px 0 !important; }
.encTopic > div[style*="display:flex"] > div{ flex: 1 1 220px; min-width: 0; }
.encTopic > div[style*="display:flex"] > div:has(.encDgBox){ flex: 1 1 300px; }
.encTopic > div[style*="display:flex"] > div[style*="width:"]{ flex: none; }
@media (min-width: 901px){
  .encTopics.single.figs .encTopic{ display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 0 28px; align-items: start; }
  .encTopics.single.figs .encTopic > h3{ grid-column: 1 / -1; }
  .encTopics.single.figs .encTopic > p{ grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}
/* hex diagrams are laid out at 380px, then scaled to their card (fitEncDiagrams) */
.encDgBox{ position: relative; width: 100%; overflow: hidden; }
#encTabContent .hexDiagramWrap{ position: relative; width: 380px; max-width: none; min-width: 0; margin: 6px 0; transform-origin: 0 0; }
#encTabContent .hexDiagramLegend{ margin: 2px 0 10px; font: 500 .78rem var(--f-body); }

/* ---------- Lore ---------- */
.lrHero{
  margin-top: 22px; padding: clamp(24px, 4vw, 56px); border-radius: 32px; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  background: radial-gradient(120% 140% at 0% 0%, hsl(var(--h) 38% 22% / .55), transparent 60%), var(--grain), hsl(var(--h) 16% 8% / .9);
}
.lrHero small{ display: block; font: 600 .8rem var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-hi); }
.lrHero h1{ font: 700 clamp(3.2rem, 9vw, 6.5rem)/.95 var(--f-display); margin: 8px 0 18px; letter-spacing: -.02em; }
.lrHero .lrDot{ color: var(--accent); }
.lrHero p{ max-width: 62ch; margin: 0 0 12px; font: 400 1.05rem/1.7 var(--f-body); opacity: .85; }
.lrHero p.lead{ font: 500 clamp(1.15rem, 2vw, 1.45rem)/1.55 var(--f-display); opacity: 1; color: var(--c-text); }
.lrH{ margin: 40px 0 16px; font: 700 .8rem var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--c-dim); display: flex; align-items: center; gap: 14px; }
.lrH::after{ content: ""; flex: 1; height: 1px; background: var(--c-line); }
.lrTL{ list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; max-width: calc(860px / var(--ui-zoom, 1)); }
.lrTL::before{ content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), hsl(var(--h) 20% 30% / .3)); }
.lrTL li{ position: relative; padding: 0 0 22px 22px; }
.lrTL li::before{ content: ""; position: absolute; left: -23px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: hsl(var(--h) 16% 8%); border: 2px solid var(--accent); }
.lrTL li.now::before{ background: var(--accent-hi); box-shadow: 0 0 0 6px hsl(var(--h) 60% 60% / .18); }
.lrTL b{ display: flex; align-items: center; gap: 10px; font: 700 1.15rem var(--f-display); color: var(--accent-hi); }
.lrTL b em{ font: 700 .66rem var(--f-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #10140f); }
.lrTL p{ margin: 4px 0 0; font: 400 1rem/1.6 var(--f-body); opacity: .88; }
.lrRaces{ display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(250px / var(--ui-zoom, 1)), 1fr)); gap: 16px; }
.lrRace{
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 26px; text-align: left; color: inherit; font: inherit; min-height: 44px;
  cursor: var(--cur-click, pointer); border: 1px solid var(--c-line); border-top: 3px solid hsl(calc(var(--h) + var(--rh) * 1deg) 45% 58%);
  background-image: linear-gradient(180deg, hsl(calc(var(--h) + var(--rh) * 1deg) 30% 16% / .6), transparent 55%), var(--grain);
  background-color: hsl(var(--h) 16% 8% / .88); box-shadow: var(--sh-1); transition: transform var(--t-fast);
}
.lrRace:hover{ transform: translateY(-2px); background-color: hsl(var(--h) 16% 8% / .88); }
.lrRace b{ font: 700 1.4rem var(--f-display); color: var(--c-text); text-transform: none; letter-spacing: 0; }
.lrRace p{ margin: 0; color: var(--c-dim); font: 400 .9rem/1.5 var(--f-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lrRace small{ margin-top: auto; color: var(--accent-hi); font: 600 .74rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.lrFaces{ display: flex; min-height: 46px; }
.lrFace{ width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid hsl(var(--h) 16% 8%); margin-left: -10px; background: hsl(var(--h) 20% 14%); display: grid; place-items: center; flex: none; }
.lrFace:first-child{ margin-left: 0; }
.lrFace .heroPortrait{ width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: cover; object-position: 50% 20%; }
.lrFace.empty{ font: 700 1.2rem var(--f-display); color: var(--c-dim); }
.lrRaceHead{
  margin-top: 16px; padding: clamp(22px, 4vw, 48px); border-radius: 30px; border: 1px solid var(--c-line); border-top: 4px solid hsl(calc(var(--h) + var(--rh) * 1deg) 45% 58%);
  background: linear-gradient(180deg, hsl(calc(var(--h) + var(--rh) * 1deg) 30% 16% / .6), transparent 70%), var(--grain), hsl(var(--h) 16% 8% / .9);
}
.lrRaceHead small{ font: 600 .75rem var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-hi); }
.lrRaceHead h2{ font: 700 clamp(2.4rem, 6vw, 4.2rem)/1 var(--f-display); margin: 6px 0 14px; }
.lrRaceHead p{ max-width: 62ch; margin: 0 0 12px; font: 400 1.02rem/1.7 var(--f-body); opacity: .88; }
.lrRaceHead p.lead{ font: 500 clamp(1.05rem, 1.8vw, 1.3rem)/1.6 var(--f-display); opacity: 1; }
.lrList{ max-width: 62ch; margin: 0 0 10px; padding-left: 20px; }
.lrHeroes{ display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(260px / var(--ui-zoom, 1)), 1fr)); gap: 18px; }
.lrHeroCard{ display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; border: 1px solid var(--c-line); background: hsl(var(--h) 16% 8% / .9); box-shadow: var(--sh-1); }
.lrCardArt{ position: relative; aspect-ratio: 3 / 3.4; background: hsl(var(--h) 20% 12%); display: flex; align-items: flex-end; touch-action: manipulation; }
.lrCardArt.encArtClickable{ cursor: var(--cur-click, pointer); }
.lrCardArt img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; -webkit-user-drag: none; user-select: none; }
.lrCardArt > div{ position: relative; width: 100%; padding: 56px 16px 14px; background: linear-gradient(transparent, hsl(var(--h) 20% 4% / .92)); }
.lrCardArt b{ display: block; font: 700 1.3rem/1.1 var(--f-display); color: var(--c-text); }
.lrCardArt small{ display: block; margin-top: 3px; color: var(--accent-hi); font: 600 .74rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.lrHeroCard > p{ margin: 0; padding: 14px 16px 18px; font: 400 .95rem/1.65 var(--f-body); opacity: .88; }
@media (max-width: 640px){ .lrRaces, .lrHeroes{ grid-template-columns: 1fr; } .lrTL{ padding-left: 18px; } }
@media (prefers-reduced-motion: reduce){ .lrRace{ transition: none; } }

/* the global header / h1 span / button rules would otherwise stretch these */
.encDetail header, .encCard header{ justify-content: flex-start; }
.lrHero h1 .lrDot{ display: inline; font-size: inherit; font-family: inherit; font-weight: inherit; margin: 0; color: var(--accent); }
.encUsed button.chip{ width: auto; flex: none; margin: 0; }