/* =====================================================================================================
   STYLE D, "DUSK SLATE" - the creek loading screen as a HUD ("what if we use this styling for the hud?", with a
   screenshot of creek's loading veil: slate radial gradient, a white Georgia title, a thin bar from sky blue to
   champagne, 'Loading the world' small in system-ui). A switchable layer over style C, like B: everything here is
   scoped to html.ui-d; Settings -> Interface cycles Ethereal -> Celestial Glass -> Dusk Slate (remembered as ab_ui),
   ?ui=d in the URL sets it, and without the class this file does nothing.
   The look is QUIET: solid slate sheets (no glass, no glow, no stars), hairline edges, Georgia for names and
   titles in plain white with a little letter-spacing, system-ui for everything else at 70%, and the one accent is
   the loading bar's gradient - every bar, every selection underline, every primary button wears it.
   ===================================================================================================== */
html.ui-d {
  --d-sheet: radial-gradient(120% 90% at 50% 30%, #1a2330 0%, #0b0f14 78%);
  --d-sheet-light: radial-gradient(120% 110% at 50% 20%, rgba(26, 35, 48, .94) 0%, rgba(11, 15, 20, .94) 80%);
  --d-text: #e8ece6;
  --d-dim: rgba(232, 236, 230, .7);
  --d-faint: rgba(232, 236, 230, .45);
  --d-line: rgba(255, 255, 255, .12);
  --d-line-strong: rgba(255, 255, 255, .26);
  --d-sky: #9cc2ea;
  --d-champ: #f6e7b0;
  --d-bar: linear-gradient(90deg, #9cc2ea, #f6e7b0);
  --d-track: rgba(255, 255, 255, .12);
  --d-title: Georgia, 'Times New Roman', serif;
  --d-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- panels: a slate sheet, a hairline, a thin loading-bar rule along the top ---------- */
html.ui-d :is(#stats-panel, #quest-log, #inv-panel, #bank-panel, #shop-panel, #map-panel, #dialogue, #item-menu, #inspect-card,
  #settings-panel, #help-panel, #cook-panel, #home-panel, #forge-panel, #mkt-panel, #friends-panel, #party-panel,
  .entry-card, .about-card, #sort-menu, .su-card) {
  border-radius: 12px; border-color: transparent;
  background: var(--d-bar) top / 100% 2px no-repeat border-box, var(--d-sheet) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--d-line), 0 18px 40px rgba(0, 0, 0, .5);
  color: var(--d-text); font-family: var(--d-ui); }
html.ui-d :is(#stats-name, #set-title, #help-title, #map-title, #inv-title, #cook-title, #home-title, #forge-title, #bank-title,
  #shop-title, #mkt-title, #ql-head, #dlg-name, #cine-name, #cine-name-text, #tf-name, #zt-name, #im-name, #ic-name, .fr-head,
  #sel-name, #entry-charname, #about-panel h2, .su-lead) {
  font-family: var(--d-title); font-weight: 400; color: #fff; letter-spacing: .04em; text-shadow: none; }
html.ui-d :is(#set-title, #help-title, #map-title, #inv-title, #cook-title, #home-title, #forge-title, #bank-title,
  #shop-title, #mkt-title, #ql-head, .fr-head) { font-size: 20px; }
html.ui-d .fr-head { background: #121923; }
html.ui-d .stat-row b { color: #fff; }
html.ui-d :is(.set-row small, .stat-row span, .entry-label, #sel-sub, .tagline) { color: var(--d-dim); }

/* tabs: plain words; the chosen one sits over a thin sky-to-champagne underline */
html.ui-d :is(.stab, .mtab, .ivtab, .shtab, .fgtab, .hmtab, .mkt-tab, .mkt-mode, .tt-tab, .chip) {
  background: transparent; border-color: var(--d-line); color: var(--d-dim); font-family: var(--d-ui); }
html.ui-d :is(.stab, .mtab, .ivtab, .shtab, .fgtab, .hmtab, .mkt-tab, .mkt-mode, .tt-tab, .chip):hover { color: #fff; border-color: var(--d-line-strong); }
html.ui-d :is(.stab.active, .mtab.active, .ivtab.active, .shtab.active, .fgtab.active, .hmtab.active, .mkt-tab.on, .mkt-mode.on, .tt-tab.active, .chip.on) {
  color: #fff; background: rgba(255, 255, 255, .05); border-color: var(--d-line-strong);
  box-shadow: none; background-image: var(--d-bar); background-size: 100% 2px; background-position: bottom; background-repeat: no-repeat; }
html.ui-d .tt-tab.active b { color: var(--d-champ); }
html.ui-d .chip.chip-free.on { border-color: #63b077; color: #8fe0a4; background: rgba(99, 176, 119, .12); }
html.ui-d .chip.chip-hon.on { border-color: #b98fe0; color: #dcc4ff; background: rgba(150, 110, 210, .14); }

/* buttons: hairline slate; the thing you came to do wears the bar */
html.ui-d :is(#dialogue button, #item-menu button, .shop-buy, .hint-skip, #alias-roll, .sync-row button, #wallet-btn, #wallet-list button, .su-step) {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--d-line-strong); color: var(--d-text); font-family: var(--d-ui); }
html.ui-d :is(#dialogue #dlg-shop, #dialogue #dlg-bank, #dialogue #dlg-forge, #dialogue #dlg-cook, #item-menu #im-act, .shop-buy, #respawn-btn, #entry-go) {
  background: var(--d-bar) bottom / 100% 2px no-repeat, rgba(246, 231, 176, .08); border: 1px solid rgba(246, 231, 176, .55); color: #fff;
  box-shadow: none; text-shadow: none; }
html.ui-d :is(#dialogue #dlg-shop, #dialogue #dlg-bank, #dialogue #dlg-forge, #dialogue #dlg-cook, #item-menu #im-act, .shop-buy, #respawn-btn, #entry-go):hover {
  background: var(--d-bar) bottom / 100% 2px no-repeat, rgba(246, 231, 176, .16); border-color: var(--d-champ); }
html.ui-d #item-menu #im-drop { background: rgba(120, 30, 40, .3); border-color: rgba(255, 140, 150, .45); color: #ffb3bc; }

/* ---------- the act-here prompts: a slate pill, the key a small square of champagne ---------- */
html.ui-d :is(#wp-prompt, #door-prompt, #mkt-prompt) {
  border-radius: 10px; padding: 7px 16px 7px 7px;
  background: var(--d-bar) bottom / 100% 2px no-repeat border-box, var(--d-sheet-light);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--d-line), 0 10px 24px rgba(0, 0, 0, .45);
  font: 400 17px/1.1 var(--d-title); letter-spacing: .04em; color: #fff; text-shadow: none; }
html.ui-d :is(#wp-prompt, #door-prompt, #mkt-prompt):not(:has(.pr-key)) { padding-left: 16px; }
html.ui-d :is(#wp-prompt, #door-prompt, #mkt-prompt):hover { filter: brightness(1.12); }
html.ui-d :is(#wp-prompt, #door-prompt, #mkt-prompt) .pr-label { font: inherit; }
html.ui-d .pr-label::after { color: var(--d-sky); }
html.ui-d .pr-key { width: 26px; height: 26px; border-radius: 6px; font: 600 13px/1 var(--d-ui); color: #0b0f14;
  background: var(--d-champ); box-shadow: none; animation: none; }

/* ---------- the quest tracker: a slate card, its progress the loading bar itself ---------- */
html.ui-d #quest-tracker { border-radius: 12px; padding: 11px 40px 12px 13px; gap: 11px; align-items: center;
  background: var(--d-sheet-light) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--d-line), 0 12px 28px rgba(0, 0, 0, .45); }
html.ui-d #quest-tracker::before { content: none; }
html.ui-d #quest-tracker::after { content: none; }
html.ui-d #qt-seal { width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: var(--d-sky); }
html.ui-d #qt-seal::after { content: none; }
html.ui-d #quest-tracker.ready #qt-seal { background: var(--d-champ); }
html.ui-d #qt-title { font: 400 11px/1 var(--d-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--d-faint) !important; }
html.ui-d #qt-name { font: 400 19px/1.15 var(--d-title); letter-spacing: .03em; color: #fff; margin: 4px 0 2px; text-shadow: none; }
html.ui-d #qt-progress { font: 400 12.5px/1.3 var(--d-ui); color: var(--d-dim); }
html.ui-d #qt-progress::before { content: none; }
html.ui-d #quest-tracker.turnin #qt-progress { color: #fff; }
html.ui-d #qt-bar { width: 100%; height: 4px; border-radius: 4px; background: var(--d-track); }
html.ui-d #qt-fill { border-radius: 4px; background: var(--d-bar); box-shadow: none; }
html.ui-d #qt-hide { color: var(--d-faint); }
@media (max-width: 600px) {
  html.ui-d #quest-tracker { padding: 7px 28px 8px 9px; gap: 7px; }
  html.ui-d #qt-name { font-size: 15.5px; }
  html.ui-d #qt-progress { font-size: 11.5px; }
}

/* ---------- the portrait: a hairline ring, the xp as the bar's gradient round it, a slate level badge ---------- */
html.ui-d #portrait { border: 1px solid rgba(232, 236, 230, .7); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
html.ui-d #portrait-wrap::before {
  background: conic-gradient(from 0turn, #9cc2ea 0, #f6e7b0 calc(var(--xp, 0) * 1turn), rgba(255, 255, 255, .12) 0);
  filter: none; }
html.ui-d #lvl-badge { background: #121923; color: #fff; border: 1px solid var(--d-line-strong);
  font: 400 12.5px/1.15 var(--d-title); letter-spacing: .04em; box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ui-d #hp-bar2 { background: rgba(11, 15, 20, .82); border: 1px solid var(--d-line-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ui-d #hp-fill2 { background: linear-gradient(90deg, #4fb58a, #a8e6c4); box-shadow: none; }
html.ui-d #hp-fill2.low { background: linear-gradient(90deg, #d0463c, #f2a08f); box-shadow: none; }

/* ---------- the minimap, the rail, the hotbar ---------- */
html.ui-d #mini-dock::after { border: 1px solid rgba(232, 236, 230, .75); box-shadow: 0 4px 16px rgba(0, 0, 0, .5), inset 0 0 10px rgba(0, 0, 0, .4); }
html.ui-d #mini-dock::before { border-color: var(--d-line-strong); }
html.ui-d .hud-btn { background: #121923; border: 1px solid var(--d-line-strong); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
html.ui-d .hud-btn:hover { border-color: var(--d-champ); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
html.ui-d :is(body.fpv #mini-fpv, #cam-clip.on) { border-color: var(--d-champ); color: #fff; }
html.ui-d .hb-slot { box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--d-line); }
html.ui-d .hb-cd { color: #fff; font-family: var(--d-ui); }

/* ---------- target, cast bar, zone name, toasts ---------- */
html.ui-d #target-frame { border-radius: 12px; border-color: transparent;
  background: linear-gradient(90deg, #c0283f, #f2a08f) top / 100% 2px no-repeat, var(--d-sheet-light);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--d-line), 0 10px 24px rgba(0, 0, 0, .45); }
html.ui-d #tf-name { font-size: 17px; }
html.ui-d #tf-hp { height: 6px; border-radius: 6px; background: var(--d-track); border-color: transparent; }
html.ui-d #tf-fill { border-radius: 6px; background: linear-gradient(90deg, #c0283f, #f2a08f); box-shadow: none; }
html.ui-d #cast-bar { height: 6px; border-radius: 6px; border-color: transparent; background: var(--d-track); }
html.ui-d #cast-fill { border-radius: 6px; background: var(--d-bar); box-shadow: none; }
html.ui-d #zt-name { font-family: var(--d-title); font-weight: 400; letter-spacing: .04em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
html.ui-d #zt-sub { color: var(--d-dim); font-family: var(--d-ui); }
html.ui-d .zt-rule { height: 4px; border-radius: 4px; background: var(--d-bar); box-shadow: none; }
html.ui-d .toast { background: var(--d-sheet-light); border-color: var(--d-line); color: var(--d-text); font-family: var(--d-ui);
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 10px; }
html.ui-d .xp-drop { background: var(--d-sheet-light); border-color: var(--d-line); color: var(--d-champ); border-radius: 10px; }
html.ui-d #dlg-name { font-size: 20px; }
html.ui-d #death-flash span { font-family: var(--d-title); font-weight: 400; letter-spacing: .06em; }

/* ---------- the level dial: the bar's gradient round a hairline ---------- */
html.ui-d #dial-arc-g stop:nth-child(1) { stop-color: #9cc2ea; }
html.ui-d #dial-arc-g stop:nth-child(2) { stop-color: #cbd8d0; }
html.ui-d #dial-arc-g stop:nth-child(3) { stop-color: #f6e7b0; }
html.ui-d :is(.dial-rim, .dial-tick, .dial-inner) { stroke: rgba(232, 236, 230, .55); }
html.ui-d .dial-halo { stroke: rgba(246, 231, 176, .5); }
html.ui-d .dial-tip { fill: #fff; stroke: var(--d-champ); }
html.ui-d #level-orb::before { background: radial-gradient(circle, rgba(26, 35, 48, .85) 0%, rgba(11, 15, 20, .6) 60%, rgba(11, 15, 20, 0) 74%); }
html.ui-d .orb-mid b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff;
  font-family: var(--d-title); font-weight: 400; }

/* ---------- the select screen: the loading screen itself, and the roster beside it ---------- */
html.ui-d #sel-panel { background: var(--d-sheet); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-left: 1px solid var(--d-line); box-shadow: -18px 0 44px rgba(0, 0, 0, .45); }
html.ui-d #panel-head h1 { font-family: var(--d-title); font-weight: 400; letter-spacing: .12em; color: #fff;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; }
/* one left edge for title, bar and tagline: the bar was centred across the
   whole header block (margin auto) and sat off under the middle of the word */
html.ui-d #panel-head h1 { text-indent: 0; }
html.ui-d #panel-head h1::after { content: ''; display: block; width: 120px; height: 4px; border-radius: 4px; margin: 9px 0 0; background: var(--d-bar); }
html.ui-d #panel-head .tagline { margin-top: 7px; }
html.ui-d #sel-name { font-size: clamp(26px, 3.9vw, 44px); letter-spacing: .04em; }
html.ui-d #sel-name::after { height: 4px; border-radius: 4px; background: var(--d-bar); box-shadow: none; }
html.ui-d #sel-rarity { color: var(--d-dim); font-family: var(--d-ui); }
html.ui-d #sel-traits-fold summary::before { background: var(--d-sky); border-radius: 50%; transform: none; }
html.ui-d #sel-traits { background: var(--d-sheet-light); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--d-line), 0 12px 28px rgba(0, 0, 0, .45); color: var(--d-text); }
html.ui-d :is(#roster-search, #alias-input, #world-select, #sync-input, #sync-code) {
  background: rgba(11, 15, 20, .7); border-color: var(--d-line-strong); color: #fff; font-family: var(--d-ui); }
html.ui-d :is(#roster-search, #alias-input, #world-select, #sync-input):focus { border-color: var(--d-sky); box-shadow: 0 0 0 3px rgba(156, 194, 234, .16); }
html.ui-d :is(#sel-random, #sel-sort, #about-mini) { background: #121923; border-color: var(--d-line-strong); }
html.ui-d :is(#sel-random, #sel-sort, #about-mini):hover { border-color: var(--d-champ); box-shadow: none; }
html.ui-d .rt { border-color: var(--d-line); }
html.ui-d :is(.rt.sel, .rt[data-tier].sel) { border-color: var(--d-champ); box-shadow: 0 0 0 1px var(--d-champ); }
html.ui-d .rt .rt-save { background: #121923; color: #fff; box-shadow: none; border: 1px solid var(--d-line-strong);
  font-family: var(--d-ui); font-size: 10.5px; }
html.ui-d #sel-play { border: 1px solid rgba(246, 231, 176, .6); border-radius: 10px;
  background: var(--d-bar) bottom / 100% 3px no-repeat border-box, var(--d-sheet-light);
  -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
html.ui-d #sel-play:hover { border-color: var(--d-champ); }
html.ui-d #sel-play::after { border-radius: 10px; border-color: var(--d-line); }
html.ui-d #play-label { font-family: var(--d-title); font-weight: 400; font-size: 22px; letter-spacing: .14em; color: #fff; text-shadow: none; }
html.ui-d #entry-thumb { border-color: #e8ece6; box-shadow: 0 0 0 4px rgba(156, 194, 234, .2); }
html.ui-d #entry-charname::after { height: 4px; border-radius: 4px; background: var(--d-bar); }
html.ui-d .entry-label { color: var(--d-dim); }
html.ui-d .world-row { background: rgba(255, 255, 255, .03); border-color: var(--d-line); }
html.ui-d .world-row.sel { background: rgba(156, 194, 234, .08); border-color: var(--d-sky); box-shadow: inset 0 -2px 0 var(--d-champ); }
html.ui-d .w-bar i { background: var(--d-bar); }
html.ui-d .sort-item.on { background: rgba(156, 194, 234, .1); color: #fff; box-shadow: inset 2px 0 0 var(--d-champ); }

/* the night behind the roster becomes the loading screen's slate (the starfall over it stays) */
html.ui-d #select-screen { background: radial-gradient(120% 90% at 32% 40%, #1a2330 0%, #0b0f14 70%), #0b0f14; }

/* =====================================================================================================
   DUSK SLATE, THE SECOND PASS ("now do the dusk slate hud theme improvements"): every panel toured in the style
   (tools/hud_tour.mjs) and what still wore Ethereal's gold brought into the slate.
   ===================================================================================================== */
/* the panels that name a PLACE (their titles are capitals in the markup): tracked Georgia caps, quiet and white;
   what rides beside them (the purse, the count, the zone's line) in the small system face */
html.ui-d :is(#cook-title, #forge-title, #bank-title, #shop-title, #mkt-title, #home-title, #map-title) {
  font: 400 14px/1.2 var(--d-title); letter-spacing: .16em; color: #fff; text-shadow: none; }
html.ui-d :is(#cook-title, #forge-title, #bank-title, #shop-title, #mkt-title, #home-title, #map-title) :is(span, small) {
  font: 400 11.5px var(--d-ui); letter-spacing: .02em; color: var(--d-dim); }
html.ui-d :is(#cook-panel, #forge-panel, #bank-panel, #shop-panel, #mkt-panel) > p,
html.ui-d :is(.fg-sub, .help-h, .tp-tierlbl, .seq-txt b, .ab-head) { color: var(--d-faint); }
html.ui-d .help-h { color: var(--d-champ); }

/* every working button in a panel (Cook, Brew, Mend, Buy, List...): hairline slate, the bar under it when it can act */
html.ui-d :is(.fg-btn, .shop-buy, .mkt-buy, .ck-row button) {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--d-line-strong); color: var(--d-text); border-radius: 8px;
  font-family: var(--d-ui); text-shadow: none; box-shadow: none; }
html.ui-d :is(.fg-btn, .shop-buy, .mkt-buy):not(.cant):not(:disabled) {
  background: var(--d-bar) bottom / 100% 2px no-repeat, rgba(246, 231, 176, .07); border-color: rgba(246, 231, 176, .5); color: #fff; }
html.ui-d :is(.fg-btn, .shop-buy, .mkt-buy):not(.cant):not(:disabled):hover { border-color: var(--d-champ); background-color: rgba(246, 231, 176, .14); }
html.ui-d :is(.fg-btn.cant, .shop-buy:disabled) { opacity: .55; }
html.ui-d .ck-row { border-color: var(--d-line); }
html.ui-d .ck-need { color: var(--d-dim); }

/* the skill tree: heads in Georgia, learned skills framed in champagne (not gold), the lit path the bar */
html.ui-d .tt-head b { font: 400 15px/1.2 var(--d-title); letter-spacing: .06em; text-transform: none; color: #fff; }
html.ui-d :is(.tt-head small, .tt-head em) { color: var(--d-dim); font-family: var(--d-ui); }
html.ui-d .tt-tab b { font-family: var(--d-ui); letter-spacing: .06em; }
html.ui-d :is(.tt-skill.s-known, .tt-skill.s-learned) .tt-ico {
  border-color: var(--d-champ); box-shadow: 0 0 0 1px rgba(11, 15, 20, .9), 0 0 12px rgba(156, 194, 234, .25); }
html.ui-d :is(.tt-skill.s-known, .tt-skill.s-learned) .tt-ico::after {
  background: var(--d-champ); box-shadow: 0 0 0 2px #0b0f14; }
html.ui-d :is(.tt-skill.s-known, .tt-skill.s-learned) .tt-ico::before { border-color: #0b0f14; }
html.ui-d :is(.tt-skill.s-known, .tt-skill.s-learned) .tt-name { color: #fff; }
html.ui-d .tt-link .tt-line { background: rgba(255, 255, 255, .16); width: 2px; }
html.ui-d .tt-link .tt-arrow { border-top-color: rgba(255, 255, 255, .16); }
html.ui-d .tt-link.lit .tt-line { background: linear-gradient(180deg, #9cc2ea, #f6e7b0); }
html.ui-d .tt-link.lit .tt-arrow { border-top-color: var(--d-champ); }
html.ui-d :is(.tt-rune.s-learned, .tt-rune.s-learned .tt-rank) { border-color: var(--d-champ); color: #fff; }
html.ui-d .tt-card { background: var(--d-sheet); border-color: var(--d-line-strong); }
html.ui-d #tree-paths .tp-gate.open { color: var(--d-champ); border-color: rgba(246, 231, 176, .4); }
html.ui-d .tree-pts { color: var(--d-champ); font-family: var(--d-ui); }

/* the journal's tracker switch: a hairline pill, champagne only when it is on */
html.ui-d #ql-track { background: transparent; border: 1px solid rgba(246, 231, 176, .55); color: var(--d-champ); font: 400 11px var(--d-ui); }
html.ui-d #ql-track.off { border-color: var(--d-line-strong); color: var(--d-faint); }

/* settings: the painted gold icons become quiet silver line marks, 'on' is champagne */
html.ui-d .set-ico { filter: grayscale(1) brightness(1.55) contrast(.9); opacity: .78; }
html.ui-d .set-row.off .set-ico { opacity: .4; }
html.ui-d .set-row { background: rgba(255, 255, 255, .03); border-color: var(--d-line); font-family: var(--d-ui); }
html.ui-d .set-row:hover { border-color: var(--d-line-strong); background: rgba(255, 255, 255, .06); }
html.ui-d .set-row[data-toggle]:not(.off)::after { color: var(--d-champ) !important; }

/* the hotbar: rounded slate squares (the class colour stays as the rim), the cooldown in champagne */
html.ui-d .hb-slot { border-radius: 14px; background: linear-gradient(180deg, #1a2330, #0b0f14);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06); }
html.ui-d .hb-slot.has-art { background: #0b0f14; }
html.ui-d .hb-slot :is(img, .hb-art) { border-radius: 12px; }
html.ui-d .hb-slot.ready::after { border-radius: 17px; }
html.ui-d .hb-cd { color: var(--d-champ); font-family: var(--d-ui); }
html.ui-d .hb-key { font-family: var(--d-ui); }

/* chat and the event log: slate, system face */
html.ui-d #chat { background: var(--d-sheet-light); border: 1px solid var(--d-line); border-radius: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ui-d #chat :is(input, textarea) { background: rgba(11, 15, 20, .7); border-color: var(--d-line-strong); color: #fff; }

/* the item card and the inspect card: the bar along the top, slate */
html.ui-d :is(#item-menu, #inspect-card) :is(.im-cmp, #ic-meta) { color: var(--d-faint); }
html.ui-d .lo-title { color: var(--d-faint); font-family: var(--d-ui); letter-spacing: .14em; }

/* =====================================================================================================
   DUSK SLATE, THE HOTBAR ("improve the hotbar styling too"): a slate tray that holds the row, rounded slots whose
   state you can read at a glance - ready (lit rim + a line of the class colour under it), cooling (a clean sweep
   that matches the slot's corners, the seconds big), locked (dark art, a lock and its level, not a washed-out ghost)
   - and the key as a small chip on the slot's lower edge.
   ===================================================================================================== */
html.ui-d .hb-slot { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hb-rim) 55%, rgba(255, 255, 255, .1));
  background: linear-gradient(180deg, #1d2734, #0d1219); animation: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 8px rgba(0, 0, 0, .5);
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease, --cd .32s linear; }
html.ui-d .hb-art { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 10px; box-shadow: none; }
html.ui-d .hb-slot:not(.locked):hover { transform: translateY(-2px); border-color: var(--d-champ); }
/* ready: the class colour lights the rim, glows softly, and draws a short line under the slot */
html.ui-d .hb-slot.ready { animation: none; border-color: var(--hb-rim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(0, 0, 0, .45), 0 0 12px color-mix(in srgb, var(--hb-glow) 55%, transparent), 0 3px 8px rgba(0, 0, 0, .5); }
html.ui-d .hb-slot.ready::after { content: ''; position: absolute; inset: auto 10px -11px; height: 2px; border: none; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--hb-rim), transparent); opacity: .95; animation: none; transform: none; }
/* cooling: the sweep follows the slot's corners; the art dims and desaturates; the seconds read big and white */
html.ui-d .hb-slot.cooling::before { inset: 2px; border-radius: 10px;
  background: conic-gradient(rgba(6, 9, 14, .8) calc(var(--cd, 0) * 1turn), rgba(6, 9, 14, 0) 0); }
html.ui-d .hb-slot.cooling :is(.hb-art, .hb-icon) { filter: saturate(.35) brightness(.85); opacity: 1; }
html.ui-d .hb-cd { font: 700 17px/1 var(--d-ui); color: #fff; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .85); }
/* locked: solid and dark, a lock above its level - you can see what is coming without it looking broken */
html.ui-d .hb-slot.locked { opacity: 1; filter: none; border-color: rgba(255, 255, 255, .1); background: #0b0f14; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
html.ui-d .hb-slot.locked :is(.hb-art, .hb-icon) { filter: grayscale(1) brightness(.32); opacity: 1; }
html.ui-d .hb-slot.locked .hb-cd { align-items: flex-end; padding-bottom: 7px; background: none; border-radius: 0;
  font: 600 9.5px/1 var(--d-ui); letter-spacing: .05em; color: rgba(232, 236, 230, .72); text-shadow: 0 1px 2px #000; }
html.ui-d .hb-slot.locked::before { content: ''; position: absolute; left: 50%; top: 32%; width: 14px; height: 14px; transform: translate(-50%, -50%); z-index: 3;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8ece6' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  opacity: .7; }
/* the key: a small chip on the lower edge, champagne when the skill is ready */
html.ui-d .hb-key { top: auto; bottom: -7px; left: 50%; transform: translateX(-50%); min-width: 16px; height: 14px; padding: 0 4px; box-sizing: border-box;
  border-radius: 5px; background: #0b0f14; border: 1px solid rgba(255, 255, 255, .2); font: 600 9.5px/12px var(--d-ui); color: rgba(232, 236, 230, .7);
  text-align: center; text-shadow: none; z-index: 5; }
html.ui-d .hb-slot.ready .hb-key { color: var(--d-champ); border-color: rgba(246, 231, 176, .5); }
/* the moment a cooldown ends: a champagne ring opens off the slot */
html.ui-d .hb-slot.ignite { animation: d-ignite .55s ease-out; }
@keyframes d-ignite { 0% { box-shadow: 0 0 0 0 rgba(246, 231, 176, .9), 0 0 18px rgba(246, 231, 176, .8); border-color: #f6e7b0; }
  100% { box-shadow: 0 0 0 10px rgba(246, 231, 176, 0), 0 0 0 rgba(0, 0, 0, 0); } }
/* a primed chain hums champagne; a cast in progress pulses sky */
html.ui-d .hb-slot.chain-primed { border-color: var(--d-champ); animation: d-chain 1s ease-in-out infinite; }
@keyframes d-chain { 0%, 100% { box-shadow: 0 0 0 1px rgba(246, 231, 176, .5), 0 0 6px rgba(246, 231, 176, .4); } 50% { box-shadow: 0 0 0 1px var(--d-champ), 0 0 16px rgba(246, 231, 176, .8); } }
html.ui-d .hb-slot.casting { border-color: var(--d-sky); animation: d-cast .8s ease-in-out infinite; }
@keyframes d-cast { 0%, 100% { box-shadow: 0 0 0 1px rgba(156, 194, 234, .5), 0 0 8px rgba(156, 194, 234, .4); } 50% { box-shadow: 0 0 0 1px var(--d-sky), 0 0 18px rgba(156, 194, 234, .85); } }
/* THE TRAY: only where the bar is a ROW (a mouse at desktop width, or anyone who has pressed a key); the touch
   layouts are a column beside the attack button and keep their own look */
@media (pointer: fine) and (min-width: 701px) {
  html.ui-d #hotbar { gap: 9px; padding: 9px 11px 15px; }
  html.ui-d #hotbar .hb-slot { width: 52px; height: 52px; }
  html.ui-d #hotbar::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 16px;
    background: linear-gradient(90deg, rgba(156, 194, 234, 0), #9cc2ea 30%, #f6e7b0 70%, rgba(246, 231, 176, 0)) top / 100% 1px no-repeat,
      linear-gradient(180deg, rgba(26, 35, 48, .9), rgba(11, 15, 20, .94));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 30px rgba(0, 0, 0, .5); }
}
html.ui-d body.kb #hotbar { gap: 9px; padding: 9px 11px 15px; }
html.ui-d body.kb #hotbar::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 16px;
  background: linear-gradient(90deg, rgba(156, 194, 234, 0), #9cc2ea 30%, #f6e7b0 70%, rgba(246, 231, 176, 0)) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(26, 35, 48, .9), rgba(11, 15, 20, .94));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 30px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) { html.ui-d .hb-slot:is(.chain-primed, .casting, .ignite) { animation: none; } }

/* Dusk Slate: the food slot in the tray - the same rounded slate slot, a green rim, the heal on a small plate at the
   top, the key as a chip on the lower edge like the skills */
html.ui-d #quick-eat.in-bar { width: 52px; height: 52px; padding: 2px; border-radius: 12px; border: 1px solid rgba(127, 191, 127, .7);
  background: linear-gradient(180deg, #1d2734, #0d1219);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 10px rgba(127, 191, 127, .28), 0 3px 8px rgba(0, 0, 0, .5); }
html.ui-d #quick-eat.in-bar #qe-art { border-radius: 10px; }
html.ui-d #quick-eat.in-bar #qe-heal { top: 3px; left: 4px; bottom: auto; transform: none; padding: 0 4px; border-radius: 4px;
  font: 700 9.5px/14px var(--d-ui); color: #a6efb0; background: rgba(11, 15, 20, .8); text-shadow: none; }
html.ui-d #quick-eat.in-bar #qe-count { top: -6px; right: -6px; background: #0b0f14; border-color: rgba(127, 191, 127, .75); color: #d9ffd9; font-family: var(--d-ui); }
html.ui-d #quick-eat.in-bar #qe-key { top: auto; bottom: -7px; left: 50%; transform: translateX(-50%); min-width: 16px; height: 14px; padding: 0 4px;
  box-sizing: border-box; border-radius: 5px; background: #0b0f14; border: 1px solid rgba(127, 191, 127, .55); font: 600 9.5px/12px var(--d-ui);
  color: #b7e8bd; text-align: center; text-shadow: none; letter-spacing: 0; }
html.ui-d #quick-eat.in-bar::after { right: -10px; }

/* THE CAST BAR ("why is cast bar there?"): Dusk Slate draws it 6px tall, which clipped the skill's name inside it, and
   the hotbar tray (88px tall) rose over its old place at 74px. The name now sits ABOVE the thin bar, and where the
   bar is a row with its tray the cast bar stands clear above it. */
html.ui-d #cast-bar { overflow: visible; width: 220px; }
html.ui-d #cast-fill { border-radius: 6px; background: linear-gradient(90deg, #9cc2ea, #f6e7b0); box-shadow: 0 0 8px rgba(246, 231, 176, .5); }
html.ui-d #cast-label { inset: auto 0 calc(100% + 5px) 0; font: 600 12px/1 var(--d-title); letter-spacing: .04em; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .8); }
@media (pointer: fine) and (min-width: 701px) { html.ui-d #cast-bar { bottom: 104px; } }
html.ui-d body.kb #cast-bar { bottom: 104px; }

/* =====================================================================================================
   DUSK SLATE, THE CHAT ("improve the chat box styling too"). One slate sheet with the bar along its top, a quiet
   CHAT heading with History as a chip beside it, lines set clean on the sheet (no outline: the sheet is what makes
   them readable now), names in champagne, the party in sky with a rule down the left, system lines plain and dim,
   and an input that is a real field: a slate well, a champagne focus ring, a send key in the bar's own gradient.
   ===================================================================================================== */
html.ui-d #chat { gap: 0; padding: 0; border: 0; border-radius: 12px;
  background: var(--d-bar) top / 100% 2px no-repeat border-box, var(--d-sheet-light) border-box;
  box-shadow: 0 0 0 1px var(--d-line), 0 10px 28px rgba(0, 0, 0, .45); }
html.ui-d #chat-log { gap: 1px; padding: 6px 8px 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.ui-d #chat-log::-webkit-scrollbar { width: 6px; }
html.ui-d #chat-log::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }
html.ui-d #chat-log::-webkit-scrollbar-track { background: transparent; }
html.ui-d .chat-line, html.ui-d body:not(.kb) .chat-line {
  font: 500 13px/1.45 'Nunito Sans', var(--d-ui); color: var(--d-text); letter-spacing: .1px;
  padding: 1px 6px; border-radius: 6px; text-shadow: 0 1px 1px rgba(0, 0, 0, .45); -webkit-text-stroke: 0; }
html.ui-d .chat-line:hover { background: rgba(255, 255, 255, .035); }
html.ui-d .chat-line .who { color: var(--d-champ); font-weight: 700; }
html.ui-d .chat-line .zone { color: rgba(156, 194, 234, .62); font-size: 11px; font-weight: 600; letter-spacing: .2px; }
html.ui-d .chat-line.party, html.ui-d body:not(.kb) .chat-line.party { color: #cfe6ff; box-shadow: inset 2px 0 0 var(--d-sky); border-radius: 0; }
html.ui-d .chat-line .party-tag { color: var(--d-sky); font-size: 11px; font-weight: 700; }
html.ui-d .chat-line.sys, html.ui-d body:not(.kb) .chat-line.sys { color: var(--d-dim); font-style: normal; font-size: 12px; }
html.ui-d #chat-form { padding: 4px 8px 8px; gap: 6px; }
html.ui-d #chat-input { height: 34px; box-sizing: border-box; padding: 0 12px; border-radius: 10px;
  background: rgba(5, 8, 12, .62); border: 1px solid var(--d-line); color: #fff;
  font: 500 13px 'Nunito Sans', var(--d-ui); opacity: .8; transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
html.ui-d #chat-input::placeholder { color: var(--d-faint); }
html.ui-d #chat-input:focus { opacity: 1; border-color: rgba(246, 231, 176, .55); box-shadow: 0 0 0 3px rgba(246, 231, 176, .12); }
html.ui-d #chat-send { margin: 0; width: 34px; height: 34px; border: 0; border-radius: 10px;
  background: var(--d-bar); color: #0b0f14; font-size: 13px; opacity: .85; transition: opacity .15s ease, filter .15s ease; }
html.ui-d #chat-send:hover, html.ui-d #chat-form:focus-within #chat-send { opacity: 1; }
html.ui-d #chat-send:active { filter: brightness(.88); background: var(--d-bar); }
/* read mode: the sheet already carries the log, so the old second box inside it goes */
html.ui-d #chat.tall #chat-log, html.ui-d body:not(.kb) #chat.tall #chat-log { background: transparent; border: 0; padding: 6px 8px 4px; }
html.ui-d .pan-grip { color: var(--d-faint); background: transparent; }

/* the heading row, where the box is a box (not the phone's bubble layout) */
@media (min-width: 701px) {
  html.ui-d #chat { padding-top: 30px; }
  html.ui-d #chat::before { content: 'Chat'; position: absolute; left: 14px; top: 9px;
    font: 700 10.5px/14px var(--d-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--d-faint); pointer-events: none; }
  html.ui-d #chat::after { content: ''; position: absolute; left: 10px; right: 10px; top: 29px; height: 1px; background: var(--d-line); pointer-events: none; }
  html.ui-d #chat .pan-grip { top: 6px; right: 6px; }
  html.ui-d #chat-hist { position: absolute; top: 6px; right: 28px; height: 19px; padding: 0 9px; border-radius: 999px;
    border: 1px solid var(--d-line); background: rgba(255, 255, 255, .03); color: var(--d-dim);
    font: 600 10.5px/17px var(--d-ui); letter-spacing: .04em; opacity: 1; }
  html.ui-d #chat-hist:hover { color: #fff; border-color: var(--d-line-strong); }
  html.ui-d #chat-hist.unread { color: var(--d-champ); border-color: rgba(246, 231, 176, .5); }
  html.ui-d #chat-hist.unread::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0;
    border-radius: 50%; background: var(--d-champ); vertical-align: middle; }
  html.ui-d #chat.tall #chat-hist { color: #fff; border-color: var(--d-line-strong); }
}

/* the phone's bubbles: slate discs with a hairline, a champagne ring when something new has been said */
html.ui-d #chat-toggle { background: radial-gradient(circle at 50% 30%, #1d2734, #0b0f14); border: 1px solid var(--d-line-strong);
  color: var(--d-text); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
html.ui-d #chat-toggle.unread { border-color: rgba(246, 231, 176, .8); box-shadow: 0 0 0 3px rgba(246, 231, 176, .14), 0 4px 12px rgba(0, 0, 0, .45); }
@media (max-width: 700px) {
  html.ui-d #chat-hist { background: radial-gradient(circle at 50% 30%, #1d2734, #0b0f14); border: 1px solid var(--d-line-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
  html.ui-d #chat-hist.unread { border-color: rgba(246, 231, 176, .8); }
  html.ui-d .chat-line, html.ui-d body:not(.kb) .chat-line { font-size: 12px; padding: 0 4px; }
  /* three whole lines when nobody is reading, and the line above them fades out rather than showing a cut sliver */
  html.ui-d #chat:not(.tall) #chat-log, html.ui-d body:not(.kb) #chat:not(.tall) #chat-log { max-height: 54px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px); mask-image: linear-gradient(to bottom, transparent 0, #000 12px); }
}

/* =====================================================================================================
   DUSK SLATE, THE BATTLE LOG ("improve the battle log styling too"). Still click-through and still fading out at
   the top, but each line is a slim slate pill that hugs its words, led by a small diamond in the colour of what
   kind of line it is (hud.js LOG_KINDS): champagne for loot, sky for quest progress, coral for a refusal, mint for
   travel, lilac for something gained, dim italic for a voice. The newest line is the brightest; older ones step
   back. On a phone the lines stay bare (the bottom lane is the thumb's) and only take the colours.
   ===================================================================================================== */
html.ui-d #log { font-family: 'Nunito Sans', var(--d-ui); color: var(--d-text); }
html.ui-d #log > div { --k: rgba(232, 236, 230, .5); }
html.ui-d #log > .log-loot { --k: #f3d77e; color: #f6dc8c; }
html.ui-d #log > .log-quest { --k: #8cc0f2; color: #a9d0f7; }
html.ui-d #log > .log-warn { --k: #f58f7f; color: #f7a497; }
html.ui-d #log > .log-travel { --k: #7fdcb8; color: #98e5c6; }
html.ui-d #log > .log-gain { --k: #b9a4ff; color: #c7b8ff; }
html.ui-d #log > .log-say { --k: rgba(232, 236, 230, .35); color: var(--d-dim); font-style: italic; }
html.ui-d #log > .log-legend { --k: #ffd166; color: #f3e2ff; font-weight: 700; text-shadow: 0 0 8px rgba(176, 112, 255, .55); }   /* a 1-of-1 entering the zone */
@keyframes d-log-in { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 701px) {
  html.ui-d #log { align-items: flex-end; gap: 3px; line-height: 18px; max-height: 150px; padding: 0 2px; text-shadow: none;
    -webkit-mask-image: linear-gradient(to top, #000 62%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(to top, #000 62%, rgba(0, 0, 0, 0)); }
  html.ui-d #log > div:not(.pan-grip) { flex: none; max-width: 100%; box-sizing: border-box; padding: 2px 10px 2px 8px; border-radius: 8px;
    background: rgba(11, 15, 20, .88); box-shadow: 0 0 0 1px var(--d-line), 0 2px 6px rgba(0, 0, 0, .35);
    font-size: 12.5px; font-weight: 600; letter-spacing: .1px; text-align: left; animation: d-log-in .22s ease-out; }
  html.ui-d #log > div:not(.pan-grip)::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 1px;
    vertical-align: middle; transform: rotate(45deg); background: var(--k); box-shadow: 0 0 6px var(--k); }
  /* the newest line is the one to read; the rest step back */
  html.ui-d #log > div:not(.pan-grip) ~ div:not(.pan-grip) { opacity: .9; }
  html.ui-d #log > div:not(.pan-grip) ~ div:not(.pan-grip) ~ div:not(.pan-grip) { opacity: .78; }
  html.ui-d #log .pan-grip { top: auto; bottom: 100%; color: var(--d-faint); background: transparent; }
}
@media (max-width: 700px) {
  html.ui-d #log { font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
  html.ui-d #log > div:not(.pan-grip) { -webkit-text-stroke: 2.4px rgba(0, 0, 0, .9); paint-order: stroke fill; }
}

/* =====================================================================================================
   DUSK SLATE, THE QUEST TRACKER ("improve the quest tracker styling too"). The bar along the top like every slate
   sheet; the seal becomes a ring that fills with the quest (hud.js --qp) around its diamond - sky while you work,
   champagne when it is time to hand in or a new quest waits; a chip beside QUEST says where you are at a glance
   (3 / 8, Turn in, New); the card lifts under the pointer because a tap opens the quest log.
   ===================================================================================================== */
html.ui-d #quest-tracker { --qc: var(--d-sky); align-items: center; gap: 12px; padding: 12px 40px 12px 12px;
  background: var(--d-bar) top / 100% 2px no-repeat border-box, var(--d-sheet-light) border-box !important;
  transition: box-shadow .18s ease, transform .18s ease; }
html.ui-d #quest-tracker:hover { box-shadow: 0 0 0 1px var(--d-line-strong), 0 14px 30px rgba(0, 0, 0, .5); }
html.ui-d #quest-tracker:is(.turnin, .ready) { --qc: var(--d-champ); }
html.ui-d #qt-seal { position: relative; width: 34px; height: 34px; margin: 0; border-radius: 50%; background: rgba(5, 8, 12, .55);
  box-shadow: inset 0 0 0 1px var(--d-line); display: grid; place-items: center; font-size: 0; }
html.ui-d #qt-seal::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--qc) calc(var(--qp, 0) * 360deg), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); transition: background .35s ease; }
html.ui-d #qt-seal::after { content: ''; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 1.5px;
  background: var(--qc); box-shadow: 0 0 10px var(--qc); animation: none; }
html.ui-d #quest-tracker.turnin #qt-seal::after, html.ui-d #quest-tracker.ready #qt-seal::after { background: var(--qc); box-shadow: 0 0 10px var(--qc); animation: d-qt-glow 1.8s ease-in-out infinite; }
@keyframes d-qt-glow { 50% { box-shadow: 0 0 18px var(--qc), 0 0 4px var(--qc); } }
html.ui-d #quest-tracker.ready #qt-seal, html.ui-d #quest-tracker.turnin #qt-seal { background: rgba(246, 231, 176, .08); }
html.ui-d #qt-title { display: flex; align-items: center; gap: 8px; }
html.ui-d #qt-title::after { content: attr(data-chip); padding: 2px 7px; border-radius: 999px; font: 700 10px/1.2 var(--d-ui);
  letter-spacing: .06em; text-transform: none; color: var(--qc); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d #qt-title:not([data-chip])::after, html.ui-d #qt-title[data-chip='']::after { content: none; }
html.ui-d :is(#quest-tracker.turnin, #quest-tracker.ready) #qt-title::after { background: rgba(246, 231, 176, .1); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .35); }
html.ui-d #qt-name { margin: 5px 0 2px; }
html.ui-d #quest-tracker.turnin #qt-progress { color: var(--d-champ); }
html.ui-d #qt-bar { height: 3px; margin-top: 8px; }
html.ui-d #qt-fill { box-shadow: 0 0 8px rgba(156, 194, 234, .45); }
html.ui-d #quest-tracker.turnin #qt-fill { background: var(--d-champ); box-shadow: 0 0 8px rgba(246, 231, 176, .55); }
html.ui-d #quest-tracker.turnin { animation: none; }
html.ui-d #qt-hide { border-radius: 8px; }
html.ui-d #qt-hide:hover { color: #fff; background: rgba(255, 255, 255, .08); }
@media (max-width: 600px) {
  html.ui-d #quest-tracker { gap: 9px; padding: 8px 28px 8px 8px; }
  html.ui-d #qt-seal { width: 26px; height: 26px; }
  html.ui-d #qt-seal::after { width: 7px; height: 7px; }
  html.ui-d #qt-title::after { font-size: 9.5px; padding: 1px 6px; }
}

/* =====================================================================================================
   DUSK SLATE, THE TARGET FRAME ("improve the target frame styling too"). A slate card with the hostile line along
   its top; a header of the name in the title face and the level as a chip; a 12px bar that carries its numbers,
   with a sheen, and the trail of the last hit falling behind the fill; under a quarter the bar warms and breathes.
   An elite turns the line and the rim silver and wears ELITE as a chip in the header instead of a tab over the
   edge. The pills of everything else on you are small slate cards to match, the one you are hitting in champagne.
   ===================================================================================================== */
html.ui-d #target-frame { padding: 10px 12px 11px; min-width: 240px; border: 0 !important; border-radius: 12px; text-align: left;
  background: linear-gradient(90deg, #c0283f, #f2a08f) top / 100% 2px no-repeat border-box, var(--d-sheet-light) border-box;
  box-shadow: 0 0 0 1px var(--d-line), 0 10px 24px rgba(0, 0, 0, .45); }
html.ui-d #tf-head { justify-content: flex-start; gap: 8px; margin-bottom: 7px; }
html.ui-d #tf-name { flex: 1; font: 400 16px/1.15 var(--d-title); letter-spacing: .03em; color: #fff; text-shadow: none; }
html.ui-d #tf-lv { order: 2; opacity: 1; padding: 2px 7px; border-radius: 999px; font: 700 10px/1.2 var(--d-ui); letter-spacing: .05em;
  color: #f5b4a8; background: rgba(242, 160, 143, .1); box-shadow: inset 0 0 0 1px rgba(242, 160, 143, .3); }
html.ui-d #tf-hp { height: 12px; border: 0; border-radius: 6px; background: rgba(5, 8, 12, .7); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d #tf-fill { border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #a81d34, #e0485a 65%, #f2a08f); }
html.ui-d #tf-trail { border-radius: 6px; background: rgba(246, 231, 176, .55); }
html.ui-d #tf-num { z-index: 1; font: 700 9.5px/1 var(--d-ui); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
html.ui-d #target-frame.low #tf-fill { animation: d-tf-low 1.1s ease-in-out infinite; }
@keyframes d-tf-low { 50% { filter: brightness(1.35) saturate(1.2); } }
/* elite: silver line and rim, ELITE as a chip in the header */
html.ui-d #target-frame.elite { border: 0 !important;
  background: linear-gradient(90deg, #8d97ad, #f2f5ff, #8d97ad) top / 100% 2px no-repeat border-box, var(--d-sheet-light) border-box;
  box-shadow: 0 0 0 1px rgba(213, 220, 234, .45), 0 0 18px rgba(213, 220, 234, .18), 0 10px 24px rgba(0, 0, 0, .45); }
html.ui-d #target-frame.elite::before, html.ui-d #target-frame.elite #tf-name::before { content: none; }
html.ui-d #target-frame.elite #tf-head::before { content: 'Elite'; order: 1; flex: none; padding: 2px 7px; border-radius: 999px;
  font: 800 10px/1.2 var(--d-ui); letter-spacing: .08em; text-transform: uppercase; color: #12151c; background: linear-gradient(180deg, #f2f5ff, #c3cad9); }
html.ui-d #target-frame.elite #tf-name { color: #f2f5ff; }
html.ui-d #target-frame.elite #tf-lv { color: #dfe5f2; background: rgba(213, 220, 234, .1); box-shadow: inset 0 0 0 1px rgba(213, 220, 234, .35); }
/* the others on you */
html.ui-d .threat { gap: 8px; padding: 5px 10px 6px; border: 0; border-radius: 10px; background: var(--d-sheet-light);
  box-shadow: 0 0 0 1px var(--d-line), 0 4px 12px rgba(0, 0, 0, .4); }
html.ui-d .threat:active { box-shadow: 0 0 0 1px var(--d-line-strong), 0 4px 12px rgba(0, 0, 0, .4); }
html.ui-d .threat .th-name { font: 600 11.5px/1.2 var(--d-ui); color: var(--d-text); }
html.ui-d .threat .th-hp { height: 6px; border: 0; border-radius: 3px; background: rgba(5, 8, 12, .7); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d .threat .th-fill { border-radius: 3px; background: linear-gradient(90deg, #a81d34, #e0485a 65%, #f2a08f); }
html.ui-d .threat.is-target { box-shadow: 0 0 0 1px rgba(246, 231, 176, .55), 0 4px 12px rgba(0, 0, 0, .4); background: var(--d-sheet-light); }
html.ui-d .threat.is-target .th-fill { background: var(--d-champ); }
html.ui-d .threat.elite { box-shadow: 0 0 0 1px rgba(213, 220, 234, .5), 0 0 10px rgba(213, 220, 234, .18), 0 4px 12px rgba(0, 0, 0, .4); }
html.ui-d .threat.elite .th-name { color: #f2f5ff; }
@media (max-width: 700px) {
  html.ui-d #target-frame { min-width: 190px; padding: 8px 10px 9px; }
  html.ui-d #tf-name { font-size: 14.5px; }
  html.ui-d .threat { padding: 11px 12px 12px; border-radius: 12px; }
}

/* =====================================================================================================
   DUSK SLATE, THE MINIMAP FRAME ("improve the minimap frame styling too"). A slate bezel round the disc with a
   hairline on its inner edge, the bar's sky-to-champagne gradient as a fine outer ring, and the zone's name on a
   small plate over the foot of the ring. The ring and the plate live on #mini-edge, the unclipped layer that sits
   exactly over the dock (the dock clips to its circle, which is why the old outer ring never showed). The ring
   brightens under the pointer, because a tap opens the zone map.
   ===================================================================================================== */
html.ui-d #mini-dock { box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
html.ui-d #mini-dock::after { inset: 0; border: 4px solid #141b25;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 16px rgba(0, 0, 0, .55); }
html.ui-d #mini-dock::before { content: none; }
html.ui-d #mini-edge, html.ui-d #mini-edge:empty { display: block; }
html.ui-d #mini-edge::before { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg, #9cc2ea, #f6e7b0 50%, #9cc2ea);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px));
  opacity: .85; transition: opacity .15s ease, filter .15s ease; }
html.ui-d #mini-dock:hover + #mini-edge::before { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 4px rgba(246, 231, 176, .5)); }
html.ui-d #mini-edge[data-zone]::after { content: attr(data-zone); position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  max-width: calc(var(--mini-size) + 36px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;
  padding: 2px 9px; border-radius: 999px; font: 700 10px/14px var(--d-ui); letter-spacing: .05em; color: var(--d-text);
  background: #0f151d; box-shadow: 0 0 0 1px var(--d-line-strong), 0 3px 8px rgba(0, 0, 0, .45); pointer-events: none; }
html.ui-d #mini-edge[data-zone='']::after { content: none; }
@media (max-width: 700px) {
  html.ui-d #mini-dock::after { border-width: 3px; }
  html.ui-d #mini-edge[data-zone]::after { font-size: 9px; line-height: 13px; padding: 1px 7px; bottom: -7px; }
}

/* =====================================================================================================
   DUSK SLATE, THE PORTRAIT ("improve the player portrait frame styling too"). The same family as the minimap: a
   slate bezel with a hairline round the picture, the XP as a fine sky-to-champagne ring outside it with a small
   bright tip riding the end of the arc, a level pill (a dim LV, the number in champagne), and an HP bar built like
   the target's - a slate track, a fill with a sheen, the trail of the last hit falling behind it, coral and
   breathing when you are low.
   ===================================================================================================== */
html.ui-d #portrait { border: 3px solid #141b25; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 6px 16px rgba(0, 0, 0, .5); }
html.ui-d #portrait-wrap::before { inset: -6px;
  background: conic-gradient(from 0turn, #9cc2ea 0, #f6e7b0 calc(var(--xp, 0) * 1turn), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  filter: drop-shadow(0 0 3px rgba(246, 231, 176, .3)); animation: none; }
html.ui-d #portrait-wrap::after { content: none; }
html.ui-d #xp-spark { inset: -6px; }
html.ui-d #xp-spark::before { top: -1.5px; width: 6px; height: 6px; margin-left: -3px;
  background: radial-gradient(circle, #fff 0%, #f6e7b0 60%, rgba(246, 231, 176, 0) 100%);
  box-shadow: 0 0 6px rgba(246, 231, 176, .9); animation: d-xp-tip 1.6s ease-in-out infinite; }
@keyframes d-xp-tip { 50% { box-shadow: 0 0 10px rgba(246, 231, 176, 1); } }
html.ui-d #lvl-badge { bottom: -8px; padding: 2px 8px 2px 7px; border: 0; border-radius: 999px; color: var(--d-champ);
  font: 400 12.5px/1.2 var(--d-title); letter-spacing: .03em; background: #121923;
  box-shadow: 0 0 0 1px rgba(246, 231, 176, .35), 0 3px 8px rgba(0, 0, 0, .5); }
html.ui-d #lvl-badge::before { content: 'Lv'; margin-right: 4px; font: 700 9px/1 var(--d-ui); letter-spacing: .1em;
  text-transform: uppercase; color: var(--d-faint); vertical-align: 1px; }
html.ui-d #lvl-badge.bump { animation: d-lvl-bump .8s ease-out; }
@keyframes d-lvl-bump {
  0% { transform: translateX(-50%) scale(1); }
  35% { transform: translateX(-50%) scale(1.3); box-shadow: 0 0 0 1px rgba(246, 231, 176, .8), 0 0 18px rgba(246, 231, 176, .9); }
  100% { transform: translateX(-50%) scale(1); } }
html.ui-d #hp-bar2 { margin-top: 14px; border: 0; border-radius: 999px; background: rgba(5, 8, 12, .78);
  box-shadow: inset 0 0 0 1px var(--d-line-strong), 0 3px 8px rgba(0, 0, 0, .45); }
html.ui-d #hp-fill2 { border-radius: 999px; box-shadow: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #2f9e6b, #5fcf92 60%, #a8e6c4); }
html.ui-d #hp-fill2.low { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #c0283f, #e0485a 60%, #f2a08f);
  box-shadow: none; }
html.ui-d #hp-trail2 { border-radius: 999px; background: rgba(246, 231, 176, .55); }
html.ui-d #hp-num { font: 700 10px/1 var(--d-ui); letter-spacing: .04em; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8); }

/* =====================================================================================================
   DUSK SLATE, THE SETTINGS PANEL ("improve the settings panel styling too"). CSS only, no row moved: quiet section
   labels over the groups that are already there (Character / Sound / Display / More - drawn above the row and
   click-through), rows as a flat list that lights under the pointer, each icon on a small slate tile, the three
   toggles as real switches in the bar's gradient instead of the words on/off, values as champagne chips at the
   right, and the contract address as a slate field. A switched-off row no longer fades as a whole: the switch and
   the icon say it.
   ===================================================================================================== */
/* the old painted frame's 18px transparent border is gone: it ate the width and drew a second frame inside the sheet */
html.ui-d #settings-panel { border-width: 0; padding: 18px 18px 14px; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.ui-d #set-title { margin-bottom: 4px; }
html.ui-d #set-close { width: 28px; height: 28px; font-size: 13px; }
html.ui-d .set-row { position: relative; gap: 12px; margin: 0 0 1px; padding: 6px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--d-text); font: 500 13.5px/1.3 var(--d-ui); opacity: 1; transition: background .12s ease; }
html.ui-d .set-row:hover { background: rgba(255, 255, 255, .055); border: 0; }
html.ui-d .set-row:active { background: rgba(255, 255, 255, .08); }
html.ui-d .set-row.off { opacity: 1; }
html.ui-d .set-ico { width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 8px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--d-line); opacity: .9; }
html.ui-d .set-row.off .set-ico { opacity: .45; }
html.ui-d .set-row small { margin-left: 38px; color: var(--d-faint); font-size: 11px; }
html.ui-d :is(#set-gfx-note, #set-clip-note) { flex-basis: calc(100% - 38px); color: var(--d-faint); }
/* section labels over the groups (click-through: they sit above the row, outside its box) */
html.ui-d :is(#set-switch, #set-sound, #set-gfx, #set-newname) { margin-top: 21px; }
html.ui-d #set-switch { margin-top: 20px; }
html.ui-d :is(#set-switch, #set-sound, #set-gfx, #set-newname)::before { position: absolute; left: 10px; top: -17px; pointer-events: none;
  font: 700 9.5px/1 var(--d-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--d-faint); }
html.ui-d #set-switch::before { content: 'Character'; }
html.ui-d #set-sound::before { content: 'Sound'; }
html.ui-d #set-gfx::before { content: 'Display'; }
html.ui-d #set-newname::before { content: 'More'; }
/* the toggles: a switch, on in the bar's gradient */
html.ui-d .set-row[data-toggle]::after, html.ui-d .set-row[data-toggle]:not(.off)::after, html.ui-d .set-row[data-toggle].off::after {
  content: '' !important; order: 1; align-self: center; margin-left: auto; flex: none; width: 32px; height: 18px; border-radius: 999px;
  transition: background .18s ease; }
html.ui-d .set-row[data-toggle]:not(.off)::after {
  background: radial-gradient(circle at 23px 50%, #0b0f14 0 6px, transparent 6.5px), var(--d-bar); }
html.ui-d .set-row[data-toggle].off::after {
  background: radial-gradient(circle at 9px 50%, rgba(232, 236, 230, .75) 0 6px, transparent 6.5px), rgba(255, 255, 255, .12); }
/* a toggle row has no note line, so it never wraps: the switch stays beside its label at any width */
html.ui-d .set-row[data-toggle] { flex-wrap: nowrap; align-items: center; }
/* values: champagne chips at the right */
html.ui-d :is(#set-gfx-val, #set-fps-val, #set-ui-val, #set-clip-val) { margin-left: auto; padding: 2px 8px; border-radius: 999px;
  font: 700 11px/1.3 var(--d-ui); letter-spacing: .03em; color: var(--d-champ);
  background: rgba(246, 231, 176, .08); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .25); }
/* the contract address and the version, the panel's foot */
html.ui-d #set-ca-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--d-line); }
html.ui-d .set-ca-label { color: var(--d-faint); font: 700 9.5px/1 var(--d-ui); letter-spacing: .16em; }
html.ui-d .set-ca { margin-top: 7px; padding: 7px 8px; border: 0; border-radius: 8px; color: var(--d-dim);
  background: rgba(5, 8, 12, .6); box-shadow: inset 0 0 0 1px var(--d-line); transition: color .12s ease, box-shadow .12s ease; }
html.ui-d .set-ca:hover { color: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .45); }
html.ui-d .set-ca.copied { color: #98e5c6; border: 0; box-shadow: inset 0 0 0 1px rgba(127, 220, 184, .6); }
html.ui-d #set-version { margin-top: 8px; color: var(--d-faint); font: 500 10.5px/1 var(--d-ui); letter-spacing: .04em; }
@media (min-width: 541px) {
  html.ui-d #settings-panel { width: 320px; }
  html.ui-d #settings-panel::before { background: rgba(4, 6, 9, .55); }
}
@media (max-width: 540px) {
  /* wide enough that the longest label keeps its switch on its own line, and never taller than the screen below it */
  html.ui-d #settings-panel { width: min(280px, calc(100vw - 28px)); box-sizing: border-box; max-height: calc(100dvh - 200px); }
  html.ui-d .set-row { padding: 8px 10px; font-size: 14px; }
}

/* =====================================================================================================
   DUSK SLATE, THE HUD BUTTON ROW. The row drops a few pixels so the zone plate on the minimap's foot has room to
   breathe, and where the five are one row they sit in ONE slate tray - a toolbar, not five loose coins: the
   buttons inside lose their own rims and light as a soft disc under the pointer. The badges become slate chips
   (the clip length) and a champagne dot (the quest), the bag's count stays the one red thing.
   ===================================================================================================== */
html.ui-d body { --hud-row: calc(var(--map-top) + var(--map-size) + 4px + 20px); }
@media (min-width: 541px) {
  html.ui-d #hud-tray { display: block; position: absolute; z-index: 5; pointer-events: none;
    top: calc(var(--hud-row) - 5px); right: calc(var(--hud-rail) - 5px);
    width: calc(5 * var(--hud-btn) + 4 * var(--hud-gap) + 10px); height: calc(var(--hud-btn) + 10px); border-radius: 999px;
    background: var(--d-sheet-light); box-shadow: 0 0 0 1px var(--d-line), 0 8px 20px rgba(0, 0, 0, .45); }
  html.ui-d :is(#friends-btn, #cam-clip, #quest-btn, #bag-btn, #settings-btn) { background: transparent; border-color: transparent; box-shadow: none; }
  html.ui-d :is(#friends-btn, #cam-clip, #quest-btn, #bag-btn, #settings-btn):hover { background: rgba(255, 255, 255, .08); border-color: transparent;
    box-shadow: none; transform: none; }
  html.ui-d #cam-clip.on { border-color: rgba(246, 231, 176, .55); }
}
html.ui-d #cam-clip-secs { bottom: -6px; right: -7px; height: 14px; padding: 0 4px; border-radius: 999px; border: 0;
  background: #121923; color: var(--d-dim); font: 700 9px/14px var(--d-ui); box-shadow: 0 0 0 1px var(--d-line-strong); }
html.ui-d #cam-clip.on #cam-clip-secs { color: var(--d-champ); box-shadow: 0 0 0 1px rgba(246, 231, 176, .5); }
html.ui-d #quest-dot { top: 1px; right: 1px; width: 8px; height: 8px; border: 0; background: var(--d-champ); box-shadow: 0 0 0 2px #121923, 0 0 8px rgba(246, 231, 176, .8); }
html.ui-d #bag-count { font-family: var(--d-ui); font-weight: 700; border: 0; box-shadow: 0 0 0 2px #121923; }

/* =====================================================================================================
   DUSK SLATE, THE PACK ("improve the inventory panel styling too"). Same geometry, new skin: the header is the
   title, then the astra as a champagne chip, then the close; slots are rounded slate wells with a hairline, an item
   says its rarity with a tinted hairline, a soft glow from below and a bar along its foot (legendary and curio
   breathe); the corner marks become small chips - the stack count, the level a locked piece wants (coral), the
   upgrade/downgrade arrow (mint/coral), the food the orb eats (a champagne diamond). The Materials tab and the
   vault's grids share the slot, so they match.
   ===================================================================================================== */
html.ui-d #inv-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
html.ui-d #inv-gold { float: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px;
  border-radius: 999px; font: 700 12px/1.3 var(--d-ui); letter-spacing: .02em; color: var(--d-champ);
  background: rgba(246, 231, 176, .08); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .28); }
html.ui-d #inv-gold .astra-ico { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
html.ui-d #inv-close { margin-left: 2px; }
html.ui-d #inv-tabs { margin-bottom: 10px; }
/* the slot */
html.ui-d :is(.inv-slot, .pch-slot) { border-radius: 10px; border-color: transparent;
  background: linear-gradient(180deg, #19222e, #0c1118); box-shadow: inset 0 0 0 1px var(--d-line); transition: box-shadow .12s ease, background .12s ease; }
html.ui-d .inv-slot:not([data-rarity]) { background: rgba(5, 8, 12, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 2px 6px rgba(0, 0, 0, .45); }
html.ui-d .inv-slot:not([data-rarity])::after { content: none; }
html.ui-d .inv-slot[data-rarity] {
  background: radial-gradient(120% 70% at 50% 115%, color-mix(in srgb, var(--rar) 26%, transparent), transparent 70%), linear-gradient(180deg, #19222e, #0c1118);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 42%, transparent), inset 0 -2px 0 var(--rar); animation: none; }
html.ui-d .inv-slot[data-rarity]:hover, html.ui-d .pch-slot:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar, #9cc2ea) 80%, transparent), inset 0 -2px 0 var(--rar, transparent), 0 0 12px color-mix(in srgb, var(--rar, #9cc2ea) 30%, transparent); }
html.ui-d .inv-slot:is([data-rarity="legendary"], [data-rarity="curio"]) { animation: d-rar-breathe 2.6s ease-in-out infinite; }
@keyframes d-rar-breathe {
  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 42%, transparent), inset 0 -2px 0 var(--rar), 0 0 0 transparent; }
  50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 70%, transparent), inset 0 -2px 0 var(--rar), 0 0 14px var(--rar-glow); } }
html.ui-d .inv-slot.locked { filter: saturate(.35) brightness(.62); }
/* the corner chips */
html.ui-d .inv-qty { right: 3px; bottom: 4px; padding: 0 4px; border-radius: 5px; font: 700 10px/14px var(--d-ui); color: #fff;
  background: rgba(5, 8, 12, .78); text-shadow: none; }
html.ui-d .inv-lock { top: 3px; right: 3px; padding: 0 4px; border: 0; border-radius: 5px; font: 700 9.5px/14px var(--d-ui);
  color: #f7a497; background: rgba(5, 8, 12, .85); box-shadow: inset 0 0 0 1px rgba(245, 143, 127, .45); }
html.ui-d .inv-delta { top: 3px; right: 3px; width: 15px; height: 15px; border-radius: 5px; display: grid; place-items: center;
  font-size: 8.5px; line-height: 1; background: rgba(5, 8, 12, .78); text-shadow: none; }
html.ui-d .inv-delta.up { color: #7fdcb8; box-shadow: inset 0 0 0 1px rgba(127, 220, 184, .45); }
html.ui-d .inv-delta.down { color: #f58f7f; box-shadow: inset 0 0 0 1px rgba(245, 143, 127, .4); }
html.ui-d .inv-pin { left: 4px; top: 4px; width: 7px; height: 7px; font-size: 0; transform: rotate(45deg); border-radius: 1.5px;
  background: var(--d-champ); box-shadow: 0 0 0 2px rgba(5, 8, 12, .8), 0 0 6px rgba(246, 231, 176, .8); }
/* the materials tab */
html.ui-d .pch-sub { margin: 12px 0 7px; font: 700 9.5px/1 var(--d-ui); letter-spacing: .16em; color: var(--d-faint); }
html.ui-d .pch-sub:first-child { margin-top: 2px; }
html.ui-d .pch-slot.prime { --rar: #b9a4ff; box-shadow: inset 0 0 0 1px rgba(185, 164, 255, .45), inset 0 -2px 0 #b9a4ff; }
html.ui-d .pch-slot.mat { --rar: #8cc0f2; box-shadow: inset 0 0 0 1px rgba(140, 192, 242, .35); }
html.ui-d #mat-count { color: var(--d-champ); }
html.ui-d #pouch-note { margin-top: 10px; color: var(--d-dim); font: 500 11.5px/1.5 var(--d-ui); }
html.ui-d #pouch-note b { color: var(--d-champ); }
html.ui-d #pouch-grid { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
/* the corner chips sit ABOVE the art: the icon is appended after them, so a stack count hid under the picture */
html.ui-d :is(.inv-qty, .inv-lock, .inv-delta, .inv-pin) { z-index: 1; }

/* =====================================================================================================
   DUSK SLATE, THE CHARACTER SHEET ("improve the character stats panel styling too"). The name in the title face
   (the gold gradient text goes), the identity line quiet, the duel rating a slate chip; the sprite on a soft sky
   halo; the level dial re-cut in slate - the arc in the bar's sky-to-champagne, a fine bezel, a slate core; the
   stat rows a clean list on hairlines (each value keeps the colour that says what it is), the ? a small ring, the
   points to spend a champagne banner and + a key in the bar's gradient; Traits a quiet section with a chevron and
   slate pills.
   ===================================================================================================== */
html.ui-d #stats-header { border-bottom-color: var(--d-line); padding-bottom: 10px; margin-bottom: 10px; }
html.ui-d #stats-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; font-size: 19px; }
html.ui-d #stats-rarity { font: 600 11.5px/1.4 var(--d-ui); }
html.ui-d .duel-rank { height: 18px; padding: 0 8px; border: 0; font: 700 10.5px/18px var(--d-ui); color: #d6cbff;
  background: rgba(185, 164, 255, .1); box-shadow: inset 0 0 0 1px rgba(185, 164, 255, .35); }
/* the sprite on a halo */
html.ui-d #stats-sprite-wrap::before { content: ''; position: absolute; left: 50%; top: 46%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(156, 194, 234, .16), rgba(156, 194, 234, 0) 68%); pointer-events: none; }
html.ui-d #stats-sprite-wrap::after { background: radial-gradient(ellipse, rgba(156, 194, 234, .3), transparent 70%); }
/* the level dial, re-cut in slate */
html.ui-d #dial-arc-g stop:nth-child(1) { stop-color: #9cc2ea; }
html.ui-d #dial-arc-g stop:nth-child(2) { stop-color: #cfdcd9; }
html.ui-d #dial-arc-g stop:nth-child(3) { stop-color: #f6e7b0; }
html.ui-d #dial-core-g stop:nth-child(1) { stop-color: #1d2734; }
html.ui-d #dial-core-g stop:nth-child(2) { stop-color: #121923; }
html.ui-d #dial-core-g stop:nth-child(3) { stop-color: #0b0f14; }
html.ui-d .dial-rim { stroke: #e8ece6; stroke-opacity: .22; }
html.ui-d .dial-tick { stroke: #e8ece6; stroke-opacity: .2; }
html.ui-d .dial-tick.major { stroke: var(--d-champ); stroke-opacity: .6; }
html.ui-d .dial-core { stroke: rgba(255, 255, 255, .1); }
html.ui-d .dial-star { fill: #e8ece6; opacity: .35; }
html.ui-d .dial-track { stroke: rgba(255, 255, 255, .08); }
html.ui-d .dial-tip { fill: #fff; stroke: var(--d-champ); }
html.ui-d .dial-inner { stroke: #e8ece6; stroke-opacity: .12; }
html.ui-d .dial-halo { stroke: var(--d-sky); stroke-opacity: .4; }
html.ui-d .dial-halo.b { stroke: var(--d-champ); stroke-opacity: .25; }
html.ui-d .orb-mid small { font: 700 8.5px/1 var(--d-ui); letter-spacing: .2em; color: var(--d-faint); }
html.ui-d .orb-mid b { font-family: var(--d-title); font-weight: 400; color: #fff; text-shadow: none; }
html.ui-d .orb-xp { font: 600 10px/1.3 var(--d-ui); color: var(--d-dim); margin-top: 5px; }
/* the stat list */
html.ui-d #stats-grid { border-top-color: var(--d-line); padding-top: 6px; }
html.ui-d .stat-row { padding: 6px 8px; border-radius: 0; background: none !important; border-bottom: 1px solid rgba(255, 255, 255, .06);
  font: 500 12.5px/1.35 var(--d-ui); color: var(--d-dim); font-variant-numeric: tabular-nums; }
html.ui-d .stat-row:last-child { border-bottom: 0; }
html.ui-d .stat-row.has-cap:hover { background: rgba(255, 255, 255, .03) !important; }
html.ui-d .stat-row b { font-weight: 700; color: #fff; }
html.ui-d .cap-mark { display: inline-grid; place-items: center; width: 13px; height: 13px; padding: 0; margin-left: 5px; vertical-align: 1px;
  border: 0; border-radius: 50%; font: 700 8.5px/1 var(--d-ui); color: var(--d-faint); box-shadow: inset 0 0 0 1px var(--d-line-strong); }
html.ui-d .stat-row .cap { font: 500 11px/1.4 var(--d-ui); color: var(--d-faint); margin-top: 3px; }
html.ui-d .build-pts { margin: 12px 0 6px; padding: 7px 10px; border-radius: 9px; font: 700 11.5px/1.3 var(--d-ui); letter-spacing: .02em;
  color: var(--d-champ); background: rgba(246, 231, 176, .07); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .3); }
html.ui-d .build-pts::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%;
  background: var(--d-champ); box-shadow: 0 0 8px rgba(246, 231, 176, .9); vertical-align: middle; }
html.ui-d .build-val { color: var(--d-champ); }
html.ui-d :is(.bv-split, .stat-row.build-row small) { color: var(--d-faint); font-family: var(--d-ui); }
html.ui-d .build-add { width: 24px; height: 24px; border: 0; border-radius: 8px; background: var(--d-bar); color: #0b0f14;
  font: 800 15px/1 var(--d-ui); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
html.ui-d .build-add:hover { filter: brightness(1.1); }
/* traits */
html.ui-d #stats-traits-box { border-top-color: var(--d-line); padding-top: 10px; margin-top: 10px; }
html.ui-d #stats-traits-box summary { list-style: none; display: flex; align-items: center; gap: 6px;
  font: 700 9.5px/1 var(--d-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--d-faint); }
html.ui-d #stats-traits-box summary::-webkit-details-marker { display: none; }
html.ui-d #stats-traits-box summary::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
html.ui-d #stats-traits-box[open] summary { color: var(--d-dim); margin-bottom: 8px; }
html.ui-d #stats-traits-box[open] summary::after { transform: rotate(45deg) translate(-1px, -1px); }
html.ui-d #stats-traits { border-top: 0 !important; padding-top: 0; margin-top: 0; gap: 5px; }
html.ui-d .trait-chip { padding: 3px 9px; border: 0; border-radius: 999px; font: 600 10.5px/1.3 var(--d-ui); color: var(--d-text);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d #stats-panel { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.ui-d .stat-row.build-row .build-val { margin-left: auto; }
html.ui-d .stat-row.build-row .build-add { margin-left: 10px; }

/* =====================================================================================================
   DUSK SLATE, THE QUEST JOURNAL ("improve the quest log panel styling too"). CSS only. Each act a slate card: its
   numeral in a small chip, its name in the title face, its count as a chip, a chevron that turns when it is open
   (a finished act wears a mint tick, a sealed one is quiet and says how far off it is). The quests hang under their
   act on a thin thread, each one a node on it in its state's colour - done mint, active champagne and glowing,
   ready sky, locked faint - and a live one lights under the pointer (a tap puts it on screen). Odd Jobs in lilac,
   Bounties in amber with the claim a key in their colour. The Tracker toggle is the settings switch.
   ===================================================================================================== */
html.ui-d #quest-log { padding: 16px 16px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.ui-d #ql-head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--d-line); }
/* the tracker toggle: a word and a switch */
html.ui-d #ql-track { display: inline-flex; align-items: center; gap: 7px; padding: 3px 4px 3px 10px; border: 0; border-radius: 999px; opacity: 1;
  font: 600 11px/1.2 var(--d-ui); letter-spacing: .03em; color: var(--d-dim); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d #ql-track::after, html.ui-d #ql-track.off::after { content: ''; width: 28px; height: 16px; border-radius: 999px; flex: none; }
html.ui-d #ql-track::after { background: radial-gradient(circle at 20px 50%, #0b0f14 0 5px, transparent 5.5px), var(--d-bar); }
html.ui-d #ql-track.off::after { background: radial-gradient(circle at 8px 50%, rgba(232, 236, 230, .75) 0 5px, transparent 5.5px), rgba(255, 255, 255, .12); }
html.ui-d #ql-track:not(.off) { color: var(--d-text); }
/* the acts */
html.ui-d .ql-act { position: relative; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 8px 32px 8px 8px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--d-line); transition: background .12s ease, box-shadow .12s ease; }
html.ui-d .ql-act:first-child { margin-top: 0; }
html.ui-d .ql-act:not(.sealed):hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--d-line-strong); }
html.ui-d .ql-act-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; letter-spacing: 0;
  font: 400 12px/1 var(--d-title); color: var(--d-champ); background: rgba(246, 231, 176, .08); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .3); }
html.ui-d .ql-act-t { font: 400 15px/1.2 var(--d-title); letter-spacing: .03em; color: #fff; }
html.ui-d .ql-act-c { padding: 2px 8px; border-radius: 999px; font: 700 10.5px/1.3 var(--d-ui); color: var(--d-dim);
  background: rgba(5, 8, 12, .5); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d .ql-act:not(.sealed)::after { content: ''; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--d-faint); border-bottom: 1.5px solid var(--d-faint); transform: rotate(-45deg); transition: transform .15s ease; }
html.ui-d .ql-act.open::after { transform: rotate(45deg); margin-top: -6px; }
html.ui-d .ql-act.open { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--d-line-strong); }
html.ui-d .ql-act.done .ql-act-n { color: #7fdcb8; background: rgba(127, 220, 184, .1); box-shadow: inset 0 0 0 1px rgba(127, 220, 184, .4); }
html.ui-d .ql-act.done .ql-act-n::after { content: none; }
html.ui-d .ql-act.done .ql-act-t { color: #b4ecd6; }
html.ui-d .ql-act.done .ql-act-c { color: #7fdcb8; }
html.ui-d .ql-act.done .ql-act-c::before { content: '\2713\00a0'; }
html.ui-d .ql-act.sealed { opacity: 1; background: rgba(5, 8, 12, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); padding-right: 8px; }
html.ui-d .ql-act.sealed :is(.ql-act-n, .ql-act-t, .ql-act-c) { color: var(--d-faint); }
html.ui-d .ql-act.sealed .ql-act-n { background: transparent; box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d .ql-act.sealed .ql-act-t { font-style: italic; }
/* the quests, on a thread under their act */
html.ui-d .ql-row { position: relative; gap: 10px; align-items: flex-start; margin-left: 12px; padding: 7px 8px 7px 22px; border-top: 0; border-radius: 8px; }
html.ui-d .ql-row::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--d-line-strong); }
html.ui-d .ql-ico { position: absolute; left: 1px; top: 9px; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%;
  font-size: 8px; line-height: 1; color: transparent; text-shadow: none; background: #121923; box-shadow: inset 0 0 0 1.5px var(--d-line-strong); }
html.ui-d .ql-row.done .ql-ico { color: #0b0f14; background: #7fdcb8; box-shadow: none; }
html.ui-d .ql-row.active .ql-ico { background: var(--d-champ); box-shadow: 0 0 0 3px rgba(246, 231, 176, .18), 0 0 10px rgba(246, 231, 176, .7); }
html.ui-d .ql-row.ready .ql-ico { background: var(--d-sky); box-shadow: 0 0 0 3px rgba(156, 194, 234, .18), 0 0 8px rgba(156, 194, 234, .6); }
html.ui-d .ql-row.locked { opacity: .55; }
html.ui-d .ql-txt b { font: 600 13px/1.3 var(--d-ui); color: var(--d-text); }
html.ui-d .ql-txt small { font: 500 11.5px/1.35 var(--d-ui); color: var(--d-faint); margin-top: 2px; }
html.ui-d .ql-row.done .ql-txt b { color: #b4ecd6; }
html.ui-d .ql-row.active { background: rgba(246, 231, 176, .06); }
html.ui-d .ql-row.active .ql-txt b { color: var(--d-champ); }
html.ui-d .ql-row.active .ql-txt small { color: var(--d-dim); }
html.ui-d .ql-row.ready .ql-txt b { color: #cfe3f7; }
html.ui-d .ql-row.ql-pick:hover { background: rgba(255, 255, 255, .06); }
html.ui-d .ql-row.ql-pick:active { background: rgba(255, 255, 255, .09); }
html.ui-d .ql-row.fog { opacity: .5; }
html.ui-d .ql-row.fog .ql-txt b { color: var(--d-faint); letter-spacing: .3em; }
/* odd jobs and bounties: their own accent on the numeral */
html.ui-d .ql-act.ql-side .ql-act-n { color: #d6cbff; background: rgba(185, 164, 255, .1); box-shadow: inset 0 0 0 1px rgba(185, 164, 255, .4); }
html.ui-d .ql-act.ql-side .ql-act-t { color: #e6defd; }
html.ui-d .ql-act.ql-bounty { background: rgba(255, 179, 71, .05); }
html.ui-d .ql-act.ql-bounty .ql-act-n { color: #ffc77a; background: rgba(255, 179, 71, .1); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .4); }
html.ui-d .ql-act.ql-bounty.sealed .ql-act-n { color: var(--d-faint); background: transparent; box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d .ql-pay { color: #ffc77a !important; font-weight: 700 !important; }
html.ui-d .ql-claim { min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; font: 700 12px/1 var(--d-ui); letter-spacing: .03em;
  color: #1a1206; background: linear-gradient(90deg, #ffc77a, #f6e7b0); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
html.ui-d .ql-claim:hover { filter: brightness(1.08); }
html.ui-d .ql-claim:active { filter: brightness(.92); background: linear-gradient(90deg, #ffc77a, #f6e7b0); }
html.ui-d .ql-bnote { margin: 8px 0 0 12px; font: 500 11px/1.3 var(--d-ui); color: var(--d-faint); letter-spacing: .02em; }
html.ui-d .ql-foot { margin-top: 14px; padding-top: 10px; border-top-color: var(--d-line); font: 600 11px/1.3 var(--d-ui); letter-spacing: .04em; color: var(--d-faint); }
@media (max-width: 700px) { html.ui-d .ql-claim { min-height: 44px; } }

/* =====================================================================================================
   DUSK SLATE, THE MAP PANEL ("improve the world map panel styling too"). The map sits in a slate frame - a hairline,
   a soft dark edge - and the World tab gets quieter and clearer: a zone you have not reached says only how strong it
   is (thirteen italic "Unknown" plates were most of what you read) and on a phone only its mark; the plates are
   slate with the zone's name in the title face, yours ringed in sky; the travel note is a footer strip in the frame
   instead of hiding under the zone card, which now sits above it; a legend says what the marks mean.
   ===================================================================================================== */
html.ui-d #map-title { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--d-line); }
html.ui-d #map-tabs { margin-bottom: 12px; }
html.ui-d :is(#map-view, #world-view) { border: 0; border-radius: 12px; background: #0b0f14;
  box-shadow: 0 0 0 1px var(--d-line-strong), 0 0 0 4px rgba(5, 8, 12, .55), 0 8px 22px rgba(0, 0, 0, .4); }
/* the legends */
html.ui-d :is(#map-legend, #world-legend) { gap: 6px 8px; margin-top: 12px; font: 600 11px/1.2 var(--d-ui); color: var(--d-dim); }
html.ui-d :is(#map-legend, #world-legend) span { gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d #map-legend .dot { margin-right: 0; }
/* the world's plates */
html.ui-d .w-node span { padding: 3px 8px 4px; border-radius: 8px; background: rgba(11, 15, 20, .82); box-shadow: 0 0 0 1px var(--d-line), 0 2px 6px rgba(0, 0, 0, .4); }
html.ui-d .w-node span b { font: 400 12.5px/1.2 var(--d-title); }
html.ui-d .w-node span small { font: 600 9.5px/1.25 var(--d-ui); color: var(--d-faint); }
html.ui-d .w-node.here span { box-shadow: 0 0 0 1px rgba(156, 194, 234, .7), 0 0 12px rgba(156, 194, 234, .25), 0 2px 6px rgba(0, 0, 0, .4); }
html.ui-d .w-node.open span b { color: #fff7e6; }
html.ui-d .w-node.objective span { box-shadow: 0 0 0 1px rgba(246, 231, 176, .75), 0 0 12px rgba(246, 231, 176, .25); }
/* a zone not yet reached: only how strong it is - on a phone, only its mark */
html.ui-d .w-node.locked:not(.objective) span { padding: 1px 6px; background: rgba(11, 15, 20, .6); box-shadow: none; }
html.ui-d .w-node.locked:not(.objective) span b { display: none; }
html.ui-d .w-node.locked:not(.objective) span small { display: block; color: rgba(232, 236, 230, .55); }
html.ui-d .w-node.locked:not(.objective) span:not(:has(small)) { display: none; }
html.ui-d .w-node.locked i { width: 12px; height: 12px; }
@media (max-width: 600px) { html.ui-d .w-node.locked:not(.objective) span { display: none; } }
/* the travel note: a footer strip in the frame; the card sits above it */
html.ui-d #world-note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 7px 12px; text-align: center;
  font: 600 11.5px/1.3 var(--d-ui); color: var(--d-dim); background: linear-gradient(180deg, rgba(11, 15, 20, 0), rgba(11, 15, 20, .88) 40%); }
html.ui-d #world-note.warn { color: var(--d-champ); }
html.ui-d #world-card { bottom: 40px; padding: 12px 14px 13px; background: var(--d-bar) top / 100% 2px no-repeat border-box, var(--d-sheet-light) border-box;
  box-shadow: 0 0 0 1px var(--d-line-strong), 0 14px 32px rgba(0, 0, 0, .55); }
html.ui-d #world-card b { font: 400 17px/1.2 var(--d-title); color: #fff; }
html.ui-d #world-card small { font: 700 10.5px/1 var(--d-ui); padding: 2px 8px; border-radius: 999px; color: var(--d-dim);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--d-line); vertical-align: 2px; }
html.ui-d #world-card p { font: 500 12px/1.45 var(--d-ui); color: var(--d-dim); }
html.ui-d #world-card .wc-quest { color: var(--d-champ); }
html.ui-d #world-card button { border: 0; border-radius: 10px; padding: 9px; color: #0b0f14; font: 700 13px/1 var(--d-ui); background: var(--d-bar); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
html.ui-d #world-card button:hover { filter: brightness(1.08); background: var(--d-bar); }

/* =====================================================================================================
   DUSK SLATE, THE DIALOGUE ("improve the dialogue box styling too"). The speaker first: their portrait in a slate
   bezel (the art their quest scenes use), their name in the title face, what they are to you as a chip; their words
   in clean type on a quiet quote rule; then one row of buttons - what they offer as a key in the bar's gradient,
   Close quiet at the end of it.
   ===================================================================================================== */
html.ui-d #dialogue { width: min(500px, 92vw); padding: 16px 18px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.ui-d #dialogue > :is(#dlg-name, #dlg-role, #dlg-lines, #dlg-board) { flex: 1 0 100%; }
html.ui-d #dlg-face { position: absolute; left: 16px; top: -22px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  background: radial-gradient(circle at 50% 30%, #1d2734, #0b0f14); border: 3px solid #141b25;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 4px rgba(246, 231, 176, .18), 0 8px 18px rgba(0, 0, 0, .5); }
html.ui-d #dialogue:has(#dlg-face:not([hidden])) { padding-top: 14px; }
html.ui-d #dialogue:has(#dlg-face:not([hidden])) :is(#dlg-name, #dlg-role) { padding-left: 76px; }
html.ui-d #dlg-name { margin: 0; font-size: 19px; line-height: 1.2; color: #fff; }
html.ui-d #dlg-role { margin-top: -4px; font: 700 10px/1 var(--d-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--d-champ); }
html.ui-d #dlg-role[hidden] { display: none; }
html.ui-d #dlg-lines { margin: 6px 0 4px; padding: 2px 0 2px 14px; border-left: 2px solid rgba(246, 231, 176, .35);
  font: 500 14px/1.6 var(--d-ui); color: var(--d-text); }
html.ui-d #dlg-lines p { margin: 0 0 6px; }
html.ui-d #dlg-lines p:last-child { margin-bottom: 0; }
html.ui-d #dialogue > button { flex: none; margin: 4px 0 0; padding: 8px 14px; border-radius: 10px; font: 600 13px/1.2 var(--d-ui); }
html.ui-d #dialogue :is(#dlg-shop, #dlg-bank, #dlg-forge, #dlg-cook, #dlg-signon) { border: 0; color: #0b0f14; background: var(--d-bar);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
html.ui-d #dialogue :is(#dlg-shop, #dlg-bank, #dlg-forge, #dlg-cook, #dlg-signon):hover { filter: brightness(1.08); background: var(--d-bar); }
html.ui-d #dialogue #dlg-forget:disabled { opacity: .45; cursor: default; }
html.ui-d #dialogue #dlg-close { margin-left: auto; background: transparent; border-color: var(--d-line); color: var(--d-dim); }
html.ui-d #dialogue #dlg-close:hover { color: #fff; border-color: var(--d-line-strong); background: rgba(255, 255, 255, .05); }
html.ui-d #dlg-board { display: flex; gap: 6px; }
html.ui-d #dlg-board[hidden] { display: none; }
html.ui-d #dlg-house { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--d-line); background: rgba(5, 8, 12, .62);
  color: #fff; font: 500 13px var(--d-ui); }
html.ui-d #dlg-house:focus { outline: none; border-color: rgba(246, 231, 176, .55); box-shadow: 0 0 0 3px rgba(246, 231, 176, .12); }

/* =====================================================================================================
   DUSK SLATE, THE SHOP ("improve the shop panel styling too"). The header as the pack's: the name, the astra as a
   champagne chip, the close. Each ware a row that lights under the pointer: its art on a slate tile that says its
   rarity the way the pack's slots do (a tinted hairline, a glow from below, a bar along its foot), its name in its
   rarity's colour, its stats quiet; the price a key in the bar's gradient when you can pay it and a quiet slate one
   when you cannot; on the Sell side the sum you get, in mint. Scoped to the shop - the forge and the cook share the
   row's classes and keep their own look.
   ===================================================================================================== */
html.ui-d #shop-panel { width: min(400px, calc(100vw - 24px)); padding: 16px 16px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.ui-d #shop-title { gap: 8px; margin-bottom: 12px; }
html.ui-d #shop-gold { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px;
  font: 700 12px/1.3 var(--d-ui); letter-spacing: .02em; color: var(--d-champ);
  background: rgba(246, 231, 176, .08); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .28); }
html.ui-d #shop-gold .astra-ico { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
html.ui-d #shop-tabs { margin-bottom: 10px; }
html.ui-d #shop-sell-n { margin-left: 4px; padding: 0 6px; border-radius: 999px; font: 700 10px/16px var(--d-ui); color: var(--d-champ); background: rgba(246, 231, 176, .1); }
html.ui-d #shop-panel .shop-row { gap: 12px; margin: 0 -6px; padding: 8px 6px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); border-radius: 10px;
  transition: background .12s ease; }
html.ui-d #shop-panel .shop-row:last-child { border-bottom-color: transparent; }
html.ui-d #shop-panel .shop-row:hover { background: rgba(255, 255, 255, .045); }
html.ui-d #shop-panel .shop-ico { width: 44px; min-width: 44px; height: 44px; border-radius: 10px; box-sizing: border-box; padding: 4px;
  background: radial-gradient(120% 70% at 50% 115%, color-mix(in srgb, var(--rar, #6f7ba0) 26%, transparent), transparent 70%), linear-gradient(180deg, #19222e, #0c1118);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar, #6f7ba0) 42%, transparent), inset 0 -2px 0 var(--rar, #6f7ba0); }
html.ui-d #shop-panel .shop-ico img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
html.ui-d #shop-panel .shop-name { font: 600 13.5px/1.35 var(--d-ui); }
html.ui-d #shop-panel .shop-row[data-rarity="common"] .shop-name, html.ui-d #shop-panel .shop-row:not([data-rarity]) .shop-name { color: var(--d-text); }
html.ui-d #shop-panel .shop-name small { font: 500 11.5px/1.4 var(--d-ui); color: var(--d-faint); margin-top: 2px; }
/* (#shop-panel + the list's id: the older slate button rule carries #dialogue #dlg-shop in its :is(), which outranks a single id) */
html.ui-d #shop-panel :is(#shop-items, #shop-sell) .shop-buy { display: inline-flex; align-items: center; gap: 4px; padding: 7px 11px; border: 0; border-radius: 9px;
  font: 700 12.5px/1 var(--d-ui); color: #0b0f14; background: var(--d-bar); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
html.ui-d #shop-panel :is(#shop-items, #shop-sell) .shop-buy:hover { filter: brightness(1.08); background: var(--d-bar); }
html.ui-d #shop-panel :is(#shop-items, #shop-sell) .shop-buy.cant { opacity: 1; color: var(--d-faint); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--d-line); filter: none; }
html.ui-d #shop-panel :is(#shop-items, #shop-sell) .shop-buy .astra-ico { width: 13px; height: 13px; }
/* the Sell side: what you get, in mint */
html.ui-d #shop-panel #shop-sell .shop-buy { color: #b4ecd6; background: rgba(127, 220, 184, .08); box-shadow: inset 0 0 0 1px rgba(127, 220, 184, .4); }
html.ui-d #shop-panel #shop-sell .shop-buy:hover { background: rgba(127, 220, 184, .16); filter: none; }
html.ui-d #shop-sell-title { margin: 2px 0 8px; font: 700 9.5px/1.2 var(--d-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--d-faint); }
html.ui-d #shop-sell-title small { color: var(--d-faint); letter-spacing: .04em; text-transform: none; font-weight: 500; }
html.ui-d .shop-empty { padding: 14px 4px; text-align: center; color: var(--d-faint); font: 500 12px var(--d-ui); }
/* the astra star washed out on the light key: a dark mark like the price beside it (the sell side and the quiet
   can't-pay key keep it in colour) */
html.ui-d #shop-panel #shop-items .shop-buy:not(.cant) .astra-ico { filter: brightness(0) opacity(.72); }

/* =====================================================================================================
   DUSK SLATE, THE VAULT ("improve the vault panel styling too"). Two chests, not two lists: the vault and your pack
   each sit in their own inset slate well under a quiet label (the vault's in sky, the pack's in champagne) with
   what a tap does as a chip; a small transfer mark between them; the header stays put on a solid sheet with the
   stack count as a chip. The slots are the pack's own (rarity hairline, glow, foot bar, count chips).
   ===================================================================================================== */
html.ui-d #bank-panel { width: min(calc(var(--slot, 46px) * 5 + 24px + 56px), calc(100vw - 24px)); padding: 0 16px 14px; box-sizing: border-box;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.ui-d #bank-title { top: 0; margin: 0 -16px 4px; padding: 16px 16px 12px; gap: 8px;
  background: var(--d-bar) top / 100% 2px no-repeat, #121923; border-bottom: 1px solid var(--d-line); }
html.ui-d #bank-count2 { padding: 2px 8px; border-radius: 999px; font: 700 10.5px/1.3 var(--d-ui); color: var(--d-dim);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d .vault-sub { align-items: center; margin: 14px 2px 7px; font: 700 9.5px/1 var(--d-ui); letter-spacing: .16em; color: var(--d-sky); }
html.ui-d .vault-sub::before { content: ''; width: 6px; height: 6px; margin-right: 8px; border-radius: 1.5px; transform: rotate(45deg); background: currentColor;
  box-shadow: 0 0 6px currentColor; }
html.ui-d .vault-sub span { margin-left: auto; padding: 2px 8px; border-radius: 999px; font: 600 10.5px/1.3 var(--d-ui); letter-spacing: .02em;
  color: var(--d-faint); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d #bank-deposit { position: relative; }
html.ui-d #bank-items + .vault-sub { color: var(--d-champ); margin-top: 22px; }
html.ui-d :is(#bank-items, #bank-deposit) { padding: 8px; border-radius: 12px; background: rgba(5, 8, 12, .45); box-shadow: inset 0 0 0 1px var(--d-line), inset 0 2px 10px rgba(0, 0, 0, .35); }
html.ui-d #bank-items { box-shadow: inset 0 0 0 1px rgba(156, 194, 234, .22), inset 0 2px 10px rgba(0, 0, 0, .35); }
/* the transfer mark, in the gap between the two chests */
html.ui-d #bank-items::after { content: '\21C5'; position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); z-index: 1;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 700 12px/1 var(--d-ui); color: var(--d-dim);
  background: #121923; box-shadow: 0 0 0 1px var(--d-line-strong); pointer-events: none; }
html.ui-d #bank-items { position: relative; }
html.ui-d #bank-items .inv-slot[data-rarity]:hover, html.ui-d #bank-deposit .inv-slot[data-rarity]:hover { filter: none; }
html.ui-d #bank-items[data-empty]:not([data-empty=""])::before { padding: 10px 0 6px; font: 500 12px var(--d-ui); color: var(--d-faint); }
/* a slot is its track exactly (the 1px border was outside it, so five ran over the well's edges) */
html.ui-d :is(#bank-items, #bank-deposit) .inv-slot { box-sizing: border-box; }
html.ui-d #bank-count2 { white-space: nowrap; }
@media (max-width: 540px) { html.ui-d #bank-title { font-size: 16px; } }
/* the old painted frame's 18px transparent border (as on settings) ate 36px of the width - the wells came out
   narrower than the five slots they hold */
html.ui-d #bank-panel { border-width: 0; }

/* =====================================================================================================
   DUSK SLATE, THE FORGE ("improve the forge panel styling too"). The last of the ember palette goes: the header
   as the shop's (astra chip); the materials you carry as slate pills (coral when you have none); every piece on the
   shop's rarity tile; a durability bar on a slate track, mint, amber when it is wearing thin, a coral BROKEN chip;
   the piece you picked ringed in champagne; Mend, Mend everything and Ascend as keys in the bar's gradient; each
   rerollable mod its own slate row with a quiet Reroll key; the notes and hints in the system face.
   ===================================================================================================== */
html.ui-d #forge-panel { width: min(400px, calc(100vw - 24px)); padding: 16px 16px 14px; }
html.ui-d #forge-title { gap: 8px; margin-bottom: 10px; }
html.ui-d #forge-gold { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px;
  font: 700 12px/1.3 var(--d-ui); color: var(--d-champ); background: rgba(246, 231, 176, .08); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .28); }
html.ui-d #forge-gold .astra-ico { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
html.ui-d #forge-pouch { gap: 6px; margin-bottom: 12px; }
html.ui-d .fg-chip { gap: 5px; padding: 3px 9px 3px 5px; border: 0; border-radius: 999px; font: 600 11px/1.3 var(--d-ui); color: var(--d-dim);
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d .fg-chip b { color: var(--d-champ); }
html.ui-d .fg-chip.out { color: #f7a497; box-shadow: inset 0 0 0 1px rgba(245, 143, 127, .4); }
html.ui-d .fg-chip.out b { color: #f58f7f; }
html.ui-d #forge-tabs { margin: 0 0 10px; }
html.ui-d .fg-sub { margin: 2px 0 8px; font: 700 9.5px/1 var(--d-ui); letter-spacing: .16em; color: var(--d-faint); }
html.ui-d :is(.fg-none, .fg-hint) { font: 500 12px/1.6 var(--d-ui); color: var(--d-dim); }
html.ui-d :is(.fg-none, .fg-hint) b { color: var(--d-champ); font-weight: 700; }
html.ui-d .fg-hint { font-size: 11.5px; color: var(--d-faint); }
html.ui-d #forge-panel .fg-worn { margin-left: 7px; padding: 1px 6px; border-radius: 999px; font: 700 9px/1.4 var(--d-ui); letter-spacing: .08em;
  color: var(--d-sky); background: rgba(156, 194, 234, .1); }
/* the pieces: tiles, rows that light, the picked one ringed */
html.ui-d #forge-panel :is(.fg-rep, #forge-items .shop-row) { margin: 0 -6px; padding: 8px 6px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px; outline: 0; transition: background .12s ease, box-shadow .12s ease; }
html.ui-d #forge-items .shop-row:hover { background: rgba(255, 255, 255, .045); }
html.ui-d #forge-items .shop-row.on { background: rgba(246, 231, 176, .07); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .5); border-bottom-color: transparent; }
html.ui-d #forge-panel .shop-ico { width: 44px; min-width: 44px; height: 44px; border-radius: 10px; box-sizing: border-box; padding: 4px;
  background: radial-gradient(120% 70% at 50% 115%, color-mix(in srgb, var(--rar, #6f7ba0) 26%, transparent), transparent 70%), linear-gradient(180deg, #19222e, #0c1118);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar, #6f7ba0) 42%, transparent), inset 0 -2px 0 var(--rar, #6f7ba0); }
html.ui-d #forge-panel .shop-ico img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
html.ui-d #forge-panel .fg-title { font: 600 13.5px/1.35 var(--d-ui); }
html.ui-d #forge-panel .shop-name small { font: 500 11.5px/1.4 var(--d-ui); color: var(--d-faint); }
html.ui-d #forge-panel .shop-name small.fg-mods { color: #c7b8ff; }
/* durability */
html.ui-d .dur-bar { gap: 8px; margin-top: 6px; }
html.ui-d .dur-bar i { height: 5px; border-radius: 3px; background: #7fdcb8; box-shadow: 0 0 0 1px rgba(5, 8, 12, .6); }
html.ui-d .dur-bar em { font: 700 9.5px/1 var(--d-ui); color: var(--d-faint); letter-spacing: .03em; }
html.ui-d .dur-bar.low i { background: #ffc77a; }
html.ui-d .dur-bar.low em { color: #ffc77a; }
html.ui-d .dur-bar.broken i { display: none; }
html.ui-d .dur-bar.broken em { padding: 2px 7px; border-radius: 999px; color: #f7a497; background: rgba(245, 143, 127, .12); box-shadow: inset 0 0 0 1px rgba(245, 143, 127, .45); letter-spacing: .1em; }
html.ui-d .fg-rep.broken .shop-ico { filter: grayscale(.9) brightness(.6); }
/* the keys */
html.ui-d #forge-panel .fg-btn { min-width: 0; padding: 7px 12px; border: 0; border-radius: 9px; font: 700 12px/1.25 var(--d-ui); color: #0b0f14;
  background: var(--d-bar); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
html.ui-d #forge-panel .fg-btn:not(.cant):hover { filter: brightness(1.08); background: var(--d-bar); }
html.ui-d #forge-panel .fg-btn.cant { opacity: 1; color: var(--d-faint); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d #forge-panel .fg-btn .astra-ico { filter: brightness(0) opacity(.72); }
html.ui-d #forge-panel .fg-btn.cant .astra-ico { filter: none; }
html.ui-d .fg-rep .fg-btn.mend { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 160px; }
html.ui-d .fg-rep :is(.mb-do, .mb-cost) { color: inherit; font: inherit; }
html.ui-d .fg-rep .mb-cost { font-size: 11px; font-weight: 600; opacity: .85; }
html.ui-d .fg-rep .mb-short { color: #b3342c; font: 600 10px/1.2 var(--d-ui); font-style: normal; }
html.ui-d .fg-rep .fg-btn.cant .mb-short { color: #f7a497; }
html.ui-d #forge-panel .fg-btn.ascend { padding: 10px 12px; font-size: 13px; }
/* the picked piece's workbench */
html.ui-d #forge-detail { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--d-line); }
html.ui-d .fg-name { font: 400 17px/1.2 var(--d-title); color: #fff; }
html.ui-d .fg-mod { gap: 10px; margin-bottom: 6px; padding: 7px 8px 7px 10px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d .fg-mod span { font: 600 12.5px/1.35 var(--d-ui); color: #d6cbff; }
html.ui-d #forge-panel .fg-mod .fg-btn { color: var(--d-text); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--d-line-strong); font-size: 11.5px; }
html.ui-d #forge-panel .fg-mod .fg-btn:not(.cant):hover { filter: none; background: rgba(255, 255, 255, .1); }
html.ui-d #forge-panel .fg-mod .fg-btn .astra-ico { filter: none; }
html.ui-d .fg-short { color: #f7a497; font-style: normal; }
html.ui-d #forge-panel :is(#forge-repairs, #forge-items, #forge-refine, #forge-detail) { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }

/* =====================================================================================================
   DUSK SLATE, THE COOK'S FIRE ("improve the cook panel styling too"). The ember palette goes here too: the header
   as the shop's (astra chip); the how-it-works note a quiet slate callout; each dish on a slate tile, its effect in
   lilac, each thing it needs a pill (mint with a tick when you have it, coral with a cross when you do not), where
   to find what is missing in amber; Cook / Brew a key in the bar's gradient, quiet slate when you are short (it
   still answers a tap with what you need). Scoped to #cook-panel.
   ===================================================================================================== */
html.ui-d #cook-panel { width: min(460px, 92vw); padding: 16px 16px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.ui-d #cook-title { gap: 8px; margin-bottom: 12px; text-transform: none; }
html.ui-d #cook-gold { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px;
  font: 700 12px/1.3 var(--d-ui); color: var(--d-champ); background: rgba(246, 231, 176, .08); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .28); }
html.ui-d #cook-gold .astra-ico { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
html.ui-d #cook-note { margin-bottom: 12px; padding: 9px 12px; border-radius: 10px; font: 500 12px/1.55 var(--d-ui); color: var(--d-dim);
  background: rgba(255, 255, 255, .035); box-shadow: inset 2px 0 0 rgba(246, 231, 176, .45), inset 0 0 0 1px var(--d-line); }
html.ui-d #cook-panel .ck-row { gap: 12px; margin: 0 -6px; padding: 9px 6px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); border-radius: 10px;
  transition: background .12s ease; }
html.ui-d #cook-panel .ck-row:last-child { border-bottom-color: transparent; }
html.ui-d #cook-panel .ck-row:hover { background: rgba(255, 255, 255, .045); }
html.ui-d #cook-panel .shop-ico { width: 44px; min-width: 44px; height: 44px; border-radius: 10px; box-sizing: border-box; padding: 4px; align-self: start;
  background: radial-gradient(120% 70% at 50% 115%, rgba(255, 199, 122, .2), transparent 70%), linear-gradient(180deg, #19222e, #0c1118);
  box-shadow: inset 0 0 0 1px var(--d-line-strong), inset 0 -2px 0 rgba(255, 199, 122, .55); }
html.ui-d #cook-panel .shop-ico img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
html.ui-d #cook-panel .ck-row.cant .shop-ico { filter: grayscale(.6) brightness(.75); }
html.ui-d #cook-panel .fg-title { font: 600 13.5px/1.35 var(--d-ui); }
html.ui-d #cook-panel .ck-row small { margin-top: 4px; font: 500 11px/1.5 var(--d-ui); }
html.ui-d #cook-panel .ck-buff { color: #c7b8ff; }
html.ui-d #cook-panel .ck-need { color: var(--d-faint); }
html.ui-d #cook-panel .ck-need b { display: inline-flex; align-items: center; gap: 3px; margin-right: 2px; padding: 0 6px; border-radius: 999px; font-weight: 700; }
html.ui-d #cook-panel .ck-need b.ok { color: #b4ecd6; background: rgba(127, 220, 184, .1); box-shadow: inset 0 0 0 1px rgba(127, 220, 184, .35); }
html.ui-d #cook-panel .ck-need b.no { color: #f7a497; background: rgba(245, 143, 127, .1); box-shadow: inset 0 0 0 1px rgba(245, 143, 127, .35); }
html.ui-d #cook-panel .ck-need b.ok::before { content: '\2713'; font-size: 9px; }
html.ui-d #cook-panel .ck-need b.no::before { content: '\2715'; font-size: 8px; }
html.ui-d #cook-panel .ck-need .astra-ico { width: 12px; height: 12px; vertical-align: -2px; }
html.ui-d #cook-panel .ck-where { color: #ffc77a; font-style: normal; }
html.ui-d #cook-panel .ck-where::before { content: '\2192\00a0'; }
html.ui-d #cook-panel .fg-btn { align-self: start; margin-top: 4px; min-width: 64px; padding: 8px 14px; border: 0; border-radius: 9px; font: 700 12.5px/1 var(--d-ui);
  color: #0b0f14; background: var(--d-bar); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
html.ui-d #cook-panel .fg-btn:hover { filter: brightness(1.08); background: var(--d-bar); }
html.ui-d #cook-panel .fg-btn.cant { opacity: 1; color: var(--d-faint); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--d-line); cursor: pointer; }
html.ui-d #cook-panel .fg-btn.cant:hover { filter: none; color: var(--d-text); box-shadow: inset 0 0 0 1px var(--d-line-strong); }

/* =====================================================================================================
   DUSK SLATE, THE EXCHANGE ("improve the consignment board panel styling too"). The header as the shop's (astra
   chip); the two sides of the counter as the panel tabs and the shelves as slate chips; every listing on the shop's
   rarity tile, its name in its rarity's colour, who listed it and how long it has left quiet, its mods lilac; the
   price in champagne beside the key - Buy in the bar's gradient (quiet when you cannot pay), Take back quiet;
   listing from the pack a slate price field with a List key; section labels and empty states in the system face.
   ===================================================================================================== */
html.ui-d #mkt-panel { width: min(460px, calc(100vw - 24px)); padding: 16px 16px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.ui-d #mkt-title { gap: 8px; margin-bottom: 12px; }
html.ui-d #mkt-gold { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px;
  font: 700 12px/1.3 var(--d-ui); color: var(--d-champ); background: rgba(246, 231, 176, .08); box-shadow: inset 0 0 0 1px rgba(246, 231, 176, .28); }
html.ui-d #mkt-gold .astra-ico { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
html.ui-d #mkt-modes { margin: 0 0 10px; }
html.ui-d .mkt-mode { padding: 7px 0; border-radius: 9px; font: 600 12px/1.2 var(--d-ui); letter-spacing: .04em; }
html.ui-d #mkt-tabs { gap: 6px; margin: 0 0 10px; }
html.ui-d .mkt-tab { padding: 4px 11px; border-radius: 999px; font: 600 11.5px/1.2 var(--d-ui); }
html.ui-d .mkt-tab.bare:not(.on) { opacity: .45; }
html.ui-d :is(#mkt-mine-title, #mkt-sell-title) { margin: 14px 0 8px; font: 700 9.5px/1.2 var(--d-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--d-faint); }
html.ui-d :is(#mkt-mine-title, #mkt-sell-title) small { letter-spacing: .02em; text-transform: none; font-weight: 500; color: var(--d-faint); }
html.ui-d #mkt-panel .mkt-row { gap: 12px; margin: 0 -6px; padding: 8px 6px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); border-radius: 10px;
  transition: background .12s ease; }
html.ui-d #mkt-panel .mkt-row:hover { background: rgba(255, 255, 255, .045); }
html.ui-d #mkt-panel .mkt-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; box-sizing: border-box; padding: 4px; display: block;
  background: radial-gradient(120% 70% at 50% 115%, color-mix(in srgb, var(--rar, #6f7ba0) 26%, transparent), transparent 70%), linear-gradient(180deg, #19222e, #0c1118);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar, #6f7ba0) 42%, transparent), inset 0 -2px 0 var(--rar, #6f7ba0); }
html.ui-d #mkt-panel .mkt-ico img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
html.ui-d #mkt-panel .mkt-name { font: 600 13.5px/1.35 var(--d-ui); color: var(--rar, var(--d-text)); }
html.ui-d #mkt-panel .mkt-row[data-rarity="common"] .mkt-name { color: var(--d-text); }
html.ui-d #mkt-panel .mkt-name small { margin-top: 2px; font: 500 11.5px/1.4 var(--d-ui); color: var(--d-faint); }
html.ui-d #mkt-panel .mkt-name .mods { color: #c7b8ff; font-style: normal; }
html.ui-d #mkt-panel span.mkt-price { display: inline-flex; align-items: center; gap: 3px; font: 700 13px/1 var(--d-ui); color: var(--d-champ); }
html.ui-d #mkt-panel .mkt-btn { flex: none; min-width: 64px; padding: 8px 12px; border: 0; border-radius: 9px; font: 700 12px/1 var(--d-ui);
  color: #0b0f14; background: var(--d-bar); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); cursor: pointer; }
html.ui-d #mkt-panel .mkt-btn:hover { filter: brightness(1.08); background: var(--d-bar); }
html.ui-d #mkt-panel .mkt-btn:is(.cant, .off) { opacity: 1; color: var(--d-dim); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--d-line-strong); filter: none; }
html.ui-d #mkt-panel .mkt-btn.cant { color: var(--d-faint); box-shadow: inset 0 0 0 1px var(--d-line); }
html.ui-d #mkt-panel .mkt-btn.off:hover { color: #fff; background: rgba(255, 255, 255, .08); }
html.ui-d #mkt-panel input.mkt-price { flex: none; width: 92px; height: 32px; box-sizing: border-box; padding: 0 10px; border-radius: 9px; border: 1px solid var(--d-line);
  background: rgba(5, 8, 12, .62); color: var(--d-champ); font: 700 12.5px var(--d-ui); text-align: right; }
html.ui-d #mkt-panel input.mkt-price:focus { outline: none; border-color: rgba(246, 231, 176, .55); box-shadow: 0 0 0 3px rgba(246, 231, 176, .12); }
html.ui-d #mkt-panel .mkt-empty { padding: 16px 4px; text-align: center; font: 500 12px var(--d-ui); color: var(--d-faint); }
/* the board's rows carry the same rarity colours as the pack and the shop (hud.css defines them for those two) */
html.ui-d .mkt-row[data-rarity] { --rar: #6f7ba0; --rar-glow: rgba(111, 123, 160, .25); }
html.ui-d .mkt-row[data-rarity="rare"] { --rar: #7fd0ff; }
html.ui-d .mkt-row:is([data-rarity="epic"], [data-rarity="astral"]) { --rar: #c9a5ff; }
html.ui-d .mkt-row[data-rarity="legendary"] { --rar: #f1d48c; }
html.ui-d .mkt-row[data-rarity="curio"] { --rar: #fff6d0; }