:root {
  --bg: #0b0a0d; --panel: rgba(20, 17, 24, 0.94); --panel2: #1d1922; --line: #3a3242; --text: #e7e0d2; --dim: #9a9087;
  --gold: #e7c157; --blood: #c8414b; --good: #7fc98a; --info: #8fb3d9; --warn: #f0a04b; --violet: #b48cf0; --ember: #ff8a3d;
  --font: "IM Fell English", "Iowan Old Style", Palatino, Georgia, serif; --display: "IM Fell English SC", "IM Fell English", Georgia, serif; --mono: ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; }
body { font-size: calc(16px * var(--ts, 1)); }
.textsize { display: flex; gap: 10px; align-items: center; } .textsize input { flex: 1; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }
button { font-family: var(--font); background: #2a2330; color: var(--text); border: 1px solid #4b4055; padding: 6px 12px; border-radius: 3px; cursor: pointer; font-size: calc(14px * var(--ts, 1)); }
button:hover { background: #3a3044; border-color: #6c5c7a; }
button.primary { background: #5a3b1e; border-color: #a8742e; color: #ffe7b8; }
button.primary:hover { background: #6e4924; }
button:disabled { opacity: 0.45; cursor: default; }
input { font-family: var(--font); background: #120f15; color: var(--text); border: 1px solid #4b4055; padding: 7px 10px; font-size: calc(15px * var(--ts, 1)); border-radius: 3px; }
h1, h2, h3 { font-weight: normal; letter-spacing: 0.04em; margin: 0 0 8px; }
.small { font-size: calc(12px * var(--ts, 1)); color: var(--dim); }
.badge { display: inline-block; font-family: var(--mono); font-size: calc(11px * var(--ts, 1)); padding: 2px 6px; border-radius: 3px; border: 1px solid; letter-spacing: 0.02em; }
.badge.fixture { color: #ffcf6b; border-color: #8a6d2a; background: rgba(90, 70, 20, 0.35); }
.badge.live { color: #9fe6b0; border-color: #3d7a4d; background: rgba(30, 80, 40, 0.35); }
.badge.authored { color: #c9c3b6; border-color: #5b554d; }
.badge.fallback { color: #f0a04b; border-color: #7a5328; }

/* login */
#login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #1b1520 0%, #07060a 75%); }
#login .box { width: min(860px, 94vw); padding: 28px 32px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 80px #000; }
#login h1 { font-size: calc(46px * var(--ts, 1)); color: #f0dcb4; text-shadow: 0 0 24px rgba(255, 170, 80, 0.25); margin-bottom: 0; }
#login .tag { color: var(--dim); margin-bottom: 18px; font-style: italic; }
.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.classcard { border: 1px solid var(--line); padding: 12px; cursor: pointer; background: #17131b; }
.classcard.sel { border-color: var(--gold); background: #231c18; }
.classcard .nm { font-size: calc(20px * var(--ts, 1)); }
.charlist { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 18px; }
.charrow { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--line); background: #17131b; }
.modebar { margin-top: 14px; padding: 8px 10px; border: 1px dashed #5b4e2e; color: #e8d39a; font-size: calc(13px * var(--ts, 1)); }

/* panels */
.panel { position: fixed; z-index: 22; background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.7); max-height: 86vh; overflow: auto; }
.panel .close { position: absolute; top: 8px; right: 10px; padding: 2px 8px; }
.panel.center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, 94vw); }
.panel.right { right: 14px; top: 70px; width: min(430px, 94vw); }
.panel.left { left: 14px; top: 70px; width: min(430px, 94vw); }
.grid { display: grid; grid-template-columns: repeat(6, 54px); gap: 5px; }
.slot { width: 54px; height: 54px; border: 1px solid #3c3446; background: #120f15; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: calc(11px * var(--ts, 1)); text-align: center; line-height: 1.05; padding: 2px; overflow: hidden; }
.slot:hover { border-color: #8c7a9c; }
.slot .up { position: absolute; right: 2px; top: 1px; font-size: calc(10px * var(--ts, 1)); color: var(--gold); }
.slot .ico { font-size: calc(20px * var(--ts, 1)); }
.eqrow { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.eqslot { width: 72px; text-align: center; font-size: calc(11px * var(--ts, 1)); color: var(--dim); }
.eqslot .slot { width: 72px; height: 72px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #2a2430; }
.talent { border: 1px solid var(--line); padding: 8px; margin: 4px 0; cursor: pointer; background: #17131b; }
.talent.chosen { border-color: var(--gold); background: #2a2018; }
.talent.locked { opacity: 0.45; cursor: default; }
.ability { border: 1px solid var(--line); padding: 8px; margin: 5px 0; background: #17131b; }
.ability.sel { border-color: var(--info); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: calc(13px * var(--ts, 1)); }
.kv b { color: var(--dim); font-weight: normal; }
.section { margin: 12px 0 6px; color: #d9c69c; font-size: calc(15px * var(--ts, 1)); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.entry { padding: 6px 0; border-bottom: 1px solid #262029; font-size: calc(13px * var(--ts, 1)); }
.code { font-family: var(--mono); font-size: calc(11.5px * var(--ts, 1)); white-space: pre-wrap; background: #0e0c11; border: 1px solid #2c2633; padding: 8px; max-height: 260px; overflow: auto; }

#tooltip { position: fixed; z-index: 50; pointer-events: none; max-width: 300px; background: rgba(12, 10, 14, 0.97); border: 1px solid #5a4b66; padding: 10px 12px; font-size: calc(13px * var(--ts, 1)); line-height: 1.35; }
#tooltip .nm { font-size: calc(15px * var(--ts, 1)); margin-bottom: 2px; }
#tooltip .mod { color: #a9c8ff; }
#tooltip .mod .rng { color: #6f7a8c; font-size: 0.9em; } /* what the number could have rolled */
/* (a rolled stat line takes its roll's item-tier colour inline: shared/items.js rollTier) */
#tooltip .relic { color: #ffb070; margin-top: 4px; }
#tooltip .flavor { color: var(--dim); font-style: italic; margin-top: 6px; }

#toasts { position: fixed; left: 50%; top: 92px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 40; }
.toast { background: rgba(12, 10, 14, 0.85); border: 1px solid #3a3242; padding: 5px 14px; font-size: calc(14px * var(--ts, 1)); animation: fade 4.5s forwards; }
.toast.good { color: var(--good); } .toast.warn { color: var(--warn); } .toast.world { color: var(--gold); border-color: #6c5a2a; }
.toast.boss { color: #ffb070; font-size: calc(18px * var(--ts, 1)); } .toast.hint { color: #dcc6ff; border-color: #6a4c92; background: rgba(30, 18, 46, 0.9); } .toast.lore { color: #d9c69c; font-style: italic; } .toast.info { color: #d8d0c2; } .toast.quest { color: #e2d08a; } .toast.party { color: var(--info); } .toast.toll { color: #ffd38a; font-size: calc(26px * var(--ts, 1)); letter-spacing: 0.3em; }
@keyframes fade { 0% { opacity: 0; transform: translateY(-4px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

#chat { position: fixed; left: 14px; bottom: 14px; width: 380px; font-size: calc(13px * var(--ts, 1)); pointer-events: none; }
#chat .log div { text-shadow: 0 1px 2px #000; padding: 1px 0; }
#chat .chatlink { pointer-events: auto; cursor: help; }
#chat input { width: 100%; pointer-events: auto; margin-top: 4px; }
#modal { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(560px, 92vw); background: var(--panel); border: 1px solid #6c5a2a; padding: 18px 22px; box-shadow: 0 20px 60px #000; z-index: 30; }
#modal h2 { color: #f0dcb4; }
#modal p { line-height: 1.5; }
#intro { position: fixed; right: 14px; top: 152px; width: min(250px, 40vw); background: rgba(22, 16, 30, 0.82); border: 1px solid #7a5aa6; border-radius: 6px; padding: 9px 12px 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.6); z-index: 20; pointer-events: none; }
#intro .rule-label { font-size: calc(10px * var(--ts, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: #9c86c0; }
#intro h3 { color: #dcc6ff; font-size: calc(15px * var(--ts, 1)); margin: 2px 0 4px; }
#intro p { margin: 0 0 4px; font-size: calc(13px * var(--ts, 1)); line-height: 1.35; }
#intro .tip { color: #c9bfa8; }
#intro .src { color: #7d7290; font-size: calc(10px * var(--ts, 1)); margin-top: 2px; }
#intro.fresh { animation: rulefresh 2.4s ease-out 1; }
@keyframes rulefresh { 0% { box-shadow: 0 0 0 0 rgba(180, 140, 255, 0.9); transform: translateX(12px); opacity: 0; } 15% { transform: none; opacity: 1; } 100% { box-shadow: 0 0 0 14px rgba(180, 140, 255, 0); } }
#deathscreen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(ellipse at center, rgba(60, 0, 0, 0.0) 30%, rgba(40, 0, 0, 0.55) 100%); }
#deathscreen div { font-size: calc(34px * var(--ts, 1)); color: #e9b4b4; text-shadow: 0 0 20px #000; text-align: center; }
#deathscreen small { display: block; font-size: calc(15px * var(--ts, 1)); color: #d9c2c2; margin-top: 6px; }
#replaced { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(8, 6, 10, 0.82); }
#replaced div { font-size: calc(30px * var(--ts, 1)); color: #e2d08a; text-shadow: 0 0 20px #000; text-align: center; }
#replaced small { display: block; font-size: calc(15px * var(--ts, 1)); color: #cdbb85; margin-top: 8px; }
.help { columns: 2; font-size: calc(13px * var(--ts, 1)); }
.help div { margin: 2px 0; }
kbd { font-family: var(--mono); font-size: calc(11px * var(--ts, 1)); border: 1px solid #5b5066; padding: 1px 5px; border-radius: 3px; background: #1a161e; }
.slot .ico img.sprite { display: block; margin: 0 auto; image-rendering: auto; }
img.archive-sprite { float: left; margin: 0 8px 4px 0; background: rgba(0,0,0,0.35); border-radius: 6px; }
.entry::after { content: ''; display: block; clear: both; }

table.board { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--ts, 1)); }
table.board th { text-align: left; color: var(--dim); font-weight: normal; font-size: calc(12px * var(--ts, 1)); border-bottom: 1px solid var(--line); padding: 4px 6px; }
table.board td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
table.board tr.me td { background: rgba(231, 193, 87, 0.12); }
table.board td:nth-child(4) { color: var(--gold, #e7c157); text-align: center; }

.archbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 8px; }
.archbar select { background: var(--panel2); color: var(--text); border: 1px solid var(--line); padding: 5px 8px; font: inherit; min-width: 260px; }
.archbar .tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.archbar .tab { padding: 4px 10px; opacity: 0.75; }
.archbar .tab.on { opacity: 1; border-color: #c9a85b; color: #f3d9a0; }
.floorinfo { padding: 6px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.panel.archive .archbody { min-height: 120px; }
.panel.archive a { color: #e8d39a; }

/* IM Fell: small caps for headings, names and buttons; the regular face for everything else */
h1, h2, h3, .section, .nm, button, #intro h3, table.board th, .classcard .nm { font-family: var(--display); font-weight: normal; letter-spacing: 0.02em; }

.entry.power { display: grid; gap: 2px; }
.pstate { font-family: var(--mono); font-size: calc(10px * var(--ts, 1)); text-transform: uppercase; letter-spacing: 0.08em; padding: 1px 6px; border: 1px solid; border-radius: 3px; }
.pstate.good { color: #9fe6b0; border-color: #3f7a4e; }
.pstate.bad { color: #ff8a80; border-color: #8a3a35; }
.pstate.dim { color: var(--dim); border-color: #4b4055; }
.warnline { color: #e8b48a; }

/* leaderboard: inspect another delver's gear */
.board tr.inspectable { cursor: pointer; }
.board tr.inspectable:hover td { background: rgba(231, 193, 87, 0.08); }
.cols.inspect { grid-template-columns: auto 1fr; align-items: start; }
.inspect-portrait { text-align: center; padding-right: 10px; }
.inspect-portrait img { display: block; margin: 0 auto 6px; }
.inspect-item { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.inspect-item [data-tip] { cursor: help; }

/* insurer */
.insured { color: #8fd0ff; font-size: calc(13px * var(--ts, 1)); }
.slot .ins { position: absolute; right: 3px; bottom: 2px; color: #8fd0ff; font-size: calc(11px * var(--ts, 1)); }
/* auction house */
.ahbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ahbar select, .ahbar input { background: #1a1620; color: var(--text, #ece3d0); border: 1px solid #3c3446; padding: 3px 6px; font: inherit; font-size: calc(13px * var(--ts, 1)); }
.ahlist { max-height: 55vh; overflow-y: auto; }
/* item search bar (Auction House, stash) */
.fbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.fbar input, .fbar select { background: #1a1620; color: var(--text, #ece3d0); border: 1px solid var(--frame-bronze, #3c3446); border-radius: 0; padding: 3px 6px; font: inherit; font-size: calc(13px * var(--ts, 1)); }
.fbar .fq { flex: 1 1 130px; min-width: 120px; }
.fbar .filvl { display: inline-flex; align-items: center; gap: 4px; color: var(--dim, #9a8f7d); font-size: calc(12px * var(--ts, 1)); }
.fbar .filvl input { width: 62px; }
.fbar button { padding: 3px 10px; }
.fcount { color: var(--gold, #d8b46a); }
.ahprice { width: 90px; margin-left: auto; margin-right: 6px; background: #1a1620; color: var(--text, #ece3d0); border: 1px solid #3c3446; padding: 2px 4px; font: inherit; }
.panel > .tabs, .tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.tabs .tab { padding: 4px 10px; opacity: 0.75; }
.tabs .tab.on { opacity: 1; border-color: #c9a85b; color: #f3d9a0; }
/* right-click player menu, trade invite, trade window */
.pmenu { position: fixed; z-index: 60; background: #16121b; border: 1px solid #5a4a6a; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 150px; box-shadow: 0 6px 20px #000a; }
.pmenu .pmname { font-family: var(--display); color: #f3d9a0; padding: 2px 4px 4px; border-bottom: 1px solid #3c3446; }
.pmenu button { text-align: left; }
.tradeask { position: fixed; z-index: 60; left: 50%; top: 18%; transform: translateX(-50%); background: #16121b; border: 1px solid #c9a85b; padding: 10px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 6px 20px #000a; }
.tradecols { grid-template-columns: 1fr 1fr; gap: 16px; }
.slot[data-offered] { outline: 2px solid #c9a85b; outline-offset: -2px; background: #2a2214; }
.good { color: #9fe6b0; }
/* item comparison: the hovered item next to what is equipped in that slot */
#tooltip.wide { max-width: 640px; }
.tipcols { display: flex; gap: 12px; align-items: flex-start; }
.tipcols .tipbox { width: 290px; }
.tipcols .tipbox.eq { border-left: 1px solid #3c3446; padding-left: 12px; opacity: 0.92; }
.tipcols .eqhdr { font-size: calc(11px * var(--ts, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
/* loot filter */
.lfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; }
label.lf { display: flex; gap: 6px; align-items: center; font-size: calc(13px * var(--ts, 1)); cursor: pointer; }
/* Controls page */
.ctlrow { display: grid; grid-template-columns: 1fr 110px 110px; gap: 6px; align-items: center; padding: 2px 0; }
.ctlkey { min-width: 0; padding: 3px 6px; font-family: monospace; font-size: calc(12px * var(--ts, 1)); }
.ctlkey.wait { border-color: #e7c157; color: #e7c157; animation: ctlwait 1s ease-in-out infinite alternate; }
@keyframes ctlwait { from { opacity: 1; } to { opacity: 0.55; } }
.ctlnote { min-height: 1.2em; margin-top: 6px; color: #d9c69c; }
/* chat announcements (deaths, the frontier pushed) */
#chat .chatsys { font-style: italic; }
#chat .chatsys.death { color: #e58a8a; }
#chat .chatsys.frontier { color: #e7c157; }

/* passive tree */
.panel.tree { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 94vw; height: 88vh; max-height: none; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.treehead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-right: 40px; }
.treehead h2 { margin: 0; }
.treehead input { flex: 1; min-width: 180px; max-width: 360px; }
.treepts b { color: #e7c157; }
.treebody { flex: 1; display: flex; gap: 12px; min-height: 0; }
#tpSvg { flex: 1; min-width: 0; height: 100%; background: radial-gradient(circle at 50% 50%, #1a1520 0%, #0b090e 75%); border: 1px solid var(--line); cursor: grab; touch-action: none; }
#tpSvg:active { cursor: grabbing; }
#tpSvg .tnode { cursor: pointer; }
#tpSvg .tname { font: 15px "IM Fell English", Georgia, serif; pointer-events: none; paint-order: stroke; stroke: #0b090e; stroke-width: 4px; }
#tpSvg .treg { font: 30px "IM Fell English SC", Georgia, serif; letter-spacing: 6px; opacity: 0.35; pointer-events: none; }
.treeside { width: 300px; flex: none; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.treeside h3 { color: #fff1c2; font-size: 20px; }
.tlines { margin: 6px 0; padding-left: 18px; }
.tlines li { margin: 2px 0; }
.treehelp { margin-top: auto; opacity: 0.8; }

/* ── Kenney "Fantasy UI Borders" (CC0, www.kenney.nl) ──────────────────────────────────────────────
   Recoloured 48x48 pixel-art frames in client/ui/, drawn as 9-slice border images. The art is 2 px per
   "art pixel", so frames are only scaled by 0.5x / 1x / 1.5x to stay crisp. Backgrounds are inset to
   the frame's outer line so corner ornaments stand proud of the panel. */
:root { --frame-bronze: #6c6150; }
.panel, #login .box, #modal {
  border: 24px solid transparent; border-image: url(/client/ui/frame-panel.png) 16 / 24px stretch; image-rendering: pixelated;
  background: linear-gradient(var(--panel), var(--panel)) 6px 6px / calc(100% - 12px) calc(100% - 12px) no-repeat border-box;
  box-shadow: none; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.75));
}
.panel { padding: 4px 8px; }
#login .box { padding: 8px 14px; }
#modal { padding: 4px 8px; }
.panel .close { top: 0; right: 2px; }
/* the scrollbar lives inside the frame; keep it quiet */
.panel { scrollbar-width: thin; scrollbar-color: #5a4a36 transparent; }

button {
  border: 2px solid transparent; border-image: url(/client/ui/frame-button.png) 16 / 8px stretch; image-rendering: pixelated; border-radius: 0;
  background: linear-gradient(#2a2330, #1d1822) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat border-box;
}
button:hover { border-image-source: url(/client/ui/frame-button-hi.png); background: linear-gradient(#3a3044, #2a2232) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat border-box; }
button.primary { border-image-source: url(/client/ui/frame-button-primary.png); background: linear-gradient(#6a4522, #4a3018) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat border-box; }
button.primary:hover { border-image-source: url(/client/ui/frame-button-hi.png); background: linear-gradient(#7e5428, #5a3a1c) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat border-box; }
.tabs .tab.on, .archbar .tab.on { border-image-source: url(/client/ui/frame-button-hi.png); }
.ctlkey.wait { border-image-source: url(/client/ui/frame-button-primary.png); }
.panel .close { border-image-width: 8px; padding: 2px 9px; }

input, select, .archbar select, .ahbar select, .ahbar input, .ahprice { border-color: var(--frame-bronze); border-radius: 0; }
input:focus, select:focus { outline: none; border-color: #c9a45c; }
input[type="range"], input[type="checkbox"] { accent-color: #c9a45c; }

.slot { border: 2px solid transparent; border-image: url(/client/ui/frame-slot.png) 16 / 16px stretch; image-rendering: pixelated; background: #120f15; }
.slot:hover { border-image-source: url(/client/ui/frame-slot-hi.png); }
/* rarity tint, now that the border itself is the frame */
.slot[style*="--rc"] { background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 22%, #120f15) 0%, #120f15 72%); }
.slot[data-offered] { outline: none; border-image-source: url(/client/ui/frame-slot-hi.png); background: #2a2214; }

#tooltip {
  border: 10px solid transparent; border-image: url(/client/ui/frame-tip.png) 16 / 16px stretch; image-rendering: pixelated; padding: 4px 6px;
  background: linear-gradient(rgba(12, 10, 14, 0.97), rgba(12, 10, 14, 0.97)) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat border-box;
}

.toast, .classcard, .charrow, .ability, .talent, .pmenu, .modebar {
  border: 2px solid transparent; border-image: url(/client/ui/frame-small.png) 16 / 8px stretch; image-rendering: pixelated;
}
.modebar { border-style: solid; }
.classcard.sel, .talent.chosen, .tradeask, .toast.world, .toast.boss, .toast.toll, .toast.quest { border: 2px solid transparent; border-image: url(/client/ui/frame-small-gold.png) 16 / 8px stretch; }
.ability.sel { border-image-source: url(/client/ui/frame-small-gold.png); }
.classcard:hover, .charrow:hover { border-image-source: url(/client/ui/frame-small-gold.png); }
.toast.hint { border-image-source: url(/client/ui/frame-rule.png); }
.pmenu, .tradeask { box-shadow: none; filter: drop-shadow(0 6px 16px #000c); }

#intro {
  border: 12px solid transparent; border-image: url(/client/ui/frame-rule.png) 16 / 16px stretch; image-rendering: pixelated; border-radius: 0; padding: 0 2px;
  background: linear-gradient(rgba(22, 16, 30, 0.86), rgba(22, 16, 30, 0.86)) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat border-box;
  box-shadow: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
}
@keyframes rulefresh { 0% { transform: translateX(12px); opacity: 0; } 15% { transform: none; opacity: 1; } 100% { opacity: 1; } }

/* section headings: a gilt flourish instead of a hairline */
.section { border-bottom: none; padding-bottom: 20px; background: url(/client/ui/divider-r.png) left bottom / 96px 18px no-repeat; image-rendering: pixelated; }
.code { border-color: #3a3024; }
kbd { border-color: var(--frame-bronze); border-radius: 0; }

#tpSvg { border: 16px solid transparent; border-image: url(/client/ui/frame-hud.png) 16 / 16px stretch; image-rendering: pixelated; background-clip: padding-box; }
/* image-rendering is inherited: the frames above want pixelated, the art inside them does not */
img, svg, canvas, video { image-rendering: auto; }
/* shared stash: gold */
.stashgold { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.stashgold b { color: var(--gold); font-weight: normal; }
.stashgold input { width: 110px; }
.panel:has(.stashcols) { width: min(1180px, 96vw); }
.stashcols { grid-template-columns: auto 1fr; }
.sgrid { grid-template-columns: repeat(auto-fill, 54px); max-height: 58vh; overflow-y: auto; align-content: start; padding: 2px 4px 2px 0; scrollbar-width: thin; scrollbar-color: #5a4a36 transparent; }
/* character sheet: hover a stat for what it does */
.statkv [data-stat] { cursor: help; }
.statkv b[data-stat]:hover, .statkv b[data-stat]:hover + span { color: var(--gold); }
#tooltip .stathelp { color: #d8d0c2; margin: 2px 0 6px; }
#tooltip .statnums { border-top: 1px solid #3a3024; padding-top: 5px; color: #f0e4c4; }
#tooltip .statnums b { color: var(--gold); font-weight: normal; }
#tooltip .statnotes { margin: 6px 0 0; padding-left: 16px; color: var(--dim); font-size: calc(12px * var(--ts, 1)); }
#tooltip .statnotes li { margin: 2px 0; }
/* item icons: the model fills the slot, inside the frame's corners; the name lives in the tooltip */
.slot { padding: 5px; }
.slot .ico { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: inherit; }
.slot .ico img.icon { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.slot .ico .glyph { font-size: calc(26px * var(--ts, 1)); line-height: 1; opacity: 0.9; text-shadow: 0 1px 2px #000; }
.eqslot .slot .ico .glyph { font-size: calc(34px * var(--ts, 1)); }
.slot .up, .slot .ins { z-index: 1; text-shadow: 0 1px 2px #000; }
#chat .chatsys.find { color: #cfeec0; font-style: normal; }
#chat .chatsys.find .chatlink { font-weight: bold; }
/* account code (recovery) */
.acctrow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.acctnote { margin-top: 10px; color: #e8d39a; }
.acct { margin-top: 10px; }
.acctcode { font-family: var(--mono); font-size: calc(15px * var(--ts, 1)); letter-spacing: 0.06em; background: #0e0c11; border: 1px solid var(--frame-bronze); padding: 8px 10px; margin: 8px 0; user-select: all; word-break: break-all; color: #f0e4c4; }
.acctbtns { display: flex; gap: 8px; align-items: center; }
#chat .chatsys.mod { color: #9fd6ff; font-style: normal; }
.pmenu input { min-width: 220px; }

/* arriving from the game's old address: the account offer, at the top of the character screen */
#movebox:not(:empty) { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--gold, #d8b46a); background: rgba(216, 180, 106, 0.07); }
#movebox .small { font-size: calc(14px * var(--ts, 1)); }

/* waiting in line for a place (server full) */
#queuebox { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; background: rgba(8, 6, 10, 0.72); }
#queuebox .qin { width: min(420px, 92vw); padding: 22px 26px; text-align: center; background: rgba(18, 15, 22, 0.97); border: 1px solid var(--gold, #d8b46a); box-shadow: 0 0 40px #000; }
#queuebox .qtitle { font-size: calc(26px * var(--ts, 1)); color: #e2d08a; margin-bottom: 4px; }
#queuebox .qpos { font-size: calc(22px * var(--ts, 1)); margin: 16px 0 4px; }
#queuebox .qpos b { color: var(--gold, #d8b46a); font-size: calc(30px * var(--ts, 1)); font-weight: normal; }
#queuebox .qwait { color: #cdbb85; margin-bottom: 14px; }
#queuebox button { margin-top: 14px; }

/* character stats you have none of yet: listed (hover explains them) but quieter */
.statkv .zero { opacity: 0.45; }

.gfxrow { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 8px; }
.gfxrow label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }