/* ============================================================================
   wiki.css — the Codex panel (lobby + in-game).
   Register borrowed wholesale from home.painterly.css (same tokens: parchment
   ink on deep umber, candle gold, Cinzel display / EB Garamond body). Loaded
   lazily with wiki.js on the first Codex open, so nothing here is on the
   lobby's boot path.

   Scoping: every rule is nested under #wiki so this file can sit alongside
   /css/common.css (which brings the .skill / .color<quality> vocabulary the
   shared <skill> and <stat> components render into) without either leaking
   into the lobby proper.
   ============================================================================ */

#wiki {
    /* The palette tokens are home.painterly.css's :root set. Restated here so
       the panel renders identically inside the play client (painterly-hud.css
       names its tokens --hud-*), where that file is not loaded. Same values,
       one register. */
    --ink:        #ece3cf;
    --ink-dim:    #b3a684;
    --ink-faint:  #80765e;
    --gold:       #c8a45c;
    --gold-bright:#ecca80;
    --gold-deep:  #8a6d36;
    --danger:     #b5503f;
    --moss:       #7c9466;
    --panel:      rgba(26, 21, 15, 0.82);
    --panel-edge: rgba(200, 164, 92, 0.28);
    --font-head:  'Cinzel', serif;
    --font-body:  'EB Garamond', Georgia, serif;
    --radius: 4px;
    --ease: cubic-bezier(.2,.7,.3,1);

    position: fixed;
    inset: 0;
    /* dvh, not the `inset:0` height alone: on mobile browsers a fixed overlay
       is sized against the LARGE viewport (URL bar hidden), so its last rows
       sit behind the browser chrome and can never be scrolled to. dvh tracks
       the currently visible area. vh first as the fallback for anything that
       doesn't know dvh. */
    height: 100vh;
    height: 100dvh;
    /* Inside the play client's zoomed #ui viewport units render ×zoom; ui.js
       hands the real size down as --uivh/--uivw (unset in the lobby → the
       dvh above stands). */
    height: var(--uivh, 100dvh);
    width: var(--uivw, 100vw);
    z-index: 150;
    display: flex;
    background: rgba(6, 4, 3, 0.82);
    backdrop-filter: blur(4px);
    animation: fade .25s ease both;
    font-family: var(--font-body);
    color: var(--ink);
    /* In game this sits inside #ui, whose HUD mutates every frame: strict
       containment keeps those style/layout passes from walking the Codex's
       few thousand nodes. Its size is explicit above, so size containment
       is free. */
    contain: strict;
}
/* In game the backdrop is the live WebGL canvas: a blur there is a
   full-screen re-filter every frame. Denser dim instead. */
#ui #wiki {
    backdrop-filter: none;
    background: rgba(6, 4, 3, 0.9);
}

#wiki .wiki-frame {
    display: flex;
    margin: auto;
    width: min(1580px, calc(var(--uivw, 100vw) * .96));
    height: min(920px, calc(var(--uivh, 100vh) * .94));
    background-color: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 190, 0.06),
        inset 0 0 40px rgba(0, 0, 0, 0.5),
        0 14px 50px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: rise .35s var(--ease) both;
    position: relative;
}

/* ---- sidebar ---- */
#wiki .wiki-sidebar {
    flex: none;
    width: 240px;
    padding: 26px 0 20px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(14, 11, 7, 0.55), rgba(10, 8, 5, 0.75));
    border-right: 1px solid var(--panel-edge);
}
#wiki .wiki-brand {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-align: center;
    padding: 0 18px 20px;
    margin: 0;
    border-bottom: 1px solid var(--panel-edge);
}
#wiki .wiki-tabs {
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    gap: 1px;
    overflow-y: auto;
}
#wiki .wiki-tab {
    display: block;            /* an <a> since /codex/<tab> pages */
    text-decoration: none;
    padding: 10px 16px;
    font-family: var(--font-head);
    font-size: 16px;
    letter-spacing: .07em;
    color: var(--ink-dim);
    cursor: var(--cur-point, pointer);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: color .15s, background .15s, border-color .15s;
}
#wiki .wiki-tab:hover {
    color: var(--gold-bright);
    border-color: var(--gold-deep);
    background: rgba(200, 164, 92, 0.07);
}
#wiki .wiki-tab.active {
    color: var(--gold-bright);
    border-color: var(--gold);
    background: rgba(200, 164, 92, 0.15);
    box-shadow: inset 0 0 16px rgba(200, 164, 92, 0.14);
}
#wiki .wiki-hint {
    margin-top: auto;
    padding: 14px 20px 0;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-faint);
}

