/* ============================================================================
   painterly-hud.css — Fable-lore reskin of the in-game HUD panels + fonts.
   Layered AFTER /css/game.css + dungeon.css so it overrides them. A/B test:
   remove this one <link> in play.html to fall back to the legacy look.

   SCOPE: panels (dock + windows + modals), tabs, headers, scrollbars, fonts,
   tooltips. Deliberately does NOT touch the bottom HUD layout — life/mana,
   skill bar, action buttons (#life_and_mana, .action-button, .game_button,
   .active_skill, .attack-skill, .mini_shortcut) — that's a separate rework.
   Shares the lobby palette (home.painterly.css).
   ============================================================================ */

:root {
    /* dark UA widgets: autofill dropdown, native controls */
    color-scheme: dark;

    --hud-ink:        #ece3cf;
    --hud-ink-dim:    #b3a684;
    --hud-ink-faint:  #80765e;
    --hud-gold:       #c8a45c;
    --hud-gold-bright:#ecca80;
    --hud-gold-deep:  #8a6d36;

    --hud-panel:      linear-gradient(160deg, rgba(28, 22, 15, 0.96), rgba(18, 14, 9, 0.97));
    --hud-panel-flat: rgba(22, 17, 11, 0.96);
    --hud-edge:       rgba(200, 164, 92, 0.30);
    --hud-edge-hi:    rgba(236, 202, 128, 0.7);

    --hud-font-head:  'Cinzel', serif;
    --hud-font-body:  'EB Garamond', Georgia, serif;
    /* Italic flavor text (dialogs, tooltip blurbs). Alegreya's italic is far
       sturdier at small sizes than EB Garamond's calligraphic one. */
    --hud-font-flavor: 'Alegreya', 'EB Garamond', Georgia, serif;
    --hud-shadow:
        inset 0 1px 0 rgba(255, 235, 190, 0.07),
        inset 0 0 38px rgba(0, 0, 0, 0.5),
        0 12px 36px rgba(0, 0, 0, 0.55);
}

/* ---- fonts: humanist serif body, engraved serif headings ---- */
#ui, #ui input, #ui textarea, #ui select, #ui button {
    font-family: var(--hud-font-body);
    letter-spacing: .01em;
}

/* ============================================================================
   PANELS — shared parchment-on-umber skin with a gold hairline + inner glow
   ============================================================================ */
#stats, #character, #quests, #options,
.fenetre, #inventory_conteneur, #trade_window {
    background: var(--hud-panel) !important;
    background-color: rgba(20, 15, 10, 0.96) !important;
    border: 1px solid var(--hud-edge) !important;
    box-shadow: var(--hud-shadow) !important;
    color: var(--hud-ink) !important;
}

/* full-height dock column: square inner edge, gold seam on the right */
.left-dock {
    background: var(--hud-panel) !important;
    border: none !important;
    border-right: 1px solid var(--hud-edge) !important;
    box-shadow: 8px 0 36px rgba(0, 0, 0, 0.5) !important;
    color: var(--hud-ink) !important;
}
#stats.left-dock, #character.left-dock, #quests.left-dock, #options.left-dock {
    border-radius: 0 !important;
}
/* wider quest dock — the crest + larger text want more room than the 700px default */
#quests.left-dock {
    width: min(880px, 94vw) !important;
    min-width: 780px !important;
}
/* the Skills fullscreen graph keeps its own dark wash but warm it up */
#skills.left-dock {
    background: linear-gradient(160deg, rgba(22, 17, 11, 0.985), rgba(12, 9, 6, 0.992)) !important;
}

/* rounded windows keep their corners but get the parchment skin */
#character { border-radius: 10px !important; }
#options   { border-radius: 10px !important; }

/* ============================================================================
   TAB BAR (#left_tabs) — engraved caps, gold active
   ============================================================================ */
#left_tabs {
    background: linear-gradient(180deg, rgba(34, 26, 17, 0.99), rgba(20, 15, 10, 0.99)) !important;
    border-bottom: 1px solid var(--hud-edge) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}
.left_tab {
    font-family: var(--hud-font-head) !important;
    text-transform: none !important;
    letter-spacing: .08em !important;
    font-size: 14px !important;
    color: var(--hud-ink-dim) !important;
    border-right: 1px solid rgba(200, 164, 92, 0.18) !important;
}
.left_tab:hover { color: var(--hud-gold-bright) !important; background: rgba(200, 164, 92, 0.08) !important; }
.left_tab.active {
    color: var(--hud-gold-bright) !important;
    background: rgba(200, 164, 92, 0.12) !important;
    box-shadow: inset 0 -2px 0 var(--hud-gold) !important;
}
.left_tab_close { color: var(--hud-ink-faint) !important; }
.left_tab_close:hover { color: var(--hud-gold-bright) !important; }

/* close buttons: one shared chip recipe — see CLOSE BUTTONS section at EOF */

/* ---- shared left-dock panel header: icon · title · × (Quests/Character/
   Options/Inventory). Sticky so it stays pinned while the panel scrolls. ---- */
.dock-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    margin-bottom: 12px;
    background: linear-gradient(180deg, rgba(34, 26, 17, 0.99), rgba(22, 16, 10, 0.97)) !important;
    border-bottom: 1px solid var(--hud-edge);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.dock-header-ico {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(1.35) contrast(1.25) saturate(1.2)
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 4px rgba(220, 180, 100, 0.35));
    transform: scale(1.12);
}
.dock-title {
    flex: 1 1 auto;
    margin: 0 !important;
    font-family: var(--hud-font-head) !important;
    font-size: 20px !important;
    letter-spacing: .04em;
    color: var(--hud-gold-bright) !important;
}
.dock-close { flex: 0 0 auto; }   /* skin: CLOSE BUTTONS section at EOF */

/* ---- Character identity header: name is the title; Lv chip hugs the name,
   self/merc toggle + × pushed right; XP progress is the header's bottom edge ---- */
.char-id-header .dock-title {
    flex: 0 1 auto;               /* hug the name, let the chip sit beside it */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.char-level-chip {
    flex: 0 0 auto;
    margin-right: auto;           /* everything after (toggle, ×) goes right */
    padding: 1px 10px;
    font-family: var(--hud-font-head);
    font-size: 15px;
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--hud-gold-bright);
    background: rgba(200, 164, 92, 0.10);
    border: 1px solid var(--hud-gold);
    border-radius: 4px;
}
.char-id-header .header-toggle { display: flex; gap: 6px; }
.char-id-header .self_or_merc_button {
    padding: 4px 13px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.char-xp-bar {
    position: absolute;           /* sticky header is the containing block */
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: rgba(0, 0, 0, 0.45);
}
.char-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hud-gold), var(--hud-gold-bright));
    box-shadow: 0 0 6px rgba(200, 164, 92, 0.5);
    transition: width .4s ease;
}

/* ============================================================================
   HEADERS & TITLES — Cinzel gold
   ============================================================================ */
.stats-title, .modal-title,
.character-name, .quest-number, #stash_title, #stash_title > div {
    font-family: var(--hud-font-head) !important;
    color: var(--hud-gold-bright) !important;
    letter-spacing: .04em !important;
}
.stats-header, .character-header, .modal-header {
    border-bottom: 1px solid var(--hud-edge) !important;
}
.character-level { color: var(--hud-gold) !important; font-family: var(--hud-font-head) !important; }
.character-experience { color: var(--hud-ink-dim) !important; }

/* available-points pills (skill / stat) — parchment chip, gold text */
.points-available, .stats-points, .attribute-points {
    background: rgba(200, 164, 92, 0.10) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 4px !important;
    color: var(--hud-gold-bright) !important;
    font-family: var(--hud-font-head) !important;
    letter-spacing: .03em !important;
}

/* talent-tree column headers */
.talent-header {
    font-family: var(--hud-font-head) !important;
    color: var(--hud-gold) !important;
    letter-spacing: .05em !important;
}

/* ============================================================================
   QUESTS — parchment cards, gold rule
   ============================================================================ */
/* act-tab strip (shared by #quests act row + #waypoints modal) — warm band,
   engraved caps, underline-active like .left_tab.active. Kills the legacy
   slate strip + blue pill + lift/triangle. */
.waypoint_tabs {
    background: linear-gradient(180deg, rgba(34, 26, 17, 0.99), rgba(22, 16, 10, 0.97)) !important;
    border-bottom: 1px solid var(--hud-edge) !important;
}
.waypoint_tab, .waypoint_tabs .waypoint_tab {
    font-family: var(--hud-font-head) !important;
    color: var(--hud-ink-dim) !important;
    letter-spacing: .05em !important;
    border-radius: 4px !important;
    transform: none !important;
}
.waypoint_tab_selected {
    color: var(--hud-gold-bright) !important;
    background: rgba(200, 164, 92, 0.12) !important;
    border-color: transparent !important;
    box-shadow: inset 0 -2px 0 var(--hud-gold) !important;
    transform: none !important;
}
.waypoint_tab_selected::before { content: none !important; }
/* ---- Quest panel (layout D): state-rail · glyph · title/objective/turn-in
   · state tag. Grouped Active-over-Completed. Uniform rows — the big crest
   moved off the list (reserved for a future hover/detail view). ---- */

/* group headers ("Active" / "Completed") — quiet engraved caps */
.quest-group-label {
    font-family: var(--hud-font-head) !important;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hud-ink-faint) !important;
    margin: 0 2px;
}
/* extra breathing room above the second group (container gap handles the rest) */
.quest-group-label ~ .quest-group-label,
.quest-item + .quest-group-label { margin-top: 6px; }

.quest-item {
    position: relative;
    background: rgba(200, 164, 92, 0.05) !important;
    border: 1px solid rgba(200, 164, 92, 0.18) !important;
    border-left: 3px solid var(--hud-gold-deep) !important;   /* state rail */
    border-radius: 6px !important;
    padding: 13px 16px !important;
    display: flex !important;
    align-items: stretch !important;   /* body fills the crest height (beats game.css center) */
    gap: 15px;
    transform: none !important;              /* kill game.css hover lift */
}
.quest-item:hover {
    border-color: var(--hud-gold) !important;
    transform: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
/* kill the game.css 4px left accent bar on hover */
.quest-item::before,
.quest-item:hover::before { background: transparent !important; content: none !important; }

/* per-state rail colour */
.quest-item.active   { border-left-color: var(--hud-gold) !important; }
.quest-item.reward   { border-left-color: var(--hud-gold-bright) !important; }
.quest-item.completed{ border-left-color: #4f7a5c !important; opacity: 0.6; }

/* painterly quest crest, left anchor — sized down from the old 104px hero.
   align-self inherits the row: top for active cards, centred for completed. */
.quest-icon {
    flex: 0 0 auto;
    align-self: center;           /* crest balanced; title stays top via body */
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
/* fallback state glyph when a quest has no crest art */
.quest-glyph {
    flex: 0 0 auto;
    width: 100px;
    text-align: center;
    font-size: 24px;
    line-height: 1.2;
    color: var(--hud-gold) !important;
}
.quest-item.reward    .quest-glyph { color: var(--hud-gold-bright) !important; }
.quest-item.completed .quest-glyph { color: #7bd39a !important; }

.quest-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* title pinned top; detail block centres below */
    gap: 6px;
}
/* description + turn-in, vertically centred in the space under the title */
.quest-detail {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.quest-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
/* roman numeral demoted to a small inline index before the name */
.quest-num {
    font-family: var(--hud-font-head) !important;
    font-size: 14px !important;
    letter-spacing: 1px;
    color: var(--hud-gold) !important;
    opacity: 0.7;
}
.quest-name {
    font-family: var(--hud-font-head) !important;
    font-size: 19px !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--hud-gold-bright) !important;
}
.quest-description { color: var(--hud-ink) !important; line-height: 1.4; flex: 0 0 auto !important; }
/* turn-in destination — its own line, gold, distinct from the state tag */
.quest-turnin {
    color: var(--hud-gold-bright) !important;
    font-size: 15px;
    opacity: 0.9;
}
/* state tag, right — short state word, colour by state */
.quest-state-tag {
    flex: 0 0 auto;
    align-self: center;
    font-family: var(--hud-font-head) !important;
    font-size: 13px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hud-ink-dim) !important;
    white-space: nowrap;
}
.quest-state-tag.reward {
    color: var(--hud-gold-bright) !important;
    animation: questRewardPulse 1.8s ease-in-out infinite !important;
}

.no-quests { color: var(--hud-ink-faint) !important; font-style: italic; }

/* self/merc + similar pill toggles inside panels */
.self_or_merc_button {
    font-family: var(--hud-font-head) !important;
    color: var(--hud-ink-dim) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 4px !important;
}
.self_or_merc_button_active {
    color: var(--hud-gold-bright) !important;
    background: rgba(200, 164, 92, 0.12) !important;
    border-color: var(--hud-gold) !important;
}

/* ============================================================================
   TOOLTIPS — skill / talent description panels
   ============================================================================ */
.skill-description-tooltip, .talent-description-tooltip,
.description-tooltip, .infobulle {
    background: var(--hud-panel) !important;
    background-color: rgba(20, 15, 10, 0.97) !important;
    border: 1px solid var(--hud-edge) !important;
    box-shadow: var(--hud-shadow) !important;
    color: var(--hud-ink) !important;
    font-family: var(--hud-font-body) !important;
}

/* ============================================================================
   SCROLLBARS — gold thumb on umber track (panels + lists)
   ============================================================================ */
.left-dock::-webkit-scrollbar,
.trade_sections::-webkit-scrollbar,
.quests-container::-webkit-scrollbar,
.options-container::-webkit-scrollbar,
.waypoint_list::-webkit-scrollbar {
    width: 10px;
}
.left-dock::-webkit-scrollbar-track,
.trade_sections::-webkit-scrollbar-track,
.quests-container::-webkit-scrollbar-track,
.options-container::-webkit-scrollbar-track,
.waypoint_list::-webkit-scrollbar-track {
    background: rgba(12, 9, 6, 0.6);
}
.left-dock::-webkit-scrollbar-thumb,
.trade_sections::-webkit-scrollbar-thumb,
.quests-container::-webkit-scrollbar-thumb,
.options-container::-webkit-scrollbar-thumb,
.waypoint_list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--hud-gold-deep), rgba(90, 70, 38, 0.8));
    border-radius: 5px;
    border: 1px solid rgba(200, 164, 92, 0.25);
}
.left-dock::-webkit-scrollbar-thumb:hover,
.trade_sections::-webkit-scrollbar-thumb:hover,
.quests-container::-webkit-scrollbar-thumb:hover,
.options-container::-webkit-scrollbar-thumb:hover,
.waypoint_list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--hud-gold), var(--hud-gold-deep));
}

/* firefox */
.left-dock, .trade_sections, .quests-container, .options-container, .waypoint_list {
    scrollbar-color: var(--hud-gold-deep) rgba(12, 9, 6, 0.6);
    scrollbar-width: thin;
}

/* ============================================================================
   TYPE SCALE — EB Garamond reads ~1 step smaller than Oswald at the same px,
   so bump panel text up for legibility.
   ============================================================================ */
#stats, #character, #quests, #options,
.fenetre, #inventory_conteneur, #trade_window { font-size: 18px !important; }

