/* THE BESTIARY AS A CARD COLLECTION: tiles are small cards on the element ground; the right-hand page
   is one creature's trading card (63 x 88) built by `src/game/ui/BestiaryCard.ts`. Loaded after
   16-no-picture-frames: the card's gilt frame is the card's own border, not a frame round a picture. */

/* SIZED TO FOUR ROWS (owner, 2026-09-25): the window is as tall as its content, and the columns are
   ONE fixed height that holds exactly four rows of tiles (4 x 116 + 3 x 12 gap + 18 padding = 518);
   the card starts at the first row's top (the grid's 8px padding) and is exactly the four rows tall
   (500), so its edges line up with the rows beside it; 63:88 makes it 358 wide. Fixed rather than a share of the viewport, so every screen
   opens on the same four rows. Shrinks with the viewport only when it must. */
.rpg-panel--bestiary { width: min(980px, 96vw); height: auto; max-height: 94vh; }
.rpg-bestiary-cols { grid-template-columns: minmax(0, 1fr) 366px; height: min(518px, calc(94vh - 150px)); flex: none; }

/* ---- tiles --------------------------------------------------------------------------------- */
/* Room INSIDE the scroller for the selected tile's lift and glow: a scroller clips at its padding
   box, so without this the highlight is cut off on the grid's outer edges. */
.rpg-bestiary-grid { padding: 8px 10px 10px 8px !important; }
.rpg-bestiary-tile { gap: 0 !important; padding: 0 !important; overflow: hidden; border-radius: 10px; min-height: 116px;
  background: linear-gradient(to bottom, #2a2138, #1e1729) !important;
  box-shadow: 0 0 0 1px rgba(239,220,187,.18), 0 4px 10px rgba(0,0,0,.3);
  transition: transform .12s, box-shadow .12s; }
.rpg-bestiary-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(239,220,187,.5), 0 8px 16px rgba(0,0,0,.4); }
.rpg-bestiary-tile.is-selected { transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--gold-hi), 0 0 14px rgba(239,220,187,.4) !important; }
.rpg-bestiary-tile.is-unknown { opacity: 1; }
.rpg-bestiary-tile .rpg-bestiary-art { flex: none; width: 100%; height: 84px; min-height: 84px; padding: 4px; border-radius: 0; }
.rpg-bestiary-lvl { position: absolute; z-index: 2; top: 5px; left: 6px; padding: 2px 5px; border-radius: 4px;
  font: 700 9.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--gold-hi); background: rgba(10,8,16,.55); }