/* ---- content column ---- */
/* min-height:0 is load-bearing, not tidiness. A flex item defaults to
   min-height:auto, so without it this column refuses to shrink below its
   content and .wiki-scroll's overflow never engages — the page scrolls
   instead of the panel. Invisible on desktop (the row layout gives this a
   definite cross-axis height) and fatal on mobile, where the frame is a
   column and this is on the main axis. Same reason for the one on
   .wiki-scroll. */
#wiki .wiki-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#wiki .wiki-topbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 60px 16px 26px;
    border-bottom: 1px solid var(--panel-edge);
}
#wiki .wiki-heading {
    font-family: var(--font-head);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--gold-bright);
    margin: 0;
    white-space: nowrap;
}
#wiki .wiki-count {
    font-size: 16px;
    font-style: italic;
    color: var(--ink-faint);
    white-space: nowrap;
}
#wiki .wiki-search {
    margin: 0 0 0 auto;
    min-width: 280px;
    padding: 9px 14px;
    font-size: 17px;
    /* The lobby styles every <input> globally (home.painterly.css); the play
       client styles none, so the field arrived there as a bare UA input with
       a white focus ring. Same rules, scoped. */
    font-family: var(--font-body);
    color: var(--ink);
    background: rgba(12, 9, 6, 0.7);
    border: 1px solid var(--gold-deep);
    border-radius: var(--radius);
    transition: border-color .18s, box-shadow .18s;
}
#wiki .wiki-search:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(200, 164, 92, 0.35), 0 0 14px rgba(200, 164, 92, 0.25);
}
#wiki .wiki-search::placeholder { color: rgba(180, 166, 132, 0.45); font-style: italic; }
#wiki .wiki-close {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 30px;
    line-height: 1;
    color: var(--ink-faint);
    cursor: var(--cur-point, pointer);
    z-index: 2;
}
#wiki .wiki-close:hover { color: var(--gold-bright); }

#wiki .wiki-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* stop touch scroll chaining into the lobby page behind the overlay
       once this list hits its end */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 22px 26px 40px;
}
#wiki .wiki-scroll::-webkit-scrollbar { width: 10px; }
#wiki .wiki-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); }
#wiki .wiki-scroll::-webkit-scrollbar-thumb {
    background: rgba(200, 164, 92, 0.28);
    border-radius: 5px;
}
#wiki .wiki-scroll::-webkit-scrollbar-thumb:hover { background: rgba(200, 164, 92, 0.5); }

#wiki .wiki-empty {
    padding: 60px 0;
    text-align: center;
    font-style: italic;
    color: var(--ink-faint);
}
#wiki .wiki-loading {
    margin: auto;
    font-family: var(--font-head);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 17px;
    color: var(--gold);
}

/* ---- shared card skin ---- */
#wiki .card {
    background: linear-gradient(180deg, rgba(30, 24, 16, 0.7), rgba(18, 14, 9, 0.8));
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.05), 0 4px 14px rgba(0, 0, 0, 0.4);
}
#wiki .card-name {
    font-family: var(--font-head);
    font-size: 19px;
    letter-spacing: .04em;
    color: var(--ink);
}
#wiki .card-sub {
    font-size: 16px;
    font-style: italic;
    color: var(--ink-faint);
}
#wiki .flavor {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--ink-dim);
    line-height: 1.45;
}

/* ---- class / mercenary portraits ---- */
#wiki .portrait-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
}
#wiki .portrait-card {
    display: flex;
    gap: 18px;
    padding: 20px;
    align-items: flex-start;
}
#wiki .portrait-art {
    flex: none;
    width: 126px;
    height: 126px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* fallback when a class ships no painted sigil yet */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 58px;
    color: var(--gold);
}
#wiki .portrait-art.has-art { color: transparent; }
#wiki .portrait-body { min-width: 0; }
#wiki .portrait-name {
    font-family: var(--font-head);
    font-size: 23px;
    letter-spacing: .07em;
    color: var(--gold-bright);
    margin: 0 0 2px;
}
#wiki .portrait-role {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
}
#wiki .portrait-body p {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink-dim);
}
#wiki .portrait-body p:last-child { margin-bottom: 0; }
#wiki .portrait-gear {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-edge);
    font-size: 16px;
    color: var(--ink-faint);
}
#wiki .portrait-gear b {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: block;
    margin-bottom: 3px;
}

/* ---- skills tab ---- */
#wiki .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}
#wiki .filter-chip {
    padding: 6px 15px;
    font-family: var(--font-head);
    font-size: 14px;
    letter-spacing: .06em;
    color: var(--ink-dim);
    border: 1px solid var(--gold-deep);
    border-radius: var(--radius);
    background: rgba(12, 9, 6, 0.5);
    cursor: var(--cur-point, pointer);
    transition: color .15s, border-color .15s, background .15s;
}
#wiki .filter-chip:hover { color: var(--gold-bright); border-color: var(--gold); }
#wiki .filter-chip.active {
    color: var(--gold-bright);
    border-color: var(--gold-bright);
    background: rgba(200, 164, 92, 0.18);
}

#wiki .group-title {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 26px 0 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--panel-edge);
}
#wiki .group-title:first-child { margin-top: 0; }

#wiki .tier {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 0;
}
#wiki .tier-label {
    flex: none;
    width: 84px;
    padding-top: 12px;
    font-family: var(--font-head);
    font-size: 17px;
    letter-spacing: .08em;
    color: var(--gold-deep);
    text-align: right;
}
#wiki .tier-label small {
    display: block;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--ink-faint);
}
#wiki .tier-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* ---- talents (passives) ----
   Class names are `tal-*`, NOT `talent-*`: /css/common.css already owns
   .talent-cell / .talent-name / .talent-description for the in-game talent
   modal (a different, tooltip-driven layout). Distinct names beat a
   specificity fight. */
#wiki .tal-table {
    display: grid;
    grid-template-columns: 140px repeat(4, minmax(0, 1fr));
    gap: 6px;
}
#wiki .tal-col-head,
#wiki .tal-row-head {
    font-family: var(--font-head);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 8px 4px;
    align-self: center;
}
#wiki .tal-row-head {
    text-align: right;
    font-size: 16px;
    letter-spacing: .08em;
}
#wiki .tal-cell {
    padding: 12px 13px 13px;
    position: relative;
}
#wiki .tal-cell-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}
#wiki .tal-icon {
    flex: none;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#wiki .tal-name {
    font-family: var(--font-head);
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: .02em;
}
#wiki .tal-stats {
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink-dim);
}
#wiki .tal-cost {
    font-size: 14px;
    font-style: italic;
    color: var(--ink-faint);
}

/* ---- stats tab ---- */
#wiki .prose { max-width: 900px; }
#wiki .prose-block { margin-bottom: 26px; }
#wiki .prose-block h3 {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--gold-bright);
    margin: 0 0 8px;
}
#wiki .prose-block p {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink-dim);
}
#wiki .prose-block ul { margin: 6px 0 0; padding-left: 22px; }
#wiki .prose-block li {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-dim);
    margin-bottom: 3px;
}
#wiki .attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 14px;
}
#wiki .attr-card { padding: 18px 20px; }
#wiki .attr-card h4 {
    font-family: var(--font-head);
    font-size: 19px;
    letter-spacing: .08em;
    color: var(--gold-bright);
    margin: 0 0 10px;
}
#wiki .attr-card div {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-dim);
}
#wiki .attr-card b { color: var(--ink); font-weight: 600; }

/* ---- item cards ---- */
#wiki .item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(335px, 1fr));
    gap: 14px;
    align-items: start;
}
#wiki .item-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
    /* hundreds per tab (uniques ≈ 460): skip layout + paint off-screen.
       Nothing overflows an item card (no tooltips), so the implied paint
       clip is invisible; `auto` remembers each card's real height. */
    content-visibility: auto;
    contain-intrinsic-size: auto 335px auto 260px;
}
#wiki .item-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
#wiki .item-icon-box {
    flex: none;
    /* big on purpose: the painterly cuts are the best thing on the card */
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(200, 164, 92, 0.10), transparent 72%);
}
#wiki .item-icon-box img {
    max-width: 100%;
    max-height: 100%;
    /* the painterly cuts carry their own shading — a drop shadow lifts them
       off the card without touching the art */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