.left_tab            { font-size: 16px !important; }
.stats-title         { font-size: 28px !important; }
.modal-title         { font-size: 26px !important; }
.character-name      { font-size: 24px !important; }
.character-level     { font-size: 18px !important; }
.character-experience{ font-size: 17px !important; }
.points-available, .stats-points, .attribute-points,
.self_or_merc_button { font-size: 17px !important; }
.talent-header       { font-size: 16px !important; }
.waypoint_tab        { font-size: 16px !important; }
.quest-number        { font-size: 12px !important; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hud-gold) !important; opacity: 0.8; min-width: 0 !important; }
.quest-description   { font-size: 17px !important; }
.no-quests           { font-size: 17px !important; }
.skill-description-tooltip, .talent-description-tooltip,
.description-tooltip, .infobulle { font-size: 16px !important; }
#stash_title, #stash_title > div { font-size: 20px !important; }

/* ============================================================================
   CHARACTER PANEL — the new layout (other agent) ships the legacy SaaS-blue
   accent (#4a9eff / rgba(74,158,255,*)). Remap to gold/parchment for coherence.
   Semantic colors (life red, mana blue, cold-resist blue) are left alone.
   ============================================================================ */
.section-title {
    font-family: var(--hud-font-head) !important;
    color: var(--hud-gold-bright) !important;
    border-bottom: 1px solid var(--hud-edge) !important;
    font-size: 15px !important;
}
/* plain accent tick killed (left-bar tell); data-group sigils below re-set
   content with higher specificity so they survive */
.section-title::before { content: none !important; }

/* stat-group sigils: a header with data-group swaps the accent tick for its
   painterly gold icon (cut from textures/statgroup/, glow mode). */
.section-title[data-group]::before {
    content: '' !important;
    width: 52px !important;
    height: 52px !important;
    margin-right: 12px !important;
    border-radius: 0 !important;
    background: var(--sg-icon) center / contain no-repeat !important;
    /* icons cut with a gentle smoothstep alpha — only true near-black is keyed
       out, the gold stays fully opaque (no milky see-through). Normal alpha
       compositing, so the icon sits on the header at the card's own tone. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) saturate(1.12);
    opacity: 1;
}
/* ?v= busts the image cache after a re-edit (CSS url() can't read JS ICON_VER) — bump on recut/edit. */
.section-title[data-group="vitals"]      { --sg-icon: url(/viewer/textures/statgroup/vitals.png?v=2); }
.section-title[data-group="attributes"]  { --sg-icon: url(/viewer/textures/statgroup/attributes.png?v=2); }
.section-title[data-group="resistances"] { --sg-icon: url(/viewer/textures/statgroup/resistances.png?v=2); }
.section-title[data-group="combat"]      { --sg-icon: url(/viewer/textures/statgroup/combat.png?v=2); }
.section-title[data-group="recovery"]    { --sg-icon: url(/viewer/textures/statgroup/recovery.png?v=2); }
.section-title[data-group="speed"]       { --sg-icon: url(/viewer/textures/statgroup/speed.png?v=2); }
.section-title[data-group="precision"]   { --sg-icon: url(/viewer/textures/statgroup/precision.png?v=2); }
.section-title[data-group="skills"]      { --sg-icon: url(/viewer/textures/statgroup/skills.png?v=2); }
.section-title[data-group="damage"]      { --sg-icon: url(/viewer/textures/statgroup/damage.png?v=2); }
.section-title[data-group="creatures"]   { --sg-icon: url(/viewer/textures/statgroup/creatures.png?v=2); }
.section-title[data-group="status"]      { --sg-icon: url(/viewer/textures/statgroup/status.png?v=2); }
.section-title[data-group="utility"]     { --sg-icon: url(/viewer/textures/statgroup/utility.png?v=2); }
.section-title[data-group="special"]     { --sg-icon: url(/viewer/textures/statgroup/special.png?v=2); }
/* vitals read like plain stat rows now — no card chrome, just the bars */
.vitals-grid .vital-item, .vital-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
.vital-label { color: var(--hud-ink-dim) !important; }

/* attributes are always plain borderless rows — spending happens on the
   per-row + button, the available count sits as a chip in the section header */
.attribute-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: var(--cur-walk, default) !important;
}
.attribute-item:hover { transform: none !important; }   /* kill base jiggle */

/* available-points chip, right side of the Attributes header */
.section-title .attr-points-chip {
    margin-left: auto;      /* flush right; min air from the title text below */
    padding: 1px 9px;
    font-family: var(--hud-font-head);
    font-size: 15px;
    letter-spacing: .05em;
    text-transform: none;
    color: var(--hud-gold-bright);
    background: rgba(200, 164, 92, 0.10);
    border: 1px solid var(--hud-gold);
    border-radius: 4px;
}

/* per-row spend button */
.attr-plus {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-left: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--hud-gold);
    background: rgba(200, 164, 92, 0.12);
    color: var(--hud-gold-bright);
    font-family: var(--hud-font-head);
    font-size: 19px;
    line-height: 1;
    cursor: var(--cur-point, pointer);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.attr-plus:hover {
    background: rgba(200, 164, 92, 0.28);
    border-color: var(--hud-gold-bright);
    box-shadow: 0 0 10px rgba(200, 164, 92, 0.35);
}
.stat-row { border-bottom: 1px solid rgba(200, 164, 92, 0.12) !important; }
.stat-row:hover { background: rgba(200, 164, 92, 0.05) !important; }
.stat-label { color: var(--hud-ink-dim) !important; }

/* ----------------------------------------------------------------------------
   CHARACTER-PANEL HOVER TOOLTIPS (.stat_tip) — attributes / resistances /
   combat rows. Positioned by positionAbsoluteDiv (position:fixed on hover);
   matches the item/skill tooltip register. Content: client/js/stat_help.js
   ---------------------------------------------------------------------------- */
.stat_tip {
    display: none;
    position: fixed;
    left: 0; top: 0;
    z-index: 2000;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 230px;
    max-width: 340px;
    padding: 14px 16px;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    background-color: rgba(20, 15, 10, 0.98);
    border: 1px solid var(--hud-edge);
    border-radius: 10px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.8), 0 0 24px rgba(200,164,92,0.22),
                inset 0 1px 0 rgba(255,235,190,0.08);
    color: var(--hud-ink);
    font-family: var(--hud-font-body);
    font-size: 15px;
    line-height: 1.4;
}
.attribute-item:hover > .stat_tip,
.resistance-item:hover > .stat_tip,
.vital-item:hover > .stat_tip,
.stat-row:hover > .stat_tip { display: flex; }

.stat_tip_title { font-size: 19px; color: var(--hud-gold-bright) !important; margin-bottom: 2px; }
.stat_tip_blurb { color: var(--hud-ink-dim); font-style: italic; font-family: var(--hud-font-flavor); font-size: 16px; margin-bottom: 4px; }
.stat_tip_head  { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hud-ink-faint); margin: 3px 0 1px; }
.stat_tip_line  { font-size: 15px; }
.stat_tip_muted { color: var(--hud-ink-faint); font-style: italic; font-family: var(--hud-font-flavor); }
.stat_tip_sep   { width: 100%; height: 1px; background: var(--hud-edge); margin: 5px 0 3px; opacity: 0.6; }
.stat-value { color: var(--hud-ink) !important; }
/* hard-capped stat (resist 80, evasion 80) — gold with a soft glow */
.stat-value.capped {
    color: var(--hud-gold-bright) !important;
    text-shadow: 0 0 6px rgba(236, 202, 128, 0.4);
}
/* negative resist / danger — keep red readable over the parchment */
.stat-value.critical { color: #ff5f66 !important; }

/* resistance element wards (cut from textures/resist/, glow mode). Replaces the
   legacy flat color dot. acid has no art yet — keep its colored dot fallback. */
.resistance-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 0 !important;
    margin-right: 10px !important;
    background: var(--rs-icon) center / contain no-repeat !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) saturate(1.55) contrast(1.25) brightness(1.1);
}
/* ?v= busts the image cache after a re-edit (CSS url() can't read JS ICON_VER) — bump on recut/edit. */
.resistance-icon.fire     { --rs-icon: url(/viewer/textures/resist/fire.png?v=2); }
.resistance-icon.cold     { --rs-icon: url(/viewer/textures/resist/cold.png?v=2); }
.resistance-icon.light    { --rs-icon: url(/viewer/textures/resist/light.png?v=2); }
.resistance-icon.poison   { --rs-icon: url(/viewer/textures/resist/poison.png?v=2); }
.resistance-icon.magic    { --rs-icon: url(/viewer/textures/resist/magic.png?v=2); }
.resistance-icon.physical { --rs-icon: url(/viewer/textures/resist/physical.png?v=2); }
.resistance-icon.acid     { --rs-icon: url(/viewer/textures/resist/acid.png?v=2); }
/* value centered in the space right of the ward, not glued to the card edge */
.resistance-item .stat-value { flex: 1 1 auto; min-width: 0 !important; text-align: center !important; }

/* ----------------------------------------------------------------------------
   BREATHING ROOM — the two-column readout was cramped. Loosen row/section
   spacing and let the columns sit wider.
   ---------------------------------------------------------------------------- */
.character-section .stat-row { padding: 7px 2px !important; }
.vital-item { padding: 8px 10px !important; }
/* attribute rows were too tall — tighten; horizontal padding matches stat-rows */
.attribute-item { padding: 4px 2px !important; margin-bottom: 5px !important; }

/* Titles are quiet labels — the icon identifies the group, the value is the
   hero. Dim, lighten weight, shrink the text; values get bigger + brighter. */
.character-section .section-title {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--hud-ink-dim) !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    border-bottom-color: rgba(200, 164, 92, 0.14) !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
}
.character-section .stat-value {  /* size/weight only — keep semantic tier colors */
    font-size: 18px !important;
    font-weight: 700 !important;
}
.character-section .stat-label { font-size: 15px !important; color: var(--hud-ink-dim) !important; }
.character-section .vital-value { font-size: 18px !important; font-weight: 700 !important; }

/* compact vital rows: label + value on one line, bar spanning beneath
   (was stacked over 3 lines). Tone life/mana text to the shared ink, not white. */
.char-pinned .vital-item {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 5px;
    padding: 7px 10px !important;
}
.char-pinned .vital-item .vital-value { text-align: right !important; }
.char-pinned .vital-item .vital-bar { grid-column: 1 / -1; }
.char-pinned .vital-label { color: var(--hud-ink-dim) !important; }
.char-pinned .vital-value { color: var(--hud-ink) !important; }

/* ----------------------------------------------------------------------------
   TWO-COLUMN LAYOUT (proposal A) — pinned core band + masonry flow.
   Markup (play.html): #character > .char-pinned (Vitals · Attributes ·
   Resistances · Current Attack) + .char-flow (the conditional sections).
   Goal: resistances + core always above the fold, no scroll for the common
   build readout.
   ---------------------------------------------------------------------------- */
/* widen the dock so three pinned columns breathe (hero still shows right) */
#character.left-dock { width: min(46vw, 660px) !important; max-width: 46vw !important; }

/* pinned band: three equal cards, always visible at the top */
.char-pinned {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.char-pinned > .character-section {
    margin: 0 !important;
    padding: 13px !important;
    background: rgba(200, 164, 92, 0.05) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 8px !important;
}
/* the sub-grids collapse to a single column inside a narrow pinned card */
.char-pinned .vitals-grid,
.char-pinned .resistance-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
.char-pinned .resistance-item { padding: 5px 8px !important; }

/* Resistances span full width below Vitals + Attributes (2-col pinned), and its
   wards flow as a wide tile grid instead of a tall single column — uses the
   big ward icons well and kills the empty space under Vitals/Attributes. */
.char-pinned { grid-template-columns: 1fr 1fr; }
.char-pinned > .character-section:nth-child(3) { grid-column: 1 / -1; }
.char-pinned > .character-section:nth-child(3) .resistance-grid {
    grid-template-columns: repeat(7, 1fr) !important;  /* all 7 wards on one row */
    gap: 6px !important;
}
/* each ward = vertical tile: icon over label over value (no horizontal overflow) */
.char-pinned > .character-section:nth-child(3) .resistance-item {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 3px !important;
    padding: 8px 4px !important;
}
.char-pinned > .character-section:nth-child(3) .resistance-item > div {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}
.char-pinned > .character-section:nth-child(3) .resistance-icon {
    width: 48px !important;
    height: 48px !important;
    margin-right: 0 !important;
}

/* conditional sections balance across two masonry columns */
.char-flow {
    column-count: 2;
    column-gap: 24px;
}
.char-flow > .character-section {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 20px !important;
    display: inline-block;   /* avoids multicol top-margin/box clipping quirks */
    width: 100%;
}

/* Current Attack — full-width appendix at the panel bottom. The skill name
   and each damage group (weapon / spell / explosion) flow as columns across
   the strip instead of stacking. */
.attack-appendix { margin-top: 4px; }
.attack-appendix .attack-section {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 40px;
}
.attack-appendix .attack-skill {
    flex: 0 0 auto;
    min-width: 130px;
    margin-bottom: 0 !important;
}
.attack-appendix .attack-section > div:not(.attack-skill) { flex: 0 0 auto; }

@media (max-width: 1100px) {
    #character.left-dock { width: min(56vw, 560px) !important; max-width: 56vw !important; }
    .char-pinned { grid-template-columns: 1fr 1fr; }
}

/* Current Attack card — remap the legacy tooltip register (orange prefixes,
   green [range] brackets, centered name) to the panel's gold/parchment look.
   Scoped to .attack-section so item/skill tooltips keep their own styling.
   Elemental damage colors (colorfire, colorpoison, …) stay — they're semantic. */
.attack-section {
    background: rgba(200, 164, 92, 0.05) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 1.55;
}
.attack-skill {
    font-family: var(--hud-font-head) !important;
    font-size: 18px !important;
    text-align: left !important;
    margin-bottom: 8px !important;
    letter-spacing: .03em;
}
/* WEAPON / SPELL / EXPLOSION prefixes → quiet sub-labels, same voice as the
   section titles */
.attack-section .damage_effect_prefix {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--hud-ink-dim) !important;
    letter-spacing: .14em !important;
    border-bottom: 1px solid rgba(200, 164, 92, 0.14);
    padding-bottom: 3px;
    margin: 10px 0 6px !important;
}
.attack-section .range_text {
    color: var(--hud-ink-faint) !important;
    font-size: 13px !important;
}

/* elemental damage bonuses pack into two columns */
.dmg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
}

/* ============================================================================
   BOTTOM HUD — life + mana bars centered; thinner/wider XP bar beneath them;
   skill slots as a vertical column bottom-right.
   #hud_dock holds .hud-bar-group.{hud-life,hud-mana} side by side; #active_skills
   is a fixed bottom-right column. Includes the click-to-assign skill selector.
   ============================================================================ */

/* Flask charge badge (healing.md charge rework) — pool count on the
   drink-flask slot. Top-left: bottom-right is the shortcut key's corner, the
   other corners are hover-only controls (badge fades on hover so the
   move-arrows stay readable). Crimson accent = the healing family. */
.skill-slot .slot-charges {
    position: absolute; left: 2px; top: 2px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    border: 1px solid rgba(120,60,45,0.8);
    background: rgba(24,10,10,0.88);
    color: #e8a58a; font-size: 11px; font-weight: 700; line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
}
.skill-slot .slot-charges.depleted {
    color: #6d5a52;
    border-color: rgba(90,70,60,0.5);
}
.skill-slot:hover .slot-charges { opacity: 0.15; transition: opacity .12s; }

#hud_dock {
    position: fixed !important;
    left: 50%; bottom: 58px;          /* frame bottoms overlap the XP frame's top rail slightly */
    transform: translateX(-50%);
    /* gap each side of the center flask belt clears the frame caps (~43px overhang each) */
    display: flex; align-items: flex-end; gap: 50px;
    z-index: 9;
    pointer-events: none;            /* children re-enable */
}
#hud_dock > * { pointer-events: auto; }