.rpg-bestiary-tile .rpg-bestiary-name { align-self: stretch; text-align: left; padding: 6px 44px 0 8px; font-size: 11.5px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpg-bestiary-tile .rpg-bestiary-count { align-self: stretch; justify-content: flex-end; padding: 0 8px 6px;
  margin-top: -13px; font-size: 10px; color: var(--ink-soft); font-style: normal; }
.rpg-bestiary-tile .rpg-bestiary-slain { font-size: 11px; color: #d8ccb4; opacity: .85; }
.rpg-bestiary-count.is-unknown { opacity: .5; }

/* ---- the page ------------------------------------------------------------------------------ */
.rpg-bestiary-detail { padding: 8px 4px 0 !important; overflow: visible !important; border: 0 !important; background: none !important;
  display: flex; flex-direction: column; align-items: center; }

/* ---- the card ------------------------------------------------------------------------------ */
.bcard { --el: #c8b0f0; --el-deep: #3a2a5a; --el-glow: rgba(200,176,240,.35);
  --gold1: #fbe9b0; --gold2: #d9ae5c; --gold3: #8a6428; --gold4: #4a3212;
  position: relative; flex: none; height: 500px; width: auto; max-width: 100%; max-height: calc(100% - 8px); aspect-ratio: 63 / 88; padding: 11px; border-radius: 16px;
  /* FOIL EDGE: a rainbow sheen over the gilt, strongest at the rim. */
  /* THE OUTER BORDER IS THE ELEMENT: a foil sheen in the element's own three tones. */
  --f1: #f0e0ff; --f2: #a888d8; --f3: #4a3478;
  background: conic-gradient(from 200deg, var(--f1), var(--f2), var(--f3), var(--f2), var(--f1), var(--f2), var(--f3), var(--f2), var(--f1)) border-box;
  box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.6), 0 0 26px var(--el-glow); }
/* THE INSCRIPTION: an SVG (BestiaryCard `inscription()`) that walks the border's rounded rectangle
   and sets the element's glyph along it, turned to each edge. Dark cut + light lip = carved. */
.bcard-insc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.bcard-insc-lip { color: rgba(255,255,255,.42); }
.bcard-insc-cut { color: rgba(24,10,4,.62); }
.bcard[data-element="fire"]  { --el: #ff9a5a; --el-deep: #6a2a14; --el-glow: rgba(255,154,90,.4); --f1: #ffe2b0; --f2: #ff7a3a; --f3: #8a1e10; }
.bcard[data-element="water"] { --el: #7ac8ff; --el-deep: #1a4a7a; --el-glow: rgba(122,200,255,.4); --f1: #d8f6ff; --f2: #4aa8e8; --f3: #0e3a6e; }
.bcard[data-element="earth"] { --el: #e8b868; --el-deep: #6a4a22; --el-glow: rgba(232,184,104,.4); --f1: #fff0c8; --f2: #c89048; --f3: #5a3a18; }
.bcard[data-element="wind"]  { --el: #7fd6a4; --el-deep: #1f5a44; --el-glow: rgba(127,214,164,.4); --f1: #e0ffe8; --f2: #5ac48a; --f3: #16503a; }
.bcard.is-unknown { --el-glow: rgba(140,130,190,.2); --f1: #c8c4d8; --f2: #7a7490; --f3: #34304a; }
.bcard.is-unknown .bcard-stat { --t: #4a4660; }
.bcard.is-unknown .bcard-stat-txt b, .bcard.is-unknown .bcard-elem, .bcard.is-unknown .bcard-type-badge { color: rgba(239,220,187,.55); }
.bcard.is-unknown .bcard-elem, .bcard.is-unknown .bcard-type-badge { font: 800 16px/1 var(--font-display); background: radial-gradient(circle at 38% 30%, #5a5478, #221e34); }
.bcard.is-unknown .bcard-type-badge { font-size: 12px; }
.bcard.is-unknown .rpg-bestiary-tag.is-xp, .bcard.is-unknown .bcard-row-v { color: rgba(239,220,187,.5); }

.bcard-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 6px;
  border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse 120% 50% at 50% 100%, color-mix(in srgb, var(--el) 12%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px), linear-gradient(to bottom, #221b2e, #16111f);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 1px color-mix(in srgb, var(--f1) 35%, transparent); }

/* ---- art ----------------------------------------------------------------------------------- */
.bcard-art.rpg-bestiary-art { flex: none; width: auto; height: 45%; margin: 0; padding: 0; border-radius: 7px; overflow: hidden;
  box-shadow: 0 0 0 2px var(--gold2), 0 0 0 3px var(--gold4), inset 0 0 22px rgba(0,0,0,.45) !important; }
.bcard-art > img { position: absolute; inset: 4px 0 38px; width: 100%; height: calc(100% - 42px); object-fit: contain; }
.bcard-sprite { position: absolute; z-index: 1; left: 50%; bottom: 38px; height: calc((100% - 42px) * var(--scale, 1)); aspect-ratio: 1; translate: -50% 0;
  background-repeat: no-repeat; background-position: 0 0; background-size: calc(var(--frames) * 100%) 100%;
  animation: bcard-walk var(--period) steps(var(--frames)) infinite;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.45)); }
@keyframes bcard-walk { to { background-position: calc(100% * var(--frames) / (var(--frames) - 1)) 0; } }
@media (prefers-reduced-motion: reduce) { .bcard-sprite { animation: none; } }

.bcard-lv, .bcard-elem { position: absolute; z-index: 3; top: 7px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  box-shadow: 0 0 0 2px var(--gold2), 0 0 0 3.5px var(--gold4), 0 3px 8px rgba(0,0,0,.55); }
.bcard-lv { right: 7px; background: radial-gradient(circle at 38% 30%, #3e3256, #120d1c); color: var(--gold1);
  font: 800 15px/1 var(--font-display); }
.bcard-lv small { display: block; font: 700 6.5px/1 var(--font-mono); letter-spacing: .16em; color: #b9a98a; margin-bottom: 1px; }
.bcard-elem { right: 7px; color: #fff; place-items: center;
  background: radial-gradient(circle at 38% 30%, var(--el), var(--el-deep) 75%);
  box-shadow: 0 0 0 2px var(--gold2), 0 0 0 3.5px var(--gold4), 0 0 14px var(--el-glow), 0 3px 8px rgba(0,0,0,.55); }
.bcard-elem svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

.bcard-tag { position: absolute; z-index: 3; top: 12px; left: 0; padding: 3px 11px 3px 8px;
  font: 700 8.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #fff;
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.bcard-tag.is-aggressive { background: linear-gradient(90deg, #b8322a, #d9543a); }
.bcard-tag.is-defensive  { background: linear-gradient(90deg, #a8742a, #d0983a); }
.bcard-tag.is-passive    { background: linear-gradient(90deg, #3a7a44, #5a9a52); }

/* The NAMEPLATE: a gilt banner across the bottom of the art. */
.bcard-nameplate { position: absolute; z-index: 3; left: 12%; right: 12%; bottom: 6px; padding: 4px 14px 5px; text-align: center;
  background: linear-gradient(to bottom, #3a2c1a, #1c140c);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  box-shadow: inset 0 0 0 1px var(--gold2); }
.bcard-nameplate::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--gold1), var(--gold3));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%,
    1.5px 50%, 9px calc(100% - 1.5px), calc(100% - 9px) calc(100% - 1.5px), calc(100% - 1.5px) 50%, calc(100% - 9px) 1.5px, 9px 1.5px, 1.5px 50%); }
.bcard-name.rpg-bestiary-detail-name { margin: 0; font: 800 17px/1.1 var(--font-display); letter-spacing: .02em; color: var(--gold1);
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcard-hint { margin: auto 0; text-align: center; }

/* ---- stats ----------------------------------------------------------------------------------- */
.bcard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.bcard-stat { --t: #888; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 3px; border-radius: 6px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--t) 38%, #16101c), color-mix(in srgb, var(--t) 18%, #0e0a14));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 55%, var(--gold3)), inset 0 1px 0 rgba(255,255,255,.08); }
.bcard-stat.is-hp { --t: #c8404a; } .bcard-stat.is-atk { --t: #9a6a34; } .bcard-stat.is-hit { --t: #2e8a5e; } .bcard-stat.is-flee { --t: #3a5ab0; }
.bcard-stat-ic { display: grid; color: color-mix(in srgb, var(--t) 45%, #ffffff); filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.bcard-stat.is-hp .bcard-stat-ic { color: #ff8e96; }
.bcard-stat-txt { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.bcard-stat-txt b { font: 800 16px/1 var(--font-display); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.bcard-stat-txt small { margin-top: 1px; font: 700 7.5px/1 var(--font-mono); letter-spacing: .12em; color: rgba(255,255,255,.72); }

/* ---- type bar ------------------------------------------------------------------------------ */
.bcard-type.rpg-bestiary-tags { display: flex; align-items: center; gap: 6px; margin: 0; padding: 3px 0 3px 3px; border-radius: 6px;
  background: linear-gradient(90deg, #2a2a3e, #1a1826); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold2) 55%, transparent); }
.bcard-type-badge { flex: none; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 38% 30%, var(--el), var(--el-deep)); box-shadow: 0 0 0 1px var(--gold2); }
.bcard-type .rpg-bestiary-tag { padding: 0; border: 0; background: none; border-radius: 0; }
.bcard-elem-name { flex: 1; font: 700 11.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--el); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.bcard.is-unknown .bcard-elem-name { color: rgba(239,220,187,.5); }
.bcard-info .rpg-bestiary-tag.is-xp { padding: 0; border: 0; background: none; border-radius: 0; font: 700 12.5px/1.3 var(--font-display); color: var(--gold1); }
.bcard-type .rpg-bestiary-tag.is-element { display: flex; align-items: center; gap: 4px; align-self: stretch; margin: -3px 0;
  padding: 0 9px 0 14px; border-radius: 0 6px 6px 0; font: 700 10.5px/1 var(--font-display); color: #ffd8a8;
  background: linear-gradient(90deg, #4a1c1c, #2a1014); clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.bcard-weak-ic { display: grid; color: #ff9a5a; }
.bcard-weak-ic[data-element="water"] { color: #7ac8ff; } .bcard-weak-ic[data-element="earth"] { color: #e8b868; }
.bcard-weak-ic[data-element="wind"] { color: #7fd6a4; } .bcard-weak-ic[data-element="neutral"] { color: #c8b0f0; }

/* ---- info panels: the habitat shows faintly through ------------------------------------------ */
.bcard-info { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 7px 9px; border-radius: 7px; overflow: hidden;
  background: linear-gradient(to bottom, rgba(18,14,26,.9) 0%, rgba(18,14,26,.8) 55%, rgba(18,14,26,.55) 100%), var(--scene, none) center 75% / cover no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold2) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.05); }
.bcard-row { display: grid; grid-template-columns: 58px 1fr; gap: 6px; align-items: baseline; }
.bcard-row + .bcard-row { padding-top: 5px; border-top: 1px solid rgba(247,227,163,.12); }
.bcard-row-k { font: 700 8.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold2); }
.bcard-row-v { margin: 0; font: 12.5px/1.3 var(--font-body); color: #e6dcc8; }
.bcard-row-v .rpg-zone-link { font-size: 12.5px; }

/* ---- drops --------------------------------------------------------------------------------- */
.bcard-drops.rpg-bestiary-drops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.bcard-drop.rpg-bestiary-drop { --r: rgba(255,255,255,.14); --rt: #2a2436; position: relative; height: 42px;
  display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; border-radius: 7px; cursor: default;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--rt) 70%, #16101c), #110c18);
  box-shadow: inset 0 0 0 1px var(--r), inset 0 1px 0 rgba(255,255,255,.06); }
.bcard-drop .rpg-bestiary-drop-art { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 0; background: none !important;
  font: 700 15px var(--font-display); color: rgba(239,220,187,.45); }
.bcard-drop .rpg-bestiary-drop-art img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.15); filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.bcard-drop .rpg-bestiary-drop-odds { margin: 0; padding: 0; font: 800 11px/1 var(--font-display); color: #fff; }
.bcard-drop[data-rarity="common"]   { --r: rgba(220,210,190,.35); --rt: #3a3440; }
.bcard-drop[data-rarity="uncommon"] { --r: rgba(120,220,140,.55); --rt: #1e4a2c; }
.bcard-drop[data-rarity="rare"]     { --r: rgba(110,170,255,.6);  --rt: #1c2e5a; }
.bcard-drop[data-rarity="epic"]     { --r: rgba(196,140,255,.7);  --rt: #3a1e5a; }
.bcard-drop[data-rarity="legendary"] { --r: rgba(255,190,90,.75); --rt: #5a3a12; }
.bcard-drop[data-rarity="epic"], .bcard-drop[data-rarity="legendary"] { box-shadow: inset 0 0 0 1px var(--r), 0 0 10px color-mix(in srgb, var(--r) 60%, transparent); }
.bcard-drop.is-masked .rpg-bestiary-drop-art { color: rgba(239,220,187,.5); background: none; border: 0; }
.bcard-drop.is-masked { box-shadow: inset 0 0 0 1px rgba(239,220,187,.22); }
.bcard-drop.is-empty { background: none; box-shadow: inset 0 0 0 1px rgba(239,220,187,.14); border: 1px dashed rgba(239,220,187,.16); }

/* ---- footer -------------------------------------------------------------------------------- */
.bcard-foot { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 6px; padding: 3px 24px 2px;
  font: 700 8.5px/1 var(--font-mono); letter-spacing: .14em; color: #b9a98a; text-transform: uppercase; }
.bcard-foot > .bcard-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold3), transparent); position: relative; }
.bcard-foot > .bcard-rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  translate: -50% -50%; rotate: 45deg; background: var(--gold2); }
.bcard-slain { display: inline-flex; align-items: center; gap: 3px; color: var(--gold1); }
.bcard-slain .rpg-bestiary-slain { font-size: 11px; color: var(--gold1); }