/* docs/features/game-engine/army/ — spellbook only (pages, ribbons, tiles, search). Requires game-stage.css. */
/* Workbench layout / formation mode: formation-builder.css. Formation rail: army-formation-rail.css. */
/* Stage scale: --gs-u-w = horizontal, --gs-u-h = vertical (16:9 stage; no min-axis token). */
.army-catalog-book {
  --army-book-card-scale: 0.92;
  --army-book-copies-gap: calc(var(--gs-u-h) * 0.05);
  /* ~6–8 visible chars (short queries); must fit localized placeholder, not a full-width bar. */
  --army-book-search-w: calc(var(--gs-u-w) * 13.5);
  /* Fallback when page size container is unavailable; overridden on __page-inner with cqb. */
  --army-book-page-pad-top: calc(var(--gs-u-h) * 7.48);
  --army-book-page-pad-bottom: calc(var(--gs-u-h) * 7.6);
  --army-book-page-inset-x: calc(var(--gs-u-w) * 0.72);
  --army-book-grid-pad-x: calc(var(--gs-u-w) * 0.22);
  --army-book-grid-width: 84%;
  --army-book-card-gap-x: calc(var(--gs-u-w) * 0.028);
  --army-book-card-gap-y: calc(var(--gs-u-h) * 0.02);
  --army-book-chrome-h: calc(var(--gs-u-h) * 2.2);
  --army-book-chrome-pad-y: calc(var(--gs-u-h) * 0.05);
  /* Shared footer band (left search + right spacer) so both grids share the same vertical band. */
  --army-book-footer-h: calc(var(--army-book-chrome-h) + var(--gs-u-h) * 0.31);
  --army-book-dog-ear-inset-left: 20%;
  --army-book-dog-ear-inset-right: 9.5%;
  /* Stage-based pad-bottom can exceed a short page (formation); cap ear lift for both modes. */
  --army-book-dog-ear-bottom: min(calc(var(--army-book-page-pad-bottom) * 0.42), 9%);
  --army-book-dog-ear-size: calc(var(--gs-u-h) * 5.1);
  --army-book-dog-ear-size-next: calc(var(--gs-u-h) * 5.7);
  --army-book-dog-ear-page-gap: calc(var(--gs-u-w) * 0.95);
  --army-book-dog-ear-fold:
    linear-gradient(315deg, transparent 42%, #d4b896 42.6%, #5c4028 45.2%, transparent 45.8%),
    linear-gradient(315deg, transparent 46%, #ba9e75 52%, #362515 100%);
  --army-book-ink-font: calc(var(--gs-u-h) * 1.85);
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

/* Spellbook: crest + spread + fore-edge ribbons (no extra wrap layers). */
.army-catalog-book-shell {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--army-book-shell-max-w, 80%);
  max-height: 100%;
  min-height: 0;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: visible;
  padding: 0 calc(var(--gs-u-w) * 0.15) calc(var(--gs-u-h) * 0.15);
  box-sizing: border-box;
  filter: drop-shadow(0 calc(var(--gs-u-h) * 0.65) calc(var(--gs-u-h) * 1.8) rgba(0, 0, 0, 0.62));
}

.army-spellbook {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.army-spellbook__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: visible;
}

.army-catalog-book__page {
  position: relative;
  container-type: inline-size;
  container-name: army-book-fore;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  isolation: isolate;
  /* Parchment fore-edge clearance (w-tucked + 2× edge-inset); tab geometry lives on __ribbons. */
  --army-book-fore-clearance: calc(8.2cqi + 0.42cqi);
}

.army-catalog-book__page-inner {
  container-type: size;
  container-name: army-book-page;
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--army-book-page-pad-top) var(--army-book-page-inset-x) var(--army-book-page-pad-bottom);
}

@container army-book-page (min-width: 0) {
  .army-catalog-book__page-inner {
    --army-book-page-pad-top: 17cqb;
    --army-book-page-pad-bottom: 15cqb;
  }
}

.army-catalog-book__page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--army-book-page-decal, url("/assets/img/slab/bookpage-decal.webp?v=426048991db1"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

.army-catalog-book__page--right::before {
  transform: scaleX(-1);
}

.army-catalog-book__page--left .army-catalog-book__page-inner {
  padding-left: var(--army-book-fore-clearance);
}

.army-catalog-book__page--right .army-catalog-book__page-inner {
  padding-right: var(--army-book-fore-clearance);
}

/* Fore-edge ribbon column — all tab tokens scoped here (not inherited by grid). */
.army-catalog-book__ribbons--left,
.army-catalog-book__ribbons--right {
  --army-book-ribbon-gold-line: rgba(var(--gs-gold-bright-rgb), 0.72);
  --army-book-ribbon-gold-groove: rgba(72, 48, 18, 0.52);
  --army-book-ribbon-extrude-left: drop-shadow(
    calc(var(--gs-u-w) * -0.14) calc(var(--gs-u-h) * 0.05) calc(var(--gs-u-h) * 0.2)
      rgba(0, 0, 0, 0.5)
  );
  --army-book-ribbon-extrude-right: drop-shadow(
    calc(var(--gs-u-w) * 0.14) calc(var(--gs-u-h) * 0.05) calc(var(--gs-u-h) * 0.2)
      rgba(0, 0, 0, 0.5)
  );
  --army-book-ribbon-clip-left: polygon(100% 0, 100% 100%, 0 100%, 16% 50%, 0 0);
  --army-book-ribbon-clip-right: polygon(0 0, 0 100%, 100% 100%, 84% 50%, 100% 0);
  --army-book-ribbon-stack-top: calc(var(--gs-u-h) * 7.48 * 0.72);
  --army-book-ribbon-stack-bottom: calc(var(--gs-u-h) * 7.6 * 0.85);
  --army-book-ribbon-w-tucked: 8.2cqi;
  --army-book-ribbon-w-pulled: calc(var(--army-book-ribbon-w-tucked) * 1.5);
  --army-book-ribbon-edge-inset: 0.21cqi;
  --army-book-ribbon-inner-x: calc(var(--army-book-ribbon-edge-inset) + var(--army-book-ribbon-w-tucked));
  --army-book-ribbon-left-inward: 1.08cqi;
  --army-book-ribbon-perc-max-left: 4.5cqi;
  --army-book-ribbon-perc-step-left: calc(var(--army-book-ribbon-perc-max-left) * 0.1);
  --army-book-ribbon-perc-max-outer: 3.2cqi;
  --army-book-ribbon-perc-step-outer: calc(var(--army-book-ribbon-perc-max-outer) * 0.1);
  --army-book-ribbon-right-nudge: max(3px, 0.21cqi);
  position: absolute;
  z-index: 2;
  top: var(--army-book-ribbon-stack-top);
  bottom: var(--army-book-ribbon-stack-bottom);
  width: var(--army-book-ribbon-w-pulled);
  overflow: visible;
  pointer-events: none;
}

.army-catalog-book__ribbons--left > *,
.army-catalog-book__ribbons--right > * {
  pointer-events: auto;
}

.army-catalog-book__ribbons--left {
  left: calc(
    var(--army-book-ribbon-inner-x) - var(--army-book-ribbon-w-pulled) +
      max(0px, calc(var(--army-book-ribbon-left-inward)))
  );
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--army-book-ribbon-series-gap);
}

.army-catalog-book__ribbon-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--army-book-ribbon-gap);
  width: 100%;
  flex-shrink: 0;
}

