/* Bestiary: the monsters page, the homepage teaser cards and the boss band (agent B, v3 AAA).
   Scene: js/scenes/bestiary.js draws every visible card from ONE shared WebGL2 stage and copies
   each card's pixels into its own <canvas> (scrolls with the page, no overlay lag).
   Family hue: any .family--* sets --fam / --fam-rgb (site.css). */

:root {
  /* element hides (the game's palette roles FIRE / ARC / POISON, spacez.json) */
  --el-fire: #ff802e;
  --el-lightning: #ffd94d;
  --el-poison: #9ef238;
  --bst-bg: #07080d;
}

/* ================================================================ page rhythm */

.page-bestiary .page-head { padding-bottom: clamp(2rem, 4vw, 3rem); }
.page-bestiary .bestiary-body { display: block; }
.page-bestiary section[id] { scroll-margin-top: calc(var(--head-h) + 4.4rem); }

/* ---- sticky family index */
.bst-index {
  position: sticky; top: var(--head-h); z-index: 20;
  margin: 0 calc(-1 * var(--gutter)) clamp(3rem, 6vw, 5rem);
  padding: 0 var(--gutter);
  background: linear-gradient(180deg, rgba(var(--void-rgb), 0.86), rgba(var(--void-rgb), 0.7));
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.bst-index ol { display: flex; gap: 0; margin: 0 auto; }
.bst-index li { flex: 1 1 0; min-width: 0; }
.bst-index a {
  position: relative; display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.95rem 1rem 0.9rem 0;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: rgba(var(--star-rgb), 0.62);
  transition: color var(--t-micro) ease;
}
.bst-index a::after {
  content: ""; position: absolute; left: 0; right: 1rem; bottom: -1px; height: 1px;
  background: var(--fam, var(--magenta));
  box-shadow: 0 0 10px rgba(var(--fam-rgb, var(--monster-rgb)), 0.9);
  transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out);
}
.bst-index a:hover, .bst-index a.is-current { color: var(--ink); }
.bst-index a:hover::after, .bst-index a.is-current::after { transform: scaleX(1); }
.bst-index .bi-n { color: var(--fam, var(--magenta)); font-weight: 700; }
.bst-index .bi-name { font-weight: 700; }
.bst-index .bi-count { color: rgba(var(--star-rgb), 0.45); }
.bst-index li + li a { padding-left: 1.2rem; border-left: 1px solid var(--hair); }
.bst-index li + li a::after { left: 1.2rem; }
.bst-index .bi-boss { --fam: var(--magenta); --fam-rgb: var(--monster-rgb); }
@media (max-width: 640px) {
  .bst-index a { gap: 0.4rem; padding-right: 0.5rem; font-size: 0.64rem; letter-spacing: 0.08em; }
  .bst-index a::after { right: 0.5rem; }
  .bst-index li + li a { padding-left: 0.6rem; }
  .bst-index li + li a::after { left: 0.6rem; }
  .bst-index .bi-count { display: none; }
}
@media (max-width: 360px) { .bst-index .bi-n { display: none; } }

/* ---- family section head */
.family-section { position: relative; margin-bottom: clamp(5rem, 10vw, 8.5rem); }
.page-bestiary .family-head {
  position: relative; display: block; max-width: 60rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.family-ghost {
  position: absolute; z-index: -1; right: 0; top: -0.2em;
  font-weight: 700; font-size: clamp(5rem, 17vw, 15rem); line-height: 0.8; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--fam-rgb), 0.13);
  pointer-events: none; user-select: none;
}
.family-section .family-head { max-width: none; }
.family-section .family-head > :not(.family-ghost) { max-width: 46rem; }
.page-bestiary .family-head .kicker-idx { color: var(--fam); }
.page-bestiary .family-head h2 { font-size: clamp(3rem, 8.6vw, 6.4rem); line-height: 0.88; }
.family-line { margin-top: 1.2rem; font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--ink-2); }
.family-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0; margin-top: 1.3rem; color: rgba(var(--fam-rgb), 0.9); }
.family-facts strong { color: var(--ink); }
.family-section .family-head::after {           /* a lit hue rail under the head */
  content: ""; display: block; height: 1px; margin-top: 1.8rem; max-width: 100%;
  background: linear-gradient(90deg, var(--fam), rgba(var(--fam-rgb), 0.25) 38%, transparent 80%);
  box-shadow: 0 0 12px rgba(var(--fam-rgb), 0.55);
}

/* ================================================================ creature cards */

.beast-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}
.beast {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(var(--fam-rgb), 0.045), rgba(var(--star-rgb), 0.012) 40%, rgba(var(--void-rgb), 0.4));
  transition: border-color 250ms ease, background-color 250ms ease;
  outline-offset: 4px;
}
.beast::before {                               /* corner ticks */
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 4; --tk: 10px;
  background:
    linear-gradient(var(--tick), var(--tick)) left top / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left top / 1px var(--tk) no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / var(--tk) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / 1px var(--tk) no-repeat;
  transition: opacity 250ms ease;
}
.beast:hover, .beast:focus-within, .beast.is-hot { border-color: rgba(var(--fam-rgb), 0.42); }
.beast:focus-visible { outline: 2px solid var(--fam); }