/* --- life / mana bars --- */
.hud-bar-group { display: flex; flex-direction: column; justify-content: flex-end; }
#hud_dock .bar {
    position: relative !important;
    /* The bar GRAPHIC (track + liquid fill + gloss + rim) is painted by a WebGL
       fragment shader (dungeon/hud_bars.js) into this box's screen rect. This
       DOM element is just the layout anchor; the painted gold frame
       (textures/hud/bar-frame.png) overlays it via ::before. Background is
       transparent so the shader canvas (z 7, beneath the dock) shows through.
       The numeric value (.bar-text) stays DOM so it's crisp + Vue-reactive.
       SIZE IS FIXED: the box is the frame art's inner channel (1394×147 src)
       at uniform scale s = 40/147 — resizing needs both width AND the ::before
       geometry recomputed together. */
    width: 379px !important;
    height: 40px !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin: 0 !important;
    opacity: 1 !important;
}
/* Painted frame overlay. Frame art is 1710×325 with the empty channel at
   x[158..1551] y[92..238]; at s=0.2721 the channel lands exactly on the box. */
#hud_dock .bar::before {
    content: '' !important;
    position: absolute !important;
    left: -43px !important; top: -25px !important; right: auto !important;
    width: 465.3px !important; height: 88.4px !important;
    background: url(/viewer/textures/hud/bar-frame.png) center / 100% 100% no-repeat !important;
    border-radius: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
/* DOM fill / gloss / empty layers are replaced by the shader. */
#hud_dock .bar::after,
#hud_dock .bar-fill,
#hud_dock .bar-empty { display: none !important; }
#hud_dock .bar-text {
    position: absolute !important; inset: 0 !important;
    transform: none !important;          /* override legacy translate(-50%,-50%) that clipped it */
    display: flex !important; align-items: center !important; justify-content: center !important;
    line-height: 1 !important;
    font-family: var(--hud-font-head) !important;
    font-size: 17px !important; font-weight: 700 !important; letter-spacing: .04em;
    color: #fff !important;
    /* dark outline on every side so the value reads over the bright fill */
    text-shadow:
        0 0 2px rgba(0,0,0,0.95),
        1px 1px 0 rgba(0,0,0,0.9), -1px 1px 0 rgba(0,0,0,0.9),
        1px -1px 0 rgba(0,0,0,0.9), -1px -1px 0 rgba(0,0,0,0.9) !important;
    z-index: 3 !important;
}

/* --- skill bar (vertical column, bottom-right) --- */
#active_skills {
    position: fixed !important;
    bottom: 18px !important; right: 18px !important;
    left: auto !important; top: auto !important;
    margin: 0 !important; padding: 0 !important;
    max-height: none !important; min-width: 0 !important;
    background: none !important; border: none !important;
    box-shadow: none !important; backdrop-filter: none !important;
    opacity: 1 !important; border-radius: 0 !important;
    z-index: 9;
}
#active_skills::before { display: none !important; }   /* kill legacy blue bar */

.skillbar {
    display: flex;
    flex-flow: column wrap-reverse;   /* overflow spills into a new column to the LEFT */
    align-items: flex-start;          /* keep slots flush against the right edge */
    align-content: flex-start;
    gap: 8px;
    /* stop the column short of the minimap (top-right, top:60 + its height)
       plus a CONSTANT 216px band for ~3 quest-tracker cards — constant on
       purpose: slot positions must never shift when quest cards come and go
       (muscle memory). The tracker yields instead: it grows only into the
       space the actual bar leaves (--skillbar-reserve) and scrolls beyond.
       Extra slots wrap into a new column to the left. Floor of one slot so a
       degenerate small viewport never hides the bar entirely. The 0.5 ×
       screen ceiling keeps the bar to the rail's lower half, so the quest gap
       stays readable (2-3 cards) instead of the one-card sliver it was.
       --uivh (ui.js applyUiScale) = real viewport height in pre-zoom px —
       raw 100vh here renders ×uiz and overshoots the screen. */
    max-height: max(76px, min(calc(0.5 * var(--uivh, 100vh)), calc(var(--uivh, 100vh) - 306px - max(12vh, 12vw, 140px))));
}
.skill-slot {
    position: relative;
    width: 68px; height: 68px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4px;
    border-radius: 5px;
    border: 1px solid var(--hud-gold-deep);
    background: linear-gradient(180deg, rgba(40,31,19,0.95), rgba(22,16,10,0.97));
    box-shadow: inset 0 1px 0 rgba(255,235,190,0.08), 0 4px 12px rgba(0,0,0,0.5);
    cursor: var(--cur-point, pointer); overflow: hidden;
    transition: border-color .15s;
}
.skill-slot:hover { border-color: var(--hud-gold); }
.skill-slot > .skillbar-skill-tooltip {
    position: absolute;
    inset: 0;
    font-size: 18px !important;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    z-index: 1;
}
.skill-slot:hover > .skillbar-skill-tooltip .skill_description { display: flex; }
.skill-slot > .slot-key,
.skill-slot > .slot-move,
.skill-slot > .slot-edit,
.skill-slot > .slot-remove,
.skill-slot > .rebind-overlay { z-index: 2; }
.skill-slot .slot-name {
    font-family: var(--hud-font-head);
    font-size: 9.5px; line-height: 1.05; text-align: center;
    letter-spacing: .02em;
    color: var(--cat, var(--hud-ink));
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.skill-slot .slot-icon {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transform: scale(1.18);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.75));
    pointer-events: none;
}
/* shortcut key — bottom-right, always visible; hoverable like the other
   micro-buttons (tooltip advertises right-click-to-rebind) */
.skill-slot .slot-key {
    position: absolute; bottom: 2px; right: 4px;
    font-family: var(--hud-font-head); font-size: 11px; font-weight: 600;
    color: var(--hud-gold-bright);
    text-shadow: 0 1px 2px #000;
    cursor: var(--cur-point, pointer);
    transition: color .12s, transform .1s;
}
.skill-slot .slot-key:hover { color: #fff3d0; transform: scale(1.2); }
/* "Space" spelled out (the literal key, and the rmb slot when Space mirrors
   it) — narrower type so the word fits the corner single-char keycaps use */
.skill-slot .slot-key.slot-key-space { font-size: 9px !important; letter-spacing: -.02em; }
/* rmb slot on a no-right-click machine whose Space mirror is shadowed by a
   skill bound to the literal " " key — nothing can trigger it */
.skill-slot .slot-key.dead_key { color: #d8584a; opacity: .8; }

/* Companion panel — top-left below the #menu bar (D2 hireling position).
   Merc row first (medallion + one life bar), then one row per living summon
   species: skill medallion, ×N when grouped (>4), green ally life bars
   (matches the minimap's summon color family; the hero's own bar stays red).
   Fed by dungeon.js: merc_life_percent per tick, summon_groups every 200 ms. */
#companions {
    position: fixed; left: 22px; top: 92px;
    display: flex; flex-direction: column; gap: 3px;
    z-index: 29;
}
.comp-row { position: relative; display: flex; align-items: center; gap: 7px; }
.comp-icon {
    width: 52px; height: 52px; flex: 0 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.comp-label {
    font-family: var(--hud-font-head); font-size: 11px; line-height: 1.1;
    max-width: 74px; color: var(--hud-ink); text-shadow: 0 1px 2px #000;
}
.comp-count {
    flex: 0 0 auto;
    font-family: var(--hud-font-head); font-size: 13px; font-weight: 600;
    color: var(--hud-gold-bright); text-shadow: 0 1px 2px #000;
}
.comp-bars { display: flex; flex-direction: column; gap: 3px; width: 72px; }
.comp-bar {
    height: 6px; border-radius: 2px;
    background: rgba(0,0,0,0.55);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
    overflow: hidden;
}
.comp-bar-fill {
    height: 100%;
    background: linear-gradient(180deg, #5fa85e, #2e6b33);
    transition: width .18s linear;
}
.comp-row.comp_dead .comp-icon,
.comp-row.comp_dead .comp-label { filter: grayscale(1) brightness(0.55); }
.comp-row .comp-dead-mark {
    position: absolute; left: 0; width: 52px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #d8d2c4; text-shadow: 0 1px 3px #000;
    pointer-events: none;
}
.skill-slot .slot-key .rmb-icon {
    display: block; width: 10px; height: 14px;
    filter: drop-shadow(0 1px 1px #000);
}
.skill-slot .cooldown {
    position: absolute; left: 0; bottom: 0; height: 100%;
    background: rgba(8,6,4,0.72);
    pointer-events: none;
}
.skill-slot.cooldown_skill .slot-icon,
.skill-slot.cooldown_skill .slot-name { filter: grayscale(0.4) brightness(0.8); }
/* Not enough mana: colder + dimmer than cooldown (blue-shifted) so the two
   unavailable states read differently at a glance. */
.skill-slot.oom_skill .slot-icon,
.skill-slot.oom_skill .slot-name {
    filter: grayscale(0.75) brightness(0.55) hue-rotate(30deg);
}
/* Weapon-locked skill (wrong weapon family / melee-vs-ranged): fully desaturated
   and flat — reads as "not available at all", vs cooldown/oom which are temporary. */
.skill-slot.unusable_skill .slot-icon,
.skill-slot.unusable_skill .slot-name {
    filter: grayscale(1) brightness(0.45) contrast(0.8);
}
.skill-slot.unusable_skill { opacity: 0.72; }
/* One-shot pulse on the mana bar when a cast is refused for lack of mana.
   Finite anim, transform/opacity only. */
.bar.mana-bar.oom_pulse .bar-fill,
.bar.mana-bar.oom_pulse .bar-empty { animation: mana-oom-pulse 0.42s ease-out 2; }
@keyframes mana-oom-pulse {
    0%   { opacity: 1; }
    35%  { opacity: 0.35; }
    100% { opacity: 1; }
}
/* One-shot flash on the single attempted slot when an attack is refused in
   town — no persistent disabled style. Finite, transform/opacity only. */
.skill-slot.town_block_flash { animation: town-block-flash 0.42s ease-out 2; }
@keyframes town-block-flash {
    0%   { opacity: 1; transform: none; }
    35%  { opacity: 0.35; transform: translateY(-2px); }
    100% { opacity: 1; transform: none; }
}
.skill-slot .buffduration {
    position: absolute; left: 0; bottom: 0; height: 3px;
    background: var(--hud-gold-bright);
}
/* Add-slot is a control, not a skill cell — collapse it to a slim full-width
   strip under the column so it doesn't read as an (empty) skill slot. */
.skill-slot.add-slot {
    box-sizing: border-box;         /* match the real slots' 70px outer width */
    width: 78px; height: 22px; padding: 0;
    font-family: var(--hud-font-head); font-size: 22px; font-weight: 400; line-height: 20px;
    color: var(--hud-ink-faint);
    border-style: dashed;
    background: rgba(20,15,10,0.7);
}
.skill-slot.add-slot:hover { color: var(--hud-gold-bright); border-color: var(--hud-gold); transform: none; box-shadow: 0 0 10px rgba(200,164,92,0.3); }
/* Keyless slot (added past the auto-key pool) — dim key badge so it reads as
   "right-click me to bind a key" rather than a broken slot. */
.skill-slot.unbound_slot .slot-key { color: var(--hud-ink-faint); }

/* --- assign selector popover --- */
.skill-selector-backdrop { position: fixed; inset: 0; z-index: 40; }
.skill-selector {
    position: fixed; right: 90px; bottom: 18px; left: auto;
    transform: none;
    z-index: 41;
    width: min(560px, 80vw); max-height: 82vh; overflow-y: auto;
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px solid var(--hud-edge);
    background: var(--hud-panel);
    box-shadow: var(--hud-shadow);
    backdrop-filter: blur(3px);
    scrollbar-width: thin;
    scrollbar-color: rgba(60,45,26,0.9) transparent;
}
.skill-selector::-webkit-scrollbar { width: 8px; }
.skill-selector::-webkit-scrollbar-track { background: transparent; }
.skill-selector::-webkit-scrollbar-thumb {
    background: rgba(45,34,20,0.9);
    border-radius: 4px;
    border: 1px solid rgba(20,15,10,0.9);
}
.skill-selector::-webkit-scrollbar-thumb:hover { background: rgba(70,52,30,0.95); }
.skill-selector-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--hud-edge);
    font-family: var(--hud-font-head); color: var(--hud-gold-bright);
    font-size: 16px; letter-spacing: .05em;
}
/* .skill-selector-close skin: CLOSE BUTTONS section at EOF */
.skill-selector-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-option {
    position: relative;
    min-width: 150px; flex: 1 1 150px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--hud-gold-deep);
    background: rgba(20,15,10,0.7);
    cursor: var(--cur-point, pointer);
    font-family: var(--hud-font-head); font-size: 13px;
    color: var(--cat, var(--hud-ink));
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    transition: border-color .15s, box-shadow .2s, background .15s;
}
.skill-option-icon {
    width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.skill-option-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.skill-option:hover { border-color: var(--hud-gold); box-shadow: 0 0 12px rgba(200,164,92,0.35); background: rgba(200,164,92,0.1); }
.skill-option.bound { border-color: var(--hud-gold); }
.skill-option-key {
    font-size: 11px; font-weight: 700; color: #1a130a;
    background: var(--hud-gold-bright);
    border-radius: 3px; padding: 1px 6px; min-width: 18px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
}
.skill-option-key .rmb-icon {
    display: block; width: 10px; height: 14px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
.skill-option.clear-option, .skill-option.remove-option {
    color: var(--hud-ink-faint); justify-content: center; font-style: italic;
    border-style: dashed; flex-basis: 100%;
    padding: 9px 12px;
}
.skill-option.clear-option:hover, .skill-option.remove-option:hover { color: #d8584a; border-color: #b5403a; background: rgba(181,64,58,0.1); }

/* --- XP under the dock --- */
#bars {
    position: fixed !important;
    left: 50% !important; bottom: 16px !important; top: auto !important;
    transform: translateX(-50%) !important;
    width: clamp(360px, 46vw, 720px) !important;
    display: block !important; margin: 0 !important;
    z-index: 8;
}
/* XP fill + 10% notch separators are painted by the shader (hud_bars.js).
   This box anchors the rect; the painted slim gold frame overlays it in two
   layers so the width stays responsive: ::after = the two ornate end caps
   (fixed size), ::before = the straight riveted rail strip tiling between
   them. Slim frame art is 1687×108, channel x[77..1610] y[28..77]; box height
   16px → s = 16/50 = 0.32 (frame 34.6px tall, overhang 9px above / 9.9px
   below; caps 170px src → 54.4px display). No text — the fill + shader-drawn
   10% separators are the whole read. */
#experience {
    position: relative !important;
    height: 16px !important; width: 100% !important; margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
#experience::before {
    content: '' !important;
    position: absolute !important;
    left: 29px !important; right: 29px !important;
    top: -9px !important; bottom: auto !important; height: 34.6px !important;
    background: url(/viewer/textures/hud/bar-frame-slim-mid.png) left center / auto 100% !important;
    background-repeat: round no-repeat !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    animation: none !important;
}
#experience::after {
    content: '' !important;
    position: absolute !important;
    left: -24.6px !important; right: -24.6px !important;
    top: -9px !important; height: 34.6px !important;
    background:
        url(/viewer/textures/hud/bar-frame-slim-l.png) left center / auto 100% no-repeat,
        url(/viewer/textures/hud/bar-frame-slim-r.png) right center / auto 100% no-repeat !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
#experience .experience-empty,
#experience .experience-text { display: none !important; }   /* replaced by shader; no text */

/* --- top-left menu buttons → painterly tabs --- */
#menu .game_button {
    font-family: var(--hud-font-head) !important;
    color: var(--hud-ink-dim) !important;
    background: var(--hud-panel-flat) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 4px !important;
    box-shadow: var(--hud-shadow) !important;
    letter-spacing: .05em;
    transition: color .15s, border-color .15s, box-shadow .2s !important;
}
#menu .game_button:hover {
    color: var(--hud-gold-bright) !important;
    border-color: var(--hud-gold) !important;
    box-shadow: 0 0 14px rgba(200,164,92,0.3) !important;
}
/* kill the legacy blue 2px top-accent bar (game.css .game_button::before) that
   flashes on hover and clashes with the gold theme */
