/* The Activity's screens: the inventory and doll, the character sheet, talking, trading, the forge, the stash,
   contracts and delves, the skills, the passive trees, the waystone, the menu and the roster. Built on ui/kit.css
   (the frames, slots, plaques, tabs, buttons and tooltips) and ui/app.css (the layout). */

/* ---- shared ----------------------------------------------------------------------------------------------- */
.lede { margin: 2px 0 10px; font: italic 15px/1.5 var(--f-ui); color: var(--parch-dim); text-align: center; text-shadow: 0 1px 0 #000; }
.hint { font: italic 13px/1.3 var(--f-ui); color: var(--parch-faint); }
.forge-note { font: 13px/1.4 var(--f-ui); color: var(--parch-dim); }
.forge-note b { color: var(--gold-hi); font-weight: 400; }
.center { text-align: center; }
b.bad, .bad { color: var(--bad); }
b.gold { color: var(--gold-hi); font-weight: 400; }
.inv-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.coin { display: inline-block; width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #e6b84a 45%, #8a5a14 80%); box-shadow: 0 0 0 1px #3a2408, 0 1px 0 #000; }
.wnd select, .wnd input[type="range"], .name-input { font: 14px var(--f-ui); color: var(--parch); }
.wnd select { background: #0d0b09; border: 1px solid #4a3b28; padding: 3px 6px; box-shadow: inset 0 0 0 1px #000; }
.linkish { padding: 0; border: 0; background: none; font: italic 13px var(--f-ui); color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover { color: var(--gold-hi); }
.points { font: 400 14px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.08em; color: var(--parch-dim); }
.points.live, .choices.live { color: var(--gold-hi); animation: pulse-gold 2.2s ease-in-out infinite; }
@keyframes pulse-gold { 50% { text-shadow: 0 0 10px rgba(255, 200, 110, 0.65); } }
.btn.big { height: calc(24px * var(--px)); min-width: 260px; font-size: 18px; }
.empty { padding: 24px 10px; }
/* Painted item art (armour, weapons), redrawn on the UI's pixel grid as it loads (core.js): hidden until then, so it
   never shows smooth first. No sprite-sheet background: .icon's pixel sheet would show its first cells behind the art. */
.kit img.icon.art { display: block; max-width: none; background: none; image-rendering: pixelated; pointer-events: none; visibility: hidden; }
.kit img.icon.art.px { visibility: visible; }
.slot:hover > img.icon.art { filter: brightness(1.12); }
/* Item art sits in the middle of its slot (whole-pixel offsets: the icons are even-sized). */
.slot > .icon { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* The question box: the window's own iron, centred over it. */
.confirm { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0, 0, 0, 0.62); animation: fade-in 0.12s ease-out; }
.confirm-card { width: min(420px, 90%); padding: 18px 20px 16px; text-align: center; background: linear-gradient(180deg, #1a1511, #0e0c0a); border-color: #6b5430; box-shadow: 0 0 0 1px #000, 0 12px 40px rgba(0, 0, 0, 0.8); }
.confirm-title { font: 400 18px/1.2 var(--f-title); letter-spacing: 0.06em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.confirm-body { margin: 10px 0 14px; font: 15px/1.5 var(--f-ui); color: var(--parch); }
.confirm-body p { margin: 0; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }

/* ---- tooltips: the extras (comparison, sockets, tiers) ------------------------------------------------------------ */
.tip-pair { position: fixed; z-index: 1000; display: flex; gap: 8px; align-items: flex-start; pointer-events: none; }
.tip-pair > .tip { position: static; }
.tip.equipped { opacity: 0.94; }
.tip-flag { padding: 3px 0; font: 400 11px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.14em; color: var(--parch-dim); background: #000; border-bottom: 1px solid #2a2219; }
.tip-faint { color: #6f6a5e; font-size: 12px; }
.tip-line b.aug { color: var(--magic); }
.tip-line.warn { color: #d07a5a; }
.tip-mod { position: relative; padding: 0 30px; }
.tip-mod .tier { position: absolute; right: 2px; top: 1px; font: 400 10px/1.4 var(--f-ui); color: #5f6b8f; letter-spacing: 0.04em; }
.tip-mod .tip-range { color: #6f7aa0; font-size: 0.86em; white-space: nowrap; }
.tip-mod.implicit { color: #b8c4ff; }
.tip-mod.implicit.aug { color: var(--magic); }
.tip-mod.broken { color: #8a6f6f; font-style: italic; }
.tip-mod.broken .tier { color: #7a4a4a; }
.tip-mod.bad { color: #e0806a; }
.tip-mod.unique { color: var(--r-legendary); padding: 0 12px; }
.tip-mod.dimmed { color: #7f8fbf; }
.tip-power { display: block; font: 400 13px/1.3 var(--f-ui); font-variant: small-caps; letter-spacing: 0.06em; color: #ffb27a; }
.tip-socket { display: flex; align-items: center; justify-content: center; gap: 7px; color: #c9c2b2; }
.tip-socket i { width: 10px; height: 10px; flex: none; transform: rotate(45deg); background: var(--gc, #ccc); box-shadow: 0 0 0 1px #000, 0 0 6px color-mix(in srgb, var(--gc, #ccc) 60%, transparent); }
.tip-socket.empty { color: #77705f; }
.tip-socket.empty i { background: #15120f; box-shadow: 0 0 0 1px #6b5430; }
.tip-cost.short { color: var(--bad); }
.tip-head.plain { padding-top: 6px; padding-bottom: 5px; }
.tip-body.left { text-align: left; }
.tip-body.left .tip-line { padding: 1px 0; }
.tip-label { margin-bottom: 2px; font: 400 11px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.14em; color: var(--parch-faint); }
.tip-gem-bonus { padding: 5px 8px; }
.tip-gem-bonus > span { display: block; color: var(--parch-faint); font: 11px var(--f-ui); margin-bottom: 3px; }
.tip-gem-bonus > b { color: var(--magic); font-weight: 400; }

/* ---- the skill window (screens/skills.js): the book and loadout left, the chosen skill right ------------------------ */
#centre > .wnd.skillbook { width: 1480px; height: min(740px, calc(100vh / var(--ui-scale, 1) - 40px)); max-height: none; }
.skillbook .sb-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 404px 1fr; gap: 16px; margin-top: 8px; }
.skillbook .sb-left { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.skillbook .sb-right { min-height: 0; padding: 14px 18px 12px; overflow: hidden; }
.skillbook .sb-right .fitbox { transform-origin: 0 0; }
.skillbook .wnd-foot .points { font-variant-numeric: tabular-nums; }

/* ---- a rune tablet (its outline = its state) ------------------------------------------------------------------------- */
.rtab { --s: 2; --row: 0; --col: 0; display: block; width: calc(32px * var(--s)); height: calc(32px * var(--s)); flex: none;
  background-image: var(--ol), var(--atlas);
  background-size: calc(32px * var(--s)) calc(32px * var(--s)), calc(480px * var(--s)) calc(384px * var(--s));
  background-position: 0 0, calc(var(--col) * -32px * var(--s)) calc(var(--row) * -32px * var(--s));
  background-repeat: no-repeat; image-rendering: pixelated; }
.rtab.open { --ol: url('/activity/assets/runes/outline-open.png'); }
.rtab.set { --ol: url('/activity/assets/runes/outline-set.png'); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rl) 65%, transparent)); }
.rtab.locked { --ol: url('/activity/assets/runes/outline-locked.png'); filter: grayscale(1) brightness(0.42) contrast(1.15); }
.rtab.s1 { --s: 1; }

/* ---- the loadout ---------------------------------------------------------------------------------------------------- */
.sb-loadout { padding: 9px 14px 14px; }
.sb-loadout .ls-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 0 4px; }
.sb-loadout .lslot { width: 60px; height: 60px; }
.sb-loadout .lslot .rtab { position: absolute; right: -8px; top: -10px; pointer-events: none; }

/* ---- the book: no scroll; the rune badge on the top corner, the rank pips below -------------------------------------- */
.sb-left .skill-page { flex: 1; min-height: 0; max-height: none; overflow: hidden; padding: 12px 14px; }
.sb-left .skill-page-content { display: flow-root; }
.sb-left .sb-loadout { flex: none; }
.sb-left .skill-group + .skill-group { margin-top: 12px; }
.sb-left .skill-nodes { display: flex; flex-wrap: wrap; gap: 24px 16px; padding: 16px 12px 14px 6px; } /* Room for rune badges, frames and rank pips. */
.sb-left .snode { width: 58px; height: 58px; }
.sb-left .snode .rtab { position: absolute; right: -12px; top: -14px; pointer-events: none; }
.sb-left .snode .pips { position: absolute; left: -4px; right: -4px; bottom: -11px; display: flex; justify-content: center; align-items: center; gap: 2px; pointer-events: none; }
.sb-left .snode .pips i { width: 6px; height: 6px; transform: rotate(45deg); background: #1a1611; box-shadow: 0 0 0 1px #000; }
.sb-left .snode .pips i.on { background: var(--gold); box-shadow: 0 0 0 1px #000, 0 0 4px rgba(240, 200, 110, 0.6); }
.sb-left .snode .pips em { margin-left: 3px; font: 400 10px/1 var(--f-title); font-style: normal; color: var(--magic); text-shadow: 0 1px 0 #000; }
.sb-left .snode.lvl img { filter: grayscale(1) brightness(0.3); }
.sb-left .snode .lvl-tag { position: absolute; inset: auto 0 2px 0; text-align: center; font: 400 11px/1 var(--f-title); color: #c9b48a; text-shadow: 0 1px 0 #000, 0 0 4px #000; }

/* ---- the chosen skill ------------------------------------------------------------------------------------------------ */
.sd2-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #2a2219; }
.sd2-icon { width: 64px; height: 64px; background: #070605; box-shadow: 0 0 0 1px #000, 0 0 0 3px #a8803f, 0 0 0 4px #000; }
.sd2-icon img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.sd2-name { font: 400 23px/1.05 var(--f-title); letter-spacing: 0.04em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.sd2-role { margin-top: 3px; font: italic 14px/1.2 var(--f-ui); color: var(--parch-dim); }
.sd2-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sd2-tags span { padding: 2px 7px 1px; font: 400 11.5px/1.2 var(--f-ui); font-variant: small-caps; letter-spacing: 0.06em; color: var(--parch-dim); border: 1px solid #2e261b; background: #0d0b09; }
.sd2-rank { text-align: right; }
.sd2-rank b { display: block; font: 400 22px/1 var(--f-title); color: #fff; }
.sd2-rank small { display: block; margin-top: 4px; font: 12.5px/1.2 var(--f-ui); color: var(--parch-dim); }
.sd2-rank .gear { color: var(--magic); }
.sd2-rank small.ok { color: #9fbf86; } .sd2-rank small.bad { color: var(--bad); }
.sd2-cols { display: grid; grid-template-columns: 1fr 448px; gap: 22px; margin-top: 12px; }
.sd2-l { min-width: 0; }
.sd2-text { font: 14px/1.45 var(--f-ui); color: var(--parch); }
.sd2-text b.rk { font-weight: 400; color: #fff; }
.sd2-text .dim { color: var(--parch-dim); }

/* Its numbers at the current rank, the next rank's change beside each. */
.sd2-stats { width: 100%; margin-top: 10px; border-collapse: collapse; font: 14px/1.35 var(--f-ui); font-variant-numeric: tabular-nums; }
.sd2-stats thead th, .sd2-stats thead td { padding: 0 6px 5px; font: 400 11.5px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold); text-align: left; border-bottom: 1px solid #2e261b; }
.sd2-stats tbody th { padding: 4px 5px; font-weight: 400; color: var(--parch-dim); text-align: left; }
.sd2-stats tbody td { padding: 4px 5px; color: var(--magic); white-space: nowrap; }
.sd2-stats tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.sd2-stats .nx { color: #8fcf7a; text-align: right; white-space: nowrap; }
.sd2-stats thead .nx { color: #8fcf7a; text-align: right; }
.sd2-stats tr.st td { color: var(--parch); }

/* ---- Mastery ---------------------------------------------------------------------------------------------------------- */
.mastery { padding: 9px 12px 7px; border: 1px solid #2e261b; background: rgba(0, 0, 0, 0.3); }
.m-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.m-head b { font: 400 16px/1 var(--f-title); color: var(--gold-hi); letter-spacing: 0.04em; }
.m-head span { font: 13px/1.2 var(--f-ui); color: var(--parch-dim); font-variant-numeric: tabular-nums; }
.m-bar { position: relative; height: 10px; margin: 9px 4px 20px; background: #0a0907; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #3a2f22; }
.m-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #e9c46a, #a8742c); box-shadow: 0 0 8px rgba(240, 190, 90, 0.45); }
.m-bar .tick { position: absolute; top: -2px; width: 2px; height: 14px; margin-left: -1px; background: #3a2f22; }
.m-bar .tick.on { background: var(--gold-hi); }
.m-bar .tick em { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font: 400 10.5px/1 var(--f-title); font-style: normal; color: var(--parch-faint); }
.m-bar .tick.on em { color: var(--gold); }
.m-note { font: italic 12px/1.3 var(--f-ui); color: var(--parch-faint); }

/* ---- the runes: five tablets in the inventory's slot frames, left to right as Mastery opens them -------------------- */
.sd2-runes { margin-top: 12px; }
.rune-row { display: grid; grid-template-columns: repeat(5, 84px); justify-content: space-between; }
.rslot { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; }
.rslot .frame { display: grid; place-items: center; width: 84px; height: 84px; background: url('/activity/assets/kit/d/slots/slotd2.png') center / 100% 100% no-repeat; image-rendering: pixelated; }
.rslot.set .frame { background-image: url('/activity/assets/kit/d/slots/slotd3.png'); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rl) 55%, transparent)); }
.rslot.locked .frame { background-image: url('/activity/assets/kit/d/slots/slotc2.png'); }
.rslot:hover:not(.locked) .frame { filter: brightness(1.25); }
.rslot .nm { font: 400 12px/1.1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.02em; color: var(--parch-dim); text-align: center; min-height: 27px; }
.rslot.set .nm { color: var(--rl); }
.rslot.locked .nm { color: var(--parch-faint); }
.rslot .req { font: 400 10.5px/1 var(--f-ui); color: var(--parch-faint); white-space: nowrap; }
.rslot.set .req { color: var(--gold); }
.no-rune { margin-top: 10px; text-align: center; font: italic 13px/1.3 var(--f-ui); color: var(--parch-faint); }

.rune-sheet { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; margin-top: 8px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--rl) 35%, #2e261b); background: linear-gradient(90deg, color-mix(in srgb, var(--rl) 8%, #0c0a08), #0c0a08 60%); }
.rune-sheet .t { font: 400 17px/1.1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.03em; color: var(--rl); }
.rune-sheet .k { margin-top: 2px; font: 12px/1.2 var(--f-ui); font-variant: small-caps; letter-spacing: 0.06em; color: var(--parch-faint); }
.rune-sheet .lines { grid-column: 1 / -1; font: 13px/1.4 var(--f-ui); color: var(--magic); }
.rune-sheet .lines b.aug { font-weight: 400; color: #f2f5ff; }

/* ---- a rune's tooltip -------------------------------------------------------------------------------------------------- */
.tip-head.rune { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; text-align: left; padding: 8px 16px 8px 12px; }
.tip-head.rune::before, .tip-head.rune::after { display: none; }
.tip-head.rune .tip-name { color: var(--rl); }
.tip-head.rune .tip-base { color: var(--parch-dim); }

/* ---- the loadout box: its head, a slot's behaviour ------------------------------------------------------------------- */
.sb-loadout-head { display: flex; align-items: baseline; justify-content: space-between; }
.sb-loadout-head .skill-group-name { margin: 0; }
.sb-loadout-head .linkish { font-size: 12.5px; }
.sb-loadout .loadout-note { margin: 10px 0 0; text-align: left; }
.sb-loadout .behaviour { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 10px 0 0; padding: 0; }
.sb-loadout .behaviour label { display: flex; flex-direction: column; align-items: stretch; gap: 3px; font: 12px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.06em; color: var(--parch-faint); }
.sb-loadout .behaviour select { width: 100%; }
.sb-loadout .behaviour .beh-links { grid-column: 1 / -1; display: flex; gap: 12px; align-items: baseline; font: 12.5px/1.2 var(--f-ui); color: var(--parch-dim); }
.sb-left .snode .sslot { position: absolute; left: 2px; top: 1px; font: 400 10px/1 var(--f-title); color: var(--gold-hi); text-shadow: 0 1px 0 #000, 0 0 3px #000; pointer-events: none; }

/* ---- the chosen skill: notes, the scaling rows, the attribute hooks, a rune's "Scales with" ------------------------- */
.sd2-notes { margin-top: 6px; font: 13px/1.4 var(--f-ui); color: var(--parch-dim); }
.sd2-stats thead.sub th, .sd2-stats thead.sub td { padding-top: 10px; }
.sd2-stats tr.sh th { color: var(--parch-dim); }
.sd2-stats tr.sh td { color: var(--parch); }
.sd2-stats tr.sh td b.aug { font-weight: 400; color: var(--magic); }
.sd2-stats td.by, .sd2-stats .nx.by { text-align: right; font: 12.5px/1.2 var(--f-ui); color: var(--parch-faint); }
.sd2-stats thead .nx.by { font: 400 11.5px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold); }
.sd2-hooks { margin-top: 10px; padding: 8px 12px; border: 1px solid #2e261b; background: rgba(0, 0, 0, 0.25); font: 13px/1.4 var(--f-ui); color: var(--parch); }
.sd2-hooks .h { margin-bottom: 3px; font: 400 11.5px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold); }
.sd2-hooks .h + .hook { margin-top: 0; }
.sd2-hooks .hook + .h { margin-top: 8px; }
.sd2-hooks .hook b { font-weight: 400; color: #fff; }
.rune-sheet .lines .scales, .tip-body .scales { margin-top: 4px; font: italic 12.5px/1.3 var(--f-ui); color: var(--parch-faint); }
.tip-line.tip-rune { display: flex; gap: 8px; align-items: center; }
.tip-req.bad { color: var(--bad); }
.rslot .rune-dot { width: 18px; height: 18px; transform: rotate(45deg); background: var(--rl); opacity: 0.6; }

/* ---- keywords (app/keywords.js): a dotted word explains itself; a tooltip's keywords stand beside it as cards --------- */
.kw { color: var(--kc); border-bottom: 1px dotted color-mix(in srgb, var(--kc) 70%, transparent); cursor: help; }
.kw:hover { color: #fff; border-bottom-style: solid; }
.tip-stack { position: fixed; z-index: 1000; display: flex; gap: 8px; align-items: flex-start; pointer-events: none; }
.tip-stack.flip { flex-direction: row-reverse; }
.tip-stack > .tip { position: static; background: rgb(6, 5, 4); }
.tip-stack:not(.tip-pair) > .tip { max-width: 420px; }
.kw-col { display: flex; flex-direction: column; gap: 6px; width: 300px; flex: none; }
.kw-card { padding: 8px 12px 9px; background: rgb(8, 7, 6); border: 1px solid color-mix(in srgb, var(--kc) 45%, #000); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7); font: 13px/1.4 var(--f-ui); color: var(--parch-dim); text-align: left; }
.kw-card + .kw-card { margin-top: 0; }
.kw-card b { font-weight: 400; color: #fff; }
.kw-card .kw-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; font: 400 15px/1.1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.04em; color: var(--kc); }
.kw-card .kw-kind { font: 400 11px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.08em; color: var(--parch-faint); }
.kw-card .kw-ref { color: var(--parch); border-bottom: 1px dotted #6f675a; }
.kw-card > div + div:not(.kw-name) { margin-top: 3px; }
.tip > .kw-solo > .kw-card { border: 0; box-shadow: none; background: none; max-width: 320px; }

/* ---- the HUD's belt and skill bar ------------------------------------------------------------------------------- */
.hud-belt { position: absolute; left: 170px; bottom: 26px; display: flex; gap: 4px; }
.hud-belt .slot { width: calc(24px * var(--px)); height: calc(24px * var(--px)); }
.hud-belt kbd, .skill-slot kbd { position: absolute; right: -4px; bottom: -6px; font: 400 10px/1 var(--f-title); color: var(--gold-hi); text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.hud-row { left: 0; right: 0; bottom: 30px; gap: 8px; }
.hud-skills { position: absolute; right: 160px; bottom: 26px; display: flex; gap: 4px; }
.skill-slot { position: relative; width: 48px; height: 48px; padding: 0; border: 0; background: #070605; box-shadow: 0 0 0 1px #000, 0 0 0 3px #4d3c25, 0 0 0 4px #000; }
.skill-slot img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.skill-slot.empty { background: radial-gradient(circle, #15110d, #070605); }
/* In a run: the cooldown darkening the slot from the top, the seconds left over it. */
.skill-slot .cdv { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--cd, 0) * 100%); background: rgba(0, 0, 0, 0.62); pointer-events: none; }
.skill-slot .cdn { position: absolute; inset: 0; display: grid; place-items: center; font: 700 15px/1 var(--f-ui); color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px #000; pointer-events: none; }
.skill-slot:hover { box-shadow: 0 0 0 1px #000, 0 0 0 3px #c79b52, 0 0 0 4px #000; }

/* ---- the inventory --------------------------------------------------------------------------------------------- */
.doll { position: relative; flex: none; height: 360px; margin: 4px auto 6px; width: 536px; }
/* Use .slot's absolute icon centering: small slots have less content space than the icon's width. */
.doll-slot { position: absolute; }
.inv-belt { display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; }
.inv-belt > span { color: var(--parch-faint); font: 12px var(--f-ui); margin-right: 8px; letter-spacing: .1em; font-variant: small-caps; }
.belt-slot { width: 48px; height: 48px; }
.belt-slot small { position: absolute; bottom: 2px; right: 4px; color: var(--parch-faint); font: 10px var(--f-ui); pointer-events: none; }
.belt-slot.vacant .ghost { opacity: .16; }
.doll-slot.vacant > .icon.ghost { opacity: 0.16; filter: grayscale(1) brightness(1.6); }
.doll-slot .sockets { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: flex; gap: 3px; }
.doll-slot .sockets i { width: 8px; height: 8px; transform: rotate(45deg); background: #120f0c; box-shadow: 0 0 0 1px #8a6838; }
.doll-slot .sockets i.full { background: #cfe8ff; box-shadow: 0 0 0 1px #000, 0 0 5px #9cc8ff; }
.doll-label { position: absolute; font: 400 11px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.14em; color: var(--parch-faint); }
.belt-label { left: 0; width: 158px; top: 382px; text-align: right; }
.icon.ghost { pointer-events: none; }
.inv-tabs .tab small { margin-left: 4px; font-size: 11px; color: var(--parch-faint); }
.bag { margin-top: 8px; padding: 6px; max-height: 214px; overflow: auto; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; }
.bag-grid { display: grid; grid-template-columns: repeat(10, calc(24px * var(--px))); grid-auto-rows: calc(24px * var(--px)); justify-content: center; gap: 0; }
/* Empty cells share .empty with message blocks, but must keep the same square frame as filled cells. */
.bag-cell.empty { padding: 0; opacity: 0.55; }
.inv [data-item-draggable], .stash [data-item-draggable] { cursor: grab; touch-action: none; }
.item-drag-ghost { position: fixed !important; margin: 0 !important; z-index: 1500; pointer-events: none !important; opacity: .9; filter: drop-shadow(0 4px 6px #000b); }
.item-dragging { opacity: .35; cursor: grabbing !important; }
.slot.item-drop-ready, .stash-bag.item-drop-ready { outline: 1px solid #9d8052; outline-offset: -2px; box-shadow: inset 0 0 14px #bc934927; }
.slot.item-drop-over, .stash-bag.item-drop-over { outline: 2px solid #e3c784; outline-offset: -2px; background-color: #68532d66; box-shadow: inset 0 0 20px #e8bc5640, 0 0 8px #d4a54655; opacity: 1; }
.slot.locked::after { content: '★'; position: absolute; right: 3px; top: 2px; color: #f1ce77; font: 14px/1 var(--f-ui); text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; }
.item-sockets { position: absolute; display: flex; justify-content: center; gap: 2px; bottom: 3px; left: 50%; transform: translateX(-50%); z-index: 2; }
.inventory-socket { width: 10px; height: 10px; flex: none; border: 1px solid #a48854; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #1c1911, #060604); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #44341b; display: grid; place-items: center; padding: 0; }
.inventory-socket.full i { width: 55%; height: 55%; transform: rotate(45deg); background: var(--gc); box-shadow: inset 1px 1px 1px #ffffff66; }
.inventory-socket.legendary { border-color: #e4b96a; box-shadow: 0 0 4px #e5a63888, 0 0 0 1px #000; }
.doll-slot .inventory-socket { width: 18px; height: 18px; }
.doll-slot .item-sockets { bottom: 8px; gap: 4px; }
.item-drop-ready .inventory-socket.open { border-color: #c6dbb5; box-shadow: 0 0 7px #bcdfaa55; }
.item-drop-over .inventory-socket.open { border-color: #f0d787; box-shadow: 0 0 10px #edc655aa; }
.socket-focus { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 430px; border: 1px solid #79613d66; background: linear-gradient(90deg, #c4a05b12, #0b0906cc); padding: 3px 6px; }
.socket-focus-art { width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.socket-focus-art > .icon { position: static; transform: none; }
.socket-focus-name { min-width: 0; max-width: 210px; color: var(--parch); font: 12px var(--f-ui); text-align: left; }
.socket-focus-name small { display: block; color: var(--parch-faint); font: 10px var(--f-ui); margin-top: 3px; }
.socket-focus-seats { display: flex; gap: 5px; margin-left: auto; }
.socket-focus .inventory-socket { width: 26px; height: 26px; cursor: pointer; }
.socket-focus-close { border: 0; background: none; color: var(--parch-faint); font: 16px var(--f-ui); cursor: pointer; }
.socket-focus.item-drop-ready { border-color: #afbe87; }
.socket-focus.item-drop-over { border-color: var(--gold-hi); box-shadow: inset 0 0 18px #ddba4725; }
.gem-removal-note { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin: 20px 0; padding: 22px 8px; background: radial-gradient(ellipse, #bc9a4a14, transparent 75%); }
.gem-removal-note b { font: 20px var(--f-title); color: var(--gold-hi); }
.gem-removal-note p { font: 14px/1.6 var(--f-ui); color: var(--parch-dim); margin: 0; }
.socket.permanent small { color: var(--gold-hi); font: 11px var(--f-ui); }
.tip-line.favorite { color: var(--gold-hi); }
.wnd.inv .wnd-foot { min-height: 58px; }

/* ---- the character sheet ------------------------------------------------------------------------------------------ */
.sheet-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 4px 0 8px; }
.sheet-crest { width: 64px; height: 64px; image-rendering: pixelated; box-shadow: 0 0 0 1px #000, 0 0 0 3px #6b5430, 0 0 0 4px #000; }
.sheet-id h2 { margin: 0; font: 400 26px/1 var(--f-title); letter-spacing: 0.08em; color: #fff; text-shadow: 0 2px 0 #000; }
.sheet-id p { margin: 6px 0 0; font: 400 15px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.1em; color: var(--parch-dim); }
.sheet-level { text-align: center; }
.sheet-level span { display: block; font: 400 12px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.14em; color: var(--parch-faint); }
.sheet-level b { display: block; margin-top: 2px; font: 400 34px/1 var(--f-title); color: var(--gold-hi); text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 190, 90, 0.3); }
.sheet-xp .bar { min-width: 0; }
.sheet-cols { display: grid; grid-template-columns: 246px 1fr; gap: 18px; margin-top: 2px; }
.attr { display: grid; grid-template-columns: 1fr 64px auto; gap: 4px; align-items: center; height: 36px; }
.attr + .attr { margin-top: 8px; }
.attr-name { height: 32px; display: flex; align-items: center; padding: 0 12px; font: 400 14px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.1em; color: var(--parch); background: linear-gradient(180deg, #1a1612, #100d0b); border: 1px solid #3a2f22; box-shadow: inset 0 0 0 1px #000; }
.attr-val { height: 32px; display: flex; align-items: center; justify-content: center; font: 400 17px/1 var(--f-ui); color: #fff; background: #0a0807; border: 1px solid #3a2f22; box-shadow: inset 0 0 0 1px #000; }
.attr-val.up { color: var(--magic); }
.attr-btns { display: flex; gap: 2px; }
.pm { width: 32px; height: 32px; padding: 0; border: 0; background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.pm.plus { background-image: url('/activity/assets/kit/d/menuicons/menuicons-a15.png'); }
.pm.plus:hover:not(:disabled) { background-image: url('/activity/assets/kit/d/menuicons/menuicons-b15.png'); }
.pm.minus { width: 24px; height: 24px; align-self: center; background-image: url('/activity/assets/kit/d/menuicons/menuicons-a16.png'); }
.pm.minus:hover:not(:disabled) { background-image: url('/activity/assets/kit/d/menuicons/menuicons-b16.png'); }
.pm:disabled { opacity: 0.28; cursor: default; filter: grayscale(1); }
.pm.plus.live:not(:disabled) { filter: drop-shadow(0 0 5px rgba(255, 190, 90, 0.8)); }
.choices { margin-top: 14px; text-align: center; font: 400 14px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.1em; color: var(--parch-faint); }
.sheet-note { margin: 10px 4px 0; font: italic 12.5px/1.45 var(--f-ui); color: var(--parch-faint); text-align: center; }
.sheet-trees { display: flex; margin: 14px auto 0; }
.sheet-innates { margin: 0 4px; padding: 0 0 0 16px; color: var(--parch); font: 13px/1.5 var(--f-ui); }
.sheet-innates li + li { margin-top: 7px; }
.sheet-stats .rule { margin: 6px 0 6px; }
.sheet-stats .rule:first-child { margin-top: 14px; }
.sheet-stats .stat { height: 27px; }
.sheet-stats .stat + .stat { margin-top: 2px; }
.sheet-more { margin-top: 10px; }
.sheet-more summary { cursor: pointer; padding: 6px 8px; border: 1px solid #4a3b28; color: var(--gold); font: 400 14px/1 var(--f-ui); }
.sheet-more summary:hover { color: var(--gold-hi); }
.stat > b small { font-size: 11px; color: var(--parch-faint); margin-left: 3px; }
.stat > b small.over { color: var(--gold); font-variant: small-caps; }
.stat > b.life { color: #ff8a7a; } .stat > b.resource { color: var(--res-text, #8eb0ff); } .stat > b.phys { color: #e8dcc4; }
.el-physical { color: #e8dcc4; } .el-fire { color: #ff7a52; } .el-cold { color: #6fb6ff; } .el-lightning { color: #ffe06b; } .el-entropy { color: #b57bff; }

/* ---- talking ---------------------------------------------------------------------------------------------------------- */
#centre > .wnd.talk-wnd { width: 900px; }
.talk { grid-template-columns: 236px 1fr; align-items: start; }
.talk-portrait { height: 280px; background: radial-gradient(ellipse 80% 60% at 50% 75%, rgba(255, 170, 80, 0.18), transparent 70%), linear-gradient(180deg, #120e0a, #050403); }
.talk-portrait canvas { object-fit: contain; }
.talk-line { cursor: pointer; }
.talk-opt { width: 100%; position: relative; }
.talk-opt:disabled { color: var(--parch-faint); cursor: default; background: none; }
.qmark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; font: 400 18px/1 var(--f-title); color: #ffd25a; text-shadow: 0 0 8px rgba(255, 200, 80, 0.8), 0 2px 0 #000; animation: bob 1.6s ease-in-out infinite; }
.qmark.turnin { color: #ffe9a8; }
@keyframes bob { 50% { transform: translateY(-3px); } }

/* ---- quests ------------------------------------------------------------------------------------------------------------- */
.quest-list { max-height: 300px; overflow: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; }
.quest-list .rule { margin: 8px 4px 4px; }
.quest-row { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-bottom: 1px solid #1d1813; background: none; text-align: left; }
.quest-row:hover { background: rgba(210, 169, 93, 0.07); }
.quest-row.sel { background: linear-gradient(90deg, rgba(210, 169, 93, 0.18), rgba(210, 169, 93, 0.04)); box-shadow: inset 2px 0 0 var(--gold); }
.quest-row .qmark { margin: 0; width: 22px; animation: none; font-size: 16px; }
.qmark.new { color: #ffd25a; } .qmark.active { color: var(--parch-dim); } .qmark.ready { color: #8fe07a; text-shadow: 0 0 8px rgba(120, 220, 100, 0.7), 0 2px 0 #000; } .qmark.done { color: #6f675a; text-shadow: none; }
.quest-name { font: 400 15px/1.2 var(--f-ui); color: var(--parch); }
.quest-row.done .quest-name { color: var(--parch-faint); }
.quest-state { font: italic 12px/1 var(--f-ui); color: var(--parch-faint); }
.quest-row.ready .quest-state { color: #8fe07a; font-style: normal; }
.quest-prog { position: relative; width: 110px; height: 14px; background: #0a0807; box-shadow: 0 0 0 1px #000, 0 0 0 2px #3a2f22; }
.quest-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #e9c46a, #9a6a1c); }
.quest-prog b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 11px/1 var(--f-ui); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.quest-detail { margin-top: 12px; }
.quest-title { display: flex; align-items: center; gap: 8px; }
.quest-title b { font: 400 18px/1.1 var(--f-title); letter-spacing: 0.04em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.quest-giver { margin-left: auto; font: italic 13px/1 var(--f-ui); color: var(--parch-faint); }
.quest-text { margin: 8px 0; padding: 10px 12px; max-height: 150px; overflow: auto; font: 14.5px/1.55 var(--f-ui); color: var(--parch); background: rgba(0, 0, 0, 0.25); border-left: 2px solid #4a3b28; scrollbar-width: thin; }
.quest-text p { margin: 0 0 6px; }
.quest-text i { color: var(--parch-dim); }
.quest-text p.said { color: #f1e6c8; }
.quest-terms { display: grid; gap: 6px; font: 14px/1.45 var(--f-ui); color: var(--parch); }
.quest-terms > div { display: grid; grid-template-columns: 82px 1fr; gap: 10px; }
.quest-terms span { font: 400 12px/1.6 var(--f-ui); font-variant: small-caps; letter-spacing: 0.12em; color: var(--gold); }
.quest-terms ul { margin: 0; padding-left: 16px; }
.quest-terms b { color: #fff; font-weight: 400; }
.quest-actions { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }

/* ---- a trader's shelf ------------------------------------------------------------------------------------------------------ */
.shop-head { display: flex; justify-content: space-between; align-items: center; margin: 10px 2px 8px; font: 13px/1 var(--f-ui); color: var(--parch-dim); }
.shop-head b { color: var(--gold-hi); font-weight: 400; }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; max-height: 520px; overflow: auto; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; }
.ware { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border: 1px solid transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent); }
.ware:hover { border-color: #3a2f22; background: rgba(210, 169, 93, 0.06); }
.ware.sel { border-color: var(--gold); box-shadow: 0 0 12px rgba(244, 210, 140, 0.25), inset 0 0 18px rgba(244, 210, 140, 0.08); }
.ware.out { opacity: 0.4; filter: grayscale(0.8); }
.ware-slot { width: 96px; height: 96px; display: grid; place-items: center; }
.ware-slot > .icon { position: static; transform: none; }
.ware-name { max-width: 100%; font: 400 12.5px/1.2 var(--f-ui); font-variant: small-caps; text-align: center; overflow-wrap: anywhere; }
.ware .price { display: inline-flex; align-items: center; gap: 2px; }
.ware .price small { color: var(--parch-faint); font-size: 11px; }
.price.short { color: var(--bad); }
.backpack-upgrades { display: grid; gap: 4px; padding: 8px; }
.backpack-upgrade { display: grid; grid-template-columns: 76px minmax(92px, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 9px; background: linear-gradient(90deg, #19140e, #0d0b09); border-bottom: 1px solid #392f22; }
.backpack-upgrade.added { opacity: .7; }
.backpack-upgrade.next { background: linear-gradient(90deg, #292012, #100d09); }
.backpack-row-label { color: var(--gold-hi); font: 13px var(--f-title); letter-spacing: .05em; }
.backpack-row-state { color: var(--parch-dim); font: 13px var(--f-ui); font-variant-numeric: tabular-nums; }
.backpack-upgrade.added .backpack-row-state { color: #98b77a; }
.backpack-upgrade .btn { min-height: 32px; white-space: nowrap; }
.backpack-upgrades > .hint { margin: 5px 2px 1px; }
.wnd.vendor .wnd-foot .inv-actions { margin-left: auto; }
@media (max-width: 560px) {
  .backpack-upgrade { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 8px; }
  .backpack-upgrade .btn { grid-column: 1 / -1; justify-self: stretch; }
  .backpack-upgrades > .hint { line-height: 1.4; }
}

/* ---- the forge ---------------------------------------------------------------------------------------------------------------- */
.anvil { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin: 12px 0 4px; }
.anvil-bed { padding: 10px; background: radial-gradient(ellipse at 50% 70%, rgba(255, 120, 40, 0.18), transparent 70%), #0a0807; box-shadow: 0 0 0 1px #000, 0 0 0 3px #3a2f22, inset 0 -12px 30px rgba(255, 90, 20, 0.12); }
.anvil-slot { width: 120px; height: 120px; display: grid; place-items: center; }
.anvil-slot > .icon { position: static; transform: none; }
.anvil-id b { display: block; font: 400 18px/1.2 var(--f-ui); font-variant: small-caps; }
.anvil-id span { display: block; margin-top: 4px; font: italic 13px/1 var(--f-ui); color: var(--parch-faint); }
.quality { display: flex; align-items: center; gap: 12px; }
.quality b { font: 400 16px/1 var(--f-ui); color: #fff; white-space: nowrap; }
.pips { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 3px; }
.pips i { height: 12px; background: #120f0c; box-shadow: 0 0 0 1px #3a2f22; }
.pips i.on { background: linear-gradient(180deg, #ffe7a0, #c08a2a); box-shadow: 0 0 0 1px #000, 0 0 6px rgba(255, 200, 100, 0.5); }
.pips i.ex { box-shadow: 0 0 0 1px #6a3a8a; }
.forge-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; }
.forge-row .btn { flex: none; }
.rite-binding { color: #a39a83; }
.craft-blocked { color: var(--bad); }
.craft-action { display: flex; flex: none; justify-content: center; align-items: center; gap: 16px; padding: 6px 0; }
.rite-cost { display: flex; gap: 6px; align-items: center; color: var(--parch-dim); font: 13px var(--f-ui); }
.rite-cost .icon { position: static; display: inline-block; }
.wnd.forge { container: forge / inline-size; margin: 0; padding: 14px 16px 12px; border: 8px solid transparent; border-image: url('/activity/assets/kit/d/panels/panel-l.png') 12 / 8px stretch; }
.wnd.forge > .plaque { top: -16px; }
.wnd.forge > .tabs { flex: none; margin: 0 0 10px; }
.wnd.forge .forge-body.forge-craft { overflow: auto; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; }
.craft-workbench { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(255px, .85fr); gap: 16px; align-items: start; }
.craft-inputs { display: grid; gap: 14px; min-width: 0; }
.craft-target, .craft-materials, .craft-preview { min-width: 0; }
.craft-step { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 7px; color: var(--gold); font: 14px var(--f-title); }
.craft-step small { color: var(--parch-faint); font: 10px/1.35 var(--f-ui); text-align: right; }
.craft-target-drop { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px; border: 1px dashed #51432e; background: linear-gradient(110deg, #17120d, #0b0907); }
.craft-target-drop.loaded { border-style: solid; border-color: #655137; }
.craft-target-drop.item-drop-ready { outline: 1px solid #9d8052; box-shadow: inset 0 0 20px #bc934927; }
.craft-target-drop.item-drop-over { outline: 2px solid #e3c784; box-shadow: inset 0 0 26px #e8bc5640; }
.craft-target-art { width: 104px; height: 104px; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 20%, transparent), transparent 72%); }
.craft-target-art > .icon { position: static; transform: none; }
.kit .fracture-workbench .craft-target-art > .icon { max-width: 100%; max-height: 100%; object-fit: contain; }
.fracture-material-drop .craft-target-art { width: 64px; height: 64px; }
.craft-target-info { display: grid; align-content: start; gap: 4px; min-width: 0; }
.craft-target-info > b { font: 400 17px/1.2 var(--f-title); overflow-wrap: anywhere; }
.craft-target-info > span { color: var(--parch-faint); font: 11px/1.35 var(--f-ui); }
.craft-item-affixes, .craft-target-list ul, .craft-details, .craft-rolls ul { list-style: none; margin: 4px 0 0; padding: 0; }
.craft-item-affixes { display: grid; gap: 3px; }
.craft-item-affixes li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; color: var(--parch-dim); font: 11px/1.3 var(--f-ui); }
.craft-item-affixes li > span { min-width: 0; overflow-wrap: anywhere; }
.craft-item-affixes li.targeted { color: #f3d58c; }
.craft-item-affixes li small { flex: none; color: #d0a95d; font: 9px var(--f-ui); }
.craft-target-info .craft-no-affixes { font-style: italic; }
.craft-target-info .craft-item-power { color: #d6ad72; }
.craft-recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); gap: 5px; padding: 0; }
.craft-recipe { position: relative; min-width: 0; min-height: 69px; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; justify-items: start; gap: 1px 5px; padding: 5px; border: 1px solid #392f22; background: linear-gradient(145deg, #18140f, #0d0b09); color: var(--parch-dim); text-align: left; }
.craft-recipe .craft-material-icon { grid-row: 1 / span 2; }
.craft-recipe b { align-self: end; font: 11px/1.15 var(--f-ui); overflow-wrap: break-word; }
.craft-recipe small { color: var(--parch-faint); font: 9px/1.2 var(--f-ui); }
.craft-recipe.depleted { opacity: .63; }
.craft-recipe:hover { border-color: #7a633b; color: var(--parch); }
.craft-recipe.sel { border-color: var(--gold); background: linear-gradient(145deg, #342818, #17120b); color: var(--gold-hi); box-shadow: inset 0 0 12px #e4bb5318; }
.craft-material-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border: 1px solid color-mix(in srgb, var(--rc, #706044) 58%, #17120d); background: radial-gradient(circle, color-mix(in srgb, var(--rc, #706044) 16%, transparent), #090807 74%); }
.craft-material-icon .icon { position: static; display: block; }
.ember-step { margin-top: 4px; }
.ember-step span small { margin-left: 4px; color: var(--parch-faint); font: italic 10px var(--f-ui); }
.ember-tray { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); justify-content: stretch; gap: 5px; padding: 0; margin: 0; border: 0; }
.ember-choice { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; justify-items: start; gap: 1px 5px; min-width: 0; min-height: 54px; padding: 4px; border: 1px solid #332a20; background: #0d0b09; color: var(--parch-dim); font: 10px/1.2 var(--f-ui); text-align: left; cursor: pointer; }
.ember-choice .craft-material-icon { grid-row: 1 / span 2; }
.ember-choice > span:not(.craft-material-icon) { overflow-wrap: break-word; }
.ember-choice small { color: var(--parch-faint); font: 9px var(--f-ui); }
.ember-choice.depleted { opacity: .58; }
.ember-choice:hover { border-color: #715b38; color: var(--parch); }
.ember-choice.sel { border-color: var(--gold); background: #211a10; color: var(--gold-hi); }
.craft-preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #59442a77; background: linear-gradient(160deg, #17130e, #0b0907 75%); }
.craft-preview-head { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid #59442a77; }
.craft-preview-head small { color: var(--parch-faint); font: 10px var(--f-ui); letter-spacing: .13em; }
.craft-preview-head b { color: var(--gold-hi); font: 400 18px/1.2 var(--f-title); }
.craft-summary { margin: 0; color: var(--parch); font: 12px/1.45 var(--f-ui); }
.craft-ember-note { margin: 0; color: var(--parch-dim); font: 10px/1.4 var(--f-ui); }
.craft-ember-note span { color: #d8b96f; }
.craft-details { display: grid; gap: 3px; }
.craft-details li { color: var(--parch-faint); font: 10px/1.35 var(--f-ui); }
.craft-details li::before { content: '◆'; margin-right: 5px; color: #977b4d; font-size: 8px; }
.craft-target-list, .craft-rolls { min-width: 0; padding-top: 7px; border-top: 1px solid #46382388; }
.craft-target-list > b, .craft-rolls-head b { color: var(--parch); font: 12px/1.3 var(--f-ui); }
.craft-target-list ul, .craft-rolls ul { display: grid; gap: 4px; max-height: 150px; overflow: auto; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; }
.craft-target-list li, .craft-rolls li { display: flex; justify-content: space-between; gap: 8px; color: #e0ca98; font: 10px/1.3 var(--f-ui); }
.craft-rolls-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.craft-rolls-head small { color: var(--parch-faint); font: 10px var(--f-ui); }
.craft-rolls li span { min-width: 0; overflow-wrap: anywhere; }
.craft-rolls li small { flex: none; color: var(--parch-faint); font: 9px var(--f-ui); text-transform: capitalize; }
.craft-rolls > p { margin: 5px 0 0; color: var(--parch-faint); font: 10px/1.35 var(--f-ui); }
.craft-preview .craft-blocked { margin: 0; color: var(--bad); font: 11px/1.35 var(--f-ui); }
.craft-preview .rite-binding { margin: 0; color: #a39a83; font: 10px var(--f-ui); }
.craft-preview .craft-action { justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 9px 0 0; margin-top: auto; border-top: 1px solid #59442a77; }
.craft-preview .rite-cost { flex-wrap: wrap; gap: 4px; font: 10px var(--f-ui); }
.craft-preview .rite-cost .icon { width: 18px !important; height: 18px !important; }
.craft-preview .rite-cost b { color: var(--gold-hi); font-weight: 400; }
.craft-preview .rite-cost i { color: var(--parch-faint); font-style: normal; }
.craft-preview .craft-action .btn { min-width: 110px; }
@media (max-width: 700px) {
  .wnd.forge { padding-inline: 10px; }
  .craft-workbench { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .craft-preview { position: static; }
  .craft-target-drop { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
  .craft-target-art { width: 84px; height: 84px; }
}
@container forge (max-width: 820px) {
  .craft-workbench { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .craft-preview { position: static; }
  .craft-target-drop { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
  .craft-target-art { width: 84px; height: 84px; }
}
.salvage-receipt { padding: 22px; margin-top: 12px; color: var(--parch); font: 15px/1.5 var(--f-ui); background: radial-gradient(ellipse at 50% 45%, #88351b20, transparent 75%); }
.salvage-receipt { text-align: center; }
.salvage-receipt strong { display: block; margin: 18px 0; font: 26px var(--f-title); color: var(--gold-hi); }
.salvage-receipt p { color: var(--parch-dim); }
.anvil-bed.item-drop-ready { outline: 1px solid #9d8052; box-shadow: inset 0 0 20px #bc934927; }
.anvil-bed.item-drop-over { outline: 2px solid #e3c784; box-shadow: inset 0 0 26px #e8bc5640; }
.wnd.forge .forge-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 2px 6px; }
.wnd.forge .forge-body.forge-salvage { overflow-y: auto; }
.salvage-bulk { padding: 14px 10px; text-align: center; border-bottom: 1px solid #9d80524d; }
.salvage-bulk > b { color: var(--gold-hi); font: 21px var(--f-title); }
.salvage-bulk > p { margin: 8px 0; color: var(--parch); }
.salvage-bulk > .forge-note { display: block; margin-bottom: 12px; }
.salvage-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: 10px; }
.salvage-groups p { margin: 0 0 10px; color: var(--parch); }
.salvage-groups .forge-note { display: block; margin-top: 10px; }
.wnd.forge .confirm-card { max-height: calc(100% - 28px); overflow-y: auto; }
.salvage-confirm-list { max-height: min(140px, 22vh); overflow-y: auto; padding-left: 20px; text-align: left; font-size: 13px; }
.wnd.forge .anvil, .wnd.forge > .tabs { flex: none; }
/* The lapidary's table uses the existing gem atlas and socket frames. */
.forge-combine { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.combine-heading { text-align: center; padding: 10px 0 2px; flex: none; }
.combine-heading b { display: block; font: 23px var(--f-title); color: var(--gold-hi); }
.combine-heading > span { display: block; font: italic 12px var(--f-ui); color: var(--parch-faint); margin-top: 4px; }
.combine-table { position: relative; width: 230px; height: 180px; margin: 4px auto 0; flex: none; background: radial-gradient(ellipse, color-mix(in srgb, var(--gc) 15%, transparent), transparent 68%); }
.combine-ring { position: absolute; width: 142px; height: 142px; border: 1px solid #8e704766; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 7px #9a77400c, 0 0 0 9px #9a77400c; }
.combine-ring::after { content: ''; position: absolute; inset: 15px; border: 1px dashed #8e70473d; border-radius: 50%; }
.combine-ingredient { position: absolute; left: calc(50% - 21px); top: calc(50% - 21px); width: 42px; height: 42px; transform: rotate(var(--angle)) translateX(73px) rotate(calc(-1 * var(--angle))); background-color: #080807; }
.combine-ingredient.empty { opacity: .4; }
.combine-ingredient.empty > span { color: var(--gold-hi); font: 26px var(--f-title); }
.combine-heart { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); display: grid; place-items: center; background: url('/activity/assets/kit/gems/gem-emptyslot3.png') center / 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gc) 35%, transparent)); }
.combine-heart > .icon { position: static; transform: none; }
.combine-heart > span { font: 46px var(--f-title); color: var(--parch-faint); }
.combine-table.ready .combine-ring { border-color: color-mix(in srgb, var(--gc) 55%, #bea276); box-shadow: 0 0 16px color-mix(in srgb, var(--gc) 20%, transparent), inset 0 0 0 7px #9a77400c; }
.combine-table.item-drop-ready { outline: 1px solid #9d805266; border-radius: 50%; }
.combine-table.item-drop-over { box-shadow: inset 0 0 30px #e8bc5640; border-radius: 50%; }
.combine-tally { position: absolute; left: 50%; top: calc(50% + 42px); transform: translateX(-50%); font: 13px var(--f-ui); color: var(--gold-hi); }
.combine-result { text-align: center; flex: none; }
.combine-result b { display: block; font: 22px var(--f-title); }
.combine-result > span { display: block; margin-top: 4px; font: 11px var(--f-ui); color: var(--parch-faint); }
.combine-effects { padding: 8px 12px; min-height: 64px; flex: none; background: linear-gradient(90deg, transparent, #bd925010, transparent); }
.combine-effects > div { display: grid; grid-template-columns: 48px 1fr 12px 1fr; align-items: center; gap: 4px; font: 11px/1.65 var(--f-ui); }
.combine-effects span { color: var(--parch-faint); }
.combine-effects small { font: inherit; color: var(--parch-dim); text-align: right; }
.combine-effects i { font-style: normal; color: var(--gold); text-align: center; }
.combine-effects b { font-weight: 400; color: var(--parch); }
.forge-combine .rule { margin: 6px 0; flex: none; }
.forge-combine .rule small { font: 10px var(--f-ui); color: var(--parch-faint); margin-left: 8px; }
.combine-tray { display: grid; grid-template-columns: repeat(6, 44px); justify-content: center; align-content: start; gap: 10px 12px; min-height: 44px; flex: none; padding: 2px 0; }
.combine-tray > p { grid-column: 1 / -1; text-align: center; }
.combine-choice { width: 44px; height: 44px; padding: 0; cursor: pointer; }
.combine-choice.depleted { opacity: .5; }
.combine-choice.sel { opacity: 1; box-shadow: 0 0 0 1px var(--gold), 0 0 14px #d5b25a44; }
.combine-lock { position: absolute; top: -4px; right: -4px; font: 12px var(--f-ui); color: var(--gold-hi); text-shadow: 1px 1px #000; }
.slot.gem-cell, .slot.combine-choice, .slot.combine-ingredient {
  border: 0; border-image: none;
  background: url('/activity/assets/kit/slots/slotc2.png') center / 100% 100% no-repeat;
}
.slot.gem-cell::before, .slot.combine-choice::before, .slot.combine-ingredient::before { inset: 4px; }
.slot.gem-cell.sel::after, .slot.combine-choice.sel::after { inset: 0; border: 1px solid var(--gold); box-shadow: inset 0 0 10px #d6b45c22, 0 0 6px #d6b45c44; pointer-events: none; }
.slot.gem-cell .qty, .slot.combine-choice .qty { left: 4px; top: 3px; }
/* Pressing an orbiting slot must not replace its positioning transform. */
.slot.combine-ingredient:active { transform: rotate(var(--angle)) translateX(73px) rotate(calc(-1 * var(--angle))); }
.slot.combine-ingredient.filled { cursor: pointer; }
.combine-action { margin-top: auto; padding-top: 8px; flex: none; }
.combine-status { min-height: 30px; text-align: center; font: 12px/1.3 var(--f-ui); color: var(--parch-dim); }
.combine-status.complete { color: #b8d397; }
@media (max-height: 760px) {
  .combine-heading { padding-top: 4px; }
  .combine-table { height: 162px; margin-top: 0; }
  .combine-effects { padding-block: 4px; }
  .combine-action { padding-top: 4px; }
}
.sockets-row { display: flex; justify-content: center; gap: 18px; padding: 10px 0; }
.socket { width: 56px; height: 56px; padding: 0; border: 0; display: grid; place-items: center; background: url('/activity/assets/kit/gems/gem-emptyslot3.png') center / 100% 100% no-repeat; image-rendering: pixelated; }
.socket i { width: 22px; height: 22px; transform: rotate(45deg); }
.socket.full i { background: radial-gradient(circle at 35% 30%, #fff, var(--gc) 45%, color-mix(in srgb, var(--gc) 45%, #000)); box-shadow: 0 0 0 2px #000, 0 0 12px color-mix(in srgb, var(--gc) 70%, transparent); }
.socket.ready { filter: drop-shadow(0 0 6px rgba(255, 210, 120, 0.8)); animation: pulse-gold 1.6s infinite; }
.gem-grid { display: grid; grid-template-columns: repeat(6, calc(24px * var(--px))); justify-content: center; gap: 12px; padding: 12px; }

/* ---- the stash ------------------------------------------------------------------------------------------------------------------ */
.stash-head { display: flex; justify-content: space-between; margin: 6px 2px 8px; font: 13px/1 var(--f-ui); color: var(--parch-dim); }
.stash-head b { color: var(--gold-hi); font-weight: 400; }
.stash-bag { max-height: 470px; }
.wnd.stash .wnd-foot .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wnd.stash .wnd-foot .btn { flex: none; }

/* ---- the atlas ----------------------------------------------------------------------------------------------------------------- */
.atlas-power { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 4px 0 10px; font: 400 13px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.12em; color: var(--parch-dim); }
.atlas-power b { font: 400 28px/1 var(--f-title); color: #ff8a5a; text-shadow: 0 0 14px rgba(255, 100, 40, 0.5), 0 2px 0 #000; }
.atlas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.atlas-seat { min-height: 64px; display: grid; place-items: center; gap: 2px; padding: 8px; text-align: center; font: 400 12.5px/1.2 var(--f-ui); font-variant: small-caps; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 14%, transparent), transparent 70%), #0b0908; box-shadow: 0 0 0 1px #000, 0 0 0 2px #2c241a; }
.atlas-seat.full { box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--rc) 50%, #2c241a); }
.atlas-seat { width: 100%; border: 0; color: var(--parch); cursor: pointer; }
.atlas-seat:hover { filter: brightness(1.15); }
.atlas-seat.sel { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold), inset 0 0 14px rgba(244, 210, 140, 0.16); }
.atlas-seat small { font: 11.5px/1 var(--f-ui); font-variant: normal; color: var(--parch-faint); }
.atlas-name { max-width: 100%; overflow-wrap: anywhere; }
/* (The window is a column: seats, power and headings keep their size; the backpack and the table scroll.) */
.wnd.atlas .lede, .wnd.atlas .atlas-power, .wnd.atlas .atlas-grid, .wnd.atlas .rule { flex: none; }
.atlas-loose { flex: 0 1 auto; min-height: 60px; max-height: 196px; overflow: auto; padding: 4px; }
.atlas-loose > .hint { padding: 12px 6px; }
.relic-row { width: 100%; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; padding: 4px 6px; border: 0; border-bottom: 1px solid #1d1813; background: none; text-align: left; cursor: pointer; }
.relic-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 16%, transparent), transparent); }
.relic-row-text { display: grid; gap: 3px; min-width: 0; }
.relic-row-text b { font: 400 14px/1.2 var(--f-ui); }
.relic-row-text small { font: 12px/1.2 var(--f-ui); color: var(--parch-faint); }
.atlas-totals { flex: 1 1 0; min-height: 60px; overflow: auto; align-content: start; display: grid; gap: 3px; padding: 0 4px; font: 13.5px/1.4 var(--f-ui); color: var(--magic); text-align: center; }
.atlas-totals .bad { color: #e0806a; }
.relic { width: 22px; height: 22px; transform: rotate(45deg); background: linear-gradient(135deg, #2a1a12, #6a2a14); box-shadow: 0 0 0 1px #000, 0 0 8px color-mix(in srgb, var(--rc) 60%, transparent); }

/* ---- skills ---------------------------------------------------------------------------------------------------------------------- */
.loadout { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px 0 4px; }
.lslot { position: relative; width: 64px; height: 64px; padding: 0; border: 0; background: #070605; box-shadow: 0 0 0 1px #000, 0 0 0 3px #5a4529, 0 0 0 4px #000; }
.lslot img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.lslot kbd { position: absolute; left: 3px; top: 2px; font: 400 11px/1 var(--f-title); color: var(--gold-hi); text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.lslot.empty { background: radial-gradient(circle, #16120e, #060504); }
.lslot.sel { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold-hi), 0 0 14px rgba(244, 210, 140, 0.55); }
.lslot .cond { position: absolute; right: 2px; bottom: 2px; width: 8px; height: 8px; transform: rotate(45deg); background: #8ea9ff; box-shadow: 0 0 0 1px #000; }
.lslot-arrow { width: 12px; height: 2px; background: linear-gradient(90deg, #6b5430, #c79b52); position: relative; }
.lslot-arrow::after { content: ''; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left-color: #c79b52; border-right: 0; }
.loadout-note { text-align: center; font: italic 12.5px/1.4 var(--f-ui); color: var(--parch-faint); margin-bottom: 6px; }
.loadout-note b { color: var(--gold-hi); font-style: normal; font-weight: 400; }
.tactics-open { text-align: center; margin: -2px 0 8px; }
.behaviour { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px; margin-bottom: 8px; font: 13px/1 var(--f-ui); color: var(--parch-dim); }
.behaviour label { display: flex; align-items: center; gap: 6px; }
.conds { color: #8ea9ff; }
.skill-tabs { flex-wrap: wrap; }
.skill-tabs .tab { padding: 0 10px; font-size: 12.5px; }
.skill-page { margin-top: 8px; padding: 8px 10px; max-height: 250px; overflow: auto; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; }
.skill-group + .skill-group { margin-top: 8px; }
.skill-group-name { margin-bottom: 4px; font: 400 12px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.14em; color: var(--gold); }
.skill-nodes { display: flex; flex-wrap: wrap; gap: 8px; }
.snode { position: relative; width: 56px; height: 56px; padding: 0; border: 0; background: #070605; box-shadow: 0 0 0 1px #000, 0 0 0 3px #3a2f22, 0 0 0 4px #000; }
.snode img { width: 100%; height: 100%; display: block; image-rendering: pixelated; filter: grayscale(0.85) brightness(0.55); }
.snode.learned img { filter: none; }
.snode.learned { box-shadow: 0 0 0 1px #000, 0 0 0 3px #a8803f, 0 0 0 4px #000; }
.snode.can::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(255, 210, 120, 0.7); animation: pulse-gold 2s infinite; pointer-events: none; }
.snode.sel { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold-hi), 0 0 16px rgba(244, 210, 140, 0.6); }
.snode:hover img { filter: none; }
.srank { position: absolute; right: -4px; bottom: -6px; min-width: 18px; padding: 1px 3px; font: 400 11px/1 var(--f-title); color: #fff; text-align: center; background: #0b0908; box-shadow: 0 0 0 1px #6b5430; }
.srank small { color: var(--magic); }
.sslot { position: absolute; left: -4px; top: -6px; padding: 1px 3px; font: 400 10px/1 var(--f-title); color: #2a1a08; background: var(--gold-hi); box-shadow: 0 0 0 1px #000; }
.skill-detail { margin-top: 10px; min-height: 150px; }
.sd-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sd-head b { font: 400 18px/1.1 var(--f-title); letter-spacing: 0.04em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.sd-head span { font: italic 13px/1 var(--f-ui); color: var(--parch-dim); }
.sd-head .sd-rank { margin-left: auto; font: 400 13px/1 var(--f-ui); font-style: normal; color: #fff; }
.sd-head .sd-rank small { color: var(--magic); }
.sd-text { margin: 6px 0; font: 14px/1.45 var(--f-ui); color: var(--parch); }
.sd-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 6px 10px; font: 13.5px/1.4 var(--f-ui); color: var(--magic); background: rgba(0, 0, 0, 0.3); border-left: 2px solid #3a4a7a; }
.runes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rune { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border: 1px solid #2c241a; background: #0d0b09; font: 400 12.5px/1 var(--f-ui); font-variant: small-caps; color: var(--parch-dim); }
.rune i { width: 9px; height: 9px; transform: rotate(45deg); background: #1d1813; box-shadow: 0 0 0 1px #6b5430; }
.rune:hover:not(:disabled) { color: var(--parch); border-color: #4a3b28; }
.rune.on { color: var(--gold-hi); border-color: var(--gold); }
.rune.on i { background: #e05252; box-shadow: 0 0 0 1px #000, 0 0 6px #ff6a5a; }
.rune.locked { opacity: 0.45; }
.sd-warn { margin-top: 6px; font: italic 13px/1.3 var(--f-ui); color: #d07a5a; }

/* ---- the passive trees (Diablo II's three columns, on the pack's tree set) ---------------------------------------------------------- */
#centre > .wnd.passives { width: min(1560px, 96vw); }
.ptrees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ptree { position: relative; padding: 0 6px 6px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15)); box-shadow: inset 0 0 0 1px #1d1813; }
.ptree header { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px 6px 8px; border-bottom: 1px solid #2c241a; }
.ptree header img { width: 44px; height: 44px; image-rendering: pixelated; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6b5430; }
.ptree header b { display: block; font: 400 17px/1.1 var(--f-title); letter-spacing: 0.04em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.ptree header small { display: block; margin-top: 3px; font: italic 11.5px/1.3 var(--f-ui); color: var(--parch-faint); }
.tree-spent { font: 400 26px/1 var(--f-title); color: #fff; text-shadow: 0 2px 0 #000; }
.tree-tag { position: absolute; right: 6px; top: -8px; padding: 2px 6px; font: 400 10px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.1em; color: #2a1a08; background: var(--gold-hi); }
.tree-tag.off { background: #6f675a; }
.prows { position: relative; padding: 8px 0 2px; }
/* The spine: lit up to the last open tier. */
.prows::before, .prows::after { content: ''; position: absolute; left: calc(50% + 21px - 6px); top: 52px; width: 12px; background: url('/activity/assets/kit/d/tree/branch-vertical-off.png') center top / 12px 64px repeat-y; image-rendering: pixelated; }
.prows::before { bottom: 46px; }
.prows::after { height: calc((var(--lit, 1) - 1) * 94px); background-image: url('/activity/assets/kit/d/tree/branch-vertical-on.png'); }
.prow { position: relative; display: grid; grid-template-columns: 42px 1fr; align-items: center; height: 88px; }
.prow + .prow { margin-top: 6px; }
.prow .pnodes { position: relative; display: flex; justify-content: space-around; align-items: center; }
/* Each tier's branch across its three nodes. */
.prow .pnodes::before { content: ''; position: absolute; left: 16%; right: 16%; top: 50%; height: 12px; transform: translateY(-50%); background: url('/activity/assets/kit/d/tree/branch-horizontal-off.png') left center / 64px 12px repeat-x; image-rendering: pixelated; }
.prow.open .pnodes::before { background-image: url('/activity/assets/kit/d/tree/branch-horizontal-on.png'); }
/* A tier's gate: a small diamond with the points it asks for, gold once open. */
.gate { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; font: 400 12px/1 var(--f-title); color: var(--parch-faint); }
.gate::before { content: ''; position: absolute; inset: 6px; z-index: -1; transform: rotate(45deg); background: #0b0908; box-shadow: 0 0 0 1px #000, 0 0 0 2px #3a2f22; }
.prow.open .gate { color: #2a1a08; }
.prow.open .gate::before { background: var(--gold); box-shadow: 0 0 0 1px #000, 0 0 8px rgba(244, 200, 120, 0.45); }
.pnode { position: relative; z-index: 1; width: 88px; height: 88px; padding: 0; border: 12px solid transparent; border-image: url('/activity/assets/kit/d/slots/slotb2.png') 6 / 12px stretch; background: #070605; background-clip: padding-box; image-rendering: pixelated; }
.pnode img { display: block; width: 64px; height: 64px; image-rendering: pixelated; filter: grayscale(0.9) brightness(0.45); }
.pnode.open img, .pnode.can img { filter: grayscale(0.35) brightness(0.75); }
.pnode.some img, .pnode.maxed img { filter: none; }
.pnode.some, .pnode.maxed { border-image-source: url('/activity/assets/kit/d/slots/slota2.png'); }
.pnode.maxed { filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.45)); }
.pnode.can::after { content: ''; position: absolute; inset: -12px; border: 1px solid rgba(255, 210, 120, 0.65); animation: pulse-gold 2s infinite; pointer-events: none; }
.pnode.mastery { border-image-source: url('/activity/assets/kit/d/slots/slotd2.png'); }
.pnode.mastery.some, .pnode.mastery.maxed { border-image-source: url('/activity/assets/kit/d/slots/slotd3.png'); }
.pnode:hover img { filter: none; }
.prank { position: absolute; right: -12px; bottom: -12px; padding: 2px 4px; font: 400 11px/1 var(--f-title); color: #fff; background: #0b0908; box-shadow: 0 0 0 1px #6b5430; }
.pnode.maxed .prank { color: #2a1a08; background: var(--gold-hi); }
.pnode.bonus { outline: 2px solid #b59be8; outline-offset: -4px; box-shadow: 0 0 9px #a78ad52e; }
.pnode.bonus img { filter: none; }
.pnode.bonus .prank { color: #eee4ff; background: #241b34; box-shadow: 0 0 0 1px #b59be8; }
.pbonus { position: absolute; z-index: 2; top: -12px; left: -12px; min-width: 25px; padding: 3px 5px; box-sizing: border-box; color: #f3ebff; background: #38264f; border: 1px solid #b59be8; box-shadow: 0 1px 3px #000b; font: 600 12px/1 var(--f-ui); text-align: center; pointer-events: none; }
.pnode.covenant-granted { outline-style: dashed; }
.passive-bonus-key { display: inline-flex; align-items: center; gap: 7px; color: #d3bfee; font: 12px/1.2 var(--f-ui); }
.passive-bonus-key i { padding: 2px 4px; border: 1px solid #b59be8; background: #38264f; color: #f3ebff; font-style: normal; }
.tip-covenant { margin: 7px 0; padding: 6px 8px; border-left: 2px solid #b59be8; background: #b59be810; color: #d3bfee; font: 12px/1.4 var(--f-ui); }
.tip-covenant b, .tip-covenant span { display: block; }
.tip-covenant b { color: #eee4ff; font-weight: 600; }
.passives .wnd-foot { justify-content: space-between; }

/* ---- the waystone ----------------------------------------------------------------------------------------------------------------- */
/* The waystone: the world map (web/worldmap, in its game mode) fills the window. */
#centre > .wnd.waypoint { width: min(1500px, calc(94vw / var(--ui-scale, 1))); padding-bottom: 14px; }
.wm-frame { display: block; width: 100%; height: min(820px, calc(100vh / var(--ui-scale, 1) - 300px)); margin-top: 4px; border: 0; background: #070304; box-shadow: inset 0 0 0 1px #3a1a12, 0 0 0 1px #000; }

/* ---- the game menu ---------------------------------------------------------------------------------------------------------------- */
#centre > .wnd.game-menu { width: 460px; }
.menu-col { display: grid; gap: 8px; padding: 10px 20px 6px; }
.menu-plaque { height: calc(18px * var(--px)); border: calc(6px * var(--px)) solid transparent; border-top-width: 0; border-bottom-width: 0; border-image: url('/activity/assets/kit/d/titles/title-b.png') 0 6 fill / 0 calc(6px * var(--px)) stretch; background: none; font: 400 16px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.12em; color: var(--parch); image-rendering: pixelated; }
.menu-plaque:hover { color: var(--gold-hi); border-image-source: url('/activity/assets/kit/d/titles/title-c.png'); }
.menu-options { margin-top: 10px; padding: 10px 14px; border-top: 1px solid #2c241a; }
.menu-options label { display: flex; align-items: center; gap: 10px; font: 14px var(--f-ui); color: var(--parch-dim); }
.menu-options input { flex: 1; accent-color: #c79b52; }
.menu-options b { width: 44px; text-align: right; color: var(--gold-hi); font-weight: 400; }
.menu-score { color: var(--parch-dim); font-size: 12px; margin: 14px 0 8px; }
.menu-credits { font-size: 12px; color: var(--parch-dim); max-height: 200px; overflow: auto; }
.menu-credits summary { cursor: pointer; color: var(--gold); }
.menu-credits a { color: var(--gold-hi); }

/* ---- the roster ---------------------------------------------------------------------------------------------------------------------- */
#centre > .wnd.roster-wnd { width: min(1180px, 94vw); }
.roster { display: grid; grid-template-columns: 380px 1fr; gap: 24px; }
.hero-row { width: 100%; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #2c241a; background: linear-gradient(180deg, #17130f, #0d0b09); text-align: left; }
.hero-row + .hero-row { margin-top: 4px; }
.hero-row img { width: 52px; height: 52px; image-rendering: pixelated; box-shadow: 0 0 0 1px #000, 0 0 0 2px #4a3b28; }
.hero-row b { display: block; font: 400 17px/1.1 var(--f-title); letter-spacing: 0.05em; color: #fff; }
.hero-row small { display: block; margin-top: 4px; font: 400 13px/1 var(--f-ui); font-variant: small-caps; color: var(--parch-dim); }
.hero-row em { font: 400 12px/1 var(--f-ui); font-style: normal; font-variant: small-caps; letter-spacing: 0.1em; color: var(--gold); }
.hero-row em.go { color: var(--parch-faint); }
.hero-row:hover { border-color: #6b5430; }
.hero-row.active { border-color: var(--gold); box-shadow: inset 0 0 18px rgba(244, 210, 140, 0.1); }
.roster-gold { margin-top: 10px; text-align: center; font: italic 13px/1 var(--f-ui); color: var(--parch-faint); }
.class-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.class-card { display: grid; justify-items: center; gap: 5px; padding: 8px 2px 6px; border: 1px solid #2c241a; background: #0d0b09; }
.class-card img { width: 52px; height: 52px; image-rendering: pixelated; filter: grayscale(0.6) brightness(0.7); }
.class-card b { font: 400 12px/1.1 var(--f-ui); font-variant: small-caps; color: var(--parch-dim); text-align: center; }
.class-card:hover img, .class-card.on img { filter: none; }
.class-card.on { border-color: var(--gold); box-shadow: inset 0 0 16px rgba(244, 210, 140, 0.12); }
.class-card.on b { color: var(--gold-hi); }
.class-detail { margin-top: 12px; }
.class-detail p { margin: 0 0 8px; font: 14.5px/1.5 var(--f-ui); color: var(--parch); }
.class-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font: 13px/1.3 var(--f-ui); color: var(--parch-dim); }
.class-meta b { color: #8eb0ff; font-weight: 400; }
.class-trees { display: grid; gap: 6px; margin-top: 10px; }
.class-trees > div { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
.class-trees img { width: 36px; height: 36px; image-rendering: pixelated; box-shadow: 0 0 0 1px #000, 0 0 0 2px #4a3b28; }
.class-trees b { display: block; font: 400 14px/1.1 var(--f-ui); font-variant: small-caps; color: var(--gold-hi); }
.class-trees small { display: block; font: italic 12px/1.3 var(--f-ui); color: var(--parch-faint); }
.create-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.name-input { flex: 1; height: 40px; padding: 0 12px; background: #0a0807; border: 1px solid #4a3b28; box-shadow: inset 0 0 0 1px #000; outline: none; }
.name-input:focus { border-color: var(--gold); }

/* ---- side windows fill their height: the lists grow, the foot docks at the bottom ---------------------------------------- */
.side > .wnd > .wnd-foot { margin-top: auto; }
.wnd.inv .bag { flex: none; max-height: none; min-height: 0; overflow: hidden; }
.wnd.stash .stash-bag { flex: 1 1 auto; max-height: none; min-height: 0; overflow: hidden; }
.bag-pages { display: flex; flex: none; align-items: center; justify-content: center; gap: 12px; padding: 6px 0 0; color: var(--gold); font: 12px var(--f-title); }
.bag-pages small { color: var(--parch-faint); margin-left: 8px; font: italic 11px var(--f-ui); }
.page-arrow { width: 28px; height: 24px; padding: 0; font: 22px/1 var(--f-ui); color: var(--gold-hi); background: url('/activity/assets/kit/d/slots/slotc2.png') center / 100% 100% no-repeat; border: 0; cursor: pointer; image-rendering: pixelated; }
.page-arrow:disabled { opacity: .2; cursor: default; }
.page-arrow:hover:not(:disabled) { filter: brightness(1.3); }
.wnd.skills .skill-page { flex: 1 1 auto; max-height: none; min-height: 140px; }
.wnd.quests .quest-list { flex: 0 1 auto; }
.wnd.quests .quest-detail { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }

/* ---- effects (app/fx.js): flashes, floating numbers, sparks, flying items, banners ---------------------------------------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 1100; overflow: hidden; }
.fx-flash { animation: fx-flash 0.65s ease-out; }
@keyframes fx-flash { 0% { filter: brightness(2.2) drop-shadow(0 0 10px rgba(255, 220, 140, 0.95)); } 100% { filter: none; } }
.fx-pop { animation: fx-pop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes fx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.fx-fade-out { animation: fx-fade-out 0.3s ease-in forwards; }
@keyframes fx-fade-out { to { opacity: 0; transform: scale(0.6); filter: brightness(2) saturate(0); } }
.fx-float { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 400 18px/1 'Palatino Linotype', Georgia, serif; font-variant: small-caps; letter-spacing: 0.04em; color: #f4dc9a; text-shadow: 0 2px 0 #000, 0 0 8px #000, 0 0 14px rgba(255, 190, 90, 0.45); animation: fx-float 1.2s ease-out forwards; }
.fx-float.loss { color: #ff8a70; text-shadow: 0 2px 0 #000, 0 0 8px #000; }
.fx-float.good { color: #9ee08a; }
.fx-float.stat { color: #9fb8ff; }
@keyframes fx-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -220%) scale(1); } }
.fx-burst { position: absolute; width: 0; height: 0; }
.fx-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; transform: rotate(45deg); background: #ffe9a8; box-shadow: 0 0 6px #ffcf6b, 0 0 12px rgba(255, 180, 60, 0.7); animation: fx-spark 0.75s ease-out forwards; }
.fx-burst.blue i { background: #cfe2ff; box-shadow: 0 0 6px #8eb0ff, 0 0 12px rgba(110, 150, 255, 0.7); }
.fx-burst.red i { background: #ffd0a0; box-shadow: 0 0 6px #ff7a3a, 0 0 14px rgba(255, 90, 30, 0.8); }
@keyframes fx-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(45deg) scale(1.2); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(45deg) scale(0.3); } }
.fx-fly { position: absolute; transform: translate(-50%, -50%); transition: transform 0.5s cubic-bezier(0.5, -0.2, 0.6, 1), opacity 0.5s ease-in; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8)); }
.fx-fly .icon { position: static; transform: none; }
.fx-banner { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); text-align: center; animation: fx-banner-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1), fx-banner-out 0.6s ease-in 2.4s forwards; }
.fx-banner-title { font: 400 46px/1 'FantasyPixel', Georgia, serif; letter-spacing: 0.12em; text-transform: uppercase; color: #f4dc9a; text-shadow: 0 3px 0 #000, 0 0 24px rgba(255, 190, 90, 0.6), 0 0 60px rgba(255, 150, 40, 0.35); }
.fx-banner-sub { margin-top: 8px; font: italic 18px/1.3 'Palatino Linotype', Georgia, serif; color: #e6dac0; text-shadow: 0 2px 0 #000, 0 0 10px #000; }
.fx-banner::before { content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 90px; transform: translate(-50%, -60%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65), transparent 70%); z-index: -1; }
.fx-banner.bad .fx-banner-title { color: #e0705a; text-shadow: 0 3px 0 #000, 0 0 24px rgba(200, 50, 30, 0.6); }
@keyframes fx-banner-in { 0% { opacity: 0; transform: translateX(-50%) scale(1.4); filter: blur(4px); } 100% { opacity: 1; transform: translateX(-50%) scale(1); filter: none; } }
@keyframes fx-banner-out { to { opacity: 0; transform: translateX(-50%) translateY(-18px); } }
/* A window that closes fades and sinks a little instead of vanishing. */
.side.closing, .centre-ghost { pointer-events: none !important; animation: fx-close 0.16s ease-in forwards; }
.centre-ghost { position: absolute; inset: 0; display: grid; place-items: center; }
.centre-ghost > .wnd { display: flex; flex-direction: column; }
@keyframes fx-close { to { opacity: 0; transform: translateY(8px) scale(0.985); } }
/* Newly gained: a sheen passes over the item now and then until the player looks at it. */
.bag-cell.new::after { content: ''; position: absolute; inset: calc(-5px * var(--px)); pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 238, 190, 0.38) 48%, transparent 62%) no-repeat; background-size: 260% 100%; animation: fx-sheen 2.6s ease-in-out infinite; }
.bag-cell.new::before { background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 72%); }
@keyframes fx-sheen { 0% { background-position: 160% 0; } 55%, 100% { background-position: -110% 0; } }
.menu-options label + label { margin-top: 10px; }

/* The resistances: five tiles in a row, the element's colour on its value, a gold edge when at its cap. */
.res-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.res-tile { display: grid; justify-items: center; gap: 3px; padding: 5px 2px 6px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)); border: 1px solid #2c241a; box-shadow: inset 0 0 0 1px #000; }
.res-tile span { font: 400 11px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.04em; color: var(--parch-dim); }
.res-tile b { font: 400 16px/1 var(--f-ui); color: #fff; }
.res-tile.fire b { color: #ff7a52; } .res-tile.cold b { color: #6fb6ff; } .res-tile.light b { color: #ffe06b; } .res-tile.entropy b { color: #b57bff; } .res-tile.phys b { color: #e8dcc4; }
.res-tile.capped { border-color: #8a6838; box-shadow: inset 0 0 0 1px #000, inset 0 0 10px rgba(244, 200, 120, 0.15); }
/* A short screen scrolls the sheet rather than cutting it. */
.wnd.char .sheet-cols { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; }

/* Back to the person a window was opened from: a small plaque at the window's top-left corner. */
.wnd-back { position: absolute; top: -8px; left: -6px; z-index: 3; height: 26px; padding: 0 12px 0 8px; border: 1px solid #5a4529; background: linear-gradient(180deg, #2a2114, #120e0a); box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6); font: 400 13px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.06em; color: var(--parch-dim); white-space: nowrap; max-width: 220px; overflow: hidden; }
.wnd-back:hover { color: var(--gold-hi); border-color: var(--gold); }

/* Small tactile touches: tooltips arrive with a quick fade, buttons and slots give under the click. */
.tip:not([hidden]), .tip-pair:not([hidden]), .tip-stack:not([hidden]) { animation: tip-in 0.09s ease-out; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } }
.btn:active:not(:disabled) { transform: translateY(1px); }
.slot:active, .snode:active, .pnode:active, .lslot:active, .ibtn:active, .talk-opt:active, .menu-plaque:active { transform: translateY(1px); }

/* The first visit's card: above the HUD, the controls in plain words. */
.coach { position: absolute; left: 50%; bottom: 200px; transform: translateX(-50%); width: 700px; padding: 14px 20px 14px; animation: coach-in 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); z-index: 5; }
.coach-title { margin-bottom: 8px; text-align: center; font: 400 20px/1.1 var(--f-title); letter-spacing: 0.06em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.coach-row { display: grid; grid-template-columns: 196px 1fr; align-items: center; gap: 12px; padding: 4px 0; font: 14.5px/1.35 var(--f-ui); color: var(--parch); }
.coach-row > kbd, .coach-keys { justify-self: end; }
.coach-row b { color: #ffcf3a; font-weight: 700; }
.coach kbd, .opt-key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin: 0 1px; font: 400 12px/1 var(--f-title); color: #2a1a08; background: linear-gradient(180deg, #f3d48e, #b98d45); border: 1px solid #3a2814; box-shadow: inset 0 1px #fff4cf, 0 1px 0 #000; }
.coach-foot { display: flex; justify-content: center; margin-top: 10px; }
.coach-out { animation: coach-out 0.22s ease-in forwards; }
@keyframes coach-in { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.97); } }
@keyframes coach-out { to { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.talk-opt .opt-key { margin-left: auto; opacity: 0.55; transform: scale(0.85); }
.talk-opt:hover .opt-key { opacity: 1; }

/* ---- the main menu: the select screen over Gloamwood's grave ------------------------------------------------------------------------ */
/* No dim: the world behind is the menu (the grave at golden hour); the windows stand at its sides. */
body.at-title #centre { background: radial-gradient(ellipse at 50% 55%, transparent 40%, rgba(4, 2, 6, 0.38)); display: block; }
body.at-title #hud, body.at-title #world-actions { display: none !important; }
.title-screen { position: absolute; inset: 0; pointer-events: none; }
.title-screen > * { pointer-events: auto; }
.title-logo { position: absolute; left: 50%; top: 3.2vh; transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 3px 0 #000, 0 0 26px rgba(0, 0, 0, 0.9); }
.title-logo b { display: block; font: 400 64px/1 var(--f-title); letter-spacing: 0.22em; color: #f4dc9a; }
.title-logo span { display: block; margin-top: 8px; font: 400 15px/1 var(--f-ui); letter-spacing: 0.34em; text-transform: uppercase; color: #c9a86a; }
@keyframes title-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.title-screen > .wnd { position: absolute; top: 17vh; }
.title-screen > .wnd .wnd-close { display: none; }
.title-heroes { left: 2.6vw; width: 360px; }
.title-new { right: 2.6vw; width: 470px; }
/* Its entrance (the first draw only: a class picked or a hero chosen redraws it without one): the name, then the windows. */
.title-screen.enter .title-logo { animation: title-in 1.8s ease-out both; }
.title-screen.enter > .wnd { animation: title-wnd 1s ease-out 0.55s both; }
.title-screen.enter > .title-new { animation-delay: 0.72s; }
/* Held unseen while the grave is painted under the dark; the entrance plays once the dark is mostly gone. */
body.title-hold .title-screen > * { animation-play-state: paused !important; pointer-events: none; }
@keyframes title-wnd { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.title-list { display: flex; flex-direction: column; gap: 4px; max-height: calc(44vh / var(--ui-scale, 1)); overflow: auto; scrollbar-gutter: stable; }
.title-list .hero-row { grid-template-columns: 52px 1fr; }
.title-enter { display: block; width: 100%; margin-top: 12px; }
.title-new .class-grid { grid-template-columns: repeat(4, 1fr); }
.title-new .class-detail p { font-size: 13px; line-height: 1.35; margin: 6px 0; }
.title-skip { display: flex; gap: 8px; align-items: center; margin-top: 8px; font: 400 13px/1.3 var(--f-ui); color: var(--parch-dim); cursor: pointer; }
/* The opening's cutscenes: our bar steps aside while the world is a film. */
body.cine #hud { opacity: 0; pointer-events: none; transition: opacity 0.8s; }
#hud { transition: opacity 0.8s; }
/* A lesson in the world points at the bar: a warm glow that breathes twice. */
.lesson-pulse { animation: lesson-pulse 1.3s ease-in-out 2; }
@keyframes lesson-pulse { 50% { filter: drop-shadow(0 0 10px rgba(255, 210, 120, 0.95)) brightness(1.25); } }
/* The shell's curtain: black over a world changing pages, a title on it. */
#curtain { position: fixed; inset: 0; z-index: 2000; background: #040205; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; display: grid; place-content: center; text-align: center; text-shadow: 0 3px 0 #000; }
#curtain.on { opacity: 1; pointer-events: auto; }
#curtain.load-error { padding: 24px; gap: 20px; }
#curtain.load-error b { font-size: 30px; letter-spacing: .06em; }
#curtain.load-error span { max-width: 640px; line-height: 1.5; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
#curtain [data-retry-world] { justify-self: center; margin-top: 24px; }
#curtain.slow { transition: opacity 1.9s cubic-bezier(0.45, 0, 0.25, 1); }
/* Loading under it: a quiet line under a thin bar of lamplight. It goes first when the world is ready. */
#curtain .curtain-load { display: none; }
#curtain.loading .curtain-load { display: block; width: min(300px, 62vw); transition: opacity 0.4s ease; }
#curtain.loading.ready .curtain-load { opacity: 0; }
.curtain-bar { height: 2px; background: rgba(201, 168, 106, 0.14); }
.curtain-bar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgba(201, 168, 106, 0.4), #f3d79a); box-shadow: 0 0 10px rgba(255, 200, 120, 0.55); transition: transform 0.18s ease-out; }
.curtain-load small { display: block; margin-top: 16px; font: italic 400 16px/1 var(--f-ui); letter-spacing: 0.06em; color: #b49663; animation: curtain-breathe 2.6s ease-in-out infinite; }
@keyframes curtain-breathe { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { #curtain, #curtain.slow, .curtain-bar i { transition: none; } .curtain-load small { animation: none; } }
#curtain b { display: block; font: 400 52px/1 var(--f-title); letter-spacing: 0.16em; color: #f3e2b8; }
#curtain span { display: block; margin-top: 12px; font: 400 16px/1 var(--f-ui); letter-spacing: 0.24em; text-transform: uppercase; color: #c9a86a; }
.title-who { margin-top: 12px; text-align: center; }
.title-who b { display: block; font: 400 18px/1.15 var(--f-title); letter-spacing: 0.05em; color: #fff; overflow-wrap: anywhere; }
.title-who small { display: block; margin-top: 3px; font: 400 13px/1 var(--f-ui); font-variant: small-caps; color: var(--parch-dim); }
.hero-row > span { min-width: 0; }
.hero-row b { overflow-wrap: anywhere; }
.title-list .hero-row { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 6px 10px; }
.title-list .hero-row img { width: 44px; height: 44px; }
.title-list .hero-row b { font-size: 16px; line-height: 1.2; }
.title-list .hero-row small { font-size: 12px; line-height: 1.25; }
.title-list .hero-row + .hero-row { margin-top: 0; }
.roster-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #30271c; }
.roster-account .roster-gold { margin: 0; text-align: left; font-size: 12px; }
.hero-remove { flex: 0 0 auto; padding: 5px 0; border: 0; background: none; font: 400 12px/1.2 var(--f-ui); color: #aa8b7d; text-underline-offset: 3px; }
.hero-remove:hover { color: #e49982; text-decoration: underline; }
.hero-remove:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* The chosen rune's card under the skill (Void Hunter runes): its name, then its lines in the modifier blue. */
.skill-detail .rune-card { margin: 6px 0 2px; padding: 6px 10px; border: 1px solid rgba(200, 170, 110, 0.3); background: rgba(10, 8, 6, 0.45); text-align: center; }
.skill-detail .rune-card > b { display: block; font-weight: 400; color: #e6b85c; letter-spacing: 0.03em; margin-bottom: 2px; }
.rune-line { padding: 0 6px; line-height: 1.25; }
.rune-line b.aug { font-weight: 400; color: #f2f5ff; }

/* Bram Kettle's kennel (screens/kennel.js): his dogs in a three-by-two pen of cards, each standing in its own. */
#centre > .wnd.kennel { width: min(860px, 94vw); }
.kennel .wnd-body { overflow-x: hidden; }
.kennel .lede { margin: 4px 0 8px; }
.kennel .wnd-foot .inv-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.kennel-rule { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 7px 14px; font: 13px/1.35 var(--f-ui); color: var(--parch-dim); }
.kennel-rule b { color: var(--gold-hi); font-weight: 400; }
.kennel-dogs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kennel-dog { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px 8px; text-align: center; }
.kennel-dog.on { box-shadow: inset 0 0 0 1px #b8913f, inset 0 0 18px #c8a04a33; }
.kennel-art { width: 118px; height: 108px; margin: -6px 0 -12px; image-rendering: pixelated; }
/* (A patch of lamplit yard under each dog: the dark coats, Kip's saddle and Soot, read against it.) */
.kennel-dog { background-image: radial-gradient(ellipse 46% 30% at 50% 34%, #6b5236 0%, #3b2c1d 55%, transparent 100%); background-repeat: no-repeat; }
.kennel-name { color: var(--gold-hi); font: 20px/1.1 var(--f-title); font-weight: 400; }
.kennel-coat { color: var(--parch-faint); font: 12px/1.3 var(--f-ui); }
.kennel-status { margin: 2px 0 4px; color: var(--parch-dim); font: 13px/1.2 var(--f-ui); }
.kennel-status.on { color: #98b77a; }
.kennel-status.price { color: var(--gold-hi); }
.kennel-dog .btn { align-self: stretch; min-height: 32px; white-space: nowrap; }
@media (max-width: 620px) {
  .kennel-dogs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennel-rule { flex-direction: column; gap: 4px; }
  .kennel-art { width: 98px; height: 90px; }
}

/* The red gate's ranked trial and its server-driven timer. */
#centre > .wnd.crucible { width: min(760px, 92vw); }
.crucible .wnd-body { overflow-x: hidden; }
.crucible .wnd-foot { flex-shrink: 0; }
.crucible .wnd-foot .crucible-actions { width: 100%; margin-top: 0; }
.crucible .lede { margin: 6px 0 18px; }
.crucible-progress { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 12px 16px; background: #1d100d; border: 1px solid #513026; }
.crucible-progress span, .crucible-details span { color: var(--parch-faint); font: 13px/1.4 var(--f-ui); }
.crucible-progress b, .crucible-details b { display: block; margin-top: 3px; color: var(--gold-hi); font-weight: 400; font-size: 18px; }
.crucible-rank { padding: 18px; text-align: center; }
.crucible-rank label { color: var(--parch-dim); font-variant: small-caps; letter-spacing: .08em; }
.crucible-stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0; }
.crucible-stepper .btn { min-width: 48px; height: 48px; font-size: 25px; }
.crucible-stepper input { width: 110px; padding: 4px; border: 0; border-bottom: 1px solid #814638; background: transparent; color: #ffdec0; text-align: center; font: 40px/1 var(--f-title); }
.crucible-range { width: 100%; accent-color: #b25037; }
.crucible-milestones { display: flex; justify-content: space-between; gap: 3px; margin-top: 8px; }
.crucible-milestones button { padding: 3px 5px; border: 1px solid transparent; background: none; color: var(--parch-dim); font: 13px var(--f-ui); cursor: pointer; }
.crucible-milestones button.locked { color: #98776c; }
.crucible-milestones button.sel { border-color: #9e573c; color: #ffdec0; background: #3d1a14; }
.crucible-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 0; text-align: center; }
.crucible-blocker { margin: 12px 0; padding: 10px 12px; border: 1px solid #65372d; background: #2a1210; text-align: center; }
.crucible-gear { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.crucible-gear > div { padding: 10px 4px; }
.crucible-gear b, .crucible-gear small { display: block; color: var(--parch-dim); font: 13px/1.4 var(--f-ui); }
.crucible-gear strong { display: block; margin: 4px 0; color: var(--gold-hi); font: 26px/1.2 var(--f-title); }
.crucible-gear .locked strong { color: var(--parch-faint); font-size: 20px; }
.crucible-gear small { font-size: 11px; }
.crucible-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
.crucible-actions .hint { width: 100%; text-align: center; }
.crucible-recent { margin: 8px 0 0; padding: 0; list-style: none; }
.crucible-recent li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid #32251c; font-size: 12px; }
.crucible-recent b { font-weight: 400; }
#ui > .crucible-clock { position: absolute; z-index: 25; top: 22px; left: 50%; transform: translateX(-50%); min-width: 220px; padding: 8px 22px; border: 1px solid #95513d; background: linear-gradient(#281411ed, #110a08ed); box-shadow: 0 4px 20px #0008; text-align: center; pointer-events: none; }
.crucible-clock span, .crucible-clock small { display: block; color: var(--parch-dim); font: 12px/1.4 var(--f-ui); }
.crucible-clock b { display: block; color: #ffe3c4; font: 30px/1.2 var(--f-title); font-variant-numeric: tabular-nums; }
.crucible-clock.urgent b { color: #ff937c; }
.crucible-result { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; background: #05040370; }
.crucible-result .wnd { width: min(600px, 90vw); max-height: 80vh; }
.crucible-result .crucible-details { grid-template-columns: repeat(2, 1fr); }
.run-hold { position: absolute; inset: 0; z-index: 45; display: flex; justify-content: center; align-items: flex-start; padding-top: 10vh; cursor: pointer; }
.run-hold .wnd { width: min(380px, 86vw); text-align: center; pointer-events: none; }
.run-hold .lede { margin: 14px 0 6px; }
.crucible-result-rank { margin: 20px 0 12px; color: #ffdec0; text-align: center; font: 34px/1 var(--f-title); }
@media (max-width: 620px) {
  .crucible-details { grid-template-columns: repeat(2, 1fr); }
  .crucible-recent li { flex-direction: column; gap: 3px; }
  #ui > .crucible-clock { top: 8px; padding: 5px 15px; }
}

/* ---- loot filter -------------------------------------------------------------------------------------------------------------- */
/* Left: the rules (top to bottom), "everything else", the Legendary keep. Middle: the chosen rule. Right: drops tried on it. */
#centre > .wnd.loot-filter { width: min(1320px, 95vw); height: min(800px, calc(100vh / var(--ui-scale, 1) - 250px)); max-height: none; }
/* The quest dock steps out of the way while it is open (it would sit over the window). */
body:has(#centre:not([hidden]) > .wnd.loot-filter) #hud-dock { opacity: 0; pointer-events: none; }
.lf { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.lf-rules, .lf-edit, .lf-grid { scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; }
.lf-top { display: flex; align-items: center; gap: 22px; padding: 0 4px; }
.lf-how { flex: 1; margin: 0; font: 14px/1.4 var(--f-ui); color: var(--parch-dim); }
.lf-how b { font-weight: 400; color: var(--gold-hi); }
.lf-preset { display: flex; align-items: center; gap: 8px; font: 13px var(--f-ui); color: var(--parch-dim); white-space: nowrap; }
.lf-main { min-height: 0; display: grid; grid-template-columns: minmax(390px, 1fr) minmax(0, 1.25fr) 306px; gap: 18px; }
.lf .rule { margin: 6px 0 7px; }
.lf-left { min-height: 0; display: flex; flex-direction: column; }
.lf-head { display: flex; align-items: center; gap: 12px; }
.lf-head .rule { flex: 1; }
.lf-head .btn { height: 36px; min-width: 0; padding: 0 6px; font-size: 14px; }
.lf-rules { flex: 1; min-height: 120px; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.lf-none { margin: 10px 8px; font: italic 13.5px/1.45 var(--f-ui); color: var(--parch-faint); text-align: center; }
.lf-none.big { margin: 60px 30px; font-size: 15px; }

.lf-row { display: grid; grid-template-columns: 14px 15px 74px minmax(0, 1fr) auto auto 20px; align-items: center; gap: 6px; min-height: 38px; padding: 4px 6px 4px 4px;
  border: 1px solid #2c241a; background: rgba(20, 16, 11, 0.8); cursor: pointer; }
.lf-row:hover { border-color: #5a4628; background: rgba(32, 25, 16, 0.85); }
.lf-row.sel { border-color: var(--gold); background: linear-gradient(90deg, rgba(210, 169, 93, 0.16), rgba(20, 16, 11, 0.85) 70%); box-shadow: 0 0 10px rgba(210, 169, 93, 0.18); }
.lf-row.off > .lf-act, .lf-row.off > .lf-say, .lf-row.off > .lf-count { opacity: 0.42; }
.lf-num { font: 11px/1 var(--f-title); color: var(--gold-lo); text-align: right; }
.lf-on { width: 15px; height: 15px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.lf-act { justify-self: stretch; padding: 4px 0 5px; text-align: center; font: 400 12.5px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.05em; border: 1px solid; }
.lf-act.show { color: #c9ecbb; border-color: #46703a; background: #142211; }
.lf-act.hide { color: #f0aaa0; border-color: #74332b; background: #260f0c; }
.lf-act.highlight { color: var(--hl); border-color: color-mix(in srgb, var(--hl) 60%, #000); background: color-mix(in srgb, var(--hl) 13%, #0b0908); box-shadow: 0 0 9px color-mix(in srgb, var(--hl) 30%, transparent); }
.lf-say { min-width: 0; font: 13.5px/1.3 var(--f-ui); color: var(--parch); overflow-wrap: anywhere; }
.lf-say i { color: var(--parch-faint); }
.lf-count { min-width: 24px; padding: 2px 5px; font: 12px/1.2 var(--f-ui); text-align: center; color: var(--gold-hi); border: 1px solid #4a3b28; background: #0d0b09; }
.lf-count.zero { color: var(--parch-faint); border-color: #2c241a; }
.lf-move { display: flex; flex-direction: column; gap: 1px; }
.lf .lf-move button, .lf .lf-x { width: 20px; height: 15px; padding: 0; border: 1px solid #3a2f22; background: #100d0a; font: 9px/1 var(--f-ui); color: var(--parch-dim); }
.lf .lf-move button:hover:not(:disabled), .lf .lf-x:hover { color: var(--gold-hi); border-color: #6b5430; }
.lf .lf-move button:disabled { opacity: 0.3; cursor: default; }
.lf .lf-x { height: 20px; font-size: 11px; }
.lf .lf-x:hover { color: #ff9a8c; border-color: #74332b; }

.lf-else { padding: 8px 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.lf-else > .lf-sub, .lf-else > .lf-keep { grid-column: 1 / -1; }
.lf-else-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; }
.lf-else-row > span { font: 14px var(--f-ui); color: var(--parch); white-space: nowrap; }
.lf-keep { display: flex; gap: 8px; align-items: flex-start; margin: 5px 0 2px; font: 14px/1.35 var(--f-ui); color: var(--parch); cursor: pointer; }
.lf-keep input { flex: none; margin: 3px 0 0; accent-color: var(--gold); }
.lf-keep b { font-weight: 400; color: var(--r-legendary); }
.lf-keep small { font-size: 12px; color: var(--parch-dim); }
.lf-sub { margin: 0; font: italic 12.5px/1.35 var(--f-ui); color: var(--parch-faint); }

/* A switch of two or three: Show / Highlight / Hide; the lit one in its own colour. */
.lf-seg { display: inline-flex; border: 1px solid #4a3b28; background: #0d0b09; box-shadow: inset 0 0 0 1px #000; }
.lf .lf-seg button { min-width: 64px; padding: 5px 14px 6px; border: 0; border-right: 1px solid #2c241a; background: none; font: 400 14px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.07em; color: var(--parch-dim); }
.lf .lf-seg button:last-child { border-right: 0; }
.lf .lf-seg button:hover:not(.on) { color: var(--parch); background: #1b160f; }
.lf .lf-seg button.on { color: #1c1206; background: linear-gradient(180deg, #f0d391, #c49546); text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45); }
.lf .lf-seg button.on[data-v="show"] { color: #0e1a0b; background: linear-gradient(180deg, #a9dc95, #5f9a4c); }
.lf .lf-seg button.on[data-v="hide"] { color: #fff1ee; background: linear-gradient(180deg, #c45d50, #84281f); text-shadow: 0 1px 0 #000; }
.lf .lf-else .lf-seg button { min-width: 0; padding: 4px 8px 5px; font-size: 13px; }

.lf-edit { min-height: 0; overflow-y: auto; padding: 2px 10px 10px 2px; }
.lf-edit-head { display: flex; flex-direction: column; gap: 5px; padding: 10px 14px 11px; margin: 4px 0; border: 1px solid #4a3b28;
  background: linear-gradient(180deg, rgba(210, 169, 93, 0.1), rgba(0, 0, 0, 0.3)); box-shadow: inset 0 0 0 1px #000; }
.lf-edit-head b { font: 400 15px/1 var(--f-title); letter-spacing: 0.08em; color: var(--gold-hi); }
.lf-sentence { font: 16px/1.4 var(--f-ui); color: var(--parch); }
.lf-sentence b.bad { font-weight: 400; }
.lf-field { padding: 10px 2px 11px; border-bottom: 1px solid rgba(138, 104, 56, 0.2); }
.lf-field:last-child { border-bottom: 0; }
.lf-label { margin-bottom: 8px; font: 400 15px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.1em; color: var(--gold); }
.lf-label small { margin-left: 10px; font: italic 12.5px var(--f-ui); font-variant: normal; letter-spacing: 0; color: var(--parch-dim); }
.lf-label small.any { color: var(--parch-faint); }
.lf-label .linkish { font-size: 12.5px; }
.lf-help { margin: 7px 0 0; font: italic 12.5px/1.4 var(--f-ui); color: var(--parch-faint); }
.lf-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.lf .lf-chip { --rc: var(--gold-hi); padding: 4px 10px 5px; border: 1px solid #3a2f22; background: #100d0a; font: 13.5px/1.15 var(--f-ui);
  color: color-mix(in srgb, var(--rc) 55%, #6f675a); }
.lf .lf-chip:hover { border-color: #6b5430; color: var(--rc); }
.lf .lf-chip.on { color: var(--rc); border-color: color-mix(in srgb, var(--rc) 75%, #000); background: color-mix(in srgb, var(--rc) 17%, #0c0a08);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 22%, transparent), 0 0 8px color-mix(in srgb, var(--rc) 22%, transparent); }
.lf .lf-chip small { font-size: 11.5px; color: var(--parch-faint); }
.lf .lf-chip.on small { color: var(--parch-dim); }
.lf .lf-chips.tiers .lf-chip { min-width: 40px; text-align: center; }
.lf .lf-chips.tiers .lf-chip[data-near] { box-shadow: inset 0 -2px 0 var(--gold-lo); }
.lf .lf-chips.tiers .lf-chip.on[data-near] { box-shadow: inset 0 -2px 0 var(--gold-hi), 0 0 8px color-mix(in srgb, var(--rc) 22%, transparent); }
.lf .lf-chip.affix { --rc: var(--magic); }
.lf .lf-chip.on::before { content: "✓"; margin-right: 5px; font-size: 12px; }
.lf .lf-chip.affix.on::before { content: none; }
.lf-chips select { max-width: 230px; }
.lf-group { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 6px; }
.lf-group > span { padding-top: 5px; font: 12.5px var(--f-ui); color: var(--parch-faint); text-align: right; }
.lf-more { margin-left: 4px; font-size: 12.5px; }
.lf-colours { display: flex; gap: 7px; align-items: center; margin-top: 10px; }
.lf-colour { width: 24px; height: 24px; padding: 0; border: 1px solid #000; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 8px color-mix(in srgb, var(--c) 35%, transparent); }
.lf-colour.on { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.lf-colours span { margin-left: 6px; font: 13.5px var(--f-ui); color: var(--parch-dim); }
.lf-affix-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; font: 14px var(--f-ui); color: var(--parch); }

.lf-test { min-height: 0; display: flex; flex-direction: column; }
.lf-test-what { margin: 0 0 4px; font: 13.5px/1.35 var(--f-ui); color: var(--parch-dim); }
.lf-tally { display: flex; gap: 6px; margin-bottom: 4px; }
.lf-tally span { flex: 1; padding: 4px 0 5px; text-align: center; font: 12px/1.1 var(--f-ui); color: var(--parch-dim); border: 1px solid #2c241a; background: #0d0b09; }
.lf-tally b { display: block; font: 400 17px/1.1 var(--f-ui); }
.lf-tally .shown b { color: var(--parch); }
.lf-tally .lit b { color: #9fdcff; }
.lf-tally .gone b { color: #e0958a; }
.lf-test-mine { margin: 2px 0 6px; min-height: 1.3em; font: italic 12.5px/1.3 var(--f-ui); color: var(--parch-faint); }
.lf-test-mine b { font-style: normal; font-weight: 400; color: var(--gold-hi); }
.lf-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 52px); grid-auto-rows: 52px; gap: 5px; align-content: start; justify-content: center; padding: 7px; overflow-y: auto; }
.lf-test > .btn { align-self: center; margin-top: 8px; height: 36px; min-width: 0; padding: 0 6px; font-size: 14px; }
.lf-drop { --rc: var(--r-common); position: relative; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #2a2219;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 70%), #0d0b09; }
.lf-drop > .icon { position: static; }
.lf-drop.gone > .icon { opacity: 0.25; filter: grayscale(1); }
.lf-drop.gone { background: #0b0908; border-color: #1f1913; }
.lf-drop.gone::after { content: ""; position: absolute; inset: 8px; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(214, 90, 74, 0.85) 50%, transparent calc(50% + 1px)); pointer-events: none; }
.lf-drop.lit { border-color: var(--hl); box-shadow: 0 0 0 1px var(--hl), 0 0 12px color-mix(in srgb, var(--hl) 55%, transparent); }
.lf-drop.mine { outline: 2px dashed var(--parch); outline-offset: 2px; }
.lf-drop .qty { position: absolute; right: 3px; bottom: 1px; font: normal 11px/1 var(--f-title); color: #fff; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
.lf-status { font: italic 13.5px/1.35 var(--f-ui); color: var(--parch-dim); }
.lf-status b { font-style: normal; font-weight: 400; }
@media (max-width: 1100px) {
  .lf-main { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .lf-grid { grid-template-columns: repeat(auto-fill, 52px); }
  .lf-left, .lf-edit { min-height: auto; overflow: visible; }
  .lf-top { flex-direction: column; align-items: stretch; gap: 8px; }
  .lf-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lf-group > span { text-align: left; padding-top: 0; }
}

/* ---- the stash's Legendary tab: one row per power, grouped by class (stash-legendary.js) ----------------------------------- */
.stash-tetris .tab-legendary b { color: var(--r-legendary); font-weight: 400; }
.lg-pane { display: flex; flex-direction: column; gap: 6px; height: 508px; min-height: 0; }
.lg-tools { display: flex; gap: 8px; align-items: center; }
.lg-who { display: flex; align-items: center; gap: 6px; font: 12px var(--f-ui); color: var(--parch-dim); flex: none; }
.lg-who select { font-size: 13px; height: 28px; max-width: 250px; }
.lg-search { flex: 1; min-width: 0; height: 28px; padding: 0 9px; font: 13px var(--f-ui); color: var(--parch); background: #0d0b09; border: 1px solid #4a3b28; box-shadow: inset 0 0 0 1px #000; }
.lg-search::placeholder { color: #75694f; }
.lg-search:focus, .lg-who select:focus { outline: 1px solid var(--gold-lo); }
.lg-cats { display: grid; grid-template-columns: .7fr repeat(4, 1fr); gap: 4px; }
.lg-cat { --cat: var(--gold); position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 4px; padding: 4px 7px 5px; text-align: left; background: #110d0a; border: 1px solid #3a2e20; color: var(--parch-dim); cursor: pointer; }
.lg-cat:hover { border-color: #6b5434; color: var(--parch); }
.lg-cat.on { border-color: var(--cat); background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 20%, #110d0a), #110d0a); color: var(--parch); box-shadow: inset 0 0 0 1px #000; }
.lg-cat b { font: 13px/1.1 var(--f-ui); font-weight: 400; color: var(--parch); display: flex; align-items: center; gap: 5px; }
.lg-cat b i { width: 8px; height: 8px; transform: rotate(45deg); background: var(--cat); box-shadow: 0 0 4px var(--cat); flex: none; }
.lg-cat small { grid-column: 1; font: 10.5px/1.15 var(--f-ui); color: #8d8169; }
.lg-cat em { grid-row: 1 / span 2; grid-column: 2; font: 15px var(--f-ui); font-style: normal; color: var(--gold-hi); }
.lg-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 4px 2px; background: #090705; border: 1px solid #2c2318; box-shadow: inset 0 0 12px #000; scrollbar-color: #5a4630 #0c0907; scrollbar-width: thin; }
.lg-list.item-drop-ready { outline: 1px solid #9d8052; outline-offset: -2px; }
.lg-list.item-drop-over { outline: 2px solid #e3c784; outline-offset: -2px; box-shadow: inset 0 0 20px #e8bc5640; }
.lg-group + .lg-group { margin-top: 4px; }
.lg-head { position: sticky; top: -2px; z-index: 1; display: flex; align-items: baseline; gap: 7px; width: 100%; padding: 6px 6px 5px; text-align: left; background: linear-gradient(180deg, #1b140d, #120d09); border-bottom: 1px solid #4a3a26; color: var(--gold-hi); cursor: pointer; }
.lg-head:hover .lg-class { color: #fff1c8; }
.lg-caret { width: 10px; color: var(--gold); font-size: 11px; }
.lg-class { font: 14px var(--f-ui); font-variant: small-caps; letter-spacing: .06em; }
.lg-count { margin-left: auto; font: 12px var(--f-ui); color: var(--parch-dim); }
.lg-rows { display: grid; gap: 4px; padding-top: 4px; }
.lg-row { --cat: var(--gold); display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 6px 7px 6px; text-align: left; background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 9%, #120e0a), #100c09 60%); border: 1px solid #2e241a; border-top: 2px solid var(--cat); color: var(--parch); cursor: pointer; }
.lg-row:hover { background: #1a140e; border-color: #5c4830; border-top-color: var(--cat); }
.lg-row.sel { background: #23190f; border-color: var(--gold); border-top-color: var(--cat); box-shadow: inset 0 0 10px #d2a95d33; }
.lg-card-top { display: flex; gap: 8px; align-items: center; }
.lg-art { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; background: radial-gradient(circle, color-mix(in srgb, var(--cat) 24%, transparent), transparent 70%), #0a0806; border: 1px solid #3a2d1f; }
.lg-art .icon { position: static; transform: none; }
.lg-n { position: absolute; right: -2px; bottom: -3px; padding: 0 3px; font: 12px/1.25 var(--f-ui); font-weight: 400; color: #fff; background: #000d; border: 1px solid #5a4630; }
.lg-id { display: grid; gap: 2px; min-width: 0; }
.lg-name { font: 14.5px/1.1 var(--f-ui); color: var(--r-legendary); }
.lg-fav { font-style: normal; color: var(--gold-hi); margin-right: 4px; font-size: 12px; }
.lg-where { font: 11px/1.15 var(--f-ui); opacity: .9; }
.lg-text { flex: 1; font: 12px/1.32 var(--f-ui); color: #b9c4dc; }
.lg-roll { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; padding-top: 4px; border-top: 1px solid #2a2017; font: 11px var(--f-ui); color: var(--parch-dim); }
.lg-roll b { color: var(--parch); font-weight: 400; }
.lg-bar { width: 44px; height: 5px; background: #2a2118; border: 1px solid #000; box-shadow: 0 0 0 1px #3a2d1f; position: relative; }
.lg-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, #8a6838, var(--gold-hi)); }
.lg-copies { color: #8d8169; }
.lg-empty { display: grid; gap: 6px; place-content: center; height: 100%; text-align: center; font: 14px var(--f-ui); color: var(--parch-dim); }
.lg-empty small { font-size: 12px; color: #8d8169; }
/* (The Legendary tab keeps the stash's one size: two cards a row, the list scrolling inside.) */
.stash-legendary .lg-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- the stash's one size, and its specialised tabs (stash.js) ------------------------------------------------------------- */
/* Every tab is the same box, so switching never moves the window; what is taller scrolls inside it. */
.stash-tetris .stash-pane { height: 512px; min-height: 0; display: flex; flex-direction: column; }
.wnd.stash-tetris .wnd-foot { height: 34px; min-height: 34px; flex-wrap: nowrap; align-items: center; }
.wnd.stash-tetris .wnd-foot .hint { flex: 1 1 auto; max-width: none; }
.stash-tetris .stash-pane > .lg-pane { height: 100%; }
.stash-tetris .stash-pane > .overflow-list { flex: 1; max-height: none; min-height: 0; }
.stash-tetris .stash-tabs .tab small { margin-left: 3px; font-size: 10.5px; color: var(--parch-faint); }
.stash-tetris .stash-tabs .tab.on small { color: var(--gold-hi); }
.stash-tetris .tab-legendary small { color: var(--r-legendary) !important; }
.stash-tetris .stash-tabs .tab-overflow { flex: 0 0 auto; padding: 0 8px; opacity: .72; }
.stash-tetris .stash-tabs .tab-overflow.on, .stash-tetris .stash-tabs .tab-overflow.waiting { opacity: 1; }
.stash-tetris .stash-tabs .tab-overflow.waiting small { color: #f0a060; }
.stash-tetris .stash-pane.item-drop-ready { outline: 1px solid #9d8052; outline-offset: 2px; }
.stash-tetris .stash-pane.item-drop-over { outline: 2px solid #e3c784; outline-offset: 2px; box-shadow: 0 0 18px #e8bc5630; }

/* A cell: a fixed place for one kind of thing, its art and how many (Path of Exile's currency and gem tabs). */
.sx-cell.slot { position: relative; width: 100%; aspect-ratio: 1; min-width: 0; margin: 0; padding: 0; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--rc) 40%, #1d160f); border-image: none;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%), #0d0b08;
  box-shadow: inset 0 0 0 1px #050403, inset 0 0 14px #000a; cursor: pointer; }
.sx-cell.slot::before { display: none; }
.sx-cell .icon { position: static; transform: none; max-width: 80% !important; max-height: 80% !important; object-fit: contain; }
.sx-cell .qty { position: absolute; right: 2px; bottom: 1px; left: auto; top: auto; font: 11px/1 var(--f-ui); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.sx-cell:hover { border-color: color-mix(in srgb, var(--rc) 70%, #6b5434); background-color: #17120c; }
.sx-cell.sel { border-color: var(--gold-hi); box-shadow: inset 0 0 0 1px #000, inset 0 0 12px #e8bc5640, 0 0 6px #d4a54655; }
.sx-cell.ghost { cursor: default; border-color: #241c13; background: #0b0907; box-shadow: inset 0 0 0 1px #040302; }
.sx-cell.ghost .icon { opacity: .2; filter: grayscale(1) brightness(.8); }
.sx-cell.ghost:hover { background: #0e0b08; border-color: #3a2d1f; }
.sx-cell.ghost:hover .icon { opacity: .38; }
.sx-cell.locked::after { content: '★'; position: absolute; left: 2px; top: 0; font: 10px/1 var(--f-ui); color: var(--gold-hi); text-shadow: 0 1px 0 #000; }
/* (Five of a kind: enough for the jeweler's table.) */
.sx-cell.ready { box-shadow: inset 0 0 0 1px #050403, inset 0 0 12px color-mix(in srgb, var(--gc, var(--gold)) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--gc, var(--gold)) 45%, transparent); }
.sx-ready-key { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border: 1px solid var(--gold); box-shadow: 0 0 5px var(--gold); vertical-align: -1px; }

/* Gems: a row per stone, a column per quality, lowest to finest. */
.sx-gems { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; overflow-y: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: #5a4630 #0c0907; }
.sx-matrix { display: grid; grid-template-columns: 74px repeat(var(--n), minmax(0, 1fr)); gap: 3px; padding: 6px; background: #090705; border: 1px solid #2c2318; box-shadow: inset 0 0 12px #000; }
.sx-corner { grid-column: 1; }
.sx-qh { display: grid; justify-items: center; font: 11px/1.1 var(--f-ui); font-variant: small-caps; letter-spacing: .03em; color: var(--parch-dim); padding-bottom: 2px; }
.sx-qh small { font-size: 9px; color: #6d624c; }
.sx-th { display: flex; align-items: center; gap: 6px; font: 13px/1 var(--f-ui); font-variant: small-caps; letter-spacing: .04em; color: var(--parch); }
.sx-th i { width: 9px; height: 9px; flex: none; transform: rotate(45deg); background: var(--gc); box-shadow: 0 0 5px var(--gc); }
.sx-note { margin: 0; padding: 0 4px; font: 12px/1.4 var(--f-ui); color: var(--parch-faint); }
.sx-note b { color: var(--parch-dim); font-weight: 400; }

/* Materials: a row per family (every Ash, every Ember...), then the relics. */
.sx-mats { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.sx-sec { flex: none; display: flex; flex-direction: column; gap: 3px; }
.sx-sec-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; font: 13px/1.2 var(--f-ui); font-variant: small-caps; letter-spacing: .05em; color: var(--gold-hi); }
.sx-sec-head small { margin-left: auto; font-size: 11px; font-variant: normal; letter-spacing: 0; color: var(--parch-faint); }
.sx-row { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; padding: 4px; background: #090705; border: 1px solid #2c2318; box-shadow: inset 0 0 10px #000; }
.sx-relics { flex: 1 1 auto; min-height: 0; }
.sx-relics .sx-row { flex: 1; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin; scrollbar-color: #5a4630 #0c0907; }
.sx-empty { grid-column: 1 / -1; align-self: center; padding: 14px 6px; text-align: center; font: 12.5px/1.4 var(--f-ui); color: var(--parch-faint); }

/* ---- the Obsidian Atlas: nine seats to drag relics onto (atlas.js) ------------------------------------------------------------ */
.wnd.atlas .atlas-power small { margin-left: 4px; font: 12px/1 var(--f-ui); letter-spacing: .04em; color: var(--parch-faint); font-variant: normal; }
.wnd.atlas .atlas-grid { grid-auto-rows: 100px; gap: 6px; padding: 6px; background: radial-gradient(ellipse at 50% 50%, #2a120a66, transparent 70%), #0a0807; border: 1px solid #2c2318; box-shadow: inset 0 0 22px #000; }
.wnd.atlas .atlas-seat { position: relative; height: 100%; min-height: 0; align-content: center; gap: 3px; padding: 8px 6px 6px; overflow: hidden; cursor: default; }
.wnd.atlas .atlas-seat.full { cursor: grab; }
.wnd.atlas .atlas-seat-n { position: absolute; left: 6px; top: 4px; font: 11px/1 var(--f-ui); color: #6d624c; }
.wnd.atlas .atlas-stone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%); }
.wnd.atlas .atlas-stone .icon { position: static; transform: none; }
.wnd.atlas .relic-art { display: block; image-rendering: pixelated; }
.wnd.atlas .relic-art.t-greater { filter: drop-shadow(0 0 3px #c7b6ff); }
.wnd.atlas .relic-art.t-exalted { filter: drop-shadow(0 0 4px #ff6a2a) drop-shadow(0 0 2px #ffd28a); }
.wnd.atlas .atlas-socket { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px dashed #4a3a26; background: radial-gradient(circle, #1b120c, #0a0706 70%); }
.wnd.atlas .atlas-socket i { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid #5a4630; }
.wnd.atlas .atlas-seat.item-drop-ready { box-shadow: 0 0 0 1px #000, 0 0 0 2px #9d8052, inset 0 0 18px #ff6a2a22; }
.wnd.atlas .atlas-seat.item-drop-ready .atlas-socket { border-color: #c79a55; }
.wnd.atlas .atlas-seat.item-drop-over { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffb070, inset 0 0 26px #ff6a2a55, 0 0 14px #ff7a3a66; filter: brightness(1.15); }
.wnd.atlas .atlas-seat.item-dragging { opacity: .45; }
.wnd.atlas .atlas-totals { max-height: none; }
.wnd.atlas .atlas-seat .atlas-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }

/* ---- the Obsidian Atlas as an altar: Power, the slab of seats, the live preview, the thresholds, the table (atlas.js) ---- */
.wnd.atlas-altar { gap: 0; }
.wnd.atlas-altar > * { flex: none; }
.alt-loadouts { margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid #3a2b1b; }
.alt-loadout-heading { display: flex; justify-content: space-between; align-items: center; min-height: 15px; margin-bottom: 4px; color: var(--parch-faint); font: 10px/1 var(--f-ui); font-variant: small-caps; letter-spacing: .05em; }
.alt-loadout-heading button { padding: 0; border: 0; background: none; color: var(--parch-dim); font: inherit; cursor: pointer; }
.alt-loadout-heading button:hover:not(:disabled), .alt-loadout-heading button:focus-visible { color: var(--gold-hi); }
.alt-loadout-heading button:disabled { opacity: .45; cursor: default; }
.alt-loadout-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.alt-loadout { display: grid; gap: 4px; min-width: 0; padding: 6px 8px; border: 1px solid #49351f; color: var(--parch-dim); background: linear-gradient(180deg, #21180f, #0b0806); box-shadow: inset 0 0 12px #0006; text-align: left; font: 12px/1.15 var(--f-ui); cursor: pointer; }
.alt-loadout:hover:not(:disabled), .alt-loadout:focus-visible { border-color: var(--gold); outline: none; background: linear-gradient(180deg, #312216, #130d08); }
.alt-loadout.active { border-color: #b78a43; color: var(--parch); background: radial-gradient(ellipse at 50% 0, #94602744, transparent 85%), #171008; box-shadow: inset 0 0 12px #b5781822, 0 0 5px #c08a3622; }
.alt-loadout:disabled { cursor: default; }
.alt-loadout-cards.busy .alt-loadout:not(.active) { opacity: .55; }
.alt-loadout-top { display: flex; justify-content: space-between; align-items: center; gap: 3px; }
.alt-loadout-top small { color: var(--parch-faint); font-size: 10px; }
.alt-loadout-top em { color: var(--parch-faint); font: normal 10px/1 var(--f-ui); font-variant: small-caps; letter-spacing: .06em; }
.alt-loadout.active .alt-loadout-top em { color: var(--gold-hi); }
.alt-loadout > b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/1.15 var(--f-ui); }
.alt-loadout-stats { white-space: nowrap; font-size: 10.5px; color: var(--parch-faint); }
.alt-loadout-stats i { color: #735637; font-style: normal; }
.alt-loadout-name { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.alt-loadout-name label { color: var(--parch-faint); font: 11px/1 var(--f-ui); }
.alt-loadout-name input { flex: 1; width: 0; min-width: 0; height: 25px; padding: 3px 7px; border: 1px solid #49351f; color: var(--parch); background: #090705; font: 12px/1 var(--f-ui); }
.alt-loadout-name input:focus-visible { outline: 1px solid var(--gold); }
.alt-loadout-name .btn { flex: none; height: 25px; min-width: 60px; padding: 0 3px; font-size: 11px; letter-spacing: 0; }
.alt-loadout-note { display: flex; align-items: center; gap: 6px; min-height: 14px; margin-top: 4px; color: var(--parch-faint); font: 10.5px/1.3 var(--f-ui); }
.alt-loadout-note.bad { color: #e0806a; }
.alt-loadout-note button { flex: none; padding: 2px 4px; border: 1px solid #735637; background: #171008; color: var(--gold-hi); font: inherit; cursor: pointer; }
.alt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 8px; }
.alt-power { display: flex; align-items: baseline; gap: 8px; cursor: help; }
.alt-power small { font: 400 13px/1 var(--f-ui); font-variant: small-caps; letter-spacing: .12em; color: var(--parch-dim); }
.alt-power b { font: 400 34px/1 var(--f-title); color: #ff8a5a; text-shadow: 0 0 16px rgba(255, 100, 40, .55), 0 2px 0 #000; }
.alt-stats { display: grid; justify-items: end; gap: 2px; font: 12px/1.2 var(--f-ui); color: var(--parch-faint); }
.alt-stats b { color: var(--parch); font-weight: 400; }
/* The slab: obsidian, faintly lit from inside. */
.alt-slab { padding: 8px; background: radial-gradient(ellipse at 50% 45%, #3a140a88, transparent 65%), linear-gradient(180deg, #120c0a, #070505); border: 1px solid #3a2318; box-shadow: inset 0 0 0 1px #000, inset 0 0 40px #000, 0 0 18px #ff5a1a14; }
.wnd.atlas-altar .atlas-grid { grid-auto-rows: 104px; gap: 7px; padding: 0; background: none; border: 0; box-shadow: none; }
.wnd.atlas-altar .atlas-seat { user-select: none; touch-action: none; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 20%, transparent), transparent 70%), #0b0807; }
/* The live preview: one fixed line, so nothing moves as it changes. */
.alt-preview { height: 38px; margin: 8px 0 6px; padding: 0 10px; display: flex; align-items: center; gap: 12px; background: #0d0907; border: 1px solid #2c2017; box-shadow: inset 0 0 12px #000; overflow: hidden; }
.atlas-altar.previewing .alt-preview { border-color: #8a4a22; box-shadow: inset 0 0 14px #ff6a2a22; }
.alt-hint { font: italic 12.5px/1.3 var(--f-ui); color: var(--parch-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt-move { flex: 1 1 auto; min-width: 0; font: 13px/1.2 var(--f-ui); color: var(--parch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt-delta { flex: none; display: flex; align-items: baseline; gap: 6px; font: 400 18px/1 var(--f-title); color: var(--parch-dim); }
.alt-delta i { font-style: normal; font-size: 14px; color: var(--parch-faint); }
.alt-delta em { font: 13px/1 var(--f-ui); font-style: normal; }
.alt-delta.up b:last-of-type, .alt-delta.up em { color: #ff9a5a; text-shadow: 0 0 10px rgba(255, 110, 40, .5); }
.alt-delta.down b:last-of-type, .alt-delta.down em { color: #8fb4e8; }
.alt-marks { flex: none; font: 12px/1 var(--f-ui); padding: 3px 6px; border: 1px solid #3a2a1c; }
.alt-marks.up { color: #ffcf7a; border-color: #8a6a2a; }
.alt-marks.down { color: #9aa4b8; }
/* The thresholds Power opens; a preview lights what it would open or close. */
.alt-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 8px; }
.alt-step { display: grid; gap: 1px; padding: 3px 5px; text-align: center; font: 11px/1.15 var(--f-ui); color: #6d624c; background: #0b0807; border: 1px solid #241a12; }
.alt-step b { font: 400 12px/1 var(--f-title); color: #6d624c; }
.alt-step.on { color: var(--parch-dim); border-color: #5a3a22; }
.alt-step.on b { color: #ff8a5a; }
.alt-step.gain { color: #ffe0a0; border-color: #e0883a; box-shadow: 0 0 8px #ff7a3a55; animation: alt-glow 1s ease-in-out infinite alternate; }
.alt-step.gain b { color: #ffd08a; }
.alt-step.lose { color: #9aa4b8; border-color: #4a5a78; text-decoration: line-through; }
@keyframes alt-glow { from { box-shadow: 0 0 4px #ff7a3a33; } to { box-shadow: 0 0 12px #ff7a3a88; } }
/* The table: curses on the monsters, rewards for you; a preview marks what it adds, changes and drops. */
.wnd.atlas-altar > .alt-sum { flex: 1 1 0; min-height: 80px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; padding: 2px 4px; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; }
.alt-sum h4 { margin: 0 0 4px; font: 400 13px/1.2 var(--f-ui); font-variant: small-caps; letter-spacing: .08em; color: var(--gold-hi); border-bottom: 1px solid #2c2318; padding-bottom: 3px; }
.alt-sum h4 small { font-variant: normal; letter-spacing: 0; color: var(--parch-faint); }
.alt-line { padding: 2px 4px 2px 7px; font: 12.5px/1.35 var(--f-ui); border-left: 2px solid transparent; }
.alt-line.bad { color: #e0806a; }
.alt-line.good { color: var(--magic); }
.alt-line.add { border-left-color: #ffb070; background: linear-gradient(90deg, #ff7a3a22, transparent); }
.alt-line.chg { border-left-color: #c7a24a; background: linear-gradient(90deg, #e8bc5618, transparent); }
.alt-line.gone { opacity: .55; text-decoration: line-through; border-left-color: #4a5a78; }
.alt-none { font: italic 12px var(--f-ui); color: var(--parch-faint); padding: 2px 4px; }
.alt-none.wide { grid-column: 1 / -1; text-align: center; padding: 14px 6px; }
.inv-tetris .socket-stash { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding-top: 6px; margin-top: 4px; border-top: 1px solid #2c2318; }
.inv-tetris .socket-stash > small { flex: none; font: 11px/1.2 var(--f-ui); color: var(--parch-faint); font-variant: small-caps; letter-spacing: .04em; }
.inv-tetris .socket-stash-gems { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.inv-tetris .socket-stash-gems em { font: 11.5px var(--f-ui); color: var(--parch-faint); font-style: normal; }
.inv-tetris .socket-stash-gem.slot { position: relative; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--rc) 40%, #1d160f); border-image: none; background: #0d0b08; cursor: grab; }
.inv-tetris .socket-stash-gem.slot::before { display: none; }
.inv-tetris .socket-stash-gem .icon { position: static; transform: none; }
.inv-tetris .socket-stash-gem .qty { position: absolute; left: auto; top: auto; right: 2px; bottom: 1px; font: 10px/1 var(--f-ui); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.stash-tetris .tabs .tab { flex: 1 1 auto; white-space: nowrap; padding: 0 7px; }
.stash-tetris .tabs .tab { flex: 1 1 auto; white-space: nowrap; padding: 0 7px; }
.stash-legendary .wnd-foot .hint { max-width: none; flex: 1; overflow: visible; white-space: normal; text-overflow: clip; }
/* ---- an update on its way, or landed (updates.js) ---------------------------------------------------------------------------- */
.update-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 12px; max-width: min(760px, calc(100vw - 32px)); padding: 9px 14px; background: linear-gradient(180deg, #1d150d, #120d09); border: 1px solid #8a6838; box-shadow: 0 0 0 1px #000, 0 8px 24px #000a, inset 0 0 14px #d2a95d22; font: 14px/1.3 var(--f-ui); color: var(--parch); pointer-events: auto; }
.update-banner[hidden] { display: none; }
.update-banner b { flex: none; font-weight: 400; color: var(--gold-hi); font-variant: small-caps; letter-spacing: .05em; font-size: 15px; }
.update-banner span { color: var(--parch-dim); }
.update-banner .btn { flex: none; height: 28px; padding: 0 12px; font-size: 13px; }
.update-banner .update-x { flex: none; width: 24px; height: 24px; border: 1px solid #5a4630; background: #120d09; color: var(--parch-dim); font-size: 16px; line-height: 1; cursor: pointer; }
.update-banner .update-x:hover { color: var(--gold-hi); border-color: var(--gold); }

/* Quest offers and turn-ins: main gold, side green, priority purple. Journal status marks stay muted. */
.qmark.quest-side:not(.active):not(.done) { color: #8fe07a; text-shadow: 0 0 8px rgba(120, 220, 100, 0.7), 0 2px 0 #000; }
.qmark.quest-priority:not(.active):not(.done) { color: #c58bff; text-shadow: 0 0 8px rgba(185, 110, 255, 0.85), 0 2px 0 #000; }
.qmark.double { width: auto; padding: 0 2px; letter-spacing: -2px; }
.talk-opt.priority .glyph { filter: hue-rotate(230deg) saturate(1.3); }
.talk-opt.priority small { color: #c9a8f2; }
.quest-list .rule.priority { color: #c58bff; }

/* ---- the Mercenary window (screens/mercs.js) ----------------------------------------------------------------------- */
.mercs-wnd { width: min(1040px, 96vw); }
.wnd-body.mercs { display: grid; grid-template-columns: 210px 1fr; gap: 12px; max-height: min(74vh, 760px); }
.merc-list { display: flex; flex-direction: column; gap: 6px; padding-top: 26px; }
.merc-tab { display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; cursor: pointer; }
.merc-tab.sel { outline: 1px solid var(--gold, #d8b25a); }
.merc-tab.unhired .merc-mini { filter: brightness(0) invert(0.4) opacity(0.6); }
.merc-tab b { display: block; font: 600 14px/1.2 var(--f-title); color: var(--parch); }
.merc-tab small { display: block; font: 12px/1.2 var(--f-ui); color: var(--parch-dim); }
.merc-mini { width: 52px; height: 52px; flex: none; image-rendering: pixelated; object-fit: contain; }
.merc-main { overflow-y: auto; padding-right: 6px; }
.merc-head { display: flex; gap: 12px; align-items: flex-end; }
.merc-portrait { width: 132px; height: 132px; flex: none; background: radial-gradient(closest-side, rgba(216,178,90,0.14), transparent); image-rendering: pixelated; object-fit: contain; }
.merc-id { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.merc-id > b { font: 600 22px/1 var(--f-title); color: var(--parch); }
.merc-id > span { font: 13px/1.3 var(--f-ui); color: var(--parch-dim); }
.merc-where { font-style: italic; }
.merc-xp { position: relative; height: 16px; background: rgba(0,0,0,0.45); border: 1px solid rgba(216,178,90,0.35); }
.merc-xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#c58bff, #7c4cc0); }
.merc-xp b { position: relative; display: block; text-align: center; font: 600 11px/16px var(--f-ui); color: #fff; text-shadow: 0 1px 0 #000; }
.merc-blurb { font: italic 13px/1.4 var(--f-ui); color: var(--parch-dim); margin: 6px 0; }
.merc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.merc-skill, .merc-mod, .merc-passive { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; text-align: left; cursor: pointer; }
.merc-skill b, .merc-mod b, .merc-passive b { font: 600 14px/1.2 var(--f-title); color: var(--parch); }
.merc-text { font: 12.5px/1.35 var(--f-ui); color: var(--parch-dim); }
.merc-cd { font: 11px/1 var(--f-ui); color: #c9b37a; }
.merc-skill.on, .merc-mod.on, .merc-passive.on { outline: 1px solid #d8b25a; box-shadow: inset 0 0 18px rgba(216,178,90,0.18); }
.merc-skill.on b, .merc-mod.on b, .merc-passive.on b { color: #ffd98a; }
.merc-skill.locked, .merc-mod.locked, .merc-passive.locked { opacity: 0.5; cursor: default; }
.merc-lock { position: absolute; top: 6px; right: 8px; font: 600 11px/1 var(--f-ui); color: #c58bff; }
.merc-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 10px; }
.merc-mod { padding: 6px 8px; }
.merc-tactic { display: flex; gap: 8px; align-items: center; padding: 6px 10px; margin-bottom: 8px; font: 13px/1 var(--f-ui); color: var(--parch); }
.merc-tactic select { background: #1b1410; color: var(--parch); border: 1px solid rgba(216,178,90,0.4); padding: 3px 6px; }
.merc-passives { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.merc-words { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; font: 12px/1.35 var(--f-ui); color: var(--parch-dim); }
.merc-words b { color: var(--parch); }
.merc-unhired p { font: 14px/1.45 var(--f-ui); color: var(--parch); }