img[alt="small"] {
    width: 800px;
}

img[alt="tiny"] {
    width: 200px;
}

img[alt="300"] {
    width: 300px;
}

img[alt="400"] {
    width: 400px;
}

ul {
    margin-bottom: 0px;
    padding-inline-start: 1.25rem;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.toggle-close {
    width: 1rem;
}

.hamburger {
    width: 1.5rem;
    cursor: pointer;
}

#nav-header {
    padding-bottom: 10px;
    background-color: var(--pico-background-color);
}

#sidebar {
    background-color: var(--pico-background-color);
    max-height: calc(-31.5px + 100vh);
    overflow-y: auto;
}

#sidebar.active {
    position: fixed;
}

#sidebar:not(.active) {
    display: none;
}

#sidebar ul li {
    color: rgba(230, 230, 230, 0.9);
    list-style: none;
    padding: 0.25rem;
}

#sidebar .toc-book {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pico-muted-border-color);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pico-muted-color);
    font-weight: 600;
}

.content {
    padding: 1.5rem;
}

#nav-header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-content: center;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

#search-container {
    flex-grow: 1;
    margin-left: 16px;
}

#search {
    height: 20px;
    margin-bottom: 5px;
    background: url("/assets/images/search.png") no-repeat left;
    background-position-x: 5px;
    background-size: 20px;
    padding-left: 25px;
}

#nav-header.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}

#nav-header.headroom--pinned {
    transform: translateY(0%);
}

#nav-header.headroom--unpinned {
    transform: translateY(-100%);
}

header#nav-header.headroom--frozen {
    transform: translateY(0%);
}

main {
    margin-top: 59.5px;
}

html,
body {
    scroll-padding-top: 65px;
}

.search-icon {
    position: absolute;
    top: 21px;
    left: 44px;
}

.home {
    margin-left: 10px;
}

.badge {
    background-color: rgb(13, 202, 240);
    color: black;
    padding: 1px 5px;
    text-align: center;
    border-radius: 5px;
    margin-left: 5px;
}

#search-results li {
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

#search-results li.active {
    background-color: rgba(13, 202, 240, 0.18);
}

.table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

/* Compact, readable reference tables */
main table {
    font-size: 0.9rem;
    margin-bottom: 0;
}

main th,
main td {
    padding: 0.35rem 0.55rem;
    vertical-align: top;
}

/* Dense, many-column tables (e.g. Mortal Wounds, spell lists): shrink the type,
   give text columns a sane width so they wrap into readable paragraphs, and pin
   the first column (the row key) while scrolling sideways. */
.table-wrapper.wide table {
    font-size: 0.8rem;
    line-height: 1.3;
}

.table-wrapper.wide td,
.table-wrapper.wide th {
    min-width: 8.5rem;
}

.table-wrapper.wide th:first-child,
.table-wrapper.wide td:first-child {
    position: sticky;
    left: 0;
    min-width: 5.5rem;
    background-color: var(--pico-background-color);
    box-shadow: 1px 0 0 var(--pico-muted-border-color);
}

/* Obsidian-style callouts (transformed from "> [!type] title" blockquotes by
   assets/js/search.js). The marker paragraph becomes a .callout-title header
   bar; the type picks the accent colour + icon. Colours are RGB triples so the
   same value drives the border, tinted body, and title bar. Rules use
   blockquote.callout to win over Pico's default blockquote styling. */
/* Defaults live on the bare .callout class (specificity 0,1,0) so the per-type
   .callout-<type> rules below can override the colour/icon; the box geometry
   below uses blockquote.callout to beat Pico's blockquote styling. */
.callout {
    --callout-color: 120, 120, 120;
    --callout-icon: "\1F4CB";
}
blockquote.callout {
    border: 1px solid rgba(var(--callout-color), 0.45);
    border-left: 4px solid rgb(var(--callout-color));
    border-radius: 8px;
    background-color: rgba(var(--callout-color), 0.1);
    padding: 0 1rem 0.85rem;
    margin: 1.25rem 0;
    font-style: normal;
    overflow: hidden;
}
blockquote.callout > :last-child {
    margin-bottom: 0;
}
.callout-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: rgb(var(--callout-color));
    /* bleed to the box edges so it reads as a header bar */
    margin: 0 -1rem 0.85rem;
    padding: 0.5rem 1rem;
    background-color: rgba(var(--callout-color), 0.18);
}
.callout-title::before {
    content: var(--callout-icon);
    font-size: 1.05em;
    line-height: 1;
}
/* Damage-type icons. The book uses a custom symbol font (ACKS2e-Damage-Icons)
   for the 13 damage types, drawn in black (mundane) or red (extraordinary).
   marker dropped every icon during OCR, so they're re-inserted as
   <span class="dmg-TYPE"> (add "dmg-x" for the extraordinary/red variant),
   rendered from the same font extracted from the PDF. */
@font-face {
    font-family: "ACKSDmg";
    src: url("/assets/fonts/acks-damage.woff2") format("woff2"),
         url("/assets/fonts/acks-damage.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
[class^="dmg-"],
[class*=" dmg-"] {
    font-family: "ACKSDmg";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* extraordinary variant: same glyph, book's red */
.dmg-x { color: #c1272d; }
/* hidden label inside each icon: readable by screen readers and browser
   find-in-page (Ctrl-F "fire"), but visually collapsed so only the glyph shows */
.dmg .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* type -> glyph codepoint. Canonical map lives in tools/damage-icons/dmglib.py;
   regenerate these rules with: python tools/damage-icons/dmglib.py */
.dmg-acidic::before      { content: "\e900"; }
.dmg-arcane::before      { content: "\e901"; }
.dmg-bludgeoning::before { content: "\e902"; }
.dmg-necrotic::before    { content: "\e903"; }
.dmg-cold::before        { content: "\e904"; }
.dmg-electrical::before  { content: "\e905"; }
.dmg-fire::before        { content: "\e906"; }
.dmg-luminous::before    { content: "\e907"; }
.dmg-slashing::before    { content: "\e908"; }
.dmg-piercing::before    { content: "\e90b"; }
.dmg-poisonous::before   { content: "\e90c"; }
.dmg-seismic::before     { content: "\e90d"; }
.dmg-varies::before      { content: "\e910"; }

.callout-example { --callout-color: 138, 111, 209; --callout-icon: "\1F9EA"; }
.callout-tip     { --callout-color: 32, 178, 170;  --callout-icon: "\1F4A1"; }
.callout-note    { --callout-color: 74, 144, 226;  --callout-icon: "\1F4DD"; }
.callout-warning { --callout-color: 224, 158, 45;  --callout-icon: "\26A0\FE0F"; }