#menu .game_button::before { display: none !important; }
/* active window marker (option A): gold underline + lit label/icon, no frame change */
#menu .game_button { position: relative !important; }
#menu .game_button.active { color: var(--hud-gold-bright) !important; }
#menu .game_button.active::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hud-gold-bright), transparent);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(200, 164, 92, 0.7);
}
#menu .game_button.active .game_button_icon {
    filter: brightness(1.6) contrast(1.3) saturate(1.25)
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 6px rgba(220, 180, 100, 0.55));
    transform: scale(1.22);
}
/* gold glyph + label */
#menu .game_button { gap: 7px !important; padding: 7px 13px !important; }
/* fullscreen: icon-only square at the end of the bar */
#game_button_fullscreen { padding: 7px 9px !important; }
#game_button_fullscreen svg { width: 28px; height: 28px; padding: 3px; box-sizing: border-box; display: block; }

/* ---- collapsed menu bar: icon-only squares + hotkey chip. Applied once the
   player has opened every core window (preview: ?collapsed=1). ---- */
#menu.collapsed .game_button { padding: 8px 10px !important; }
/* hide the text label (a bare <div>); icon, rebind overlay, chip/dot stay */
#menu.collapsed .game_button > div:not(.game_button_icon):not(.rebind-overlay) { display: none; }
/* icons read larger than the labeled bar's 28px — they carry alone here */
#menu.collapsed .game_button .game_button_icon { width: 36px; height: 36px; }
#menu.collapsed #game_button_fullscreen svg { width: 36px; height: 36px; padding: 5px; }
/* hotkey chip riding the bottom-right corner of the square */
.menu-keycap {
    position: absolute;
    bottom: -6px; right: -6px;
    font-size: 9px;
    padding: 2px 4px;
    z-index: 3;
}
/* narrow button → tighter active underline than the label-width default */
#menu.collapsed .game_button.active::after { left: 6px; right: 6px; }
/* secondary line under an option label */
.option-note {
    display: block;
    font-size: 10px;
    letter-spacing: .02em;
    color: var(--hud-ink-dim);
    opacity: .75;
    margin-top: 2px;
}
#menu .game_button .game_button_icon {
    width: 28px; height: 28px;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 1;
    filter: brightness(1.35) contrast(1.25) saturate(1.2)
            drop-shadow(0 1px 2px rgba(0,0,0,0.8))
            drop-shadow(0 0 4px rgba(220,180,100,0.35));
    transform: scale(1.15);
    transition: transform .15s, filter .15s;
}
#menu .game_button:hover .game_button_icon {
    transform: scale(1.25);
    filter: brightness(1.6) contrast(1.3) saturate(1.25)
            drop-shadow(0 1px 2px rgba(0,0,0,0.8))
            drop-shadow(0 0 8px rgba(230,195,110,0.65));
}

/* --- skill-slot states: empty / edit affordance / key-rebind ------------- */
.skill-slot.empty_slot {
    border-style: dashed;
    border-color: var(--hud-gold-deep);
    background: rgba(18, 13, 8, 0.7);
}
.skill-slot .slot-empty {
    font-family: var(--hud-font-head); font-size: 22px; font-weight: 300;
    color: var(--hud-ink-faint);
    line-height: 1;
}
.skill-slot.empty_slot:hover .slot-empty { color: var(--hud-gold-bright); }

/* ⚙ change/clear — bottom-left, revealed on hover */
.skill-slot .slot-edit {
    position: absolute; left: 3px; bottom: 2px;
    font-size: 18px; line-height: 1;
    color: var(--hud-ink-faint);
    opacity: 0; cursor: var(--cur-point, pointer);
    transition: opacity .12s, color .12s;
}
.skill-slot:hover .slot-edit { opacity: 1; }
.skill-slot .slot-edit:hover { color: var(--hud-gold-bright); }

/* × remove-slot — top-right, revealed on hover (shortcut key owns bottom-right) */
.skill-slot .slot-remove {
    position: absolute; right: 4px; top: 0;
    font-size: 28px; line-height: 1;
    color: var(--hud-ink-faint);
    opacity: 0; cursor: var(--cur-point, pointer);
    transition: opacity .12s, color .12s;
}
.skill-slot:hover .slot-remove { opacity: 1; }
.skill-slot .slot-remove:hover { color: #d8584a; }

/* − unlearn, top-right of a learned tree node. Only rendered when the
   "no right mouse button" option is on (right-click is the normal path). */
/* graph nodes are already `position: absolute` (game.css) — only the static
   utility cards and the talent <td>s need a containing block. */
.skill_node_util, .talent-cell { position: relative; }
.node-unlearn {
    position: absolute; right: 2px; top: -2px; z-index: 3;
    font-family: var(--hud-font-head); font-size: 20px; line-height: 1;
    color: var(--hud-ink-faint);
    opacity: 0; cursor: var(--cur-point, pointer);
    transition: opacity .12s, color .12s;
}
.skill_node:hover .node-unlearn,
.talent-cell:hover .node-unlearn { opacity: 1; }
.node-unlearn:hover { color: #d8584a; }

/* right-click rebind prompt, fills the slot */
.skill-slot .rebind-overlay,
#menu .game_button .rebind-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 3px;
    font-family: var(--hud-font-head); font-size: 9px; letter-spacing: .03em;
    color: var(--hud-gold-bright);
    background: rgba(10, 7, 4, 0.92);
    border-radius: 4px;
    animation: rebindPulse 1s ease-in-out infinite;
}
@keyframes rebindPulse { 0%,100%{ opacity: .75; } 50%{ opacity: 1; } }

/* ▲▼ move buttons — top-left, revealed on hover. Body of the slot drags. */
.skill-slot .slot-move {
    position: absolute; left: 3px; top: 2px;
    display: flex; flex-direction: column; gap: 2px; line-height: .85;
    opacity: 0; transition: opacity .12s;
    z-index: 3; user-select: none;
}
.skill-slot:hover .slot-move { opacity: .92; }
.skill-slot .slot-move span {
    font-size: 15px; width: 18px; height: 15px;
    display: flex; align-items: center; justify-content: center;
    color: var(--hud-ink-faint);
    text-shadow: 0 1px 2px #000;
    cursor: var(--cur-point, pointer); transition: color .1s, transform .1s;
}
.skill-slot .slot-move span:hover { color: var(--hud-gold-bright); transform: scale(1.25); }
.skill-slot { cursor: var(--cur-grab, grab); }
/* Item picked up onto the cursor (the floating .hand div is pointer-events:
   none, so the cursor rule has to live on body while it exists). */
body:has(.item.hand) { cursor: var(--cur-grab, grab); }
.skill-slot:active { cursor: var(--cur-grab, grabbing); }
.skill-slot.dragging { opacity: .4; }

/* insertion line — where the dragged slot will land (between two slots) */
.skill-slot .drop-line {
    position: absolute; left: 1px; right: 1px; height: 3px;
    background: linear-gradient(90deg, transparent, var(--hud-gold-bright) 20%, var(--hud-gold-bright) 80%, transparent);
    box-shadow: 0 0 6px var(--hud-gold-bright);
    border-radius: 2px; pointer-events: none; z-index: 5;
}
.skill-slot .drop-line.before { top: 0; }
.skill-slot .drop-line.after { bottom: 0; }

/* ============================================================================
   BLUE/GREEN ACCENT → GOLD REMAP (screens I own).
   The new panels ship the legacy SaaS-blue (#4a9eff / rgba(74,158,255,*)) often
   paired with a teal-green (rgba(125,237,159,*)). Remap both to gold for the
   panels/screens. Left alone: semantic mana(blue)/cold(blue)/poison(green),
   and the bottom skill-bar / action-buttons / shortcut menu (other agent).
   Each rule mirrors the legacy selector so it wins on equal specificity.
   ============================================================================ */

/* shared gold accent line for ::before top-bars */
#character::before, #inventory_conteneur::before, #inventory::before,
#equipment::before, #options::before, #waypoints::before,
#minimap_container::before {
    background: linear-gradient(90deg, var(--hud-gold), var(--hud-gold-bright), var(--hud-gold)) !important;
}
/* the 4px gold top bar must sit ABOVE the sticky .dock-header (z 5) so it
   isn't clipped by the header's background */
#character::before, #quests::before, #options::before { z-index: 6 !important; }

/* ---- Character: self/merc toggle states ---- */
.self_or_merc_button:hover {
    background: rgba(200, 164, 92, 0.10) !important;
    border-color: var(--hud-gold) !important;
    color: var(--hud-gold-bright) !important;
}
.self_or_merc_button_active {
    box-shadow: 0 4px 12px rgba(200, 164, 92, 0.3), inset 0 1px 0 rgba(255, 240, 200, 0.2) !important;
}

/* ---- Options panel: engraved section heads, parchment option rows, gold
   controls. Legacy ships teal-green/blue on slate throughout. ---- */
.section-header {
    font-family: var(--hud-font-head) !important;
    font-size: 17px !important;
    color: var(--hud-gold-bright) !important;
    text-transform: none !important;
    letter-spacing: .05em !important;
    background: linear-gradient(180deg, rgba(34, 26, 17, 0.9), rgba(22, 16, 10, 0.85)) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 6px !important;
}
.section-header::before { content: none !important; }   /* no left accent bar */
.option-line {
    background: rgba(200, 164, 92, 0.04) !important;
    border: 1px solid rgba(200, 164, 92, 0.14) !important;
    border-radius: 6px !important;
}
.option-line:hover {
    background: linear-gradient(145deg, rgba(200,164,92,0.10), rgba(200,164,92,0.05)) !important;
    border-color: var(--hud-gold) !important;
    transform: none !important;      /* kill the game.css translateX slide */
    box-shadow: none !important;
}
.option-label { color: var(--hud-ink) !important; font-size: 16px !important; }
/* secondary line under an option label — what the toggle actually changes */
.option-label .option-hint {
    display: block;
    color: var(--hud-ink-faint);
    font-size: 12px !important;
    font-style: italic;
    margin-top: 1px;
}
/* UI-scale readout doubles as the reset-to-auto button once it deviates */
.option-value-reset { cursor: var(--cur-point, pointer); text-decoration: underline dotted; }
.option-value {
    color: var(--hud-gold) !important;
    font-family: var(--hud-font-head) !important;
    font-size: 14px !important;
}
/* toggle: umber track, parchment knob (border stays 2px — knob geometry) */
.custom-checkbox {
    background: rgba(12, 9, 6, 0.85) !important;
    border-color: var(--hud-gold-deep) !important;
}
.custom-checkbox::before { background: var(--hud-ink-dim) !important; }
.custom-checkbox.checked {
    background: linear-gradient(135deg, var(--hud-gold-bright), var(--hud-gold)) !important;
    border-color: var(--hud-gold) !important;
    box-shadow: 0 0 12px rgba(200, 164, 92, 0.35) !important;
}
.custom-checkbox.checked::before { background: #fff6e0 !important; }
/* slider: umber track, gold thumb */
.custom-range {
    background: rgba(12, 9, 6, 0.9) !important;
    border: 1px solid rgba(200, 164, 92, 0.18) !important;
}
.custom-range::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--hud-gold-bright), var(--hud-gold)) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 12px rgba(200,164,92,0.45) !important;
}
.custom-range::-webkit-slider-thumb:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 20px rgba(200,164,92,0.6) !important;
}
.custom-range::-moz-range-thumb {
    background: linear-gradient(135deg, var(--hud-gold-bright), var(--hud-gold)) !important;
}
/* footer strip holding Apply & Close (button itself styled further down) */
#options .modal-actions {
    background: rgba(12, 9, 6, 0.5) !important;
    border-top: 1px solid var(--hud-edge) !important;
}

/* ---- Keybindings (options section) — engraved keycap chips; click to
   rebind (kb-key.listening while capturing). Shadowed = a skill shortcut
   owns the same key and wins at dispatch. ---- */
.kb-key {
    min-width: 46px;
    text-align: center;
    font-family: var(--hud-font-head);
    font-size: 13px; line-height: 1;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--hud-ink);
    background: rgba(10, 8, 5, 0.75);
    border: 1px solid var(--hud-edge);
    border-bottom-width: 2px;          /* keycap read: thicker lower edge */
    border-radius: 6px;
    padding: 6px 10px;
    cursor: var(--cur-point, pointer);
    user-select: none;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.kb-key:hover {
    background: rgba(200, 164, 92, 0.10);
    border-color: var(--hud-gold);
    box-shadow: 0 0 8px rgba(200, 164, 92, 0.25);
}
.kb-key.listening {
    color: var(--hud-gold-bright);
    border-color: var(--hud-gold-bright);
    background: rgba(200, 164, 92, 0.12);
    box-shadow: 0 0 10px rgba(236, 202, 128, 0.4), inset 0 0 8px rgba(200, 164, 92, 0.15);
    text-transform: none; letter-spacing: .3px;   /* "press a key…" reads as prose */
}
.kb-key.shadowed { color: var(--hud-ink-faint); text-decoration: line-through; }
.kb-conflict {
    margin-left: 10px;
    font-family: var(--hud-font-body);
    font-size: 12px; letter-spacing: .3px;
    color: #cf7a52;                     /* ember warning — matches HUD danger reds */
    border: 1px solid rgba(207, 122, 82, 0.35);
    border-radius: 10px;
    padding: 2px 8px;
    vertical-align: 2px;
}
.kb-hint {
    padding: 8px 4px 2px;
    font-size: 13px; line-height: 1.45;
    color: var(--hud-ink-faint);
}
.kb-reset-row { padding: 10px 0 2px; }
.kb-reset-row .action-button { width: auto; padding: 8px 18px; }

/* ---- Menu-hotkey keycap in panel title bars (overlay .ov-title-wrap +
   dock .dock-header) — shows the panel's toggle key while it's open; hidden
   entirely when a skill shortcut owns the key (skills win at dispatch). ---- */
.hud-keycap {
    font-family: var(--hud-font-head);
    font-size: 11px; line-height: 1;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--hud-ink-dim);
    background: rgba(10, 8, 5, 0.9);
    border: 1px solid var(--hud-edge);
    border-bottom-width: 2px;          /* keycap read: thicker lower edge */
    border-radius: 4px;
    padding: 3px 6px;
    pointer-events: none;
    flex: 0 0 auto;
}
.dock-header .hud-keycap { margin-left: 2px; }

