/* bestiary.php - the in-game Bestiary window rebuilt for the site: group list, group details, total bonus. */
.bx { --bx-wood: #1d1b15; --bx-wood-2: #25221a; --bx-well: #100f0b; --bx-edge: #4d4433; --bx-edge-hi: #8a7444; --bx-gold: var(--p-gold, #d9ad57); --bx-gold-hi: var(--p-gold-hi, #f7dd9b);
  --bx-text: var(--p-text, #e9e3d2); --bx-muted: var(--p-muted, #a59f8e);
  max-width: 1240px; margin: 0 auto; padding: 28px var(--p-gr, 16px) 56px var(--p-gl, 16px); display: flex; flex-direction: column; gap: 22px; color: var(--bx-text); font-family: var(--p-body, "Noto Sans", sans-serif); }
.bx h2, .bx h3, .bx h4 { margin: 0; text-wrap: balance; }
.bx-lead { margin: 0; max-width: 75ch; font-size: 16.5px; line-height: 1.65; }
.bx button:focus-visible { outline: 2px solid var(--bx-gold-hi); outline-offset: 2px; }

/* ---------- window ---------- */
.bx-stage { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.bx-window, .bx-total { position: relative; background: linear-gradient(var(--bx-wood-2), var(--bx-wood)); border: 1px solid var(--bx-edge); box-shadow: 0 0 0 1px #000, 0 18px 40px rgba(0,0,0,.5); }
.bx-window::before, .bx-window::after, .bx-total::before, .bx-total::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--bx-edge-hi); pointer-events: none; }
.bx-window::before, .bx-total::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.bx-window::after, .bx-total::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }
.bx-window__title { padding: 10px 14px; text-align: center; border-bottom: 1px solid var(--bx-edge); background: linear-gradient(#2b261b, #1a170f); }
.bx-window__title h2, .bx-total h2 { font: 600 15px/1 var(--p-body, sans-serif); letter-spacing: .14em; color: var(--bx-gold-hi); }
.bx-window__body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; padding: 14px; }

/* group list */
.bx-groups, .bx-details { background: var(--bx-well); border: 1px solid var(--bx-edge); padding: 12px; min-width: 0; }
.bx-groups h3, .bx-detail__label { font: 600 13px/1 var(--p-body, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--bx-gold); margin-bottom: 10px; }
.bx-groups ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.bx-group { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 10px; background: #19170f; border: 1px solid #2f2a1f; color: var(--bx-text); font: 14.5px/1.2 var(--p-body, sans-serif); text-align: left; cursor: pointer; }
.bx-group:hover { border-color: var(--bx-edge-hi); }
.bx-group.is-on { border-color: var(--bx-gold); background: linear-gradient(#2c2412, #1b160c); box-shadow: inset 0 0 0 1px rgba(217,173,87,.25); }
.bx-group__bonus { font-size: 12.5px; color: var(--bx-muted); white-space: nowrap; }

/* group details */
.bx-detail { display: flex; flex-direction: column; gap: 12px; }
.bx.is-js .bx-detail:not(.is-on) { display: none; }
.bx:not(.is-js) .bx-detail + .bx-detail { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--bx-edge); }
.bx-detail h4 { font: 700 26px/1.05 var(--p-display, sans-serif); letter-spacing: .03em; color: var(--bx-gold-hi); }
.bx-detail__bonus { margin: -6px 0 0; font-size: 14.5px; color: var(--bx-muted); }
.bx-tiers { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.bx-tiers li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 8px 12px; background: #19170f; border-left: 3px solid #5a4b2c; font-size: 14.5px; }
.bx-tiers li:last-child { border-left-color: var(--bx-gold); }
.bx-tiers__head, .bx-tiers__gain { display: flex; flex-direction: column; gap: 2px; }
.bx-tiers__head { color: var(--bx-gold); font-weight: 600; }
.bx-tiers small { font-size: 13px; font-weight: 400; color: var(--bx-muted); }
.bx-species { margin: 0; font-size: 14.5px; line-height: 1.5; }
.bx-species span { color: var(--bx-muted); }

/* ---------- total bonus ---------- */
.bx-total { padding: 14px 16px 16px; }
.bx-total h2 { text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--bx-edge); }
.bx-total h3 { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bx-edge); font: 600 13px/1 var(--p-body, sans-serif); letter-spacing: .1em; color: var(--bx-gold); }
.bx-total__hint { margin: 10px 0 0; font-size: 13px; color: var(--bx-muted); }
.bx-total dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.bx-total dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; font-size: 14px; }
.bx-total dd { margin: 0; text-align: right; color: var(--bx-gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1000px) { .bx-stage { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .bx-window__body { grid-template-columns: minmax(0, 1fr); }
  .bx-groups ol { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .bx-groups li { flex: 0 0 190px; scroll-snap-align: start; }
  .bx-group { flex-direction: column; gap: 4px; }
}
@media (max-width: 480px) { .bx-tiers li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }