: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; }
.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, #b3822b); box-shadow: 0 0 6px #e8bd6266; }

.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; 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; gap: 8px; }
.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.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: 10px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100vw - 24px); padding: 10px 16px; border-radius: 12px; font-size: 14px;
  background: linear-gradient(160deg, rgba(70, 30, 120, .97), rgba(20, 8, 40, .97)); border: 1px solid rgba(190, 140, 255, .55);
  box-shadow: 0 0 24px rgba(150, 80, 255, .45); animation: updGlow 2.4s ease-in-out infinite; }
.update-bar b { color: #e6ccff; }
@keyframes updGlow { 50% { box-shadow: 0 0 36px rgba(180, 110, 255, .75); } }
@media (max-width: 600px) { .update-bar { flex-direction: column; gap: 8px; text-align: center; } }
/* 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.modable { cursor: pointer; text-decoration: underline dotted rgba(170, 120, 255, .5); text-underline-offset: 3px; }
.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); }
.last-fight { font-size: 13px; min-height: 18px; margin-top: 4px; }
.last-fight.flash { animation: lastFlash .8s ease-out; }
@keyframes lastFlash { from { background: rgba(201, 162, 255, .25); } to { background: transparent; } }

/* 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; } }