/* ---- Quests / Waypoints ---- */
.waypoint_tab:hover {
    color: var(--hud-gold-bright) !important;
    background: rgba(200, 164, 92, 0.10) !important;
    border-color: transparent !important;
    transform: none !important;
}
/* the modal shell itself — legacy game.css ships it slate-blue */
#waypoints {
    background: var(--hud-panel) !important;
    background-color: rgba(20, 15, 10, 0.96) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 10px !important;
    box-shadow: var(--hud-shadow) !important;
    color: var(--hud-ink) !important;
}
#waypoints::before { border-radius: 10px 10px 0 0 !important; }
/* map rows — parchment card like .quest-item, engraved zone names */
.waypoint {
    font-family: var(--hud-font-head) !important;
    letter-spacing: .04em !important;
    color: var(--hud-ink) !important;
    background: rgba(200, 164, 92, 0.05) !important;
    border: 1px solid rgba(200, 164, 92, 0.18) !important;
    border-radius: 6px !important;
}
.waypoint:hover {
    color: var(--hud-gold-bright) !important;
    background: linear-gradient(145deg, rgba(200,164,92,0.15), rgba(160,128,64,0.2)) !important;
    border-color: var(--hud-gold) !important;
    box-shadow: 0 4px 16px rgba(200,164,92,0.2), inset 0 1px 0 rgba(255,240,200,0.1) !important;
}
/* no left accent bar, no hover slide — hover reads as fill + edge glow only */
.waypoint::before, .waypoint:hover::before { content: none !important; }
.waypoint:hover, .waypoint:active { transform: none !important; }
.waypoint:active { box-shadow: 0 2px 8px rgba(200,164,92,0.3), inset 0 2px 4px rgba(0,0,0,0.2) !important; }
/* breathing room — legacy padding rules targeted a class that doesn't exist */
.waypoint_list {
    padding: 14px 16px !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.waypoint_list > div { display: contents; }
.waypoint.waypoint_close {
    margin: 0 16px 14px !important;
    color: var(--hud-ink-dim) !important;
}
/* inline status line (layout C) — strip the game.css pill/badge entirely */
.quest-status {
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    animation: none !important;
}
.quest-status::before { content: none !important; }
.quest-status.active    { color: var(--hud-gold) !important; opacity: 0.85; }
.quest-status.completed { color: #7bd39a !important; opacity: 0.9; }
.quest-status.reward {
    color: var(--hud-gold-bright) !important;
    /* static shadow + opacity-only pulse — infinite loops must not animate
       text-shadow (per-frame repaint forever; see lobby fix 4542dcf) */
    text-shadow: 0 0 11px rgba(255, 220, 140, 0.55);
    animation: questRewardPulse 1.8s ease-in-out infinite !important;
}
@keyframes questRewardPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* ---- Minimap frame ---- */
#minimap_container {
    background: var(--hud-panel) !important;
    background-color: rgba(20, 15, 10, 0.96) !important;
    border: 1px solid var(--hud-edge) !important;
    box-shadow: var(--hud-shadow) !important;
}
#minimap_container:hover {
    border-color: var(--hud-gold) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 20px rgba(200,164,92,0.3), inset 0 1px 0 rgba(255,240,200,0.15) !important;
}
.large_minimap {
    border: 3px solid var(--hud-gold) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(200,164,92,0.4), inset 0 2px 0 rgba(255,240,200,0.2) !important;
    /* nudge below the top menu bar (was centered at 50vh → top edge under the bar) */
    top: 54vh !important;
    width: min(84vh, 90vw) !important;
    height: min(84vh, 90vw) !important;
}

/* ---- minimap titles: zone name (above) + game name (below) ---- */
#map_name {
    background: var(--hud-panel) !important;
    background-color: rgba(20, 15, 10, 0.96) !important;
    border: 1px solid var(--hud-edge) !important;
    box-shadow: var(--hud-shadow) !important;
    color: var(--hud-gold-bright) !important;
    font-family: var(--hud-font-head) !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}
/* second line of the plate: which game you're in — quieter than the zone */
#map_name .map_game {
    margin-top: 2px;
    color: var(--hud-ink-dim);
    font-family: var(--hud-font-head);
    font-weight: 400;
    font-size: .85em;
    letter-spacing: .06em;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- in-world map name / connexion labels ---- */
#map_name::before {
    background: linear-gradient(90deg, transparent, rgba(200,164,92,0.6), transparent) !important;
}
.connexion {
    background: rgba(200, 164, 92, 0.22) !important;
    border: 2px solid rgba(200, 164, 92, 0.6) !important;
}
.connexion:hover {
    background: rgba(200, 164, 92, 0.4) !important;
    border-color: var(--hud-gold) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 2px 8px rgba(200,164,92,0.4), inset 0 1px 0 rgba(255,240,200,0.2) !important;
}

/* ---- NPC dialog (guard) ---- */
.dialog[id*="guard"] { border-color: rgba(200,164,92,0.8) !important; }
.dialog[id*="guard"]::before {
    background: linear-gradient(90deg, transparent, rgba(200,164,92,0.8), rgba(236,202,128,0.9), rgba(200,164,92,0.8), transparent) !important;
}

/* ---- Skills graph chrome (the tree's top accent line) ---- */
#skills::before {
    background: linear-gradient(90deg, var(--hud-gold), var(--hud-gold-bright), var(--hud-gold)) !important;
}

/* ---- focus rings: gold, not blue ---- */
.waypoint_tab:focus-visible, .waypoint:focus-visible,
#minimap_container:focus-visible, .connexion:focus-visible,
.inventory-close:focus-visible, .stash_page:focus-visible,
.self_or_merc_button:focus-visible {
    outline: 2px solid rgba(200, 164, 92, 0.8) !important;
    outline-offset: 2px;
}

/* ---- Options: green label/value text + Apply button → gold ---- */
.section-header { color: var(--hud-gold-bright) !important; font-family: var(--hud-font-head) !important; }
.option-value { color: var(--hud-gold-bright) !important; }
/* scope to #options so the bottom-bar .action-button (other agent) is untouched */
#options .action-button {
    background: linear-gradient(180deg, var(--hud-gold-bright), var(--hud-gold) 55%, var(--hud-gold-deep)) !important;
    border: 1px solid var(--hud-gold-bright) !important;
    color: #1a130a !important;
    font-family: var(--hud-font-head) !important;
    letter-spacing: .06em !important;
    text-shadow: 0 1px 0 rgba(255, 245, 215, 0.5) !important;
}
#options .action-button:hover {
    box-shadow: 0 0 22px rgba(236, 202, 128, 0.55), inset 0 1px 0 rgba(255, 250, 230, 0.5) !important;
}

/* ---- Talents: warm the legacy grey column-header pills ---- */
.talent-header {
    background-image: linear-gradient(135deg, rgba(42, 33, 20, 0.92), rgba(24, 18, 11, 0.95)) !important;
    border-color: var(--hud-edge) !important;
}

/* ---- Talent cells: finish the legacy purple → gold migration ----
   The cell hover/learned states were still the old 138,43,226 purple in
   common.css; remap to the gold HUD so text-only talents read coherently now,
   and the medallions (below) inherit the same warm register once cut. */
.talent-cell:hover {
    background: rgba(200, 164, 92, 0.08) !important;
    border-color: var(--hud-gold) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(200, 164, 92, 0.2),
        inset 0 1px 0 rgba(255, 235, 190, 0.10) !important;
}
.talent-cell.learned {
    background: linear-gradient(145deg, rgba(200, 164, 92, 0.16), rgba(200, 164, 92, 0.06)) !important;
    border-color: var(--hud-gold) !important;
    box-shadow: 0 0 15px rgba(200, 164, 92, 0.3), inset 0 1px 0 rgba(255, 235, 190, 0.12) !important;
}
.talent-cell.learned .talent-name { color: var(--hud-gold-bright) !important; }

/* ---- Talent medallions — mirrors .skill_icon (game.css:5016) ----
   .talent_has_icon makes the cell an icon-only medallion (name on hover). Size
   is clamped to viewport height so all 9 category rows fit without scrolling.
   State model (passives are binary 0/1, no prereqs) — like skills minus "locked":
     off (unknown) = full COLOUR, slightly understated, no glow → available
     on  (learned) = full pop + per-category (--cat) glow + a soft backplate.
   --cat is set inline per cell from getCategoryColor (play.html). */
.talent_icon {
    width: clamp(96px, 17vh, 184px);
    height: clamp(96px, 17vh, 184px);
    /* center on the cell exactly like the learned halo (::after) does, so the two
       always agree even when the icon is wider than the fixed table column */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
    transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.talent-cell.talent_has_icon {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    position: relative;
    text-align: center;   /* centers the inline-block icon, incl. overflow past the fixed column */
}
.talent-cell.talent_has_icon .talent-name { display: none; }      /* name lives in the hover tooltip */

/* off / not taken — coloured (icon hue carries the category) but calm, so the
   taken ones clearly stand out */
.talent-cell.unknown.talent_has_icon .talent_icon { opacity: 0.78; }
.talent-cell.unknown.talent_has_icon:hover .talent_icon {
    opacity: 1;
    transform: translateX(-50%) scale(1.07);
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.6)) brightness(1.1);
}

/* on / taken — gilded footer bar under the icon. No ring, no glow, no badge.
   Anchored off the icon centre (icon overflows the fixed column). */
.talent-cell.learned.talent_has_icon::before {   /* (5) footer bar under the icon */
    content: '';
    position: absolute;
    left: 50%;
    top: calc(50% + clamp(52px, 9vh, 98px));
    transform: translateX(-50%);
    width: clamp(56px, 10vh, 108px);
    height: 5px;
    border-radius: 3px;
    /* gilded bar: gold gradient with bright centre, category hue as a faint glow */
    background: linear-gradient(90deg,
        rgba(122,90,30,0) 0%, #a9822f 18%, #f4e2ac 50%, #a9822f 82%, rgba(122,90,30,0) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,244,205,0.5),
        0 0 8px color-mix(in srgb, var(--cat, #c8a45c) 55%, transparent);
    pointer-events: none;
    z-index: 2;
}
.talent-cell.learned.talent_has_icon .talent_icon {
    opacity: 1;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cat, #c8a45c) 55%, transparent))
        drop-shadow(0 3px 7px rgba(0, 0, 0, 0.6));
}
.talent-cell.learned.talent_has_icon:hover .talent_icon { transform: translateX(-50%) scale(1.06); }

/* horizontal grid (4 type rows × 9 category cols) — centred, near-full width */
#stats .talents-table {
    max-width: min(1500px, 96vw) !important;
    margin: 0 auto 16px !important;
    border-spacing: 12px 8px !important;
    table-layout: fixed !important;     /* even columns regardless of label width */
}
#stats .talent-cell.talent_has_icon { vertical-align: middle; }

/* ---- Talent legend (headers) — match the character screen .section-title
   register: thin gold/colour Cinzel, accent rule, no chunky gradient pill. ---- */
#stats .talents-table .talent-header {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 8px !important;
    font-family: var(--hud-font-head) !important;
    text-transform: none !important;
    letter-spacing: .03em !important;
    font-weight: 600 !important;
}
#stats .talents-table .talent-header::before { display: none !important; }   /* kill old top bar */
#stats .talents-table .talent-header.empty { background: none !important; border: none !important; width: 104px !important; }
/* top row = schools (category), tinted via inline colour, thin bottom rule */
#stats .talents-table .cat-col {
    font-size: 15px !important;
    border-bottom: 1px solid var(--hud-edge) !important;
    text-align: center !important;
}
/* left column = roles (type), gold like .section-title, right-aligned + divider */
#stats .talents-table .type-row {
    font-size: 17px !important;
    color: var(--hud-gold-bright) !important;
    text-align: right !important;
    white-space: nowrap !important;
    border-right: 1px solid var(--hud-edge) !important;
    width: 1% !important;               /* shrink the label column under fixed layout */
}

/* ============================================================================
   ITEM TOOLTIP + SLOTS — warm the cold grey/blue frame. Rarity TEXT colors
   (.colormagic etc.) and per-quality slot GLOWS are semantic D2 — left alone.
   ============================================================================ */
.item_description {
    background-color: rgba(18, 13, 8, 0.97) !important;
    border: 1px solid var(--hud-edge) !important;
    color: var(--hud-ink) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.7) !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
}
.item_description .item_title { font-size: 20px !important; }   /* match body, not bigger */
.item_description .item_stats { font-size: 19px !important; }
/* slots: recessed umber wells. Rarity glows are plain (non-!important) inset
   box-shadows on .item_quality_* — the well shadow only paints EMPTY cells so
   they survive; filled cells keep their quality gradient + glow. */
/* :not(.socket_item) — a socketed gem is a nested .item drawn ON another item's
   art; the well fill/border would box it in black. It stays fully transparent. */
.item:not(.socket_item) {
    background-color: rgba(13, 10, 6, 0.92) !important;
    border: 1px solid rgba(200, 164, 92, 0.22) !important;
    border-radius: 3px !important;
}
.item:not(.item_exists) {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 235, 190, 0.05) !important;
}
.item:hover:not(.socket_item) {
    background-color: rgba(200, 164, 92, 0.10) !important;
    border-color: var(--hud-gold) !important;
}
.item_unidentified { border-color: hsla(0, 90%, 55%, 1) !important; }   /* keep red */
.item_formula      { border-color: hsla(130, 85%, 50%, 1) !important; } /* keep green */

/* ============================================================================
   TOP MENU BAR (#menu .game_button) — blue → gold, match the HUD buttons.
   (The #menu vs #left_tabs overflow itself is the layout agent's.)
   ============================================================================ */
.game_button {
    background: linear-gradient(180deg, rgba(40, 31, 19, 0.95), rgba(22, 16, 10, 0.97)) !important;
    border: 1px solid var(--hud-gold-deep) !important;
    color: var(--hud-ink) !important;
    font-family: var(--hud-font-head) !important;
    text-transform: none !important;
    letter-spacing: .06em !important;
    box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.08), 0 3px 10px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
}
.game_button::before {
    background: linear-gradient(90deg, var(--hud-gold), var(--hud-gold-bright)) !important;
}
.game_button:hover {
    background: linear-gradient(180deg, rgba(56, 44, 26, 0.97), rgba(34, 25, 15, 0.98)) !important;
    border-color: var(--hud-gold) !important;
    color: var(--hud-gold-bright) !important;
    box-shadow: 0 0 18px rgba(200, 164, 92, 0.35), inset 0 1px 0 rgba(255, 235, 190, 0.12) !important;
}
.game_button:active {
    box-shadow: 0 2px 8px rgba(200, 164, 92, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
.game_button:focus-visible { outline: 2px solid rgba(200, 164, 92, 0.8) !important; outline-offset: 2px; }

/* ============================================================================
   STASH (trade window already gets the panel skin). Warm grey → umber/gold.
   ============================================================================ */
#stash {
    background: linear-gradient(160deg, rgba(28, 22, 15, 0.92), rgba(18, 14, 9, 0.95)) !important;
    border: 1px solid var(--hud-edge) !important;
}
#stash { border-radius: 8px !important; }
/* stash page tabs — every page a numbered chip, selected = gold underline
   (act-tab register). Replaces the ‹ Stash I › pager. */
.stash_tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--hud-edge);
}
.stash_tab {
    min-width: 42px;
    padding: 10px 0;
    text-align: center;
    font-family: var(--hud-font-head);
    font-size: 15px;
    line-height: 1;
    color: var(--hud-ink-dim);
    background: rgba(200, 164, 92, 0.04);
    border: 1px solid rgba(200, 164, 92, 0.16);
    border-radius: 4px;
    cursor: var(--cur-point, pointer);
    user-select: none;
    transition: color .15s, border-color .15s, background .15s;
}
.stash_tab:hover {
    color: var(--hud-gold-bright);
    background: rgba(200, 164, 92, 0.10);
    border-color: var(--hud-gold);
}
.stash_tab_selected {
    color: var(--hud-gold-bright);
    background: rgba(200, 164, 92, 0.14);
    border-color: var(--hud-gold);
    box-shadow: inset 0 -2px 0 var(--hud-gold);
}
#stash_title {
    color: var(--hud-gold-bright) !important;
    font-family: var(--hud-font-head) !important;
    text-transform: none !important;
    border-bottom-color: var(--hud-edge) !important;
}
.stash_page {
    background: linear-gradient(180deg, rgba(40, 31, 19, 0.9), rgba(24, 18, 11, 0.95)) !important;
    border: 1px solid var(--hud-gold-deep) !important;
    color: var(--hud-ink-dim) !important;
    font-family: var(--hud-font-head) !important;
}
.stash_page:hover {
    background: rgba(200, 164, 92, 0.14) !important;
    border-color: var(--hud-gold) !important;
    color: var(--hud-gold-bright) !important;
    box-shadow: 0 4px 12px rgba(200, 164, 92, 0.2) !important;
}
#trade_window::before {
    background: linear-gradient(90deg, var(--hud-gold), var(--hud-gold-bright)) !important;
}
.trade_section_label {
    color: var(--hud-gold-bright) !important;
    font-family: var(--hud-font-head) !important;
    border-bottom-color: var(--hud-edge) !important;
}

