/* ==========================================================================
   Member area: header menu, My Character, Loyalty Tree, Marketplace
   ========================================================================== */
.member { --side: var(--ember-2); --side-2: #fff1d6; --side-glow: rgba(233, 183, 101, .3); }
.member.side-angel { --side: var(--holy); --side-2: var(--holy-2); --side-glow: rgba(156, 195, 230, .32); }
.member.side-demon { --side: var(--blood-glow); --side-2: #ffd3c6; --side-glow: rgba(224, 38, 44, .38); }
.member section { padding-block: 0; }

/* ---------------------------------------------------------------- Header member menu */
.member-menu { position: relative; }
.member-trigger { display: flex; align-items: center; gap: .6rem; padding: 5px 14px 5px 5px; background: rgba(13, 10, 14, .8); border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer; font: 600 .78rem/1 var(--f-head); letter-spacing: .08em; }
.member-trigger:hover { border-color: var(--ember-2); }
.member-sigil { display: grid; place-items: center; width: 30px; height: 30px; font: 900 .9rem/1 var(--f-display); color: var(--bg); background: linear-gradient(180deg, #f6d89a, #a8702f); }
.member-angel .member-sigil { background: linear-gradient(180deg, #e6f3ff, #6f98bd); }
.member-demon .member-sigil { background: linear-gradient(180deg, #ff8f80, #7a0c0c); color: #fff; }
.member-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 8px 0; background: rgba(9, 7, 10, .98); border: 1px solid var(--line-strong); box-shadow: 0 20px 50px rgba(0, 0, 0, .7); z-index: 70; }
.member-dropdown-head { padding: 8px 18px 12px; margin: 0 0 6px; border-bottom: 1px solid var(--line); font: 600 .66rem/1.4 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.member-dropdown a { display: block; padding: 10px 18px; font: 600 .82rem/1 var(--f-head); letter-spacing: .06em; color: var(--ink-soft); }
.member-dropdown a:hover, .member-dropdown a[aria-current] { color: var(--ink); background: rgba(122, 12, 12, .18); }
.member-dropdown .member-signout { margin-top: 6px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 900px) { .member-name { display: none; } .member-trigger { padding-right: 5px; } }

/* ---------------------------------------------------------------- Shared bits */
.panel-title { font-size: 1.05rem; color: var(--ember-2); margin: 0 0 1rem; letter-spacing: .06em; }
.panel-title small { font: italic 400 .9rem/1 var(--f-body); color: var(--muted); letter-spacing: 0; }
.panel-note { margin: 1.4rem 0 0; font-size: .98rem; font-style: italic; color: var(--muted); text-align: center; }
.worn-tag { display: inline-block; padding: .3em .55em; font: 700 .58rem/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--bg); background: var(--ember-2); }
.stat { padding: 20px 18px; text-align: center; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 16, 21, .92), rgba(9, 7, 10, .96)); }
.stat small { display: block; font: 700 .62rem/1.3 var(--f-head); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.stat strong { display: block; font: 700 clamp(1.3rem, 2.4vw, 1.8rem)/1.1 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.stat em { display: block; margin-top: .3rem; font-size: .9rem; color: var(--muted); }
.member-empty { max-width: 700px; margin: 0 auto; padding: 200px var(--gutter) 140px !important; text-align: center; }
.member-empty h1 { font-size: 2rem; color: var(--ember-2); margin-bottom: 1rem; }

/* ---------------------------------------------------------------- Character hero */
.char-hero { position: relative; isolation: isolate; overflow: hidden; padding: 130px var(--gutter) 40px; }
.char-hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; filter: saturate(.6) brightness(.4) blur(1px); transform: scale(1.05); }
.char-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 30% 30%, var(--side-glow), transparent 55%), linear-gradient(180deg, rgba(6, 5, 8, .6), var(--bg)); }
.char-hero-inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: center; }
.char-portrait { position: relative; }
.char-portrait img { width: 220px; height: 220px; object-fit: cover; border: 1px solid var(--side); box-shadow: 0 0 0 6px rgba(6, 5, 8, .8), 0 0 0 7px var(--line-strong), 0 0 50px var(--side-glow), 0 30px 60px rgba(0, 0, 0, .7); }
.char-status { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: .45em 1em; font: 700 .62rem/1 var(--f-head); letter-spacing: .25em; text-transform: uppercase; white-space: nowrap; color: #fff; background: #2a4d2a; border: 1px solid #6fbf6f; }
.status-banished, .status-faded, .status-incapacitated { background: #3a1010; border-color: var(--blood-glow); }
.status-invulnerable { background: #3a3010; border-color: var(--ember-2); }
[class*="status-cryonics"], [class*="status-resting"] { background: #102a3a; border-color: var(--holy); }
.char-rank { font: 700 .76rem/1 var(--f-head); letter-spacing: .4em; text-transform: uppercase; color: var(--side); text-shadow: 0 0 14px var(--side-glow); margin-bottom: .6rem; }
.char-id h1 { font: 900 clamp(2.2rem, 5vw, 3.8rem)/1.05 var(--f-display); color: var(--side-2); text-shadow: 0 0 40px var(--side-glow), 0 3px 0 #000; margin-bottom: .7rem; }
.char-line { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.char-line span + span::before { content: "✦"; margin-right: 1.4rem; color: var(--ember); font-size: .7em; vertical-align: middle; }
.char-titles { display: flex; flex-wrap: wrap; gap: 12px; }
.char-titles > div { padding: 12px 18px; border: 1px solid var(--line); background: rgba(9, 7, 10, .7); }
.char-titles small { display: block; font: 700 .58rem/1 var(--f-head); letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; }
.char-titles strong { font: 700 1rem/1.2 var(--f-head); color: var(--ink); }
.rep-good { color: #b8e0a0 !important; }
.rep-bad { color: #ff9f8f !important; }

.vitals { max-width: var(--wrap); margin: 44px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vital-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .45rem; }
.vital-label span { font: 700 .66rem/1 var(--f-head); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.vital-label b { font: 600 .95rem/1 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.vital-bar { height: 12px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .5); overflow: hidden; }
.vital-bar i { display: block; height: 100%; transition: width 1.2s var(--ease); }
.side-demon .vital-health i { background: linear-gradient(90deg, #5a0808, #e0262c); box-shadow: 0 0 14px rgba(224, 38, 44, .7); }
.side-angel .vital-health i { background: linear-gradient(90deg, #8aa8c4, #f4f9ff); box-shadow: 0 0 14px rgba(200, 230, 255, .7); }
.vital-mana i { background: linear-gradient(90deg, #14306a, #3f8cff); box-shadow: 0 0 14px rgba(63, 140, 255, .6); }
.vital-entropy i { background: linear-gradient(90deg, #3a1a5a, #b060ff); box-shadow: 0 0 14px rgba(176, 96, 255, .5); }
.vital-minions i { background: linear-gradient(90deg, #6b4320, var(--ember-2)); box-shadow: 0 0 14px rgba(233, 183, 101, .5); }

.char-stats { max-width: var(--wrap); margin: 30px auto 0; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.char-lineage { max-width: var(--wrap); margin: 16px auto 0; padding: 18px 24px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; border: 1px solid var(--line); background: rgba(13, 10, 14, .8); }
.char-lineage > div small { display: block; font: 700 .6rem/1 var(--f-head); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.char-lineage > div strong { font: 600 1.05rem/1.2 var(--f-head); color: var(--ink); }
.char-lineage .btn { margin-left: auto; }

/* ---------------------------------------------------------------- Tabs on member pages */
.char-tabs { max-width: var(--wrap); margin: 50px auto 0; padding: 0 var(--gutter) 110px; }
.char-tab-bar { grid-template-columns: repeat(6, 1fr); margin: 0 0 34px; }
.market-tab-bar { grid-template-columns: repeat(2, 1fr); margin: -34px 0 34px; }
.char-tabs .board-panel { padding: 0; }

/* Inventory */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { padding: .55em 1.1em; font: 600 .72rem/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); background: rgba(13, 10, 14, .8); border: 1px solid var(--line); cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.is-on { color: var(--bg); background: var(--ember-2); border-color: var(--ember-2); }
.inv-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.inv-slot { position: relative; display: flex; flex-direction: column; align-items: center; padding: 14px 8px 12px; text-align: center; border: 1px solid var(--line); background: radial-gradient(circle at 50% 35%, rgba(233, 183, 101, .08), transparent 60%), rgba(9, 7, 10, .9); transition: border-color .25s, transform .25s var(--ease); }
.inv-slot:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.inv-slot img { width: 72px; height: 72px; }
.inv-glyph { display: grid; place-items: center; width: 72px; height: 72px; font: 900 1.3rem/1 var(--f-display); color: var(--ember); border: 1px solid var(--line); }
.inv-amount { position: absolute; top: 8px; right: 10px; font: 700 .85rem/1 var(--f-head); color: var(--ember-2); text-shadow: 0 1px 2px #000; }
.inv-name { margin-top: .6rem; font-size: .92rem; line-height: 1.2; color: var(--ink-soft); }

/* Equipment */
.equip-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 34px; margin-bottom: 34px; }
.paperdoll { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.doll-slot { display: grid; grid-template-columns: 64px 1fr 90px; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); background: rgba(9, 7, 10, .85); }
.doll-slot.is-worn { border-color: var(--line-strong); }
.doll-icon { display: grid; place-items: center; width: 64px; height: 64px; background: rgba(0, 0, 0, .4); border: 1px dashed var(--line); }
.doll-slot.is-worn .doll-icon { border-style: solid; }
.doll-text { font: 600 1rem/1.2 var(--f-head); color: var(--ink); }
.doll-text small { display: block; font: 700 .6rem/1 var(--f-head); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.doll-text em { font: italic 400 1rem/1 var(--f-body); color: var(--muted); }
.dura { display: block; height: 6px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.dura i { display: block; height: 100%; background: linear-gradient(90deg, #7a3b12, var(--ember-2)); }
.dura-inline { display: inline-block; width: 80px; vertical-align: middle; margin-right: .4em; }
.jewel-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.jewel { padding: 14px 16px; border: 1px solid var(--line); background: rgba(9, 7, 10, .85); }
.jewel.is-worn { border-color: var(--line-strong); box-shadow: inset 0 0 30px rgba(233, 183, 101, .06); }
.jewel-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: .6rem; }
.jewel-head strong { font: 600 .98rem/1.2 var(--f-head); color: var(--ink); }
.jewel-gems { display: flex; gap: 8px; }
.gem-slot { width: 26px; height: 26px; transform: rotate(45deg); border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .5); }
.gem-slot.has-gem { box-shadow: 0 0 12px currentColor; }
.gem-diamond { background: linear-gradient(135deg, #fff, #9fd4ff); color: #cfe9ff; }
.gem-ruby { background: linear-gradient(135deg, #ff6b6b, #7a0010); color: #ff3b4b; }
.gem-onyx { background: linear-gradient(135deg, #5a5a6a, #0a0a10); color: #8a8aa0; }
.gem-citrine { background: linear-gradient(135deg, #ffe38a, #b07a10); color: #ffcc40; }
.gem-topaz { background: linear-gradient(135deg, #ffc27a, #a0501a); color: #ff9a40; }
.gem-amethyst { background: linear-gradient(135deg, #d4a0ff, #4a1a7a); color: #b070ff; }
.gem-jade { background: linear-gradient(135deg, #9affc0, #1a6a3a); color: #50e090; }
.gem-star_fragment { background: linear-gradient(135deg, #fffbe0, #e9b765); color: #ffe9a0; }
.jewel-bonus { margin: .7rem 0 0; font-size: .95rem; color: var(--ember-2); }
.table-wrap code { font-size: .8rem; color: var(--muted); }

/* Skills & spells */
.skills-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.skill-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.skill-list li { display: grid; grid-template-columns: 130px 1fr 64px; gap: 14px; align-items: center; }
.skill-name { font: 600 .9rem/1 var(--f-head); color: var(--ink-soft); }
.skill-bar { height: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); overflow: hidden; }
.skill-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5a3a18, var(--ember)); }
.skill-list .is-max .skill-bar i { background: linear-gradient(90deg, var(--ember), #fff0c8); box-shadow: 0 0 12px rgba(233, 183, 101, .7); }
.skill-list .is-max .skill-name { color: var(--ember-2); }
.skill-val { text-align: right; font: 700 .9rem/1 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.spell-grid { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spell-grid li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); background: rgba(9, 7, 10, .85); color: var(--muted); }
.spell-grid li.has-scrolls { color: var(--ink); border-color: var(--line-strong); }
.spell-circle { display: grid; place-items: center; width: 30px; height: 30px; font: 900 .72rem/1 var(--f-display); color: var(--ember); border: 1px solid var(--line-strong); border-radius: 50%; }
.spell-name { font: 600 .88rem/1.2 var(--f-head); }
.spell-count { font: 700 1rem/1 var(--f-head); color: var(--ember-2); font-variant-numeric: tabular-nums; }
.medit-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); }
.medit-list li { display: flex; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: .98rem; color: var(--ink-soft); }
.medit-list li:last-child { border-bottom: 0; }
.medit-list b { font-family: var(--f-head); color: var(--muted); }
.medit-list b.gain { color: #b8e0a0; }

/* Combat log */
.combat-log { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); }
.log { display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: "kind main dmg" "kind meta meta"; gap: 2px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(9, 7, 10, .8); }
.log:last-child { border-bottom: 0; }
.log-out { border-left: 3px solid var(--ember); }
.log-in { border-left: 3px solid #6a6a7a; }
.log-kill { background: linear-gradient(90deg, rgba(122, 12, 12, .25), rgba(9, 7, 10, .8)); }
.log-kind { grid-area: kind; align-self: center; font: 700 .62rem/1 var(--f-head); letter-spacing: .2em; color: var(--muted); }
.log-main { grid-area: main; font-size: 1.05rem; color: var(--ink-soft); }
.log-main b { font-family: var(--f-head); font-weight: 700; }
.sp-angel { color: var(--holy-2); }
.sp-demon { color: #ffb8a8; }
.log-main em { color: var(--muted); }
.kill-tag { display: inline-block; margin-left: .5em; padding: .25em .5em; font: 700 .58rem/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--blood-2); }
.log-dmg { grid-area: dmg; font: 700 1.05rem/1 var(--f-head); color: var(--blood-glow); font-variant-numeric: tabular-nums; }
.log-meta { grid-area: meta; font-size: .88rem; color: var(--muted); }

/* Quest log */
.quest-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.quest { padding: 18px 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 16, 21, .92), rgba(9, 7, 10, .96)); }
.quest.is-ready { border-color: var(--ember-2); box-shadow: 0 0 30px rgba(233, 183, 101, .15); }
.quest.is-done { opacity: .7; }
.quest-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: .5rem; }
.quest-top h3 { font-size: 1.15rem; color: var(--ink); flex: 1; min-width: 200px; }
.quest-type { padding: .35em .6em; font: 700 .58rem/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ember-2); }
.quest-type-daily { color: var(--holy); border-color: rgba(156, 195, 230, .5); }
.quest-type-weekly { color: #ffb070; border-color: rgba(255, 176, 112, .5); }
.quest-type-monthly { color: #ffa8d0; border-color: rgba(255, 168, 208, .5); }
.quest-state { font: 700 .82rem/1 var(--f-head); color: var(--ember-2); }
.quest.is-done .quest-state { color: #b8e0a0; }
.quest-desc { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: .8rem; }
.quest-progress { position: relative; height: 22px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .45); overflow: hidden; }
.quest-progress i { display: block; height: 100%; background: linear-gradient(90deg, #4a2a10, var(--ember)); }
.quest.is-done .quest-progress i { background: linear-gradient(90deg, #1f3a1f, #5a9a5a); }
.quest-progress span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 .74rem/1 var(--f-head); letter-spacing: .1em; color: #fff; text-shadow: 0 1px 2px #000; }
.quest-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: .8rem; }
.quest-rewards { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quest-rewards li { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); font-size: .92rem; color: var(--ink-soft); }
.quest-when { font-size: .85rem; color: var(--muted); font-style: italic; }

/* Relations */
.relation-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.relation { position: relative; padding: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 16, 21, .92), rgba(9, 7, 10, .96)); }
.relation.rel-angel { border-top: 2px solid var(--holy); }
.relation.rel-demon { border-top: 2px solid var(--blood-glow); }
.relation.is-partner { grid-column: 1 / -1; border: 1px solid var(--ember-2); box-shadow: 0 0 40px rgba(233, 183, 101, .15); }
.partner-tag { position: absolute; top: -1px; right: 20px; padding: .45em .8em; font: 700 .6rem/1 var(--f-head); letter-spacing: .25em; text-transform: uppercase; color: var(--bg); background: var(--ember-2); }
.relation-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.relation-head img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line-strong); }
.relation-head h3 { font-size: 1.1rem; color: var(--ink); }
.relation-head p { margin: .2rem 0 0; font-size: .95rem; color: var(--muted); }
.bond { display: grid; gap: 6px; margin-bottom: 12px; }
.bond-row { display: grid; grid-template-columns: 80px 1fr 56px; align-items: center; gap: 10px; }
.bond-row small { font: 700 .58rem/1 var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.bond-row b { text-align: right; font: 700 .85rem/1 var(--f-head); color: var(--ink); }
.bond-bar { height: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.bond-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7a0c0c, #ff6b8b); }
.bond-bar-theirs i { background: linear-gradient(90deg, #6b4320, var(--ember-2)); }
.rel-acts { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.rel-acts li { padding: .3em .6em; font-size: .85rem; color: var(--ink-soft); border: 1px solid var(--line); }
.rel-acts b { color: var(--ember-2); }
.rel-meta { margin: 0; font-size: .88rem; color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- Loyalty tree */
.member-hero .page-hero-bg { filter: saturate(.6) brightness(.45); }
.lineage-summary { max-width: 1000px; margin: -20px auto 34px; padding-inline: var(--gutter) !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; z-index: 2; }
.lineage { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 110px !important; }
.tree-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.tree-tools input, .market-tools input { flex: 1; min-width: 220px; padding: .75em 1em; font: 400 1.05rem/1.2 var(--f-body); color: var(--ink); background: #09070a; border: 1px solid var(--line-strong); outline: none; }
.tree-tools input:focus, .market-tools input:focus { border-color: var(--ember-2); box-shadow: 0 0 0 3px rgba(200, 147, 74, .15); }
.tree-liege { display: inline-flex; flex-direction: column; margin-left: 0; margin-bottom: 14px; padding: 12px 18px; border: 1px dashed var(--line-strong); background: rgba(9, 7, 10, .8); }
.tree-liege small { font: 700 .58rem/1 var(--f-head); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.tree-liege strong { font: 700 1.05rem/1.2 var(--f-head); color: var(--ink); }
.tree-liege span { font-size: .9rem; color: var(--muted); font-style: italic; }
.tree, .tree-children { list-style: none; margin: 0; padding: 0; }
.tree-children { position: relative; margin-left: 26px; padding-left: 26px; display: none; }
.tree-children::before { content: ""; position: absolute; left: 0; top: 0; bottom: 26px; width: 1px; background: linear-gradient(180deg, var(--line-strong), var(--line)); }
.tree-node.is-open > .tree-children { display: block; }
.tree-node { position: relative; padding-top: 12px; }
.tree-children > .tree-node::before { content: ""; position: absolute; left: -26px; top: 42px; width: 26px; height: 1px; background: var(--line-strong); }
.tree-card { position: relative; display: grid; grid-template-columns: minmax(180px, 260px) 1fr auto; align-items: center; gap: 10px 22px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--side); background: linear-gradient(90deg, rgba(21, 16, 21, .95), rgba(9, 7, 10, .92)); max-width: 980px; }
.tree-root > .tree-node > .tree-card { border: 1px solid var(--side); border-left-width: 4px; box-shadow: 0 0 40px var(--side-glow); padding: 20px 22px; }
.tree-root > .tree-node > .tree-card .tree-name { font-size: 1.4rem; color: var(--side-2); }
.tree-node.is-dead > .tree-card { border-left-color: #555; opacity: .72; }
.tree-node.is-banned > .tree-card { border-left-color: #222; opacity: .45; }
.tree-node.is-match > .tree-card { border-color: var(--ember-2); box-shadow: 0 0 0 1px var(--ember-2), 0 0 30px rgba(233, 183, 101, .35); }
.tree-name { display: block; font: 700 1.08rem/1.2 var(--f-head); color: var(--ink); }
.tree-title { display: block; margin-top: .2rem; font-size: .92rem; color: var(--muted); font-style: italic; }
.tree-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.tree-facts div { display: flex; gap: .4em; align-items: baseline; }
.tree-facts dt { font: 700 .56rem/1 var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.tree-facts dd { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.tree-health { grid-column: 1 / -1; height: 4px; background: rgba(255, 255, 255, .05); }
.tree-health i { display: block; height: 100%; background: var(--side); box-shadow: 0 0 8px var(--side-glow); }
.tree-dead { grid-column: 1 / -1; margin: 0; font-size: .88rem; color: #ff9f8f; font-style: italic; }
.tree-toggle { grid-row: 1; grid-column: 3; padding: .55em .9em; font: 700 .64rem/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ember-2); background: rgba(0, 0, 0, .4); border: 1px solid var(--line-strong); cursor: pointer; }
.tree-toggle::after { content: " ▸"; }
.tree-toggle[aria-expanded="true"]::after { content: " ▾"; }
.tree-toggle:hover { color: #fff; border-color: var(--ember-2); }

/* ---------------------------------------------------------------- Marketplace */
.market-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 30px; }
.market-note { margin: 0; font-style: italic; color: var(--muted); }
.market-group { margin-bottom: 34px; }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; align-items: start; }
.market-item { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 16, 21, .92), rgba(9, 7, 10, .96)); }
.market-item[open] { grid-column: 1 / -1; border-color: var(--line-strong); }
.market-item summary { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; cursor: pointer; list-style: none; }
.market-item summary::-webkit-details-marker { display: none; }
.market-item.is-empty summary { cursor: default; opacity: .5; }
.mi-name { font: 600 1rem/1.2 var(--f-head); color: var(--ink); }
.mi-name small { display: block; margin-top: .25rem; font: 400 .9rem/1.2 var(--f-body); color: var(--muted); }
.mi-price { text-align: right; font: 700 1.1rem/1 var(--f-head); color: var(--ember-2); }
.mi-price small { display: block; font: 700 .55rem/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.mi-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.mi-table th { padding: 10px 16px; text-align: left; font: 700 .62rem/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); background: rgba(0, 0, 0, .3); }
.mi-table td { padding: 9px 16px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.mi-table tr.is-mine td { color: var(--ember-2); }
.t-item { display: flex; align-items: center; gap: 10px; color: var(--ink) !important; }
.market-stats { margin: 0 0 30px; padding: 0 !important; max-width: none; }
.market-info { margin-top: 30px; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
	.char-stats { grid-template-columns: repeat(3, 1fr); }
	.char-tab-bar { grid-template-columns: repeat(3, 1fr); }
	.char-tab-bar .board-tab:nth-child(3) { border-right: 0; }
	.char-tab-bar .board-tab:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
	.char-hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 30px; }
	.char-line, .char-titles { justify-content: center; }
	.vitals, .lineage-summary { grid-template-columns: 1fr 1fr; }
	.equip-layout, .skills-layout { grid-template-columns: 1fr; }
	.tree-card { grid-template-columns: 1fr auto; }
	.tree-facts { grid-column: 1 / -1; grid-row: 2; }
	.tree-toggle { grid-column: 2; }
	.market-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.char-portrait img { width: 170px; height: 170px; }
	.char-stats { grid-template-columns: 1fr 1fr; }
	.char-tab-bar { grid-template-columns: 1fr 1fr; }
	.skill-list li { grid-template-columns: 100px 1fr 54px; gap: 8px; }
	.spell-grid { grid-template-columns: 1fr; }
	.tree-children { margin-left: 10px; padding-left: 14px; }
	.tree-children > .tree-node::before { left: -14px; width: 14px; }
	.char-lineage .btn { margin-left: 0; }
}

.dura-num { font: 700 .85rem/1 var(--f-head); color: var(--ember-2); text-align: right; font-variant-numeric: tabular-nums; }
.log-age { font: italic 400 .85rem/1 var(--f-body); color: var(--muted); }

/* ===================================================== Parchment (Skills & Spells, profile professions) */
.parchment {
	--ink-brown: #3b2614;
	--ink-faded: #6b4d2c;
	--ink-red: #7a1a0e;
	position: relative;
	padding: clamp(26px, 4vw, 48px) clamp(22px, 4vw, 54px);
	color: var(--ink-brown);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(ellipse at 18% 22%, rgba(140, 92, 38, .22), transparent 42%),
		radial-gradient(ellipse at 82% 78%, rgba(120, 76, 30, .25), transparent 45%),
		radial-gradient(ellipse at 60% 10%, rgba(255, 246, 214, .5), transparent 50%),
		linear-gradient(170deg, #e9d9b0 0%, #dcc596 45%, #cfb27c 100%);
	box-shadow:
		inset 0 0 60px rgba(84, 48, 16, .55),
		inset 0 0 14px rgba(60, 30, 8, .6),
		0 18px 50px rgba(0, 0, 0, .55);
	border-radius: 3px;
	clip-path: polygon(0 1.2%, 4% 0, 18% .8%, 33% 0, 51% .9%, 68% .1%, 86% 1%, 100% 0, 99.4% 18%, 100% 42%, 99.3% 66%, 100% 88%, 99.5% 100%, 80% 99.2%, 61% 100%, 42% 99.1%, 23% 100%, 6% 99.3%, 0 100%, .6% 76%, 0 52%, .7% 28%);
}
.parchment .panel-title { color: var(--ink-red); text-shadow: none; border-bottom: 1px solid rgba(59, 38, 20, .35); padding-bottom: .5rem; }
.parchment .panel-title small { color: var(--ink-faded); }

.parchment .skill-list { gap: 4px; }
.parchment .skill-list li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; }
.parchment .skill-name { flex: none; font: 600 1rem/1.2 var(--f-head); color: var(--ink-brown); }
.parchment .skill-leader { flex: 1; min-width: 16px; border-bottom: 2px dotted rgba(59, 38, 20, .35); transform: translateY(-4px); }
.parchment .skill-val { flex: none; font: 700 1rem/1 var(--f-head); color: var(--ink-brown); }
.parchment .skill-list .is-max .skill-name,
.parchment .skill-list .is-max .skill-val { color: var(--ink-red); }
.parchment .skill-list .is-max .skill-val::after { content: " ✦"; font-size: .8em; }

.parchment .spell-grid li { background: rgba(255, 248, 225, .28); border: 1px solid rgba(59, 38, 20, .28); color: rgba(59, 38, 20, .5); }
.parchment .spell-grid li.has-scrolls { color: var(--ink-brown); border-color: rgba(59, 38, 20, .55); background: rgba(255, 248, 225, .42); }
.parchment .spell-circle { color: var(--ink-red); border-color: rgba(122, 26, 14, .55); }
.parchment .spell-count { color: var(--ink-red); }

.parchment .medit-list { border-color: rgba(59, 38, 20, .3); }
.parchment .medit-list li { border-color: rgba(59, 38, 20, .2); color: var(--ink-brown); }
.parchment .medit-list b { color: var(--ink-faded); }
.parchment .medit-list b.gain { color: #2f5a1c; }

.parchment-solo { margin-bottom: 40px; }
.parchment-solo .skill-list-wide { margin-bottom: 0; }

/* Jewelry & gem icons */
.jewel-head { justify-content: flex-start; }
.jewel-head .worn-tag { margin-left: auto; }
.jewel-icon { width: 48px; height: 48px; flex: none; object-fit: contain; }
.gem-slot.has-gem { position: relative; overflow: visible; }
.gem-slot img { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-45deg); object-fit: contain; }
.gem-slot.has-gem:has(img) { background: rgba(0, 0, 0, .65); box-shadow: 0 0 8px rgba(233, 183, 101, .25); }

/* User menu icons (2026-10-03) */
.member-dropdown a { display: flex; align-items: center; gap: 12px; }
.menu-ico { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--ember-2); opacity: .8; transition: opacity .2s, transform .2s; }
.member-dropdown a:hover .menu-ico, .member-dropdown a[aria-current] .menu-ico { opacity: 1; transform: scale(1.08); }
.member-dropdown .member-signout .menu-ico { color: var(--muted); }
.main-nav .nav-mobile-only.has-ico { align-items: center; gap: 12px; }
@media (max-width: 900px) { .main-nav .nav-mobile-only.has-ico { display: flex; } }

/* Trade Shop: the big button at the top of the user menu, set apart by a border */
.member-dropdown .member-tradeshop { margin: 4px 10px 10px; padding: 12px 14px; gap: 12px; border: 1px solid rgba(233, 183, 101, .65); color: #f4e6c8;
	background: linear-gradient(180deg, rgba(168, 20, 26, .42), rgba(90, 8, 12, .42)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 14px rgba(233, 183, 101, .12); }
.member-dropdown .member-tradeshop span { display: grid; gap: 3px; font: 700 .95rem/1 var(--f-head); letter-spacing: .08em; }
.member-dropdown .member-tradeshop small { font: italic 400 .74rem/1.1 var(--f-body); letter-spacing: 0; color: var(--ink-soft); }
.member-dropdown .member-tradeshop .menu-ico { width: 22px; height: 22px; color: #f2cf73; opacity: 1; }
.member-dropdown .member-tradeshop:hover, .member-dropdown .member-tradeshop[aria-current] { background: linear-gradient(180deg, rgba(196, 28, 34, .55), rgba(110, 10, 14, .55)); border-color: var(--ember-2); color: #fff6e2; }
.member-dropdown .member-tradeshop + a:not(.member-tradeshop) { border-top: 1px solid var(--line); padding-top: 14px; }
/* Expedition: a second big button under the Trade Shop, in the deep blue of the map's night sky */
.member-dropdown .member-expedition { margin-top: -2px; background: linear-gradient(180deg, rgba(30, 44, 96, .55), rgba(12, 16, 44, .6)); border-color: rgba(150, 190, 255, .55); }
.member-dropdown .member-expedition .menu-ico { color: #a8d0ff; }
.member-dropdown .member-expedition:hover, .member-dropdown .member-expedition[aria-current] { background: linear-gradient(180deg, rgba(52, 80, 170, .65), rgba(20, 28, 80, .7)); border-color: #a8d0ff; }
.main-nav .nav-expedition { background: rgba(30, 44, 96, .45); border-color: rgba(150, 190, 255, .55); }
.main-nav .nav-tradeshop { border: 1px solid rgba(233, 183, 101, .55); padding: 10px 16px; margin: 6px auto 10px; background: rgba(168, 20, 26, .3); }

/* Notification bell (header, next to the member menu) */
.notify { position: relative; }
.notify-bell { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; background: rgba(13, 10, 14, .8); border: 1px solid var(--line-strong); color: var(--ink-soft); cursor: pointer; transition: border-color .2s, color .2s; }
.notify-bell:hover, .notify-bell[aria-expanded="true"] { border-color: var(--ember-2); color: var(--ember-2); }
.notify-bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.notify-bell.has-new { color: var(--ember-2); }
.notify-bell.has-new svg { animation: notify-ring 2.4s ease-in-out 1s 2; transform-origin: 50% 15%; }
@keyframes notify-ring { 0%, 20%, 100% { transform: rotate(0); } 5% { transform: rotate(14deg); } 10% { transform: rotate(-12deg); } 15% { transform: rotate(6deg); } }
.notify-count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--blood-2); border: 1px solid #ff6a5e; color: #fff; font: 700 .62rem/1 var(--f-body); }
.notify-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 32px)); background: rgba(9, 7, 10, .98); border: 1px solid var(--line-strong); box-shadow: 0 20px 50px rgba(0, 0, 0, .7); z-index: 70; }
.notify-head { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 600 .66rem/1.4 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.notify-empty { margin: 0; padding: 18px 16px; color: var(--muted); font-size: .95rem; font-style: italic; }
.notify-list { list-style: none; margin: 0; padding: 4px 0; max-height: min(420px, 60vh); overflow-y: auto; }
.notify-item a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 16px; color: var(--ink-soft); font-size: .95rem; line-height: 1.35; }
.notify-item a:hover { background: rgba(200, 147, 74, .08); color: var(--ink); }
.notify-item.is-new a { background: rgba(168, 20, 26, .12); }
.notify-item.is-new a:hover { background: rgba(168, 20, 26, .2); }
.notify-text { min-width: 0; overflow-wrap: anywhere; }
.notify-text b { color: var(--ink); font-weight: 600; }
.notify-ico { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--ember-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.notify-item.is-like .notify-ico { stroke: #ff8a80; }
.notify-item.is-notice .notify-ico, .notify-item.is-devlog .notify-ico { stroke: var(--holy); }
.notify-ago { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.notify-all { display: block; padding: 11px 16px; border-top: 1px solid var(--line); text-align: center; font: 600 .7rem/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-2); }
@media (prefers-reduced-motion: reduce) { .notify-bell.has-new svg { animation: none; } }
@media (max-width: 520px) { .notify-panel { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; } }
.notify-list { scrollbar-width: thin; scrollbar-color: rgba(200, 147, 74, .45) transparent; }
.notify-list::-webkit-scrollbar { width: 6px; }
.notify-list::-webkit-scrollbar-thumb { background: rgba(200, 147, 74, .45); }
.notify-list::-webkit-scrollbar-track { background: transparent; }
/* Quest Log claims (2026-10-04) */
.quest-claim { margin: 0 0 0 auto; }
.quest-flash { margin: 0 0 1rem; padding: 14px 18px; border: 1px solid var(--ember-2); background: linear-gradient(90deg, rgba(233, 183, 101, .14), rgba(233, 183, 101, .03)); }
.quest-flash p { margin: 0 0 .5rem; color: #f4e7cc; font-weight: 700; }
.quest-flash.is-error { border-color: #b3401f; background: rgba(140, 30, 18, .25); }
.quest-flash.is-error p { margin: 0; color: #ffcbb8; }
.quest-desc { white-space: pre-line; }
/* the claim's result as a pop-up over the page (2026-10-04) */
.quest-pop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; background: rgba(4, 3, 6, .6); backdrop-filter: blur(2px); animation: questPopBg .2s ease-out; }
.quest-pop .quest-flash { width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; margin: 0; padding: 26px 26px 20px; text-align: center;
	background: radial-gradient(ellipse at 50% 0%, rgba(233, 183, 101, .18), transparent 65%), linear-gradient(180deg, #1a1210, #0c0808); box-shadow: 0 24px 70px rgba(0, 0, 0, .7); animation: questPopIn .25s ease-out; }
.quest-pop .quest-flash-kicker { margin: 0 0 8px; font: 700 .74rem var(--f-head); letter-spacing: .3em; text-transform: uppercase; color: var(--ember-2); }
.quest-pop .quest-flash > p:not(.quest-flash-kicker) { margin: 0 0 14px; font-size: 1.08rem; }
.quest-pop .quest-rewards { justify-content: center; }
.quest-flash-actions { margin-top: 18px; }
@keyframes questPopBg { from { opacity: 0; } }
@keyframes questPopIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
/* HUD skins on the character page (2026-10-04) */
.hud-flash { margin: 0 0 1rem; padding: 12px 16px; border: 1px solid var(--ember-2); background: rgba(233, 183, 101, .1); color: #f4e7cc; }
.hud-flash.is-error { border-color: #b3401f; background: rgba(140, 30, 18, .25); color: #ffcbb8; }
.hud-global { margin: 0 0 1rem; color: var(--ink-soft); }
.hud-global b { color: var(--ember-2); }
.hud-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hud-skin { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); transition: border-color .2s, box-shadow .2s; }
.hud-skin.is-worn { border-color: var(--ember-2); box-shadow: 0 0 24px rgba(233, 183, 101, .16); }
.hud-prev { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(ellipse at center, #241a16, #0b0808); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; display: grid; place-items: center; }
.hud-prev-body { width: 100%; height: 100%; object-fit: contain; }
.hud-prev-logo { position: absolute; right: 6px; bottom: 6px; width: 34%; aspect-ratio: 4 / 3; object-fit: contain; background: rgba(0, 0, 0, .55); border: 1px solid rgba(233, 183, 101, .4); }
.hud-prev-logo-only { width: 46%; opacity: .8; }
.hud-noprev { color: var(--muted); font-size: .85rem; }
.hud-bars { display: flex; gap: 6px; }
.hud-bars img { flex: 1; min-width: 0; height: 30px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .08); }
.hud-skin h3 { margin: 4px 0 0; font: 700 1rem var(--f-head); color: #f1e2c4; }
.hud-sub { margin: 0; font-size: .82rem; color: var(--muted); }
.hud-skin form, .hud-worn { margin-top: auto; padding-top: 6px; }
.hud-worn { display: inline-block; font: 700 .72rem var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--ember-2); }
/* 7 tabs with HUD Skins (2026-10-04): one row on wide screens; on smaller ones the rows keep their lines */
.char-tab-bar { grid-template-columns: repeat(7, 1fr); }
.char-tab-bar .board-tab:last-child { border-right: 0; }
@media (max-width: 1100px) {
	.char-tab-bar { grid-template-columns: repeat(4, 1fr); }
	.char-tab-bar .board-tab:nth-child(3) { border-right: 1px solid var(--line); }
	.char-tab-bar .board-tab:nth-child(4) { border-right: 0; }
	.char-tab-bar .board-tab:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
	.char-tab-bar { grid-template-columns: 1fr 1fr; }
	.char-tab-bar .board-tab:nth-child(4) { border-right: 1px solid var(--line); }
	.char-tab-bar .board-tab:nth-child(even) { border-right: 0; }
	.char-tab-bar .board-tab:nth-child(-n+6) { border-bottom: 1px solid var(--line); }
}
/* HUD skin previews on black, centred; the logo shown wide like on the HUD (2026-10-05) */
.hud-prev { background: #000; display: flex; align-items: center; justify-content: center; }
.hud-prev-body { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hud-prev-logo { width: 46%; aspect-ratio: 2 / 1; object-fit: fill; background: #000; border-color: rgba(233, 183, 101, .35); }
.hud-bars img { background: #000; object-fit: fill; }

/* My Devices (2026-10-05) */
.dev-loading, .dev-log-loading { padding: 30px 0; text-align: center; color: var(--muted); font-style: italic; }
.dev-log-loading { padding: 12px 0; }
.dev-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.dev-sum div { padding: 12px 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); text-align: center; }
.dev-sum b { display: block; font: 700 1.6rem/1.1 var(--f-head); color: var(--ember-2); }
.dev-sum span { font: 700 .62rem/1.3 var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dev-group { margin: 0 0 22px; }
.dev-h { margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); font: 700 .8rem/1.2 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }
.dev-h small { margin-left: 6px; color: var(--muted); letter-spacing: .05em; }
.dev-none { margin: 4px 0; color: var(--muted); font-style: italic; }
.dev-hint { margin: 0 0 10px; color: var(--muted); font-size: .92rem; }
.dev-muted { color: var(--muted); }
.dev-id { color: var(--muted); font-size: .78rem; letter-spacing: .03em; }
.dev-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.dev-card { padding: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .2)), rgba(10, 8, 11, .7); }
.dev-card-top { display: flex; align-items: center; gap: 11px; }
.dev-card-top h4 { margin: 0; font: 600 1.08rem/1.25 var(--f-body); color: #f1e2c4; }
.dev-card-top > div { flex: 1; min-width: 0; }
.dev-ico { flex: 0 0 38px; display: grid; place-items: center; width: 38px; height: 38px; color: var(--ember-2); border: 1px solid var(--line-strong); background: radial-gradient(circle at 50% 35%, rgba(233, 183, 101, .16), transparent 75%), rgba(0, 0, 0, .35); }
.dev-fill { height: 8px; margin: 12px 0 5px; border: 1px solid var(--line); background: rgba(0, 0, 0, .45); }
.dev-fill i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--ember-2)); }
.dev-cap { margin: 0 0 8px; font-size: .95rem; color: var(--ink-soft); }
.dev-cap b { color: var(--ink); }
.dev-facts { margin: 0 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.dev-facts dt { font: 700 .58rem/1.3 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dev-facts dd { margin: 1px 0 0; font-size: .95rem; color: var(--ink); }
.dev-logbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .35); color: var(--ink-soft); cursor: pointer;
	font: 700 .62rem/1.2 var(--f-head); letter-spacing: .16em; text-transform: uppercase; }
.dev-logbtn small { color: var(--muted); letter-spacing: 0; }
.dev-logbtn::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.dev-logbtn[aria-expanded="true"] { color: var(--ember-2); border-color: var(--ember); }
.dev-logbtn[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, 0); }
.dev-logbtn:hover { color: var(--ember-2); }
.dev-logbox { margin-top: 10px; }
.dev-wide .dev-card-top .dev-logbtn { margin-left: auto; }
.dev-log { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dev-log th { padding: 6px 8px; text-align: left; font: 700 .56rem/1.2 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.dev-log td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--ink-soft); }
.dev-log .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dev-log .dev-when { white-space: nowrap; color: var(--muted); }
.dev-tag { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); font: 700 .56rem/1.6 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.dev-tag.is-deposit, .dev-tag.is-received, .dev-tag.is-gathered { color: #c9f2c0; border-color: rgba(120, 200, 110, .45); }
.dev-tag.is-withdraw, .dev-tag.is-sent { color: #ffc4b4; border-color: rgba(224, 90, 60, .45); }
.dev-tag.is-failed { color: var(--muted); border-color: var(--line); } /* a failed pick on a Reagent Field (2026-10-05) */
.dev-log-note { margin: 0 0 6px; color: var(--muted); font-size: .86rem; font-style: italic; }
.dev-log-empty { margin: 6px 0; color: var(--muted); font-style: italic; }
.dev-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 0; color: var(--muted); font-size: .86rem; }
.dev-tablewrap { overflow-x: auto; }
.dev-fields { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dev-fields th { padding: 7px 10px; text-align: left; font: 700 .58rem/1.2 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.dev-fields td { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--ink-soft); vertical-align: middle; }
.dev-fields td b { color: var(--ink); font-weight: 600; }
.dev-fields .is-end { text-align: right; }
.dev-fields .dev-logrow td { padding: 4px 10px 14px; background: rgba(0, 0, 0, .25); }
.dev-showall { margin-top: 10px; }
@media (max-width: 640px) {
	.dev-sum { grid-template-columns: 1fr; }
	.dev-cards { grid-template-columns: 1fr; }
	.dev-log th:nth-child(5), .dev-log td:nth-child(5) { display: none; }
}
/* 8 tabs with My Devices (2026-10-05): one row on wide screens, 2 rows of 4 on smaller ones */
.char-tab-bar { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 1100px) {
	.char-tab-bar { grid-template-columns: repeat(4, 1fr); }
	.char-tab-bar .board-tab:nth-child(8) { border-right: 0; }
}
/* a depository with its log open takes the whole row */
.dev-card.is-open { grid-column: 1 / -1; }
.dev-card.is-open .dev-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .dev-card.is-open .dev-facts { grid-template-columns: 1fr 1fr; } }
/* My Devices: the categories open and close (2026-10-05) */
summary.dev-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; user-select: none; transition: color .15s, border-color .15s; }
summary.dev-h::-webkit-details-marker { display: none; }
summary.dev-h::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.dev-group:not([open]) > summary.dev-h::after { transform: rotate(-45deg); }
.dev-group:not([open]) > summary.dev-h { margin-bottom: 0; }
summary.dev-h:hover { color: var(--ember-2); border-bottom-color: var(--ember); }
summary.dev-h:focus-visible { outline: 1px solid var(--ember-2); outline-offset: 3px; }
.dev-group[open] > summary.dev-h { margin-bottom: 12px; }

/* The member menu scrolls on short screens so the last options (Sign Out) can be reached (2026-10-05) */
.member-dropdown { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: rgba(233, 183, 101, .45) transparent; }
.member-dropdown::-webkit-scrollbar { width: 6px; }
.member-dropdown::-webkit-scrollbar-thumb { background: rgba(233, 183, 101, .4); border-radius: 3px; }

/* the Loyalty Tree's Copy UUID (2026-10-08) */
.tree-copy { display: inline-flex; align-items: center; gap: .45em; margin-top: .5rem; padding: .4em .75em; font: 700 .58rem/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); cursor: pointer; transition: color .15s, border-color .15s; }
.tree-copy:hover, .tree-copy:focus-visible { color: var(--ember-2); border-color: var(--ember-2); }
.tree-copy.is-copied { color: #9fe08a; border-color: #9fe08a; }
/* the Copy UUID at the top right of each card, on the name's line; the card's toggle sits at its foot so they never meet (2026-10-08) */
.tree-card > .tree-card-main > .tree-copy { position: absolute; top: 14px; right: 18px; margin: 0; }
.tree-card:has(> .tree-card-main > .tree-copy) > .tree-toggle { align-self: end; }
@media (max-width: 900px) { .tree-card:has(> .tree-card-main > .tree-copy) > .tree-card-main { padding-right: 112px; min-width: 0; } .tree-card:has(> .tree-card-main > .tree-copy) .tree-name { overflow-wrap: anywhere; } }   /* a long name wraps before the button */

/* Polls (2026-10-09): the header's poll icon next to the bell ("NEW POLL" until seen), and a poll's results (polls.php and the Admin Panel) */
.poll-link { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 9px; background: rgba(13, 10, 14, .8); border: 1px solid var(--line-strong); color: var(--ink-soft); text-decoration: none; transition: border-color .2s, color .2s; }
.poll-link:hover { border-color: var(--ember-2); color: var(--ember-2); text-decoration: none; }
.poll-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.poll-link.has-new { color: var(--ember-2); border-color: rgba(233, 183, 101, .7); box-shadow: 0 0 12px rgba(233, 183, 101, .25); }
.poll-new { font: 700 .6rem/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: #1a1006; background: linear-gradient(135deg, #f6d48c, #c8934a); padding: 4px 6px; animation: poll-pulse 2.2s ease-in-out infinite; }
@keyframes poll-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(233, 183, 101, 0); } 50% { box-shadow: 0 0 10px rgba(233, 183, 101, .65); } }
@media (prefers-reduced-motion: reduce) { .poll-new { animation: none; } }
@media (max-width: 520px) { .poll-link { padding: 0 8px; } .poll-new { font-size: .52rem; padding: 3px 4px; letter-spacing: .08em; } }
.poll-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.poll-results li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 34%) auto; gap: 10px; align-items: center; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .22); }
.poll-results li.is-mine { border-color: rgba(233, 183, 101, .5); }
.poll-opt { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.poll-opt small { margin-left: 6px; font: 700 .55rem/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--ember-2); }
.poll-bar { display: block; height: 8px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.poll-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6b4a1c, var(--ember)); }
.poll-results li.is-top .poll-bar i { background: linear-gradient(90deg, var(--ember), var(--ember-2)); box-shadow: 0 0 8px rgba(233, 183, 101, .4); }
.poll-n { white-space: nowrap; text-align: right; }
.poll-n b { font: 700 .95rem/1 var(--f-head); color: var(--ink); }
.poll-n small { color: var(--muted); margin-left: 4px; }
.poll-total { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }
.poll-state { font: 700 .6rem/1 var(--f-head); letter-spacing: .16em; text-transform: uppercase; padding: 3px 7px; border: 1px solid rgba(111, 220, 154, .5); color: #8fe0a2; }
.is-closed .poll-state { border-color: var(--line-strong); color: var(--muted); }
@media (max-width: 560px) { .poll-results li { grid-template-columns: minmax(0, 1fr) auto; } .poll-bar { grid-column: 1 / -1; grid-row: 2; } }

/* Arena stats (2026-10-10), My Character -> Arena: as wide as the tab menu; the five stats (slider and box) on the left, the points left,
   the Arena health, the mana and the buttons in a column on the right (it follows the page down on a wide screen) */
.arena-head { margin: 0 0 18px; text-align: center; }
.arena-head h3 { margin: 0 0 8px; font: 700 1.6rem var(--f-head); letter-spacing: .06em; color: #f1e2c4; }
.arena-head p { margin: 0 auto; max-width: 980px; color: var(--ink-soft); }
.arena-note { margin: 0 0 18px; padding: 11px 16px; border: 1px solid rgba(233, 183, 101, .38); border-left: 3px solid var(--ember-2); background: linear-gradient(90deg, rgba(233, 183, 101, .1), rgba(233, 183, 101, .02)); color: #f0d08e; font-style: italic; }
.arena-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }

.arena-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.arena-stat { --c: 233, 183, 101; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 1.7fr) 88px 118px; align-items: center; gap: 18px; padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid rgba(var(--c), .75);
	background: linear-gradient(90deg, rgba(var(--c), .08), rgba(var(--c), 0) 40%), rgba(12, 9, 12, .7); transition: border-color .2s, box-shadow .2s; }
.arena-stat:hover, .arena-stat:focus-within { border-color: rgba(var(--c), .35); border-left-color: rgb(var(--c)); box-shadow: 0 0 18px rgba(var(--c), .12); }
.arena-stat:nth-child(1) { --c: 224, 86, 64; }    /* Strength */
.arena-stat:nth-child(2) { --c: 233, 183, 101; }  /* Accuracy */
.arena-stat:nth-child(3) { --c: 112, 200, 120; }  /* Vitality */
.arena-stat:nth-child(4) { --c: 110, 160, 255; }  /* Intelligence */
.arena-stat:nth-child(5) { --c: 186, 128, 255; }  /* Spell Power */
.arena-stat label { display: grid; gap: 3px; margin: 0; }
.arena-stat label b { font: 700 1.05rem var(--f-head); letter-spacing: .04em; color: #f4e7cc; }
.arena-stat label small { color: var(--muted); font-size: .84rem; }

/* the sliders: a thin track filled in the stat's colour up to the value (--p, set by arena-stats.js), a round knob */
.arena-stat input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.arena-stat input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .6);
	background: linear-gradient(90deg, rgba(var(--c), .95) var(--p, 0%), rgba(255, 255, 255, .09) var(--p, 0%)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.arena-stat input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
	border: 2px solid #1a120c; background: radial-gradient(circle at 35% 30%, #fff6dc, rgb(var(--c)) 60%); box-shadow: 0 0 0 1px rgba(var(--c), .8), 0 0 10px rgba(var(--c), .55); }
.arena-stat input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .6); background: rgba(255, 255, 255, .09); }
.arena-stat input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: rgba(var(--c), .95); }
.arena-stat input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #1a120c; background: radial-gradient(circle at 35% 30%, #fff6dc, rgb(var(--c)) 60%); box-shadow: 0 0 10px rgba(var(--c), .55); }
.arena-stat input[type="range"]:focus-visible { outline: none; }
.arena-stat input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(var(--c), .45), 0 0 14px rgba(var(--c), .8); }

/* the number boxes: dark, the stat's colour on the edge, no spinner arrows */
.arena-stat input[type="number"] { width: 100%; padding: 8px 6px; border: 1px solid rgba(var(--c), .45); border-radius: 3px; background: rgba(0, 0, 0, .5);
	box-shadow: inset 0 1px 6px rgba(0, 0, 0, .7); color: #f4e7cc; font: 700 1.15rem/1 var(--f-head); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.arena-stat input[type="number"]::-webkit-inner-spin-button, .arena-stat input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.arena-stat input[type="number"]:focus { outline: none; border-color: rgb(var(--c)); box-shadow: inset 0 1px 6px rgba(0, 0, 0, .7), 0 0 0 2px rgba(var(--c), .25); }
.arena-cap { display: grid; gap: 2px; color: var(--ink-soft); font: 700 .95rem var(--f-head); }
.arena-cap small { font: 400 .78rem var(--f-body); color: var(--muted); }

/* the column on the right */
.arena-side { position: sticky; top: 90px; display: grid; gap: 12px; }
.arena-card { --c: 233, 183, 101; position: relative; display: grid; justify-items: center; gap: 2px; padding: 16px 14px 14px; text-align: center; overflow: hidden;
	border: 1px solid rgba(var(--c), .3); border-top: 2px solid rgb(var(--c)); background: radial-gradient(ellipse at 50% 0%, rgba(var(--c), .16), transparent 70%), rgba(10, 7, 10, .75); }
.arena-card.is-hp { --c: 224, 70, 60; }
.arena-card.is-mana { --c: 100, 150, 255; }
.arena-card-k { font: 700 .66rem var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--c)); }
.arena-card b { font: 700 2.2rem/1.1 var(--f-head); color: #f6ead0; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(var(--c), .35); }
.arena-card b.is-over { color: #ff7a5c; }
.arena-card-sub { color: var(--muted); font-size: .84rem; }
.arena-spent { display: block; width: 100%; height: 5px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.arena-spent i { display: block; height: 100%; background: linear-gradient(90deg, #b8862c, #f0c64a); transition: width .2s; }
.arena-spent i.is-over { background: #e0473c; }
.arena-err { margin: 0; padding: 8px 10px; border: 1px solid rgba(224, 71, 60, .5); background: rgba(140, 30, 18, .2); color: #ffb3a0; font-size: .9rem; text-align: center; }
.arena-acts { display: grid; gap: 8px; }
.arena-acts .btn { width: 100%; justify-content: center; }

@media (max-width: 980px) {
	.arena-form { grid-template-columns: 1fr; }
	.arena-side { position: static; order: -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.arena-side .arena-err, .arena-side .arena-acts { grid-column: 1 / -1; }
	.arena-acts { grid-template-columns: 2fr 1fr; }
	.arena-card b { font-size: 1.6rem; }
}
@media (max-width: 640px) {
	.arena-stat { grid-template-columns: minmax(0, 1fr) 80px; gap: 10px 12px; padding: 12px 14px; }
	.arena-stat input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
	.arena-cap { grid-column: 1 / -1; grid-row: 3; display: flex; gap: 8px; align-items: baseline; }
	.arena-side { gap: 8px; } .arena-card { padding: 10px 6px; } .arena-card b { font-size: 1.3rem; } .arena-card-k { font-size: .56rem; letter-spacing: .1em; } .arena-card-sub { font-size: .72rem; }
}

/* Arena damage (2026-10-10): the min and max of the 1st-4th skill as the Backpack shows them, the decimals small */
.arena-card.is-dmg { --c: 240, 150, 70; justify-items: stretch; }
.arena-card.is-dmg .arena-card-k, .arena-card.is-dmg .arena-card-sub { text-align: center; }
.arena-dmg { width: 100%; margin: 6px 0 2px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.arena-dmg thead th { padding: 0 0 4px; font: 700 .6rem var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: right; }
.arena-dmg tbody th { padding: 5px 0; width: 44px; font: 700 .78rem var(--f-head); letter-spacing: .06em; color: rgb(var(--c)); text-align: left; }
.arena-dmg td { padding: 5px 0 5px 8px; font: 700 1.15rem/1 var(--f-head); color: #f6ead0; text-align: right; white-space: nowrap; }
.arena-dmg td small { font-size: .62em; color: #d8c49a; vertical-align: .45em; margin-left: 1px; }
.arena-dmg tbody tr + tr th, .arena-dmg tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, .06); }
@media (max-width: 980px) { .arena-side .arena-card.is-dmg { grid-column: 1 / -1; } }
/* HUD skins with their own pictures (2026-10-13, assets/img/hudskins: the game folder's textures with their transparency): the HUD at the top,
   its logo bar (the filigree and the emblem) under it, over its lower edge, as on the HUD in-world */
.hud-prev.is-own { display: block; background: radial-gradient(ellipse at 50% 45%, #2a1f1a, #090706 72%); }
.hud-prev.is-own .hud-prev-body { position: absolute; left: 50%; top: 3%; width: auto; height: 80%; translate: -50% 0; object-fit: contain; }
.hud-prev.is-own .hud-prev-logo { position: absolute; left: 50%; right: auto; bottom: 4%; width: 64%; height: auto; aspect-ratio: auto; translate: -50% 0; background: none; border: 0; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
/* (2026-10-13, the owner: "adjust the logo to hud body proportions based on the photo") as in-world: the logo bar's art 0.89 of the HUD body's
   art across, its top at the foot of the HUD's counter plate (79% down the body's picture); the body the card's height, a little raised */
.hud-prev.is-own .hud-prev-body { top: -6%; height: 100%; }
.hud-prev.is-own .hud-prev-logo { top: 74.5%; bottom: auto; width: 45%; }   /* the bar 0.75 of the HUD across (its webs and horns included), the emblem just under the counter plate */
/* (2026-10-13) the whole HUD floating in the card, no box: its layers in shares of the skin body's square (as in-world, from the owner's screenshot);
   the square sits a little raised so the card starts at the target and ends under the logo bar */
.hud-stack { position: relative; width: 100%; aspect-ratio: 1 / .76; margin: 0 0 4px; }
.hud-sq { position: absolute; left: 0; top: -25%; width: 100%; aspect-ratio: 1; }
.hud-sq img { position: absolute; display: block; max-width: none; }
.hud-sq .hud-l-full { left: 0; top: 0; width: 100%; height: 100%; }
.hud-sq .hud-l-orb { left: 26.1%; top: 33.4%; width: 47.3%; }
.hud-sq .hud-l-target { left: 42.3%; top: 19.7%; width: 14.6%; }
.hud-sq .hud-l-health { left: 13.6%; top: 23.1%; width: 14.3%; height: 33.9%; }
.hud-sq .hud-l-mana { left: 72.2%; top: 23.1%; width: 14.3%; height: 33.9%; scale: -1 1; }
.hud-sq .hud-l-logo { left: 20%; top: 80.5%; width: 60%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
/* (2026-10-13, the owner: "make it the EXACT shape that I showed you. It will be under the hud skin") the flames cut from the owner's own screenshot of the
   HUD and placed where they stand in it, under the skin's body */
.hud-sq .hud-l-health { left: 13.4%; top: 24%; width: 14.96%; height: 33.2%; }
.hud-sq .hud-l-mana { left: 71.3%; top: 24.2%; width: 14.96%; height: 33%; scale: 1 1; }
/* (2026-10-13, the owner: "mana tube is sticking out from under" / "make the hud images bigger") the skins' bodies sit 5 px left of the square's
   middle (their horns' tips mirror round 282.5 of 575), so the mana tube mirrors the health tube round that line; the HUD a fifth bigger in its
   card (the square 120% of the card's width, the stack as tall as the target to the logo) */
.hud-sq .hud-l-mana { left: 69.9%; }
.hud-stack { aspect-ratio: 1 / .89; }
.hud-sq { left: -10%; width: 120%; top: -25.6%; }
/* (2026-10-13, the owner: "it should be 3 columns and the hud images bigger") three skins a row (two, then one, on narrow screens); the HUD's
   square 126% of the card's width so its art nearly fills it */
.hud-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .hud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hud-grid { grid-template-columns: minmax(0, 1fr); } }
.hud-stack { aspect-ratio: 1 / .93; }
.hud-sq { left: -13%; width: 126%; top: -25.7%; }
/* The character tabs in two rows (2026-10-13, the owner: "make the tabs 2 rows as they are getting too many"): 5 to a row on wide screens, 4 on
   smaller ones, 2 on phones; every tab keeps its lines (the bar's own bottom line is left to the tabs) */
.char-tab-bar { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); border-bottom: 0; }
.char-tab-bar .board-tab, .char-tab-bar .board-tab:last-child { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.char-tab-bar .board-tab:nth-child(5n) { border-right: 0; }
@media (max-width: 1100px) {
	.char-tab-bar { grid-template-columns: repeat(4, 1fr); }
	.char-tab-bar .board-tab:nth-child(5n) { border-right: 1px solid var(--line); }
	.char-tab-bar .board-tab:nth-child(4n) { border-right: 0; }
}
@media (max-width: 560px) {
	.char-tab-bar { grid-template-columns: 1fr 1fr; }
	.char-tab-bar .board-tab:nth-child(n) { border-right: 1px solid var(--line); }
	.char-tab-bar .board-tab:nth-child(2n) { border-right: 0; }
}
/* Blacksmith Storage (2026-10-13): the tab (partials/bsstorage.php) and the floating menu beside an item (assets/js/bsstorage.js) */
.bs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 18px; }
.bs-head h3 { margin: 0 0 4px; font: 700 1.15rem var(--f-head); color: #f1e2c4; }
.bs-head p { margin: 0; color: var(--ink-soft); max-width: 62ch; }
.bs-head .bs-where { padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .25); font-size: .9rem; color: var(--muted); }
.bs-where span { color: #b0563c; }
.bs-where.is-here { border-color: rgba(127, 209, 139, .4); color: #cfe9d3; }
.bs-where.is-here span { color: #7fd18b; }
.bs-note { margin-top: 14px; font-size: .86rem; color: var(--muted); }
.bs-flash { margin: 0 0 14px; padding: 9px 14px; border-left: 3px solid #7fd18b; background: rgba(127, 209, 139, .08); color: #e3f2e5; }
.bs-flash.is-error { border-left-color: #e07a6a; background: rgba(224, 122, 106, .08); color: #f4dcd7; }
.bs-menu { position: absolute; z-index: 950; width: min(280px, calc(100vw - 20px)); padding: 12px; border: 1px solid rgba(214, 170, 82, .55); border-radius: 10px;
	background: linear-gradient(180deg, #1d1612, #110c0a); box-shadow: 0 14px 34px rgba(0, 0, 0, .7), 0 0 14px rgba(214, 170, 82, .18); animation: bsMenuIn .16s ease-out; }
@keyframes bsMenuIn { from { opacity: 0; transform: translateY(-4px); } }
.bs-menu-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bs-menu-head img { flex: none; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.bs-menu-head small { display: block; font: 700 .66rem var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--ember); }
.bs-menu-head b { display: block; font: 700 .95rem/1.25 var(--f-head); color: #f3e2b6; }
.bs-menu-head span { display: block; font-size: .85rem; color: var(--muted); }
.bs-menu .bs-take { width: 100%; justify-content: center; }
.bs-menu .bs-take:disabled { opacity: .5; cursor: not-allowed; }
.bs-menu-note { margin: 8px 0 0; font-size: .82rem; line-height: 1.35; color: #e0a090; }
@media (prefers-reduced-motion: reduce) { .bs-menu { animation: none; } }
/* Blacksmith Storage's filters (2026-10-13): Type, Metal and Piece, one row each */
.bs-filters { display: grid; gap: 8px; margin: 0 0 18px; }
.bs-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bs-filter-label { flex: none; width: 54px; font: 700 .68rem var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.bs-filter .filter-chips { margin: 0; }
.bs-grid .inv-slot[hidden] { display: none; }
@media (max-width: 560px) { .bs-filter { gap: 6px; } .bs-filter-label { width: 100%; } }
/* The Armory and Jewelry as icons (2026-10-13): a hover card with the details above the item, "Worn" on what is worn, red when broken (0 durability) */
.eq-grid { margin-bottom: 26px; }
.eq-item { overflow: visible; }
.eq-item:hover, .eq-item:focus-within { z-index: 6; }
.eq-worn-tag { position: absolute; top: 7px; left: 8px; padding: 1px 6px; border: 1px solid rgba(214, 170, 82, .5); border-radius: 3px; font: 700 .58rem var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--ember-2); background: rgba(0, 0, 0, .45); }
.eq-broken-tag { position: absolute; top: 7px; right: 8px; min-width: 18px; padding: 1px 5px; border-radius: 9px; font: 700 .7rem/1.3 var(--f-head); color: #fff; background: #b3261e; box-shadow: 0 0 8px rgba(224, 40, 30, .6); }
.eq-item.is-broken { border-color: rgba(214, 60, 50, .75); background: radial-gradient(ellipse at 50% 30%, rgba(160, 30, 24, .35), rgba(30, 6, 6, .6)); box-shadow: inset 0 0 14px rgba(200, 40, 30, .35); }
.eq-item.is-broken img { filter: sepia(.6) saturate(2.4) hue-rotate(-28deg) brightness(.82); }
.eq-item.is-broken .inv-name { color: #f0a49a; }
.eq-item.is-broken:hover { border-color: #e0584c; }
.eq-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 7; width: 230px; margin-left: -115px; padding: 10px 12px; border: 1px solid rgba(214, 170, 82, .55); border-radius: 8px;
	background: linear-gradient(180deg, #1d1612, #100b09); box-shadow: 0 10px 26px rgba(0, 0, 0, .7); text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; }
.eq-item:hover .eq-tip, .eq-item:focus-within .eq-tip { opacity: 1; visibility: visible; transform: none; }
.eq-tip > b { display: block; font: 700 .9rem/1.25 var(--f-head); color: #f3e2b6; }
.eq-tip > small { display: block; margin-bottom: 6px; font: 700 .64rem var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.eq-tip-row { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; color: var(--muted); }
.eq-tip-row b { color: #e9dcc0; } .eq-tip-row b.is-bad { color: #ff7b6e; } .eq-tip-row code { font-size: .78rem; color: var(--ink-soft); }
.eq-tip-gems { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.eq-tip-gem { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: .82rem; color: var(--muted); }
.eq-tip-gem.has-gem { color: #e9dcc0; } .eq-tip-gem img { width: 16px; height: 16px; }
.eq-tip-bonus { display: block; margin: 2px 0 4px; font-size: .82rem; line-height: 1.3; color: #cfe0b8; }
.eq-slot.is-broken .eq-box { border-color: rgba(214, 60, 50, .8); box-shadow: inset 0 0 12px rgba(200, 40, 30, .45); }
.eq-slot.is-broken .eq-box img { filter: sepia(.6) saturate(2.4) hue-rotate(-28deg) brightness(.82); }
.eq-slot.is-broken strong { color: #f0a49a; }
@media (hover: none) { .eq-tip { display: none; } }
/* Blacksmith Storage: bigger counts (2026-10-13, the owner), and the note that identical items share one entry */
.bs-grid .bs-amount { top: 6px; right: 6px; padding: 2px 8px; border: 1px solid rgba(214, 170, 82, .55); border-radius: 12px; background: rgba(10, 6, 4, .82); font: 700 1.15rem/1.2 var(--f-head); color: #f3d48a; text-shadow: 0 0 6px rgba(240, 190, 90, .45); }
.bs-head .bs-group-note { margin-top: 6px; font-size: .9rem; color: var(--muted); }
/* Crafting Storage: the card after taking an item out (2026-10-13, the owner: the bonuses and gem slots, "a floating div with all the details") */
.bs-got { position: fixed; inset: 0; z-index: 990; display: grid; place-items: center; padding: 16px; background: rgba(4, 2, 2, .62); animation: bsGotFade .18s ease-out; }
.bs-got-card { position: relative; width: min(340px, 100%); padding: 22px 22px 18px; border: 1px solid rgba(214, 170, 82, .6); border-radius: 12px; text-align: center;
	background: radial-gradient(ellipse at 50% 0%, rgba(214, 170, 82, .16), transparent 60%), linear-gradient(180deg, #1f1712, #0f0a08);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .75), 0 0 22px rgba(214, 170, 82, .2); animation: bsGotIn .24s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes bsGotFade { from { opacity: 0; } }
@keyframes bsGotIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.bs-got-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(214, 170, 82, .5); border-radius: 50%;
	background: rgba(0, 0, 0, .5); color: #f3e2b6; font: 400 20px/1 var(--f-head); cursor: pointer; }
.bs-got-x:hover, .bs-got-x:focus-visible { border-color: #e0b85c; background: rgba(214, 170, 82, .18); }
.bs-got-kicker { display: block; margin-bottom: 8px; font: 700 .66rem var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #7fd18b; }
.bs-got-card img { display: block; margin: 0 auto 6px; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); }
.bs-got-card h4 { margin: 0; font: 700 1.15rem/1.25 var(--f-head); color: #f3e2b6; }
.bs-got-kind { margin: 2px 0 12px; font: 700 .68rem var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--ember); }
.bs-got-bonus { margin: 0 0 10px; padding: 9px 12px; border: 1px solid rgba(207, 224, 184, .25); border-radius: 8px; background: rgba(120, 160, 90, .08); font-size: .92rem; line-height: 1.35; color: #dcebc8; }
.bs-got-bonus small { display: block; margin-bottom: 3px; font: 700 .62rem var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.bs-got-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 2px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: .9rem; color: var(--muted); text-align: left; }
.bs-got-row b { display: inline-flex; align-items: center; gap: 8px; color: #e9dcc0; }
.bs-got-row b.is-rare { color: #f3d48a; text-shadow: 0 0 6px rgba(240, 190, 90, .45); }
.bs-got-row code { font-size: .82rem; color: var(--ink-soft); }
.bs-got-slots { display: inline-flex; gap: 4px; }
.bs-got-slots i { width: 11px; height: 11px; border: 1px solid rgba(214, 170, 82, .7); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a2a1a, #0c0806); }
@media (prefers-reduced-motion: reduce) { .bs-got, .bs-got-card { animation: none; } }
/* Durability on the Armory and Jewelry icons as the backpack shows it (2026-10-13, the owner): "D" and the percent left */
.eq-dura-tag { position: absolute; top: 7px; right: 8px; padding: 1px 5px; border-radius: 3px; font: 700 .72rem/1.2 var(--f-head); letter-spacing: .04em; color: #f1ead8; background: rgba(0, 0, 0, .55); text-shadow: 0 1px 2px #000; }
.eq-broken-tag { padding: 1px 6px; border-radius: 3px; letter-spacing: .04em; }
/* The Armory and Jewelry icons keep the backpack's padding and centred names (2026-10-13): the old table's .eq-open link style (no padding, left
   text, underline on hover) must not reach the icon buttons */
.eq-item .eq-open { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; height: 100%; padding: 14px 8px 12px; text-align: center; }
.eq-item .eq-open:hover, .eq-item .eq-open:focus-visible { color: inherit; text-decoration: none; }
.eq-item .inv-name { max-width: 100%; overflow-wrap: anywhere; }
/* Feeding a Shard (2026-10-13, the owner; assets/js/shardfeed.js): the button on an Equipment card and in a Crafting Storage menu, and the pop-up
   with the three Shards (each tinted: fire, light, ethereal), the amount and the result */
.eqd-feed { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.eqd-feed .eqd-note { text-align: center; }
.bs-menu .bs-feed { width: 100%; justify-content: center; margin-top: 8px; }
.ec-modal-feed .ec-modal-box { width: min(560px, calc(100vw - 24px)); }
.sf { --sf-c: 233, 183, 101; }
.sf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sf-head img { flex: none; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7)); }
.sf-head small { display: block; font: 700 .64rem var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }
.sf-head .ec-modal-title { margin: 2px 0 2px; text-align: left; }
.sf-sub { margin: 0; font-size: .9rem; color: var(--muted); }
.sf-sub b { color: #f1e2c4; }
.sf-note, .sf-limit { margin: 6px 0 10px; font-size: .86rem; line-height: 1.4; color: var(--muted); }
.sf-warn { margin: 6px 0 10px; padding: 8px 12px; border-left: 3px solid #e07a6a; background: rgba(224, 122, 106, .08); color: #f4dcd7; font-size: .9rem; }
.sf-step { margin: 14px 0 8px; font: 700 .7rem var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #e9cf95; }
.sf-shards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sf-shard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border: 1px solid rgba(var(--sf-c), .35); border-radius: 10px;
	background: radial-gradient(ellipse at 50% 18%, rgba(var(--sf-c), .16), rgba(10, 6, 4, .75) 70%); color: #e9dcc0; font: inherit; text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s; }
.sf-shard.is-fire, .sf-done.is-fire { --sf-c: 255, 140, 32; }   /* Fire: orange; Light: light blue; Ethereal: dark green (2026-10-13, the owner) */
.sf-shard.is-light, .sf-done.is-light { --sf-c: 125, 205, 255; }
.sf-shard.is-ethereal, .sf-done.is-ethereal { --sf-c: 44, 150, 78; }
.sf-shard:hover:not(:disabled) { border-color: rgba(var(--sf-c), .75); transform: translateY(-1px); }
.sf-shard.is-on { border-color: rgb(var(--sf-c)); box-shadow: 0 0 0 1px rgb(var(--sf-c)), 0 0 18px rgba(var(--sf-c), .4); }
.sf-shard:disabled { cursor: not-allowed; opacity: .5; filter: saturate(.5); }
.sf-shard b { font: 700 .86rem/1.15 var(--f-head); color: #f6ead0; }
.sf-shard small { font-size: .74rem; color: var(--muted); }
.sf-lv { font-size: .8rem; color: rgb(var(--sf-c)); }
.sf-active { position: absolute; top: 6px; right: 7px; padding: 1px 5px; border: 1px solid rgba(var(--sf-c), .6); border-radius: 3px; font: 700 .52rem var(--f-head); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--sf-c)); }
.sf-gem { width: 34px; height: 44px; filter: drop-shadow(0 0 8px rgba(var(--sf-c), .55)); }
.sf-gem-body { fill: rgba(var(--sf-c), .85); stroke: rgba(255, 255, 255, .5); stroke-width: .8; }
.sf-gem-face { fill: rgba(0, 0, 0, .22); }
.sf-gem-shine { fill: rgba(255, 255, 255, .6); }
.sf-shard.is-on .sf-gem { animation: sfGlow 1.8s ease-in-out infinite; }
@keyframes sfGlow { 50% { filter: drop-shadow(0 0 14px rgba(var(--sf-c), .95)); } }
.sf-bar { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sf-bar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--sf-c), .55), rgb(var(--sf-c))); }
.sf-bar.is-big { height: 8px; margin: 12px 0 4px; }
.sf-amount { display: flex; align-items: center; gap: 8px; }
.sf-amount input { width: 110px; padding: 8px 10px; border: 1px solid rgba(233, 183, 101, .5); border-radius: 6px; background: rgba(0, 0, 0, .45); color: #f6ead0; font: 700 1.1rem var(--f-head); text-align: center; }
.sf-amount input:focus { outline: none; border-color: #f0c574; box-shadow: 0 0 0 2px rgba(240, 197, 116, .25); }
.sf-step-btn { width: 36px; height: 36px; border: 1px solid rgba(233, 183, 101, .5); border-radius: 50%; background: rgba(0, 0, 0, .4); color: #f3e2b6; font: 700 1.2rem/1 var(--f-head); cursor: pointer; }
.sf-step-btn:hover { border-color: #f0c574; background: rgba(233, 183, 101, .15); }
.sf-preview { margin: 8px 0 0; padding: 8px 12px; border: 1px solid rgba(207, 224, 184, .25); border-radius: 8px; background: rgba(120, 160, 90, .08); color: #dcebc8; font-size: .92rem; }
.sf-preview b { color: #f1ffe6; }
.sf-up { font-style: normal; font-weight: 700; color: #ffd36b; }
.sf-msg { margin: 10px 0 0; }
.sf-msg.is-bad { padding: 8px 12px; border-left: 3px solid #e07a6a; background: rgba(224, 122, 106, .08); color: #f4dcd7; }
.sf .ec-modal-actions { margin-top: 16px; }
.sf-done { text-align: center; }
.sf-done .sf-gem { width: 54px; height: 70px; margin: 0 auto 4px; display: block; }
.sf-done .ec-modal-title { text-align: center; }
.sf-done-msg { margin: 8px 0 0; color: #e9dcc0; }
.sf-lvup { margin: 0; font: 700 1.3rem var(--f-head); letter-spacing: .08em; color: #ffd36b; text-shadow: 0 0 12px rgba(255, 200, 90, .7); }
.sf-done.is-levelup .sf-gem { animation: sfGlow 1.2s ease-in-out infinite; }
@media (max-width: 520px) { .sf-shards { grid-template-columns: 1fr; } .sf-shard { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; } .sf-shard .sf-bar { order: 9; } }
@media (prefers-reduced-motion: reduce) { .sf-shard.is-on .sf-gem, .sf-done.is-levelup .sf-gem { animation: none; } }
.bs-menu .bs-feed:disabled { opacity: .5; cursor: not-allowed; }   /* off the region (2026-10-14) */