/* the viewport: the live creature on its treadmill */
.beast-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.beast-scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 42% at 48% 56%, rgba(var(--fam-rgb), 0.13), transparent 72%),
    var(--bst-bg);
}
.beast-scene > canvas, .boss-scene > canvas, .family-scene > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.beast-view::after {                           /* vignette + the hue edge on top */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 78% 82% at 50% 52%, transparent 58%, rgba(var(--void-rgb), 0.72) 100%);
  border-top: 1px solid rgba(var(--fam-rgb), 0.55);
}
.beast-scene .family-glyph::before { width: auto; height: 46%; }

/* HUD over the view (aria-hidden; the card text carries the same data) */
.beast-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(var(--star-rgb), 0.66); font-variant-numeric: tabular-nums; }
.beast-idx { position: absolute; left: 0.9rem; top: 0.75rem; color: var(--fam); font-weight: 700; }
.beast-mag { position: absolute; right: 0.9rem; top: 0.75rem; }
.beast-readout {
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.75rem; display: grid; gap: 0.15rem;
  line-height: 1.45; white-space: nowrap; overflow: hidden;
}
.beast-readout .ro-line { display: flex; align-items: baseline; gap: 0.7em; min-height: 1.45em; }
.beast-readout .ro-name { color: var(--ink); font-weight: 700; letter-spacing: 0.2em; font-size: 0.72rem; }
.beast-readout .ro-name::before { content: ""; display: inline-block; flex: none; width: 6px; height: 6px; align-self: center;
  background: var(--fam); box-shadow: 0 0 10px rgba(var(--fam-rgb), 0.9); }
.beast-readout .ro-k { color: var(--fam); font-weight: 700; }
.beast-readout .ro-v { color: rgba(var(--ink-rgb), 0.86); }
.beast-readout .ro-sep { color: rgba(var(--star-rgb), 0.35); }
.beast-readout .ro-caret::after { content: "_"; color: var(--fam); animation: bst-caret 0.7s steps(1) infinite; }
@keyframes bst-caret { 50% { opacity: 0; } }
.beast-readout { transition: opacity 700ms var(--ease-out); }
.beast-readout.is-faded { opacity: 0; }

/* the text half */
.beast-body { display: flex; flex-direction: column; gap: 0; padding: 1.15rem 1.25rem 1.35rem; flex: 1 1 auto; }
.beast-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0; font-size: 0.68rem; }
.beast-role { color: var(--fam); font-weight: 700; }
.beast h3 { margin-top: 0.45rem; font-size: clamp(1.7rem, 2.3vw, 2.15rem); letter-spacing: 0.01em; }

.beast-stats { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, 0.75fr); gap: 0.9rem; margin-top: 1rem; }
.beast-stats > div { min-width: 0; }
.beast-stats dt {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--star-rgb), 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beast-stats dd { margin-top: 0.15rem; font-weight: 700; font-size: 1.22rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.beast-stats dd small { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.08em; color: rgba(var(--star-rgb), 0.55); text-transform: uppercase; }
.beast-stats > div::after {                     /* a thin readout bar (relative to the planet's highest value) */
  content: ""; display: block; height: 2px; margin-top: 0.5rem;
  background: linear-gradient(90deg, var(--fam) calc(var(--v) * 100%), rgba(var(--star-rgb), 0.12) calc(var(--v) * 100%));
}
.js .beast-stats > div::after { background: rgba(var(--star-rgb), 0.12); position: relative; }
.js .beast-stats > div { position: relative; }
.js .beast-stats > div::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--v) * 100%); z-index: 1;
  background: var(--fam); box-shadow: 0 0 8px rgba(var(--fam-rgb), 0.7);
  transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out);
}
.js .beast.is-scanned .beast-stats > div::before { transform: scaleX(1); }
.js .beast.is-scanned .beast-stats > div:nth-child(2)::before { transition-delay: 80ms; }
.js .beast.is-scanned .beast-stats > div:nth-child(3)::before { transition-delay: 160ms; }
.js .beast.is-scanned .beast-stats > div:nth-child(4)::before { transition-delay: 240ms; }

.beast-desc { margin-top: 1.1rem; font-size: 0.98rem; line-height: 1.58; color: var(--ink-2); }
.beast-traits { display: grid; gap: 0.55rem; margin-top: 1rem; padding-top: 0.95rem; border-top: 1px solid var(--hair); }
.trait { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; }
.trait dt { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.trait--threat dt { color: var(--magenta); }
.trait--counter dt { color: var(--amber); }
.trait dd { font-size: 0.95rem; line-height: 1.45; color: var(--ink); }
.beast-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.beast-tags li {
  padding: 0.28rem 0.55rem; border: 1px solid rgba(var(--fam-rgb), 0.35);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.86); background: rgba(var(--fam-rgb), 0.05);
}