.army-catalog-book__ribbons--right {
  right: calc(
    var(--army-book-ribbon-inner-x) - var(--army-book-ribbon-w-pulled) -
      var(--army-book-ribbon-right-nudge)
  );
  display: flex;
  flex-direction: column;
  gap: var(--army-book-ribbon-gap);
  align-items: flex-start;
}

.army-catalog-book__page-main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.army-catalog-book__page-footer {
  flex: 0 0 var(--army-book-footer-h);
  min-height: var(--army-book-footer-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}

.army-catalog-book__page-footer-spacer {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.army-catalog-book__page-chrome {
  width: 100%;
  flex-shrink: 0;
  min-height: var(--army-book-chrome-h);
  padding: var(--army-book-chrome-pad-y) 0 calc(var(--gs-u-h) * 0.05);
  box-sizing: border-box;
}

.army-catalog-book__page-chrome--search {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: calc(var(--gs-u-h) * 0.22);
  padding-bottom: calc(var(--gs-u-h) * 0.04);
}

.army-catalog-book__search {
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
}

/* Beat .game-typography input { font-family: body } — spellbook search uses display + ink scale. */
.army-catalog-book__search-input,
.army-catalog-book__search-input::placeholder {
  font-family: var(--game-font-display, var(--font-display));
}

.army-catalog-book__search-input {
  min-width: calc(var(--gs-u-w) * 25);
  height: var(--army-book-chrome-h);
  box-sizing: border-box;
  padding: 0 calc(var(--gs-u-w) * 0.28);
  margin: 0;
  border: none;
  border-bottom: calc(var(--gs-u-h) * 0.1) solid rgba(36, 22, 10, 0.5);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(22, 12, 4, 0.94);
  font-size: var(--army-book-ink-font);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: none;
  appearance: none;
}

.army-catalog-book__search-input::placeholder {
  color: rgba(32, 20, 8, 0.42);
  opacity: 1;
  font-style: italic;
}

.army-catalog-book__search-input:focus {
  outline: none;
  border-bottom-color: rgba(28, 14, 4, 0.78);
  border-bottom-width: calc(var(--gs-u-h) * 0.12);
}

.army-catalog-book__search-input::-webkit-search-cancel-button,
.army-catalog-book__search-input::-webkit-search-decoration {
  appearance: none;
  display: none;
}

.army-catalog-book__page-grid {
  flex: 1;
  min-height: 0;
  width: var(--army-book-grid-width);
  max-width: var(--army-book-grid-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--army-book-card-gap-y) var(--army-book-card-gap-x);
  padding: calc(var(--gs-u-h) * 0.02) var(--army-book-grid-pad-x) calc(var(--gs-u-h) * 0.06);
  box-sizing: border-box;
  align-content: stretch;
}

.army-catalog-book__cell {
  position: relative;
  container-type: size;
  container-name: army-book-cell;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Copy count + card chip text: size from the grid cell (page-relative, not stage). */
@container army-book-cell (min-width: 0) {
  .army-book-tile__copies {
    flex: 0 0 13cqb;
    min-height: 13cqb;
    font-size: 11cqi;
    line-height: 1.1;
  }

  .army-book-tile__face {
    transition: filter 0.15s ease;
  }

  /* Shadow scales with the grid cell (stage units are far too small vs tile size). */
  .army-book-tile__card:not(.dnd-dragging):hover .army-book-tile__face,
  .army-book-tile__card:not(.dnd-dragging):focus-within .army-book-tile__face {
    filter: drop-shadow(0 10cqb 22cqi rgba(0, 0, 0, 0.58)) drop-shadow(0 4cqb 8cqi rgba(0, 0, 0, 0.42));
  }

  .army-book-tile__card:not(.dnd-dragging):hover .army-book-tile__face > .game-card-sizing > .game-card:not(.legendary-card),
  .army-book-tile__card:not(.dnd-dragging):focus-within .army-book-tile__face > .game-card-sizing > .game-card:not(.legendary-card) {
    box-shadow:
      0 0 0 max(1px, 0.35cqi) rgba(255, 210, 155, 0.5),
      0 0 0 1px rgba(255, 200, 140, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* Legendary tilt only — do not unleash default game-card 14px/40px drop shadow on the grid. */
.army-catalog-book__cell:has(.legendary-card) {
  overflow: visible;
}

/* Hover lift: stack above neighbors so cell-scaled shadow paints over adjacent tiles. */
.army-catalog-book__cell:has(.army-book-tile__card:not(.dnd-dragging):is(:hover, :focus-within)) {
  z-index: 2;
}

.army-catalog-book__cell:has(.legendary-card):has(.army-book-tile__card:not(.dnd-dragging):is(:hover, :focus-within)) {
  z-index: 3;
}

.army-catalog-book__empty-hint {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.army-catalog-book__empty-back {
  display: block;
  width: min(92%, calc(100cqi * var(--army-book-card-scale)));
  max-height: min(92%, calc(100cqb * var(--army-book-card-scale)));
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: var(--gs-radius-xs);
  border: var(--gs-hairline) solid rgba(255, 200, 140, 0.18);
  box-shadow: 0 calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.85) rgba(0, 0, 0, 0.42);
  opacity: 0.78;
  filter: saturate(0.85) brightness(0.92);
}

/* Tile: card face + copy row; size cards from __cell only (one size container). */
.army-book-tile {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--army-book-copies-gap);
  box-sizing: border-box;
}

/* Card sits on the copy row (not vertically centered in the cell — that read as the row below). */
.army-book-tile__card {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
}

/* Shrink-wrap to game-card bounds — lock overlay matches card, not the whole cell. */
.army-book-tile__face {
  position: relative;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
}

.army-catalog-book__cell .army-book-tile__face > .game-card-sizing {
  --army-book-copies-block: max(
    calc(var(--gs-u-h) * 2.35) + var(--army-book-copies-gap),
    13cqb + var(--army-book-copies-gap)
  );
  --army-book-card-h: calc(100cqb - var(--army-book-copies-block));
  width: min(
    calc(100cqi * var(--army-book-card-scale)),
    calc(var(--army-book-card-h) * 5 / 7 * var(--army-book-card-scale))
  );
  max-width: 100%;
  max-height: calc(var(--army-book-card-h) * var(--army-book-card-scale));
  margin: 0 auto;
  --game-card-width: min(
    calc(100cqi * var(--army-book-card-scale)),
    calc(var(--army-book-card-h) * 5 / 7 * var(--army-book-card-scale))
  );
}

/* Missing units: no copy row — card uses full cell height. */
.army-catalog-book__cell .army-book-tile--catalog-missing .army-book-tile__face > .game-card-sizing {
  --army-book-card-h: 100cqb;
}

.army-book-tile__copies {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: rgba(28, 16, 6, 0.94);
  pointer-events: none;
  white-space: nowrap;
}

.army-book-tile__face > .game-card-sizing > .game-card {
  border-radius: var(--game-card-radius, var(--gs-radius-xs));
}

/* Spellbook tiles: no full-size game-card drop shadow (14px/40px px reads huge in a 3×3 grid). */
.army-book-tile__face > .game-card-sizing > .game-card:not(.legendary-card) {
  box-shadow:
    0 0 0 1px rgba(255, 200, 140, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.15s ease;
}

/* Missing units (?mode=missing): dim unit art only; spellbook chrome unchanged. */
.army-book-tile--catalog-missing .game-card__art .game-card__img {
  filter: grayscale(1) brightness(0.42);
}

/* Stage tokens for holo/tilt — book cells are size containers; do not use tiny 1cqw fallback. */
.army-book-tile__face > .game-card-sizing > .game-card.legendary-card {
  --legend-su: var(--gs-u-h);
}

/* Spellbook fore-edge ribbons — role classes = geometry; --scheme-* = palette (one mid + color-mix). */
.army-book-ribbon--scheme-blue {
  --army-book-ribbon-scheme-mid: #243d72;
  --army-book-ribbon-scheme-ink: rgba(220, 232, 255, 0.98);
  --army-book-ribbon-scheme-ink-shadow: rgba(8, 14, 36, 0.6);
}

.army-book-ribbon--scheme-green {
  --army-book-ribbon-scheme-mid: #256a38;
  --army-book-ribbon-scheme-ink: rgba(220, 255, 230, 0.98);
  --army-book-ribbon-scheme-ink-shadow: rgba(8, 28, 14, 0.58);
}

.army-book-ribbon--scheme-red {
  --army-book-ribbon-scheme-mid: #822228;
  --army-book-ribbon-scheme-ink: rgba(255, 228, 218, 0.98);
  --army-book-ribbon-scheme-ink-shadow: rgba(36, 8, 10, 0.58);
}

.army-book-ribbon {
  --army-book-ribbon-edge: color-mix(in srgb, var(--army-book-ribbon-scheme-mid) 76%, white);
  --army-book-ribbon-deep: color-mix(in srgb, var(--army-book-ribbon-scheme-mid) 58%, black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--army-book-ribbon-w-tucked);
  height: var(--army-book-ribbon-h);
  min-height: var(--army-book-ribbon-h);
  flex: 0 0 auto;
  flex-shrink: 0;
  isolation: isolate;
  z-index: calc(24 - var(--army-book-ribbon-perc-index, 0));
  padding: calc(var(--army-book-ribbon-h) * 0.025);
  border: none;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  overflow: visible;
  transition:
    width 0.18s ease,
    transform 0.18s ease,
    filter 0.15s ease,
    background 0.15s ease;
  background: linear-gradient(
    180deg,
    var(--army-book-ribbon-edge) 0%,
    var(--army-book-ribbon-scheme-mid) 18%,
    var(--army-book-ribbon-deep) 50%,
    var(--army-book-ribbon-scheme-mid) 82%,
    var(--army-book-ribbon-edge) 100%
  );
}

.army-book-ribbon::before,
.army-book-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.army-book-ribbon:not(.army-book-ribbon--off) {
  width: var(--army-book-ribbon-w-pulled);
  --army-book-ribbon-edge: color-mix(in srgb, var(--army-book-ribbon-scheme-mid) 68%, white);
  --army-book-ribbon-deep: color-mix(in srgb, var(--army-book-ribbon-scheme-mid) 48%, black);
}

.army-book-ribbon--off {
  background: linear-gradient(180deg, #445668 0%, #3c4c5c 18%, #2a3442 50%, #3c4c5c 82%, #445668 100%);
}

/* --- Fore-edge geometry (clip, stagger, gold inlay) — not variant-specific --- */
:is(.army-book-ribbon--race, .army-book-ribbon--race-heading, .army-book-ribbon--filter) {
  clip-path: var(--army-book-ribbon-clip-left);
  filter: var(--army-book-ribbon-extrude-left);
  transform: translateX(calc(-1 * var(--army-book-ribbon-perc-shift)));
}

:is(.army-book-ribbon--damage, .army-book-ribbon--damage-heading) {
  clip-path: var(--army-book-ribbon-clip-right);
  filter: var(--army-book-ribbon-extrude-right);
  --army-book-ribbon-perc-shift: calc(
    var(--army-book-ribbon-perc-step-outer) * var(--army-book-ribbon-perc-index, 0)
  );
  transform: translateX(var(--army-book-ribbon-perc-shift));
}

:is(.army-book-ribbon--race, .army-book-ribbon--race-heading) {
  --army-book-ribbon-perc-shift: max(
    0px,
    calc(
      var(--army-book-ribbon-perc-max-left) -
        var(--army-book-ribbon-perc-step-left) * var(--army-book-ribbon-perc-index, 0)
    )
  );
}

.army-book-ribbon--filter {
  --army-book-ribbon-perc-shift: max(
    0px,
    calc(
      var(--army-book-ribbon-perc-max-outer) -
        var(--army-book-ribbon-perc-step-outer) * var(--army-book-ribbon-perc-index, 0)
    )
  );
}

:is(.army-book-ribbon--race, .army-book-ribbon--race-heading, .army-book-ribbon--filter)::before {
  clip-path: var(--army-book-ribbon-clip-left);
  box-shadow:
    inset 0 var(--gs-hairline) 0 0 var(--army-book-ribbon-gold-line),
    inset 0 calc(var(--gs-hairline) * -1) 0 0 var(--army-book-ribbon-gold-line),
    inset var(--gs-stroke) 0 0 0 var(--army-book-ribbon-gold-groove),
    inset calc(var(--gs-stroke) * 2) 0 0 0 var(--army-book-ribbon-gold-line);
}

:is(.army-book-ribbon--damage, .army-book-ribbon--damage-heading)::before {
  clip-path: var(--army-book-ribbon-clip-right);
  box-shadow:
    inset 0 var(--gs-hairline) 0 0 var(--army-book-ribbon-gold-line),
    inset 0 calc(var(--gs-hairline) * -1) 0 0 var(--army-book-ribbon-gold-line),
    inset calc(var(--gs-stroke) * -1) 0 0 0 var(--army-book-ribbon-gold-groove),
    inset calc(var(--gs-stroke) * -2) 0 0 0 var(--army-book-ribbon-gold-line);
}

/* --- Role (label typography, filter glyph) --- */
.army-book-ribbon--filter {
  padding: calc(var(--army-book-ribbon-h) * 0.011);
}

.army-book-ribbon--filter .army-book-ribbon__glyph,
.army-book-ribbon--damage .army-book-ribbon__glyph {
  font-size: calc(var(--army-book-ribbon-h) * 0.389);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

:is(.army-book-ribbon--race-heading, .army-book-ribbon--damage-heading) {
  font-size: calc(var(--army-book-ribbon-h) * 0.126);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.05;
  text-transform: uppercase;
}

:is(.army-book-ribbon--race-heading, .army-book-ribbon--damage-heading, .army-book-ribbon--filter) {
  color: var(--army-book-ribbon-scheme-ink);
  text-shadow: 0 1px 0 var(--army-book-ribbon-scheme-ink-shadow);
}

:is(.army-book-ribbon--race, .army-book-ribbon--race-heading, .army-book-ribbon--filter)::after,
:is(.army-book-ribbon--damage, .army-book-ribbon--damage-heading)::after {
  opacity: 0.72;
  background:
    linear-gradient(
      180deg,
      transparent 12%,
      color-mix(in srgb, var(--army-book-ribbon-scheme-mid) 22%, transparent) 30%,
      color-mix(in srgb, var(--army-book-ribbon-scheme-mid) 34%, transparent) 50%,
      color-mix(in srgb, var(--army-book-ribbon-scheme-mid) 22%, transparent) 70%,
      transparent 88%
    ),
    linear-gradient(
      var(--army-book-ribbon-sheen-angle, 90deg),
      color-mix(in srgb, var(--army-book-ribbon-scheme-mid) 14%, white) 0%,
      transparent 28%
    );
}

:is(.army-book-ribbon--race, .army-book-ribbon--race-heading, .army-book-ribbon--filter)::after {
  clip-path: var(--army-book-ribbon-clip-left);
  --army-book-ribbon-sheen-angle: 90deg;
}

:is(.army-book-ribbon--damage, .army-book-ribbon--damage-heading)::after {
  clip-path: var(--army-book-ribbon-clip-right);
  --army-book-ribbon-sheen-angle: 270deg;
}

.army-book-ribbon__img,
.army-book-ribbon__glyph,
:is(.army-book-ribbon--race-heading, .army-book-ribbon--damage-heading) {
  position: relative;
  z-index: 1;
}

/* --- Interaction (grouped by fore-edge extrude direction) --- */
:is(.army-book-ribbon--race, .army-book-ribbon--race-heading).army-book-ribbon--off {
  filter: grayscale(0.32) saturate(0.72) var(--army-book-ribbon-extrude-left);
}

.army-book-ribbon--filter.army-book-ribbon--off {
  filter: grayscale(0.32) saturate(0.72) var(--army-book-ribbon-extrude-left);
}

:is(.army-book-ribbon--damage, .army-book-ribbon--damage-heading).army-book-ribbon--off {
  filter: grayscale(0.32) saturate(0.72) var(--army-book-ribbon-extrude-right);
}

:is(.army-book-ribbon--race, .army-book-ribbon--race-heading, .army-book-ribbon--filter):not(
    .army-book-ribbon--off
  ):hover {
  filter: brightness(1.08) var(--army-book-ribbon-extrude-left);
}

:is(.army-book-ribbon--damage, .army-book-ribbon--damage-heading):not(.army-book-ribbon--off):hover {
  filter: brightness(1.08) var(--army-book-ribbon-extrude-right);
}

:is(.army-book-ribbon--race, .army-book-ribbon--race-heading, .army-book-ribbon--filter).army-book-ribbon--off:hover {
  filter: grayscale(0.22) saturate(0.85) brightness(1.04) var(--army-book-ribbon-extrude-left);
}

:is(.army-book-ribbon--damage, .army-book-ribbon--damage-heading).army-book-ribbon--off:hover {
  filter: grayscale(0.22) saturate(0.85) brightness(1.04) var(--army-book-ribbon-extrude-right);
}

.army-book-ribbon__img {
  width: calc(var(--army-book-ribbon-h) * 0.654);
  height: calc(var(--army-book-ribbon-h) * 0.654);
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--army-book-ribbon-h) * 0.007) calc(var(--army-book-ribbon-h) * 0.014) rgba(4, 8, 24, 0.55));
}

.army-catalog-book__dog-ear {
  position: absolute;
  z-index: 2;
  display: block;
  text-decoration: none;
  transition:
    filter 0.15s ease,
    box-shadow 0.15s ease;
  border: none;
  cursor: pointer;
  background: var(--army-book-dog-ear-fold);
  box-shadow:
    0 calc(var(--gs-u-h) * 0.1) calc(var(--gs-u-h) * 0.22) rgba(12, 6, 2, 0.5),
    inset 0 calc(var(--gs-u-h) * -0.08) calc(var(--gs-u-h) * 0.12) rgba(54, 37, 21, 0.35);
}

.army-catalog-book__dog-ear:hover {
  filter: brightness(1.08);
}

.army-catalog-book__dog-ear--prev {
  left: var(--army-book-dog-ear-inset-left);
  bottom: var(--army-book-dog-ear-bottom);
  width: var(--army-book-dog-ear-size);
  height: var(--army-book-dog-ear-size);
  transform: scaleX(-1);
  transform-origin: 0% 100%;
}

.army-catalog-book__dog-ear--next {
  right: var(--army-book-dog-ear-inset-right);
  bottom: var(--army-book-dog-ear-bottom);
  width: var(--army-book-dog-ear-size-next);
  height: var(--army-book-dog-ear-size-next);
}

:is(.army-catalog-book__dog-ear-page, .army-catalog-book__page-mark) {
  font-family: var(--font-display);
  font-size: calc(var(--gs-u-h) * 2.35);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #362515;
  text-shadow: 0 1px 0 rgba(186, 158, 117, 0.55);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.army-catalog-book__dog-ear-page {
  position: absolute;
  right: 100%;
  bottom: calc(var(--gs-u-h) * 0.55);
  margin-right: var(--army-book-dog-ear-page-gap);
}

.army-catalog-book__page-mark {
  position: absolute;
  right: calc(
    var(--army-book-dog-ear-inset-right) + var(--army-book-dog-ear-size-next) + var(--army-book-dog-ear-page-gap)
  );
  bottom: calc(var(--army-book-dog-ear-bottom) + var(--gs-u-h) * 0.55);
}

/* Tab height: 3.5% of stage height. 7×1cqh ≈ 2× old 8.2cqi×0.861 tabs on typical layouts. */
@container game-stage (min-width: 0) {
  .army-catalog-book__ribbons--left,
  .army-catalog-book__ribbons--right {
    --army-book-ribbon-h: calc(3.5 * 1cqh);
    --army-book-ribbon-gap: calc(var(--army-book-ribbon-h) * 0.5);
    --army-book-ribbon-series-gap: calc(var(--army-book-ribbon-h) * 0.85);
  }
}

/* Star Forge / Tangled Fate / Summoning Circle — tray-depleted spellbook tiles. */
.army-book-tile--depleted .army-book-tile__face {
  filter: grayscale(1);
  opacity: 0.42;
}

.army-book-tile--depleted .army-book-tile__copies {
  opacity: 0.45;
}

.army-book-tile--depleted .army-book-tile__card {
  cursor: default;
}