/* update test 2026-10-10T05:34:04Z */
:root {
  --bg: #07040d; --bg2: rgba(14, 7, 26, .72); --panel: rgba(19, 10, 35, .74); --line: rgba(160, 110, 240, .26); --text: #ede6f8; --muted: #a698bf;
  --accent: #b784ff; --accent2: #8350f0; --glow: #9b5cff; --gold: #e8bd62;
  --hp: #d0506a; --hp-enemy: #7d3fd1; --exp: #6e8dff; --good: #6fd68a; --bad: #ec6a7a;
  --r0: #b8b8b8; --r1: #4ccf63; --r2: #4a9dff; --r3: #c07bff; --r4: #ff9f2e;
  --r5: #9de3b0; --r6: #c77dff;   /* Abyssal Touched (purple-green), Abyssal Infused (purple, red pulse) */
  --radius: 12px;
  --warp: 18px 6px 18px 6px;   /* corners dragged toward the abyss */
  --btn: rgba(44, 24, 78, .75);
  --title: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --serif: "Marcellus", Georgia, serif;   /* headings: carved-Roman look with real lower case (Cinzel is capitals only) */
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); }
body { min-height: 100vh; background: transparent; overflow-x: hidden; overflow-x: clip; }
/* the abyss: a fixed layer so it also works on mobile */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: #07040d url(abyss.webp) center 45% / cover no-repeat; }
@keyframes pull { 0%, 100% { opacity: .85; filter: drop-shadow(0 0 3px #9b5cff88); } 50% { opacity: 1; filter: drop-shadow(0 0 7px #b784ffcc); } }
@media (prefers-reduced-motion: reduce) { .bubble.ready, .ctab.unread { animation: none; } }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.right { float: right; }
h1, h2, h3, h4 { margin: 0 0 10px; font-weight: 600; }
h2, h3 { font-family: var(--serif); }
h3 { font-size: 15px; letter-spacing: .04em; color: #d9c6ff; text-shadow: 0 0 10px #8350f055; }
h4 { font-size: 13px; margin-top: 16px; color: var(--muted); }
input, select, textarea { background: rgba(10, 5, 20, .8); color: var(--text); border: 1px solid var(--line); border-radius: 8px 3px 8px 3px; padding: 7px 9px; font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent2); outline-offset: 0; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent2); }

.btn { background: var(--btn); color: var(--text); border: 1px solid var(--line); border-radius: 12px 4px 12px 4px; padding: 8px 14px; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.btn:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 12px #8350f055; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: radial-gradient(120% 140% at 30% 0%, #b98bff, #6a33d8 55%, #3b1685); color: #fff; border: 1px solid #c9a6ff66; font-weight: 600; text-shadow: 0 1px 2px #0008; box-shadow: 0 0 14px #7b43ff55, inset 0 0 10px #ffffff22; }
.btn.primary:hover:not(:disabled) { box-shadow: 0 0 20px #9b5cffaa, inset 0 0 10px #ffffff33; }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 9px; font-size: 12.5px; }
.pill { font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: rgba(10, 5, 20, .5); }

/* glassy abyss panels */
.panel, .auth-card, .modal-card, .levelbar, .class-card {
  background: linear-gradient(160deg, rgba(40, 20, 72, .5), rgba(12, 6, 24, .66) 55%, rgba(24, 10, 44, .72));
  border: 1px solid var(--line);
  border-radius: var(--warp);
  box-shadow: 0 10px 40px #000a, inset 0 0 30px rgba(120, 60, 220, .08);
  -webkit-backdrop-filter: blur(5px) saturate(1.2); backdrop-filter: blur(5px) saturate(1.2);
}
.panel, .auth-card, .levelbar, .class-card, .modal-card { position: relative; }

/* title */
.title-stack { display: grid; justify-items: center; line-height: .95; font-family: var(--title); font-weight: 700; letter-spacing: .04em; }
.title-stack > span { display: block; }
.title-stack .t1 { color: #e6d6ff; }
.title-stack .t2 { display: flex; gap: 1.6em; font-size: .72em; color: #c6a8ff; margin: .12em 0 .05em; }
.title-stack .t3 {
  font-size: 1.45em; font-weight: 900; letter-spacing: .08em;
  background: linear-gradient(180deg, #ffffff 5%, #e2cfff 40%, #a974ff 75%, #7036e0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px #8b4dffaa);
}
.title-stack .t1, .title-stack .t2 { text-shadow: 0 0 12px #8350f099, 0 2px 3px #000; }

/* auth */
.screen { max-width: 1200px; margin: 0 auto; padding: 16px; }
#auth { display: grid; place-items: center; min-height: 90vh; }
.auth-card { width: min(390px, 100%); padding: 28px; }
.logo { font-size: 34px; text-align: center; margin: 4px 0 10px; }
.tagline { text-align: center; color: var(--muted); margin: 0 0 20px; font-style: italic; }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tab { flex: 1; background: none; border: none; border-bottom: 2px solid var(--line); color: var(--muted); padding: 8px; cursor: pointer; font: inherit; }
.tab.active { color: var(--text); border-color: var(--accent); }
#authForm label { display: grid; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
#authForm .btn { width: 100%; margin-top: 4px; }
.error { color: var(--bad); min-height: 1.2em; font-size: 13px; }

/* class pick */
#classPick { text-align: center; padding-top: 40px; }
#classPick h2 { text-shadow: 0 0 14px #8350f0aa, 0 2px 3px #000; }
.class-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; margin: 24px 0; text-align: left; }
.class-card { padding: 18px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.class-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 40px #000a, 0 0 22px #8350f066; }
.class-card h3 { font-size: 20px; margin-bottom: 2px; }
.class-card .role { color: var(--accent); font-size: 12.5px; }
.class-card p { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.class-card .passive { color: var(--text); }
.class-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; margin: 10px 0 0; }
.class-card dt { color: var(--muted); }
.class-card dd { margin: 0; }
.meter { height: 6px; background: rgba(0, 0, 0, .5); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #5b2bb5, var(--accent)); }

/* game */
.topbar { display: flex; align-items: center; gap: 14px; padding: 6px 0 12px; flex-wrap: wrap; }
.brand { font-size: 15px; padding-right: 6px; }
.hero-id { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
#heroName { font-weight: 600; font-family: var(--serif); font-size: 17px; text-shadow: 0 0 10px #8350f088, 0 1px 2px #000; }
.gold { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold); text-shadow: 0 1px 2px #000; }
.purse { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ashards { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #e2b8ff; text-shadow: 0 1px 2px #000, 0 0 8px #9b5cff88; }
/* currency icons (public/icons/, 128 px, transparent): the Abyssal Shard crystal and the BITA gold piece */
.ashard-ico { display: inline-block; flex: none; width: 18px; height: 18px; vertical-align: -4px; margin: 0 1px;
  background: url(icons/ashard.webp) center / contain no-repeat; filter: drop-shadow(0 0 5px rgba(180, 110, 255, .95)); }
.coin { display: inline-block; flex: none; width: 17px; height: 17px; vertical-align: -3px;
  background: url(icons/coin.webp) center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(232, 189, 98, .45)); }
.purse .ashard-ico { width: 22px; height: 22px; }
.purse .coin { width: 20px; height: 20px; }

.wip-banner { position: relative; z-index: 5; max-width: 980px; margin: 10px auto 4px; padding: 7px 18px; text-align: center;
  font-size: 13px; line-height: 1.45; color: #f6d36b; background: rgba(60, 40, 5, .55); border: 1px solid #c9a23c88; border-radius: 12px;
  text-shadow: 0 0 8px #e8b95a55; }
.wip-banner b { color: #ffe08a; }
@media (max-width: 600px) { .wip-banner { margin: 8px 10px 4px; font-size: 12px; padding: 6px 12px; } }
.sbuff-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: -2px 0 12px; }
.sbuff-bar.hidden { display: none; }
.admin-sbuff .sb-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.admin-sbuff .sb-row { margin: 4px 0; }
.admin-sbuff #sbList { margin: 6px 0; flex-basis: 100%; }
.sbuff-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 14px; border-radius: 999px;
  color: #ffe9a8; background: linear-gradient(90deg, rgba(120, 70, 10, .55), rgba(70, 30, 120, .55)); border: 1px solid #e8b95a;
  box-shadow: 0 0 10px #e8b95a44, inset 0 0 8px #ffd27a22; animation: sbuffglow 3s ease-in-out infinite; cursor: default; }
.sbuff-chip .sb-star { color: #ffd27a; }
.sbuff-chip .sb-fx { color: #fff3cf; }
.sbuff-chip .sb-left { color: #d9c7a0; font-variant-numeric: tabular-nums; }
.sbuff-chip.paused { filter: saturate(.3); opacity: .7; animation: none; }
@keyframes sbuffglow { 0%, 100% { box-shadow: 0 0 6px #e8b95a33; } 50% { box-shadow: 0 0 16px #e8b95a88; } }
@media (prefers-reduced-motion: reduce) { .sbuff-chip { animation: none; } }
@media (max-width: 600px) {
  .sbuff-bar { gap: 6px; }
  .sbuff-chip { flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: 12px; padding: 5px 12px; border-radius: 14px; text-align: center; width: 100%; }
  .sbuff-chip b { white-space: nowrap; }
}
.levelbar { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 10px 16px; margin-bottom: 18px; }
.lvl b { font-size: 20px; font-family: var(--serif); }
.bar { position: relative; height: 18px; background: rgba(0, 0, 0, .55); border-radius: 9px 3px 9px 3px; overflow: hidden; border: 1px solid var(--line); }
.bar > div { height: 100%; width: 0; transition: width .25s linear; }
.bar span { position: absolute; inset: 0; font-size: 11.5px; display: grid; place-items: center; text-shadow: 0 1px 2px #000; }
.bar.exp > div { background: linear-gradient(90deg, #3a1d8c, #6e5cff, #b784ff); box-shadow: 0 0 10px #8b6cff88; }
.bar.hp > div { background: linear-gradient(90deg, #7a1f3b, var(--hp)); }
.bar.hp.enemy > div { background: linear-gradient(90deg, #2d0f5c, var(--hp-enemy)); }

.grid { display: grid; grid-template-columns: minmax(250px, 0.85fr) 1.25fr 1.1fr; gap: 20px 0; align-items: start; }
.col-mid { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel { padding: 16px; min-width: 0; }
.mtabs { display: none; }

.zone { font-family: var(--serif); font-size: 17px; color: var(--accent); margin-bottom: 12px; text-shadow: 0 0 10px #8350f088; }
.combatants { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.combatants > * { min-width: 0; }
.cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cname { font-size: 13px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs { color: var(--muted); font-size: 12px; padding-bottom: 2px; }
.fight-status { min-height: 1.4em; margin: 10px 0; font-size: 13px; }
.enemy-level { background: var(--bg2); border: 1px solid rgba(160, 110, 240, .14); border-radius: 12px 4px 12px 4px; padding: 10px; }
.enemy-level .label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.stepper { display: flex; gap: 5px; align-items: center; }
.stepper input { width: 70px; text-align: center; }
#enemyHint { margin-top: 6px; }
.follow { display: flex; gap: 6px; align-items: center; margin-top: 8px; color: var(--muted); }
.log { list-style: none; margin: 0; padding: 0; font-size: 12.5px; max-height: 220px; overflow: auto; }
.log li { padding: 3px 0; border-bottom: 1px solid rgba(160, 110, 240, .1); }
.log .lv { color: var(--accent); }
.log .dd { color: var(--bad); }

.slots { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; }   /* every gear slot the same size */
.slot { background: var(--bg2); border: 1px solid rgba(160, 110, 240, .16); border-radius: 12px 4px 12px 4px; padding: 8px; font-size: 12.5px; min-height: 58px; display: flex; flex-direction: column; gap: 3px; }
.slot .sname { color: var(--muted); font-size: 11.5px; }
.slot .iname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.slot[data-tip-eq] { display: block; }
.slot[data-tip-eq] > * + * { margin-top: 3px; }
.slot-head > span { display: block; }
.slot-head .iname { margin-top: 3px; }
.slot-head .iname { white-space: normal; overflow: visible; }
.slot-corner { float: right; margin: 0 0 4px 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.slot-stats { display: block; }
.slot-corner .enh-btn { white-space: nowrap; }
.socks { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-right: 2px; }
.sock { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.sock.full { color: var(--jc); }
.sock i { width: 8px; height: 8px; flex: none; transform: rotate(45deg); border: 1px solid rgba(200, 180, 240, .55); display: block; border-radius: 1px; }
.sock.full i { background: var(--jc); border-color: var(--jc); box-shadow: 0 0 6px var(--jc); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 12px; font-size: 13px; }
.stats div { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(160, 110, 240, .18); padding: 2px 0; }
.stats span:first-child { color: var(--muted); }
.passive { font-size: 12.5px; color: var(--muted); margin-top: 12px; }

.bag-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; align-items: center; }
.bag-tools select { padding: 3px 6px; }
.bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; max-height: 520px; overflow: auto; }
.item { background: var(--bg2); border: 1px solid rgba(160, 110, 240, .16); border-left-width: 3px; border-radius: 10px 3px 10px 3px; padding: 6px 7px; font-size: 12px; cursor: pointer; position: relative; }
.item:hover { box-shadow: 0 0 10px #8350f044; }
.item.sel { outline: 2px solid var(--accent); }
.item .iname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .meta { color: var(--muted); font-size: 11px; }
.item .up { color: var(--good); font-weight: 700; }
.item.locked { opacity: .6; }
.r0 { color: var(--r0); border-left-color: var(--r0) !important; } .r1 { color: var(--r1); border-left-color: var(--r1) !important; }
.r2 { color: var(--r2); border-left-color: var(--r2) !important; } .r3 { color: var(--r3); border-left-color: var(--r3) !important; }
.r4 { color: var(--r4); border-left-color: var(--r4) !important; }
.r5 { color: var(--r5); border-left-color: var(--r5) !important; text-shadow: 0 0 6px rgba(155, 93, 229, .8); }
.r6 { color: var(--r6); border-left-color: #ff3b4e !important; text-shadow: 0 0 6px rgba(199, 125, 255, .7); }
.item .actions { display: flex; gap: 4px; margin-top: 5px; }

.lb { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.lb th, .lb td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.lb th { color: var(--muted); font-weight: 500; }
.lb tr.me td { color: var(--accent); }
.rebirth-card { background: var(--bg2); border: 1px solid rgba(160, 110, 240, .16); border-radius: 14px 5px 14px 5px; padding: 12px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.6; }
.rebirth-card b { color: var(--accent); }

.tooltip.pinned { transform-origin: top left; max-width: min(560px, calc(100vw - 24px)); }
.tooltip.pinned.wide { max-width: min(900px, calc(100vw - 24px)); }
.has-cap { cursor: help; }
.recipe-chip { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px; }
.recipe-chip.unknown { opacity: .6; }
.lb-click { cursor: pointer; }
.lb-click:hover td { background: rgba(155, 92, 255, .1); }
/* tooltips sit above everything — windows (60), toasts (70) and the update banner (100) */
.tooltip { position: fixed; z-index: 200; background: rgba(12, 6, 24, .99); border: 1px solid var(--line); border-radius: 12px 4px 12px 4px; padding: 10px 12px; font-size: 12.5px; pointer-events: none; max-width: 260px; box-shadow: 0 8px 24px #000c, 0 0 14px #8350f033; }
.tooltip .t-name { font-weight: 700; margin-bottom: 4px; }
.tooltip.mkt-preview { position: static; pointer-events: auto; max-width: 360px; margin-top: 10px; }
.tooltip.mkt-preview.wide { max-width: 760px; }
.tooltip.long { max-width: min(460px, calc(100vw - 24px)); line-height: 1.5; }   /* long explanations (ⓘ links) get a wider box */
.tooltip .diff.pos { color: var(--good); } .tooltip .diff.neg { color: var(--bad); }
.modal { position: fixed; inset: 0; background: radial-gradient(circle at 50% 47%, rgba(20, 5, 40, .55), rgba(0, 0, 0, .8)); display: grid; place-items: center; z-index: 60; padding: 24px; }
.modal-card { padding: 24px; width: min(520px, 100%); background: linear-gradient(160deg, rgba(40, 20, 72, .9), rgba(12, 6, 24, .96) 55%, rgba(24, 10, 44, .96)); }
.modal-card ul { padding-left: 18px; line-height: 1.7; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(50, 14, 30, .95); border: 1px solid var(--bad); color: var(--text); padding: 10px 16px; border-radius: 12px 4px 12px 4px; z-index: 70; font-size: 13.5px; }
.toast.good { background: rgba(18, 40, 28, .95); border-color: var(--good); }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .mtabs { display: flex; gap: 4px; margin-bottom: 14px; position: sticky; top: 0; background: rgba(7, 4, 13, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 4px 0; z-index: 5; }
  .mtab { flex: 1; background: var(--btn); border: 1px solid var(--line); color: var(--muted); padding: 9px; border-radius: 12px 4px 12px 4px; font: inherit; }
  .mtab.active { color: var(--text); border-color: var(--accent); box-shadow: 0 0 10px #8350f055; }
  .grid .panel { display: none; }
  .grid .panel.show { display: block; }
  .col-mid { gap: 0; }
  .pane-chat .chat-body { height: 55vh; }
  .levelbar { grid-template-columns: auto 1fr; }
  .levelbar #expRate { grid-column: 1 / -1; }
  .topbar .pill { display: none; }
  body::before { background-position: center 40%; }
}

.packs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.pack-btn { padding: 6px 2px; }
.pack-btn { background: var(--btn); color: var(--text); border: 1px solid var(--line); border-radius: 10px 3px 10px 3px; padding: 5px 2px; font: inherit; cursor: pointer; display: grid; gap: 1px; text-align: center; }
.pack-btn b { font-size: 14px; }
.pack-btn span { font-size: 10.5px; color: var(--muted); }
.pack-btn.active { border-color: var(--accent); background: rgba(100, 50, 190, .55); box-shadow: 0 0 12px #8350f066; }
.pack-btn.risky span.win { color: var(--bad); }
.pack-btn:hover { border-color: var(--accent2); }

.patch-notes { display: grid; gap: 10px; margin-bottom: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.patch-note b { display: block; margin: 2px 0 6px; }
.patch-note ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; }
.update-bar { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200; display: flex; flex-direction: column;
  align-items: center; gap: 14px; width: min(520px, calc(100vw - 32px)); padding: 32px 36px 26px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, rgba(70, 30, 120, .98), rgba(20, 8, 40, .98)); border: 1px solid rgba(190, 140, 255, .65);
  box-shadow: 0 0 40px rgba(150, 80, 255, .55), 0 20px 60px rgba(0, 0, 0, .6); animation: updGlow 2.4s ease-in-out infinite; }
.update-bar .upd-title { font-family: var(--serif); font-size: 26px; line-height: 1.25; color: #efdcff; text-shadow: 0 0 14px rgba(190, 140, 255, .6); }
.update-bar .upd-sub { font-size: 16px; color: #d9c8f0; }
.update-bar #updNow { font-size: 17px; padding: 11px 34px; margin-top: 4px; }
.update-bar .upd-left { font-size: 13px; }
@keyframes updGlow { 50% { box-shadow: 0 0 60px rgba(180, 110, 255, .8), 0 20px 60px rgba(0, 0, 0, .6); } }
@media (max-width: 600px) { .update-bar { padding: 24px 20px 20px; gap: 12px; } .update-bar .upd-title { font-size: 21px; } .update-bar .upd-sub { font-size: 14px; } }
/* two-column window layout (Bosses…): side by side on wide screens so windows fit without scrolling */
.win-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 28px; align-items: start; }
@media (min-width: 1000px) { .win-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.info-tip { color: var(--accent); cursor: help; border-bottom: 1px dotted currentColor; margin-left: 8px; white-space: nowrap; }
.guest-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(170, 120, 255, .2); display: grid; gap: 6px; }
.guest-box .btn { width: 100%; }
.guest-box p { margin: 0; }
.guest-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: rgba(150, 150, 170, .2); color: var(--muted); margin-left: 4px; vertical-align: middle; }
.warn.small { color: #f0b36b; font-size: 12.5px; line-height: 1.45; margin: 2px 0 12px; }
.linkish { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
#forgotForm label, #resetForm label, .modal-card label { display: grid; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
#forgotForm .btn, #resetForm .btn { width: 100%; margin-top: 4px; }
.error.ok { color: var(--good); }
.acct-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.modal-card input { width: 100%; }
.modal-card .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

/* top bubbles */
.hero-id { flex-direction: column; align-items: flex-start; gap: 4px; }
.hero-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bubbles { display: flex; gap: 8px; }
/* the menu bar above the level bar */
.menubar { flex-wrap: wrap; justify-content: center; padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--warp);
  background: linear-gradient(180deg, rgba(40, 20, 72, .55), rgba(12, 6, 24, .7)); box-shadow: 0 6px 24px #0008, inset 0 0 24px rgba(120, 60, 220, .08); }
.menubar .bubble { border-radius: 10px; padding: 7px 16px; }
.bubble { position: relative; background: radial-gradient(120% 160% at 50% 120%, rgba(120, 60, 220, .45), rgba(20, 10, 38, .85) 70%); color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font: inherit; font-size: 13.5px; cursor: pointer; box-shadow: 0 4px 14px #0008; transition: border-color .15s, box-shadow .15s; }
.bubble:hover { border-color: var(--accent); box-shadow: 0 0 14px #8350f077; }
.bubble.ready { border-color: var(--accent); box-shadow: 0 0 0 2px #b784ff33, 0 0 16px #9b5cff88; }
.small-bubble { padding: 2px 10px; font-size: 12px; color: var(--muted); }
.bubble-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); margin-right: 6px; vertical-align: 1px; }
/* windows: forms 520px; Guild, Bosses, Professions, Leaderboard, Admin, Account… ("wide") up to 1000px; the Market ("xl") nearly full screen */
.modal-card.wide { width: min(1120px, 94vw); max-height: 92vh; overflow: auto; font-size: 15px; padding: 26px 28px; }
.modal-card.wide.xl { width: min(1440px, 96vw); min-height: min(820px, 86vh); max-height: 94vh; }
.modal { padding: 12px; }
.stats div[data-tip] { cursor: help; }
.auto-eq { display: inline-flex; gap: 8px; align-items: center; }
/* auto-equip rules form */
.rules-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: 13px; }
.rules-grid input[type=range] { width: 160px; }
.rules-sec { margin: 14px 0 6px; font-size: 13px; color: var(--muted); }
.slot-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px 10px; font-size: 13px; }
.mode-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }
.dim { opacity: .45; }
.slot.empty-relic .muted { font-size: 12px; }
@media (max-width: 900px) { .topbar .pill { display: inline-block; } .brand { font-size: 12px; } }
.modal-card .mode-row label, .modal-card .slot-toggles label { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--text); }
.modal-card .rules-grid label { display: block; margin: 0; color: var(--text); }
.modal-card .mode-row input, .modal-card .slot-toggles input, .modal-card .rules-grid input[type=checkbox] { width: auto; }
.modal-card .rules-grid input[type=range] { width: 160px; }
@media (max-width: 600px) {
  .panel::before, .panel::after, .levelbar::before, .levelbar::after, .auth-card::before, .auth-card::after, .class-card::before, .class-card::after, .modal-card:not(.wide)::before, .modal-card:not(.wide)::after { width: 56px; height: 56px; background-size: 56px 56px; }
  .panel::before, .levelbar::before, .auth-card::before, .class-card::before, .modal-card:not(.wide)::before { top: -21px; left: -21px; }
  .panel::after, .levelbar::after, .auth-card::after, .class-card::after, .modal-card:not(.wide)::after { bottom: -21px; right: -21px; }
  .screen { padding: 16px 20px; }
}
/* while you were away */
.away h3 { font-size: 20px; text-align: center; margin-bottom: 2px; }
.away-time { text-align: center; margin: 0 0 14px; }
.away-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.away-tile { background: var(--bg2); border: 1px solid rgba(160, 110, 240, .18); border-radius: 12px 4px 12px 4px; padding: 9px 11px; display: grid; gap: 2px; }
.away-tile span { font-size: 12px; color: var(--muted); }
.away-tile b { font-size: 19px; font-family: var(--serif); color: #e6d6ff; text-shadow: 0 0 10px #8350f066; }
.away-tile small { font-size: 11.5px; color: var(--muted); }
.away-loot { font-size: 13.5px; margin-bottom: 6px; }
.away-best { margin-top: 5px; }
.away-notes { font-size: 13px; margin: 8px 0 14px; }
.away .warn { color: #f0b36b; }
.away .acc { color: var(--accent); }
.away-go { width: 100%; }
.item .down { color: var(--bad); font-weight: 700; }
.item .lines { font-size: 10.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }

/* ---- hero column ---- */
.portrait { position: relative; aspect-ratio: 600 / 366; margin-bottom: 14px; border: 1px solid rgba(183, 132, 255, .35); border-radius: 18px 6px 18px 6px;
  background: #12081f center / cover no-repeat; overflow: hidden; box-shadow: 0 0 24px #6a33d855, inset 0 0 30px #000a; }
.portrait-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; background: linear-gradient(transparent, rgba(6, 2, 12, .9)); }
.portrait-name { font-family: var(--serif); font-size: 17px; text-shadow: 0 0 10px #8350f0, 0 1px 2px #000; }
.portrait-sub { color: #cdbde6; }
.class-art { aspect-ratio: 600 / 366; margin: -18px -18px 12px; border-radius: 18px 6px 0 0; background: #12081f center / cover no-repeat; border-bottom: 1px solid rgba(183, 132, 255, .3); }
.class-card:hover .class-art { filter: brightness(1.12) saturate(1.1); }
.fightlog .lg { padding: 5px 0; border-bottom: 1px solid rgba(160, 110, 240, .12); }
.fightlog .lg-win { color: #e6d6ff; font-weight: 600; }
.fightlog .dd { font-weight: 600; }
.lg-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.lg-sub b { color: var(--text); }
.bn { color: #c38bff; font-size: .86em; margin-left: 4px; }
.bn-note { color: var(--muted); margin: 6px 0 0; }
.stats div span:last-child { white-space: nowrap; }

/* ---- chat + logs ---- */
.chat-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ctab { position: relative; background: var(--btn); color: var(--muted); border: 1px solid var(--line); border-radius: 10px 3px 10px 3px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ctab.active { color: var(--text); border-color: var(--accent); box-shadow: 0 0 10px #8350f055; }
.ctab.unread { color: #fff; border-color: #d7b8ff; animation: tabglow 1.4s ease-in-out infinite; }
@keyframes tabglow { 0%, 100% { box-shadow: 0 0 4px #9b5cff66; background: var(--btn); } 50% { box-shadow: 0 0 16px #c38bffcc; background: rgba(120, 60, 220, .6); } }
.chat-body { height: 300px; overflow: auto; background: rgba(0, 0, 0, .25); border: 1px solid rgba(160, 110, 240, .14); border-radius: 12px 4px 12px 4px; padding: 8px 10px; }
.chat-list { font-size: 13px; line-height: 1.45; }
.chat-msg { padding: 2px 0; word-wrap: break-word; }
.chat-msg .who { color: var(--accent); font-weight: 600; margin-right: 6px; }
.chat-msg .who.me { color: var(--gold); }
.chat-msg .when { color: var(--muted); font-size: 11px; margin-right: 6px; }
.chat-empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
.chat-form { display: flex; gap: 6px; margin-top: 8px; }
.chat-form input { flex: 1; min-width: 0; }
.chat-note { margin: 8px 0 0; }
.log-head { margin: 4px 0 2px; }
.fightlog li { border-bottom: none; padding: 1px 0; }
.fightlog .crit { color: #ffcf6b; font-weight: 700; }
.fightlog .ehit { color: #f0a0b4; }
.fightlog .good { color: var(--good); }
.fightlog .kill { color: var(--accent); }
.mtab { position: relative; }
.mtab-dot { position: absolute; top: 5px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #d7b8ff; box-shadow: 0 0 8px #c38bff; }

/* ---- gear column: equipment above the bag ---- */
.bag-title { margin-top: 18px; }
.bag-group { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); margin: 6px 0 0; border-bottom: 1px solid rgba(160, 110, 240, .18); padding-bottom: 2px; }
.bag { max-height: 560px; }

/* ---- Banishment ready ---- */
.bubble.ready { color: #fff; border-color: #e2ccff; background: radial-gradient(120% 160% at 50% 120%, rgba(190, 120, 255, .9), rgba(60, 20, 120, .95) 75%);
  animation: banishglow 1.6s ease-in-out infinite; }
@keyframes banishglow { 0%, 100% { box-shadow: 0 0 6px #b784ff, 0 0 0 1px #e2ccff55; } 50% { box-shadow: 0 0 26px #d7b8ff, 0 0 0 4px #b784ff55; } }

/* admin page */
.admin-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.admin-bar .tabs { margin: 0; }
.admin-bar input { flex: 1; min-width: 140px; }
.admin-body { max-height: 60vh; overflow: auto; }
.admin-table td { vertical-align: middle; }
.admin-table td:nth-child(3), .admin-table td:nth-child(5), .admin-table td:nth-child(6), .admin-table th { white-space: nowrap; }
.admin-table tr.is-banned td { opacity: .6; }
.admin-group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 2px; margin-bottom: 12px; background: rgba(120, 70, 220, .06); }
.admin-group-head { font-size: 13px; margin-bottom: 6px; line-height: 1.5; }
.admin-weak { font-size: 13px; margin: 4px 0 12px; padding-left: 18px; }
.admin-body code { font-size: 12px; color: var(--accent); }
.ban-tag, .link-tag { font-size: 11px; padding: 1px 7px; border-radius: 99px; margin-left: 4px; }
.ban-tag { background: rgba(255, 80, 110, .18); color: #ff8fa3; }
.link-tag { background: rgba(170, 120, 255, .18); color: var(--accent); }
.btn.danger { border-color: rgba(255, 90, 120, .5); color: #ff9fb1; }
.fine-print { font-size: 11.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.45; }

/* mutes */
.chat-sys { color: var(--muted); font-style: italic; border-left: 2px solid rgba(170, 120, 255, .45); padding-left: 8px; margin: 3px 0; }
.chat-msg .who[data-player], .pname[data-player] { cursor: pointer; }
.chat-msg .who[data-player]:hover, .pname[data-player]:hover { text-decoration: underline; text-underline-offset: 3px; }
.player-menu { position: fixed; z-index: 300; min-width: 170px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: rgba(14, 7, 28, .98); border: 1px solid var(--line); border-radius: 12px 4px 12px 4px; box-shadow: 0 10px 30px #000c, 0 0 14px #8350f033; }
.player-menu .pm-name { font-weight: 700; padding: 4px 10px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--accent); }
.player-menu .pm-item { font: inherit; font-size: 13px; text-align: left; color: var(--text); background: none; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.player-menu .pm-item:hover, .player-menu .pm-item:focus-visible { background: rgba(130, 80, 240, .25); outline: none; }
.player-menu .pm-item.admin { color: #ffb3b3; }
.profile .pf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.profile .pf-name { margin: 0 0 4px; font-size: 24px; }
.profile .pf-sub { color: var(--text); }
.profile .pf-guild { color: var(--gold); }
.profile .pf-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-badge { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pf-badge.online { color: #7fe0a8; border-color: #3f8f63; }
.pf-badge.admin { color: #ffd27a; border-color: #c9a23c; }
.pf-badge.banned { color: #ff8a8a; border-color: #a04040; }
.profile .pf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pf-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(20, 10, 38, .5); }
.pf-stat span { font-size: 12px; color: var(--muted); }
.pf-stat b { font-size: 16px; }
.profile .pf-gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.pf-slot { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(20, 10, 38, .4); cursor: default; }
.pf-slot[data-post-item] { cursor: help; }
.chat-note.chat-muted { color: #ffb4c2; background: rgba(255, 80, 110, .1); border: 1px solid rgba(255, 90, 120, .3); border-radius: 10px; padding: 8px 10px; }
.mute-tag { font-size: 11px; padding: 1px 7px; border-radius: 99px; margin-left: 4px; background: rgba(255, 190, 90, .16); color: #ffcf8a; white-space: nowrap; }
.mute-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.mute-presets .btn.active { border-color: var(--accent); color: var(--accent); }
.admin-actions { white-space: nowrap; }
.admin-actions .btn + .btn { margin-left: 6px; }
#muteForm textarea { width: 100%; resize: vertical; font: inherit; }

/* relic bonuses in the stats panel */
.stat-sub { margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--accent); font-size: 12px; letter-spacing: .04em; }
.stat-none { padding: 2px 0 4px; }

.admin-test { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; padding: 10px 12px;
  border: 1px dashed rgba(181, 101, 255, .35); border-radius: 8px; font-size: 13px; }
.admin-test input[type=number] { width: 80px; margin-left: 6px; }
.admin-test label { display: flex; align-items: center; gap: 4px; }

/* idle timer next to Account */
.acct-row { display: flex; gap: 6px; align-items: center; }
.idle-btn { font-variant-numeric: tabular-nums; }
.idle-btn .idle-ico { display: inline-block; }
.idle-btn:hover .idle-ico { transform: rotate(180deg); transition: transform .3s; }
.idle-btn.low { color: #ffb45e; border-color: rgba(255, 180, 94, .5); }
.idle-btn.stopped { color: #fff; background: rgba(214, 72, 96, .35); border-color: rgba(255, 110, 130, .8); animation: idlePulse 1.6s ease-in-out infinite; }
@keyframes idlePulse { 50% { box-shadow: 0 0 12px rgba(255, 110, 130, .7); } }
/* banishment odds + result */
.keep-odds { margin-top: 12px; }
.keep-odds h4 { margin: 0 0 4px; }
.keep-table td, .keep-table th { padding: 4px 8px; }
.keep-table .jackpot-row td { color: #ffcf6e; }
.shard { color: #9fd6ff; }
.rebirth-card.jackpot { border-color: #ffcf6e; box-shadow: 0 0 18px rgba(255, 207, 110, .35); }
.keep-share { font-size: 1.3em; color: #c9a2ff; }
.kept-list { font-weight: 600; }
/* guild */
.guild-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.shard-count { display: flex; align-items: center; gap: 6px; font-size: 16px; color: #9fd6ff; }
.shard-ico { width: 14px; height: 14px; transform: rotate(45deg); background: linear-gradient(135deg, #d6f0ff, #5fa8e8); box-shadow: 0 0 8px rgba(120, 190, 255, .8); border-radius: 2px; }
.guild-create { display: flex; gap: 8px; margin: 8px 0 12px; }
.guild-create input { flex: 1; min-width: 0; }
.btn.danger { color: #ff8a9a; }
.bag-tools .check { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; }
@media (max-width: 900px) { .bubbles { flex-wrap: wrap; } .acct-row { flex-wrap: wrap; } }

/* ability picker */
.ability-list { display: grid; gap: 10px; margin: 10px 0; }
.ability-card { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(40, 20, 70, .55); border: 1px solid rgba(181, 101, 255, .35); color: inherit; font: inherit; }
.ability-card:hover, .ability-card:focus { border-color: #c9a2ff; box-shadow: 0 0 12px rgba(181, 101, 255, .35); }
.ability-card b { font-size: 15px; color: #e3ccff; }
.ability-card span { font-size: 13px; color: var(--muted); }
.ability-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin: 4px 0 0; font-size: 12px; align-items: center; }

/* fight tick */
.tick-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 10px 0 4px; }
.tick-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, #7b4dff, #c9a2ff); }
.tick-bar.recover > div { background: linear-gradient(90deg, #8a2a3c, #d64860); }
/* the outcome banner above the health bars: Victory / Defeat, kept until the next fight is decided */
.last-fight { min-height: 58px; margin: 0 0 12px; padding: 8px 14px; text-align: center; border-radius: 14px 4px 14px 4px;
  border: 1px solid var(--line); background: rgba(20, 10, 38, .45); }
.last-fight:empty { visibility: hidden; }
.last-fight .lf-head { font-family: var(--serif); font-size: 22px; letter-spacing: .06em; line-height: 1.2; }
.last-fight .lf-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.last-fight .lf-sub b { color: var(--text); }
.last-fight.win { border-color: rgba(111, 214, 138, .45); background: linear-gradient(180deg, rgba(40, 90, 60, .35), rgba(20, 10, 38, .4)); }
.last-fight.win .lf-head { color: #9ff0b5; text-shadow: 0 0 12px #3fd07a99, 0 0 2px #000; }
.last-fight.loss { border-color: rgba(236, 106, 122, .45); background: linear-gradient(180deg, rgba(100, 30, 45, .35), rgba(20, 10, 38, .4)); }
.last-fight.loss .lf-head { color: #ff9fac; text-shadow: 0 0 12px #e0405a99, 0 0 2px #000; }
.last-fight.flash .lf-head { animation: lfPop .6s ease-out; }
@keyframes lfPop { from { transform: scale(1.25); opacity: .3; } to { transform: scale(1); opacity: 1; } }

/* admin item builder */
.ib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; margin: 8px 0; font-size: 13px; }
.ib-grid label { display: grid; gap: 3px; }
.ib-grid .ib-name { grid-column: 1 / -1; }
.ib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.ib-row input[type=number] { width: 90px; }
.ib-row select { min-width: 170px; }
.ib-preview { margin: 10px 0; padding: 8px 10px; border: 1px solid rgba(181, 101, 255, .3); border-radius: 8px; background: rgba(20, 10, 35, .5); }
.ib-script textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; margin-top: 6px; }
.ib-script summary { cursor: pointer; font-size: 13px; color: var(--muted); }

/* guild ranks, storage, Soul Mantle */
.guild-tabs { margin: 6px 0 10px; }
.guild-body { }
.nowrap { white-space: nowrap; }
.pill.rank-0 { color: #ffcf6e; border-color: rgba(255, 207, 110, .5); }
.pill.rank-1 { color: #c9a2ff; }
.gs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .gs-cols { grid-template-columns: 1fr; } }
.gs-list { display: grid; gap: 6px; max-height: 40vh; overflow: auto; padding-right: 4px; }   /* a full bag scrolls inside its box, never the window */
.gs-item { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid rgba(181, 101, 255, .2); border-radius: 8px; background: rgba(20, 10, 35, .4); }
.gs-item .btn { justify-self: start; margin-top: 3px; }
.mantle-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.mantle-perk { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid rgba(120, 190, 255, .2); border-radius: 8px; background: rgba(15, 20, 40, .45); }
.mantle-perk.maxed { border-color: rgba(255, 207, 110, .4); }
.bar.thin { height: 5px; margin-top: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar.thin > div { height: 100%; background: linear-gradient(90deg, #5fa8e8, #d6f0ff); }
.shard-ico.sm { display: inline-block; width: 9px; height: 9px; margin-right: 3px; vertical-align: middle; }
.ranks-table input[type=text], .ranks-table input:not([type]) { width: 130px; }

/* bosses */
.boss-runs { font-size: 11px; opacity: .75; margin-left: 4px; }
#bossBubble.has-runs .boss-runs { color: #e7c77a; opacity: 1; }
.boss-head { margin: 4px 0 6px; }
.boss-result { overflow-x: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: rgba(0,0,0,.2); }
.boss-result.win { border-color: rgba(120,200,120,.45); }
.boss-result.loss { border-color: rgba(220,100,100,.45); }
.boss-result-head { margin-bottom: 4px; }
.boss-result table { margin-top: 6px; }
.boss-start { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.boss-start input { width: 90px; }
.mantle-perk.locked { opacity: .6; }

/* boss fight replay: HP bars that follow the fight action by action */
.boss-replay { margin: 2px 0 10px; }
.boss-replay-head { display: flex; align-items: center; gap: 8px; }
.boss-replay-head #brSkip { margin-left: auto; }
.br-name { font-size: 12px; margin: 6px 0 3px; }
.bar.big { height: 22px; }
.br-adds { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 6px; }
.br-add-name { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar.thin-hp { height: 7px; border-radius: 4px; }
.br-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; margin-top: 4px; }
.bar.dead { opacity: .45; }
.boss-result-head #brReplay { margin-left: 8px; }
.boss-tabs { margin: 4px 0 10px; }
.gboss-card { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: rgba(0,0,0,.2); }
.gboss-card.active { border-color: rgba(200,140,255,.45); }
.gboss-card.dead { border-color: rgba(120,200,120,.45); }
.gboss-card .bar { margin: 6px 0; }
.gboss-actions { align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
.boss-win { font-size: 12.5px; }
.acct-danger { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255, 90, 120, .2); }
.acct-toggle { display: flex !important; flex-direction: row; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; font-size: 13px; }
.modal-card .acct-toggle input[type=checkbox] { width: auto; margin: 0; padding: 0; }
.boss-whatif { margin-top: 4px; }

/* ---- Abyssal loot tiers ---- */
/* Touched: purple-green, glowing border */
.abyssal.a5 { border: 1px solid #7fd8a6 !important; border-left: 3px solid #7fd8a6 !important;
  box-shadow: 0 0 8px rgba(127, 216, 166, .55), 0 0 14px rgba(155, 93, 229, .45), inset 0 0 10px rgba(155, 93, 229, .18); }
/* Infused: purple text, red pulsating border */
.abyssal.a6 { border: 1px solid #ff3b4e !important; border-left: 3px solid #ff3b4e !important; animation: infusedPulse 1.6s ease-in-out infinite; }
@keyframes infusedPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 45, 70, .45), 0 0 8px rgba(199, 125, 255, .25); border-color: #b3202f; }
  50%      { box-shadow: 0 0 12px rgba(255, 45, 70, .95), 0 0 22px rgba(255, 45, 70, .45); border-color: #ff4d5e; }
}
@media (prefers-reduced-motion: reduce) { .abyssal.a6 { animation: none; box-shadow: 0 0 10px rgba(255, 45, 70, .8); } }
/* World chat drop announcement: yellow, hover the item for its tooltip */
.chat-loot { color: #f3d35b; border-left: 2px solid #f3d35b; padding-left: 8px; margin: 3px 0; font-weight: 600; }
.chat-item { cursor: help; text-decoration: underline dotted; }
/* bag relic tooltips: both relic slots side by side */
.tooltip.wide { max-width: 560px; }
.t-cols { display: flex; gap: 12px; }
.t-col { flex: 1 1 0; min-width: 220px; }
.t-col + .t-col { border-left: 1px solid var(--line); padding-left: 12px; }
.t-slot { font-size: 11px; color: var(--accent); letter-spacing: .5px; margin-bottom: 3px; }
.t-sub { font-size: 11px; color: var(--muted); margin-top: 5px; letter-spacing: .5px; }
@media (max-width: 640px) { .t-cols { flex-direction: column; } .t-col + .t-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 8px; } }
/* bag options */
.opt-sec { margin-bottom: 14px; }
.opt-sec h4 { margin: 6px 0; }
.opt-sec > label { display: block; margin: 5px 0; }
.opt-ticks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 8px; }
.opt-ticks.affs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.opt-group { display: flex; flex-direction: column; gap: 2px; }
.opt-tick { display: inline-flex; align-items: center; gap: 4px; }
.btn.warnbtn { border-color: #e0a040; color: #f3c46b; }
#bagCleanup { margin-right: 6px; }
.opt-sec label.check, .opt-tick { display: flex !important; flex-direction: row; align-items: center; gap: 6px; margin: 3px 0; }
.opt-sec input[type=checkbox] { width: auto; margin: 0; flex: none; }
.opt-sec input[type=number], .opt-sec select { display: inline-block; width: auto; }
.opt-sec .row { justify-content: flex-end; }
.opt-ticks.affs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* professions */
.prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 8px 0; }
.prof-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: rgba(20, 10, 38, .5); }
.prof-card.on { border-color: var(--accent); box-shadow: 0 0 12px #8350f055; }
.prof-card.soon { opacity: .7; }
.prof-card p { margin: 4px 0; }
.prof-head { margin-bottom: 4px; }
.bar.thin { height: 6px; }
.mat { white-space: nowrap; }
.mat.t1 { color: #6fd4a0; } .mat.t2 { color: #7fb4ff; } .mat.t3 { color: #e0a8ff; text-shadow: 0 0 6px rgba(199, 125, 255, .6); }
.wrap-tag { color: #e0a8ff; font-size: 11px; }
.btn.shatter { border-color: #9b6cff; }
.order-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#profPanel select { max-width: 100%; }
.prof-card .bar > div { background: linear-gradient(90deg, #7a4cff, #c77dff); }
/* class gear */
.cls-tag { font-size: 10px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--line); margin-left: 4px; vertical-align: middle; }
.cls-tag.own { color: #7fe0a8; border-color: #3f8f63; }
.cls-tag.off { color: #9a8fb0; opacity: .8; }
.set-line { margin-top: 6px; font-size: 12px; color: var(--muted, #aaa); }
.set-line.full { color: #e0a8ff; }
/* professions: stations, consumables, jewels */
.prof-tabs { flex-wrap: wrap; }
.prof-tabs .tab.on { border-color: #9b6cff; }
.ab-lines { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.cook-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.cons-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 8px 0; }
.cons-slot { border: 1px dashed var(--line); border-radius: 8px; padding: 8px; min-height: 70px; }
.cons-slot.full { border-style: solid; }
.cons-bar { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.cons-chip { font: inherit; font-size: 11px; color: inherit; background: rgba(20, 10, 38, .6); border: 1px solid var(--line); border-radius: 12px; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.cons-chip.empty { opacity: .5; min-width: 28px; }
.cons-chip.on { border-color: #7fe0a8; box-shadow: 0 0 6px #3f8f6355; }
.cons-chip.potion .cn { color: #7fb4ff; } .cons-chip.dish .cn { color: #e8c07a; }
.cons-chip .ct { color: var(--muted, #aaa); }
.jewel { white-space: nowrap; }
.jewel.g1 { color: #6fd4a0; } .jewel.g2 { color: #7fb4ff; } .jewel.g3 { color: #e0a8ff; }
#profPanel label.check { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 2px 0; }
#profPanel label.check input[type=checkbox] { width: auto; margin: 0; padding: 0; }
#profPanel .order-form label { margin-bottom: 4px; }
#profPanel input[type=range] { width: 220px; }
/* Abyssal Market */
#mktPanel label.check { display: flex; flex-direction: row; align-items: center; gap: 6px; }
#mktPanel .order-form label { margin-bottom: 4px; }
.mkt td { vertical-align: top; }
.staff-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.staff-act label { margin-bottom: 0 !important; }
.br-wave { margin: 6px 0 2px; letter-spacing: .05em; font-size: 10px; }
.champ-tag { color: #ffb86b; font-size: 11px; margin-left: 4px; }

/* boss menu */
.boss-nav { align-items: center; gap: 6px; flex-wrap: wrap; }
.boss-nav label { display: flex; align-items: center; gap: 6px; margin: 0; }
.boss-nav input { width: 90px; }
.boss-list tr.boss-pick { cursor: pointer; }
.boss-list tr.boss-pick:hover td { background: rgba(155, 92, 255, .1); }
.boss-list tr.boss-pick.sel td { background: rgba(155, 92, 255, .22); color: #fff; }

/* ---- phones ---- */
@media (max-width: 600px) {
  .modal { padding: 8px; place-items: start center; }
  .modal-card, .modal-card.wide, .modal-card.wide.xl { width: 100%; max-width: 100%; min-height: 0; max-height: calc(100dvh - 16px); overflow-y: auto; padding: 14px 12px; }
  .modal-card h3 { font-size: 18px; }
  .modal-card table.lb, .modal-card table { display: block; max-width: 100%; overflow-x: auto; }
  .tabs, .prof-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; padding: 8px 10px; }
  .menubar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
  .menubar .bubble { padding: 8px 4px; font-size: 12.5px; text-align: center; }
  input, select, textarea { font-size: 16px; }           /* stops iOS zooming into inputs */
  .btn, .bubble:not(.small-bubble), .tab, .mtab, .pack-btn { min-height: 36px; }
  .btn.small { min-height: 32px; }
  .order-form { flex-wrap: wrap; }
  .tooltip.pinned, .tooltip.pinned.wide { max-width: calc(100vw - 16px); }
  .t-cols { flex-direction: column; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .pane-chat .chat-body { height: 50vh; }
  .slot-corner .enh-btn { padding: 4px 8px; }
  .stats { grid-template-columns: 1fr; }
}

/* PC screens: the game is laid out for 1200px, so on wider screens everything is drawn larger (windows, tooltips and the
   update banner sit outside .screen and keep their own sizes) */
/* PC layout: a wider frame — the hero panel is a slim column on the far left, Battle (+ Chat & Logs) gets most of the
   room, and the level bar with the consumable slots stretches across the whole width above them */
@media (min-width: 1200px) {
  #game.screen { max-width: 1480px; }
  .grid { grid-template-columns: 270px minmax(0, 1.75fr) minmax(0, 1.1fr); }
  .levelbar { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 12px 18px; }
  .levelbar .bar { height: 22px; }
  .cons-bar { flex-wrap: nowrap; gap: 8px; }
  .cons-chip { font-size: 13px; padding: 5px 14px; border-radius: 14px; }
  .cons-chip.empty { min-width: 46px; }
  .chat-body { height: 380px; }
}
/* --z: how much larger the game is drawn; pop-up windows get the same so they never look smaller than the game.
   Sizes inside a zoomed window are divided by --z so the window still fits the screen. */
@media (min-width: 1650px) { :root { --z: 1.1; } }
@media (min-width: 1900px) { :root { --z: 1.25; } }
@media (min-width: 2300px) { :root { --z: 1.45; } }
@media (min-width: 1650px) {
  .screen, .modal-card { zoom: var(--z); }
  .modal-card.wide { width: min(1240px, calc(94vw / var(--z))); min-height: calc(62vh / var(--z)); max-height: calc(90vh / var(--z)); }
  .modal-card.wide.xl { width: min(1500px, calc(96vw / var(--z))); min-height: min(820px, calc(84vh / var(--z))); max-height: calc(92vh / var(--z)); }
}
@media (min-width: 1650px) { .tooltip { font-size: 14px; max-width: 320px; } }
/* bag items: every card the same size — one line for the name, two for the details, up to three for its stats,
   buttons always at the bottom (the full item is in its hover tooltip) */
.bag .item { height: 142px; display: flex; flex-direction: column; overflow: hidden; }
.bag .item .meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bag .item .lines { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bag .item .actions { margin-top: auto; }
/* the Guide: topics down the left, the chosen topic on the right */
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.guide-nav { display: flex; flex-direction: column; gap: 4px; }
.guide-topic { font: inherit; text-align: left; color: var(--text); background: rgba(20, 10, 38, .5); border: 1px solid var(--line); border-radius: 10px 3px 10px 3px; padding: 7px 12px; cursor: pointer; }
.guide-topic:hover { border-color: var(--accent); }
.guide-topic.active { background: rgba(131, 80, 240, .32); border-color: var(--accent); color: #fff; }
.guide-body h4 { margin: 2px 0 8px; font-size: 18px; color: #e6d6ff; font-family: var(--serif); }
.guide-body p { margin: 0 0 10px; line-height: 1.55; }
.guide-body ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
@media (max-width: 700px) { .guide { grid-template-columns: 1fr; } .guide-nav { flex-direction: row; flex-wrap: wrap; } .guide-topic { padding: 5px 9px; font-size: 12.5px; } }
/* item locks (🔒 never salvaged) */
.lock-btn { padding: 2px 7px; opacity: .55; }
.lock-btn.on { opacity: 1; border-color: #e8bd62; box-shadow: 0 0 6px #e8bd6255; }
.item.prot { box-shadow: inset 0 0 0 1px rgba(232, 189, 98, .55); }
.corner-btns { display: flex; gap: 4px; align-items: center; }
.item .need { color: var(--bad); font-size: 10.5px; }
/* tooltips on big PC screens: larger text, never shrunk (placeItemTip moves them around the cursor instead) */
@media (min-width: 1650px) {
  .tooltip { font-size: 14.5px; }
  .tooltip.pinned { max-width: min(640px, calc(100vw - 24px)); }
  .tooltip.pinned.wide { max-width: min(1100px, calc(100vw - 24px)); }
  .t-slot, .t-sub { font-size: 12.5px; }
  .t-col { min-width: 280px; }
}
/* the bag shows one item type per page (‹ Head (3) · 2 / 9 ›), so its cards are bigger, with room for the lock */
.bag-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -4px 0 8px; }
.bag-pager .bag-type { padding: 2px 8px; font-size: 12px; }
.bag-pager .bag-type.active { border-color: var(--accent); background: rgba(131, 80, 240, .3); }
.bag-pager .bag-type.none { opacity: .45; }
.bag-page-name { min-width: 170px; text-align: center; font-family: var(--serif); font-size: 15px; }
.bag { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.bag .item { height: 168px; padding: 8px 9px; font-size: 13px; }
.bag .item .iname { font-size: 13.5px; }
.bag .item .meta { font-size: 11.5px; }
.bag .item .lines { font-size: 11.5px; -webkit-line-clamp: 4; }
.bag .item .actions .btn { padding: 4px 9px; }
.bag .item .lock-btn { margin-left: auto; font-size: 14px; }
/* the pack roster: who's in this fight (under the health bars) */
.pack-roster { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; min-height: 22px; }
.pack-roster .foe { font-size: 11.5px; padding: 2px 8px; border-radius: 10px 3px 10px 3px; border: 1px solid rgba(125, 63, 209, .45); background: rgba(60, 25, 100, .35); white-space: nowrap; }
.pack-roster .foe.champ { border-color: #e8bd62; color: #f5d68c; background: rgba(110, 80, 20, .35); box-shadow: 0 0 6px #e8bd6255; }
.pack-roster .foe.slain { opacity: .45; text-decoration: line-through; }
/* what an opened Boss Cache gave */
.cache-result { margin: 8px 0 12px; padding: 10px 14px; border-radius: 12px 4px 12px 4px; border: 1px solid rgba(255, 159, 46, .45); background: rgba(90, 55, 15, .3); display: grid; gap: 4px; }
.cache-result .cr-head { font-family: var(--serif); font-size: 17px; color: #ffcf8a; }
.gold-txt { color: var(--gold); }
.ashards.inline { display: flex; justify-content: center; gap: 8px; }
.ashards-fee { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #e2b8ff; margin: 2px 0 10px; }
.perk-cap { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 3px 0 4px; color: var(--muted); } .perk-cap b { color: var(--text); font-weight: 600; }

/* the Resource Exchange grid: professions × tiers */
.ex-grid td { padding: 3px; }
.ex-grid .ex-prof { font-family: var(--serif); white-space: nowrap; }
.ex-cell { width: 100%; display: grid; gap: 1px; text-align: left; font: inherit; font-size: 11.5px; color: var(--text); cursor: pointer;
  background: rgba(20, 10, 38, .5); border: 1px solid var(--line); border-radius: 8px 3px 8px 3px; padding: 4px 7px; }
.ex-cell:hover { border-color: var(--accent); }
.ex-cell.sel { background: rgba(131, 80, 240, .3); border-color: var(--accent); }
.ex-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
/* professions (rework): 2×2 profession cards, compact pouch rows, level unlocks, pagers */
.prof-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .prof-grid.four { grid-template-columns: 1fr; } }
.pouch-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(170, 120, 255, .12); font-size: 13px; }
.pouch-row select { max-width: 220px; }
.unlocks { list-style: none; margin: 2px 0 6px; padding: 0; columns: 2; column-gap: 18px; }
.unlocks li { margin: 1px 0; break-inside: avoid; }
.unlocks li.got { color: #a8e8c0; }
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.craft-queue { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 4px 0 2px; }
.q-chip { border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.q-chip.on { border-color: #7fe0a8; box-shadow: 0 0 6px #3f8f6355; }
.q-x { font: inherit; background: none; border: 0; color: var(--muted, #aaa); cursor: pointer; padding: 0 2px; }
.q-x:hover { color: #ff8a8a; }
.craft-bonus { margin-top: 2px; }
/* Bag options: auto-equip on the left, Bag Cleanup on the right, so the window never scrolls on PC */
.opt-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; align-items: start; }
@media (min-width: 1000px) { .opt-cols { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); } .opt-cols .opt-ticks.affs { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } }
.opt-group[data-g="profession"] { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; column-gap: 14px; }
.opt-group[data-g="profession"] .t-sub { flex-basis: 100%; }
/* leaderboards: classes and professions on a second tab row */
.lb-sub { margin-top: -6px; flex-wrap: wrap; }
.lb-sub .lb-gap { flex: 0 0 18px; }
/* guild boss: roster chips */
.gb-roster { display: flex; flex-wrap: wrap; gap: 4px; }
.gb-member { border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
/* guild raid supplies: compact, one line of controls */
.gb-slots .cons-slot { min-height: 0; padding: 6px 8px; }
.gb-slots .order-form { flex-wrap: nowrap; gap: 6px; margin-top: 4px; }
.gb-slots select { max-width: 150px; }

/* the Post */
.mail-btn { position: relative; font-size: 14px; }
.mail-btn.has-mail { color: #e7c77a; }
.mail-n { position: absolute; top: -6px; right: -8px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #111; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.post-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; align-items: start; }
@media (min-width: 1000px) { .post-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.post-list tbody tr { cursor: pointer; }
.post-list tr.sel td { background: rgba(231, 199, 122, .1); }
.post-list tr.unread td { font-weight: 700; }
.post-read h4 { margin: 4px 0; }
.post-body { white-space: pre-wrap; word-break: break-word; }
.post-carries { margin: 8px 0; display: grid; gap: 4px; }
.post-field { display: block; margin-bottom: 8px; }
.post-field input, .post-field textarea { width: 100%; box-sizing: border-box; }
.post-att { margin: 4px 0; }
.post-att select { flex: 1; min-width: 0; max-width: 100%; }

/* the hidden classes' "?" card */
.class-card.mystery .mystery-art { display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, #2a1748 0%, #120a22 45%, #05030a 80%); }
.mystery-art span { font: 700 110px/1 Georgia, 'Times New Roman', serif; color: #0d0718;
  text-shadow: 0 0 18px #8350f0, 0 0 42px #5a2fb0, 0 0 80px #2b1460; filter: blur(.6px); animation: mysteryPulse 4s ease-in-out infinite; }
@keyframes mysteryPulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.class-card.mystery h3 { letter-spacing: 3px; }
.hidden-cards { margin: 12px 0; }
@media (prefers-reduced-motion: reduce) { .mystery-art span { animation: none; } }
@media (min-width: 1100px) { .hidden-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .hidden-cards .class-card { padding: 14px; } }

/* Abyssal Lineage */
.bar.exp.lineage { box-shadow: 0 0 14px #8350f088 inset, 0 0 10px #8350f055; }
.bar.exp.lineage #expFill { background: linear-gradient(90deg, #3d1f7a, #8350f0 60%, #c9a6ff); animation: lineageGlow 3s ease-in-out infinite; }
@keyframes lineageGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.depth-tag { color: #c9a6ff; text-shadow: 0 0 8px #8350f0; }
.deep-note { color: #c9a6ff; font-size: 12px; margin-top: 4px; }
.lineage-log { color: #c9a6ff; }
.echo-vision { text-align: center; }
.echo-vision .echo-q { height: 150px; border-radius: 10px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 55%, #2a1748 0%, #120a22 45%, #05030a 80%); }
@media (prefers-reduced-motion: reduce) { .bar.exp.lineage #expFill { animation: none; } }

/* the Abyssal Tree */
#lineageBubble.has-runs .boss-runs { color: #c9a6ff; opacity: 1; }
.bar.exp.lineage { cursor: pointer; }
.tree-top { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.tree-top h3 { margin: 0; }
.tree-top #treeRespec { margin-left: auto; }
.tree-pts { color: #c9a6ff; font-size: 16px; }
.tree-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 8px 0 10px; }
@media (max-width: 1000px) { .tree-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tree-col h4 { margin: 0 0 6px; color: #c9a6ff; }
.tree-node { border: 1px solid #ffffff1f; border-radius: 8px; padding: 4px 8px; margin-bottom: 5px; background: #ffffff08; }
.tree-node.endless { border-color: #8350f088; background: #8350f014; }
.tree-node.locked { opacity: .5; }
.tree-node.maxed { border-color: #e7c77a55; }
.tn-head { display: flex; align-items: center; gap: 6px; }
.tn-head > .muted { margin-left: auto; }
.tn-btns { display: flex; gap: 3px; }
.tn-btns .btn.small { padding: 1px 7px; min-height: 0; }
.tree-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .tree-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tree-key { border: 1px solid #ffffff1f; border-radius: 8px; padding: 8px; }
.tree-key.chosen { border-color: #c9a6ff; box-shadow: 0 0 10px #8350f055; }

/* ---- bug reports */
.auth-bug { text-align: center; margin: 10px 0 0; }
.shot-prompt { position: fixed; right: 18px; bottom: 18px; z-index: 250; width: min(330px, calc(100vw - 36px)); display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 14px 4px 14px 4px; background: rgba(16, 8, 32, .97); border: 1px solid rgba(190, 140, 255, .55);
  box-shadow: 0 10px 30px #000c, 0 0 18px #8350f055; animation: shotIn .25s ease-out; }
.shot-prompt .row { justify-content: flex-start; margin: 0; gap: 8px; }
@keyframes shotIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shot-prompt { animation: none; } }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 2px; color: var(--muted); }
.bug-form { display: flex; flex-direction: column; gap: 12px; }
.bug-form label { display: flex; flex-direction: column; gap: 4px; }
.bug-form textarea { width: 100%; resize: vertical; font: inherit; }
.bug-shot img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 8px; }
.bug-form .bug-drop label { display: inline-flex; flex-direction: row; }
.bug-drop { padding: 16px; border: 1px dashed rgba(190, 140, 255, .5); border-radius: 12px; text-align: center; line-height: 2; background: rgba(20, 10, 38, .4); }
kbd { font: inherit; font-size: 12px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); }
.bug-item { padding: 10px 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(20, 10, 38, .45); }
.bug-item.fixed, .bug-item.wontfix { opacity: .6; }
.bug-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bug-acts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.bug-text { white-space: pre-wrap; margin: 6px 0; }
.bug-ctx { color: var(--muted); line-height: 1.5; word-break: break-word; }
.bug-errs { color: #ffb3b3; margin-top: 4px; }
.bug-img img { display: block; max-width: 100%; margin-top: 8px; border-radius: 8px; border: 1px solid var(--line); }

/* ---- two-factor login */
.acct-2fa { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.tfa-on { color: #7fe0a8; }
.tfa-steps { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.tfa-qr-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tfa-qr { width: 200px; height: 200px; image-rendering: pixelated; background: #fff; border-radius: 8px; padding: 4px; }
.tfa-key { font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .05em; margin: 2px 0 8px; user-select: all; word-break: break-all; }
.tfa-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 10px 0; }
.tfa-codes code { font-family: ui-monospace, Consolas, monospace; font-size: 15px; padding: 6px 10px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(20, 10, 38, .5); user-select: all; }

/* ---- customizable profiles */
#heroName { cursor: pointer; }
#heroName:hover, #heroName:focus-visible { text-decoration: underline; text-underline-offset: 4px; outline: none; }
.profile { --pf-accent: #b48cff; --pf-glow: #8350f066; }
.pf-c-gold { --pf-accent: #f2c95c; --pf-glow: #c9a23c66; }
.pf-c-crimson { --pf-accent: #ff6b6b; --pf-glow: #c0303066; }
.pf-c-emerald { --pf-accent: #5fe0a0; --pf-glow: #2f9e6a66; }
.pf-c-azure { --pf-accent: #6bb8ff; --pf-glow: #2f6fc066; }
.pf-c-rose { --pf-accent: #ff8fd0; --pf-glow: #c0408c66; }
.pf-c-silver { --pf-accent: #d6dbe6; --pf-glow: #8a92a866; }
.pf-c-ember { --pf-accent: #ff9a4d; --pf-glow: #c0602066; }
.pf-c-violet { --pf-accent: #b48cff; --pf-glow: #8350f066; }
.profile .pf-banner { height: 120px; margin: -6px -6px 12px; border-radius: 12px; border: 1px solid var(--pf-accent);
  background: linear-gradient(180deg, transparent 30%, rgba(10, 5, 20, .85)), var(--pf-banner) center 30% / cover no-repeat; box-shadow: 0 0 18px var(--pf-glow); }
.profile .pf-banner.plain { height: 10px; background: linear-gradient(90deg, var(--pf-accent), transparent); border: 0; }
.profile .pf-name { color: var(--pf-accent); text-shadow: 0 0 12px var(--pf-glow); }
.profile .pf-motto { font-style: italic; color: var(--text); opacity: .9; margin: -2px 0 4px; }
.profile .pf-about { white-space: pre-wrap; line-height: 1.5; padding: 10px 12px; margin-bottom: 12px; border-left: 3px solid var(--pf-accent); background: rgba(20, 10, 38, .45); border-radius: 0 10px 10px 0; }
.profile .pf-discord { margin: -4px 0 12px; display: flex; gap: 6px; align-items: center; }
.profile .pf-stat { border-color: color-mix(in srgb, var(--pf-accent) 35%, transparent); }
.pf-form { display: flex; flex-direction: column; gap: 12px; }
.pf-form > label:not(.check) { display: flex; flex-direction: column; gap: 4px; }
.pf-form textarea { width: 100%; resize: vertical; font: inherit; }
.pf-pick { display: flex; flex-direction: column; gap: 6px; }
.pf-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-swatch input, .pf-bpick input { position: absolute; opacity: 0; pointer-events: none; }
.pf-swatch span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--pf-accent); border: 2px solid transparent; box-shadow: 0 0 8px var(--pf-glow); cursor: pointer; }
.pf-swatch input:checked + span { border-color: #fff; transform: scale(1.1); }
.pf-swatch input:focus-visible + span, .pf-bpick input:focus-visible + .pf-bthumb { outline: 2px solid #fff; outline-offset: 2px; }
.pf-banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pf-bpick { display: flex; flex-direction: column; gap: 3px; align-items: center; cursor: pointer; position: relative; }
.pf-bthumb { width: 100%; height: 46px; border-radius: 8px; border: 2px solid var(--line); background: var(--pf-banner) center 30% / cover no-repeat, rgba(20, 10, 38, .6); }
.pf-bthumb.plain { background: rgba(20, 10, 38, .6); }
.pf-bpick input:checked + .pf-bthumb { border-color: #fff; box-shadow: 0 0 10px #ffffff55; }
.pf-form label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.pf-form label.check input { width: auto; margin: 0; }