/* variant chips (Clubspine, Slabback): one card, three element hides */
.beast-variants { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.9rem; }
.beast-variants .hud { margin-right: 0.4rem; font-size: 0.62rem; }
.chip {
  --el: var(--fam);
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--hair-2);
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.72);
  transition: border-color var(--t-micro) ease, color var(--t-micro) ease, background-color var(--t-micro) ease;
}
.chip::before { content: ""; width: 7px; height: 7px; background: var(--el); box-shadow: 0 0 8px var(--el); }
.chip--fire { --el: var(--el-fire); }
.chip--lightning { --el: var(--el-lightning); }
.chip--poison { --el: var(--el-poison); }
.chip:hover { color: var(--ink); border-color: var(--el); }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--el); background: color-mix(in srgb, var(--el) 12%, transparent); }
.js .beast-data:not(.is-active) { display: none; }
.no-js .beast-data + .beast-data, .beast-data + .beast-data:not(.is-active) { margin-top: 1.4rem; }

/* wide cards: the heavy bodies get two columns, the view on the left */
.beast--wide { grid-column: span 2; flex-direction: row; }
.beast--wide .beast-view { flex: 0 0 56%; aspect-ratio: auto; min-height: 340px; }
.beast--wide .beast-view::after { border-top: 0; border-right: 1px solid rgba(var(--fam-rgb), 0.55); }
.beast--flip { flex-direction: row-reverse; }
.beast--flip .beast-view::after { border-right: 0; border-left: 1px solid rgba(var(--fam-rgb), 0.55); }
.beast--wide .beast-body { flex: 1 1 44%; min-width: 0; padding: 1.4rem 1.5rem 1.5rem; }
.beast--wide h3 { font-size: clamp(2rem, 2.8vw, 2.7rem); }

@media (max-width: 1099px) {
  .beast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .beast-grid { grid-template-columns: minmax(0, 1fr); }
  .beast--wide { grid-column: auto; flex-direction: column; }
  .beast--wide .beast-view { flex: none; aspect-ratio: 16 / 11; min-height: 0; }
  .beast--wide .beast-view::after, .beast--flip .beast-view::after { border-left: 0; border-right: 0; border-top: 1px solid rgba(var(--fam-rgb), 0.55); }
  .beast--wide .beast-body { padding: 1.15rem 1.25rem 1.35rem; }
  .beast-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.2rem; }
  .trait { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* ================================================================ boss band */

.boss-band { position: relative; margin-bottom: 0; }
.boss-band .kicker-idx { color: var(--magenta); }
.boss-head h2 { font-size: clamp(2.4rem, 6vw, 4.6rem) !important; }
.boss-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 1rem); }
.boss { position: relative; aspect-ratio: 3 / 4.4; border: 1px solid rgba(var(--monster-rgb), 0.22); overflow: hidden; }
.boss::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--void-rgb), 0.9) 0%, rgba(var(--void-rgb), 0.2) 34%, transparent 55%),
              radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(var(--void-rgb), 0.7) 100%);
}
.boss-scene { position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 42%, rgba(var(--monster-rgb), 0.2), transparent 75%), var(--bst-bg); }
.boss-idx { position: absolute; z-index: 3; left: 0.9rem; top: 0.75rem; color: var(--magenta); font-size: 0.64rem; }
.boss-wave { position: absolute; z-index: 3; left: 0.9rem; right: 0.9rem; bottom: 0.7rem; display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--star-rgb), 0.6); }
.boss-wave strong { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 0.9; letter-spacing: 0; color: var(--ink); }
@media (max-width: 899px) {
  .boss-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boss { aspect-ratio: 4 / 4.2; }
  .boss:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* ================================================================ homepage teaser cards */

.bestiary-teaser .family-card { display: flex; flex-direction: column; }
.bestiary-teaser .family-scene { border: 0; aspect-ratio: 4 / 3.6; background: radial-gradient(ellipse 60% 42% at 48% 56%, rgba(var(--fam-rgb), 0.14), transparent 72%), var(--bst-bg); }
.family-card .beast-view { aspect-ratio: auto; border: 1px solid var(--hair); transition: border-color 250ms ease; }
.family-card .beast-view::after { border-top-color: rgba(var(--fam-rgb), 0.65); }
.family-card:hover .beast-view, .family-card:focus-within .beast-view, .family-card.is-hot .beast-view { border-color: rgba(var(--fam-rgb), 0.45); }
.family-card .family-meta { margin-top: 1.1rem; }
.family-card h3 { margin-top: 0.45rem; }
.family-card .family-shown { margin-top: 0.7rem; color: var(--ink-2); font-size: 0.98rem; }
.family-card .family-shown strong { color: var(--ink); }
.family-link { position: absolute; inset: 0; z-index: 5; }
.family-link:focus-visible { outline: 2px solid var(--fam); outline-offset: 4px; }

/* reduced motion: no caret blink, no bar sweep (site.css already kills transitions) */
@media (prefers-reduced-motion: reduce) {
  .beast-readout .ro-caret::after { content: none; }
}

/* Q: the boss heading breaks after "5 bosses." on purpose, not mid-phrase ("SEE / THEM"). */
.boss-head-2 { display: block; }