/* ============================================================================
   INVENTORY WINDOW — equipment/inventory sub-panels, grid wrap, close button,
   gold footer, empty-slot ghosts. One gold hairline on the outer shell only
   (#inventory_conteneur::before); inner panel accent bars killed.
   ============================================================================ */
#equipment, #inventory {
    background: linear-gradient(160deg, rgba(28, 22, 15, 0.92), rgba(18, 14, 9, 0.95)) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 8px !important;
}
#equipment::before, #inventory::before, #stash::before { content: none !important; }
.inventory_main {
    background: rgba(10, 7, 4, 0.45) !important;
    border: 1px solid rgba(200, 164, 92, 0.12) !important;
    border-radius: 6px !important;
}
#self_or_merc {
    background: rgba(12, 9, 6, 0.55) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 8px !important;
}
/* .inventory-close skin: CLOSE BUTTONS section at EOF */

/* ---- gold footer: strip under the grid, engraved amount ---- */
.gold-display {
    justify-content: center;
    gap: 10px;
    margin-top: 12px !important;
    padding: 8px 16px !important;
    background: linear-gradient(180deg, rgba(200, 164, 92, 0.08), rgba(200, 164, 92, 0.03)) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--hud-gold-bright) !important;
    font-family: var(--hud-font-head) !important;
    font-weight: 600 !important;
    font-size: 19px !important;
    letter-spacing: .04em !important;
}
/* painterly crown coin (art_src/item_sheets/currency.png cell 1) — applies
   everywhere img.gold is used (vendor prices, hire dialogs, drop labels) */
img.gold {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}
.gold-display .gold { width: 24px !important; height: 24px !important; margin: 0 !important; }

/* ---- ghost silhouettes in empty equipment slots — existing item icons,
   desaturated. Slots addressed by [slot] attribute (paper-doll .equip_grid),
   see play.html #equipment. .item_exists marks a filled slot. ---- */
#equipment .item:not(.item_exists)::after {
    content: '';
    position: absolute;
    inset: 14%;
    background: center / contain no-repeat;
    opacity: 0.13;
    filter: grayscale(1) brightness(1.7);
    pointer-events: none;
}
#equipment .item[slot=helmet]:not(.item_exists)::after { background-image: url(/img/iron_helmet.png); }
#equipment .item[slot=amulet]:not(.item_exists)::after { background-image: url(/img/amulet.png); }
#equipment .item[slot=weapon]:not(.item_exists)::after { background-image: url(/img/great_sword.png); }
#equipment .item[slot=armor]:not(.item_exists)::after { background-image: url(/img/leather_armor.png); }
#equipment .item[slot=shield]:not(.item_exists)::after { background-image: url(/img/iron_shield.png); }
#equipment .item[slot=ring1]:not(.item_exists)::after,
#equipment .item[slot=ring2]:not(.item_exists)::after { background-image: url(/img/gold_ring.png); }
#equipment .item[slot=belt]:not(.item_exists)::after { background-image: url(/img/leather_belt.png); }
#equipment .item[slot=gloves]:not(.item_exists)::after { background-image: url(/img/leather_gloves.png); }
#equipment .item[slot=boots]:not(.item_exists)::after { background-image: url(/img/leather_boots.png); }

/* ============================================================================
   DEATH SCREEN — warm the grey box; gold button, oxblood title.
   ============================================================================ */
#death_menu {
    background: linear-gradient(160deg, rgba(24, 12, 9, 0.94), rgba(14, 8, 6, 0.96)) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 8px !important;
    color: var(--hud-ink) !important;
    text-align: center !important;
    box-shadow: var(--hud-shadow) !important;
}
#death_title {
    font-family: var(--hud-font-head) !important;
    color: var(--danger, #b5503f) !important;
    letter-spacing: .05em !important;
}
#death_button {
    background: linear-gradient(180deg, var(--hud-gold-bright), var(--hud-gold) 55%, var(--hud-gold-deep)) !important;
    color: #1a130a !important;
    font-family: var(--hud-font-head) !important;
    border-radius: 4px !important;
    letter-spacing: .06em !important;
}
#death_button:hover {
    background: linear-gradient(180deg, #f4dca0, var(--hud-gold-bright) 55%, var(--hud-gold)) !important;
    box-shadow: 0 0 18px rgba(236, 202, 128, 0.5) !important;
}

/* ============================================================================
   ENLARGE PASS — bump font sizes up across items, top bar, skill tree,
   character, talents, options, skill bar. (Quests left as-is.)
   ============================================================================ */

/* --- top menu bar --- */
.game_button { font-size: 16px !important; }

/* --- character panel --- */
#character { font-size: 19px !important; }
.character-name { font-size: 26px !important; }
.character-level { font-size: 19px !important; }
.section-title { font-size: 17px !important; }
.vital-label { font-size: 14px !important; }
.vital-value { font-size: 20px !important; }
.stat-label  { font-size: 16px !important; }
.stat-value  { font-size: 17px !important; }
.points-available, .stats-points, .attribute-points { font-size: 18px !important; }

/* --- talents --- */
.talent-name      { font-size: 15px !important; }
.category-header  { font-size: 15px !important; }
.talent-header    { font-size: 17px !important; }
.stats-title      { font-size: 30px !important; }

/* --- skill tree (graph) --- */
.skill_node .skill   { font-size: 18px !important; }
.skill_band_label    { font-size: 18px !important; }
.skill_tier_label    { font-size: 15px !important; }
.skills-title        { font-size: 30px !important; }
.skills-utility-label{ font-size: 15px !important; }

/* skill hover tooltip (.skill_description) — real class is underscore. Frame
   is orange (255,107,53) → gold for coherence; child text bumped up. */
.skill_description {
    border: 1px solid var(--hud-edge) !important;
    box-shadow: 0 16px 50px rgba(0,0,0,0.8), 0 0 24px rgba(200,164,92,0.25), inset 0 1px 0 rgba(255,235,190,0.08) !important;
}
.skill_description::before { border-bottom-color: var(--hud-gold) !important; }
.skill_description.skill_description_left::before {
    left: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-color: transparent !important;
    border-left-color: var(--hud-gold) !important;
}
.skill_description .skill_title { font-size: 21px !important; color: var(--hud-gold-bright) !important; }
.skill_explanation { font-size: 17px !important; }
.skill_category    { font-size: 14px !important; }
.damage_effect_prefix { font-size: 16px !important; }

/* talent hover tooltip — match skill/item tooltips. The stat block carries an
   inline font-size:12px in the markup, so only !important overrides it. */
.talent-description { font-size: 18px !important; }
.talent-description > div { font-size: 18px !important; }              /* stat lines */
.talent-description > div:first-child { font-size: 21px !important; } /* title */

/* ============================================================================
   NPC DIALOGUE — already warm; align to our gold + Cinzel choices + bigger type.
   Semantic accents kept: quest amber, attack/enemy red, guard handled above.
   ============================================================================ */
.dialog {
    /* dialogs mount outside #ui, so set the family explicitly (else Times) */
    font-family: var(--hud-font-body) !important;
    border-color: var(--hud-edge-hi) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 20px rgba(200,164,92,0.3), inset 0 1px 0 rgba(255,235,190,0.1) !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
}
.dialog > div:first-child { font-size: 18px !important; color: var(--hud-ink) !important; }
.dialog::before { background: linear-gradient(90deg, transparent, var(--hud-gold), var(--hud-gold-bright), var(--hud-gold), transparent) !important; }
.dialog_action {
    font-family: var(--hud-font-head) !important;
    font-size: 16px !important;
    border-color: var(--hud-gold-deep) !important;
    color: var(--hud-gold) !important;
}
.dialog_action:hover {
    border-color: var(--hud-gold) !important;
    color: var(--hud-gold-bright) !important;
}
.dialog_action::before,
.dialog_action[id*="trade"]::before,
.dialog_action[id*="talk"]::before { font-size: 16px !important; }

/* --- Dialog title bar: NPC name + role ------------------------------------
   Appended last in the DOM (so .dialog>div:first-child keeps styling the
   text block) and pulled to the top with flex order. */
.dialog_title {
    order: -1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: -4px 0 -6px;          /* tighten against the .dialog 16px flex gap */
    padding: 0 34px 8px 0;        /* right gutter clears the close chip */
    border-bottom: 1px solid var(--hud-edge);
}
.dialog_title_name {
    font-family: var(--hud-font-head);
    font-size: 17px;
    letter-spacing: 0.06em;
    color: var(--hud-gold-bright);
    white-space: nowrap;
}
.dialog_title_desc {
    font-size: 13px;
    font-style: italic;
    color: var(--hud-ink-faint);
}

/* --- Side-flipped speech bubble (dungeon.js _updateDialogPosition) ---------
   The bubble sits LEFT/RIGHT of the NPC (vertically centred on the anchor)
   instead of on top of him, so NPC + hero stay visible while talking. The
   legacy game.css top-bubble rules (bottom/left/translateX, hover pop,
   dialogAppear keyframe) are all overridden here; overflow must go visible
   so the horizontal arrow can poke outside the border. */
.dialog.dialog-side-right, .dialog.dialog-side-left {
    /* game.css .dialog ends on `position: relative` (overriding its own
       earlier `absolute`), which made top/left overrides mere nudges —
       force absolute so the bubble truly re-anchors beside the NPC. */
    position: absolute !important;
    bottom: auto !important;
    top: 0 !important;
    overflow: visible !important;
}
.dialog.dialog-side-right {
    left: 44px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    animation: dialogAppearSideR .3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
.dialog.dialog-side-left {
    left: auto !important;
    right: 44px !important;
    transform: translateY(-50%) !important;
    animation: dialogAppearSideL .3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
.dialog.dialog-side-right:hover, .dialog.dialog-side-left:hover {
    transform: translateY(-50%) !important;   /* no hover pop — it would shift the anchor-centred bubble */
}
@keyframes dialogAppearSideR {
    from { opacity: 0; transform: translateY(-50%) translateX(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(-50%); }
}
@keyframes dialogAppearSideL {
    from { opacity: 0; transform: translateY(-50%) translateX(-10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(-50%); }
}
/* Arrow points sideways at the speaker (base rule draws it under the bubble). */
.dialog.dialog-side-right::after {
    bottom: auto; top: 50%;
    left: -8px; right: auto;
    transform: translateY(-50%);
    border-left: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 8px solid var(--hud-gold);
}
.dialog.dialog-side-left::after {
    bottom: auto; top: 50%;
    left: auto; right: -8px;
    transform: translateY(-50%);
    border-right: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 8px solid var(--hud-gold);
}

/* --- skill bar slots (modest — slots are only 60px) --- */
.skill-slot .slot-name { font-size: 11px !important; }
.skill-slot .slot-key  { font-size: 13px !important; }

/* --- options --- */
#options { font-size: 19px !important; }
.option-label  { font-size: 17px !important; }
.option-value  { font-size: 17px !important; }
.section-header { font-size: 17px !important; }

/* ============================================================================
   FULLSCREEN OVERLAY WINDOWS — skills graph / talents tree / options.
   They own the screen; opening one closes the docked panels + inventory
   (see dungeon.js toggleWindow). Esc or the launcher button closes.
   ============================================================================ */
#ui .overlay {
    position: fixed !important;
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;   /* centered modal — #skills already expected this */
    box-sizing: border-box !important;
    width: 92vw !important; height: 90vh !important;
    max-width: 92vw !important; max-height: 90vh !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 12px !important;
    z-index: 120 !important;
    overflow: auto !important;
    padding: 0 !important;                 /* each panel keeps its own header padding */
    background: var(--hud-panel) !important;
    background-color: rgba(14, 10, 7, 0.985) !important;
    box-shadow: var(--hud-shadow) !important;
}

/* launcher row stays clickable above an open overlay (switch windows directly) */
#menu { z-index: 130 !important; }   /* stays above the fullscreen overlays so you can switch/close windows */

/* Options is just settings — keep it a compact centered modal (Skills/Talents
   stay wide for their graphs). */
#options.overlay {
    width: clamp(420px, 42vw, 680px) !important;
    height: auto !important;
    max-height: 86vh !important;
}   /* above docked panels, below overlays */


/* Character / Quests dock left but float clear of the menu bar (top) and the
   bottom HUD (bottom) — a left-docked card, not a full-height column.
   Mirrors the right-docked, vertically-centered inventory. Appended last so
   it beats the earlier `border-radius:0` full-column rule. */
#character.left-dock, #quests.left-dock, #options.left-dock {
    top: 60px !important;
    bottom: 120px !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    padding-top: 0 !important;             /* .dock-header owns the top edge */
    border-radius: 12px !important;
    border: 1px solid var(--hud-edge) !important;
    box-shadow: var(--hud-shadow) !important;
}


/* ============================================================================
   SKILLS / TALENTS — true fullscreen (edge to edge). Options stays the compact
   centered modal from the base .overlay rule. Close via the × or Esc.
   ============================================================================ */
#skills.overlay, #stats.overlay {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    transform: none !important;
    width: 100vw !important; height: 100vh !important;
    max-width: 100vw !important; max-height: 100vh !important;
    border: none !important; border-radius: 0 !important;
    padding: 0 !important;                 /* the .overlay-topbar owns the top edge */
    /* NB: never set `display: … !important` here — v-show hides via inline
       display:none, which an !important rule would override (panel stuck open). */
    flex-direction: column !important;
    justify-content: flex-start !important; /* topbar, then content fills below */
    align-items: stretch !important;
    overflow: hidden !important;           /* content area scrolls, not the window */
}
/* content fills ALL space under the command bar and scrolls on its own */
#stats .stats-content, #skills .skills-content {
    flex: 1 1 0 !important;                 /* zero-basis grow → eats the whole column */
    align-self: stretch !important;
    height: auto !important; max-height: none !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 20px 12px 18px !important;
}
#stats .stats-content { display: block !important; }   /* the talents table centres via its own margin:auto */

/* graph skill cards fill their node exactly — kill the legacy 4px .skill margin
   that pushed the medallion off-centre, so the connector arrows (which attach at
   the node centre) line up with the icon. */