#wiki .item-titles { min-width: 0; flex: 1; padding-top: 2px; }
#wiki .item-unique-name {
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: .03em;
}
#wiki .item-base {
    font-family: var(--font-head);
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: .02em;
}
#wiki .item-type {
    font-size: 14px;
    font-style: italic;
    color: var(--ink-faint);
    margin-top: 2px;
}
#wiki .item-runes {
    font-size: 17px;
    letter-spacing: .12em;
    margin-top: 3px;
}
#wiki .item-dims {
    display: inline-block;
    margin-top: 5px;
    padding: 1px 7px;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--ink-faint);
    border: 1px solid var(--gold-deep);
    border-radius: 2px;
}
#wiki .item-facts {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--panel-edge);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink-dim);
}
#wiki .item-facts > div { margin-bottom: 1px; }
#wiki .item-affixes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-edge);
    font-size: 16px;
    line-height: 1.45;
}
#wiki .item-affixes .or-sep {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--ink-faint);
    margin: 3px 0;
}
#wiki .item-note {
    margin-top: 9px;
    font-size: 16px;
    font-style: italic;
    line-height: 1.4;
}
#wiki .item-formula-text {
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--gold-bright);
    background: rgba(200, 164, 92, 0.08);
    border-left: 2px solid var(--gold-deep);
}

/* ---- maps (charts) ---- */
#wiki .map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 16px;
}
#wiki .map-card { padding: 18px 20px 20px; }
#wiki .map-head { display: flex; gap: 16px; align-items: flex-start; }
#wiki .map-icon {
    flex: none;
    width: 94px;
    height: 94px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
#wiki .map-title {
    font-family: var(--font-head);
    font-size: 22px;
    letter-spacing: .05em;
    color: var(--gold-bright);
    margin: 0 0 3px;
}
#wiki .map-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
#wiki .pill {
    padding: 2px 9px;
    font-size: 13px;
    letter-spacing: .05em;
    color: var(--ink-dim);
    border: 1px solid var(--gold-deep);
    border-radius: 2px;
    background: rgba(12, 9, 6, 0.45);
}
#wiki .pill.gold { color: var(--gold-bright); border-color: var(--gold); }
#wiki .pill.danger { color: #e8907f; border-color: rgba(181, 80, 63, 0.6); }
#wiki .map-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--panel-edge);
}
#wiki .map-section b {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: block;
    margin-bottom: 5px;
}
#wiki .map-mobs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
#wiki .map-boss { font-size: 17px; color: var(--ink-dim); line-height: 1.5; }
#wiki .map-boss strong { color: var(--danger); font-weight: 600; }
#wiki .mod-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 900px;
}
#wiki .mod-list { list-style: none; margin: 6px 0 0; padding: 0; }
#wiki .mod-list li {
    padding: 6px 0;
    font-size: 17px;
    color: var(--ink-dim);
    border-bottom: 1px solid rgba(200, 164, 92, 0.12);
}

/* ==== shared-component vocabulary =========================================
   The <skill>, <skill_body>, <stat> and <damage_effects> components come
   straight from client/js/ — the same ones the game renders — so the wiki
   inherits their markup and needs their CSS. /css/common.css is loaded with
   this file for the quality/damage-type colour table (.colorunique,
   .colorfire, …), which is game data, not styling.

   What common.css does NOT bring is a painterly look: its .skill plate is the
   legacy blue/orange register. Everything below re-skins that vocabulary to
   parchment-and-gold, scoped under #wiki so the in-game panels are untouched.
   Two rules (.stats_separator, .range_text) live in game.css, which we
   deliberately don't load (it has a global `body {}`) — restated here.
   ========================================================================== */
#wiki .stats_separator { height: 10px; }
#wiki .range_text { color: var(--moss); margin-left: 4px; }

