/* npcs.css: NPC, boss, town NPC, biome and event pages (lane PAGES-NPCS).
   Tokens and sprites only from theme.css (docs/LOOK.md). */

/* game mode switch: chips in a row, the selected one drawn like a pressed chip */
.modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); }
.modes [role="tablist"] { display: flex; flex-wrap: wrap; gap: 6px; }
.modes [role="tab"][aria-selected="true"] {
  background: var(--c-panel-hover-bg);
  border-image: var(--s-panel-hover) 12 fill / 12px stretch;
}
.modes [data-mode="expert"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--c-mode-expert); }
.modes [data-mode="master"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--c-mode-master); }
.modes .copy-link { margin-left: auto; min-height: 36px; font-size: var(--fs-s); }
.mode-panel[hidden], .mode-h[hidden] { display: none; }
.mode-h { margin-top: var(--sp-3); }

/* stats table: the Bestiary's own stat icons (left 30 px of each stat panel sprite) */
table.stats th[scope="row"] { white-space: nowrap; }
.st { display: inline-flex; align-items: center; gap: 6px; }
.st::before {
  content: ""; flex: 0 0 auto; width: 30px; height: 31px;
  background: var(--s-stat-hp) 0 0 / 96px 31px no-repeat;
}
.st-attack::before { background-image: var(--s-stat-attack); }
.st-defense::before { background-image: var(--s-stat-defense); }
.st-knockback::before { background-image: var(--s-stat-knockback); }
.st-coin::before { display: none; }
table.stats th.m-expert { box-shadow: inset 0 -3px 0 var(--c-mode-expert); }
table.stats th.m-master { box-shadow: inset 0 -3px 0 var(--c-mode-master); }

/* coins: number then coin, like the game's price line */
.coins { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; justify-content: flex-end; }
.coin { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.coin img { order: 2; width: 16px; height: 16px; }
.coins.none { color: var(--fg-soft); }

/* Bestiary card */
.flavor { font-style: italic; }
ul.quick, ul.facts { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
ul.quick li, ul.facts li { margin: 0 0 var(--sp-2); }
ul.facts li { padding-left: 14px; position: relative; }
ul.facts li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; background: var(--c-accent); }
.bag-link { margin: var(--sp-2) 0; }

/* spawn grids on biome and event pages */
.npc-grid { margin: 0 0 var(--sp-4); }
.card h3 .n { color: var(--fg-soft); font-weight: 400; font-size: var(--fs-s); }

/* wide tables scroll in their own box (phone first) */
table.data td.num, table.data th.num { text-align: right; }
table.data .coins { justify-content: flex-end; }
table.drops-m td:last-child, table.shop td:last-child { min-width: 12rem; }
details.hm { margin: var(--sp-3) 0; }

/* the NPC list: facets above a sortable table */
.page-list .filters fieldset.facet { border: 0; padding: 0; margin: 0 0 var(--sp-2); }
table.npc-table td:first-child { min-width: 12rem; }

@media (max-width: 719px) {
  .modes .copy-link { margin-left: 0; }
  table.stats th, table.stats td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .st::before { width: 26px; background-size: 83px 27px; height: 27px; }
}

/* phone: long tables stack into one card per row; each value shows its column name */
@media (max-width: 719px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack tr { border-bottom: 2px solid var(--c-line); padding: var(--sp-2) 0; }
  table.stack td { border: 0; padding: 2px var(--sp-2); text-align: left; }
  table.stack td.num { text-align: left; }
  table.stack td:empty { display: none; }
  table.stack td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--fg-soft); }
  table.stack .coins { justify-content: flex-start; }
  table.drops-m td:last-child, table.shop td:last-child { min-width: 0; }
  table.stats { font-size: var(--fs-s); }
  table.stats th[scope="row"] { white-space: normal; }
}

/* phone: the three mode columns fit beside the stat names */
@media (max-width: 719px) {
  table.stats th, table.stats td { padding: var(--sp-2) 4px; }
  table.stats th[scope="row"] .st { gap: 2px; }
  .st::before { width: 22px; height: 27px; background-size: 83px 27px; }
  table.stats .kbw { display: block; }
  table.stats .coins { flex-direction: column; align-items: flex-end; }
}

/* a form of a grouped NPC: its own sprite and label (stats variants, "Only from" in drops) */
.variant { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 6px; }
.variant img { width: 24px; height: 24px; object-fit: contain; }

/* phone: four mode columns beside the stat names do not fit at 390 px, so each stat name gets its own
   line and the mode values sit in a grid under it (same readable size as the rest of the card) */
table.stats .seed { font-weight: 400; }
@media (max-width: 719px) {
  table.stats.m4 thead tr, table.stats.m4 tbody tr { display: grid; grid-template-columns: repeat(4, 1fr); }
  table.stats.m4 thead th:first-child { display: none; }
  table.stats.m4 tbody th[scope="row"] { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; }
  table.stats.m4 th, table.stats.m4 td { padding-left: 4px; padding-right: 4px; }
  table.stats .seed { display: block; font-size: var(--fs-s); }
}