#skills .skill_node .skill { margin: 0 !important; }

/* ---------------------------------------------------------------------------
   Option A — unified command bar: window tabs (left) · title+points (centre,
   absolutely centred) · close (right). Same chrome for Skills and Talents.
   --------------------------------------------------------------------------- */
.overlay-topbar {
    flex: 0 0 auto;
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    height: 60px;
    padding: 0 14px 0 12px;
    border-bottom: 1px solid var(--hud-edge);
    background: linear-gradient(180deg, rgba(32,24,15,0.97), rgba(16,12,8,0.97));
    box-shadow: 0 3px 14px rgba(0,0,0,0.5);
    z-index: 6;
}
.ov-tabs { display: flex; align-items: center; gap: 6px; }
.ov-tab {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: var(--cur-point, pointer);
    transition: background .15s, border-color .15s, box-shadow .15s, transform .1s var(--ease, ease);
}
.ov-tab > span { display: none; }          /* icon-only; name lives in the title tooltip */
.ov-tab .ov-tab-ico {                        /* match the #menu launcher glyphs (size + vividness) */
    width: 32px; height: 32px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    filter: brightness(1.35) contrast(1.25) saturate(1.2)
            drop-shadow(0 1px 2px rgba(0,0,0,0.8))
            drop-shadow(0 0 4px rgba(220,180,100,0.35));
    transform: scale(1.15);
    transition: transform .15s, filter .15s;
}
.ov-tab:hover {
    background: rgba(200,164,92,0.10);
    border-color: var(--hud-gold-deep);
    transform: translateY(-1px);
}
.ov-tab:hover .ov-tab-ico {
    transform: scale(1.25);
    filter: brightness(1.6) contrast(1.3) saturate(1.25)
            drop-shadow(0 1px 2px rgba(0,0,0,0.8))
            drop-shadow(0 0 8px rgba(230,195,110,0.65));
}
.ov-tab.active {
    background: linear-gradient(180deg, rgba(200,164,92,0.22), rgba(200,164,92,0.07));
    border-color: var(--hud-gold);
    box-shadow: inset 0 0 12px rgba(200,164,92,0.18), 0 0 12px rgba(200,164,92,0.2);
}
.ov-tab.active .ov-tab-ico {
    transform: scale(1.22);
    filter: brightness(1.6) contrast(1.3) saturate(1.3)
            drop-shadow(0 1px 2px rgba(0,0,0,0.8))
            drop-shadow(0 0 7px rgba(236,202,128,0.7));
}

.ov-title-wrap {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 14px;
    pointer-events: none; white-space: nowrap;
}
.ov-title {
    margin: 0 !important;
    font-family: var(--hud-font-head);
    font-size: 27px !important; font-weight: 600;
    letter-spacing: 4px; text-transform: uppercase;
    color: var(--hud-gold-bright) !important;
    text-shadow: 0 2px 9px rgba(0,0,0,0.6);
}
.ov-points {
    font-family: var(--hud-font-head);
    font-size: 15px; letter-spacing: .5px;
    color: var(--hud-gold);
    padding: 3px 12px; border-radius: 20px;
    border: 1px solid var(--hud-gold-deep);
    background: rgba(200,164,92,0.08);
}
.ov-points.no-points { color: var(--hud-ink-faint); border-color: rgba(138,109,54,0.4); background: rgba(120,110,80,0.06); }
/* Quiet companion to .ov-points: says where the next point comes from. No pill,
   no border — it must read as a footnote next to the count, not a second badge. */
.ov-hint {
    font-family: var(--hud-font-head);
    font-size: 13px; letter-spacing: .5px;
    color: var(--hud-ink-faint);
    opacity: .85;
}

/* the close button now sits inside the topbar flex row (was absolute on the
   overlay); skin comes from the CLOSE BUTTONS section at EOF */
.overlay-topbar .overlay-close {
    position: static !important;
    top: auto !important; right: auto !important;
    flex: 0 0 auto;
}
.overlay-close {
    position: absolute; top: 16px; right: 22px;
    z-index: 7;
}

/* ============================================================================
   CLOSE BUTTONS — ONE chip recipe for every corner × (dock headers, inventory,
   fullscreen overlays, skill selector): ghost square, ink-faint → gold-wash
   hover, no transform pops. Positioning stays per-context above; only the
   skin lives here. !important beats the legacy game.css slate/red.
   The markup's text × is hidden (font-size 0 — glyph sits off the em-box
   centre in any font) and replaced by a geometry-centred SVG-mask cross
   drawn in currentColor, so the hover colour transition still applies.
   ============================================================================ */
.dock-close, .inventory-close, .modal-close, .overlay-close, .skill-selector-close,
.dialog-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: var(--hud-ink-faint) !important;
    background: transparent !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    cursor: var(--cur-point, pointer) !important;
    transition: color .15s, border-color .15s, background .15s !important;
    user-select: none;
}
.dock-close:hover, .inventory-close:hover, .modal-close:hover,
.overlay-close:hover, .skill-selector-close:hover, .dialog-close:hover {
    color: var(--hud-gold-bright) !important;
    border-color: var(--hud-gold) !important;
    background: rgba(200, 164, 92, 0.1) !important;
    box-shadow: none !important;
    transform: none !important;
}
.dock-close:active, .inventory-close:active, .modal-close:active,
.overlay-close:active, .skill-selector-close:active, .dialog-close:active {
    background: rgba(200, 164, 92, 0.16) !important;
    transform: none !important;
}
.dock-close::before, .inventory-close::before, .modal-close::before,
.overlay-close::before, .skill-selector-close::before, .dialog-close::before {
    content: '';
    width: 44%;
    height: 44%;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4L20 20M20 4L4 20' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4L20 20M20 4L4 20' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* fullscreen-overlay top bar runs taller — bump the chip to sit right */
.overlay-close { width: 36px !important; height: 36px !important; }

/* PNJ speech-bubble close — smaller chip pinned to the bubble's top-right
   corner (the .dialog has 20px padding; keep it clear of the text). */
.dialog-close {
    position: absolute !important;
    top: 8px; right: 8px;
    width: 24px !important;
    height: 24px !important;
    z-index: 1;
}

/* ============================================================================
   CHARACTER PANEL READABILITY PASS — everything one notch bigger. Appended
   last on purpose: same-specificity overrides of the sizes set above win by
   source order.
   ============================================================================ */
#character { font-size: 20px !important; }
#character.left-dock { width: min(52vw, 780px) !important; max-width: 52vw !important; }
.character-section .section-title { font-size: 15px !important; }
.section-title[data-group]::before { width: 56px !important; height: 56px !important; }
.character-section .stat-label { font-size: 17px !important; }
.character-section .stat-value { font-size: 20px !important; }
.character-section .vital-label { font-size: 16px !important; }
.character-section .vital-value { font-size: 21px !important; }
.character-section .stat-row { padding: 8px 2px !important; }
.attribute-item { padding: 6px 2px !important; }
.char-pinned > .character-section:nth-child(3) .resistance-icon { width: 56px !important; height: 56px !important; }
.attr-points-chip { font-size: 16px !important; }
.attr-plus { width: 30px; height: 30px; font-size: 21px; }
.attack-appendix .attack-section { font-size: 17px !important; }
.attack-appendix .attack-skill { font-size: 20px !important; }
.attack-appendix .damage_effect_prefix { font-size: 13px !important; }
.attack-appendix .range_text { font-size: 14px !important; }

@media (max-width: 1100px) {
    #character.left-dock { width: min(62vw, 660px) !important; max-width: 62vw !important; }
}


/* ---- quest completion toast (dungeon.js _showQuestToast) ----
   Parchment card, top-centre just below the menu-bar row (px, not vh — 12%
   sat over the playfield on tall screens). transform/opacity ONLY. */
#quest-toast {
    position: fixed;
    left: 50%;
    top: 64px;
    transform: translate(-50%, -12px);
    opacity: 0;
    pointer-events: none;
    z-index: 60;
    text-align: center;
    padding: 14px 30px 12px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(200, 164, 92, 0.10), transparent 70%),
        linear-gradient(180deg, rgba(24, 18, 10, 0.92), rgba(16, 12, 7, 0.92));
    border: 1px solid var(--hud-gold-deep);
    border-radius: 3px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 6px 22px rgba(0, 0, 0, 0.55),
        inset 0 0 26px rgba(200, 164, 92, 0.07);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
#quest-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
#quest-toast .qt-title {
    font-family: var(--hud-font-head);
    font-size: 17px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hud-gold-bright);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 14px rgba(236, 202, 128, 0.25);
}
#quest-toast .qt-desc {
    font-family: var(--hud-font-flavor);
    font-size: 15px;
    font-style: italic;
    color: #d8c9a8;
    margin-top: 4px;
    max-width: 420px;
}
#quest-toast .qt-name {
    font-family: var(--hud-font-flavor);
    font-size: 16px;
    color: var(--hud-gold-bright);
    margin-top: 3px;
}
/* Reward toast: the item name wears its quality colour instead of the default
   gold, same palette as the floor labels (.drop-label.color* in dungeon.css) —
   a rare reward should read as rare without opening the bag. */
#quest-toast .qt-name.colornormal    { color: #ffffff; }
#quest-toast .qt-name.colormagic     { color: hsla(240, 80%, 72%, 1); }
#quest-toast .qt-name.colorenchanted { color: hsla(270, 80%, 70%, 1); }
#quest-toast .qt-name.colorrare      { color: hsla(60, 80%, 70%, 1); }
#quest-toast .qt-name.colorunique    { color: hsla(35, 80%, 70%, 1); }
#quest-toast .qt-name.colorset       { color: hsla(120, 80%, 65%, 1); }
#quest-toast .qt-name.colorruneword  { color: hsla(30, 60%, 55%, 1); }
#quest-toast .qt-name.colorcrafted   { color: hsla(120, 80%, 65%, 1); }
#quest-toast .qt-name.colorcorrupted { color: hsla(0, 80%, 70%, 1); }
#quest-toast .qt-name.colorgold      { color: hsla(45, 100%, 80%, 1); }
#quest-toast .qt-hint {
    font-family: var(--hud-font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--hud-gold-deep);
    margin-top: 6px;
}
/* Accept variant: quieter than completion — cooler gold, no celebratory glow. */
#quest-toast.accept {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(150, 170, 190, 0.07), transparent 70%),
        linear-gradient(180deg, rgba(20, 22, 26, 0.92), rgba(14, 15, 18, 0.92));
    border-color: var(--hud-edge);
}
#quest-toast.accept .qt-title {
    font-size: 14px;
    color: #cdbb90;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ---- Passive quest tracker (under the minimap) ---- */
/* container: positions the stack under the minimap; cards render inside */
#quest_tracker {
    position: fixed;
    right: 12px;
    /* hug the minimap: top 60 + its square side + a small gap */
    top: calc(60px + max(12vh, 12vw, 140px) + 8px);
    width: max(12vh, 12vw, 140px);
    max-width: 240px;
    z-index: 32;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* The tracker is the yielding side of the rail: it may only fill the gap
       between the minimap and the skill bar's actual top
       (--skillbar-reserve = measured bar height + anchors, ui.js
       syncRailReserve) and scrolls internally beyond that. Floor of ~one
       card so it never vanishes entirely on a packed small viewport. */
    max-height: max(64px, calc(var(--uivh, 100vh) - 68px - max(12vh, 12vw, 140px) - var(--skillbar-reserve, 292px)));
    overflow-y: auto;
}
/* one card per active quest */
.tracker_quest {
    position: relative;
    box-sizing: border-box;
    padding: 8px 11px 9px;
    cursor: var(--cur-point, pointer);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(200, 164, 92, 0.06), transparent 75%),
        linear-gradient(180deg, rgba(24, 18, 10, 0.94), rgba(16, 12, 7, 0.94));
    border: 1px solid var(--hud-edge);
    border-left: 2px solid var(--hud-gold-deep);
    border-radius: 3px;
    box-shadow: var(--hud-shadow);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.tracker_quest:hover {
    border-color: var(--hud-gold);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px rgba(200,164,92,0.22);
}
/* hover-revealed close: hides this quest from the tracker (persisted per hero) */
.tracker_close {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 24px;
    height: 24px;
    line-height: 23px;
    text-align: center;
    font-family: var(--hud-font-head);
    font-size: 22px;
    color: var(--hud-ink-dim);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    pointer-events: none;
}
.tracker_quest:hover .tracker_close {
    opacity: 0.8;
    pointer-events: auto;
}
.tracker_close:hover {
    color: var(--hud-gold-bright);
    opacity: 1;
}
#quest_tracker .tracker_name {
    font-family: var(--hud-font-head);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hud-gold-bright);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 22px;   /* clear the hover × */
}
#quest_tracker .tracker_objective {
    font-family: var(--hud-font-flavor);
    font-size: 13px;
    line-height: 1.25;
    color: #d8c9a8;
    margin-top: 3px;
}
/* Awaiting turn-in: warmer, brighter accent to read as "go hand it in". */
.tracker_quest.tracker_turnin {
    border-left-color: var(--hud-gold-bright);
}
.tracker_quest.tracker_turnin .tracker_objective {
    color: var(--hud-gold-bright);
    font-style: italic;
}


/* ---- First-time level-up nudge (play.html #menu) ----
   Aims new players at the Skills / Talents buttons: a count dot on each + a
   soft continuous pulse ring, plus a caption strip under the menu bar.
   Infinite anims are opacity-only (no paint anims — see CLAUDE.md).
   Dismissed permanently on first open of any character screen. */

/* Count dot, top-right of the Skills / Talents launcher */
#menu .game_button .menu-point-dot {
    position: absolute;
    top: -7px; right: -7px;
    min-width: 19px; height: 19px;
    padding: 0 4px;
    box-sizing: border-box;
    text-align: center;
    /* line-height = content-box height (19 − 2px border) so the digit sits dead
       centre regardless of font metrics; a sans face centres cleaner than Cinzel */
    line-height: 17px;
    font-family: system-ui, 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #2a1e0d;
    background: radial-gradient(circle at 40% 35%, #f3d896, #c8a45c);
    border: 1px solid rgba(0,0,0,0.55);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    z-index: 3;
    pointer-events: none;
}

/* Soft pulsing ring around the nudged buttons (opacity-animated overlay) */
#menu .game_button.levelup-nudge { border-color: var(--hud-edge-hi) !important; }
#menu .game_button.levelup-nudge::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: -2px;
    border-radius: 5px;
    pointer-events: none;
    box-shadow: 0 0 14px 2px rgba(236, 202, 128, 0.55);
    opacity: 0.4;
    animation: menu-nudge-glow 2.4s ease-in-out infinite;
    z-index: 0;
}
@keyframes menu-nudge-glow {
    0%, 100% { opacity: 0.28; }
    50%      { opacity: 0.8; }
}

/* ============================================================================
   CRAFTING — scroll/tome tooltips, active-formula banner, confirm modal
   ============================================================================ */

/* usage line inside scroll/tome item tooltips (client/js/item.js .craft_use) */
.item_description .craft_use {
    font-family: var(--hud-font-flavor);
    font-style: italic;
    font-size: 17px;
    color: var(--hud-gold);
    opacity: 0.9;
    max-width: 300px;
    margin: 6px auto 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(200, 164, 92, 0.22);
}

/* items currently selected into a formula — legacy neon green → gold */
.item_formula {
    border: 1px solid var(--hud-gold-bright) !important;
    box-shadow: 0 0 10px rgba(236, 202, 128, 0.65), inset 0 0 8px rgba(236, 202, 128, 0.25) !important;
}