#wiki .skill {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 106px;
    min-width: 0;
    min-height: 106px;
    margin: 0;
    padding: 9px 7px 8px;
    font-size: 14px;
    text-align: center;
    background: linear-gradient(180deg, rgba(38, 30, 19, 0.75), rgba(20, 16, 10, 0.85));
    border: 1px solid var(--gold-deep);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.05), 0 3px 10px rgba(0, 0, 0, 0.4);
    cursor: var(--cur-point, pointer);
    transition: border-color .15s, box-shadow .2s, transform .12s var(--ease);
}
#wiki .skill:hover {
    background: linear-gradient(180deg, rgba(48, 38, 24, 0.85), rgba(26, 20, 13, 0.9));
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(200, 164, 92, 0.3);
    transform: translateY(-2px);
    z-index: 5;
}
/* "not yet levelled in this preview" — the wiki starts every skill at 0, so
   this is the resting state, not a locked state. Keep it legible. */
#wiki .skill_unknown, #wiki .skill_unknown:hover { opacity: 1; }
#wiki .skill_title {
    font-family: var(--font-head);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .01em;
    max-width: 100%;
    white-space: normal;
}
#wiki .skill_title_unknown { color: var(--ink-dim); }
#wiki .skill_icon {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
    transition: transform .12s ease;
}
#wiki .skill_has_icon { background: none; box-shadow: none; }
#wiki .skill_has_icon:hover .skill_icon { transform: scale(1.07); }
/* the icon set is partial — keep the name visible under the medallion so a
   skill is identifiable either way */
#wiki .skill_has_icon > .skill_title { display: block; }
#wiki .skill_level {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    padding: 1px 4px;
    font-family: var(--font-head);
    font-size: 13px;
    color: #1a130a;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Tooltip — parchment plate, no arrow. positionAbsoluteDiv (from
   /js/utils.js, via $root.showDescription) flips it to position:fixed and
   clamps it on-screen on hover; the absolute anchoring below is the resting
   state so the panel is never mispositioned before that runs. */
#wiki .skill_description {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    min-width: 320px;
    max-width: 450px;
    padding: 16px 18px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.45;
    text-align: left;
    color: var(--ink);
    background: linear-gradient(180deg, rgba(26, 21, 14, 0.98), rgba(14, 11, 7, 0.99));
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 235, 190, 0.07);
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
}
#wiki .skill:hover .skill_description { display: flex; }
#wiki .skill_description { max-height: calc(var(--uivh, 100vh) - 24px); }
#wiki .skill_description:has(.skill_levels_dual) { max-width: 760px; }
#wiki .skill_description::before { display: none; } /* drop the legacy arrow */
#wiki .skill_description .skill_title {
    font-size: 19px;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
#wiki .skill_explanation {
    font-style: italic;
    color: var(--ink-dim);
    box-shadow: none;
    margin-bottom: 6px;
}
#wiki .skill_category { font-size: 14px; font-style: italic; }
#wiki .skill_description_separator {
    align-self: stretch;
    height: 1px;
    margin: 9px 0;
    background: var(--panel-edge);
}
#wiki .skill_level_header {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 4px;
}
#wiki .skill_level_header_next { color: var(--moss); }
#wiki .damage_effect_prefix {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-top: 6px;
}

/* ==== touch: the skill sheet ==============================================
   Not a media query — wiki.js decides by `(hover: none)` and only renders
   .skill-sheet there. A tablet with both a pointer and a touchscreen keeps
   the hover tooltip; a phone gets this. */
#wiki .skill-sheet {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: flex-end;
    background: rgba(6, 4, 3, 0.6);
    animation: fade .2s ease both;
}
#wiki .skill-sheet-panel {
    width: 100%;
    max-height: calc(var(--uivh, 100vh) * .78);
    display: flex;
    flex-direction: column;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(30, 24, 16, 0.99), rgba(14, 11, 7, 1));
    border-top: 1px solid var(--gold);
    box-shadow: 0 -14px 46px rgba(0, 0, 0, 0.75);
    animation: sheet-up .28s var(--ease) both;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
