/*
 * base.css — the wiki's structural stylesheet, written fresh for the ASP.NET rewrite.
 * Load order: base.css → sprite-system.css → theme.css. This file owns skeleton and
 * component layout; theme.css (the design system) recolors and refines on top of it,
 * winning ties by load order. Values here are the site's measured layout facts.
 */

/* ---- reset -------------------------------------------------------------------------- */

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, code, em, img, small, strong, sub, sup, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, details, figure, figcaption, footer, header,
menu, nav, output, section, summary, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    scroll-behavior: smooth;
}
article, aside, details, figcaption, figure,
footer, header, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* The wiki is an app-like read-only surface; text selection is disabled site-wide. */
* { user-select: none; -webkit-user-select: none; }

::-webkit-scrollbar { width: 5px; }

/* ---- typography --------------------------------------------------------------------- */

body {
    font-family: "Nope 8", sans-serif;
    background-color: #000;
    color: #fff;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    overflow-y: auto;
    width: 100vw;
}

p { font-size: 1.5rem; }

h1 { font-size: 3rem;   margin: 0; text-align: center; color: #f6fbff; font-weight: normal; padding-bottom: 1rem; }
h2 { font-size: 2.5rem; margin: 0; text-align: left;   color: #dce6ee; font-weight: normal; padding: 15px 0 10px; }
h3 { font-size: 2rem;   text-align: left; color: #bdcbd8; font-weight: normal; padding: 15px 0 10px; }
h4 { font-size: 1.5rem; text-align: left; color: #9aa9b6; font-weight: normal; padding: 15px 0 10px; }

/* No :visited color. The redesign colors links per-context (theme.css), and a
   visited rule here would outrank every one of those class rules — that is what
   made individual already-clicked links render pale while their neighbours stayed
   blue. Visited links simply keep their normal color. */
a, .linky {
    color: #a4c2dd;
    text-decoration: underline;
    cursor: pointer;
}

code {
    background-color: #fff;
    color: #000;
    padding: 0 5px !important;
    font-size: 1rem;
    box-shadow: none;
}

ul li::marker { color: #4c5c8d; }
li.green::marker { color: #78e08f; }

/* ---- text utilities ----------------------------------------------------------------- */

.center-text { text-align: center; }
/* Centers a block element (e.g. an <img>) — text-align won't do it on its own. */
.center { display: block; margin-left: auto; margin-right: auto; }
.body-text { margin: 0.5em 0 1em; }
.f-width { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; }
.fit-container { max-width: 100%; max-height: 100%; }
.align-items-left { align-items: left !important; }
.no-cursor { cursor: unset; }
.external-link { cursor: pointer; }

.highlight, .text-highlight { color: #a4c2dd; }
.text-green { color: #78e08f; }
.text-gold { color: #dbc325; }
.text-score { color: #e8e881; }
.status-text { color: #ccc; }

/* Tier label colors */
.special { color: #8adb5c; }
.unique { color: #1e90ff; }
.relic { color: #9a3fd5; }
.pink-affix { color: #EC3789; }

/* Affix rarity text colors */
.pink_affix_text { color: #ec3789; }
.event_affix_text { color: #a4ddce; }
.blue_affix_text { color: #48a7c9; }
.green_affix_text { color: #57c970; }
.orange_affix_text { color: #bf5e1c; }
.red_affix_text { color: #be4f47; }
.unique_affix_text { color: #775346; }

.custom-list { list-style-type: square; margin: 20px 40px !important; align-self: baseline; }
.list-item { margin-bottom: 10px; color: #fffefe; font-size: 1.5rem; }

.pixel-hr, .pixel-hr-2 {
    width: 100%;
    background: #6b8cb0;
    border: none;
    image-rendering: pixelated;
}
.pixel-hr { height: 4px; margin: 3rem 0; }
.pixel-hr-2 { height: 2px; margin: 1.5rem 0; }

.disabled-link {
    pointer-events: none;
    color: gray !important;
    cursor: default;
    text-decoration: none;
}

.full-width {
    width: min(100%, 540px);
    opacity: 100%;
    height: auto;
    max-height: 10000px;
    overflow: hidden;
}

.hover-scroll { width: auto; overflow: clip; }

/* ---- app skeleton ------------------------------------------------------------------- */

.application-wrapper {
    display: flex;
    flex-direction: row;
    width: 100vw;
    min-height: 90vh;
    overflow: hidden scroll;
}

.menu-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-basis: 0;
    height: 100vh;
    width: 231px;
    overflow: hidden scroll;
    gap: 0;
    background: black;
    margin-left: 25px;
    z-index: 1001;
    will-change: transform;
    transition-property: transform, width, visibility;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.page-wrapper {
    flex-grow: 1;
    position: relative;
    justify-content: center;
    align-items: center;
    width: calc(100% - 256px);
    padding: 0 0 0 256px;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    width: 100%;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8em 0 2em;
}
.footer-logo { max-width: 120px; height: auto; }

/* ---- sidebar / nav ------------------------------------------------------------------ */

.category-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
    max-width: fit-content;
    column-gap: 5px;
    cursor: pointer;
}
.menu-container .category-container { margin-bottom: 5px; }
.menu-container .category-container.subcategory-container { margin-bottom: 0; cursor: unset; }

.category-container.vertical-icon {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
    cursor: pointer;
}
.category-container.vertical-icon .menu-header { text-align: center; margin: 0; }

.menu-header {
    font-size: 1.5rem;
    cursor: pointer;
    flex: min-content;
    margin-top: 5px;
    text-align: left;
}
.menu-header.nav { font-size: 2rem; color: #a4c2dd; }
.menu-header.subcategory { cursor: unset; padding: 10px; color: #9fa9b3; }

.link-header {
    margin-top: 5px;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    flex: min-content;
}

.main-menu-collapsible { margin-bottom: 75px; }
.main-menu-collapsible summary { cursor: pointer; }
.menu-right-pad { padding-right: 15px; }

details.content-collapsible > summary { cursor: pointer; list-style: none; }
details.content-collapsible > summary::-webkit-details-marker { display: none; }
details.content-collapsible > summary > h2::before {
    content: "\25B8"; opacity: 0.7; font-size: 0.8em; line-height: 1;
}
details.content-collapsible[open] > summary > h2::before { content: "\25BE"; }

.anchor-link-container { margin-top: 15px; }
.anchor-link-container.has-anchors {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 25px;
    margin-bottom: 8px;
}

/* ---- search ------------------------------------------------------------------------- */

.search-container { position: relative; margin: 10px 15px; z-index: 100; }

.search-input, .filter-select {
    padding: 12px 16px;
    background: #000;
    border: 2px solid #808570;
    color: #808570;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input { flex: 1; min-width: 200px; }
.search-input::placeholder { color: #808570; }
.filter-select { min-width: 150px; }
.filter-select option { background: #000; color: #808570; }

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a1a;
    border: 2px solid #444;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: background 0.15s ease;
}
.search-result-item:hover { background: #333; }
.search-result-item:last-child { border-bottom: none; }
.search-result-content { display: flex; align-items: center; gap: 12px; }
.search-result-icon { flex-shrink: 0; }
.search-result-text { flex: 1; min-width: 0; }
.search-result-title { color: #fff; font-weight: 500; margin-bottom: 4px; }
.search-result-type { color: #888; font-size: 12px; text-transform: capitalize; }

/* ---- content column ----------------------------------------------------------------- */

.tooltip-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    padding: 10px;
    margin-top: 20px;
    color: #fff;
    width: min-content;
    transition: transform 0.3s, opacity 0.3s;
}
.tooltip-container.areas { width: 80%; }

/* Enemy detail pages need a wider stable layout even when attacks are collapsed. */
.tooltip-container.areas.enemy-page { width: min(96%, 1220px); max-width: 1220px; }

/* ---- icon sizing -------------------------------------------------------------------- */

.slot-icon { width: 32px; height: 32px; margin: 5px; flex-shrink: 0; cursor: pointer; }
.slot-icon-48 { width: 48px; height: 48px; margin: 5px; flex-shrink: 0; }
.crafting-icon { width: 32px; height: 32px; margin: 5px; flex-shrink: 0; }

/* Inline stat icons centered against their text (enemy stats lines etc.). */
.body-text .sprite-icon-32 {
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block;
}

/* ---- headings with icons ------------------------------------------------------------ */

.heading-with-icon,
.h1-with-icon, .h2-with-icon, .h3-with-icon,
.h4-with-icon, .h5-with-icon, .h6-with-icon {
    text-align: left;
    margin: 0;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.h1-with-icon { font-size: 3rem; padding: 20px 0 15px; gap: 0.75rem; }
.h2-with-icon { font-size: 2.5rem; padding: 15px 0 10px; }
.heading-icon { display: inline-block; }
.h1-with-icon .h1-icon, .h1-with-icon .heading-icon { width: 48px; height: 48px; display: inline-block; }
.h2-with-icon .h2-icon, .h2-with-icon .heading-icon { width: 40px; height: 40px; display: inline-block; }
.h3-with-icon .h3-icon, .h3-with-icon .heading-icon { width: 36px; height: 36px; display: inline-block; }
.h4-with-icon .h4-icon, .h4-with-icon .heading-icon,
.h5-with-icon .h5-icon, .h5-with-icon .heading-icon,
.h6-with-icon .h6-icon, .h6-with-icon .heading-icon { width: 32px; height: 32px; display: inline-block; }

/* Pages that opt out of inline heading icons (the sidebar list still shows them). */
.no-icon .heading-icon,
.no-icon .h1-icon, .no-icon .h2-icon, .no-icon .h3-icon,
.no-icon .h4-icon, .no-icon .h5-icon, .no-icon .h6-icon { display: none !important; }

/* ---- tile grids --------------------------------------------------------------------- */

.contentGrid {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 40vw), auto));
    justify-items: center;
    gap: 20px 10px;
}
.contentGrid-tall {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 40vw), auto));
    justify-items: center;
    gap: 20px 10px;
    padding: 20px 0 40px;
}
.gridItem { width: 200px; height: auto; display: grid; grid-auto-rows: 40px; }

.download-links { display: flex; justify-content: center; gap: 20px; margin: 20px 0; }

.menu-platform-oriented {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
    justify-content: center;
}
.menu-platform-oriented .category-container { margin-bottom: 0 !important; }
@media (max-width: 768px) {
    .menu-platform-oriented { flex-direction: column !important; align-items: center; gap: 10px; }
    .menu-platform-oriented .category-container { width: 100%; max-width: 200px; }
}

/* ---- item listing grids ------------------------------------------------------------- */

.contentReplace {
    border: 1px #6d6d6d solid;
    display: grid;
    padding: 10px;
    width: calc(100% - 25px);
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
    height: auto;
    justify-items: left;
    margin: 10px 0;
    gap: 0 10px;
    border-radius: 0 10px 0 10px;
}
.contentReplace .category-container {
    border-left: 5px solid rgba(164, 194, 221, 0.3) !important;
    width: 100%;
    margin: 5px;
    padding: 10px;
    background: rgba(164, 194, 221, 0.05) !important;
}

/* Equipment tier section borders */
.item-section-content.item-section-tiered  { border-color: #a4c2dd; }
.item-section-content.item-section-special { border-color: #8adb5c; }
.item-section-content.item-section-unique  { border-color: #1e90ff; }
.item-section-content.item-section-relic   { border-color: #9a3fd5; }
.item-section-content.item-section-event   { border-color: #68b1b8; }
.item-section-content.item-section-trinket { border-color: #c2a1c2; }
.item-section-content.item-section-generic { border-color: #6d6d6d; }

/* Skins page: acquisition-type accents on listing cells */
.contentReplace .category-container[data-skin-type="shop"]        { border-left-color: #4CAF50 !important; background-color: rgba(76, 175, 80, 0.1) !important; }
.contentReplace .category-container[data-skin-type="premiumshop"] { border-left-color: #FFD700 !important; background-color: rgba(255, 215, 0, 0.1) !important; }
.contentReplace .category-container[data-skin-type="f2p"]         { border-left-color: #FF4500 !important; background-color: rgba(255, 69, 0, 0.1) !important; }
.contentReplace .category-container[data-skin-type="event"]       { border-left-color: #9C27B0 !important; background-color: rgba(156, 39, 176, 0.1) !important; }
.contentReplace .category-container[data-skin-type="pack"]        { border-left-color: #2196F3 !important; background-color: rgba(33, 150, 243, 0.1) !important; }
.contentReplace .category-container[data-skin-type="unreleased"]  { border-left-color: #BE4F47 !important; background-color: rgba(190, 79, 71, 0.1) !important; }

/* ---- wiki two-column figure grid ---------------------------------------------------- */

.wiki-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: auto;
    gap: 20px;
    align-items: center;
    align-self: start;
}
.wiki-item { display: contents; }
.wiki-image { grid-column: 1; max-width: 150px; height: auto; }
.wiki-text { grid-column: 2; display: flex; align-items: center; padding: 10px; color: lightgray; }
.wiki-text p { margin: 0; }

.grid8 {
    display: grid;
    grid-template-columns: repeat(2, minmax(min-content, max-content));
    align-items: center;
    column-gap: 1rem;
    padding: 1rem 0;
}
@media (max-width: 600px) {
    .grid8 { grid-template-columns: 1fr; text-align: left; }
    .grid8 > *:nth-child(odd) { justify-self: left; align-self: baseline; }
}

/* ---- dungeon grid ------------------------------------------------------------------- */

.dungeonGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: start;
    gap: 1rem 1.5rem;
    padding: 10px 0 20px;
}
@media (max-width: 900px) { .dungeonGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .dungeonGrid { grid-template-columns: repeat(2, 1fr); } }

.dungeon-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    width: 100%;
    max-width: 120px;
    cursor: pointer;
}
.dungeon-entry .dungeon-icon { width: 48px; height: 48px; margin-bottom: 2px; }
.dungeon-entry .dungeon-name {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.2;
    min-height: 3.6rem;
}

/* ---- dictionary --------------------------------------------------------------------- */

.dictionary-grid { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
.dictionary-entry {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 3rem;
    align-items: start;
}
@media (max-width: 600px) { .dictionary-entry { grid-template-columns: 1fr; } }
.dictionary-term { text-align: right; white-space: nowrap; font-size: 1.25rem; padding-top: 0.2rem; }
.dictionary-def { font-size: 1.25rem; color: #ccc; line-height: 1.4; }

/* ---- display:contents tables (class / essence / generic) ---------------------------- */

.table-wrapper { overflow-x: auto; width: 100%; border-radius: 8px; background: rgba(0, 0, 0, 0.3); }

.class-table { display: grid; grid-template-columns: repeat(9, max-content); gap: 0.5rem; overflow-x: auto; padding: 1rem; }
.class-table.two-col { grid-template-columns: max-content max-content; }
.class-table.five-col { grid-template-columns: repeat(5, max-content); }
.class-table.three-col { grid-template-columns: max-content max-content 1fr; min-width: 600px; }
.class-header, .class-row { display: contents; }
.class-col { display: flex; flex-direction: column; }
.class-col.class-single { justify-content: center; }
.class-col-title h2 { font-size: 1.25rem; margin-bottom: 0.5rem; color: #ccc; }
.class-col-title:not(:first-child) h2 { text-align: center; }
.class-table-header { font-size: 1.25rem; color: #ccc; }
.class-container {
    background: rgb(6, 6, 6);
    border-radius: 5px;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 32px;
    height: 32px;
    transition: background 0.15s;
}
.class-container:hover { background: rgb(10, 10, 10); cursor: pointer; }
.class-name-2 { font-size: 1rem; color: #fff; }

/* Best-in-column stat pills on the class comparison (class names built as {stat}-gem) */
.hp-gem  { background: #d83e60 !important; }
.mp-gem  { background: #60a4c9 !important; }
.arm-gem { background: #ccbf9b !important; }
.spd-gem { background: #c76f32 !important; }
.vit-gem { background: #d36ebd !important; }
.att-gem { background: #9e86f4 !important; }
.wis-gem { background: #adc1db !important; }
.dex-gem { background: #22ad6e !important; }
.class-row > .class-col:first-child .class-container { justify-content: flex-start; }
.class-row > .class-col:not(:first-child) .class-container { justify-content: center; }
.class-table.two-col .class-row > .class-col:nth-child(2) .class-container { justify-content: flex-start; text-align: left; }
.class-table.five-col .class-row > .class-col .class-container { justify-content: flex-start; }
.class-table.three-col .class-container { height: auto; }
.class-table.three-col .class-name-2 { margin-left: 5px; }

/* Status-effects table columns wrap their text */
.class-table.three-col .description-container {
    justify-content: flex-start !important;
    text-align: left !important;
    height: auto !important;
    min-height: 32px;
}
.class-table.three-col .description-container .class-name-2 {
    text-align: left !important;
    white-space: normal;
    word-wrap: break-word;
}

.essence-table {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    overflow-x: auto;
    padding: 1rem;
    gap: 0.5em;
}
.essence-header, .essence-row { display: contents; }
.essence-col { display: flex; flex-direction: column; }
.essence-col.essence-single { justify-content: center; }
.essence-col-title h2 { font-size: 1.5rem; margin-bottom: 0.5rem; color: #ccc; }
.essence-table-header { font-size: 1.25rem; color: #ccc; }
.essence-container {
    background: rgb(12, 12, 12);
    border-radius: 5px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: background 0.15s;
}
.essence-container:hover { background: #1a1a1a; cursor: pointer; }
.essence-row > .essence-col:nth-child(2) .essence-container { background: #0e0e0f; }
.essence-row > .essence-col:nth-child(2) .essence-container:hover { background: #1b1b1c; }
.essence-row > .essence-col:nth-child(3) .essence-container { background: #101010; }
.essence-row > .essence-col:nth-child(3) .essence-container:hover { background: #1d1d1d; }
.essence-name { font-size: 1rem; color: #fff; }

.generic-table {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    overflow-x: auto;
    padding: 1rem;
    gap: 0.5em;
}
.generic-table.two-col { grid-template-columns: max-content max-content; }
.generic-table.three-col { grid-template-columns: max-content max-content max-content; }
.generic-header, .generic-row { display: contents; }
.generic-col { display: flex; flex-direction: column; gap: 0.75rem; }
.generic-col.generic-single { justify-content: center; }
.generic-col-title h2 { font-size: 1.5rem; margin-bottom: 0.5rem; color: #ccc; }
.generic-container {
    background: #0c0c0c;
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s ease;
}
.generic-container:hover { background: #1a1a1a; cursor: pointer; }
.generic-row > .generic-col:nth-child(2) .generic-container { background: #0e0e0f; }
.generic-row > .generic-col:nth-child(2) .generic-container:hover { background: #1b1b1c; }
.generic-row > .generic-col:nth-child(3) .generic-container { background: #101010; }
.generic-row > .generic-col:nth-child(3) .generic-container:hover { background: #1d1d1d; }
.generic-none { height: 32px; font-size: 1rem; color: #fff; }

/* ---- enemy pages -------------------------------------------------------------------- */

.attacks-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #444;
    min-width: 700px;   /* keeps columns usable; .table-wrapper provides the scroll */
}
.attacks-table th, .attacks-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #444;
    vertical-align: middle;
}
.attacks-table th { background: rgba(0, 0, 0, 0.5); color: #fff; border-bottom: 2px solid #666; }
.attacks-table tr:hover { background: rgba(255, 255, 255, 0.05); }
.projectile-info { display: flex; align-items: center; gap: 0.5rem; }

/* ---- enemies list ------------------------------------------------------------------- */

.enemies-controls { display: flex; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
.enemies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.enemy-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    align-items: center;
    transition: all 0.2s;
}
.enemy-card:hover { background: rgba(255, 255, 255, 0.05); border-color: #666; }
.enemy-info { flex: 1; }
.enemy-name { margin: 0 0 0.5rem; color: #fff; font-size: 1.2rem; }

/* ---- drops / bags ------------------------------------------------------------------- */

.bag-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.bag-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #444;
    transition: background-color 0.2s;
}
.bag-header:hover { background: rgba(255, 255, 255, 0.05); }
.bag-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bag-name {
    color: #00ff00;
    flex-grow: 1;
    min-width: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bag-content { display: none; padding: 15px; border-top: 1px solid #444; }
.bag-content.expanded { display: block; }
.bag-content .contentReplace { border: none; background: none; padding: 0; }
.item-count { color: #888; font-size: 0.9em; flex-shrink: 0; }
.expand-indicator { color: #888; font-size: 12px; transition: transform 0.3s ease; }

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px 0;
}
.item-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(164, 194, 221, 0.05);
    border-radius: 4px;
    transition: background-color 0.2s ease;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    justify-self: start;
    box-sizing: border-box;
    overflow: hidden;
}
.item-entry:hover { background: rgba(164, 194, 221, 0.1); }
.item-info { flex: 1; min-width: 0; overflow: hidden; }
.item-name {
    font-size: 0.9em;
    color: #a4c2dd;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drop-source filter tabs + grids (item pages) */
.drop-source-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; justify-content: center; }
.drop-source-filter-btn { cursor: pointer; opacity: 0.6; transition: opacity 0.2s ease; }
.drop-source-filter-btn:hover { opacity: 0.8; }
.drop-source-filter-btn.active { opacity: 1; }
.drop-source-grid { margin-top: 10px; }
.drop-source-enemy-name { font-size: 1rem; }
.no-drop-source { padding-bottom: 0; padding-top: 2rem; }
.drop-source-grid .category-container {
    max-width: 100% !important;
    width: fit-content !important;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    align-items: center;
}
.drop-source-grid .drop-source-content { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.drop-source-grid .menu-header { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.drop-source-grid .drop-source-enemy-name,
.drop-source-grid .drop-source-location-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---- item page extras --------------------------------------------------------------- */

.item-additional-sprites { margin: 4px 0 6px; }
.item-additional-sprites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}
.item-additional-sprite-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 1px solid #2f3c4f;
    background-color: rgba(12, 17, 25, 0.6);
    border-radius: 3px;
}
.item-additional-sprite-name { color: #d8e8ff; font-size: 16px; line-height: 1.2; min-width: 0; }
.item-additional-sprite-affixes { color: #a8b9d3; font-size: 14px; margin-top: 2px; }

/* ---- affix selector (item page dropdown, driven by item-affix.js) ------------------- */

.affix-title-container { display: flex; align-items: end; gap: 0.55rem; }
.affix-options-container {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 4px;
    top: 4px;
    border: 1px solid #3b404c00;
    border-radius: 5px;
    background-color: #000000d4;
    overflow: hidden;
    will-change: transform;
    transition-property: border;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.affix-options-grid {
    width: 100%;
    height: auto;
    display: grid;
    gap: 0 5px;
    padding: 5px 5px 0;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 20px;
    box-sizing: border-box;
}
.affix-option { margin-top: 2.5px; width: fit-content; transform: translateX(0); transition: 1s; }
.affix-header-option { width: auto; }
.border-fade-in { border: 1px solid #3b404c; width: auto; height: auto; }
.affix-selector { position: relative; right: 0; top: 0; }
.affix-selector .sprite-icon { width: 24px; height: 24px; }
.affix-div { white-space: nowrap; overflow: clip; width: 100px; }
.affix-div:hover { background-color: rgba(255, 255, 255, 0.1); }

/* ---- affix guide pages -------------------------------------------------------------- */

.affix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}
@media (min-width: 1200px) { .affix-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .affix-grid { grid-template-columns: repeat(4, 1fr); } }
/* With the sidebar expanded there is less room — step the columns down. */
@media (min-width: 1400px) and (max-width: 1800px) {
    .menu-container:not(.menu-hide) ~ * .affix-grid,
    .application-wrapper:not(.page-menu-hide) .affix-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1800px) {
    .menu-container:not(.menu-hide) ~ * .affix-grid,
    .application-wrapper:not(.page-menu-hide) .affix-grid { grid-template-columns: repeat(3, 1fr); }
}

.affix-table {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 0.5rem;
    padding: 0.25rem;
    overflow-x: auto;
}
.affix-row { display: contents; }
.affix-col { display: flex; flex-direction: column; }
.affix-container {
    background: #060606;
    border-radius: 5px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-height: 32px;
    transition: background 0.15s;
}
.affix-container:hover { background: #101010; cursor: pointer; }
.affix-container.affix-left-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.affix-header { display: flex; align-items: center; gap: 0.15rem; }
.affix-name { font-size: 1.25rem; color: white; max-width: 110px; }
.small-affix-name { font-size: 1rem; }
.affix-description { font-size: 1rem; color: #ccc; line-height: 1.4; text-align: left; }
.affix-header-label { font-size: 1.25rem; color: #ccc; }
.affix-text-block { display: flex; flex-direction: column; }
.affix-meta { display: flex; flex-direction: column; margin-left: 0.75rem; gap: 0.1rem; }
.affix-subtext { font-size: 1rem; color: #aaa; line-height: 1.2; }
.affix-key { color: #888; }
.affix-value { color: #fff; }
.affix-subicon {
    margin-top: 4px;
    display: flex;
    justify-content: start;
    align-items: center;
    column-gap: 5px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}
.affix-subicon:hover { background-color: rgba(255, 255, 255, 0.1); }

/* Affix category nav (icon grid at the top of affix pages) */
.affix-nav-grid {
    display: grid;
    grid-template-columns: repeat(6, max-content);
    justify-items: start;
    gap: 1rem 1.5rem;
    padding: 20px 0 40px;
}
@media (max-width: 1200px) { .affix-nav-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .affix-nav-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .affix-nav-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .affix-nav-grid { grid-template-columns: repeat(1, 1fr); } }
@media (max-width: 1100px) {
    .menu-container:not(.menu-hide) ~ * .affix-nav-grid,
    .application-wrapper:not(.page-menu-hide) .affix-nav-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .menu-container:not(.menu-hide) ~ * .affix-nav-grid,
    .application-wrapper:not(.page-menu-hide) .affix-nav-grid { grid-template-columns: repeat(2, 1fr); }
}
.affix-nav-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    width: 100%;
    max-width: 120px;
    cursor: pointer;
}
.affix-nav-entry .slot-icon-48 { width: 48px; height: 48px; margin-bottom: 2px; }
.affix-nav-entry .menu-header { text-align: center; font-size: 1.25rem; color: #ddd; }

/* ---- attainments -------------------------------------------------------------------- */

.attainment-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; justify-content: center; }
.attainment-filter-btn { cursor: pointer; opacity: 0.6; transition: opacity 0.2s ease; width: 48px; height: 48px; }
.attainment-filter-btn:hover { opacity: 0.8; }
.attainment-filter-btn.active { opacity: 1; }

.attainments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 350px);
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}
.attainment-entry {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 15px 30px;    /* extra bottom room for the stage/class dots */
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(164, 194, 221, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 350px;
    box-sizing: border-box;
    position: relative;
}
.attainment-entry:hover { background: rgba(0, 0, 0, 0.4); border-color: rgba(164, 194, 221, 0.3); }
.attainment-icon { flex-shrink: 0; }
.attainment-icon .sprite-icon { width: 64px; height: 64px; cursor: default; transition: opacity 0.3s ease; }
.attainment-details {
    flex: 1;
    min-width: 0;
    max-width: calc(350px - 64px - 30px);
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.attainment-name { font-size: 18px; font-weight: normal; color: #fff; margin-bottom: 8px; }
.attainment-description {
    font-size: 14px;
    color: #ccc;
    line-height: 1.4;
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.attainment-progress {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    display: inline-block;
}
.attainment-reward { font-size: 14px; line-height: 1.4; }
.item-reward { color: #87CEEB; font-weight: normal; }
.other-reward { color: #ccc; font-weight: normal; }
.reward-item-icon { margin-right: 4px; vertical-align: middle; }

/* Multi-stage / multi-class card stacks (one card visible at a time) */
.attainment-stage-stack, .attainment-class-stack { position: relative; cursor: pointer; }
.attainment-stage-card, .attainment-class-card { display: none; opacity: 0; transition: opacity 0.3s ease; }
.attainment-stage-card.active, .attainment-class-card.active { display: block; opacity: 1; }

/* ---- patch notes -------------------------------------------------------------------- */

.patch-notes-container { margin-top: 20px; }
.patch-section { margin-bottom: 15px; border: 2px solid #3b404c; background: #060606; overflow: hidden; }
.patch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #0c0c0c;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #3b404c;
}
.patch-header:hover, .patch-header.active { background: #101010; }
.patch-info h2 { margin: 0; color: #f6fbff; font-size: 1.5rem; font-weight: normal; }
.patch-summary { margin: 5px 0 0; color: #9aa9b6; font-size: 1.25rem; font-style: italic; }
.patch-toggle { font-size: 1.5rem; color: #a4c2dd; transition: transform 0.2s ease; }
.patch-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 20px; }
.patch-content.expanded { max-height: none; padding: 20px; }

/* ---- minimaps ----------------------------------------------------------------------- */

.minimap-container { margin: 20px 0; }
.minimap-center { text-align: center; }
.minimap-wrapper { position: relative; display: inline-block; max-width: 100%; }
.minimap-image-container {
    max-width: 600px;
    width: 100%;
    min-height: 100px;
    max-height: min(72vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.minimap-image {
    max-width: 100%;
    width: auto;
    max-height: min(68vh, 820px);
    height: auto;
    object-fit: contain;
    display: block;
    cursor: pointer;
    image-rendering: pixelated;
}
.minimap-nav { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 10px; }
.minimap-nav-btn {
    background: #2d3d50;
    color: #dcefff;
    border: 1px solid #4a5f76;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.minimap-nav-btn:hover, .minimap-nav-btn:active { background: #223040; }
.minimap-counter {
    font-family: "Nope 8", sans-serif;
    font-size: 16px;
    color: #dcefff;
    min-width: 60px;
    text-align: center;
}

/* ---- packages ----------------------------------------------------------------------- */

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 10px;
}
.packages-grid img { width: 100%; height: auto; cursor: pointer; border-radius: 10px; transition: transform 0.2s; }
.packages-grid img:hover { transform: scale(1.05); }
.package-card { display: flex; flex-direction: column; align-items: center; border-radius: 10px; padding: 10px; }
.package-info { width: 100%; margin-top: 10px; color: #fff; padding: 10px; border-radius: 6px; display: none; }
.package-info.active { display: block; }
.package-info h2 { margin: 0 0 8px; font-size: 1.1em; }
.package-info ul { padding-left: 20px; margin: 0; }

/* ---- misc components ---------------------------------------------------------------- */

.crafting-affix-label { margin-top: 4px; font-size: 0.95rem; color: #ffd89a; line-height: 1.2; }
.gems-all { display: flex; flex-direction: column; }
.bag-icon { width: 32px; height: 32px; flex-shrink: 0; }
.item-classes .class-icon { width: 24px; height: 24px; margin-right: 5px; }
.textile-host { overflow: hidden; }
.textile-layer {
    width: 100%;
    height: 100%;
    pointer-events: none;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    display: block;
}