/* active-formula follow-cursor banner (play.html #formula) */
#formula {
    background: var(--hud-panel) !important;
    background-color: rgba(20, 15, 10, 0.96) !important;
    border: 1px solid var(--hud-edge) !important;
    border-radius: 8px !important;
    box-shadow: var(--hud-shadow) !important;
    color: var(--hud-ink) !important;
    padding: 14px 20px 12px !important;
    max-width: 340px;
}
#formula .formula-title {
    font-family: var(--hud-font-head);
    font-size: 18px;
    letter-spacing: .05em;
    color: var(--hud-gold-bright);
    margin-bottom: 6px;
}
#formula .formula-desc {
    font-family: var(--hud-font-flavor);
    font-style: italic;
    font-size: 16px;
    color: var(--hud-ink);
    margin-bottom: 8px;
}
#formula .formula-cancel {
    font-size: 14px;
    color: var(--hud-ink-dim);
    margin-bottom: 8px;
}
#formula .formula-cancel .hud-keycap { margin-right: 4px; }

/* "Are you sure" modal for instant destructive scrolls (forget_*) */
#confirm_use {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 6, 3, 0.55);
}
#confirm_use .confirm-box {
    background: var(--hud-panel);
    background-color: rgba(20, 15, 10, 0.97);
    border: 1px solid var(--hud-edge);
    border-radius: 10px;
    box-shadow: var(--hud-shadow);
    color: var(--hud-ink);
    text-align: center;
    padding: 26px 34px 22px;
    max-width: 420px;
}
#confirm_use .confirm-title {
    font-family: var(--hud-font-head);
    font-size: 24px;
    letter-spacing: .06em;
    color: var(--hud-gold-bright);
    margin-bottom: 10px;
}
#confirm_use .confirm-item-name {
    font-family: var(--hud-font-head);
    font-size: 17px;
    letter-spacing: .04em;
    color: var(--hud-ink);
    margin-bottom: 10px;
}
#confirm_use .confirm-text {
    font-family: var(--hud-font-flavor);
    font-style: italic;
    font-size: 17px;
    color: var(--hud-ink-dim);
    margin-bottom: 18px;
}
#confirm_use .confirm-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
}
#confirm_use .action-button {
    cursor: var(--cur-point, pointer);
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 15px;
    font-family: var(--hud-font-head);
    letter-spacing: .06em;
}
/* legacy .action-button:hover ships a green glow + translateY lift — kill both */
#confirm_use .action-button:hover,
#confirm_use .action-button:active {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
#confirm_use .confirm-yes {
    background: linear-gradient(180deg, var(--hud-gold-bright), var(--hud-gold) 55%, var(--hud-gold-deep));
    border: 1px solid var(--hud-gold-bright);
    color: #1a130a;
    text-shadow: 0 1px 0 rgba(255, 245, 215, 0.5);
}
#confirm_use .confirm-yes:hover {
    box-shadow: 0 0 22px rgba(236, 202, 128, 0.55), inset 0 1px 0 rgba(255, 250, 230, 0.5);
}
#confirm_use .confirm-no {
    background: rgba(200, 164, 92, 0.06);
    border: 1px solid var(--hud-edge);
    color: var(--hud-ink);
}
#confirm_use .confirm-no:hover {
    border-color: var(--hud-gold);
    background: rgba(200, 164, 92, 0.14);
}

/* ============================================================================
   HUD MICRO-TOOLTIP — singleton #hud-tip driven by [data-tip] delegation in
   ui.js. Replaces native title= on small HUD controls (menu bar launchers,
   skillbar micro-buttons). A singleton fixed div, not a ::after on the anchor:
   .skill-slot is overflow:hidden, so an in-anchor pseudo tooltip gets clipped.
   data-tip-sub = dimmed second line; data-tip-side="left" places it left of
   the anchor (default: centered below, flips above near the bottom edge).
   ============================================================================ */
#hud-tip {
    position: fixed; z-index: 2100;   /* above the 2000-tier skill/item/stat tooltips */
    max-width: 260px;
    padding: 6px 10px;
    font-family: var(--hud-font-head);
    font-size: 12.5px; line-height: 1.35;
    letter-spacing: .03em;
    text-align: center;
    color: var(--hud-ink);
    background: linear-gradient(180deg, rgba(40,31,19,0.97), rgba(22,16,10,0.98));
    border: 1px solid var(--hud-gold-deep);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,235,190,0.08), 0 4px 12px rgba(0,0,0,0.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
    white-space: pre-line;
}
#hud-tip.show { opacity: 1; }
#hud-tip .tip-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--hud-ink-dim);
}

/* While a skillbar micro-button is hovered, mute the big skill tooltip so the
   small #hud-tip reads clean instead of stacking on top of it. */
.skill-slot:has(.slot-move:hover, .slot-edit:hover, .slot-remove:hover, .slot-key:hover) > .skillbar-skill-tooltip .skill_description { display: none; }

/* Rebind/reorder discoverability: footer line inside the skillbar's skill
   tooltip only (not the skill-tree panel's). */
.skillbar-skill-tooltip .skill_description::after {
    content: "right-click: set key  ·  drag: reorder";
    display: block;
    margin-top: 7px; padding-top: 6px;
    border-top: 1px solid rgba(200, 164, 92, 0.22);
    font-size: 13px; letter-spacing: .04em;
    color: var(--hud-ink-dim);
}

/* ============================================================================
   FIRST-RUN COACH — #coach (play.html), driven by ui.js COACH_STEPS
   One callout at a time, arrowed at a real HUD element (menu launcher, tree
   card, attribute +, bag item). Position/side/arrow-offset come from
   coachTick(); everything here is presentation only. Infinite animation is
   opacity/transform-only (CLAUDE.md: no paint anims).
   ============================================================================ */
#coach {
    position: fixed; z-index: 2150;   /* above #hud-tip (2100) — it's the loudest thing on screen */
    max-width: 340px;   /* single-line callouts; the title sets the real width */
    padding: 9px 14px 8px;
    text-align: center;
    color: var(--hud-ink);
    background: linear-gradient(180deg, rgba(46,35,20,0.98), rgba(24,17,10,0.99));
    border: 1px solid var(--hud-gold);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,235,190,0.10),
                0 6px 18px rgba(0,0,0,0.6),
                0 0 18px rgba(200,164,92,0.18);
    opacity: 1;
    transition: opacity .2s ease-out;
}
/* Hidden but still laid out — see the play.html comment (coachTick measures it). */
#coach.coach-hidden { opacity: 0; pointer-events: none; }
#coach .coach-title {
    font-family: var(--hud-font-head);
    font-size: 14px; letter-spacing: .04em;
    color: var(--hud-gold-bright);
    white-space: nowrap;
}
#coach .coach-line2 { margin-top: 3px; }
#coach .coach-key { margin-left: 7px; display: inline-block; vertical-align: 1px; }
#coach .coach-skip {
    margin-top: 8px;
    display: inline-block;
    padding: 3px 12px;
    font-family: var(--hud-font-head);
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hud-ink-dim);
    background: rgba(10, 8, 5, 0.55);
    border: 1px solid var(--hud-edge);
    border-radius: 4px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
#coach .coach-skip:hover {
    color: var(--hud-gold-bright);
    border-color: var(--hud-gold);
    background: rgba(200, 164, 92, 0.12);
}

/* Arrow: a rotated square sharing the callout's border + fill. `left` is set
   inline (anchor centre after the viewport clamp). */
#coach .coach-arrow {
    position: absolute;
    width: 10px; height: 10px;
    margin-left: -5px;
    background: rgba(46,35,20,0.98);
    border-left: 1px solid var(--hud-gold);
    border-top: 1px solid var(--hud-gold);
    transform: rotate(45deg);
}
#coach.coach-below .coach-arrow { top: -6px; }
#coach.coach-above .coach-arrow {
    bottom: -6px;
    background: rgba(24,17,10,0.99);
    border: none;
    border-right: 1px solid var(--hud-gold);
    border-bottom: 1px solid var(--hud-gold);
}
/* Beside the anchor (place: "right" steps) — arrow on the facing vertical edge,
   offset by `top` instead of `left`. */
#coach.coach-right .coach-arrow,
#coach.coach-left .coach-arrow {
    margin-left: 0; margin-top: -5px;
    background: rgba(35,26,15,0.99);
}
#coach.coach-right .coach-arrow {
    left: -6px;
    border: none;
    border-left: 1px solid var(--hud-gold);
    border-bottom: 1px solid var(--hud-gold);
}
#coach.coach-left .coach-arrow {
    right: -6px;
    border: none;
    border-right: 1px solid var(--hud-gold);
    border-top: 1px solid var(--hud-gold);
}

/* The element being pointed at: same gold pulse as the level-up nudge ring, so
   coach and nudge speak one visual language. */
.coach-target { position: relative; }
.coach-target::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 1px solid var(--hud-gold-bright);
    border-radius: 6px;
    box-shadow: 0 0 16px 3px rgba(236, 202, 128, 0.45);
    pointer-events: none;
    z-index: 4;
    opacity: 0.45;
    animation: coach-ring 2.2s ease-in-out infinite;
}
@keyframes coach-ring {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.85; }
}
/* A coached menu button already carries the count dot — drop the level-up pulse
   so the two glows don't stack into a blur. */
#menu .game_button.levelup-nudge.coach-target::before { display: none !important; }

/* ============================================================================
   MONSTER NAMEPLATE (#monster_info). Rank hues stay the
   shared item-quality palette (common.css, via colorEnnemyCategory() in ui.js):
   magic blue / rare yellow / unique orange are semantic D2 and re-picking them
   per-surface was worse. What the plate DOES need is a hard black outline —
   the soft drop-shadow alone loses thin glyphs where the crimson life bar meets
   the dark backing.

   The rank class never actually painted: game.css sets `#monster_info_name {
   color: white }`, and an ID (1-0-0) outranks `.colormagic` (0-1-0), so every
   mob read white. Re-stated here at ID+class specificity, values verbatim from
   common.css — that file stays the source of truth for the palette.
   ============================================================================ */
/* The plate itself was still the legacy "modern glass" panel (game.css):
   blue-grey glass, 12px radius, backdrop blur, white 2px border, glossy crimson
   bar with white inset gloss — the one HUD surface that never got the painterly
   pass, which is why the fixed text still looked off. Re-seat it on the shared
   register: --hud-panel backing, gold edge, Cinzel name, matte blood-red fill. */
#monster_info {
    background: var(--hud-panel) !important;
    border: 1px solid var(--hud-edge-hi) !important;
    border-radius: 6px !important;
    box-shadow: var(--hud-shadow) !important;
    backdrop-filter: none !important;
}
#monster_info::before {
    border-radius: 6px 6px 0 0 !important;
    background: linear-gradient(90deg, rgba(200,164,92,.5), rgba(236,202,128,.9), rgba(200,164,92,.5));
}
/* Matte deep-blood fill — the glossy three-stop crimson (with white inset
   highlight) fought every glyph drawn across it; a darker matte fill carries
   the same "how hurt is it" read and lets the rank colors sit on top. */
#monster_info_life {
    border-radius: 5px 0 0 5px !important;
    background: linear-gradient(180deg, rgba(146, 30, 27, 0.92), rgba(90, 15, 16, 0.95)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 130, 105, 0.15), inset 0 -8px 14px rgba(0, 0, 0, 0.35) !important;
}
#pnj_info_life {
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(58, 50, 36, 0.45), rgba(36, 30, 21, 0.55)) !important;
}
#monster_info_name { filter: none !important; }   /* game.css brightness(1.1) washed the rank hues */
#monster_info_name>div:first-child      { font-family: var(--hud-font-head) !important; }
#monster_info_name>div:not(:first-child){ font-family: var(--hud-font-body) !important; }

#monster_info_name {
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.95),
        0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000 !important;
}
/* champion — the tooltip's magic blue rotated 240° → 220° and darkened 72% →
   69% L. 240 reads purple on the crimson bar, 210 goes green; 220 is the
   window. The only rank re-picked per-surface: its
   backing is the bright part of the crimson bar, where the tooltip value reads
   purple and muddy. Boss/unique keep common.css verbatim. */
#monster_info_name.colormagic     { color: hsla(221, 92%, 69%, 1); }   /* champion */
#monster_info_name.colorrare      { color: hsla(60, 80%, 70%, 1); }    /* boss */
#monster_info_name.colorunique    { color: hsla(35, 80%, 70%, 1); }    /* unique */
#monster_info_name.colorcorrupted { color: hsla(0, 80%, 70%, 1); }     /* corpse */
#monster_info_name.colornormal    { color: #fff; }                     /* trash / minion */

/* Bigger type in the same plate — the name was 14px over a 200px-wide bar and
   read as a caption. Padding comes down to pay for it, so the box keeps its
   footprint. */
#monster_info { padding: 14px 24px !important; }
#monster_info_name { gap: 0 !important; }                              /* one spacing source: the title's margin, below */
#monster_info_name>div:first-child      { font-size: 18px !important; letter-spacing: .4px !important; margin-bottom: 3px !important; }
/* Subtitles: the 5-shadow outline is right for 18px, too heavy at 15 — it eats
   the counters. Drop to a soft plate instead, and stop dimming them. */
#monster_info_name>div:not(:first-child) {
    font-size: 15px !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 5px rgba(0, 0, 0, .7) !important;
}

/* The plate frame was fixed white regardless of what you hovered. Tint it with
   the same rank hue as the name (the class lives on the inner div, hence
   :has()) so rank reads before you parse a word of text. Kept low-alpha — the
   TEXT is the signal, this is a hint — and no colored outer glow: darkening a
   hue to make a halo turned 240° violet and 60° lime, neither of which matched
   the letters they surrounded. Border + accent bar only. */
#monster_info:has(#monster_info_name.colormagic)  { border-color: hsla(221, 90%, 69%, .7) !important; }
#monster_info:has(#monster_info_name.colorrare)   { border-color: hsla(60, 80%, 70%, .7) !important; }
#monster_info:has(#monster_info_name.colorunique) { border-color: hsla(35, 80%, 70%, .7) !important; }
#monster_info:has(#monster_info_name.colormagic)::before  { background: linear-gradient(90deg, hsla(221,90%,67%,.5), hsla(221,95%,79%,.95), hsla(221,90%,67%,.5)) !important; }
#monster_info:has(#monster_info_name.colorrare)::before   { background: linear-gradient(90deg, hsla(60,80%,70%,.5),  hsla(60,90%,82%,.95),  hsla(60,80%,70%,.5)) !important; }
#monster_info:has(#monster_info_name.colorunique)::before { background: linear-gradient(90deg, hsla(35,80%,70%,.5),  hsla(35,90%,82%,.95),  hsla(35,80%,70%,.5)) !important; }

/* ============================================================================
   AUTOFILL — Chrome paints autofilled fields with its own light background +
   near-black text; `background` can't override it, only an inset shadow can.
   The 9999s transition kills the yellow flash on submit. Mirrors the lobby
   rule in home.painterly.css.
   ============================================================================ */
#ui input:-webkit-autofill,
#ui input:-webkit-autofill:hover,
#ui input:-webkit-autofill:focus,
#ui input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--hud-ink) !important;
    caret-color: var(--hud-ink);
    box-shadow: inset 0 0 0 1000px rgba(12, 9, 6, 0.94) !important;
    transition: background-color 9999s ease-in-out 0s;
}