#wiki .skill-sheet-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--panel-edge);
}
#wiki .skill-sheet-name {
    flex: 1;
    font-family: var(--font-head);
    font-size: 22px;
    letter-spacing: .04em;
}
/* the sheet's close sits in flow, unlike the panel's absolute one */
#wiki .skill-sheet-head .wiki-close { position: static; }
#wiki .skill-sheet-body {
    overflow-y: auto;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    -webkit-overflow-scrolling: touch;
}
#wiki .skill-sheet-requires { color: rgba(255, 180, 120, 0.95); margin-top: 4px; }
#wiki .skill-sheet-level {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 0;
    padding: 10px 0;
    border-top: 1px solid var(--panel-edge);
    border-bottom: 1px solid var(--panel-edge);
    font-family: var(--font-head);
    font-size: 17px;
    letter-spacing: .05em;
    color: var(--gold-bright);
}
#wiki .skill-sheet-level .btn {
    margin: 0;
    min-width: 52px;   /* comfortable tap target */
    font-size: 20px;
    padding: 6px 14px;
}

/* ==== mobile / narrow ======================================================
   The desktop shape is a fixed 240px rail beside the content, which on a
   phone leaves almost nothing for the content. Below this width the panel
   goes full-bleed and the rail becomes a horizontally-scrolling tab strip
   across the top, so the tabs cost one row instead of a whole column.
   ========================================================================== */
@media (max-width: 820px) {
    #wiki .wiki-frame {
        flex-direction: column;
        width: 100%;
        height: 100%;
        /* bounded by the parent's dvh — never taller than the visible area,
           or the bottom of the scroller lands off-screen */
        max-height: 100%;
        min-height: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* rail → strip.
       The right padding is on the STRIP CONTAINER, not on the scrolling
       .wiki-tabs inside it: trailing padding on a scroller sits at the end of
       the scrolled content, so it slides away and the tabs pass under the
       floating ×. Narrowing the container instead keeps the scroll viewport
       permanently clear of it. */
    #wiki .wiki-sidebar {
        flex-direction: row;
        align-items: center;
        width: auto;
        padding: 0 50px 0 0;
        border-right: none;
        border-bottom: 1px solid var(--panel-edge);
    }
    /* The button that opened the panel said "Codex" and the heading below
       names the page — on a phone the vertical row is worth more. */
    #wiki .wiki-brand { display: none; }
    #wiki .wiki-hint { display: none; }   /* no arrow keys, no Esc */
    #wiki .wiki-tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        /* flex:1 + min-width:0 so the strip takes the row's remaining width
           and scrolls; without min-width it sizes to content and won't shrink */
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding: 10px 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    #wiki .wiki-tabs::-webkit-scrollbar { display: none; }
    #wiki .wiki-tab {
        flex: none;
        white-space: nowrap;
        padding: 9px 15px;
        font-size: 15px;
    }

    /* topbar wraps: title + count on one row, search full-width beneath */
    #wiki .wiki-topbar {
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 14px 16px 12px;
    }
    #wiki .wiki-heading { font-size: 21px; }
    #wiki .wiki-search {
        order: 3;
        width: 100%;
        min-width: 0;
        margin: 2px 0 0;
    }
    /* vertically centred on the tab strip it now sits beside */
    #wiki .wiki-close { top: 13px; right: 14px; }

    /* Deep bottom padding, plus the home-indicator inset. The last card must
       clear any browser chrome that overlays the viewport during a scroll —
       content flush to the edge is what makes the end of a list feel
       unreachable. */
    #wiki .wiki-scroll { padding: 16px 16px calc(72px + env(safe-area-inset-bottom)); }

    /* every grid collapses to a single column — two columns of anything is
       unreadable at this width */
    #wiki .portrait-grid,
    #wiki .item-grid,
    #wiki .map-grid,
    #wiki .attr-grid,
    #wiki .mod-table {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    #wiki .mod-table { gap: 20px; }

    /* portraits/maps keep art beside text, but smaller */
    #wiki .portrait-card { gap: 14px; padding: 16px; }
    #wiki .portrait-art { width: 88px; height: 88px; font-size: 44px; }
    #wiki .portrait-name { font-size: 21px; }
    #wiki .portrait-body p { font-size: 17px; }
    #wiki .map-card { padding: 16px; }
    #wiki .map-head { gap: 12px; }
    #wiki .map-icon { width: 68px; height: 68px; }
    #wiki .map-title { font-size: 20px; }

    /* tier label moves above its row rather than taking a left gutter */
    #wiki .tier { flex-wrap: wrap; gap: 8px; }
    #wiki .tier-label {
        width: 100%;
        padding-top: 0;
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    #wiki .tier-label small { display: inline; }
    #wiki .skill { width: 96px; min-height: 96px; }

    /* talents: the 5-column matrix can't survive here. One column, with each
       category's row-head acting as a section title above its four cells —
       the grid's DOM order already reads that way. */
    #wiki .tal-table { grid-template-columns: 1fr; gap: 10px; }
    #wiki .tal-col-head { display: none; }
    #wiki .tal-row-head {
        text-align: left;
        margin-top: 14px;
        padding: 8px 0 6px;
        font-size: 17px;
        border-bottom: 1px solid var(--panel-edge);
    }

    #wiki .item-icon-box { width: 104px; height: 104px; }
}

