:root {
  --ink: #e6dcc6;
  --ink-dim: #a39884;
  --ink-faint: #6f6656;
  --gold: #d6b066;
  --gold-dim: #8f7440;
  --blood: #9b2a22;
  --panel: #17120e;
  --panel-2: #211a14;
  --edge: #4d3d28;
  --edge-hi: #7a613b;
  --good: #7fcf6a;
  --bad: #e0624f;
  --magic: #6f8fff;
  --rare: #f0d050;
  --epic: #b060ff;
  --common: #c8c2b4;
  --serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07060a; overflow: hidden; color: var(--ink); font-family: var(--serif); font-size: 16px; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: default; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#ui > #hud, #ui > #bhud { pointer-events: none; }
#hud > *, #bhud > * { pointer-events: auto; }
[hidden] { display: none !important; }
kbd { font-family: var(--caps); font-size: 10px; color: var(--ink-faint); border: 1px solid var(--edge); border-radius: 3px; padding: 0 3px; margin-left: 4px; }
b { color: var(--gold); font-weight: 600; }

/* ---------- panels & buttons */
.frame, .panel, .modal-box, .login-box, #chat, .tip, .ctx {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(120, 90, 50, 0.10), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge);
  box-shadow: inset 0 0 0 1px #0a0806, inset 0 0 24px rgba(0,0,0,0.6), 0 6px 24px rgba(0,0,0,0.7);
  border-radius: 3px;
}
.btn {
  font-family: var(--caps); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  color: var(--gold); background: linear-gradient(180deg, #3a2c1c, #1f170f);
  border: 1px solid var(--edge-hi); border-radius: 2px; padding: 6px 12px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.12), 0 2px 4px rgba(0,0,0,0.6);
  text-shadow: 0 1px 2px #000;
}
.btn:hover:not(:disabled) { color: #ffe3a6; border-color: var(--gold); background: linear-gradient(180deg, #4a3822, #2a1f13); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.big { font-size: 15px; padding: 9px 18px; }
.btn.small { font-size: 11px; padding: 3px 8px; }
.btn.red { color: #ffb4a8; border-color: #7a2a22; background: linear-gradient(180deg, #4a1a14, #24100c); }
/* a word of a question box that warns (ui.js: the destroy box's Destroy) */
.cf-red { color: var(--bad); font-style: normal; font-weight: 600; }
.btn.green { color: #c8f0b0; border-color: #3e6a2e; background: linear-gradient(180deg, #24381a, #13200e); }
input {
  font-family: var(--serif); font-size: 17px; color: var(--ink); background: #0c0a08;
  border: 1px solid var(--edge); padding: 8px 10px; outline: none; border-radius: 2px;
}
input:focus { border-color: var(--gold-dim); box-shadow: 0 0 8px rgba(214, 176, 102, 0.25); }
.err { color: var(--bad); min-height: 20px; margin-top: 10px; font-style: italic; }
.hint { color: var(--ink-faint); font-size: 14px; font-style: italic; margin-top: 8px; }
h1, h2, h3 { font-family: var(--caps); color: var(--gold); margin: 0; font-weight: 700; text-shadow: 0 2px 6px #000; }
.rar-common { color: var(--common); } .rar-magic { color: var(--magic); } .rar-rare { color: var(--rare); } .rar-epic { color: var(--epic); }

/* ---------- login */
/* a window shorter than the box scrolls it (centred by its auto margin, so its top is never cut off) */
#login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow-y: auto;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25), rgba(0,0,0,0.8)); }
.login-box { width: min(760px, 94vw); padding: 34px 38px 26px; text-align: center; margin: auto; }
/* the name is the owner's title picture (index.html h1.logo): a little wider than the pane's words, into its sides,
   where only its glow is */
.login-box h1.logo { margin: -10px -24px 16px; line-height: 0; }
.login-box h1.logo img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.login-box h1 { font-size: 54px; font-weight: 900; letter-spacing: 0.08em; color: #d9b36a;
  text-shadow: 0 0 18px rgba(255, 120, 40, 0.35), 0 3px 0 #2a1a0c, 0 6px 12px #000; }
#login-name label { display: block; font-style: italic; color: var(--ink-dim); margin-bottom: 10px; font-size: 18px; }
#login-name input { width: 280px; text-align: center; font-size: 20px; }
#login-name .btn { margin-left: 8px; vertical-align: top; }
#login-class .lbl { font-size: 19px; margin-bottom: 14px; color: var(--ink-dim); font-style: italic; }
/* the testnet badge, the wallet button, and a hero to claim or begin (js/wallet.js) */
#net-badge { display: inline-block; margin: -16px 0 20px; padding: 2px 14px; font-family: var(--caps); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: #9fd4ff; border: 1px solid #2e4a6a; background: rgba(20, 40, 60, 0.45); }
#wallet-go { min-width: 260px; }
#wallet-msg code { font-size: 14px; color: var(--gold); }
/* the way to the testnet allowlist's page, for a wallet whose application there is not sent yet (ui.js walletState) */
#wallet-msg a { display: inline-block; margin-top: 6px; font-style: normal; color: var(--gold); text-underline-offset: 3px; }
#wallet-msg a:hover { color: #fff; }
/* the game's places elsewhere and its FAQ (js/links.js): small round panes of the game's glass with a gold hairline,
   the marks in gold, brighter under the pointer; at the door in its top right corner, before its languages (i18n.js
   puts them in .door-top), in town at the foot of the right column, under the bounties, to its right edge (the owner,
   4 November 2026: "faq discord ve x butonlarini bounties in altina alsana"; beside the wallet the top banners of an
   event or the arena queue would reach them on a narrower screen) */
.soc { display: flex; align-items: center; gap: 6px; }
.soc-b { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0; border-radius: 14px; color: #e8c47a; text-decoration: none;
  background: linear-gradient(180deg, rgba(27, 27, 34, 0.86), rgba(10, 10, 14, 0.9)); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.42), 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: color 0.15s, box-shadow 0.15s, background 0.15s; }
.soc-b svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.soc-b:hover, .soc-b:focus-visible { color: #fff4d8; background: linear-gradient(180deg, rgba(48, 42, 34, 0.92), rgba(18, 16, 14, 0.94));
  box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.85), 0 0 12px rgba(232, 196, 122, 0.25); }
.soc-faq { padding: 0 10px; font: 400 12px/1 var(--caps); letter-spacing: 0.1em; }
.login-box > .door-top { position: absolute; top: 8px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 14px; }
#hud-soc { justify-content: flex-end; }
#hud-soc:empty { display: none; }
#wallet-req { margin-top: 10px; }
#wallet-req input { width: 280px; text-align: center; font-size: 16px; }
#wallet-req .btn { margin-left: 6px; vertical-align: top; }
#wallet-pick { max-width: 540px; margin: 0 auto; }
.wp-h { font-family: var(--caps); color: var(--gold); letter-spacing: 0.08em; font-size: 16px; margin-bottom: 10px; }
.wp-h2 { font-family: var(--caps); color: var(--ink-faint); letter-spacing: 0.25em; font-size: 11px; text-transform: uppercase; margin: 14px 0 6px; }
.wp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; text-align: left; }
.wp-w { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--edge); background: rgba(0,0,0,0.35); color: var(--ink);
  font: inherit; font-size: 15px; text-align: left; cursor: pointer; text-decoration: none; border-radius: 3px; transition: border-color 0.15s, background 0.15s; }
.wp-w:hover { border-color: var(--edge-hi); background: rgba(60, 40, 20, 0.35); }
#wp-found .wp-w { border-color: var(--gold-dim); }
#wp-found .wp-w:hover { border-color: var(--gold); }
.wp-w img, .wp-mono { width: 26px; height: 26px; flex: none; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.wp-mono { display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--caps); font-weight: 700; font-size: 14px; color: #fff; background: #444; }
.wp-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-w small { flex: none; color: var(--ink-faint); font-size: 12px; font-style: italic; }
.wp-none { grid-column: 1 / -1; color: var(--ink-faint); font-style: italic; font-size: 14px; text-align: center; padding: 4px 0; }
.wp-back { margin-top: 12px; }
#wp-hint { margin: -4px 0 10px; }
/* WalletConnect (js/walletconnect.js; 5 November 2026): in the picker a QR code's corners in gold on a slot's dark (drawn in
   code: no logo of theirs), and its window over the door in the game's glass (.modal-box): the code dark on light in a
   gold-ringed tile, or on a phone the wallet apps as the picker's buttons; then the wallet's name and the word to sign */
.wp-wcic { background: radial-gradient(circle at 50% 35%, #2a2a33, #0c0c11 75%); color: var(--gold); }
.wp-wcic svg { width: 18px; height: 18px; }
.modal-box.wc-box { width: min(420px, calc(100vw - 32px)); min-width: 0; padding: 22px 24px 18px; }
.modal-box.wc-box:focus { outline: none; }
.wc-box .wc-h { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 24px; letter-spacing: 0.06em; margin-bottom: 4px; }
.wc-box .wc-ic { display: inline-flex; width: 24px; height: 24px; color: var(--gold); }
.wc-box .wc-ic svg { width: 100%; height: 100%; }
.wc-box .wc-lead { margin: 6px 0 12px; color: var(--ink-dim); font-size: 15px; line-height: 1.4; }
.wc-box .wc-qr { margin: 4px auto 6px; padding: 10px; width: max-content; border-radius: 10px; background: #f6f0e4; line-height: 0;
  box-shadow: 0 0 0 1px rgba(201, 162, 90, 0.6), 0 0 0 4px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.6); }
.wc-box .wc-qr[hidden] { display: none; }
.wc-box .wc-qr canvas { display: block; image-rendering: pixelated; }
.wc-box .wc-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; text-align: left; }
.wc-box .wc-app { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 15px;
  background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.34); }
.wc-box .wc-app:hover, .wc-box .wc-app:focus-visible { background: rgba(232, 196, 122, 0.07); box-shadow: inset 0 0 0 1px rgba(232, 196, 122, 0.66); }
.wc-box .wc-mono { width: 26px; height: 26px; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--caps); font-style: normal;
  color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.wc-box .wc-an { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-box .wc-hint { margin: 10px 0 4px; font-size: 13px; color: var(--ink-faint); font-style: italic; line-height: 1.35; }
.wc-box .wc-peer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 12px 0 2px; font-size: 15px; color: var(--ink-dim); }
.wc-box .wc-peer b { font-family: var(--caps); font-weight: 400; color: #f3d68e; }
.wc-box .wc-on { width: 8px; height: 8px; border-radius: 50%; background: #74c260; box-shadow: 0 0 8px rgba(116, 194, 96, 0.8); }
.wc-box .wc-peer code { color: var(--gold); font-size: 13.5px; }
.wc-box .wc-open { display: inline-flex; gap: 6px; margin: 2px 0 4px; text-decoration: none; }
.wc-box .wc-st { min-height: 20px; margin: 8px 0 0; color: var(--ink-faint); font-size: 14px; font-style: italic; }
.wc-box .wc-st:empty { min-height: 0; margin: 0; }
.wc-box .wc-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
@media (max-width: 420px) { .wc-box .wc-apps { grid-template-columns: 1fr; } }
/* While the window is open (ui.js wcStart; the review of 5 November 2026): the door's pane under it out of sight, its words
   no longer read through the glass and its buttons out of the keyboard's reach; and the layer scrolls rather than the
   window, centred by its auto margins while it fits (its top never cut off once it does not), so its gold corners stay
   on its frame on a short screen and a new code leaves the scroll where it was */
#login.wc-open .login-box { visibility: hidden; }
#modal.wc-up { overflow-y: auto; overscroll-behavior: contain; padding: calc(8px + var(--sat, 0px)) 0 calc(8px + var(--sab, 0px)); }
#modal.wc-up > .modal-box.wc-box { margin: auto; flex: none; }
html.touch #modal.wc-up > .modal-box.wc-box { max-height: none; overflow: visible; }
.set-wallet { margin-right: auto; color: var(--ink-dim); font-size: 14px; }
.set-wallet code { color: var(--gold); font-size: 13px; margin-left: 4px; }
#login-claim .lbl { font-size: 18px; margin-bottom: 12px; color: var(--ink-dim); font-style: italic; }
.claim-row { margin: 8px 0; }
.claim-other { margin: -4px 0 10px; }
.claim-row label { display: block; font-style: italic; color: var(--ink-dim); margin-bottom: 8px; font-size: 17px; }
.claim-row input { width: 240px; text-align: center; font-size: 18px; }
.claim-row .btn { margin-left: 8px; vertical-align: top; }
.claim-or { font-family: var(--caps); color: var(--ink-faint); letter-spacing: 0.3em; font-size: 12px; margin: 14px 0 6px; text-transform: uppercase; }
#class-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.ccard { padding: 10px 8px 12px; border: 1px solid var(--edge); background: rgba(0,0,0,0.35); cursor: pointer; border-radius: 3px; transition: border-color 0.15s, background 0.15s; }
.ccard:hover { border-color: var(--edge-hi); background: rgba(60, 40, 20, 0.35); }
.ccard.on { border-color: var(--gold); background: rgba(90, 60, 25, 0.35); box-shadow: 0 0 14px rgba(214,176,102,0.25); }
.ccard canvas { display: block; margin: 0 auto 6px; width: 110px; height: 120px; }
.ccard h3 { font-size: 16px; }
.ccard p { font-size: 13.5px; color: var(--ink-dim); margin: 6px 0; line-height: 1.25; min-height: 52px; }
.ccard .st { font-size: 12px; color: var(--ink-faint); font-family: var(--caps); }
/* the class's three specialisations and what each is the best at (TREES role) */
.ccard .specs { margin: 2px 0 7px; font-size: 12px; line-height: 1.2; color: var(--ink-dim); }
.ccard .specs div { margin-top: 4px; }
.ccard .specs b { display: block; font-family: var(--caps); font-weight: 400; font-size: 11.5px; letter-spacing: 0.04em; }
.row { display: flex; gap: 10px; justify-content: center; }

/* ---------- lobby HUD */
#me-frame { position: absolute; left: 14px; top: 14px; display: flex; gap: 12px; padding: 10px 16px 10px 10px; align-items: center; min-width: 290px; }
.portrait { border-radius: 50%; border: 2px solid var(--edge-hi); background: radial-gradient(circle at 50% 35%, #3a2e22, #0e0b08); box-shadow: 0 0 0 2px #0a0806, 0 0 10px rgba(0,0,0,0.8); }
#me-frame .nm { font-family: var(--caps); font-size: 17px; color: var(--gold); }
#me-frame .cl { font-size: 14px; color: var(--ink-dim); margin-top: -2px; }
.bar { height: 7px; background: #0b0907; border: 1px solid #000; margin-top: 5px; position: relative; overflow: hidden; }
.bar > div { height: 100%; }
.bar.xp > div { background: linear-gradient(180deg, #b58a3a, #6a4c18); }
.bar.hp > div { background: linear-gradient(180deg, #c0392b, #6e1a12); }
.bar.hp.ally > div { background: linear-gradient(180deg, #4fa04a, #22501e); }
.shards { margin-top: 5px; font-size: 15px; color: #d7c7ff; }
.shards i { font-style: normal; color: #b49cff; text-shadow: 0 0 6px #7a4cff; }
.pts { color: var(--good); font-size: 13px; font-style: italic; }

#queue-banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 8px 18px; font-family: var(--caps); color: var(--gold); display: flex; gap: 14px; align-items: center;
  background: linear-gradient(180deg, #2a1f14, #120d09); border: 1px solid var(--edge-hi); box-shadow: 0 4px 16px #000; }
#queue-banner .dots::after { content: '…'; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

#right-col { position: absolute; right: 14px; top: 14px; width: 230px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
#party-frame { display: flex; flex-direction: column; gap: 6px; }
.pm { display: flex; gap: 8px; align-items: center; padding: 6px 8px; }
.pm .nm { font-family: var(--caps); font-size: 13px; color: var(--ink); }
.pm .sub { font-size: 12.5px; color: var(--ink-dim); }
.pm.off { opacity: 0.45; }
.pm .x { margin-left: auto; cursor: pointer; color: var(--ink-faint); padding: 0 4px; }
.pm .x:hover { color: var(--bad); }
.crown { color: #f0c040; margin-right: 3px; }
#party-frame .btn { align-self: flex-end; }

#menu-btns { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }

/* ---------- chat */
/* all but opaque, as the wallet chip and the bounties tracker: the town's signs under it showed their words through it */
#chat { position: absolute; left: 14px; bottom: 14px; width: min(440px, 44vw); padding: 6px; display: flex; flex-direction: column; background: rgba(12, 9, 7, 0.96); }
/* the channels as tabs over the log (28 October 2026, js/chatbox.js): a strip that never wraps; too narrow for its
   tabs, it scrolls sideways with no bar. A line shows only under the tabs it names (data-tabs), #chat[data-tab] being
   the tab chosen. --ctabs is the strip's whole height: the log gives it up, so the box keeps its size */
:root { --ctabs: 26px; }
#chat-tabs { position: relative; display: flex; flex: none; gap: 8px; height: calc(var(--ctabs) - 4px); margin-bottom: 4px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior-x: contain; border-bottom: 1px solid var(--edge); }
#chat-tabs::-webkit-scrollbar { display: none; }
/* (and where it does scroll, it fades at the edge it hides tabs behind: chatbox.js edges) */
#chat-tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
#chat-tabs.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
#chat-tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ctab { position: relative; flex: none; display: flex; align-items: center; height: 100%; padding: 0 7px; font-family: var(--caps); font-size: 11.5px; line-height: 1; color: var(--ink-dim);
  background: none; border: 0; cursor: pointer; white-space: nowrap; }
.ctab:hover { color: var(--gold); }
.ctab.on { color: var(--gold); background: linear-gradient(180deg, #2a2016, #17120e); }
/* a tab's mark: how many lines of players' words it has that the tab chosen did not show, raised just after its word
   in the room between the tabs; or a dot in its own corner for anything else. Neither takes room: the tabs never move
   under the pointer as marks come and go. (A count starts a pixel after its word, the tab's padding less one, and
   grows to the right, into the gap and the next tab's padding: held by its right edge, a 9+ lay over the word's last
   letter) */
.ct-n { position: absolute; z-index: 1; top: 0; left: calc(100% - 6px); min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; font: 700 9px/13px var(--serif); font-style: normal;
  text-align: center; letter-spacing: 0; color: #fff; background: #b0361f; pointer-events: none; }
.ct-n.dot { top: 3px; left: auto; right: 1px; min-width: 0; width: 5px; height: 5px; padding: 0; background: var(--gold); }
#chat[data-tab="general"] #chat-log > :not([data-tabs~="general"]), #chat[data-tab="party"] #chat-log > :not([data-tabs~="party"]),
#chat[data-tab="guild"] #chat-log > :not([data-tabs~="guild"]), #chat[data-tab="whisper"] #chat-log > :not([data-tabs~="whisper"]),
#chat[data-tab="system"] #chat-log > :not([data-tabs~="system"]), #chat[data-tab="combat"] #chat-log > :not([data-tabs~="combat"]) { display: none; }
#chat-log { height: calc(150px - var(--ctabs)); overflow-y: auto; font-size: 14.5px; line-height: 1.3; padding: 2px 4px 6px; scrollbar-width: thin; scrollbar-color: #4d3d28 transparent; }
#chat-log div { text-shadow: 0 1px 2px #000; }
#chat-log .sys { color: #c9a95a; font-style: italic; }
#chat-log .party { color: #8fd0ff; }
#chat-log .log { color: #9d9384; font-size: 13.5px; }
#chat-log .log b { color: #d8cbb0; }
#chat-log .who { color: var(--gold); }
#chat-in { font-size: 14px; padding: 5px 8px; background: rgba(0,0,0,0.5); }
body.in-battle #chat { bottom: 118px; }
/* in a fight the chat keeps to the corner below the chamber's floor: the whole of it lay over the near corner, where
   the heroes start, on a laptop's window, and a mouse cannot move the fight's camera from under it. It is narrower
   there and its log shows the last three lines (it still scrolls). With the tabs over the log (28 October 2026) it is
   narrower still, and its tabs smaller: its top right corner is what comes nearest the floor's near edge, and a box
   320px wide may be 132px tall before it covers a tile in a lord's chamber at 1280x609 (360px wide: 94px, less than
   the 108px it was); all seven tabs still fit (js/chatbox.js) */
html:not(.touch) body.in-battle #chat { width: min(320px, 44vw); }
html:not(.touch) body.in-battle #chat-log { height: 65px; }
html:not(.touch) body.in-battle #chat-tabs { height: 18px; margin-bottom: 4px; gap: 1px; }
html:not(.touch) body.in-battle .ctab { padding: 0 4px; font-size: 10px; letter-spacing: 0.02em; }
/* (and a count is a dot there too, in its own red, so that the seven keep their places; the number is back in town) */
html:not(.touch) body.in-battle .ct-n { top: 1px; left: auto; right: 0; min-width: 0; width: 5px; height: 5px; padding: 0; font-size: 0; }
/* the square kept quiet in a fight (settings: Quiet square in fights): its words, rolls and emotes are hidden there,
   and back once in town; the party, the guild, whispers and the fight's log stay */
html.quiet-fight body.in-battle #chat-log .say, html.quiet-fight body.in-battle #chat-log .sq { display: none; }

/* ---------- battle HUD */
#b-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; }
#b-title { font-family: var(--caps); color: var(--gold); font-size: 15px; letter-spacing: 0.06em; text-shadow: 0 2px 4px #000; margin-bottom: 6px; }
#b-order { display: flex; gap: 5px; justify-content: center; }
.oc { width: 52px; text-align: center; padding: 3px 2px 4px; background: rgba(12,9,7,0.8); border: 1px solid var(--edge); border-radius: 2px; position: relative; }
.oc canvas { width: 40px; height: 40px; display: block; margin: 0 auto; }
.oc.t0 { border-bottom: 2px solid #4f8fd0; } .oc.t1 { border-bottom: 2px solid #c0392b; }
.oc.cur { border-color: var(--gold); box-shadow: 0 0 10px rgba(240, 200, 100, 0.55); transform: translateY(3px); }
.oc.dead { opacity: 0.3; filter: grayscale(1); }
.oc .n { font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc .bar { height: 4px; margin-top: 2px; }

#b-bar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: flex-end;
  padding: 10px 12px; background: linear-gradient(180deg, rgba(33,26,20,0.95), rgba(14,11,8,0.97)); border: 1px solid var(--edge); box-shadow: 0 6px 24px #000; }
#b-status { width: 150px; font-size: 13.5px; color: var(--ink-dim); }
#b-status .who { font-family: var(--caps); color: var(--gold); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#b-status .pips { margin-top: 3px; letter-spacing: 2px; }
/* the party clock's bank (ui.js tickBattle), and a hero the AI plays because their turns ran out */
#b-status .bank { font-size: 12px; }
#b-status .bank b { color: #ffb08a; }
#b-status .away { color: #c8b0ff; font-size: 12px; line-height: 1.25; }
/* the AI's turn of yours, said in full on its one line (a second line would lift the bar into the chat) */
#b-status .who.ai { font-size: 12px; letter-spacing: -0.01em; }
.pip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #000; background: #2a241c; margin-right: 2px; }
.pip.mv { background: radial-gradient(circle at 40% 35%, #9fd0ff, #2f6a9a); }
.pip.act { background: radial-gradient(circle at 40% 35%, #ffd98a, #a8721c); }
#b-abilities { display: flex; gap: 6px; }
.ab { width: 58px; height: 58px; position: relative; cursor: pointer; border: 1px solid var(--edge-hi); border-radius: 3px;
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff4dc; text-shadow: 0 0 8px rgba(255,200,120,0.6), 0 2px 2px #000;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.8), 0 2px 5px #000; user-select: none; }
.ab:hover { border-color: var(--gold); }
.ab.sel { border-color: #ffe08a; box-shadow: 0 0 12px rgba(255, 220, 120, 0.7), inset 0 0 10px rgba(0,0,0,0.6); }
.ab.off { filter: grayscale(0.85) brightness(0.55); cursor: default; }
.ab .k { position: absolute; left: 3px; top: 1px; font-size: 10px; font-family: var(--caps); color: #d8c8a8; text-shadow: 0 1px 2px #000; }
.ab .cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); font-family: var(--caps); font-size: 22px; color: #fff; }
.ab .cnt { position: absolute; right: 3px; bottom: 1px; font-size: 12px; font-family: var(--caps); color: #fff; text-shadow: 0 1px 2px #000; }
.ab-sep { width: 1px; background: var(--edge); margin: 0 4px; }
/* the danger view's eye (battle.js dangerTiles): lit while it is on */
.ab.eye { padding: 0; font: inherit; color: #b8a890; }
.ab.eye.on { color: #ffb090; border-color: #ff8a6a; box-shadow: 0 0 12px rgba(255, 110, 80, 0.6), inset 0 0 10px rgba(0,0,0,0.6); }
/* a foe's moves and a lord's phases in its tooltip (ui.js unitTip) */
.tip .tmv { margin-top: 6px; }
.tip .tmv-n { font-family: var(--caps); font-size: 13.5px; font-weight: 700; color: #ffcf70; }
.tip .tmv .tk { margin-bottom: 1px; }
.tip .tmv > div:not(.tmv-n):not(.tk) { padding-left: 8px; font-size: 13.5px; }
.tip .tph { color: #ffb070; }
.tip .tph.done { opacity: 0.55; }
#b-side { display: flex; flex-direction: column; gap: 6px; }
#b-timer { height: 5px; background: #0b0907; border: 1px solid #000; }
#b-timer > div { height: 100%; background: linear-gradient(90deg, #a8721c, #ffd98a); }
#b-timer > div.bank { background: linear-gradient(90deg, #8a2a14, #ff9a62); }
#b-end.mine { color: #fff0c8; border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 210, 120, 0.4); }
#b-flee { position: absolute; right: 14px; top: 14px; }
#turn-banner { position: fixed; top: 34%; left: 50%; transform: translate(-50%, -50%); font-family: var(--caps); font-size: 44px; font-weight: 900; color: #f3d38a;
  text-shadow: 0 0 20px rgba(255, 140, 40, 0.6), 0 4px 8px #000; pointer-events: none; animation: banner 1.2s ease-out forwards; letter-spacing: 0.1em; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -40%) scale(1.2); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- windows */
.panel { position: absolute; padding: 16px 18px 16px; min-width: 320px; max-height: 86vh; overflow: auto; }
.panel .hd { display: flex; gap: 12px; align-items: center; margin: -4px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--edge); }
.panel .hd h2 { font-size: 20px; }
.panel .hd .t { font-size: 14px; color: var(--ink-dim); font-style: italic; }
.panel .close { margin-left: auto; align-self: flex-start; cursor: pointer; color: var(--ink-faint); font-size: 22px; line-height: 1; padding: 0 4px; }
.panel .close:hover { color: var(--bad); }
.panel .greet { font-style: italic; color: #cfc2a8; font-size: 16.5px; line-height: 1.35; margin: 0 0 14px; }
.panel .opts { display: flex; flex-direction: column; gap: 8px; }
.panel .opts .btn { text-align: left; }
.panel .note { font-size: 14px; color: var(--ink-dim); font-style: italic; margin-top: 10px; }
.panel.center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sect { font-family: var(--caps); font-size: 12.5px; color: var(--gold-dim); letter-spacing: 0.12em; text-transform: uppercase; margin: 14px 0 6px; }

.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(860px, 92vw); }
.list { display: flex; flex-direction: column; gap: 3px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid transparent; background: rgba(0,0,0,0.25); cursor: default; }
.li:hover { border-color: var(--edge); background: rgba(60, 45, 25, 0.3); }
.li .ico { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--edge); background: #0c0a08; font-size: 15px; }
.li .nm { flex: 1; font-size: 15px; }
.li .pr { font-size: 14px; color: #d7c7ff; white-space: nowrap; }
.li .rq { font-size: 12.5px; color: var(--ink-faint); }
.li .rq.bad { color: var(--bad); }

.charwin { display: grid; grid-template-columns: 300px 210px 340px; gap: 18px; }
.doll { text-align: center; }
.doll canvas { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.slot { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--edge); background: radial-gradient(circle at 50% 40%, #1b1611, #0a0806); cursor: pointer; margin-bottom: 6px; position: relative; }
.slot:hover { border-color: var(--edge-hi); }
.slot .sl { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.slot .sl img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.9; pointer-events: none; }
.slot .sl i { position: relative; font-style: normal; font-family: var(--caps); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-faint); text-shadow: 0 1px 2px #000, 0 0 4px #000; align-self: flex-end; margin-bottom: 2px; }
.slot.empty { background: radial-gradient(circle at 50% 40%, #16120e, #080605); border-style: dashed; border-color: #3a2e20; }
.stats td { padding: 2px 4px; font-size: 15px; }
.stats td:first-child { color: var(--ink-dim); }
.stats td:nth-child(2) { color: var(--ink); text-align: right; font-weight: 600; }
.plus { cursor: pointer; color: var(--good); font-family: var(--caps); font-weight: 700; padding: 0 6px; border: 1px solid #3e6a2e; background: #13200e; }
.bag { display: grid; grid-template-columns: repeat(6, 52px); gap: 4px; }
.cell { width: 52px; height: 52px; border: 1px solid #2d2418; background: radial-gradient(circle at 50% 40%, #1b1611, #0a0806); display: flex; align-items: center; justify-content: center; font-size: 21px; cursor: pointer; position: relative; }
.cell.it { border-color: var(--edge-hi); }
.cell.it:hover { box-shadow: 0 0 8px rgba(214, 176, 102, 0.5); }
.cell.common { border-color: #6b665c; } .cell.magic { border-color: #3c56b8; } .cell.rare { border-color: #a8902a; } .cell.epic { border-color: #7a3cc0; }
.cell .lock { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: var(--bad); }

.dg { padding: 10px 12px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); margin-bottom: 8px; }
.dg h3 { font-size: 16px; }
.dg p { margin: 4px 0 8px; font-size: 14.5px; color: var(--ink-dim); font-style: italic; }
.dg.locked { opacity: 0.5; }
.dg .req { font-size: 13px; color: var(--ink-faint); font-family: var(--caps); }

/* ---------- tooltip & context menu */
.tip { position: fixed; z-index: 57; padding: 9px 12px; max-width: 300px; pointer-events: none; font-size: 14.5px; line-height: 1.3; }
.tip .tn { font-family: var(--caps); font-size: 15px; font-weight: 700; }
.tip .tk { color: var(--ink-faint); font-size: 13px; font-style: italic; margin-bottom: 4px; }
.tip .ta { color: var(--magic); }
.tip .tr { color: var(--bad); }
.tip .tv { color: #d7c7ff; margin-top: 4px; font-size: 13px; }
.tip .td { color: var(--ink-dim); font-style: italic; margin-top: 4px; }
/* never taller than the screen: on a phone held sideways the other hero's menu scrolls, Report… at its foot too */
.ctx { position: fixed; z-index: 40; padding: 4px; display: flex; flex-direction: column; min-width: 150px; max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); overflow-y: auto; overscroll-behavior: contain; }
.ctx > * { flex: none; }
.ctx .ch { font-family: var(--caps); font-size: 13px; color: var(--gold); padding: 4px 8px 6px; border-bottom: 1px solid var(--edge); margin-bottom: 3px; }
.ctx button { background: none; border: none; color: var(--ink); text-align: left; padding: 5px 8px; font-family: var(--serif); font-size: 15px; cursor: pointer; }
.ctx button:hover { background: rgba(120, 90, 50, 0.3); color: #fff; }

/* ---------- toasts & modal */
#toasts { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 60; }
.toast { padding: 7px 16px; background: rgba(14,11,8,0.92); border: 1px solid var(--edge); font-size: 15px; box-shadow: 0 4px 12px #000; animation: toast 3.2s forwards; pointer-events: auto; }
.toast.good { border-color: #3e6a2e; color: #c8f0b0; } .toast.bad { border-color: #7a2a22; color: #ffb4a8; }
.toast .row { margin-top: 6px; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.toast.sticky { animation: none; }
#modal:empty { display: none; }
#modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); z-index: 30; }
.modal-box { padding: 24px 30px; min-width: 360px; max-width: 560px; text-align: center; }
.modal-box h2 { font-size: 34px; letter-spacing: 0.08em; margin-bottom: 6px; }
.modal-box h2.win { color: #f3d38a; text-shadow: 0 0 18px rgba(255, 180, 60, 0.5), 0 3px 6px #000; }
.modal-box h2.lose { color: #c9564a; text-shadow: 0 0 18px rgba(200, 40, 30, 0.5), 0 3px 6px #000; }
.modal-box .flav { font-style: italic; color: var(--ink-dim); margin-bottom: 14px; }
.modal-box .rw { font-size: 17px; margin: 4px 0; }
.modal-box .loot { margin: 12px auto; display: flex; flex-direction: column; gap: 4px; align-items: stretch; max-width: 360px; }
.modal-box .row { margin-top: 18px; }
#conn { position: fixed; top: 0; left: 0; right: 0; text-align: center; padding: 6px; background: #5a1a14; color: #ffd8cc; font-family: var(--caps); z-index: 90; }

.help { width: min(620px, 92vw); font-size: 15.5px; line-height: 1.45; }
.help td { padding: 3px 10px 3px 0; vertical-align: top; }
.help td:first-child { font-family: var(--caps); color: var(--gold); white-space: nowrap; font-size: 13px; }
/* a link in a row (News: the game's X account) */
.help td a { color: var(--gold); text-underline-offset: 3px; }
.help td a:hover { color: #fff; }
/* the window and its table both carry .help: the table fills the window, it does not take the window's width again */
table.help { width: 100%; }
/* What's new (news.js): folded over the table, unfolded from its card after an update */
details.news { margin: 0 0 10px; padding: 6px 10px; border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.28); }
details.news summary { cursor: pointer; font-family: var(--caps); color: var(--gold); font-size: 14px; letter-spacing: 0.04em; }
details.news ul { margin: 6px 0 2px; padding-left: 20px; font-size: 14.5px; line-height: 1.4; color: var(--ink-dim); }
details.news li { margin: 2px 0; }
.news-card .btn { margin-top: 6px; }

/* ---------- item icons */
.ico-wrap { position: relative; display: inline-flex; flex: none; }
.ico-wrap img { display: block; }
.upb { position: absolute; left: -2px; top: -3px; font-family: var(--caps); font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 6px #000; }
.up4 .upb, .steps .up4 { color: #9fe4ff; } .up7 .upb, .steps .up7 { color: #ffd84a; } .up9 .upb, .steps .up9 { color: #ff9a3a; }
.ico-wrap.up7 img { animation: shimmer 2.4s ease-in-out infinite; }
.ico-wrap.up9 img { animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 50% { filter: brightness(1.25) drop-shadow(0 0 4px rgba(255, 200, 80, 0.7)); } }
.cell.rare, .slot.rare { box-shadow: inset 0 0 10px rgba(240, 200, 60, 0.25); } .cell.epic, .slot.epic { box-shadow: inset 0 0 12px rgba(176, 96, 255, 0.35); }
.slot.full.common { border-color: #6b665c; } .slot.full.magic { border-color: #3c56b8; } .slot.full.rare { border-color: #a8902a; } .slot.full.epic { border-color: #7a3cc0; }
.li .ico-wrap { border: 1px solid var(--edge); background: #0c0a08; }
.li.on { border-color: var(--gold); background: rgba(90, 60, 25, 0.35); }
.li[data-up] { cursor: pointer; }
.embers { color: #ffb070; font-size: 14px; margin-left: 8px; white-space: nowrap; }
.embers img { vertical-align: -3px; }
.embers.short { color: var(--bad); }
.tip-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.tip-head .ico-wrap { border: 1px solid var(--edge); background: #0c0a08; }
.tip .tm { color: #efe6d2; }
.tip .tup { color: #ffd84a; font-size: 13px; margin-top: 2px; }
/* what a piece's armour weight does to movement in a fight: a light set's part in the fight's haste blue, heavy in rust */
.tip .twt { color: #9fe0ff; font-size: 13px; margin-bottom: 2px; }
.tip .twt.heavy { color: #d89a6a; }

/* ---------- paper doll: the hero in the middle, each slot by the part it dresses (placed in ui.js) */
.paper { position: relative; margin: 0 auto; background: radial-gradient(ellipse 30% 42% at 50% 52%, rgba(214, 176, 102, 0.12), transparent 72%); }
.paper .slot { position: absolute; margin: 0; z-index: 1; }

/* ---------- merchant tabs & forge */
.tabs { display: flex; gap: 4px; margin: -4px 0 12px; border-bottom: 1px solid var(--edge); }
.tab { font-family: var(--caps); font-size: 13px; color: var(--ink-dim); padding: 6px 14px; cursor: pointer; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; }
.tab:hover { color: var(--gold); }
.tab.on { color: var(--gold); border-color: var(--edge); background: linear-gradient(180deg, #2a2016, #17120e); }
.forge { text-align: center; padding: 14px; border: 1px solid var(--edge); background: radial-gradient(circle at 50% 20%, rgba(255, 140, 40, 0.10), rgba(0,0,0,0.3) 70%); }
.forge .ico-wrap { margin: 4px auto 8px; border: 1px solid var(--edge-hi); background: #0c0a08; }
.forge h3 { font-size: 17px; margin-bottom: 4px; }
.forge .steps { font-family: var(--caps); font-size: 22px; margin: 4px 0 10px; color: var(--ink); }
.forge .cmp { font-size: 15px; color: var(--ink-dim); } .forge .cmp b { color: var(--good); }
.forge .odds { margin: 10px 0 4px; font-size: 16px; }
.forge .cost { margin-bottom: 8px; }
.forge .btn.big { margin-top: 10px; min-width: 160px; }
.forge.forging .ico-wrap { animation: forge 0.32s ease-in-out infinite, forgeheat 1s ease-in forwards; }
@keyframes forge { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-2px, 1px) rotate(-3deg); } 60% { transform: translate(2px, -1px) rotate(3deg); } }
/* the item heating up in its rarity's colour while it is worked (--rc: ui.js upgradeHTML; the light round it: js/forgefx.js) */
@keyframes forgeheat { 0% { box-shadow: 0 0 0 transparent; } 100% { box-shadow: 0 0 18px color-mix(in srgb, var(--rc, #ffd25a) 85%, transparent); border-color: var(--rc, #ffd25a); } }
.forge.forge-ok .ico-wrap { animation: forgeok 0.9s ease-out; }
@keyframes forgeok { 0% { box-shadow: 0 0 0 rgba(255, 210, 90, 0); } 30% { box-shadow: 0 0 30px rgba(255, 210, 90, 0.95); transform: scale(1.15); } 100% { box-shadow: 0 0 0 rgba(255, 210, 90, 0); } }
/* from +7 the item flares longer and brighter; at +10 it rises in gold and keeps a golden light a while */
.forge.forge-ok.up-hi .ico-wrap { animation: forgehi 1.3s ease-out; }
@keyframes forgehi { 0% { box-shadow: 0 0 0 rgba(255, 216, 74, 0); } 25% { box-shadow: 0 0 40px rgba(255, 216, 74, 1), 0 0 12px #fff8e0; transform: scale(1.2); filter: brightness(1.5); } 100% { box-shadow: 0 0 0 rgba(255, 216, 74, 0); } }
.forge.forge-ok.up-max .ico-wrap { animation: forgemax 2.6s ease-out; border-color: #ffd84a; }
@keyframes forgemax { 0% { box-shadow: 0 0 0 rgba(255, 222, 120, 0); } 18% { box-shadow: 0 0 56px rgba(255, 222, 120, 1), 0 0 16px #fffbe8; transform: scale(1.26); filter: brightness(1.7); }
  45% { box-shadow: 0 0 34px rgba(255, 210, 90, 0.85); transform: scale(1.06); filter: brightness(1.2); } 100% { box-shadow: 0 0 10px rgba(255, 210, 90, 0.35); transform: none; } }
.forge.forge-bad .ico-wrap { animation: forgebad 0.5s ease-out; }
@keyframes forgebad { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); box-shadow: 0 0 20px rgba(220, 50, 30, 0.8); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } }
/* a failure: the item goes dull and grey, and slowly takes its colour back */
.forge.forge-bad .ico-wrap img { animation: forgedull 1.6s ease-out; }
@keyframes forgedull { 0% { filter: none; } 12% { filter: grayscale(0.85) brightness(0.5) sepia(0.2); } 100% { filter: none; } }
.forge .res { font-family: var(--caps); font-size: 20px; margin-top: 12px; }
.forge .res.ok { color: #ffd84a; text-shadow: 0 0 12px rgba(255, 200, 60, 0.7); animation: respop 0.5s ease-out; } .forge .res.bad { color: var(--bad); animation: resthud 0.4s ease-out; }
.forge.up-max .res.ok { animation: respop 0.6s ease-out, resglow 1.4s ease-in-out 0.6s 2; }
@keyframes respop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: none; } }
@keyframes resglow { 50% { text-shadow: 0 0 22px rgba(255, 220, 110, 1), 0 0 6px #fff6d0; } }
@keyframes resthud { 0% { transform: translateY(-6px); opacity: 0; } 70% { transform: translateY(1px); opacity: 1; } 100% { transform: none; } }
/* less motion asked for: the forge's light without the shaking, the leaps and the swelling */
@media (prefers-reduced-motion: reduce) {
  .forge.forging .ico-wrap { animation: forgeheat 1s ease-in forwards; }
  .forge.forge-ok .ico-wrap, .forge.forge-ok.up-hi .ico-wrap, .forge.forge-ok.up-max .ico-wrap { animation: forgecalm 1.2s ease-out; }
  .forge.forge-bad .ico-wrap { animation: none; }
  .forge .res.ok, .forge .res.bad, .forge.up-max .res.ok { animation: resfade 0.4s ease-out; }
}
@keyframes forgecalm { 30% { box-shadow: 0 0 30px rgba(255, 216, 90, 0.9); } }
@keyframes resfade { 0% { opacity: 0; } }

/* ---------- settings */
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; width: min(720px, 90vw); }
.set { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 15.5px; cursor: pointer; }
.set > span { flex: 1; } .set small { display: block; font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.set em { font-style: normal; width: 40px; text-align: right; color: var(--ink-dim); font-size: 13px; }
.set input[type=range] { width: 140px; accent-color: #c8963a; }
.set select { background: #0c0a08; color: var(--ink); border: 1px solid var(--edge); font-family: var(--serif); font-size: 15px; padding: 3px 6px; }
.set.tog input { display: none; }
.set.tog i { width: 38px; height: 20px; border-radius: 10px; background: #2a221a; border: 1px solid var(--edge); position: relative; flex: none; transition: background 0.15s; }
.set.tog i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #8a7a60; transition: left 0.15s, background 0.15s; }
.set.tog input:checked + i { background: #5a4220; border-color: var(--gold-dim); }
.set.tog input:checked + i::after { left: 20px; background: var(--gold); }
#b-set { position: absolute; right: 90px; top: 14px; }

/* tier badge (Roman numeral, bottom-left of an icon) */
.tb { position: absolute; left: -2px; bottom: -3px; font-style: normal; font-family: var(--caps); font-size: 10px; font-weight: 900; padding: 0 3px; line-height: 13px; min-width: 11px; text-align: center;
  background: rgba(8,6,4,0.85); border: 1px solid currentColor; border-radius: 2px; text-shadow: 0 1px 1px #000; }
.tb.t1 { color: #b88a5a; } .tb.t2 { color: #cfd6e0; } .tb.t3 { color: #f0c850; } .tb.t4 { color: #6fe0ff; box-shadow: 0 0 6px rgba(111,224,255,0.6); } .tb.t5 { color: #ff6a2a; box-shadow: 0 0 7px rgba(255,106,42,0.75); }
.tip .ttier { font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }

/* ---------- comparison tooltip */
.tip.cards { max-width: none; padding: 0; background: none; border: none; box-shadow: none; }
.tcards { display: flex; gap: 8px; align-items: flex-start; }
.tcard { width: 280px; padding: 10px 12px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--edge); box-shadow: inset 0 0 0 1px #0a0806, 0 6px 20px rgba(0,0,0,0.8); border-radius: 3px; }
.tcard.eq { opacity: 0.93; border-color: #3a3024; }
.tcard .eqh { font-family: var(--caps); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--edge); }
.tdiff { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--edge); font-size: 14px; }
.tdiff .tdh { font-family: var(--caps); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 2px; }
.tdiff .dup { color: #7fe07a; } .tdiff .ddn { color: #ff7a6a; }
/* ---------- bounties */
.qwrap { width: min(980px, 92vw); }
.quests { max-height: 64vh; overflow-y: auto; padding-right: 6px; }
.qcols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 780px) { .qcols { grid-template-columns: 1fr; } }
.qsec { --acc: #5a4a30; --acc-hi: #d6b066; }
.qsec.daily { --acc: #3f6a8e; --acc-hi: #8fc8f0; }
.qsec.weekly { --acc: #6a4c94; --acc-hi: #c9a0ff; }
.qsec.owed { --acc: #a8842a; --acc-hi: #ffe070; margin-bottom: 14px; }
.qsh { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--edge); padding: 2px 2px 5px; margin: 2px 0 9px; }
.qst { font-family: var(--caps); font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc-hi); }
.qsc { font-size: 13.5px; color: var(--ink-dim); }
.qsc.all { color: var(--good); }
.qreset { margin-left: auto; font-size: 13px; color: var(--ink-faint); font-style: italic; white-space: nowrap; }
.qreset b { font-style: normal; font-family: var(--caps); font-size: 12px; color: var(--ink-dim); font-weight: 600; }
.quest { position: relative; padding: 7px 11px 8px 12px; margin-bottom: 7px; border: 1px solid var(--edge); border-left: 3px solid var(--acc);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.24)); }
.quest.going { border-color: #5a4a30; border-left-color: var(--acc-hi); }
.quest .qh { display: flex; align-items: center; gap: 8px; }
.quest .qh b { font-family: var(--caps); font-size: 14.5px; flex: 1; }
.quest .qn { font-family: var(--caps); font-size: 12.5px; color: var(--ink-dim); }
.quest.going .qn { color: var(--acc-hi); }
.quest .qd { font-size: 13.5px; line-height: 1.25; color: var(--ink-dim); font-style: italic; margin: 1px 0 5px; }
.quest.done { opacity: 0.6; }
.quest.done .qh b { color: var(--ink-dim); }
.quest.locked { opacity: 0.42; filter: grayscale(0.7); }
.quest.owed { border-color: #6a5a20; background: rgba(90, 70, 20, 0.25); }
.qtag { font-family: var(--caps); font-size: 11px; letter-spacing: 0.05em; padding: 0 6px; border: 1px solid var(--edge); border-radius: 2px; color: var(--ink-faint); white-space: nowrap; }
.qtag.ok { color: #a8e890; border-color: #3e6a2e; background: rgba(60, 120, 40, 0.2); }
.qtag.daily { color: #8fc8f0; border-color: #3f6a8e; }
.qtag.weekly { color: #c9a0ff; border-color: #6a4c94; }
.qbar { height: 6px; background: #0b0907; border: 1px solid #000; margin: 0 0 6px; }
.qbar > div { height: 100%; background: linear-gradient(180deg, var(--acc-hi), var(--acc)); box-shadow: 0 0 6px rgba(255, 255, 255, 0.08); }
.qbar.claim > div { background: linear-gradient(180deg, #a8e890, #3e6a2e); }
.qr { display: flex; flex-wrap: wrap; gap: 4px 5px; }
.rw { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; font-size: 13px; white-space: nowrap; color: var(--ink);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; }
.rw img { display: block; }
.rw.xp { color: #bfe2ff; } .rw.xp small { font-family: var(--caps); font-size: 10px; }
.rw.sh i { color: var(--gold); font-style: normal; }
.rw.ins { color: #ffe08a; }
.rw.it { font-family: var(--caps); font-size: 11.5px; }
.rw.rar-legendary { border-color: rgba(255, 138, 26, 0.45); }
.ri { vertical-align: -3px; }
.gold { color: var(--gold); }
/* (all but opaque: a town sign under it muddled its counts) */
#quest-tracker { padding: 8px 10px; cursor: pointer; background: rgba(12, 9, 7, 0.96); border: 1px solid var(--edge); }
#quest-tracker:hover { border-color: var(--edge-hi); }

/* ---------- Vesna's Finery shut (mainnet: Ashhold Genesis holders only) */
.genesis-shut { padding: 18px 16px; border: 1px solid var(--gold-dim); background: radial-gradient(ellipse at 50% 0%, rgba(140, 90, 200, 0.18), transparent 70%), rgba(0,0,0,0.3); text-align: center; border-radius: 3px; max-width: 460px; }
.genesis-shut .gs-h { font-family: var(--caps); color: var(--gold); font-size: 16px; letter-spacing: 0.06em; margin-bottom: 8px; }
.genesis-shut p { margin: 0; color: var(--ink-dim); font-size: 15px; line-height: 1.4; }
.genesis-shut b { color: #e2c8ff; }

/* ---------- the wallet: the chip at the top right, and its window (js/walletpanel.js) */
.wal-svg { display: inline-flex; width: 18px; height: 18px; flex: none; }
.wal-svg svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* (all but opaque, pointed at too: a town sign under it showed its words through it) */
#wallet-chip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--gold); text-align: left;
  background: rgba(12, 9, 7, 0.96); border: 1px solid var(--edge-hi); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.08), 0 2px 8px rgba(0,0,0,0.6); }
#wallet-chip:hover { border-color: var(--gold); background: rgba(40, 28, 16, 0.96); }
#wallet-chip b { font-family: var(--caps); font-size: 13px; letter-spacing: 0.08em; }
#wallet-chip .wc-bal { margin-left: auto; color: #d7c7ff; font-size: 14.5px; }
#wallet-chip .wc-bal i, .wal-pill i, .wal-sh { font-style: normal; color: #b49cff; text-shadow: 0 0 6px #7a4cff; }
#wallet-chip:empty { display: none; }
/* the wallet window's first card: the wallet this page is signed in with (its name, the address) and the way to let it
   go, a red Disconnect with the power sign (walletpanel.js; the owner, 4 November 2026: "wallet disconnect yerini daha
   guzel ve belirgin yapar misin"): a pane lit green from its left, as a live line is */
.wal-conn { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; padding: 10px 12px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(121, 210, 122, 0.11), rgba(255, 255, 255, 0.02) 48%);
  box-shadow: inset 0 0 0 1px rgba(121, 210, 122, 0.36), 0 2px 8px rgba(0, 0, 0, 0.35); }
.wal-conn-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: #a7e8a4;
  background: rgba(121, 210, 122, 0.12); box-shadow: inset 0 0 0 1px rgba(121, 210, 122, 0.45); }
.wal-conn-ic .wal-svg { width: 21px; height: 21px; }
.wal-conn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wal-conn-k { display: flex; align-items: center; gap: 6px; font-family: var(--caps); font-size: 12px; letter-spacing: 0.08em; color: #a7e3a2; }
.wal-conn-k .wn { color: var(--ink-dim); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wal-conn code { font-size: 14.5px; color: #f1e6c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wal-disc { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 15px; font-size: 13.5px; }
.wal-disc .wal-svg { width: 16px; height: 16px; }
@media (max-width: 420px) { .wal-conn { flex-wrap: wrap; } .wal-disc { width: 100%; justify-content: center; } }
.wal-on { width: 8px; height: 8px; border-radius: 50%; background: #79d27a; box-shadow: 0 0 6px rgba(121, 210, 122, 0.7); }
.panel.wallet { width: min(470px, calc(100vw - 24px)); }
.wal-hd .wal-medal { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold);
  border: 1px solid var(--gold-dim); background: radial-gradient(circle at 40% 30%, #3a2c1a, #120d08); box-shadow: inset 0 0 8px rgba(0,0,0,0.8), 0 0 10px rgba(214, 176, 102, 0.15); }
.wal-hd .wal-medal .wal-svg { width: 24px; height: 24px; }
.wal-pill { align-self: flex-start; margin-left: auto; padding: 3px 10px; border: 1px solid var(--edge-hi); border-radius: 12px; background: #0c0a08; color: #d7c7ff; font-size: 14.5px; white-space: nowrap; }
.wal-pill + .close { margin-left: 8px; }
.wal-tabs .tab { display: inline-flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
.wal-body { display: flex; flex-direction: column; gap: 8px; }
.wal-lead { margin: 0; color: var(--ink-dim); font-size: 15px; line-height: 1.35; }
.wal-note { display: flex; gap: 10px; padding: 9px 11px; border: 1px solid #7a5a22; background: rgba(90, 64, 20, 0.22); border-radius: 3px; font-size: 14px; color: #e8d6a8; line-height: 1.35; }
.wal-note .wal-svg { color: #f0b84a; width: 22px; height: 22px; margin-top: 1px; }
.wal-note b { color: #ffd98a; }
.wal-lbl { font-family: var(--caps); font-size: 12px; letter-spacing: 0.08em; color: var(--gold-dim); text-transform: uppercase; margin-top: 4px; }
.wal-amt { display: flex; align-items: center; gap: 8px; }
.wal-amt input { flex: 1; min-width: 0; font-size: 20px; padding: 7px 10px; background: #0a0806; border: 1px solid var(--edge-hi); color: var(--ink); }
.wal-amt input:focus { border-color: var(--gold); box-shadow: 0 0 8px rgba(214, 176, 102, 0.25); outline: none; }
.wal-tok { font-family: var(--caps); font-size: 13px; color: var(--gold); letter-spacing: 0.06em; }
.wal-sub { font-size: 13.5px; color: var(--ink-faint); }
.wal-sub.wal-c { text-align: center; margin-top: -2px; }
.wal-sub.wal-bad { color: var(--bad); }
.wal-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 18px; font-size: 15.5px;
  color: #2a1c08; text-shadow: none; border-color: #c89a48; background: linear-gradient(180deg, #f0c66a, #b8862f); box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.5), 0 3px 8px rgba(0,0,0,0.6); }
.wal-go:hover:not(:disabled) { color: #1a1004; background: linear-gradient(180deg, #ffd47e, #c8943a); border-color: #ffe3a6; }
.wal-go:disabled { opacity: 0.55; }
.wal-card { padding: 10px 12px; border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.32); border-radius: 3px; display: flex; flex-direction: column; gap: 5px; }
.wal-k { font-family: var(--caps); font-size: 11.5px; letter-spacing: 0.1em; color: var(--gold-dim); text-transform: uppercase; margin-top: 3px; }
.wal-big { font-size: 20px; color: var(--ink); }
.wal-big code, .wal-kv code { color: var(--gold); font-size: inherit; }
.wal-dim { color: var(--ink-faint); font-style: italic; font-size: 15px; }
.wal-addr { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #0a0806; border: 1px solid var(--edge); }
.wal-addr code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6dcc6; font-size: 12.5px; }
.wal-kv > div:not(.wal-fine) { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; color: var(--ink-dim); }
.wal-kv b { color: var(--ink); font-weight: 600; }
.wal-good { color: var(--good) !important; }
.wal-gold { color: var(--gold) !important; }
.wal-fine { font-size: 12.5px; color: var(--ink-faint); font-style: italic; margin-top: 2px; }
.wal-today { margin-bottom: 8px; gap: 3px; }
.wal-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wal-chips .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border: 1px solid var(--edge); border-radius: 12px; cursor: pointer; font-size: 13.5px; color: var(--ink-dim); background: rgba(0,0,0,0.3); }
.wal-chips .chip:hover { border-color: var(--edge-hi); color: var(--ink); }
.wal-chips .chip.on { border-color: var(--gold); color: var(--gold); background: rgba(90, 64, 25, 0.35); }
.wal-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.wal-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--edge); background: rgba(0,0,0,0.28); border-radius: 3px; }
.wal-ri { flex: none; width: 26px; display: flex; justify-content: center; }
.wal-sh.big { font-size: 20px; }
.wal-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wal-rt b { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.wal-rt small, .wal-rv small { font-size: 12px; color: var(--ink-faint); }
.wal-rv { text-align: right; font-weight: 700; font-size: 14.5px; display: flex; flex-direction: column; white-space: nowrap; }
.wal-rv.wal-in { color: var(--good); }
.wal-rv.wal-out { color: var(--bad); }
.wal-empty { color: var(--ink-faint); font-style: italic; text-align: center; padding: 14px 0; }
.qt-h { display: flex; align-items: center; font-family: var(--caps); font-size: 12px; color: var(--gold-dim); letter-spacing: 0.1em; margin-bottom: 5px; }
.qt-h .qt-c { margin-left: auto; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); }
.qt { margin-bottom: 5px; }
.qt-n { display: flex; gap: 6px; font-size: 14px; color: var(--ink); }
.qt-n span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-n em { font-style: normal; font-family: var(--caps); font-size: 11.5px; color: var(--ink-dim); align-self: center; }
.qt-b { height: 3px; margin-top: 2px; background: #0b0907; }
.qt-b > div { height: 100%; background: #8fc8f0; }
.qt-b.weekly > div { background: #c9a0ff; }
.qt.owed { font-size: 13.5px; color: #ffe070; }
.qt-p { font-size: 12.5px; color: var(--ink-dim); }
.toast.quest { animation-duration: 6s; max-width: min(620px, 92vw); text-align: center; color: var(--ink);
  border-color: #8a7030; background: linear-gradient(180deg, rgba(44, 33, 14, 0.97), rgba(16, 12, 8, 0.97)); }
.toast.quest .qr { justify-content: center; margin-top: 5px; }
.qdone-h { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15.5px; color: var(--ink); }
.qdone-h b { font-family: var(--caps); }
.qheld { margin-top: 5px; font-size: 13.5px; font-style: italic; color: #ffe070; }
.qlog { color: #ffe08a; }
.buff { margin-top: 4px; font-size: 13px; color: #ffe08a; } .buff img { vertical-align: -3px; }
.modal-box .boost { color: #ffe08a; font-size: 14px; }

/* ---------- stat help */
.stats tr.hov { cursor: help; }
.stats tr.hov:hover td { color: var(--gold); }
.tip.wide { max-width: 380px; }
.tip .you { margin-top: 6px; color: #9fd4ff; font-size: 14px; }
.tip .fit { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--edge); }
.tip .fitrow { display: grid; grid-template-columns: 62px 44px 1fr; gap: 6px; font-size: 13px; color: var(--ink-dim); align-items: baseline; }
.tip .fitrow.me { color: var(--ink); }
.tip .fitrow.me .fc { color: var(--gold); }
.tip .fc { font-family: var(--caps); font-size: 11.5px; }
.tip .stars { color: #f0c040; letter-spacing: 1px; } .tip .stars i { color: #3a3226; font-style: normal; }

/* ---------- "better than what you wear" */
.better { position: absolute; right: -4px; top: -5px; width: 16px; height: 16px; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 0 3px rgba(90, 255, 120, 0.75)); animation: better 1.6s ease-in-out infinite; }
.better svg { display: block; }
@keyframes better { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.tip .tbetter { color: #62f07e; font-family: var(--caps); font-size: 12px; font-weight: 700; margin-bottom: 2px; }

/* ---------- skill tree */
.treebar { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.treebar .sp { font-family: var(--caps); font-size: 15px; color: var(--ink-dim); padding: 4px 10px; border: 1px solid var(--edge); }
.treebar .sp.has { color: #62f07e; border-color: #2e6a3a; box-shadow: 0 0 10px rgba(90, 240, 120, 0.25); }
.treebar .btn { margin-left: auto; }
.tree { display: grid; grid-template-columns: repeat(5, 150px); gap: 12px; }
.branch { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border: 1px solid var(--edge); background: rgba(0,0,0,0.28); }
.branch.passive { border-color: #5a4a2a; background: rgba(60, 45, 20, 0.2); }
.branch .bh { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; text-align: center; }
.branch .bh b { font-family: var(--caps); font-size: 13px; }
.branch .bh small { color: var(--ink-faint); font-size: 12px; }
.bico { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff4dc; border: 1px solid var(--edge-hi); border-radius: 3px;
  font-family: 'Segoe UI Symbol', sans-serif; text-shadow: 0 0 8px rgba(255, 200, 120, 0.6), 0 2px 2px #000; }
.node { width: 128px; padding: 6px 6px; text-align: center; border: 1px solid #2d2418; background: #0e0b08; border-radius: 3px; cursor: default; position: relative; }
.node .nr { display: block; font-family: var(--caps); font-size: 11px; color: var(--ink-faint); }
.node .nn { display: block; font-size: 13.5px; color: var(--ink-faint); line-height: 1.15; }
.node.got { border-color: var(--gold); background: linear-gradient(180deg, #3a2c16, #1a130a); }
.node.got .nn { color: var(--gold); } .node.got .nr { color: #e8c878; }
.node.can { border-color: #3e9a52; cursor: pointer; animation: canlearn 1.6s ease-in-out infinite; }
.node.can .nn { color: #b8f0c0; } .node.can:hover { background: #13200e; }
@keyframes canlearn { 50% { box-shadow: 0 0 12px rgba(90, 240, 120, 0.45); } }
.node.next .nn { color: var(--ink-dim); }
.node.far { opacity: 0.55; }
.link { width: 2px; height: 12px; background: #3a2e20; }
.tip .was { color: var(--ink-faint); font-size: 12.5px; }
.rkt { font-family: var(--caps); font-size: 11px; color: #e8c878; border: 1px solid #6a5420; padding: 0 4px; border-radius: 2px; vertical-align: 2px; }
.ab .rk { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 8px; color: #ffd84a; letter-spacing: 1px; text-shadow: 0 1px 1px #000; font-family: sans-serif; }

/* ---------- heroes */
.ccard .hero-tag { font-family: var(--caps); font-size: 12px; color: var(--ink-faint); margin-top: 6px; min-height: 16px; }
.ccard.has .hero-tag { color: var(--gold); }
.ccard.has { border-color: var(--edge-hi); }
#me-frame .swap { position: absolute; right: 6px; top: 6px; font-size: 10px; padding: 2px 6px; }
/* ---------- chapters */
.chps { display: flex; gap: 5px; margin: 2px 0 8px; }
.chp { font-family: var(--caps); font-size: 12px; padding: 3px 9px; border: 1px solid var(--edge); background: #0e0b08; cursor: pointer; color: var(--ink-dim); }
.chp.done { color: var(--gold); border-color: #6a5420; }
.chp.open { color: #b8f0c0; border-color: #3e9a52; }
.chp.shut { opacity: 0.45; cursor: default; }
.chp.on { box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(214, 176, 102, 0.35); background: #2a2016; }
.modal-box .rw.opened { color: #62f07e; font-family: var(--caps); }

/* action cost dots on ability buttons */
.ab .apc { position: absolute; right: 3px; top: 1px; font-size: 8px; color: #8fd0ff; letter-spacing: 1px; text-shadow: 0 1px 1px #000; font-family: sans-serif; z-index: 2; }

/* ============================================================ the Ashen Tankard update */
.list, .scroll, .panel, .quests, .skins, .modal-box.result { scrollbar-width: thin; scrollbar-color: #4d3d28 transparent; }
.rar-legendary { color: #ff8a1a; text-shadow: 0 0 6px rgba(255, 120, 20, 0.45); }
.cell.legendary, .slot.full.legendary { border-color: #c8641a; box-shadow: inset 0 0 12px rgba(255, 130, 30, 0.4); animation: legpulse 2.6s ease-in-out infinite; }
@keyframes legpulse { 50% { box-shadow: inset 0 0 14px rgba(255, 150, 40, 0.55), 0 0 9px rgba(255, 130, 30, 0.55); border-color: #ff9a3a; } }
.tip .tleg { color: #ffb060; margin-top: 4px; font-style: italic; }

/* HUD */
#me-frame .res { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; }
#me-frame .res .shards { margin-top: 0; }
#me-frame .res .embers { margin-left: 0; }
.keys { color: #c8c2b4; font-size: 14px; white-space: nowrap; }
.keys.ob { color: #d8a8ff; }
.keys img, .ri { vertical-align: -3px; }
#me-frame .skn { color: #ffb060; }
#emotes { position: absolute; left: 14px; bottom: 206px; display: flex; gap: 4px; }
#emotes .btn { font-size: 10.5px; padding: 2px 7px; opacity: 0.85; }
#emotes .btn:hover { opacity: 1; }
body.in-battle #emotes { display: none; }
#chat-log .whisper { color: #e8a0ff; }
/* the keepers of Ashhold writing to one player (their panel): pale gold, as their banner */
#chat-log .keeper { color: #ffe3a6; }
#chat-log .keeper .who { font-weight: 700; }

/* ability icons */
.abimg { display: block; border-radius: 2px; }
.abglyph { display: flex; align-items: center; justify-content: center; color: #fff4dc; border-radius: 3px; font-family: 'Segoe UI Symbol', sans-serif;
  text-shadow: 0 0 8px rgba(255, 200, 120, 0.6), 0 2px 2px #000; }
.ab { overflow: hidden; background: #0c0907; }
.ab > .abimg, .ab > .abglyph { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab .k, .ab .rk, .ab .cd, .ab .cnt { z-index: 2; }
.ab .vk { position: absolute; left: 3px; bottom: 1px; z-index: 2; font-family: var(--caps); font-size: 9px; color: #9fe4ff; text-shadow: 0 1px 2px #000; }
.ab.ult { border-color: #d8a830; box-shadow: 0 0 10px rgba(255, 190, 60, 0.35), inset 0 0 12px rgba(0,0,0,0.8); }
.ab.pot { background: radial-gradient(circle at 40% 35%, #4a1a14, #0c0907); }
.ab.pot img { display: block; }
#b-status { flex: none; min-width: 0; width: 160px; }
#b-side { flex: none; width: 128px; }
/* a narrow window: the fight's bar (six abilities and four draughts: about 990px) stays on the screen, its slots
   wrap, and the chat sits above its two rows */
@media (max-width: 1010px) {
  #b-bar { left: 8px; right: 8px; margin: 0 auto; width: fit-content; max-width: calc(100% - 16px); transform: none; }
  #b-abilities { flex-wrap: wrap; justify-content: center; row-gap: 6px; min-width: 0; }
  body.in-battle #chat { bottom: 166px; }
}
#b-end { white-space: nowrap; }
.heroic-tag { font-size: 11px; color: #d8a8ff; border: 1px solid #7a4ab0; padding: 0 5px; margin-left: 4px; text-shadow: 0 0 6px #7a30ff; }
.oc.boss { border-color: #b0782a; }
.oc.champ .n { color: #ffb060; }

/* merchants */
.chk { font-family: var(--serif); font-size: 12.5px; color: var(--ink-faint); text-transform: none; letter-spacing: 0; margin-left: 10px; cursor: pointer; }
.chk input { vertical-align: -2px; }
.sect .btn { margin-left: 8px; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.salvage { width: min(620px, 88vw); }
.li .pr.embers { margin-left: 0; }
.bag { grid-auto-rows: 52px; align-content: start; }
.bag.wide { grid-template-columns: repeat(8, 52px); }
.charwin { grid-template-columns: 400px 220px 440px; }
.panel.charp { max-width: calc(100vw - 12px); }
@media (max-width: 1180px) { .charwin { grid-template-columns: 400px 220px; } .charwin .bagcol { grid-column: 1 / -1; } }
@media (max-width: 720px) { .charwin { grid-template-columns: 444px; } }
/* the pouch under the bags: four draughts, embers, two keys, the elixir and its Use: nine cells, as wide as the bags (444px) */
.pouch { display: grid; grid-template-columns: repeat(9, 46px); grid-auto-rows: 46px; gap: 3.75px; }
.pouch .cell { width: 46px; height: 46px; }
.pouch .pc { cursor: default; border-color: #3a2e20; }
.pouch .pc img { pointer-events: none; }
.pouch .pc .n { position: absolute; right: 3px; bottom: 0; font-family: var(--caps); font-size: 12px; font-weight: 900; color: #f6ecd6; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 5px #000; }
.pouch .pc.pot { border-color: #6a2a24; } .pouch .pc.mat { border-color: #7a4216; } .pouch .pc.key { border-color: #4a4452; } .pouch .pc.con { border-color: #7a6424; }
.pouch .pc:hover { box-shadow: 0 0 8px rgba(214, 176, 102, 0.45); }
.pouch .pc.none img { opacity: 0.3; filter: grayscale(0.85); }
.pouch .pc.none .n { color: var(--ink-faint); }
.pouch .use { align-self: center; justify-self: start; }
/* Ash Memory under the pouch: the lords remembered toward a legendary, and a thin bar */
.ashmem-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--ink-dim); cursor: default; }
.ashmem-row b { color: #ff9a3a; font-weight: 600; }
.ashmem-row .amb { display: block; width: 140px; height: 6px; border-radius: 3px; background: #2a2018; overflow: hidden; }
.ashmem-row .amb i { display: block; height: 100%; background: linear-gradient(90deg, #a8501a, #ff9a3a); }
/* the result screen after a lord: Ash Memory, a Lord's Hoard */
.modal-box .rw.ashmem { color: #ff9a3a; gap: 6px; }
.modal-box .rw.ashmem.pity { font-family: var(--caps); white-space: normal; height: auto; }
.modal-box .rw.hoard { color: #e0bc6a; gap: 10px; }
.modal-box .rw.hoard .mh { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); }
#me-frame .res.pots { margin-top: 2px; }
.pot { color: #f0b4a4; font-size: 14px; white-space: nowrap; }
.pot img { vertical-align: -3px; }
.pot.none { opacity: 0.45; }
.extras { font-size: 13px; color: #ffb060; margin-top: 6px; }
.minibar { display: flex; gap: 4px; }
.minibar .abimg, .minibar .abglyph { border: 1px solid var(--edge-hi); }

/* the Warden */
.warden { width: min(860px, 92vw); }
.keybar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; padding: 6px 10px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); margin-bottom: 10px; }
.keybar b { color: var(--ink); }
.keybar .btn:first-of-type { margin-left: auto; }
.dgwrap { display: grid; grid-template-columns: 290px 1fr; gap: 12px; }
.dglist { max-height: 54vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
.dgl { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 5px 9px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); cursor: pointer; }
.dgl:hover { border-color: var(--edge-hi); }
.dgl.on { border-color: var(--gold); background: rgba(90, 60, 25, 0.35); }
.dgl.shut { opacity: 0.55; }
.dgl .dn { font-family: var(--caps); font-size: 13px; color: var(--gold); }
.dgl .dl { font-size: 12px; color: var(--ink-faint); text-align: right; }
.dgl .dp { grid-column: 1 / 3; font-size: 10px; letter-spacing: 3px; color: #d8b048; }
.dgd { padding: 12px 14px; border: 1px solid var(--edge); background: radial-gradient(ellipse at 50% 0%, rgba(120, 90, 40, 0.14), rgba(0,0,0,0.35) 70%); }
.dgd.heroic { border-color: #6a3aa0; background: radial-gradient(ellipse at 50% 0%, rgba(140, 60, 220, 0.2), rgba(0,0,0,0.4) 70%); }
.dgd h3 { font-size: 19px; margin-bottom: 4px; }
.dgd .flav { font-style: italic; color: var(--ink-dim); font-size: 15px; margin: 0 0 8px; }
.dgmeta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--ink-dim); margin-bottom: 8px; }
.hz-lava { color: #ff8a3a; } .hz-bog { color: #a0c060; } .hz-void { color: #c080ff; } .hz-frost { color: #9fe0ff; }
.dgd .mode { display: flex; gap: 4px; margin: 6px 0 8px; }
.dgd .mode .tab { border: 1px solid var(--edge); margin: 0; }
/* the heroic tiers I-V (30 October 2026): six tabs wrap on a narrow window; a tier not yet open is dimmed */
.dgd .mode.tiers { flex-wrap: wrap; }
.dgd .mode .tab.htab { padding-left: 8px; padding-right: 8px; }
.dgd .mode .tab.locked { opacity: 0.5; cursor: help; }
.dgd .req.htier { color: #c9a8ef; margin-top: -6px; }
.dgd .req { font-size: 13px; color: var(--ink-faint); font-family: var(--caps); margin-bottom: 10px; }
.dgd .resolve { font-size: 13px; color: #ffb060; font-family: var(--caps); margin: -4px 0 10px; cursor: help; }
.dgd .descend { width: 100%; }
/* no spoils far below the hero (CFG.spoilGap): the chapters that pay them nothing, the line under one, the
   companions it pays nothing, the list's tag, the ready check's word */
.chp.nosp { border-style: dashed; color: #b89a8a; }
.chp.nosp.done { color: #a89060; }
.dgd .nospoil { font-size: 13.5px; color: #e8a27a; margin: -4px 0 10px; line-height: 1.35; }
.dgd .nospoil b { font-family: var(--caps); font-weight: 600; color: #f0b088; }
.dgd .nospoil.mate { color: #d8a890; }
.dgd .nospoil.mate b { font-family: inherit; color: var(--ink); }
.dgd .nospoil.way { color: #cdb88e; margin-top: -8px; }
.dgd .wready { width: 100%; margin-top: 6px; }
.dgl .dgns { grid-column: 1 / -1; font-family: var(--caps); font-size: 10.5px; letter-spacing: 0.05em; color: #d89a7a; }
.note.nospnote { color: #e0b098; }
.toast .rdfar { color: #ffb08a; font-size: 13px; margin-top: 3px; }
.dgd.heroic .descend:not(:disabled) { color: #f0d0ff; border-color: #9a5ad0; background: linear-gradient(180deg, #3a1a5a, #1a0c2a); box-shadow: 0 0 14px rgba(160, 80, 255, 0.35); }

/* Ismene's vault */
.vault { display: grid; grid-template-columns: 290px 468px; gap: 18px; }
.vault .bag { grid-template-columns: repeat(8, 52px); }
.vscroll { max-height: 30vh; overflow-y: auto; overflow-x: hidden; padding-right: 6px; }

/* the bar, the bard, the dice */
.curdrink { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #6a5420; background: rgba(90, 70, 20, 0.2); margin-bottom: 10px; font-size: 15px; }
.rumour { margin-top: 12px; font-style: italic; color: #cfc2a8; border-left: 2px solid var(--edge-hi); padding-left: 10px; }
.songs { display: flex; flex-direction: column; gap: 6px; width: min(460px, 86vw); }
.song { padding: 8px 12px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); cursor: pointer; font-size: 14.5px; color: var(--ink-dim); }
.song b { font-family: var(--caps); color: var(--gold); font-size: 14px; }
.song:hover { border-color: var(--edge-hi); }
.song.on { border-color: var(--gold); background: rgba(90, 60, 25, 0.35); }
.dice { text-align: center; }
.dice-res { min-height: 110px; padding: 10px; border: 1px solid var(--edge); background: radial-gradient(ellipse at 50% 30%, rgba(40, 80, 30, 0.35), rgba(0,0,0,0.4)); margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 28px; }
.dice-res.win { border-color: #3e9a52; }
.dice-res.lose { border-color: #7a2a22; }
.dpair { display: flex; flex-direction: column; align-items: center; }
.dpair span { font-family: var(--caps); font-size: 12px; color: var(--ink-faint); }
.dpair b { font-size: 46px; line-height: 1; color: #f4ecd8; font-weight: 400; text-shadow: 0 2px 4px #000; letter-spacing: 2px; }
.dpair em { font-style: normal; font-family: var(--caps); color: var(--ink-dim); }
.dmsg { width: 100%; font-family: var(--caps); font-size: 18px; color: var(--gold); }
.dice-res.win .dmsg { color: #8aff8a; } .dice-res.lose .dmsg { color: #ff8a7a; }
.dice-res.rolling { animation: shake 0.12s linear infinite; }
@keyframes shake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-0.6deg); } 50% { transform: translate(2px, -1px) rotate(0.6deg); } 75% { transform: translate(-1px, -1px); } }
.betrow { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; }
.betrow label { font-family: var(--caps); font-size: 13px; color: var(--ink-dim); }
.betrow input { width: 110px; font-size: 16px; padding: 4px 6px; text-align: center; }
.dlog { margin-top: 8px; font-family: var(--caps); font-size: 12px; }
.dlog .w { color: #8aff8a; } .dlog .l { color: #ff8a7a; }

/* Vesna's looks */
.skins { display: grid; grid-template-columns: repeat(4, 172px); gap: 10px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.skin { border: 1px solid var(--edge); background: radial-gradient(ellipse at 50% 30%, rgba(90, 70, 40, 0.3), rgba(0,0,0,0.45)); padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.skin canvas { width: 120px; height: 140px; }
.skin.on { border-color: var(--gold); box-shadow: 0 0 14px rgba(214, 176, 102, 0.35); }
.skin.locked canvas { filter: grayscale(0.7) brightness(0.55); }
.skin .sn { font-family: var(--caps); font-size: 13.5px; color: var(--gold); }
.skin .sb { font-size: 12.5px; color: #ffb060; min-height: 16px; }
.skin .sd { font-size: 12.5px; color: var(--ink-faint); font-style: italic; line-height: 1.2; min-height: 45px; }
.skin .wearing { font-family: var(--caps); font-size: 12px; color: #8aff8a; }
.skin .lk { font-family: var(--caps); font-size: 12px; color: var(--ink-faint); }

/* hall of fame */
.fame { width: min(520px, 88vw); display: flex; flex-direction: column; gap: 3px; }
.fr { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); }
.fr.me { border-color: var(--gold); background: rgba(90, 60, 25, 0.35); }
.fr .fk { width: 26px; text-align: center; font-family: var(--caps); color: var(--gold); }
.fr .fn { font-family: var(--caps); font-size: 14px; color: var(--ink); flex: 1; }
.fr .fc { font-size: 13px; color: var(--ink-faint); }
.fr .fv { font-family: var(--caps); color: var(--gold); min-width: 56px; text-align: right; }
/* the season (season.js): the Season tab's boards, the Renown mark after a level and Renown's bar at the cap */
.seasonw { width: min(560px, 88vw); }
.sea-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: -2px 0 8px; }
.sea-top .sea-name { font-family: var(--caps); font-size: 16px; letter-spacing: 0.04em; }
.sea-top .sea-left { font-family: var(--caps); font-size: 13px; color: #ffcf6a; }
.sea-top .sea-state { font-size: 14px; font-style: italic; color: var(--ink-dim); }
.sea-tabs { margin-top: 0; }
.sea-tabs .tab { font-size: 12.5px; padding: 4px 11px; }
.seasonw .sea-desc { margin: 0 0 8px; }
.seasonw .hoh-mine { margin: 0 0 8px; }
.seasonw .sea-rows { width: auto; max-height: min(46vh, 430px); overflow-y: auto; padding-right: 4px; }
.seasonw .sea-own { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--edge); }
.seasonw .sea-prize { margin-top: 8px; font-size: 13.5px; }
.seasonw .fv { min-width: 76px; }
.seasonw .sea-pre { font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--ink-dim); }
.fr .sea-bar { display: block; width: 110px; max-width: 100%; height: 4px; margin-top: 3px; background: #0b0907; border: 1px solid #000; }
.fr .sea-bar > i { display: block; height: 100%; background: linear-gradient(180deg, #ffd27a, #a8701e); }
/* a narrow screen: a long name wraps and the Renown bar narrows, so the value stays in sight; on a phone the
   window scrolls, not the list in it, and the tab takes the window's width */
.seasonw .fr .fn { min-width: 0; overflow-wrap: anywhere; }
.seasonw .fr .fc { min-width: 0; }
.seasonw .fr .fv { flex-shrink: 0; }
@media (max-width: 699px), (max-height: 499px) {
  .seasonw .fv { min-width: 0; }
  html.touch .seasonw { width: auto; }
  html.touch .seasonw .sea-rows { max-height: none; overflow: visible; padding-right: 0; }
}
b.renown { font-family: var(--caps); font-weight: 700; color: #ffcf6a; text-shadow: 0 0 6px rgba(255, 180, 70, 0.5); cursor: help; }
#me-frame .bar.xp.renown > div { background: linear-gradient(180deg, #ffd27a, #a8701e); }
#me-frame .bar.xp.renown { box-shadow: 0 0 5px rgba(255, 190, 90, 0.35); }
/* past the level slowdown's start (30 October 2026, season.js xpBar): the bar is the level's, and a thin gold line
   along its top is the Renown bar; the character window says the share Renown takes (slowHead) */
.bar.xp > i.ren { position: absolute; left: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, #ffe7a6, #ffc04d); box-shadow: 0 0 4px rgba(255, 196, 90, 0.7); }
.panel .hd .t .slowl { font-size: 12px; color: #e0bc6a; }
.rw .boost.ren, .qr .ren { color: #ffcf6a; }
/* Glory on a result (2 November 2026, the Hall of Fame's points): pale gold, a touch of glow, like the season's marks */
.rw.rwglory { color: #ffe08a; text-shadow: 0 0 6px rgba(255, 190, 80, 0.45); }

/* skill window: the class tree */
.panel.skills { max-height: 95vh; padding: 12px 16px 14px; }
.panel.skills .hd { margin-bottom: 8px; padding-bottom: 6px; }
.sktop { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
.spbox { display: flex; gap: 8px; align-items: center; padding: 4px 12px 4px 10px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); min-width: 170px; }
.spbox > b { font-family: var(--caps); font-size: 28px; color: var(--ink-dim); line-height: 1; }
.spbox span { display: flex; flex-direction: column; font-family: var(--caps); font-size: 12px; color: var(--ink-dim); line-height: 1.2; }
.spbox small { font-family: var(--serif); font-size: 12px; color: var(--ink-faint); }
.spbox.has { border-color: #2e6a3a; box-shadow: 0 0 12px rgba(90, 240, 120, 0.22); }
.spbox.has > b, .spbox.has span { color: #7af08e; }
.barwrap { display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.barlbl { font-family: var(--caps); font-size: 10.5px; letter-spacing: 0.12em; color: var(--gold-dim); text-transform: uppercase; margin-bottom: 3px; }
.barlbl small { text-transform: none; letter-spacing: 0; font-family: var(--serif); color: var(--ink-faint); font-size: 11.5px; }
.loadbar { display: flex; gap: 5px; }
.lslot { width: 48px; height: 48px; border: 1px solid var(--edge); background: radial-gradient(circle at 50% 40%, #1b1611, #0a0806); position: relative; cursor: pointer; }
.lslot.full { border-color: var(--edge-hi); }
.lslot .abimg, .lslot .abglyph { position: absolute; left: 1px; top: 1px; width: 44px; height: 44px; }
.lslot .lk { position: absolute; left: 2px; top: 0; z-index: 2; font-family: var(--caps); font-size: 10px; color: #d8c8a8; text-shadow: 0 1px 2px #000; }
.lslot.full:hover { border-color: var(--bad); }
.lslot.drop { border-color: #7af08e; box-shadow: 0 0 10px rgba(120, 240, 140, 0.5); }
/* a skill chosen on a phone: the slots wait for the tap that places it */
.loadbar.choose .lslot { border-color: var(--gold); box-shadow: 0 0 8px rgba(214, 176, 102, 0.45); }
.skmain { display: flex; gap: 14px; align-items: stretch; }
.tree { display: flex; flex-direction: column; gap: 8px; }
.tcore { display: flex; align-items: center; gap: 14px; padding: 7px 12px 5px; border: 1px solid #4a3c28; background: linear-gradient(180deg, rgba(90, 70, 40, 0.18), rgba(0,0,0,0.3)); }
.tch { display: flex; flex-direction: column; width: 170px; }
.tch b { font-family: var(--caps); color: var(--gold); font-size: 14px; letter-spacing: 0.08em; }
.tch small { font-size: 12px; color: var(--ink-faint); font-style: italic; line-height: 1.2; }
.tcn { display: flex; gap: 14px; }
.tcn .tnode { position: relative; }
.tbody { display: flex; gap: 8px; }
.tgut { display: flex; flex-direction: column; width: 34px; padding-top: 55px; }
.tgut .tgh { display: none; }
.tgl { height: var(--row, 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px dashed rgba(122, 97, 59, 0.25); font-family: var(--caps); color: var(--ink-faint); }
.tgl b { font-size: 13px; color: #5d5446; font-weight: 700; }
.tgl.on b { color: var(--gold-dim); }
.tgl small { font-size: 9.5px; font-family: var(--serif); white-space: nowrap; }
.tbr { width: 200px; border: 1px solid color-mix(in srgb, var(--bc) 35%, #2a2016); background:
  radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--bc) 14%, transparent), transparent 70%),
  repeating-linear-gradient(180deg, rgba(0,0,0,0.26) 0 var(--row, 64px), rgba(255,255,255,0.018) var(--row, 64px) calc(2 * var(--row, 64px))); }
.tbh { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid color-mix(in srgb, var(--bc) 40%, #2a2016); background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 22%, transparent), transparent); cursor: default; }
.tbh b { font-family: var(--caps); color: var(--bc); font-size: 14px; letter-spacing: 0.06em; text-shadow: 0 1px 3px #000; }
.eltag { font-family: var(--caps); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; border: 1px solid currentColor; padding: 0 3px; border-radius: 2px; }
.tbp { margin-left: auto; min-width: 24px; text-align: center; font-family: var(--caps); font-size: 12px; color: var(--ink-faint); border: 1px solid #3a2e20; border-radius: 9px; padding: 0 6px; background: #0e0b08; }
.tbp.has { color: #111; background: var(--bc, var(--gold)); border-color: transparent; font-weight: 700; }
.tgrid { position: relative; }
.tlines { position: absolute; left: 0; top: 0; pointer-events: none; }
.tlines line { stroke: #3a3024; stroke-width: 2.5; stroke-linecap: round; }
.tlines line.open { stroke: var(--bc); stroke-opacity: 0.4; stroke-dasharray: 4 4; }
.tlines line.got { stroke: var(--bc); stroke-opacity: 0.9; stroke-width: 3.5; filter: drop-shadow(0 0 3px var(--bc)); }
.tnode { position: absolute; width: 46px; cursor: pointer; }
.tnode .tic { width: 46px; height: 46px; position: relative; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,0.7); transition: transform 0.1s, box-shadow 0.15s; }
.tnode .tic .abimg, .tnode .tic .abglyph { display: block; width: 46px; height: 46px; border-radius: inherit; }
.tnode.passive .tic { border-radius: 50%; }
.tnode:hover .tic { transform: translateY(-1px); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--edge-hi), 0 3px 8px #000; }
.tnode.locked .tic .abimg { filter: grayscale(1) brightness(0.38) contrast(0.9); }
.tnode.open .tic .abimg { filter: grayscale(0.6) brightness(0.62); }
.tnode.avail .tic { box-shadow: 0 0 0 1px #000, 0 0 0 2px #3e9a52, 0 0 12px rgba(98, 240, 126, 0.55); animation: canlearn 1.6s ease-in-out infinite; }
.tnode.learned .tic { box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--bc, var(--gold)) 80%, #000), 0 0 8px color-mix(in srgb, var(--bc, var(--gold)) 45%, transparent); }
.tnode.maxed .tic { box-shadow: 0 0 0 1px #000, 0 0 0 2px #e8c060, 0 0 12px rgba(240, 200, 90, 0.6); }
.tnode.ult.learned .tic, .tnode.ult.maxed .tic { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd24a, 0 0 16px rgba(255, 190, 60, 0.75); }
.tnode.sel .tic { outline: 2px solid #fff4d0; outline-offset: 2px; }
.tpips { display: flex; justify-content: center; gap: 2px; margin-top: 3px; }
.tpips i { width: 7px; height: 7px; transform: rotate(45deg) scale(0.8); background: #1a140e; border: 1px solid #4a3c28; }
.tpips i.on { background: linear-gradient(135deg, #ffe89a, #c8901c); border-color: #3a2808; box-shadow: 0 0 4px rgba(255, 200, 80, 0.6); }
.tnode.maxed .tpips i.on { background: linear-gradient(135deg, #fff6c8, #ffb020); }
.tnum { display: block; text-align: center; font-family: var(--caps); font-size: 11px; color: #e8c060; margin-top: 1px; line-height: 1; text-shadow: 0 1px 2px #000; }
.tnum i { font-style: normal; color: var(--ink-faint); font-size: 10px; }
.tnode.locked .tnum, .tnode.open .tnum { color: var(--ink-faint); }
.tplus { position: absolute; right: -7px; top: -7px; width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8af0a0, #2e8a44); border: 1px solid #0c2a14; color: #062010;
  font: 900 15px/17px var(--caps); text-align: center; box-shadow: 0 0 8px rgba(98, 240, 126, 0.8); z-index: 3; }
.tplus:hover { transform: scale(1.15); background: radial-gradient(circle at 40% 35%, #c8ffd0, #3ab456); }
.tslot { position: absolute; left: -5px; top: -6px; min-width: 15px; height: 15px; border-radius: 3px; background: #1e3448; border: 1px solid #6aa8d8; color: #cfe8ff; font: 700 10px/13px var(--caps); text-align: center; z-index: 3; }
.tnode.innate .tic::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 6px; height: 6px; border-radius: 50%; background: #9fd4ff; box-shadow: 0 0 4px #9fd4ff; }
.skside { width: 330px; padding: 10px 12px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); max-height: calc(8 * var(--row, 62px) + 110px); overflow-y: auto; }
.skside h3 { font-size: 16.5px; }
.skside .td { font-style: italic; color: var(--ink-dim); font-size: 14px; margin: 6px 0 4px; line-height: 1.3; }
.skside .tk { font-size: 12.5px; color: var(--ink-faint); }
.skside .sect { margin: 10px 0 5px; }
.skside .lrn { justify-content: flex-start; margin-top: 8px; }
.skside .why { font-size: 13px; color: #d88a70; font-style: italic; }
.skside .mastered { font-family: var(--caps); color: #e8c060; font-size: 13px; }
.skside .barrow { justify-content: flex-start; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.skside .onbar { font-family: var(--caps); font-size: 12px; color: #8fd0ff; }
.skside .howto { margin: 8px 0; font-size: 13px; color: var(--ink-dim); line-height: 1.35; display: flex; flex-direction: column; gap: 4px; }
.skside .plusk { color: #7af08e; }
.bsum { margin-top: 8px; padding: 6px 8px; border-left: 3px solid var(--bc); background: rgba(0,0,0,0.25); font-size: 13px; color: var(--ink-dim); }
.bsum b { font-family: var(--caps); color: var(--bc); }
.bsum .tbp { float: right; }
.rlv { display: flex; flex-wrap: wrap; gap: 4px; }
.rl { font-family: var(--caps); font-size: 11px; padding: 1px 5px; border: 1px solid #3a2e20; color: var(--ink-faint); background: #0e0b08; }
.rl.got { color: #1a1206; background: #e8c060; border-color: transparent; }
.skhead { display: flex; gap: 12px; align-items: flex-start; }
.skhead h3 { font-size: 17px; }
.skhead .vn, .tip .vn { color: #9fe4ff; font-size: 13px; }
.skside .ult { font-size: 9px; color: #ffd24a; border: 1px solid #8a6a20; padding: 0 3px; vertical-align: 2px; }
.sklines { margin-top: 6px; font-size: 13.5px; color: #efe6d2; line-height: 1.35; }
.sklines .tal, .tip .tal { color: #c8b490; font-style: italic; }
.tip .lvq { color: var(--ink-faint); font-size: 12px; }
.ranks { display: flex; align-items: center; }
.rnode { width: 48px; text-align: center; padding: 3px 0; border: 1px solid #2d2418; background: #0e0b08; border-radius: 3px; }
.rnode span { display: block; font-family: var(--caps); font-size: 13px; color: var(--ink-faint); }
.rnode small { display: block; font-size: 10.5px; color: var(--ink-faint); }
.rnode.got { border-color: var(--gold); background: linear-gradient(180deg, #3a2c16, #1a130a); }
.rnode.got span { color: var(--gold); }
.rnode.can { border-color: #3e9a52; cursor: pointer; animation: canlearn 1.6s ease-in-out infinite; }
.rnode.can span { color: #b8f0c0; }
.rnode.far { opacity: 0.5; }
.rlink { width: 8px; height: 2px; background: #3a2e20; }
.vcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vcard { padding: 7px 9px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); font-size: 12.5px; color: var(--ink-dim); cursor: pointer; position: relative; padding-bottom: 22px; line-height: 1.25; }
.vcard b { display: block; font-family: var(--caps); color: #9fe4ff; font-size: 12.5px; margin-bottom: 3px; }
.vcard:hover { border-color: var(--edge-hi); }
.vcard.on { border-color: #4a9ac8; background: rgba(40, 80, 110, 0.3); box-shadow: 0 0 10px rgba(100, 180, 255, 0.25); }
.vcard.dim { opacity: 0.55; cursor: default; }
.vcard .vsel, .vcard .vpick { position: absolute; right: 8px; bottom: 5px; font-family: var(--caps); font-size: 11px; }
.vcard .vsel { color: #8fe0ff; }
.vcard .vpick { color: var(--ink-faint); }
/* specialisations: the strip under each branch, the tier-4 choice, the closed tiers */
.specpill { font-family: var(--caps); font-style: normal; font-size: 11.5px; color: #111; background: var(--bc, var(--gold)); padding: 0 6px; border-radius: 8px; letter-spacing: 0.04em; }
.specpill.none { background: none; color: #ffb070; border: 1px dashed #8a5a2a; }
.specask { margin: -4px 0 8px; padding: 6px 10px; border: 1px solid #3e6a2e; background: linear-gradient(90deg, rgba(60, 120, 50, 0.22), rgba(0,0,0,0.2)); color: #d8f0c8; font-size: 13.5px; }
.tspec { font-family: var(--caps); font-size: 9.5px; letter-spacing: 0.08em; color: #111; background: var(--bc); padding: 0 4px; border-radius: 2px; box-shadow: 0 0 8px var(--bc); }
.tstrip { height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 8px; font-size: 12px; color: var(--ink-faint); border-bottom: 1px solid color-mix(in srgb, var(--bc) 25%, #1e1810); background: rgba(0,0,0,0.25); white-space: nowrap; overflow: hidden; }
.tstrip.choose { justify-content: space-between; cursor: pointer; }
.tstrip.choose .btn { padding: 1px 8px; font-size: 11px; }
.tstrip.choose span { color: color-mix(in srgb, var(--bc) 70%, #fff); font-family: var(--caps); font-size: 11px; }
.tstrip.mine { cursor: pointer; color: #efe6d2; background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 30%, transparent), rgba(0,0,0,0.2)); }
.tstrip.mine i { font-style: normal; color: var(--bc); text-shadow: 0 0 6px var(--bc); }
.tstrip.mine b { font-family: var(--caps); font-size: 12px; color: var(--bc); }
.tstrip.mine span { font-family: var(--caps); font-size: 12px; color: #ffe8a0; }
.tstrip.mine small { margin-left: auto; font-size: 11px; color: var(--ink-faint); }
.tstrip.mine.sel, .tstrip.mine:hover { box-shadow: inset 0 0 0 1px var(--bc); }
.tstrip.side { font-style: italic; }
.tstrip.side.open { color: var(--ink-dim); }
.tbr.side { filter: saturate(0.75); }
.tbr.mine { box-shadow: 0 0 14px color-mix(in srgb, var(--bc) 35%, transparent); border-color: color-mix(in srgb, var(--bc) 70%, #2a2016); }
.tree.nospec .tbr.free:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--bc) 40%, transparent); }
.tshut { position: absolute; left: 0; right: 0; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(8, 6, 4, 0.72) 0 8px, rgba(20, 16, 12, 0.72) 8px 16px); border-top: 1px dashed color-mix(in srgb, var(--bc) 45%, #3a2e20); }
.tshut span { font-family: var(--caps); font-size: 10px; white-space: nowrap; letter-spacing: 0.06em; color: color-mix(in srgb, var(--bc) 60%, #bbb); background: rgba(0,0,0,0.75); padding: 2px 7px; border: 1px solid #3a2e20; transform: rotate(-4deg); }
.tor { position: absolute; width: 26px; height: 18px; z-index: 2; border-radius: 9px; background: #0e0b08; border: 1px solid color-mix(in srgb, var(--bc) 55%, #3a2e20); color: color-mix(in srgb, var(--bc) 75%, #fff);
  font: 700 10.5px/16px var(--caps); text-align: center; letter-spacing: 0.06em; cursor: help; }
.tnode.nochoice .tic::before { content: '✕'; position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 26px; color: rgba(255, 110, 90, 0.55); }
.tgl.deep b, .tgl.deep small { opacity: 0.8; }
.skside .role { color: #cdb88a; font-style: italic; }
.skside .choicek { color: #e8c878; margin: 4px 0; }
.speccard { margin: 8px 0; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--bc) 45%, #2a2016); border-left: 3px solid var(--bc); background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 12%, transparent), rgba(0,0,0,0.3)); font-size: 12.5px; color: var(--ink-dim); line-height: 1.3; }
.speccard .sch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.speccard .sch b { font-family: var(--caps); color: var(--bc); font-size: 14px; letter-spacing: 0.05em; }
.speccard .scs { margin-top: 4px; color: #efe6d2; cursor: help; }
.speccard .scs b, .speccard .scu b { color: var(--bc); font-weight: 400; font-family: var(--caps); font-size: 12px; }
.speccard .scu { margin-top: 2px; color: var(--ink-faint); }
.sigbox { margin: 8px 0; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--bc) 60%, #2a2016); background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 18%, transparent), rgba(0,0,0,0.3)); font-size: 13px; color: #efe6d2; line-height: 1.35; cursor: pointer; }
.sigbox b { font-family: var(--caps); color: var(--bc); font-weight: 400; }
.sigbox small { color: var(--ink-faint); font-size: 12px; }
.sigicon { display: inline-block; width: 22px; text-align: center; color: var(--bc, var(--gold)); font-size: 18px; text-shadow: 0 0 8px var(--bc, var(--gold)); }
.skhead .sigicon { width: 60px; height: 60px; line-height: 60px; font-size: 40px; border: 1px solid color-mix(in srgb, var(--bc) 60%, #000); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bc) 25%, #0e0b08), #0e0b08); }
.ranks.r10 { gap: 3px; flex-wrap: wrap; }
.ranks.r10 .rnode { width: 27px; padding: 2px 0; }
.ranks.r10 .rnode span { font-size: 12px; }
.ranks.r10 .rnode small { font-size: 9.5px; }
.rnode.deep { border-style: dashed; }
.rnode.deep.got { border-style: solid; }
.rnode.spec { opacity: 0.35; background: repeating-linear-gradient(135deg, #0e0b08 0 4px, #1a140e 4px 8px); }
.note.arenarule { border-left: 3px solid #d8a84a; padding-left: 8px; color: #efe0bc; }
@media (max-height: 830px) {
  .panel.skills { padding: 8px 14px 10px; }
  .panel.skills .hd { margin-bottom: 4px; padding-bottom: 4px; }
  .sktop { margin-bottom: 6px; }
  .tcore { padding: 4px 12px 3px; }
  .tbh { height: 26px; }
  .tstrip { height: 22px; }
  .tgut { padding-top: 49px; }
  .specask { margin: -2px 0 5px; padding: 3px 8px; font-size: 12.5px; }
  .skside { max-height: 540px; }
}

/* results: doors, shrines, the damage meter */
.modal-box.result { max-width: 680px; max-height: 92vh; overflow-y: auto; }
.bstats { margin: 10px auto 4px; border-collapse: collapse; font-size: 14px; }
.bstats th { font-family: var(--caps); font-size: 11px; color: var(--ink-faint); font-weight: 400; padding: 2px 10px; }
.bstats td { padding: 2px 10px; text-align: right; color: var(--ink-dim); }
.bstats td:first-child { text-align: left; color: var(--ink); }
.bstats tr.me td:first-child { color: var(--gold); }
.bstats td.top { color: #ffd84a; }
.doors { display: flex; gap: 10px; justify-content: center; }
.door { flex: 1; max-width: 230px; display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 10px; cursor: pointer; text-align: center; font-family: var(--serif);
  color: var(--ink-dim); font-size: 13.5px; border: 1px solid var(--edge-hi); background: linear-gradient(180deg, #2a2016, #120d09); border-radius: 40px 40px 3px 3px; }
.door b { font-family: var(--caps); font-size: 15px; color: var(--gold); }
.door:hover:not(:disabled) { border-color: var(--gold); box-shadow: 0 0 14px rgba(214, 176, 102, 0.35); }
.door:disabled { opacity: 0.55; cursor: default; }
.door.elite { border-color: #8a2a22; background: linear-gradient(180deg, #3a1410, #140806); } .door.elite b { color: #ff9a8a; }
.door.treasure { border-color: #a8902a; background: linear-gradient(180deg, #3a2e10, #141006); } .door.treasure b { color: #ffe070; }
/* a lost descent's recap (ui.js recapHTML) and the Ashen Resolve it leaves */
.recap { margin: 4px auto 6px; max-width: 520px; text-align: left; font-size: 14.5px; color: var(--ink-dim); }
.recap .rc-far b { font-family: var(--caps); font-weight: 400; color: var(--gold); }
.recap .rc-sect { font-family: var(--caps); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 8px 0 2px; }
.recap .rc-hurt { list-style: none; margin: 0; padding: 0; }
.recap .rc-hurt li { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; padding: 1px 0; }
.recap .rc-ab { font-family: var(--caps); color: var(--gold); }
.recap .rc-src { color: var(--ink-faint); font-size: 12.5px; }
.recap .rc-dmg { font-weight: 400; color: #ff9a8a; }
.recap .rc-stun { font-style: italic; color: #ffe08a; }
.recap .rc-rounds { margin-top: 6px; }
.recap .rc-tip { margin-top: 8px; padding: 6px 9px; border-left: 3px solid #d8a84a; background: rgba(90, 70, 20, 0.18); color: #efe0bc; }
.recap .rc-tk { font-family: var(--caps); font-size: 11px; letter-spacing: 0.08em; color: var(--gold); margin-right: 6px; }
.recap .rc-tip b { font-weight: 400; color: var(--gold); }
.recap .rc-res { margin-top: 8px; padding: 6px 9px; border: 1px solid #7a4a1a; background: linear-gradient(90deg, rgba(160, 80, 20, 0.22), rgba(0, 0, 0, 0.25)); color: #f3d9b0; }
.recap .rc-res b { font-family: var(--caps); font-weight: 400; color: #ffb060; margin-right: 8px; }
.door.boss { border-color: #7a4ab0; background: linear-gradient(180deg, #2a1440, #0e0816); } .door.boss b { color: #d8a8ff; }
/* what waits behind a door: each kind of monster, a lord first, and the chests */
.door .foes { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 9px; margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.door .foe { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink); line-height: 1.15; text-shadow: 0 1px 2px #000; }
.door .foe img { flex: none; border-radius: 3px; background: rgba(0, 0, 0, 0.35); }
.door .foe.lord { flex-basis: 100%; justify-content: center; font-family: var(--caps); color: #e8c8ff; }
.door .foe.chest { color: #ffe070; }
.shrine { margin-top: 6px; }
.blessings { display: flex; gap: 8px; justify-content: center; }
.bless { flex: 1; max-width: 190px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; cursor: pointer; font-family: var(--serif); font-size: 12.5px; color: var(--ink-dim);
  border: 1px solid #5a6a8a; background: radial-gradient(ellipse at 50% 20%, rgba(120, 160, 255, 0.18), rgba(0,0,0,0.4)); }
.bless b { font-family: var(--caps); color: #cfe0ff; font-size: 13px; }
.bless:hover { border-color: #9fc0ff; box-shadow: 0 0 12px rgba(140, 180, 255, 0.35); }
.shrine-done { color: #cfe0ff; font-style: italic; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; }

/* picking many items: batch sell, break, store; locked items */
.cell.picked { outline: 2px solid #62f07e; outline-offset: -2px; box-shadow: inset 0 0 14px rgba(98, 240, 126, 0.35); }
.cell.picked::after { content: '✔'; position: absolute; left: 3px; top: 1px; font-size: 12px; color: #62f07e; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.list .li.picked { background: rgba(98, 240, 126, 0.1); box-shadow: inset 3px 0 0 #62f07e; }
.list .li.locked { opacity: 0.8; }
.lk-b { position: absolute; right: 2px; bottom: 2px; line-height: 0; filter: drop-shadow(0 0 2px #000); }
.list .li .lk-b { position: static; margin: 0 4px 0 -8px; align-self: flex-start; }
.pickbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; padding: 6px; border: 1px solid #2d2418; background: rgba(10, 8, 6, 0.55); }
.pickbar.on { border-color: rgba(98, 240, 126, 0.55); }
.pickbar .btn.on { border-color: #62f07e; color: #b6ffc4; }
.pickbar kbd, .note.keys kbd { font-size: 10px; padding: 0 3px; margin-left: 2px; opacity: 0.8; }
.pickbar .pickgo { margin-left: auto; display: flex; gap: 5px; }
.note.keys { font-size: 12.5px; margin-top: 4px; }

/* ---------------------------------------------------------------- the party: frame, window, board */
#party-frame .ph { display: flex; justify-content: space-between; align-items: center; font-family: var(--caps); font-size: 11.5px; letter-spacing: 0.1em; color: var(--gold-dim); text-transform: uppercase; padding: 0 2px; }
.lfgtag { font-size: 10.5px; color: #e8d090; border: 1px solid #6a5420; padding: 0 5px; letter-spacing: 0.04em; text-transform: none; font-family: var(--serif); font-style: italic; }
.pm .pmi { min-width: 0; flex: 1; }
.pm .where { font-size: 11.5px; color: var(--ink-faint); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm .pa { display: flex; flex-direction: column; align-self: flex-start; }
.pm .x.up:hover { color: #f0c040; }
.rdy { margin-left: 5px; font-size: 13px; }
.rdy.ok { color: var(--good); } .rdy.no { color: var(--bad); } .rdy.wait { color: var(--ink-faint); }
#party-frame .prow { display: flex; gap: 4px; justify-content: flex-end; }
#party-frame .prow .btn { align-self: auto; }
.pwin { width: min(720px, 90vw); }
.pwin .pw-inv { display: flex; gap: 6px; margin-bottom: 8px; }
.pwin .pw-inv input { flex: 1; font-size: 15px; padding: 5px 8px; }
.pwl { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.lfgform { padding: 4px 10px 10px; border: 1px solid var(--edge); background: rgba(0,0,0,0.25); }
.lfgform .sect { margin-top: 6px; }
.lfrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.lfrow select, .lfrow input { background: #0c0a08; color: var(--ink); border: 1px solid var(--edge); font-family: var(--serif); font-size: 15px; padding: 4px 6px; }
.lfrow #lf-note { flex: 1; min-width: 200px; }
.lfrow .lvl { font-size: 14px; color: var(--ink-dim); }
.lfrow .lvl input { width: 56px; margin: 0 2px; }
.lfrow .chk { font-size: 14px; color: var(--ink-dim); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.lfg { display: flex; gap: 10px; align-items: center; padding: 7px 9px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); }
.lfg.mine { border-color: #6a5420; background: rgba(90, 60, 25, 0.25); }
.lfg.k-duo { box-shadow: inset 3px 0 0 #c89a40; }
.lfg.k-dungeon { box-shadow: inset 3px 0 0 #8a5a4a; }
.lfg.k-arena { box-shadow: inset 3px 0 0 #b04a3a; }
.lfg .lb { flex: 1; min-width: 0; }
.lfg .lt { font-family: var(--caps); font-size: 14px; color: var(--gold); }
.lfg .lw { font-size: 13px; color: var(--ink-dim); }
.lfg .ln { font-size: 14px; font-style: italic; color: var(--ink); margin-top: 2px; }
.lfg .lr { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.lfg .tag { font-family: var(--caps); font-size: 11px; color: var(--gold); }
.seats { display: flex; gap: 3px; }
.seats i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #6a5420; background: #0e0b08; }
.seats i.on { background: radial-gradient(circle at 40% 35%, #f0d080, #a07020); border-color: #c89a40; }
.who { display: flex; gap: 9px; align-items: center; padding: 5px 8px; border: 1px solid var(--edge); background: rgba(0,0,0,0.25); }
.who.me { border-color: #6a5420; }
.who.off { opacity: 0.5; }
.who .wb { flex: 1; min-width: 0; }
.who .wn { font-family: var(--caps); font-size: 14px; color: var(--ink); }
.who .wn i { font-family: var(--serif); color: var(--ink-faint); font-size: 13px; }
.who .ws { font-size: 13px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pw-party { display: flex; flex-direction: column; gap: 5px; }

/* the Warden: the tomb above the ladder */
.dgl.duo { border-color: #8a6a28; background: linear-gradient(90deg, rgba(120, 80, 20, 0.35), rgba(30, 40, 70, 0.35)); }
.dgl.duo .dn { color: #ffe0a0; }
.dgl.duo.on { border-color: #ffd070; box-shadow: 0 0 10px rgba(255, 200, 100, 0.3); }
.dgsep { font-family: var(--caps); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 2px 0; }
.dgd.duo { border-color: #8a6a28; background: radial-gradient(ellipse at 30% 0%, rgba(200, 150, 50, 0.18), rgba(0,0,0,0.35) 55%), radial-gradient(ellipse at 80% 100%, rgba(90, 130, 200, 0.16), transparent 60%); }
.duorules { margin: 4px 0 10px; padding-left: 18px; font-size: 14px; color: var(--ink-dim); line-height: 1.3; }
.duorules li { margin-bottom: 4px; }
.duorules b { color: #f0d090; }

/* in a fight: your companions on the left */
#b-party { position: absolute; left: 12px; top: 90px; width: 210px; display: flex; flex-direction: column; gap: 5px; }
.bpm { display: flex; gap: 7px; align-items: center; padding: 5px 7px; background: rgba(12,9,7,0.85); border: 1px solid var(--edge); cursor: pointer; }
.bpm:hover { border-color: var(--edge-hi); }
.bpm.cur { border-color: var(--gold); box-shadow: 0 0 10px rgba(240, 200, 100, 0.45); }
.bpm.bonded { box-shadow: inset 0 0 0 1px rgba(140, 200, 255, 0.45); }
.bpm.dead { opacity: 0.7; }
.bpm.dead img { filter: grayscale(1) brightness(0.6); }
.bpm img { border-radius: 50%; border: 1px solid var(--edge-hi); }
.bpm .bpi { flex: 1; min-width: 0; }
.bpm .bpn { font-family: var(--caps); font-size: 12.5px; color: #9fd4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpm .bpn i { font-family: var(--serif); color: var(--ink-faint); }
.bpm .bd { color: #9fd4ff; }
.bpm .bar { margin-top: 3px; height: 6px; }
.bpm .bar .sh { position: absolute; left: 0; top: 0; height: 2px; background: rgba(160, 200, 255, 0.9); }
.bpm .bps { font-size: 11.5px; color: var(--ink-dim); display: flex; justify-content: space-between; gap: 4px; margin-top: 1px; }
.bpm.dead .bps { color: #b8ffc8; font-style: italic; }
.bpm .mk i { font-style: normal; font-size: 11px; margin-left: 1px; }
#b-status .bond { color: #9fd4ff; font-family: var(--caps); font-size: 12px; }
#b-status .resolve { color: #ffb060; font-family: var(--caps); font-size: 12px; cursor: help; }
#b-status .bless-on { display: flex; align-items: center; gap: 3px; color: #e8d290; font-family: var(--caps); font-size: 12px; }
#b-status .bless-on > span:first-child { margin-right: 2px; }
#b-status .bless-on .bo { display: inline-flex; cursor: help; }
#b-status .bless-on img { display: block; }
@media (max-width: 900px) { #b-party { top: 120px; width: 170px; } }

/* a word from the keepers (the admin panel) */
.toast.announce { border-color: var(--gold); background: linear-gradient(180deg, rgba(58, 40, 20, 0.96), rgba(20, 14, 9, 0.96)); color: var(--ink); font-size: 17px; text-align: center; max-width: min(640px, 92vw); cursor: pointer; box-shadow: 0 0 18px rgba(214, 176, 102, 0.35), 0 4px 12px #000; }
.toast.announce .ah { font-family: var(--caps); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }

/* ---------- the Exchange (M): Ismene's market */
.mkwin { width: min(940px, 94vw); }
.mkwin .bad { color: var(--bad); }
.panel.mkpanel .tabs .tab i { font-style: normal; color: var(--ink-faint); font-family: var(--serif); }
.mkf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.mkf select, .mkf input { background: #0c0a08; color: var(--ink); border: 1px solid var(--edge); font-family: var(--serif); font-size: 14.5px; padding: 4px 6px; }
.mkf #mk-text { flex: 1; min-width: 110px; }
.mkf .mklv { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--ink-dim); white-space: nowrap; }
.mkf .mklv input { width: 46px; text-align: center; }
.mkl { max-height: 46vh; }
.mkr { min-height: 50px; }
.mkr .nm { min-width: 0; }
.mkr .mks { width: 128px; flex: none; font-size: 13.5px; color: var(--ink-dim); text-align: right; line-height: 1.2; }
.mkr .mks .mkby { font-family: var(--caps); font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The price column (the Exchange trades in $HOA since 27 October 2026, the owner: "player markette item satisi hoa
   ile olacak"): right-aligned in tabular figures, and a price in $HOA always has its two decimals, so the points,
   the coins' figures and the $HOA marks line up row under row, up to 1,000,000.00. Red: more than the hero has (its
   Buy is off). An old listing put up in soulshards keeps the ◆ and says so. */
.mkr .pr { width: 150px; flex: none; text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.mkr .pr.short, .mkr .pr.short .hoa, .mkr .pr.short .hoa small { color: #e8806c; }
.mkr .pr.mkold { color: #d7c7ff; }
.mkr .pr.mkold.short { color: #e8806c; }
.mkr .pr.mkold i, .mksh i { font-style: normal; color: #b49cff; text-shadow: 0 0 6px #7a4cff; }
.mkr .pr.mkold small { font-family: var(--caps); font-size: 10.5px; letter-spacing: 0.05em; color: #a493d6; }
.mksh { color: #d7c7ff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mkr .btn { min-width: 74px; }
.mkr.expired { background: rgba(60, 20, 14, 0.25); }
.mkr.expired .ico-wrap { filter: grayscale(0.6) brightness(0.8); }
.mkp { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; font-size: 14px; color: var(--ink-dim); }
.mkhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14.5px; color: var(--ink-dim); }
.mksellw { display: grid; grid-template-columns: auto 1fr; gap: 20px; }
.mksellw .bag { grid-template-columns: repeat(8, 52px); }
.mksell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; text-align: center; border: 1px solid var(--edge); background: radial-gradient(circle at 50% 15%, rgba(180, 156, 255, 0.08), rgba(0,0,0,0.3) 70%); }
.mksell .ico-wrap { border: 1px solid var(--edge-hi); background: #0c0a08; }
.mksell h3 { font-size: 17px; }
.mksell .rq { font-size: 13.5px; color: var(--ink-faint); }
.mkprice { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--caps); font-size: 13px; color: var(--gold-dim); letter-spacing: 0.06em; }
/* the price is asked in $HOA: its coin before the box, the mark after it, the figures to the cent */
.mkprice small { font-size: 11px; letter-spacing: 0.05em; color: #d8a850; }
.mkprice input { width: 160px; font-size: 19px; text-align: right; padding: 5px 8px; font-variant-numeric: tabular-nums; }
.mkcut { margin: 2px 0 4px; }
.mkcut td { font-size: 14px; }
.mkcut td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.mkwhy { min-height: 18px; color: var(--bad); font-size: 13.5px; font-style: italic; }
/* (nothing typed yet is no refusal: said in grey) */
.mkwhy.soft { color: var(--ink-faint); }
.cell.mksel { outline: 2px solid var(--gold); outline-offset: -2px; box-shadow: 0 0 12px rgba(214, 176, 102, 0.65), inset 0 0 12px rgba(214, 176, 102, 0.3); }
.mkn .mkc { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #b49cff; text-shadow: 0 0 8px #7a4cff; border: 1px solid var(--edge); background: #0c0a08; }
/* a sale's price and what the seller got, right-aligned under each other */
.mkn .mks { flex: none; text-align: right; font-size: 13.5px; color: var(--ink-dim); line-height: 1.35; font-variant-numeric: tabular-nums; }
.mkn .mks .hoa { vertical-align: -2px; }
/* the tooltip's line under a listing in $HOA (its coin and figures gold, as everywhere) */
.tip .tv.mktv { color: var(--ink-dim); }
/* (narrow: the coin and the ◆ are the marks; the words after them make room) */
@media (max-width: 900px) { .mksellw { grid-template-columns: 1fr; } .mkr .mks { width: 96px; } .mkr .pr { width: 92px; font-size: 13.5px; } .mkr .pr small { display: none; } }
/* A phone (under 600 px): a row in two lines. In one line of five columns the item's name was left a word a line
   ("Dread / Oath / Lv / 7 / · / Neck"), worse once a price became a coin and two decimals. The icon spans both lines;
   the name and its line, the price on the right with its mark again ($HOA, or an old listing's "soulshards"); under
   them who sells it and the time left, and Buy (or Cancel, Take back) under the price. */
@media (max-width: 599px) {
  .mkr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: 'ico nm pr' 'ico mks btn'; column-gap: 8px; row-gap: 4px; padding: 6px 8px; }
  .mkr > .ico-wrap { grid-area: ico; }
  .mkr .nm { grid-area: nm; }
  .mkr .mks { grid-area: mks; width: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; text-align: left; }
  .mkr .pr { grid-area: pr; width: auto; justify-self: end; }
  .mkr .pr small { display: inline; }
  .mkr .btn { grid-area: btn; justify-self: end; }
}
/* its top edge stays put: centred, the window moved with every tab and every pick
   (a double click in the bags then landed on the item below). It sits where its
   tallest page (30 rows) would be centred, and at least 6vh from the top. */
.panel.center.mkpanel { top: max(6vh, calc(50vh - 340px)); transform: translateX(-50%); }
/* toasts stack over the top of it: while it is open they let the mouse through to the
   rows under them (the toasts with buttons are sticky and keep theirs) */
body:has(.mkpanel) .toast:not(.sticky) { pointer-events: none; }
/* a question box (flee, sell, buy …) is answered by clicking through any plain toast stacked over it */
body:has(#modal:not(:empty)) .toast:not(.sticky) { pointer-events: none; }
.mkprice input:disabled { opacity: 0.45; cursor: not-allowed; }
/* the form keeps the height of a priced item, so listing one does not pull the window's
   bottom edge up from under the pointer (a double click's second half could fall into the town) */
.mksell { min-height: 356px; justify-content: center; }
/* eight buttons in the bottom bar: below 1400 px they close up, below 1320 px they drop
   their key hints, and the bar never runs under the chat box (it wraps first) */
#menu-btns { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - min(440px, 44vw) - 44px); }
@media (max-width: 1400px) { #menu-btns { gap: 5px; } #menu-btns .btn { padding: 6px 9px; } }
@media (max-width: 1320px) { #menu-btns kbd { display: none; } }
@media (max-width: 1120px) { #menu-btns { gap: 4px; } #menu-btns .btn { padding: 6px 7px; } }

/* a newer version of the game is running: offer a refresh (main.js 'build') */
#update { position: fixed; top: 0; left: 0; right: 0; text-align: center; padding: 8px 12px; background: #4a3a12; color: #ffe9b0; font-family: var(--caps); z-index: 95; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
#update[hidden] { display: none; }
#update .btn { margin-left: 10px; vertical-align: middle; }

/* ---------- the endgame: mail (N), deeds and titles (Y), paragon */
/* the title a hero wears, and a paragon level after the level */
#me-frame .mttl { font-size: 13px; font-style: italic; color: #e0bc6a; margin: -3px 0 1px; }
.para { font-family: var(--caps); font-weight: 700; color: #ffd27a; text-shadow: 0 0 6px rgba(255, 190, 80, 0.55); }
#me-frame .bar.xp.para > div { background: linear-gradient(180deg, #ffe08a, #b8862a); }
.panel .hd .hdttl { font-family: var(--serif); font-size: 15px; color: #e0bc6a; margin-left: 6px; letter-spacing: 0; }
.tip .ttl-tip { font-style: italic; color: #e0bc6a; margin-top: -2px; }
.mailed { color: #e0bc6a; }

/* the Mail button's badge: how many letters wait; it glows while some are new */
#menu-btns .mailbtn { position: relative; }
.mbadge { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #5a4630; color: #f4e2b0;
  font: 700 11px/18px var(--serif); text-align: center; border: 1px solid #0b0806; box-shadow: 0 1px 3px #000; pointer-events: none; }
.mbadge.new { background: #b0361f; color: #fff; animation: mbadge 1.6s ease-in-out infinite; }
.mbadge[hidden] { display: none; }
@keyframes mbadge { 50% { box-shadow: 0 0 10px 2px rgba(255, 110, 70, 0.75), 0 1px 3px #000; } }

/* the mail window */
.mlpanel .mlhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-dim); margin: -2px 0 8px; }
.mlpanel .mlhead .bad, .mlr .bad { color: var(--bad); }
.mll { width: min(620px, 90vw); max-height: min(56vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.mlr .mls { width: 170px; font-size: 13.5px; color: var(--ink-dim); text-align: right; }
.mlr.fresh { border-color: rgba(224, 188, 106, 0.5); background: rgba(90, 64, 25, 0.32); }

/* the deeds window */
.achwin { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; width: min(990px, 94vw); }
.achmain { min-width: 0; }
.achpanel .tabs { flex-wrap: wrap; gap: 2px; }
.achpanel .tabs .tab { padding: 6px 9px; font-size: 12.5px; }
.achpanel .tabs .tab i { font-style: normal; font-family: var(--serif); color: var(--ink-faint); margin-left: 2px; }
.achl { max-height: min(60vh, 560px); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.ach { display: flex; gap: 10px; padding: 7px 10px; border: 1px solid #2c2318; background: rgba(0, 0, 0, 0.28); opacity: 0.88; }
.ach.done { border-color: #6a5430; background: linear-gradient(90deg, rgba(90, 64, 25, 0.38), rgba(0, 0, 0, 0.25)); opacity: 1; }
.achg { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ink-faint);
  border: 1px solid var(--edge); background: radial-gradient(circle at 40% 30%, #2a2016, #0c0a08); border-radius: 50%; }
.ach.done .achg { color: #ffd98a; border-color: var(--gold); text-shadow: 0 0 8px rgba(255, 200, 100, 0.7); box-shadow: 0 0 10px rgba(214, 176, 102, 0.3); }
.ach.rare.done .achg { color: #ffb070; border-color: #ff9a40; }
.achb { flex: 1; min-width: 0; }
.achh { display: flex; align-items: center; gap: 8px; font-size: 15.5px; }
.achh b { font-family: var(--caps); font-size: 14px; color: var(--ink); }
.ach.done .achh b { color: var(--gold); }
.achr { font-family: var(--caps); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #ffb070; border: 1px solid #7a4a1a; padding: 0 4px; }
.achp { margin-left: auto; font-family: var(--caps); font-size: 13px; color: #ffd98a; min-width: 30px; text-align: right; }
.achp::after { content: ' pts'; font-family: var(--serif); font-size: 11px; color: var(--ink-faint); }
.achd { font-size: 14px; color: var(--ink-dim); }
.achbar { height: 6px; background: #0b0907; border: 1px solid #000; margin: 4px 0 2px; }
.achbar > div { height: 100%; background: linear-gradient(180deg, #d6b066, #7a5a26); }
.achc, .achw { font-size: 12.5px; color: var(--ink-faint); }
.achw { color: var(--good); }
/* a deed the season's level cap keeps closed (achieve.js closedAt) */
.ach.shut { opacity: 0.55; }
.achx { font-style: italic; }
.acht { font-size: 12.5px; color: var(--ink-faint); }
.acht i { color: #e0bc6a; }
.achon { font-family: var(--caps); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); margin-left: 4px; }
.achside { border-left: 1px solid var(--edge); padding-left: 14px; min-width: 0; }
.achside .sect:first-of-type { margin-top: 10px; }
.achme { text-align: center; padding: 8px 6px 10px; border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.3); }
.achme .nm { font-family: var(--caps); font-size: 17px; color: var(--gold); }
.achme .mttl { font-style: italic; color: #e0bc6a; font-size: 15px; }
.achme .none { color: var(--ink-faint); font-size: 13px; }
.ttls { display: flex; flex-wrap: wrap; gap: 4px; }
.ttl { font-family: var(--serif); font-size: 13px; font-style: italic; color: #e0bc6a; background: #1d160f; border: 1px solid var(--edge); padding: 2px 8px; border-radius: 10px; cursor: pointer; }
.ttl:hover { border-color: var(--gold); color: #ffe3a6; }
.ttl.on { border-color: var(--gold); background: linear-gradient(180deg, #4a3822, #2a1f13); color: #ffe3a6; box-shadow: 0 0 6px rgba(214, 176, 102, 0.4); }
.ttl.off { color: var(--ink-faint); border-style: dashed; cursor: help; opacity: 0.7; }
.qtag.achtag { background: #6a4a1a; color: #ffe0a0; }
@media (max-width: 860px) { .achwin { grid-template-columns: 1fr; } .achside { border-left: none; padding-left: 0; } }

/* the Hall of Fame: more lists, and a title under each name */
.famep .tabs { flex-wrap: wrap; width: min(560px, 88vw); }
.fr .fn .ftl { display: block; font-family: var(--serif); font-size: 12.5px; font-style: italic; color: #e0bc6a; margin-top: -2px; letter-spacing: 0; }
/* ---------- the arena: ranked bouts by level (Varus, the queue), friendly bouts, the Hall of Heroes */
.note.arenalv { border-left: 3px solid #6f8a9a; padding-left: 8px; }
.arenarange { margin-top: 8px; font-family: var(--caps); font-size: 13px; color: var(--gold); letter-spacing: 0.02em; }
#queue-banner .qlv { font-family: var(--serif); font-size: 13.5px; font-style: italic; color: var(--ink-dim); }
.toast.sparcard { border-color: var(--edge-hi); background: linear-gradient(180deg, rgba(42, 30, 18, 0.96), rgba(16, 12, 8, 0.96)); min-width: 280px; }
.sparcard .sph { display: flex; gap: 10px; align-items: center; }
.sparcard .spx { font-size: 20px; color: var(--gold); text-shadow: 0 0 8px rgba(214, 176, 102, 0.5); }
.sparcard .spl { margin: 3px 0 0 30px; font-size: 13px; font-style: italic; color: var(--ink-dim); }
.sparcard .row { margin-left: 30px; }
.panel.heroesp { width: min(560px, calc(100vw - 24px)); }
.heroesp .hd .hlaurel { width: 50px; height: 50px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.15; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(214, 176, 102, 0.35)); }
.heroesp .hlaurel .lf { fill: var(--gold); stroke: none; }
.hoh-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin: 6px 4px 10px; }
.hp { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.hp .portrait { margin-bottom: 3px; }
.hp1 .portrait { border-color: #e2c26c; box-shadow: 0 0 0 2px #0a0806, 0 0 14px rgba(240, 200, 110, 0.45); }
.hp .hpn { font-family: var(--caps); font-size: 14px; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp .hpt { font-size: 12.5px; font-style: italic; color: #e0bc6a; line-height: 1.1; }
.hp .hpc, .hp .hpw { font-size: 12.5px; color: var(--ink-faint); }
.hp .hpr { font-family: var(--caps); font-size: 17px; color: var(--gold); margin-top: 1px; }
.hp .hpe { font-family: var(--caps); color: var(--ink-faint); margin-bottom: 4px; }
/* the podium's stone, each step a little lower, its numeral in gold, silver and bronze */
.hp .hpb { width: 100%; margin-top: 6px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #5a5042; border-bottom: none; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #4d463b 0%, #3a342b 55%, #2b261f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 238, 200, 0.16), inset 0 -10px 14px rgba(0, 0, 0, 0.35); }
.hp1 .hpb { height: 44px; } .hp2 .hpb { height: 32px; } .hp3 .hpb { height: 24px; }
.hp .hpb span { font-family: var(--caps); font-weight: 700; font-size: 17px; text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, 0.6); }
.hp1 .hpb span { color: #f0cf7a; } .hp2 .hpb span { color: #cdd4da; } .hp3 .hpb span { color: #d39a62; }
/* you, on the podium */
.hp.me .hpn { color: #ffe3a6; }
.hp.me .portrait { border-color: var(--gold); box-shadow: 0 0 0 2px #0a0806, 0 0 12px rgba(214, 176, 102, 0.55); }
.hp.me .hpb { border-color: var(--gold); }
.hp.empty { opacity: 0.55; }
.hoh-rows { width: auto; border-top: 1px solid var(--edge); padding-top: 8px; }
.hoh-rows .fr { padding: 3px 10px; }
.hoh-mine { margin-top: 10px; padding: 7px 10px; border: 1px solid var(--gold-dim); background: rgba(90, 60, 25, 0.28); font-size: 15px; text-align: center; }
.hoh-mine.none { border-color: var(--edge); background: rgba(0, 0, 0, 0.25); color: var(--ink-dim); font-style: italic; }
.heroesp .tabs { align-items: center; }
.heroesp .hoh-fame { margin: 0 0 4px auto; }
/* ---------- the social layer: guild chat and tags, the player menu, friends, inspect, reports (social.js) */
#chat-log .guild { color: #7fe0a8; }
#chat-log .guild.sys { font-style: italic; color: #5fbf88; }
.gtag { font-family: var(--caps); color: #7fe0a8; letter-spacing: 0.04em; }
.ctx .cxsep { height: 1px; background: var(--edge); margin: 3px 4px; }
.ctx button.cxbad { color: #ffb4a8; }
.frdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: #3a3128; border: 1px solid #5a4c3a; }
.frdot.on { background: radial-gradient(circle at 40% 35%, #b6ffb0, #3e9a2e); border-color: #6ad05a; box-shadow: 0 0 5px rgba(106, 208, 90, 0.6); }
.frcap { font-family: var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.who .x { cursor: pointer; color: var(--ink-faint); padding: 0 4px; font-size: 15px; }
.who .x:hover { color: var(--bad); }
.who .frx { width: 34px; text-align: center; font-size: 20px; color: var(--ink-faint); }
.who.ign { opacity: 0.75; }
.pwl > .sect:first-child { margin-top: 2px; }
/* the inspect window: the paper doll, then what it makes of the hero */
.inspwin { display: grid; grid-template-columns: 400px 270px; gap: 18px; }
.inspwin .icol .sect:first-child { margin-top: 0; }
.panel.inspect .hd h2 .gtag { font-size: 17px; }
.ititle { font-family: var(--caps); font-size: 12.5px; color: #e8c878; letter-spacing: 0.06em; }
.iguild { font-size: 15px; }
.iguild .none { color: var(--ink-faint); font-style: italic; }
.ipct { color: var(--ink-faint); font-weight: 400; }
@media (max-width: 760px) { .inspwin { grid-template-columns: 400px; } }
/* the report box */
.modal-box.report .rpn { font-size: 14.5px; color: var(--ink-dim); font-style: italic; margin-bottom: 10px; }
.modal-box.report input { width: 100%; font-size: 16px; padding: 6px 8px; }
/* the bug report box (js/bugreport.js): a few lines, like the report box's line */
.modal-box.bugrep textarea { width: 100%; min-height: 104px; resize: vertical; font-family: var(--serif); font-size: 16px; color: var(--ink); background: #0c0a08;
  border: 1px solid var(--edge); padding: 6px 8px; outline: none; border-radius: 2px; }
.modal-box.bugrep textarea:focus { border-color: var(--gold-dim); box-shadow: 0 0 8px rgba(214, 176, 102, 0.25); }
.modal-box.bugrep .bug-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 13px; font-style: italic; color: var(--ink-faint); text-align: left; }
.modal-box.bugrep .bug-n { font-style: normal; flex: none; }
/* the guild window (G) */
.gwin { width: min(760px, 92vw); }
.gbanner { width: 56px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--caps); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: #dff8e8;
  background: linear-gradient(180deg, #2e6a48, #173a26); border: 1px solid #5fbf88; clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%); text-shadow: 0 1px 2px #000; padding-bottom: 8px; }
.gbanner.none { background: linear-gradient(180deg, #3a2c1c, #1f170f); border-color: var(--edge-hi); color: var(--gold); font-size: 22px; }
.ginv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid #5fbf88; background: rgba(40, 90, 60, 0.18); font-size: 15px; }
.gfound { display: grid; grid-template-columns: 1fr 120px; gap: 8px 12px; align-items: end; }
.gfound label { display: flex; flex-direction: column; gap: 3px; font-family: var(--caps); font-size: 11.5px; color: var(--gold-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.gfound input { font-size: 16px; padding: 5px 8px; text-transform: none; letter-spacing: 0; }
.gfound #gd-tag { text-transform: uppercase; }
.gfound .gprev, .gfound .lfrow { grid-column: 1 / -1; }
.gprev { display: flex; align-items: baseline; gap: 14px; padding: 8px 10px; background: rgba(0, 0, 0, 0.35); border: 1px dashed var(--edge); min-height: 38px; }
.gplate { font-weight: 600; font-size: 15px; color: #e6dcc6; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.gpn { font-family: var(--caps); color: var(--gold); font-size: 14px; }
.gwhy { font-size: 14px; color: var(--bad); font-style: italic; }
.gros { max-height: 52vh; }
.gros .who .btn { flex: none; }
.grank { font-family: var(--caps); font-size: 11px; letter-spacing: 0.06em; padding: 1px 6px; margin-right: 4px; border: 1px solid var(--edge); color: var(--ink-dim); vertical-align: 1px; }
.grank.r-leader { color: #f0c040; border-color: #8a6a20; background: rgba(120, 90, 20, 0.25); }
.grank.r-officer { color: #9fd4ff; border-color: #3c6a8a; background: rgba(40, 80, 120, 0.2); }
.gwin .pw-inv { display: flex; gap: 6px; margin-bottom: 8px; }
.gwin .pw-inv input { flex: 1; font-size: 15px; padding: 5px 8px; }
/* the guild bar and its chest (js/guild.js barHTML, chestHTML, clearHTML; server/guildbar.js; 30 October 2026): the
   guild's points toward its chest, yours, the chests still open with your share; the roster's points of the cycle; a
   won descent's line on its result; the Guild button's mark while a share waits. The roster gives up a little height. */
.gwin.hasbar .gros { max-height: 38vh; }
.gbar { margin: 0 0 10px; padding: 8px 10px 6px; border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.3); }
.gb-hd { display: flex; align-items: baseline; gap: 10px; }
.gb-t { font-family: var(--caps); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.gb-c { font-size: 13.5px; color: var(--ink-dim); }
.gb-n { margin-left: auto; font-size: 16px; }
.gbar .bar.gb { height: 11px; margin-top: 5px; }
.gbar .bar.gb > div { background: linear-gradient(180deg, #f0cf78, #9a6d1a); box-shadow: 0 0 8px rgba(240, 200, 110, 0.35); }
.gb-me { margin-top: 5px; font-size: 14.5px; }
.gb-wait { color: var(--ink-dim); font-style: italic; }
.gbar .note { font-size: 13px; margin-top: 6px; }
.gchest { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 9px; border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.25); }
.gchest.ready { border-color: #a8822a; background: rgba(140, 100, 20, 0.18); box-shadow: inset 0 0 12px rgba(240, 190, 80, 0.12); }
.gchest .btn { flex: none; }
.gc-ic { width: 34px; height: 34px; flex: none; }
.gc-ic path { stroke: #0b0806; stroke-width: 1.2; stroke-linejoin: round; }
.gc-ic .lid { fill: #7a4620; }
.gc-ic .body { fill: #5e3216; }
.gc-ic .band { fill: none; stroke: #d8a830; stroke-width: 1.8; }
.gc-ic .lock { fill: #f0d060; }
.gchest.done .gc-ic { opacity: 0.55; }
.gc-b { flex: 1; min-width: 0; }
.gc-hd { display: flex; align-items: baseline; gap: 8px; }
.gc-hd b { font-family: var(--caps); font-size: 13px; letter-spacing: 0.04em; }
.gc-c, .gc-left { font-size: 13px; color: var(--ink-dim); }
.gc-left { margin-left: auto; }
.gc-l { font-size: 14.5px; }
.gc-got { color: var(--good); }
.gc-n { font-size: 12.5px; color: var(--ink-faint); }
.gpts { display: inline-block; margin-left: 6px; padding: 0 5px; min-width: 18px; text-align: center; font-size: 12px; line-height: 16px; color: #f0d68a;
  border: 1px solid #6a5226; border-radius: 8px; background: rgba(120, 90, 20, 0.2); vertical-align: 1px; }
#menu-btns [data-guild] { position: relative; }
/* (a block of text, not the pill's flex row: the tag and its "'s" stay together) */
.modal-box .rw.gbrw { display: inline-block; color: #e8cf8a; white-space: normal; height: auto; line-height: 1.35; padding: 1px 9px; }
.modal-box .rw.gbrw.full { color: #ffd76a; font-family: var(--caps); }
.modal-box .rw.gbrw .gtag { color: #8fe0b0; }
/* the chat's speaker names are spans of class "who", like the party window's rows: inline, not boxed */
#chat-log span.who { display: inline; padding: 0; border: 0; background: none; }
/* another player's name in the chat opens the player menu (ui.js nameMenu) */
#chat-log span.who[data-who] { cursor: pointer; }
#chat-log span.who[data-who]:hover { text-decoration: underline; }
.who .btn.more { flex: none; min-width: 30px; padding-left: 6px; padding-right: 6px; font-weight: 700; }

/* ================================================================ phones and tablets (touch.js)
   Everything here hangs off html.touch, which touch.js sets on a device whose main pointer is
   a finger (or at the first touch): a mouse never sees any of it. Bigger targets, room for the
   notch, the chat folded behind a button, buttons for the keys, and on a phone (narrower than
   700 px, or lower than 500 px) windows that fill the screen and scroll inside. */
html.touch {
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  --kb: 0px;
}
/* no page zoom, no pull to refresh, no text picked up by a long press; the canvas takes every gesture */
html.touch, html.touch body { overscroll-behavior: none; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
html.touch body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.touch canvas#game { touch-action: none; }
html.touch input, html.touch textarea { -webkit-user-select: text; user-select: text; }
/* Safari zooms into a text box whose letters are smaller than 16 px */
html.touch input:not([type=checkbox]):not([type=range]), html.touch select, html.touch textarea { font-size: max(16px, 1em); }
html.touch [draggable="true"] { -webkit-user-drag: none; }
#tsafe { position: fixed; left: 0; top: 0; width: 0; height: env(safe-area-inset-top, 0px); visibility: hidden; pointer-events: none; }
html.touch .panel, html.touch .list, html.touch .scroll, html.touch .quests, html.touch #chat-log, html.touch .modal-box { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* targets a finger can hit (about 40 px) */
html.touch .btn { min-height: 40px; }
html.touch .btn.small { min-height: 38px; padding: 6px 10px; font-size: 12px; }
html.touch .tab { padding: 10px 13px; }
html.touch .panel .close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; margin: -10px -10px -6px auto; font-size: 26px; }
html.touch .ctx button { min-height: 42px; font-size: 16px; }
/* a phone held sideways: the menu's lines a little lower, so most of it shows before it scrolls */
@media (max-height: 480px) { html.touch .ctx button { min-height: 34px; padding-top: 3px; padding-bottom: 3px; } }
html.touch .plus { display: inline-block; min-width: 36px; padding: 6px 8px; text-align: center; }
html.touch .chp { padding: 8px 12px; }
html.touch .dgl { padding: 8px 10px; }
html.touch .pm .x, html.touch .who .x { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
html.touch .tplus::before { content: ''; position: absolute; inset: -10px; }
html.touch .chk input, html.touch .lfrow .chk input { width: 20px; height: 20px; }
html.touch .lfrow select, html.touch .mkf select, html.touch .set select { min-height: 40px; }
html.touch .song, html.touch .vcard, html.touch .ttl { min-height: 40px; }
html.touch #emotes .btn { min-height: 36px; font-size: 11px; padding: 4px 9px; }
/* key hints: a finger has no keys */
html.touch #menu-btns kbd, html.touch #b-end kbd, html.touch .pickbar kbd, html.touch #party-frame kbd, html.touch .qt-h kbd { display: none; }
html.touch .note.keys { display: none; }
/* a plain toast lets the finger through to what is under it */
html.touch .toast:not(.sticky) { pointer-events: none; }
html.touch #toasts { top: calc(70px + var(--sat)); max-width: calc(100vw - 16px); }

/* tooltips: never wider than the screen (touch.js places them over the finger and shrinks a tall
   one); a finger goes through them (#ui > * would catch it: a tall one can sit under the finger) */
html.touch #tip { pointer-events: none; }
html.touch .tip { max-width: min(300px, calc(100vw - 12px)); }
html.touch .tip.wide { max-width: min(380px, calc(100vw - 12px)); }
html.touch .tip.cards { max-width: calc(100vw - 12px); }
@media (max-width: 640px) {
  html.touch .tcards { flex-direction: column; gap: 6px; }
  html.touch .tcard { width: min(300px, calc(100vw - 12px)); }
}

/* the chat: folded behind its button (it still takes the focus, so a whisper from a menu opens it) */
html.touch:not(.chat-open) #chat { opacity: 0; pointer-events: none; }
html.touch:not(.chat-open) #emotes { display: none; }
html.touch #chat .chat-row { display: flex; gap: 6px; align-items: stretch; }
html.touch #chat .chat-row #chat-in { flex: 1; min-width: 0; }
/* the chat's tabs, for a finger (the strip scrolls sideways under it; the log gives up the strip's height, --ctabs) */
html.touch { --ctabs: 38px; }
html.touch .ctab { padding: 0 12px; font-size: 13px; }
html.touch .ct-n { top: 2px; left: calc(100% - 11px); min-width: 16px; height: 16px; border-radius: 8px; font-size: 10.5px; line-height: 16px; }
html.touch .ct-n.dot { top: 7px; left: auto; right: 4px; min-width: 0; width: 6px; height: 6px; }
html.touch #chat-send { flex: none; padding: 0 12px; }
.tchat-n { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #b0361f; color: #fff;
  font: 700 11px/18px var(--serif); text-align: center; border: 1px solid #0b0806; box-shadow: 0 1px 3px #000; pointer-events: none; }
.tchat-n[hidden] { display: none; }
#menu-btns .tmenu-chat { position: relative; }

/* the buttons for the keys: a column on the right (in a fight: Mark, Cancel, Help, Chat; full screen) */
#tbar, #tturn { display: none; }
html.touch #tbar { display: flex; flex-direction: column; gap: 6px; position: absolute; right: calc(8px + var(--sar)); top: 50%; transform: translateY(-50%); z-index: 15; }
html.touch #tbar .btn { min-width: 64px; min-height: 40px; padding: 4px 6px; font-size: 11px; letter-spacing: 0.02em; position: relative; background: linear-gradient(180deg, rgba(58, 44, 28, 0.92), rgba(31, 23, 15, 0.92)); }
html.touch #tbar .tb-fight { display: none; }
html.touch body.in-battle #tbar .tb-fight { display: block; }
html.touch #tbar .btn.on { color: #fff0c8; border-color: #ffd870; box-shadow: 0 0 12px rgba(255, 216, 112, 0.6); }
html.touch #tbar .tb-full { font-size: 18px; min-width: 44px; align-self: flex-end; }
html.touch body:has(#login:not([hidden])) #tbar, html.touch body:has(#hud[hidden]):not(.in-battle) #tbar, html.touch body:has(#panels .panel) #tbar { display: none; }
/* upright phone, in a fight: a word that sideways is better */
html.touch #tturn:not([hidden]) { display: flex; position: absolute; left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); top: calc(118px + var(--sat)); z-index: 16; gap: 10px; align-items: center;
  padding: 6px 6px 6px 12px; font-size: 14px; font-style: italic; color: var(--ink); background: rgba(20, 15, 10, 0.9); border: 1px solid var(--edge-hi); box-shadow: 0 4px 12px #000; }
html.touch #tturn span { flex: 1; }

/* ---------------------------------------------------------------- the name and the class cards */
html.touch #login { padding: calc(10px + var(--sat)) calc(8px + var(--sar)) calc(10px + var(--sab)) calc(8px + var(--sal)); }
@media (max-width: 599px) {
  html.touch .login-box { padding: 20px 14px 16px; }
  /* (the logo starts under the top right corner's buttons, which an upright phone's narrow box puts over its letters) */
  html.touch .login-box h1.logo { margin: 16px -8px 14px; }
  html.touch #login-name input { width: 100%; }
  html.touch #login-name .btn { margin: 10px 0 0; }
  html.touch .claim-row input { width: 100%; }
  html.touch .claim-row .btn { margin: 10px 0 0; }
  html.touch #wallet-go { min-width: 0; width: 100%; }
  html.touch .wp-list { grid-template-columns: 1fr; }
  html.touch #wallet-req input { width: 100%; }
  html.touch #wallet-req .btn { margin: 8px 0 0; }
  html.touch #class-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.touch .ccard canvas { width: 88px; height: 96px; }
  html.touch .ccard p { min-height: 0; font-size: 13.5px; }
}
@media (max-height: 499px) {
  html.touch .login-box { padding: 12px 18px 10px; width: min(820px, 100%); }
  /* a phone on its side: the name no taller than the old written one was, for the class cards */
  html.touch .login-box h1.logo { width: 320px; margin: -4px auto 8px; }
  html.touch #login-name label { margin-bottom: 6px; }
  html.touch #login-class .lbl { margin-bottom: 8px; font-size: 16px; }
  html.touch #class-cards { gap: 8px; margin-bottom: 10px; }
  html.touch .ccard { padding: 6px 6px 8px; }
  html.touch .ccard canvas { width: 66px; height: 72px; margin-bottom: 2px; }
  html.touch .ccard p { min-height: 0; font-size: 12.5px; margin: 3px 0; }
  /* a phone held sideways has no room for them under the cards: Begin stays in sight */
  html.touch .ccard .specs { display: none; }
}

/* ---------------------------------------------------------------- town HUD on a phone */
@media (max-width: 699px), (max-height: 499px) {
  html.touch #quest-tracker { display: none; }
  html.touch #menu-btns { left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); bottom: calc(6px + var(--sab)); max-width: none;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  html.touch #menu-btns .btn { min-height: 40px; padding: 0 2px; font-size: 10px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.touch #menu-btns .mailbtn, html.touch #menu-btns .tmenu-chat { overflow: visible; }
  html.touch #me-frame { left: calc(6px + var(--sal)); top: calc(6px + var(--sat)); min-width: 0; zoom: 0.72; }
  html.touch #right-col { right: calc(6px + var(--sar)); top: calc(6px + var(--sat)); width: 200px; zoom: 0.85; }
  html.touch #queue-banner { top: auto; bottom: calc(104px + var(--sab)); font-size: 13px; padding: 6px 10px; }
  /* the chat open (its log 24vh, its row of typing and the padding about 54px more): the banner over it, Leave queue
     not under the chat and the emotes */
  html.touch.chat-open #queue-banner { bottom: calc(146px + 24vh + 62px + var(--sab)); }
  html.touch #chat { left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); width: auto; bottom: calc(146px + var(--sab)); }
  html.touch #chat-log { height: calc(24vh - var(--ctabs)); }
  html.touch #emotes { left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); bottom: calc(100px + var(--sab)); overflow-x: auto; }
  html.touch #emotes .btn { flex: 1; }
}
/* upright: the party in the top right corner, beside the hero's frame; the bar of windows two rows at the bottom */
@media (max-width: 599px) {
  html.touch #right-col { width: 172px; }
  html.touch #menu-btns .btn { padding: 0 1px; font-size: 9.5px; letter-spacing: -0.02em; }
}
/* sideways: the bar of windows in two rows on the right, the chat on the left */
@media (max-height: 499px) {
  html.touch #menu-btns { left: auto; width: min(470px, 56vw); }
  html.touch #chat { right: auto; width: calc(100vw - min(470px, 56vw) - 26px - var(--sal) - var(--sar)); bottom: calc(6px + var(--sab)); }
  html.touch #chat-log { height: calc(34vh - var(--ctabs)); }
  html.touch #emotes { right: auto; bottom: auto; top: calc(6px + var(--sat)); left: 50%; transform: translateX(-50%); }
  /* (the chat open on the left leaves Leave queue where it was, over the bar of windows) */
  html.touch.chat-open #queue-banner { bottom: calc(104px + var(--sab)); }
  html.touch #me-frame { zoom: 0.6; }
  html.touch #right-col { zoom: 0.75; }
}

/* ---------------------------------------------------------------- windows on a tablet: centred, never wider than the screen
   (left 50% + translate leaves a window only half the screen to grow in; it overflowed and hid its ✕) */
@media (min-width: 700px) and (min-height: 500px) {
  html.touch .panel.center { left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); margin: 0 auto; width: fit-content; max-width: calc(100% - 12px - var(--sal) - var(--sar));
    transform: translateY(-50%); }
  html.touch .panel.center.mkpanel { transform: none; }
  html.touch .skmain { flex-wrap: wrap; }
  html.touch .skside { flex: 1 1 330px; }
  /* the header (and its ✕) stays at the top of a window scrolled down */
  html.touch .panel .hd { position: sticky; top: 0; z-index: 6; margin-left: -18px; margin-right: -18px; padding: 8px 18px 10px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.8); }
  html.touch .panel.skills .hd { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------- windows on a phone: the whole screen */
@media (max-width: 699px), (max-height: 499px) {
  html.touch .panel.center { left: var(--sal); right: var(--sar); top: var(--sat); bottom: 0; transform: none; width: auto; min-width: 0; max-width: none; max-height: none;
    border-radius: 0; padding: 0 12px calc(14px + var(--sab)); overflow: auto; }
  html.touch .panel .hd { position: sticky; top: 0; z-index: 6; margin: 0 -12px 10px; padding: 10px 12px 8px; gap: 10px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.8); }
  html.touch .panel .hd .portrait { width: 40px; height: 40px; }
  html.touch .panel .hd h2 { font-size: 17px; }
  html.touch .panel .hd .t { font-size: 13px; }
  html.touch .panel .greet { font-size: 15px; margin-bottom: 10px; }
  html.touch .tabs { flex-wrap: wrap; row-gap: 2px; }
  /* the window scrolls instead of the lists in it */
  html.touch .shop, html.touch .vault, html.touch .dgwrap, html.touch .settings, html.touch .achwin, html.touch .inspwin, html.touch .mksellw { width: auto; }
  html.touch .warden, html.touch .salvage, html.touch .qwrap, html.touch .mkwin, html.touch .pwin, html.touch .gwin, html.touch .help, html.touch .fame,
  html.touch .famep .tabs, html.touch .mll, html.touch .songs { width: auto; }
  html.touch .list, html.touch .quests, html.touch .pwl, html.touch .mkl, html.touch .mll, html.touch .achl, html.touch .gros, html.touch .skins, html.touch .vscroll { max-height: none; overflow: visible; }
  html.touch .salvage .list { max-height: none !important; }   /* its 44vh is written on the element */
  html.touch .dglist { max-height: 34vh; }
  html.touch .bag, html.touch .bag.wide, html.touch .vault .bag, html.touch .mksellw .bag { grid-template-columns: repeat(auto-fill, 52px); justify-content: center; }
  html.touch .pouch { grid-template-columns: repeat(auto-fill, 46px); justify-content: center; }
  html.touch .skins { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  html.touch .settings { gap: 6px; }
  html.touch .set input[type=range] { width: 120px; }
  html.touch .mksell { min-height: 0; }
  html.touch .help td:first-child { white-space: normal; }
  html.touch .gros .who, html.touch .pwl .who { flex-wrap: wrap; }
  html.touch .gros .who .wb { flex: 1 1 calc(100% - 50px); }
  /* (the guild bar's window scrolls whole too; a chest's button goes under its words) */
  html.touch .gwin.hasbar .gros { max-height: none; }
  html.touch .gchest { flex-wrap: wrap; }
  html.touch .gchest .gc-b { flex: 1 1 calc(100% - 50px); }
  html.touch .lfrow #lf-note { min-width: 0; flex: 1 1 100%; }
  /* the skill window: the tree scrolls sideways, the chosen skill's page below it */
  html.touch .sktop { flex-wrap: wrap; gap: 8px; }
  html.touch .barwrap { margin: 0; }
  html.touch .skmain { flex-direction: column; }
  html.touch .tree { overflow-x: auto; max-width: 100%; padding-bottom: 6px; }
  html.touch .tcore { flex-wrap: wrap; gap: 4px 14px; }
  html.touch .tch { width: 100%; }
  html.touch .skside { width: auto; max-height: none; scroll-margin-top: 78px; }
  /* question boxes and the fight's result */
  html.touch .modal-box { min-width: 0; max-width: calc(100vw - 16px); max-height: calc(100% - 16px - var(--sat) - var(--sab)); overflow-y: auto; padding: 16px 14px; }
  html.touch .modal-box h2 { font-size: 26px; }
  html.touch .modal-box.result { max-width: calc(100vw - 16px); max-height: calc(100% - 16px - var(--sat) - var(--sab)); }
  html.touch .doors, html.touch .blessings { flex-wrap: wrap; }
  html.touch .door { min-width: 140px; }
  html.touch #turn-banner { font-size: 30px; }
  /* smaller news: a toast is read at a glance and should not cover the screen */
  html.touch .toast { font-size: 13.5px; padding: 5px 10px; line-height: 1.25; }
  html.touch .toast .qdone-h { font-size: 13.5px; gap: 6px; }
  html.touch .toast.announce { font-size: 15px; }
  html.touch #toasts { gap: 4px; }
}
/* upright: one column (sideways, the windows keep their own two) */
@media (max-width: 699px) {
  html.touch .shop, html.touch .vault, html.touch .dgwrap, html.touch .settings, html.touch .achwin, html.touch .inspwin, html.touch .mksellw { grid-template-columns: minmax(0, 1fr); }
  /* the character window: the paper doll shrinks to the screen, the bags below it */
  html.touch .charwin { grid-template-columns: minmax(0, 1fr); }
  html.touch .charwin .bagcol { grid-column: auto; }
}
@media (max-width: 599px) {
  html.touch .paper { zoom: 0.88; }
  html.touch .inspwin .paper { zoom: 0.85; }
}

/* ---------------------------------------------------------------- a fight on a phone: slim bars, the map between them */
@media (max-width: 699px), (max-height: 499px) {
  html.touch #b-top { top: calc(4px + var(--sat)); }
  html.touch #b-title { font-size: 12px; margin-bottom: 3px; letter-spacing: 0.03em; }
  html.touch #b-order { gap: 3px; }
  html.touch .oc { width: 36px; padding: 2px 1px 3px; }
  html.touch .oc img { width: 28px; height: 28px; display: block; margin: 0 auto; }
  html.touch .oc .n { display: none; }
  html.touch .oc .bar { height: 3px; }
  html.touch .oc.cur { transform: translateY(2px); }
  html.touch #b-flee { top: calc(6px + var(--sat)); right: calc(8px + var(--sar)); }
  html.touch #b-set { top: calc(6px + var(--sat)); right: calc(82px + var(--sar)); }
  html.touch #b-bar { bottom: calc(4px + var(--sab)); padding: 6px 8px; gap: 8px; align-items: center;
    left: calc(4px + var(--sal)); right: calc(4px + var(--sar)); margin: 0 auto; width: fit-content; max-width: calc(100% - 8px - var(--sal) - var(--sar)); transform: none; }
  html.touch #b-abilities { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  html.touch .ab { width: 48px; height: 48px; }
  html.touch .ab .cd { font-size: 18px; }
  html.touch #b-status { width: 128px; font-size: 12.5px; }
  html.touch #b-status .who { font-size: 12.5px; }
  html.touch #b-status .who.ai { white-space: normal; line-height: 1.15; }
  html.touch #b-side { width: 112px; gap: 5px; }
  html.touch #b-end.btn.big { font-size: 13px; padding: 6px 8px; min-height: 42px; }
  html.touch #b-party { top: calc(64px + var(--sat)); left: calc(6px + var(--sal)); width: 150px; zoom: 0.9; }
  html.touch body.in-battle #chat { left: calc(6px + var(--sal)); right: auto; width: min(380px, 50vw); bottom: calc(var(--bbar, 66px) + 14px + var(--sab)); }
  html.touch body.in-battle #chat-log { height: calc(26vh - var(--ctabs)); }
  /* the fight's result: a short screen still reaches its buttons */
  html.touch .modal-box.result { padding: 12px 14px; }
  html.touch .modal-box.result h2 { font-size: 24px; margin-bottom: 2px; }
  html.touch .modal-box.result .flav { margin-bottom: 8px; font-size: 14.5px; }
  html.touch .modal-box .rw { font-size: 14.5px; }
  html.touch .modal-box .row { margin-top: 10px; }
  html.touch .bstats { font-size: 13px; margin: 6px auto 2px; }
  html.touch .door { padding: 8px 10px; font-size: 12.5px; border-radius: 26px 26px 3px 3px; }
  html.touch .door b { font-size: 13.5px; }
}
/* upright: the title and the turn order under the two buttons, the bar across the bottom in two rows */
@media (max-width: 599px) {
  html.touch #b-top { top: calc(52px + var(--sat)); left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); transform: none; }
  html.touch #b-order { flex-wrap: wrap; }
  html.touch #b-party { top: calc(112px + var(--sat)); width: 140px; }
  html.touch #b-bar { width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  html.touch #b-status { width: auto; grid-column: 1; grid-row: 1; }
  html.touch #b-side { grid-column: 2; grid-row: 1; width: 128px; }
  html.touch #b-abilities { grid-column: 1 / -1; grid-row: 2; }
  html.touch body.in-battle #chat { right: calc(6px + var(--sar)); width: auto; bottom: calc(var(--bbar, 130px) + 58px + var(--sab)); }
  /* the buttons for the keys in a row just over the bar, clear of the map's corners */
  html.touch body.in-battle #tbar { top: auto; transform: none; bottom: calc(var(--bbar, 130px) + 10px + var(--sab)); right: calc(4px + var(--sar)); flex-direction: row; gap: 4px; }
  html.touch body.in-battle #tbar .btn { min-width: 0; padding: 4px 9px; }
}

/* ---------------------------------------------------------------- the on-screen keyboard is up (touch.js sets kb-open and --kb,
   the part of the page it covers): the chat and a phone's window stop above it; the bars under it step aside */
html.touch.kb-open #menu-btns, html.touch.kb-open #emotes, html.touch.kb-open #tbar, html.touch.kb-open #tturn { display: none; }
html.touch.kb-open #chat, html.touch.kb-open body.in-battle #chat { bottom: calc(var(--kb) + 4px); }
html.touch.kb-open #chat-log { max-height: max(48px, calc(var(--vvh, 100vh) - 100px - var(--ctabs))); }
@media (max-width: 699px), (max-height: 499px) {
  html.touch.kb-open .panel.center { bottom: var(--kb); }
  html.touch.kb-open .modal-box { max-height: calc(var(--vvh, 100%) - 16px); }
}

/* ---------------------------------------------------------------- Season 0 armour: class and weight */
/* a worn piece the hero cannot wear any more (another class's, more Vitality than their own): a red frame, it gives nothing */
.paper .slot.unmet { border-color: var(--bad) !important; box-shadow: inset 0 0 12px rgba(224, 98, 79, 0.45), 0 0 7px rgba(224, 98, 79, 0.55); }
.slot .unmetx { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: var(--bad); text-shadow: 0 0 3px #000, 0 1px 2px #000; pointer-events: none; }
.tip .toff { font-style: italic; }
/* the hero's own Vitality next to the attribute */
.stats .ownv { color: var(--ink-faint); font-size: 11.5px; }
/* Borin's wares by weight: a tab each, headers under All */
.shop .shtabs { margin: 0 0 6px; }
.shop .shtabs .tab { font-size: 11.5px; padding: 4px 9px; }
.shop .shh { font-family: var(--caps); font-size: 11.5px; color: var(--gold-dim); letter-spacing: 0.1em; text-transform: uppercase; margin: 6px 0 2px; padding-bottom: 2px; border-bottom: 1px solid var(--edge); }
.shop .shh:first-child { margin-top: 0; }
/* the merchants' buyback (ui.js buybackHTML): a short list under the bags */
.shop .bblist { max-height: 22vh; }
/* chapters and descents past the season's level cap */
.chp.closed { opacity: 0.35; text-decoration: line-through; }
.dgl.closed .dp i { font-style: italic; letter-spacing: 0; color: var(--ink-faint); font-size: 11px; }
.mkf .btn.on { color: #ffe3a6; border-color: var(--gold); background: linear-gradient(180deg, #4a3822, #2a1f13); }

/* ---------------------------------------------------------------- the economy: $HOA, shards, fragments, the rest after a
   lost descent and the loot feed (ui.js, walletpanel.js, econart.js) */
.hoa { display: inline-flex; align-items: center; gap: 4px; color: #ffd27a; white-space: nowrap; }
.hoa small { font-family: var(--caps); font-size: 10.5px; letter-spacing: 0.05em; color: #d8a850; }
.hoa img { vertical-align: -3px; }
/* the Wallet chip: $HOA, and under it the hero's share of the Ash Tree and their Fervor */
#wallet-chip { flex-wrap: wrap; row-gap: 3px; }
#wallet-chip .wc-bal { display: inline-flex; align-items: center; gap: 4px; color: #ffd27a; }
#wallet-chip .wc-bal small { font-family: var(--caps); font-size: 10.5px; color: #d8a850; letter-spacing: 0.05em; }
#wallet-chip .wc-sub { flex-basis: 100%; display: flex; flex-wrap: wrap; row-gap: 2px; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-dim); padding-left: 26px; }
#wallet-chip .wc-sub i { font-style: normal; color: var(--ink-faint); margin: 0 2px; }
#wallet-chip .wc-n { color: #e8d8b0; }
#wallet-chip .wc-off { color: var(--bad); }
.wal-pill.hoa { display: inline-flex; align-items: center; gap: 5px; color: #ffd27a; border-color: #8a6a2a; }
.wal-what { font-style: normal; font-size: 12px; color: var(--ink-dim); }
#me-frame .res .frags { color: #d8b8ff; font-size: 14px; white-space: nowrap; }
/* the rest after a lost descent: a pale banner at the top of the town's screen */
#recover { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; max-width: min(620px, calc(100vw - 600px));
  color: #dbe8ff; background: linear-gradient(180deg, rgba(36, 44, 62, 0.94), rgba(14, 16, 24, 0.95)); border: 1px solid #6a7ea8; border-radius: 3px;
  box-shadow: 0 0 16px rgba(150, 190, 255, 0.22), 0 6px 18px rgba(0,0,0,0.7); }
#recover .rc-ico { flex: none; width: 30px; height: 30px; color: #cfe0ff; filter: drop-shadow(0 0 6px rgba(170, 205, 255, 0.8)); animation: rcfloat 2.6s ease-in-out infinite; }
#recover .rc-ico svg { width: 100%; height: 100%; fill: rgba(200, 222, 255, 0.28); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
#recover .rc-ico circle { fill: currentColor; stroke: none; }
#recover .rc-t { display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; min-width: 0; }
#recover .rc-t > b { font-family: var(--caps); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #e6efff; }
#recover .rc-t span { color: #b8c8e4; }
#recover .rc-left { color: #fff; font-family: var(--caps); letter-spacing: 0.04em; }
#recover .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
#recover .btn .hoa small { color: #d8a850; }
@keyframes rcfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* below 1260 px the banner would sit over the hero frame's Class button and counts: it goes under the frame */
@media (max-width: 1259px) { #recover { top: 214px; max-width: calc(100vw - 28px); } }
@media (max-width: 699px) { #recover { top: 120px; } }
@media (max-height: 499px) { #recover { top: 14px; } }
.note.recnote { color: #b8c8e4; border-left: 2px solid #6a7ea8; padding-left: 8px; }
/* the loot feed: every drop as a card at the bottom right, never in the way of a click */
#loot-feed { position: fixed; right: 14px; bottom: 64px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; pointer-events: none; }
#ui > #loot-feed { pointer-events: none; }
.lf-card { display: flex; align-items: center; gap: 9px; min-width: 190px; max-width: 280px; padding: 5px 12px 5px 6px; border: 1px solid var(--edge); border-radius: 3px;
  background: linear-gradient(90deg, rgba(14, 11, 8, 0.94), rgba(30, 23, 16, 0.94)); box-shadow: 0 4px 12px rgba(0,0,0,0.7); animation: lfin 0.28s ease-out, lfout 0.5s ease-in 5.9s forwards; }
.lf-i { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.lf-i img { display: block; }
.lf-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.lf-t b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-t small { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.lf-t .lf-hoa { color: #ffd27a; }
.lf-t .lf-frag { color: #d8b8ff; }
.lf-t .lf-key { color: #d8d2c4; }
.lf-card:has(.rar-legendary) { border-color: rgba(255, 138, 26, 0.6); box-shadow: 0 0 12px rgba(255, 138, 26, 0.3), 0 4px 12px rgba(0,0,0,0.7); }
.lf-card:has(.rar-epic) { border-color: rgba(176, 96, 255, 0.55); }
.lf-card:has(.lf-hoa) { border-color: #7a5a22; }
/* beside a fight's result on a narrow screen: the pictures alone */
#loot-feed.slim .lf-card { min-width: 0; padding: 4px; }
#loot-feed.slim .lf-t { display: none; }
@keyframes lfin { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes lfout { to { opacity: 0; transform: translateY(6px); } }
/* the Warden's key bar: what you hold, then what he sells and forges */
.keybar .kb-have { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.keybar .kb-have span { color: var(--ink-dim); }
.keybar .kb-buy { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.keybar .kb-buy .btn { display: inline-flex; align-items: center; gap: 5px; margin-left: 0; }
.keybar .kb-buy .btn .hoa small { color: #c89a48; }
/* the smiths: what a piece breaks into, the shards a step asks */
.tbrk { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.tbrk b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.li .pr.brk { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); }
.li .pr.brk b { font-weight: 600; margin-right: 4px; }
.li .pr.hoapr { color: #ffd27a; }
.forge .cost .mats { color: #cfe0f0; font-size: 14px; margin-left: 8px; white-space: nowrap; }
.forge .cost .mats.short { color: var(--bad); }
.matrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.matrow .mh { display: inline-flex; align-items: center; gap: 4px; }
.matrow .mh b { color: var(--ink); font-weight: 600; }
.pickbar .btn b { color: inherit; margin-right: 3px; }
.pickbar .btn img { vertical-align: -2px; }
.toast .sname { color: var(--gold); }
.toast b[data-noi18n] { margin-right: 4px; }
.toast img.ri { vertical-align: -3px; }
.note.hoanote { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* the result screen: $HOA earned, or why none came */
.modal-box .rw.rwhoa { color: #ffd27a; }
.modal-box .rw.rwdim { color: var(--ink-faint); font-style: italic; white-space: normal; height: auto; }
/* a chamber the AI fought for the hero, or one far below them (CFG.spoilGap): it paid them nothing (server/world.js roomEnd) */
.modal-box .rw.carried { color: #e8a27a; white-space: normal; height: auto; }
/* the pouch: draughts, the elixir, the keys and fragments; then embers and the three shards */
.pouch .pc.key img { filter: drop-shadow(0 0 3px rgba(160, 90, 255, 0.35)); }
html.touch #loot-feed { right: calc(8px + var(--sar, 0px)); }
html.touch .lf-card { min-width: 150px; max-width: 220px; padding: 3px 9px 3px 4px; }
html.touch .lf-i { width: 28px; height: 28px; }
html.touch .lf-i img { width: 28px; height: 28px; }

/* ---------- the boss bar and the intro card (client/js/boss/bar.js) */
#boss-ui { position: absolute; inset: 0; pointer-events: none; }
#boss-ui .bb { position: absolute; top: 118px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; align-items: center; pointer-events: none; }
.bb-row { width: 300px; }
/* (a window too short for it under the turn order: in the top right corner, under the buttons) */
#boss-ui .bb.dock { left: auto; right: 14px; transform: none; }
#boss-ui .bb.dock .bb-row { width: var(--bbw, 300px); }
#boss-ui .bb.dock .bb-line { max-width: var(--bbw, 300px); }
.bb-row.dead { opacity: 0.45; }
.bb-name { font-family: var(--caps); font-size: 13px; color: #ffcf70; text-align: center; text-shadow: 0 1px 3px #000, 0 0 8px #000; letter-spacing: 0.05em; white-space: nowrap; }
.bb-hp { position: relative; height: 9px; margin-top: 2px; background: rgba(10, 6, 5, 0.85); border: 1px solid #b08a3e; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.7); }
.bb-fill, .bb-trail { position: absolute; left: 0; top: 0; bottom: 0; }
.bb-trail { background: rgba(255, 236, 214, 0.75); }
.bb-fill { background: linear-gradient(180deg, #b0281c, #6a1008 70%, #4a0a04); box-shadow: inset 0 1px 0 rgba(255, 140, 110, 0.35); }
.bb-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #ffd890; box-shadow: 0 0 3px #000; }
.bb-chips { margin-left: 6px; }
.bb-chip { display: inline-block; margin-left: 4px; padding: 0 5px; font-family: var(--caps); font-size: 9.5px; letter-spacing: 0.08em; border-radius: 2px; vertical-align: 2px; color: #120c08; background: #d6b066; }
.bb-chip.bound { background: #9fc8ff; } .bb-chip.enraged { background: #ff6a3a; } .bb-chip.grieving { background: #ffb060; }
.bb-line { max-width: 420px; margin-top: 3px; font-style: italic; font-size: 14px; color: #ffd8a0; text-align: center; text-shadow: 0 1px 3px #000, 0 0 10px #000; transition: opacity 0.5s; }
.bb-line.off { opacity: 0; }
.bb-card { position: absolute; top: 22%; left: 50%; transform: translate(-50%, -10px); min-width: 360px; max-width: 560px; padding: 16px 30px 18px; text-align: center; pointer-events: auto; cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(20, 12, 8, 0.92), rgba(10, 6, 4, 0.75) 70%, rgba(10, 6, 4, 0)); opacity: 0; transition: opacity 0.4s, transform 0.4s; }
.bb-card.on { opacity: 1; transform: translate(-50%, 0); }
.bb-card-name { font-family: var(--caps); font-size: 30px; color: #ffcf70; letter-spacing: 0.04em; text-shadow: 0 2px 6px #000, 0 0 18px rgba(255, 150, 60, 0.35); }
.bb-card-name .bb-and { font-size: 18px; color: var(--ink-dim); }
.bb-card-ch { margin-top: 2px; font-family: var(--caps); font-size: 12px; letter-spacing: 0.3em; color: var(--ink-dim); text-transform: uppercase; }
.bb-card-lore { margin-top: 10px; font-style: italic; font-size: 16px; color: var(--ink); text-shadow: 0 1px 3px #000; }
/* what a chamber holds, on its card and on a lord's (bar.js lineUpHTML): the foes, their affixes, the ground */
.bb-card.rc { top: 18%; min-width: 300px; padding: 12px 26px 14px; }
/* a phone held upright: the cards keep below the word to turn it sideways (touch.js --tturn; clear of it
   even as they slide in) */
html.touch .bb-card { top: max(22%, calc(var(--tturn, 0px) + 18px)); }
html.touch .bb-card.rc { top: max(18%, calc(var(--tturn, 0px) + 18px)); }
.rc-name { margin-top: 2px; font-family: var(--caps); font-size: 22px; color: #ffcf70; letter-spacing: 0.04em; text-shadow: 0 2px 6px #000; }
.bb-foes { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 16px; font-size: 15.5px; color: var(--ink); text-shadow: 0 1px 3px #000; }
.bb-foe b { font-family: var(--caps); font-size: 13px; color: #ffcf70; }
.bb-foe i { font-style: normal; font-family: var(--caps); font-size: 12px; letter-spacing: 0.04em; }
.bb-ground { margin-top: 5px; font-size: 14.5px; color: var(--ink-dim); text-shadow: 0 1px 3px #000; }