/* Very narrow (small phones in portrait). The threshold looks generous
   because home.html's viewport tag pairs width=device-width with
   initial-scale=0.9 — the larger of the two wins, so a 390 px phone reports
   ~433 CSS px, not 390. */
@media (max-width: 470px) {
    #wiki .wiki-scroll { padding: 14px 12px calc(72px + env(safe-area-inset-bottom)); }
    #wiki .wiki-topbar { padding: 12px 14px 10px; }
    #wiki .wiki-heading { font-size: 19px; }
    /* art beside text stops paying for itself — stack it */
    #wiki .portrait-card { flex-direction: column; align-items: center; text-align: center; }
    #wiki .portrait-gear { text-align: left; }
    #wiki .skill { width: 88px; min-height: 88px; }
    #wiki .item-head { gap: 10px; }
    #wiki .item-icon-box { width: 88px; height: 88px; }
}

/* ---- affix tables ---- */
#wiki .afx-level {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: rgba(12, 9, 6, 0.5);
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
}
#wiki .afx-level label {
    font-family: var(--font-head);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
#wiki .afx-level input[type=range] {
    flex: 1;
    min-width: 120px;
    accent-color: var(--gold);
}
#wiki .afx-level-value {
    font-family: var(--font-head);
    font-size: 20px;
    color: var(--gold-bright);
    min-width: 34px;
    text-align: right;
}
#wiki .afx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 4px 22px;
}
#wiki .wiki-affix {
    font-size: 17px;
    line-height: 1.45;
}
/* Below its item level the line cannot roll yet — greyed rather than hidden,
   so the table can teach that the apex lines exist. */
#wiki .wiki-affix.locked { opacity: .42; }
#wiki .afx-gate {
    margin-left: 7px;
    font-size: 11px;
    color: var(--ink-faint);
    border-color: var(--panel-edge);
}
#wiki .afx-grid.corrupted .wiki-affix { color: hsla(0, 80%, 70%, 1); } /* .colorcorrupted */
#wiki .afx-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
#wiki .afx-pack { padding: 12px 14px; }

/* Any affix line opens the reverse lookup. No cursor change — the project
   ships a custom cursor and a bare `cursor:` keyword would replace it. */
#wiki .wiki-affix.findable:hover {
    color: var(--gold-bright);
    text-shadow: 0 0 6px rgba(200, 164, 92, 0.35);
}
#wiki .afx-find-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
#wiki .afx-find-head .wiki-heading { margin: 0; }
#wiki .afx-find-head .filter-chip { margin: 0; }
#wiki .group-title small {
    margin-left: 10px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--ink-faint);
}
#wiki .afx-find-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}
#wiki .afx-find-slot { padding: 11px 14px; }
#wiki .afx-find-slot .card-name { margin-bottom: 5px; }

/* Stat filter chip — set by clicking any affix line on a browsable tab. */
#wiki .stat-chip {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 14px 7px;
    background: rgba(200, 164, 92, 0.12);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
}
#wiki .stat-chip-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
#wiki .stat-chip-label {
    font-family: var(--font-head);
    font-size: 17px;
    letter-spacing: .04em;
    color: var(--gold-bright);
}
#wiki .stat-chip-x {
    font-size: 19px;
    line-height: 1;
    color: var(--ink-faint);
}
#wiki .stat-chip-x:hover { color: var(--gold-bright); }
#wiki .stat-chip-sub {
    margin-top: 3px;
    font-size: 13px;
    letter-spacing: .03em;
    color: var(--ink-faint);
}
#wiki .stat-chip-sub:hover { color: var(--gold-bright); }