:root {
  --bg: #15130f;
  --panel: #221e18;
  --panel-2: #2b261e;
  --panel-3: #332c22;
  --edge: #4a3f2c;
  --edge-hi: #6e5c3a;
  --edge-dark: #0e0c09;
  --gold: #e2b65a;
  --gold-dim: #a8843c;
  --text: #e8dfcc;
  --muted: #9a8f7a;
  --hp: #c8423a;
  --mp: #3f6fd1;
  --npc: #7ec8ff;
  --local: #f3e27a;
  --info: #9fe08a;
  --epic: #b866ff; /* a rare drop (loot messages): epic purple */
  --pm: #5ff7f7;
  --status: #ffffff;
  --system: #ff9f5a;
}
* { box-sizing: border-box; }
/* scrollbars in the game's own colours (not the browser's grey bar): a thin
   dark track with a rounded bronze thumb */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--edge-hi) #0f0d0a; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f0d0a; border-left: 1px solid var(--edge-dark); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #5a4b30, var(--edge-hi) 50%, #5a4b30); border: 2px solid #0f0d0a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #6e5c3a, #8a7448 50%, #6e5c3a); }
::-webkit-scrollbar-corner { background: #0f0d0a; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.35 "Segoe UI", system-ui, sans-serif; overflow: hidden; }
/* a game, not a page: dragging things around never selects text (only what you type,
   and the chat log, which you may want to copy from) */
body { user-select: none; -webkit-user-select: none; }
input, textarea, #chatlogs { user-select: text; -webkit-user-select: text; }
body.dragging, body.dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
button { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--edge-hi); border-radius: 3px; padding: 4px 10px; cursor: pointer; }
button:hover { border-color: var(--gold-dim); color: var(--gold); }
input { font: inherit; color: var(--text); background: #0f0d0a; border: 1px solid var(--edge); border-radius: 3px; padding: 5px 7px; }
input:focus { outline: none; border-color: var(--gold-dim); }

/* ---------- login ---------- */
#login-err, #chars-err, .lc-err { color: #ff7a6a; min-height: 18px; margin-top: 8px; text-align: center; }
#chars-list { max-height: 240px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--edge); background: #12100c; }
#chars-list .crow { display: flex; justify-content: space-between; gap: 8px; padding: 5px 9px; cursor: pointer; border-bottom: 1px solid #1f1b15; user-select: none; }
#chars-list .crow .cn { color: var(--text, #ddd); font-weight: 600; }
#chars-list .crow .cl { color: var(--muted); font-size: 12px; }
#chars-list .crow.sel { background: #3a2e18; }
#chars-list .crow.sel .cn { color: var(--gold); }
#chars-list .empty { padding: 10px; color: var(--muted); font-size: 13px; }
#chars-box .wh .sub { color: var(--muted); font: 12px system-ui; }
.login-card .opt { text-transform: none; letter-spacing: 0; }
.login-card .hint a { color: var(--gold); }
.hint { color: var(--muted); font-size: 11px; text-align: center; margin: 6px 0 0; }

/* ---------- layout ---------- */
#app { height: 100%; }
#main { height: 100%; display: flex; }
#left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#viewport { flex: 1; position: relative; display: grid; place-items: center; background: #000; min-height: 0; overflow: hidden; }
#game { display: block; image-rendering: pixelated; cursor: default; box-shadow: 0 0 0 1px var(--edge); }
body.usewith, body.usewith * { cursor: crosshair !important; }
#debug { position: absolute; top: 6px; left: 6px; background: #000a; color: #b8f7a8; font: 11px/1.4 ui-monospace, monospace; padding: 6px 8px; border-radius: 3px; white-space: pre; pointer-events: none; }
#deathscreen { position: absolute; inset: 0; display: grid; place-items: center; background: #300a0acc; }
#deathscreen > div { background: var(--panel); border: 1px solid #7a2a22; padding: 20px 30px; text-align: center; border-radius: 4px; }
#deathscreen h2 { color: #ff7a6a; margin: 0 0 8px; font-family: Georgia, serif; }
#floorname { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); color: var(--gold); font: italic 15px Georgia, serif; text-shadow: 0 1px 3px #000; pointer-events: none; opacity: 0; transition: opacity .6s; }
#floorname.show { opacity: 1; }
/* on-screen messages, like the classic client */
#screenmsg, #infomsg, #sysmsg, #eventmsg, #warnmsg, #bcastmsg { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000, 1px 1px 0 #000; max-width: 80%; opacity: 0; transition: opacity .4s; }
#screenmsg { bottom: 14px; color: #fff; font-size: 13px; }
#infomsg { top: 58%; color: #7dff6a; font-size: 13px; }
#sysmsg { top: 22%; color: #fff; font-size: 15px; }
#eventmsg { top: 40%; color: #fff; font-size: 14px; } /* Tibia's white event message in the middle (a chest's contents) */
#warnmsg { top: 30%; color: #ff3c3c; font-size: 15px; } /* red: the idle warning */
#bcastmsg { top: 12%; color: #ff3c3c; font-size: 17px; } /* red: a game master's /broadcast */
/* a private message: light blue at the top, "Name:" over the words (OTClient's privateLabel) */
#pmmsg { position: absolute; left: 50%; transform: translateX(-50%); top: 9%; color: var(--pm); font-size: 14px; font-weight: 700; text-align: center; white-space: pre-line;
  pointer-events: none; text-shadow: 0 0 2px #000, 0 0 2px #000, 1px 1px 0 #000; max-width: 70%; opacity: 0; transition: opacity .4s; }
#screenmsg.show, #infomsg.show, #sysmsg.show, #eventmsg.show, #warnmsg.show, #bcastmsg.show, #pmmsg.show { opacity: 1; transition: none; }
#usewith { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); background: #000c; color: var(--gold); padding: 4px 10px; border-radius: 3px; border: 1px solid var(--gold-dim); pointer-events: none; }

#hotbar { display: flex; gap: 4px; justify-content: center; padding: 5px 6px; background: #17140f; border-top: 1px solid var(--edge); }
.hk { position: relative; width: 42px; height: 42px; background: #0f0d0a; border: 1px solid var(--edge); border-radius: 3px; cursor: pointer; overflow: hidden; }
.hk:hover, .hk.drop { border-color: var(--gold); }
.hk.dragging { opacity: 0.45; }
.hk[draggable="true"] { cursor: grab; }
.hk .key { position: absolute; left: 2px; top: 0; font-size: 9px; color: var(--muted); z-index: 2; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.hk .self { position: absolute; left: 2px; bottom: 0; font-size: 8px; font-weight: 700; color: #8dfcc8; text-shadow: 0 0 2px #000, 0 0 2px #000; z-index: 2; letter-spacing: .03em; }
.hk .n { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; z-index: 2; }
.hk canvas { position: absolute; left: 5px; top: 5px; width: 32px; height: 32px; image-rendering: pixelated; }
.hk .glyph { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px Georgia, serif; text-align: center; line-height: 1; padding: 2px; }
.hk .glyph.heal { color: #8cf08c; } .hk .glyph.attack { color: #ff9a6a; } .hk .glyph.support { color: #9fd0ff; } .hk .glyph.text { color: var(--local); font: 10px system-ui; }
.hk .cd { position: absolute; inset: 0; background: rgba(0,0,0,0.65); transform-origin: bottom; z-index: 1; pointer-events: none; }

#console { height: 180px; display: flex; flex-direction: column; background: #12100c; border-top: 1px solid var(--edge); }
/* Each channel has its colour (--ch): the active tab is raised and joined to the
   log below it, with a stripe and its name in that colour; the others sit back,
   dim; a dot says one has news. The chat line wears the colour of where you type. */
[data-tab="default"], #console[data-ch="default"] { --ch: var(--local); }
[data-tab="npc"], #console[data-ch="npc"] { --ch: var(--npc); }
[data-tab="party"], #console[data-ch="party"] { --ch: #8dfcc8; }
[data-tab="guild"], #console[data-ch="guild"] { --ch: #b6f07a; }
[data-tab="world"], #console[data-ch="world"] { --ch: #9fd0ff; }
[data-tab="trade"], #console[data-ch="trade"] { --ch: #ffc46b; }
[data-tab="log"] { --ch: var(--text); }
[data-tab^="pm:"], #console[data-ch="pm"] { --ch: var(--pm); }
#chattabs { display: flex; align-items: flex-end; gap: 3px; padding: 4px 6px 0; background: #1a1712; border-bottom: 1px solid var(--edge-hi); }
#chattabs button { position: relative; border-radius: 4px 4px 0 0; border: 1px solid var(--edge); border-bottom: none; padding: 2px 14px; font-size: 12px;
  background: #100e0b; color: #776d5c; margin-bottom: 0; }
#chattabs button:hover:not(.on) { color: var(--text); border-color: var(--edge-hi); }
#chattabs button.on { background: #12100c; color: var(--ch); font-weight: 700; padding: 4px 16px 3px; border-color: var(--edge-hi);
  box-shadow: inset 0 2px 0 var(--ch); margin-bottom: -1px; border-bottom: 1px solid #12100c; }
#chattabs button.unread:not(.on) { color: #cfc4ad; }
#chattabs button.unread:not(.on)::after { content: ''; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ch); box-shadow: 0 0 4px var(--ch); }
#chatlogs { flex: 1; position: relative; min-height: 0; }
.chatlog { position: absolute; inset: 0; overflow-y: auto; padding: 4px 8px; font-size: 12.5px; display: none; }
.chatlog.on { display: block; }
.chatlog .m { margin: 1px 0; word-wrap: break-word; }
.chatlog .t { color: #6d6555; margin-right: 6px; font-size: 11px; user-select: none; -webkit-user-select: none; } /* (a selection takes the name and the words, not the time) */
.chatlog .local { color: var(--local); }
.chatlog .npc, .chatlog .ambient { color: var(--local); } /* NPCs speak in yellow, like players */
.chatlog .kw { color: #b9e4ff; text-decoration: underline; cursor: pointer; font-weight: 600; }
.chatlog .info { color: var(--info); }
.chatlog .rarei, #infomsg .rarei { color: var(--epic); font-weight: 600; } /* a rare drop, in its loot message */
.chatlog .status, .chatlog .look { color: var(--status); }
.chatlog .system { color: var(--system); }
.chatlog .emote { color: #f0a0e0; font-style: italic; }
.chatlog .party { color: #8dfcc8; }
.chatlog .guild { color: #b6f07a; }
.chatlog .world { color: #9fd0ff; }
.chatlog .trade { color: #ffc46b; }
.chatlog .said { color: var(--local); } /* what a player says, in any channel: yellow, as in Default (the channel's own lines keep its colour) */
.chatlog .gmsaid { color: #ff5a4e; } /* a game master's words in Party, World, Trade, a private tab (not Default) */
.chatlog .server { color: #ff7ad9; font-weight: 600; }
.chatlog .warning { color: #ff4a4a; font-weight: 600; }
.chatlog .broadcast { color: #ff4a4a; font-weight: 700; }
.chatlog .gm { color: #9ad0ff; }
.chatlog .combat { color: #c8c2b4; }
#chatbar { display: flex; gap: 6px; padding: 4px 6px; border-top: 1px solid var(--edge); align-items: center; }
#chatch { color: var(--ch, var(--gold-dim)); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap; flex: none; width: 116px; text-align: right; } /* one width for every channel: the input never moves */
#chatinput { flex: 1; border-left: 3px solid var(--ch, var(--edge)); }
#chatinput:focus { border-color: var(--edge-hi); border-left-color: var(--ch, var(--gold-dim)); }
/* private messages: from a player light blue, yours lavender (Tibia's); a player's name can be right-clicked */
.chatlog .pm-from { color: var(--pm); }
.chatlog .pm-to { color: #9f9dfd; }
.chatlog .who { cursor: pointer; }
.chatlog .who:hover { text-decoration: underline; }
#chattabs button.pm { padding-right: 20px; }
#chattabs button.moving { opacity: 0.75; outline: 1px dashed var(--gold); cursor: grabbing; }
#chattabs button.pm.on { padding-right: 22px; }
#chattabs button.pm .x { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; line-height: 1; color: #8a8070; }
#chattabs button.pm .x:hover { color: #ff8a7a; }
#chatnew { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; flex: none; border-radius: 3px; color: var(--pm); }
#console { position: relative; }
#pmopen { position: absolute; right: 6px; bottom: 34px; width: 210px; padding: 8px; background: #1d1913; border: 1px solid var(--edge-hi); border-radius: 4px; box-shadow: 0 4px 14px #000a; z-index: 30; }
#pmopen .pmh { color: var(--gold); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
#pmopen input { width: 100%; box-sizing: border-box; }
#pmopen .pmb { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }

/* ---------- sidebar ---------- */
#side { width: 268px; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--edge); }
#side-top { padding: 6px; display: flex; flex-direction: column; gap: 6px; border-bottom: 2px solid var(--edge-dark); }
#mapbox { display: flex; gap: 4px; }
#minimap { width: 176px; height: 128px; image-rendering: pixelated; background: #000; border: 1px solid var(--edge); display: block; }
#mapbtns { display: flex; flex-direction: column; gap: 4px; flex: 1; }
#mapbtns button { padding: 2px 0; font-weight: 700; }
#bars { display: flex; flex-direction: column; gap: 3px; }
.sbar { display: grid; grid-template-columns: 14px 1fr 70px; align-items: center; gap: 5px; font-size: 11px; }
.sbar i { font-style: normal; text-align: center; }
.sbar.hp i { color: #ff5a4a; } .sbar.mp i { color: #6a9aff; } .sbar.xp i { color: var(--gold); }
.sbar .track { height: 9px; background: #0d0b08; border: 1px solid var(--edge-dark); box-shadow: 0 0 0 1px var(--edge); position: relative; }
.sbar.xp .track { height: 5px; }
.sbar .fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .15s; }
.sbar.hp .fill { background: linear-gradient(#e0574d, #9a2a23); }
.sbar.mp .fill { background: linear-gradient(#5a8bf0, #2a4c9c); }
.sbar.xp .fill { background: linear-gradient(#e6c25a, #9c7a26); }
.sbar .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
#invblock { display: flex; gap: 6px; justify-content: center; position: relative; }
/* the equipment minimized (the – in its corner): its slots folded away, the fighting buttons in one row
   with the level and cap beside them; + opens it again (remembered) */
#eq-min { position: absolute; top: -2px; right: 0; width: 16px; height: 16px; padding: 0; font-size: 12px; line-height: 14px; background: #1a1712; color: var(--muted); }
#eq-min:hover { color: var(--gold); }
#eq-mini { display: none; align-self: center; font-size: 10px; line-height: 1.25; color: var(--muted); white-space: nowrap; }
#eq-mini b { color: var(--text); }
#invblock.min { justify-content: flex-start; align-items: center; padding-right: 22px; gap: 4px; }
#invblock.min #equip { display: none; }
#invblock.min #eq-mini { display: block; order: 2; margin-left: 4px; }
#invblock.min #fightcol { flex-direction: row; order: 1; }
#invblock.min .fsep { height: auto; width: 3px; }
#invblock.min #eq-min { top: 50%; transform: translateY(-50%); }
#equip { display: grid; grid-template-columns: repeat(3, 40px); gap: 3px; }
.slot, .bagslot { width: 40px; height: 40px; background: #15120d; border: 1px solid var(--edge-dark); box-shadow: inset 1px 1px 0 #000, 0 0 0 1px var(--edge); border-radius: 1px; position: relative; image-rendering: pixelated; }
.slot:empty::after { content: attr(data-slot); position: absolute; inset: 0; display: grid; place-items: center; font-size: 8px; color: #4f4636; text-transform: uppercase; }
.slot canvas, .bagslot canvas { width: 32px; height: 32px; position: absolute; left: 3px; top: 3px; image-rendering: pixelated; }
.slot .n, .bagslot .n { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.slot:hover, .bagslot:hover { box-shadow: inset 1px 1px 0 #000, 0 0 0 1px var(--gold-dim); }
.infobox { width: 40px; height: 40px; background: #15120d; border: 1px solid var(--edge-dark); box-shadow: 0 0 0 1px var(--edge); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; line-height: 1.2; }
.infobox b { color: var(--muted); font-weight: 400; font-size: 9px; }
.infobox span { font-weight: 700; }
#fightcol { display: flex; flex-direction: column; gap: 3px; }
.fbtn { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; background: #1a1712; }
.fbtn canvas { width: 20px; height: 20px; image-rendering: pixelated; }
.fbtn.on { border-color: var(--gold); background: #4a3a18; box-shadow: inset 0 0 6px #e2b65a55; }
.fsep { height: 4px; }
#sidebtns { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } /* icons: rows of seven */
#sidebtns button { padding: 0; height: 26px; display: grid; place-items: center; background: #1a1712; }
#sidebtns button canvas { width: 20px; height: 20px; image-rendering: pixelated; }
#sidebtns button.on { border-color: var(--gold-dim); color: var(--gold); background: #3a2e18; }
#btn-stop { color: #ff9a8a; }
#zone { text-align: center; font-size: 11px; color: var(--muted); }
#zone.pz { color: #9fe08a; }

/* stacked mini windows, like the classic client */
#windows { flex: 1; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.mwin { background: var(--panel-2); border: 1px solid var(--edge-dark); box-shadow: 0 0 0 1px var(--edge); flex-shrink: 0; }
.mwh { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 6px; background: linear-gradient(#3a3226, #2a241b); color: var(--gold); font: 600 12px Georgia, serif; cursor: default; user-select: none; }
.mwh .ttl { flex: 1; }
/* the grip: six dots that say "you can drag this" */
.mwh .grip { width: 6px; height: 11px; flex: none; opacity: 0.55; background-image: radial-gradient(circle, var(--gold-dim) 1px, transparent 1.3px); background-size: 3px 4px; background-position: 0 0; }
.mwh:hover .grip { opacity: 1; }
/* one-time tips (hints.js): a small card with an arrow at what it is about */
.coach { position: fixed; z-index: 60; max-width: 260px; padding: 8px 10px 8px; background: linear-gradient(#352c1f, #241f17); border: 1px solid var(--gold-dim); border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 0 0 1px #0e0c09; color: var(--text); font-size: 12px; line-height: 1.4; animation: coach-in 0.25s ease-out, coach-bob 2.4s ease-in-out 0.25s infinite; }
.coach b { color: var(--gold); }
.coach-ok { display: block; margin: 6px 0 0 auto; font-size: 11px; }
.coach-arrow { position: absolute; width: 10px; height: 10px; background: #241f17; border: 1px solid var(--gold-dim); transform: rotate(45deg); }
.coach[data-side="above"] .coach-arrow { left: calc(50% - 6px); bottom: -6px; border-top: none; border-left: none; }
.coach[data-side="left"] .coach-arrow { right: -6px; top: 16px; border-bottom: none; border-left: none; background: #2b251b; }
@keyframes coach-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes coach-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.mwh .sub { color: var(--muted); font: 11px system-ui; }
.mwh button { padding: 0 5px; line-height: 14px; font-size: 11px; }
.mwb { padding: 5px; max-height: 260px; overflow-y: auto; }
.mwin.collapsed .mwb { display: none; }
.empty { color: var(--muted); font-size: 12px; }
.bag { display: grid; grid-template-columns: repeat(5, 40px); gap: 3px; justify-content: center; }
.skl { display: grid; grid-template-columns: 1fr auto; font-size: 12px; margin-bottom: 2px; }
.skl .k { color: var(--muted); }
.skl .pb { grid-column: 1 / -1; height: 3px; background: #0d0b08; margin-top: 1px; }
.skl .pb div { height: 100%; background: linear-gradient(90deg, #7a9a3a, #b6d65a); }
.skl.sep { margin-top: 6px; }
.bl { display: grid; grid-template-columns: 28px 1fr; gap: 0 6px; align-items: center; padding: 2px; border: 1px solid transparent; cursor: pointer; font-size: 12px; }
.bl:hover { border-color: var(--edge-hi); }
.bl.target { border-color: #ff3b30; }
.bl.follow { border-color: #5fd36f; }
.bl canvas { width: 28px; height: 28px; image-rendering: pixelated; grid-row: span 2; }
.bl .hb { height: 4px; background: #0d0b08; }
.bl .hb div { height: 100%; }
.q { margin-bottom: 6px; font-size: 12px; }
.q .qn { color: var(--text); font-weight: 600; }
.q .qn .ready { color: #5fd3ff; font-weight: 700; margin-left: 4px; }
.q.done .qn { color: var(--muted); text-decoration: line-through; font-weight: 400; }
.q .qo { color: var(--muted); display: flex; justify-content: space-between; }
.q .qn { display: flex; align-items: center; gap: 5px; }
.q .qn > span:nth-of-type(1) { flex: 1; min-width: 0; }
.q .qlv { color: var(--muted); font-weight: 400; font-size: 11px; }
.q .qdot { flex: none; width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1px solid rgba(0,0,0,.7); background: var(--c); box-shadow: 0 0 0 1px rgba(255,255,255,.18); cursor: pointer; }
.q.off .qdot { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.q .qo { gap: 8px; padding-left: 16px; }
.q .qo > span:last-child { flex: none; }
.q .qo.ok { color: #7fbf6a; }
.q .qo i { color: #b9a4ff; font-style: normal; }
.q .qr { padding-left: 16px; }
.q .qr.ready { color: #ffcf3f; font-weight: 700; }
.q .qp { padding-left: 16px; color: #c9a85a; font-size: 11px; }
.q.active { padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sp { display: grid; grid-template-columns: 1fr auto; font-size: 12px; padding: 3px 4px; border-radius: 2px; cursor: pointer; border: 1px solid transparent; }
.sp:hover { border-color: var(--gold-dim); background: #2e2618; }
.sp .w { color: #ff9a3c; font-style: italic; grid-column: 1 / -1; font-size: 11px; }
.sp .m { color: #7fa6ff; }
.sp.pic { grid-template-columns: 26px 1fr auto; column-gap: 6px; }
.sp.pic .w { grid-column: 2 / -1; }
.sp .spicon { grid-row: span 2; align-self: center; border-radius: 3px; image-rendering: pixelated; cursor: grab; }
.copyable { user-select: text; -webkit-user-select: text; cursor: text; }
.hk .spicon { left: 0; top: 0; width: 40px; height: 40px; } /* fills the slot (over .hk canvas) */
.wrow.spellrow { grid-template-columns: 32px 1fr auto; }
.wrow.spellrow .spicon { grid-row: span 2; align-self: center; border-radius: 3px; image-rendering: pixelated; }
.wrow.spellrow .d { grid-column: 2 / -1; }
.vip { font-size: 12px; padding: 1px 4px; cursor: default; }
.vip.on { color: #5fe05f; }
.vip.off { color: #e05a4a; }
.vip:hover { background: #ffffff10; }
.vipadd { padding: 3px 2px; }
.vipadd input { width: 100%; box-sizing: border-box; }
/* the Guild window (guilds.go) */
.gnone { color: var(--muted); font-size: 12px; padding: 4px; }
.ginv { display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 2px; border-bottom: 1px solid #ffffff10; }
.ginv span { flex: 1; }
.gfound, .ginvrow { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 2px; }
.gfound input, .ginvrow input, .gask input { flex: 1; min-width: 0; box-sizing: border-box; font-size: 12px; }
.gask { padding: 3px 2px; }
.gask input { width: 100%; }
.ghint { width: 100%; color: var(--muted); font-size: 11px; }
.gname { color: var(--gold); font-weight: 700; text-align: center; padding: 2px 0; }
.gmotd { font-size: 11px; color: #b6f07a; padding: 2px 4px 5px; border-bottom: 1px solid #ffffff14; white-space: pre-wrap; word-break: break-word; }
.gmotd.edit { cursor: pointer; }
.gmotd.edit:hover { background: #ffffff0c; }
.gmem { display: flex; gap: 4px; align-items: baseline; font-size: 12px; padding: 1px 4px; cursor: default; }
.gmem:hover { background: #ffffff10; }
.gmem .gn { font-weight: 600; }
.gmem.on .gn { color: #5fe05f; }
.gmem.off .gn { color: #9a8f80; }
.gmem .gnick { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmem .gr { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.gmem .gr.r0 { color: var(--gold); }
.gmem .gr.r1 { color: #cfc4ad; }
.gpend { font-size: 11px; color: var(--muted); padding: 1px 4px; }
.gpend button { padding: 0 5px; font-size: 11px; }
.gfoot { display: flex; justify-content: flex-end; gap: 4px; padding: 5px 2px 2px; }
.pm { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; font-size: 12px; margin-bottom: 4px; }
.pm .lv { color: var(--muted); }
.pm .hb, .pm .mb { grid-column: 1 / -1; height: 4px; background: #0d0b08; }
.pm .hb div { height: 100%; background: #3ad13a; } .pm .mb div { height: 100%; background: #3f6fd1; }
.pm .crown { color: var(--gold); }
.pbtns { display: flex; gap: 4px; margin-top: 4px; }

/* ---------- dungeon finder ---------- */
/* in the queue the sidebar icon turns; a group found, it pulses; inside, it stays lit */
@keyframes dfspin { to { transform: rotate(360deg); } }
@keyframes dfpulse { 0%, 100% { box-shadow: 0 0 0 0 #e2b65a00; background: #3a2e18; } 50% { box-shadow: 0 0 8px 2px #e2b65acc; background: #6a5220; } }
#sidebtns button.dfq { border-color: var(--gold-dim); }
#sidebtns button.dfq canvas { animation: dfspin 1.8s linear infinite; }
#sidebtns button.dfr { border-color: var(--gold); animation: dfpulse 0.9s ease-in-out infinite; }
#sidebtns button.dfi { border-color: #8a5fd0; background: #2a1f3c; }
.mwin[data-win="dungeons"] .mwb, .mwin[data-win="talents"] .mwb { max-height: none; }
.dfsec { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin: 2px 0 3px; }
.dfroles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 6px; }
.dfrole { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 3px; font-size: 11px; background: #1a1712; }
.dfrole canvas, .dfneed canvas, .dfmine canvas, .dfr-role canvas, .dfr-slots canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.dfrole.on { border-color: var(--gold); color: var(--gold); background: #3a2e18; }
.dfrole:disabled { opacity: 0.35; cursor: default; border-color: var(--edge); color: var(--text); }
.dflist { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
/* random or choose: two tabs over the list */
.dftabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 2px 0 6px; border: 1px solid var(--edge); border-radius: 4px; overflow: hidden; }
.dftab { border: none; border-radius: 0; font-size: 11px; padding: 4px 2px; background: #1a1712; }
.dftab + .dftab { border-left: 1px solid var(--edge); }
.dftab.on { background: #3a2e18; color: var(--gold); }
.dftab:disabled { opacity: 0.4; cursor: default; }
.dfrandom { padding: 7px 8px; margin-bottom: 6px; border: 1px solid var(--gold-dim); border-radius: 4px; background: linear-gradient(#2c251a, #1f1a13); }
.dfrandom .dfr-t { color: var(--gold); font: 600 13px Georgia, serif; margin-bottom: 3px; }
.dfrandom .dfr-s { font-size: 11.5px; color: var(--text); line-height: 1.4; }
.dfrandom .dfr-s + .dfr-s { color: var(--muted); margin-top: 3px; }
.dfrandom .w { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #3a2e18; color: var(--gold); font-size: 10px; text-align: center; }
.dfall { margin: 4px 0 2px; font-size: 11px; padding: 2px 6px; align-self: flex-start; }
.dfruns { font-size: 11.5px; color: var(--muted); text-align: center; margin: 2px 0 4px; }
.dfruns b { color: var(--gold); }
.dfruns.none { color: #e0907a; }
.dfbr { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; margin: 6px 4px 2px; border-bottom: 1px solid var(--edge); padding-bottom: 2px; }
.dfd { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 5px; font-size: 12px; padding: 3px 4px; border-radius: 3px; cursor: pointer; }
.dfd:hover { background: var(--panel-2); }
.dfd input { margin: 0; padding: 0; accent-color: var(--gold-dim); }
.dfd .lv { color: var(--muted); font-size: 11px; }
.dfd .w { color: var(--gold); font-size: 11px; background: #3a2e18; border-radius: 8px; padding: 0 5px; }
.dfd.off { opacity: 0.45; cursor: default; }
.dfgo, .dfleave, .dfexit, .dfyes, .dfno { flex: 1; }
.dfline { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.dfline .dfclock, #dfready .wh .dfclock { color: var(--gold); font-variant-numeric: tabular-nums; }
.dfneed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 5px; }
.dfneed span { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; padding: 2px; background: #1a1712; border: 1px solid var(--edge); border-radius: 3px; color: var(--muted); }
.dfneed span.full { color: #7fd66f; border-color: #3f6a34; }
.dfprog { position: relative; height: 16px; background: #0d0b08; border: 1px solid var(--edge); border-radius: 3px; margin-bottom: 4px; overflow: hidden; }
.dfprog div { height: 100%; background: #5b3f8f; }
.dfprog span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; }
.dfdone { color: #7fd66f; }
#dfready { top: 26%; width: min(320px, calc(100vw - 32px)); z-index: 30; border-color: var(--gold-dim); }
#dfready .wh { display: flex; justify-content: space-between; align-items: center; }
.dfr-body { padding: 12px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.dfr-name { font-size: 17px; color: var(--gold); }
.dfr-role { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.dfr-slots { display: flex; gap: 6px; }
.dfr-slots span { display: grid; place-items: center; width: 34px; height: 34px; background: #14110d; border: 1px solid var(--edge); border-radius: 50%; opacity: 0.55; }
.dfr-slots span.ok { opacity: 1; border-color: #5fb04f; background: #1c2a16; box-shadow: 0 0 6px #5fb04f88; }
.dfr-bar { width: 100%; height: 6px; background: #0d0b08; border-radius: 3px; overflow: hidden; }
.dfr-bar div { height: 100%; background: var(--gold-dim); transition: width 0.25s linear; }
.dfr-btns { display: flex; gap: 8px; width: 100%; }
.dfr-btns button { flex: 1; padding: 7px 10px; }
#dfr-yes { background: #3a2e18; border-color: var(--gold); color: var(--gold); }
#dfr-yes:hover { background: #57431e; }
.dfr-wait { color: var(--muted); font-size: 12px; }

/* ---------- modal windows ---------- */
.window { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--edge-hi); box-shadow: 0 10px 40px #000c; border-radius: 4px; z-index: 20; }
.window.wide { width: min(640px, calc(100vw - 32px)); top: 10%; }
.wh { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: var(--panel-2); border-bottom: 1px solid var(--edge); color: var(--gold); font: 600 13px Georgia, serif; }
.wh button { padding: 0 7px; }
.tabs { display: flex; gap: 4px; padding: 6px 8px 0; }
.tabs button.on { color: var(--gold); border-color: var(--gold-dim); background: #3a2e18; }
#shop-list { max-height: 260px; overflow-y: auto; margin: 6px 8px; border: 1px solid var(--edge); background: #12100c; }
.srow { display: grid; grid-template-columns: 36px 1fr auto; gap: 6px; align-items: center; padding: 3px 6px; cursor: pointer; border-bottom: 1px solid #1f1b15; }
.srow canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.srow .p { color: var(--gold); }
.srow .w { color: var(--muted); font-size: 11px; }
.srow .st { color: var(--gold); font-size: 11px; }
.srow.on { background: #3a2e18; }
.srow.dim { opacity: .45; }
.shop-foot { display: flex; align-items: center; gap: 8px; padding: 0 8px 8px; }
.shop-foot input { width: 60px; }
#hk-text { flex: 1; width: auto; }
#shop-info { flex: 1; color: var(--muted); font-size: 11px; }
.wlist { max-height: 320px; overflow-y: auto; margin: 6px 8px 8px; }
.wrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px; border-bottom: 1px solid #1f1b15; font-size: 12px; }
.wrow .d { color: var(--muted); grid-column: 1 / -1; }
.wrow .w { color: #ff9a3c; font-style: italic; }
.wrow button { grid-row: span 2; align-self: center; }
.wrow.pick { cursor: pointer; grid-template-columns: 36px 1fr; align-items: center; }
.wrow.pick:hover { background: #2e2618; }
.wnote { color: var(--muted); margin: 8px 10px 0; font-size: 12px; }
/* Choose your vocation (hud.js openVocations): the five side by side */
#vocwin { width: min(1000px, calc(100vw - 32px)); top: 8%; }
#voc-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px; }
@media (max-width: 760px) { #voc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voc { background: linear-gradient(180deg, #2a2116, var(--panel-2) 45%); border: 1px solid var(--edge); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.voc:hover { border-color: var(--gold); }
.voc .vtop { display: flex; align-items: center; gap: 8px; }
.voc .vpic { flex: none; width: 36px; height: 36px; border: 2px solid #6a5226; border-radius: 3px; background: #000; }
.voc .vpic canvas { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.voc h3 { margin: 0; color: var(--gold); font: 600 16px Georgia, serif; }
.voc .vrole { color: #9fd98a; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.voc .vdesc { min-height: 5.6em; line-height: 1.4; }
.voc .vbar { display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.voc .vbar i { height: 7px; background: #0b0906; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
.voc .vbar b { display: block; height: 100%; }
.voc .vbar.hp b { background: linear-gradient(#e0605a, #a02a24); }
.voc .vbar.mana b { background: linear-gradient(#6a8cf0, #2c48b0); }
.voc .vbar em { font-style: normal; text-align: right; color: var(--text, #ddd); }
.voc .vkit { display: flex; flex-wrap: wrap; gap: 3px; }
.voc .vkit span { padding: 1px 5px; font-size: 10.5px; color: #d8c9a2; background: #1a140c; border: 1px solid #3a2d18; border-radius: 9px; }
.voc button { margin-top: auto; }
.opts label { display: flex; gap: 8px; align-items: flex-start; padding: 6px 2px; font-size: 12px; }

/* ---------- context menu ---------- */
#ctxmenu { position: fixed; z-index: 60; background: #1c1914; border: 1px solid var(--edge-hi); box-shadow: 0 6px 20px #000c; min-width: 150px; padding: 3px 0; user-select: none; }
#ctxmenu .ci { padding: 3px 14px; cursor: pointer; font-size: 12px; white-space: nowrap; }
#ctxmenu .ci:hover { background: #3a2e18; color: var(--gold); }
#ctxmenu .cs { height: 1px; background: var(--edge); margin: 3px 0; }
#ctxmenu .ch { padding: 2px 14px 3px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--edge); margin-bottom: 3px; }
#tooltip { position: fixed; background: #0d0b08ee; border: 1px solid var(--edge-hi); padding: 4px 7px; border-radius: 3px; pointer-events: none; z-index: 40; font-size: 12px; max-width: 220px; }

@media (max-width: 760px) {
  #side { display: none; }
  #console { height: 120px; }
}
.chatlog .local-npc, .chatlog .npc-self { color: var(--local); }

/* movable / resizable windows */
.mwin { position: relative; }
.mwin .rsz { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--edge-hi) 50%, var(--edge-hi) 60%, transparent 60%, transparent 70%, var(--edge-hi) 70%, var(--edge-hi) 80%, transparent 80%); }
.mwin.collapsed .rsz { display: none; }
.mwh { cursor: move; }
.mwh button { cursor: pointer; }
#floatlayer { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
#floatlayer .mwin { pointer-events: auto; position: fixed; box-shadow: 0 0 0 1px var(--edge), 0 8px 24px #000a; }
.mwin.dragging { opacity: .85; }
.mwb { overflow-y: auto; }

#conds { display: flex; gap: 3px; justify-content: center; min-height: 18px; padding: 2px; background: #15120d; border: 1px solid var(--edge-dark); box-shadow: 0 0 0 1px var(--edge); }
#conds .cond { width: 16px; height: 16px; image-rendering: pixelated; }
.opts select { background: #0f0d0a; color: var(--text); border: 1px solid var(--edge); border-radius: 3px; padding: 2px 4px; margin-left: 6px; }

#tutorial { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); max-width: 70%; display: flex; gap: 10px; align-items: center;
  background: #000d; color: #f3e6c0; padding: 7px 12px; border: 1px solid var(--gold); border-radius: 4px; font-size: 14px; line-height: 1.35; z-index: 5; }
#tutorial .tstep { color: var(--gold); font-weight: bold; white-space: nowrap; }
#tutorial button { background: none; border: 1px solid var(--gold-dim); color: var(--gold); border-radius: 3px; cursor: pointer; padding: 1px 6px; font-size: 12px; }

/* Set Outfit (outfitwin.js) */
.ow-body { display: flex; gap: 10px; padding: 8px; flex-wrap: wrap; }
.ow-left { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 170px; }
#ow-preview { background: #12100c; border: 1px solid var(--edge); image-rendering: pixelated; }
.ow-turn, .ow-sex, .ow-pick { display: flex; gap: 4px; align-items: center; }
.ow-pick span { min-width: 92px; text-align: center; color: var(--gold); border: 1px solid var(--edge); padding: 2px 4px; background: #12100c; }
.ow-sex button.on { color: var(--gold); border-color: var(--gold-dim); background: #3a2e18; }
#ow-need { color: #ff9a3c; font-size: 11px; min-height: 13px; }
.ow-right { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ow-colours { display: flex; gap: 6px; }
#ow-parts { display: flex; flex-direction: column; gap: 4px; }
#ow-parts button { width: 78px; }
#ow-parts .ow-rand { margin-top: auto; font-size: 11px; }
#ow-parts button.on { color: var(--gold); border-color: var(--gold-dim); background: #3a2e18; }
#ow-palette { display: grid; grid-template-columns: repeat(19, 1fr); gap: 1px; flex: 1; align-self: start; }
#ow-palette .pc { aspect-ratio: 1; min-width: 9px; cursor: pointer; border: 1px solid #0006; }
#ow-palette .pc.on { outline: 2px solid #fff; outline-offset: -1px; z-index: 1; }
.ow-help { color: var(--muted); font-size: 11px; margin: 4px 0 0; }
.ow-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 0 8px 8px; }

/* ---------- the title screen (client/js/title.js draws the living picture) ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: #05060c; }
#title-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.title-head { position: absolute; top: 6%; left: 0; right: 0; text-align: center; pointer-events: none; }
.title-logo { font: 700 clamp(48px, 10vw, 112px)/1 Georgia, 'Times New Roman', serif; letter-spacing: .16em; padding-left: .16em;
  background: linear-gradient(#fff6c8 0%, #f7d36b 38%, #c98a1c 62%, #ffe08a 80%, #a4650f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #4a2a08) drop-shadow(0 0 18px #ffb44866); }
.title-tag { margin-top: 10px; color: #e9dcb8; font: italic 15px Georgia, serif; letter-spacing: .08em; text-shadow: 0 1px 3px #000; opacity: .85; }
.title-menu { position: absolute; left: 7%; bottom: 12%; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; width: 210px;
  background: linear-gradient(#211a12f0, #15110cf0); border: 1px solid #8a6a32; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #3a2c16, 0 10px 40px #000c; border-radius: 4px; }
.title-menu button { padding: 8px; font: 600 14px Georgia, serif; letter-spacing: .04em; color: #f2d58c; background: linear-gradient(#4a3818, #2c2010); border: 1px solid #8a6a32; }
.title-menu button:hover { background: linear-gradient(#5e4720, #3a2a14); color: #fff0c0; }
.login-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 32px)); background: var(--panel);
  border: 1px solid var(--edge-hi); box-shadow: 0 0 0 3px #0c0a07, 0 0 0 4px var(--edge), 0 20px 60px #000c; border-radius: 4px; }
.lc-body { padding: 8px 16px 14px; }
.lc-body p { font-size: 13px; color: var(--text, #ddd); }
.login-card label { display: block; color: var(--muted); margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.login-card input { width: 100%; margin-top: 5px; font-size: 15px; }
.lc-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.support-card { width: min(240px, calc(100vw - 32px)); }
.support-card .lc-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px; }
.support-card button { padding: 8px; font: 600 14px Georgia, serif; letter-spacing: .04em; color: #f2d58c; background: linear-gradient(#4a3818, #2c2010); border: 1px solid #8a6a32; }
.support-card button:hover { background: linear-gradient(#5e4720, #3a2a14); color: #fff0c0; }
.support-card #sup-back { margin-top: 6px; }
.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; }
#key-text { margin: 10px 0 8px; padding: 12px 6px; text-align: center; font-size: 19px; color: var(--gold); background: #0f0d0a; border: 1px dashed var(--gold-dim); border-radius: 3px; user-select: all; }
.key-warn { margin: 6px 0 0; padding: 8px 10px; color: #ffd9a0; background: #4a1a10; border: 1px solid #a8442a; border-radius: 3px; text-align: center; }
.key-acts { display: flex; justify-content: center; gap: 6px; }
.lc-body p.key-note { font-size: 12px; color: var(--muted); }
.login-card label.key-check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text, #ddd); cursor: pointer; }
.login-card label.key-check input { width: auto; margin: 0; }
.lc-body p.key-nag { font-size: 12px; color: #ffcf8a; background: #3a2010; border: 1px solid #7a4a20; padding: 6px 8px; border-radius: 3px; }
.key-nag a { color: var(--gold); }
#login-btn, .lc-main { background: linear-gradient(#5b4317, #3d2d10); border-color: var(--gold-dim); color: var(--gold); min-width: 70px; }
.ow-mount { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.ow-mount .ml { color: var(--muted); width: 50px; }
.ow-count { color: var(--muted); font-size: 11px; margin-left: 4px; white-space: nowrap; }
#ow-mname, #ow-cname { min-width: 130px; text-align: center; color: var(--gold); border: 1px solid var(--edge); padding: 2px 4px; background: #12100c; }

/* the guest list of a house ("domus hospes") */
#houseguests { top: 22%; width: min(320px, calc(100vw - 32px)); z-index: 30; border-color: var(--gold-dim); }
#houseguests .hg-body { padding: 8px 10px 10px; }
#houseguests p { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
#houseguests textarea { width: 100%; box-sizing: border-box; background: #12100c; color: var(--text); border: 1px solid var(--edge); padding: 4px 6px; font: inherit; resize: vertical; }
#houseguests .hg-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }

/* professions in the skills window: under a line, apart from the fighting skills */
.skhr { border: 0; border-top: 1px solid var(--edge); margin: 6px 0 3px; }
.skhd { color: var(--gold-dim, #a8883e); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }

/* need / greed / pass (lootroll.js): cards stacked above the hotbar */
#rolls { position: fixed; left: 50%; bottom: 210px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 6px; z-index: 40; pointer-events: none; }
.rollcard { pointer-events: auto; width: 270px; padding: 7px 8px 8px; background: linear-gradient(#352c1f, #241f17); border: 1px solid var(--gold-dim); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px #0e0c09; animation: coach-in 0.2s ease-out; }
.rc-top { display: flex; gap: 8px; align-items: center; }
.rc-ico { width: 34px; height: 34px; flex: none; background: #0f0d0a; border: 1px solid var(--edge); border-radius: 3px; display: grid; place-items: center; }
.rc-ico canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.rc-name { color: var(--gold); font: 600 13px Georgia, serif; }
.rc-from { color: var(--muted); font-size: 11px; }
.rc-bar { height: 4px; margin: 6px 0; background: #0d0b08; border-radius: 2px; overflow: hidden; }
.rc-bar div { height: 100%; background: linear-gradient(90deg, #a8843c, #e2b65a); transition: width 0.2s linear; }
.rc-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rc-btns button { font-size: 12px; padding: 3px 0; }
.rc-need { border-color: #4e7a3a; color: #b8e09a; }
.rc-greed { border-color: #8a7130; color: #f0d27a; }
.rc-pass { color: var(--muted); }
.rc-mine { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 11.5px; padding: 3px 0; }
/* the "move how many?" box of a stack's drag */
#stackask, #nameask, #yesask, #bindask { position: fixed; z-index: 70; width: 230px; background: var(--panel-2); border: 1px solid var(--edge-dark); box-shadow: 0 0 0 1px var(--edge), 0 6px 20px #000c; border-radius: 4px; user-select: none; }
#stackask .sah, #nameask .sah, #yesask .sah, #bindask .sah { cursor: move; padding: 3px 8px; background: linear-gradient(#3a3226, #2a241b); color: var(--gold); font: 600 12px Georgia, serif; border-radius: 3px 3px 0 0; }
#stackask .sab, #nameask .sab { display: flex; align-items: center; gap: 8px; padding: 8px; }
#stackask .ico { width: 32px; height: 32px; flex-shrink: 0; background: #0006; border: 1px solid var(--edge-dark); border-radius: 3px; }
#stackask .ico canvas { image-rendering: pixelated; display: block; }
#stackask input[type=range] { flex: 1; min-width: 0; accent-color: var(--gold); }
#stackask .n { min-width: 28px; text-align: right; color: #eee; font: 600 13px system-ui, sans-serif; }
#stackask .saf, #nameask .saf, #yesask .saf, #bindask .saf { display: flex; justify-content: flex-end; gap: 6px; padding: 0 8px 8px; }
#stackask button, #nameask button, #yesask button, #bindask button { padding: 2px 12px; }
/* a window's foot: a note, then its buttons */
.wfoot { display: flex; align-items: center; gap: 6px; padding: 0 8px 8px; }
.wfoot .wnote, .wfoot .err { flex: 1; margin: 0; }
.wfoot .err { color: #e06a5a; font-size: 12px; }
.wrow.pick.sel { background: #3a2f1c; box-shadow: inset 2px 0 0 var(--gold); }
/* the character list in the game (Ctrl+G), like the classic client's */
#charwin .wlist { background: #0f0d0a; border: 1px solid var(--edge-dark); border-radius: 3px; max-height: 260px; }
#charwin .crow2 { grid-template-columns: 1fr auto; padding: 5px 8px; }
#charwin .crow2 .cl { color: var(--muted); }
#charwin-acc { margin-top: 0; margin-bottom: 8px; }
/* the hotkey list (Ctrl+K) */
#hkwin .wlist { max-height: 420px; }
#hkwin .hkrow { grid-template-columns: 32px 34px 1fr; padding: 3px 6px; min-height: 34px; }
#hkwin .hkrow .k { color: var(--gold); font: 600 12px Georgia, serif; }
#hkwin .hkrow .pic { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
#hkwin .hkrow .pic canvas { width: 32px; height: 32px; image-rendering: pixelated; border-radius: 3px; }
#hkwin .hkrow.empty .t { color: var(--muted); font-style: italic; }
#hkpicker { z-index: 22; } /* (over the hotkey list it is opened from) */
/* the help magnifier (Ctrl+H) */
body.helpmode, body.helpmode * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M18.5 18.5l9 9' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M18.5 18.5l9 9' stroke='%238a5a2b' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='9' fill='%23bfe3ff' fill-opacity='.35' stroke='%23000' stroke-width='4.5'/%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23e2b65a' stroke-width='2.2'/%3E%3Cpath d='M8 9a5 5 0 0 1 4-3' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, help !important; }
#helptip { position: fixed; z-index: 200; max-width: 300px; padding: 6px 9px; background: #1c1914f2; border: 1px solid var(--edge-hi); border-radius: 4px; box-shadow: 0 6px 20px #000c; pointer-events: none; font-size: 12px; color: #ddd; }
#helptip b { display: block; color: var(--gold); font: 600 13px Georgia, serif; margin-bottom: 2px; }
#helptip div { white-space: pre-line; line-height: 1.35; }

/* Show Text: a book (a spellbook) read */
#textwin { width: min(380px, calc(100vw - 32px)); }
#textwin .txhead { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; color: var(--gold); font: 600 13px Georgia, serif; }
#textwin .txhead canvas { width: 32px; height: 32px; image-rendering: pixelated; background: #0f0d0a; border: 1px solid var(--edge-dark); border-radius: 3px; }
#textwin-text { margin: 0 10px; padding: 8px 10px; max-height: 340px; overflow: auto; white-space: pre-wrap; background: #0f0d0a; border: 1px solid var(--edge-dark); border-radius: 3px; color: #e8dcc4; font: 12px/1.45 'DejaVu Sans Mono', monospace; }
.skl .bonus { color: #6ee05a; }

/* the game masters' menu (/gmmenu, gmmenu.js): tags, a card per command */
#gmwin { top: 4%; width: min(860px, calc(100vw - 32px)); height: min(82vh, 760px); min-width: 420px; min-height: 260px; max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); resize: both; overflow: hidden; }
#gmwin:not([hidden]) { display: flex; flex-direction: column; }
#gmwin.placed { transform: none; }
#gmwin .wh { cursor: move; user-select: none; }
.gmbar { display: flex; gap: 8px; align-items: center; padding: 8px 10px 0; flex-wrap: wrap; }
#gm-tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
#gm-tabs button { padding: 4px 10px; border-radius: 12px; font-size: 12px; }
#gm-tabs button span { margin-left: 3px; padding: 0 5px; border-radius: 8px; background: #0005; color: var(--muted); font-size: 10px; }
#gm-tabs button.on { color: var(--gold); border-color: var(--gold-dim); background: #3a2e18; }
#gm-search { width: 180px; }
#gm-tagdesc { padding: 4px 12px 0; color: var(--muted); font-size: 11px; min-height: 14px; }
#gm-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 8px; align-content: start; }
.gmcard { min-width: 0; background: #15120d; border: 1px solid var(--edge); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; transition: background .3s; }
.gmcard.ran { background: #26361a; transition: none; }
.gmcard[hidden] { display: none; }
.gmcard.gmwide { grid-column: 1 / -1; } /* (the chart maker: as wide as the window) */
.gmhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gmhead b { color: #ffd27a; font: 600 13px Georgia, serif; }
.gmhead code { color: var(--muted); font-size: 11px; }
.gmdesc { color: #c9bda4; font-size: 11.5px; line-height: 1.35; }
.gmfields { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.gmfields:empty { display: none; }
.gmfield { display: flex; flex-direction: column; gap: 2px; min-width: min(140px, 100%); flex: 1; }
.gmfield.wide { flex-basis: 100%; }
.gmfield .gml { color: var(--gold); font-size: 11px; }
.gmfield .gml i { color: var(--muted); font-style: normal; }
.gmfield input, .gmfield select { width: 100%; box-sizing: border-box; font-size: 12px; }
.gmquick { display: flex; gap: 3px; }
.gmquick button { padding: 0 6px; font-size: 11px; }
.gmpick { position: relative; display: flex; }
.gmpick input { flex: 1; }
.gmpick input.chosen { color: #9be38a; }
.gmcaret { padding: 0 6px; margin-left: -1px; }
.gmdrop { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 260px; overflow-y: auto; background: #0f0d0a; border: 1px solid var(--edge-hi); box-shadow: 0 6px 18px #000a; }
.gmdrop .gmgroup { position: sticky; top: 0; padding: 3px 8px; background: var(--panel-2); color: var(--gold); font-size: 11px; font-weight: 600; }
.gmopt { display: flex; align-items: center; gap: 6px; padding: 3px 8px; cursor: pointer; font-size: 12px; }
.gmopt canvas { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.gmopt i { color: var(--muted); font-style: normal; font-size: 10px; }
.gmopt.on, .gmopt:hover { background: #3a2e18; }
.gmnone { padding: 4px 8px; color: var(--muted); font-size: 11px; }
.gmrunrow { display: flex; align-items: center; gap: 8px; }
.gmline { flex: 1; color: #9ad0ff; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmline.need { color: #c9a35a; }
.gmrun { padding: 3px 16px; font-weight: 600; }

/* the wiki (wiki.js): the kinds, a list, the page; moved by its title, resized by its corner */
#wikiwin { top: 4%; width: min(1040px, calc(100vw - 24px)); height: min(84vh, 780px); min-width: 520px; min-height: 300px; max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); resize: both; overflow: hidden; }
#wikiwin:not([hidden]) { display: flex; flex-direction: column; }
#wikiwin.placed { transform: none; }
#wikiwin .wh { cursor: move; user-select: none; }
.wkbar { display: flex; gap: 4px; align-items: center; padding: 8px 10px 6px; }
.wkbar button { padding: 2px 10px; font-size: 15px; line-height: 1.2; }
.wkbar button:disabled { opacity: .4; cursor: default; }
#wk-search { flex: 1; margin-left: 4px; }
.wkbody { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px minmax(180px, 250px) 1fr; gap: 8px; padding: 0 10px 10px; }
#wk-kinds, #wk-list, #wk-page { min-height: 0; overflow-y: auto; background: #15120d; border: 1px solid var(--edge); border-radius: 4px; }
#wk-kinds { display: flex; flex-direction: column; padding: 4px; gap: 2px; }
#wk-kinds button { display: flex; justify-content: space-between; align-items: center; text-align: left; border-color: transparent; background: none; padding: 4px 8px; font-size: 12px; }
#wk-kinds button span { color: var(--muted); font-size: 10px; }
#wk-kinds button.on { color: var(--gold); background: #3a2e18; border-color: var(--gold-dim); }
#wk-list { padding: 4px; }
.wkgroups { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 2px 6px; }
.wkgroups button { padding: 1px 7px; border-radius: 10px; font-size: 10.5px; }
.wkgroups button.on { color: var(--gold); border-color: var(--gold-dim); background: #3a2e18; }
.wkrow { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 3px; color: var(--text); text-decoration: none; font-size: 12px; }
.wkrow:hover { background: #2b2418; }
.wkrow.on { background: #3a2e18; color: var(--gold); }
.wkrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkrow span i { margin-left: 6px; color: var(--muted); font-style: normal; font-size: 10px; }
.wkrow em { color: var(--muted); font-style: normal; font-size: 10.5px; white-space: nowrap; }
.wkpic { image-rendering: pixelated; flex: none; }
.wkrow .wkpic { width: 24px; height: 24px; }
#wk-page { padding: 12px 16px 16px; color: #e8dcc4; font-size: 12.5px; line-height: 1.5; }
#wk-page p { margin: 6px 0 10px; }
#wk-page ul { margin: 4px 0 10px; padding-left: 18px; }
#wk-page h2 { margin: 0; color: #ffd27a; font: 600 19px Georgia, serif; }
#wk-page h3 { margin: 14px 0 6px; padding-bottom: 2px; border-bottom: 1px solid var(--edge); color: var(--gold); font: 600 13px Georgia, serif; }
.wkhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wkhead .wkpic { width: 64px; height: 64px; background: #0f0d0a; border: 1px solid var(--edge-dark); border-radius: 4px; }
.wkhead .wklook { width: 72px; height: 72px; }
.wksub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.wkdesc { color: #c9bda4; font-style: italic; }
.wkmuted, .wkempty { color: var(--muted); }
.wkempty { padding: 10px; font-size: 12px; }
.wklink { color: #9ad0ff; text-decoration: none; cursor: pointer; }
.wklink:hover { text-decoration: underline; color: #c4e4ff; }
.wkfacts { border-collapse: collapse; margin: 4px 0 6px; }
.wkfacts th { text-align: left; color: var(--muted); font-weight: normal; padding: 2px 16px 2px 0; vertical-align: top; white-space: nowrap; }
.wkfacts td { padding: 2px 0; }
.wktable { border-collapse: collapse; width: 100%; margin: 4px 0; font-size: 12px; }
.wktable th { text-align: left; color: var(--gold); font-weight: 600; border-bottom: 1px solid var(--edge); padding: 3px 8px 3px 0; }
.wktable td { padding: 3px 8px 3px 0; border-bottom: 1px solid #2a241b; vertical-align: top; }
.wkcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; }
.wkcard { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 3px 6px; border: 1px solid #2e271d; border-radius: 3px; background: #1a1611; color: #9ad0ff; text-decoration: none; font-size: 12px; }
.wkcard:hover { border-color: var(--edge-hi); background: #241e15; }
.wkcard .wkpic { grid-row: span 2; width: 32px; height: 32px; }
.wkcard span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkcard em { color: var(--muted); font-style: normal; font-size: 10.5px; }
.wkr { font-weight: 600; }
.wkr-common { color: #c9c2b2; }
.wkr-uncommon { color: #7fd36a; }
.wkr-semi_rare { color: #6fb2ff; }
.wkr-rare { color: #c58cff; }
.wkr-very_rare { color: #ffb347; }
.wkr-epic { color: var(--epic); }
.wkr-legendary { color: #ffb347; }
.wkr-good { color: var(--gold); }
.wkr-bad { color: #e0605a; }
.wktable { border-collapse: collapse; margin: 4px 0 8px; font-size: 12px; }
.wktable th { text-align: left; color: var(--muted); font-weight: normal; padding: 3px 12px 3px 0; border-bottom: 1px solid var(--edge); white-space: nowrap; }
.wktable td { padding: 3px 12px 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top; }
.wkboss { color: #ff8a6a; }
.wkgold { color: #ffd27a; margin-bottom: 4px; }
.wkvoices { color: #c9bda4; font-style: italic; }
.wkwords { color: #ffd27a; font-size: 13px; }
.wkkeys code { display: inline-block; margin: 0 3px 3px 0; padding: 0 5px; background: #0f0d0a; border: 1px solid var(--edge); border-radius: 3px; color: #c9bda4; font-size: 11px; }
.wkmore { margin-top: 16px; color: var(--muted); font-size: 12px; }
.wkmark { margin: 2px 0 8px; padding: 2px 10px; font-size: 11.5px; color: #ffb3a8; border-color: #8a3a30; }
.wkmark.on { background: #4a1c17; color: #ff8a7a; }
.wktable .wkmark { margin: 0; padding: 0 8px; font-size: 10.5px; }
@media (max-width: 760px) { .wkbody { grid-template-columns: 1fr; grid-template-rows: auto 160px 1fr; } #wk-kinds { flex-direction: row; flex-wrap: wrap; } #wikiwin { min-width: 0; } }

/* the alchemist's cauldron (alchemy.js): a card per brew, as many to a row as fit (3-4 on a usual
   screen, 1-2 on a small one); the window never larger than the screen, its cards scroll */
/* ---------- the market (market.js) ---------- */
#marketwin { top: 4%; width: min(900px, calc(100vw - 24px)); }
#marketwin:not([hidden]) { display: flex; flex-direction: column; max-height: calc(100vh - 8%); }
#marketwin .wh .mk-bank { margin-left: auto; margin-right: 10px; color: var(--text); font: 600 12px system-ui, sans-serif; }
.mk-wait { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 8px 0; padding: 5px 8px; background: #2c3a1c; border: 1px solid #4f7a3a; border-radius: 3px; font-size: 12px; }
.mk-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 8px 8px; }
.mk-browse { display: grid; grid-template-columns: 250px 1fr; gap: 8px; min-height: 0; height: min(560px, calc(100vh - 170px)); }
.mk-left { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.mk-only { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.mk-items { flex: 1; overflow-y: auto; border: 1px solid var(--edge); background: #12100c; }
.mk-it { display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-items: center; padding: 3px 6px; cursor: pointer; border-bottom: 1px solid #1f1b15; }
.mk-it canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.mk-it .n { font-size: 12px; }
.mk-it .s { font-size: 10px; color: var(--gold); }
.mk-it.none .s { color: var(--muted); }
.mk-it.on { background: #3a2e18; }
.mk-it:hover { background: #2a2418; }
.mk-right { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 4px; border-bottom: 1px solid var(--edge); }
.mk-head canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.mk-head b { color: var(--gold); font: 600 14px Georgia, serif; }
.mk-head .s { font-size: 11px; color: var(--muted); }
.mk-head .t { flex: 1; }
.mk-head .lk { font-size: 11px; color: var(--text, #d8cfbf); margin: 1px 0 2px; line-height: 1.3; }
.mk-lvl { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.mk-lvl select { font: inherit; color: var(--text); background: #0f0d0a; border: 1px solid var(--edge); border-radius: 3px; padding: 3px 5px; }
.mk-row .pl, .mk-take .pl { display: inline-block; min-width: 26px; margin-right: 6px; color: #8fd88a; font-weight: 700; } /* an upgrade level */
.mk-row .pl.z { color: var(--muted); font-weight: 400; }
.mk-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 3px; }
.mk-tab { border: 1px solid var(--edge); background: #12100c; max-height: 190px; overflow-y: auto; }
.mk-row { display: grid; grid-template-columns: 1fr 1.2fr .9fr; gap: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; border-bottom: 1px solid #1f1b15; }
.mk-row:hover { background: #2a2418; }
.mk-row.on { background: #3a2e18; box-shadow: inset 2px 0 0 var(--gold); }
.mk-row.mine { color: var(--muted); }
.mk-row .p, .mk-lr .p { color: var(--gold); text-align: right; }
.mk-row .e { color: var(--muted); text-align: right; font-size: 11px; }
.mk-take { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #1b1711; border: 1px solid var(--edge-hi); border-radius: 3px; font-size: 12px; }
.mk-take input { width: 80px; }
.mk-take .mk-tt { flex: 1; color: var(--gold); }
.mk-new { border: 1px solid var(--edge); border-radius: 3px; padding: 6px 8px; background: #1b1711; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.mk-new label input { width: 90px; }
.mk-new .mk-u { width: 56px; }
.mk-new .mk-th { flex-basis: 100%; margin: 0; }
.mk-new label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.mk-kind { display: flex; gap: 3px; }
.mk-kind button.on { color: var(--gold); border-color: var(--gold-dim); background: #3a2e18; }
.mk-sum { flex: 1; min-width: 200px; font-size: 11px; color: var(--muted); }
.mk-sum .bad { color: #f07060; }
.mk-go { font-weight: 600; }
.mk-go:disabled { opacity: .45; cursor: not-allowed; }
.mk-empty { padding: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.mk-list { border: 1px solid var(--edge); background: #12100c; }
.mk-lh, .mk-lr { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr 80px; gap: 8px; align-items: center; padding: 4px 8px; font-size: 12px; border-bottom: 1px solid #1f1b15; }
.mk-list.hist .mk-lh, .mk-list.hist .mk-lr { grid-template-columns: 2fr 1fr 1fr 1.2fr 1.3fr; }
.mk-lh { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; background: #1b1711; }
.mk-lh span:nth-child(4) { text-align: right; }
.mk-lr .it { display: flex; align-items: center; gap: 6px; }
.mk-lr .it canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.mk-lr button { padding: 2px 8px; font-size: 11px; }
@media (max-width: 640px) { .mk-browse { grid-template-columns: 1fr; height: auto; } .mk-items { max-height: 200px; } .mk-tables { grid-template-columns: 1fr; } }
/* the market's place in a depot window: a box with an M, framed in gold, never an item */
.bagslot.mkt { border-color: var(--gold-dim); box-shadow: inset 0 0 0 1px #6e5c3a, 0 0 4px #e2b65a44; cursor: pointer; position: relative; }

#alchwin { top: 3%; width: min(940px, calc(100vw - 24px)); }
#alchwin:not([hidden]) { display: flex; flex-direction: column; max-height: calc(100vh - 6%); }
.alchnote { padding: 6px 10px 0; color: var(--muted); font-size: 11px; }
#alch-list { overflow-y: auto; padding: 8px 10px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; align-content: start; }
.alchpager { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 0 10px 10px; color: var(--gold); font: 600 12px Georgia, serif; }
.alchpager[hidden] { display: none; }
.alchpager button { min-width: 34px; padding: 2px 10px; font-size: 15px; }
.alchcard { background: #15120d; border: 1px solid var(--edge); border-radius: 4px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.alchcard.can { border-color: #4f7a3a; box-shadow: inset 0 0 0 1px #2c4a20; }
.alchhead { display: flex; gap: 8px; align-items: center; }
.alchhead canvas { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.alchhead b { color: #ffd27a; font: 600 13px Georgia, serif; line-height: 1.15; }
.alchhead .n { color: var(--muted); font: 11px system-ui; }
.alchdesc { color: #c9bda4; font-size: 11px; line-height: 1.3; }
.alchneeds { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.alchneed { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.alchneed canvas { width: 20px; height: 20px; image-rendering: pixelated; flex: none; }
.alchneed.ok { color: #9be38a; }
.alchneed.short { color: #e0806a; }
.alchcard > button { width: 100%; padding: 5px 0; font-weight: 600; }
.alchcard > button:disabled { opacity: .4; cursor: not-allowed; }

/* a Strider's spirit companion (windows.js renderCompanion) */
.cmp-head { display: flex; align-items: baseline; gap: 6px; padding: 2px 2px 4px; }
.cmp-head b { color: #bfe6ff; }
.cmp-head i { color: var(--muted); font-size: 11px; font-style: normal; }
.cmp-lvl { margin-left: auto; color: var(--gold); font-size: 12px; }
.cmp-bar { position: relative; height: 12px; margin: 3px 2px; background: #0b0a08; border: 1px solid var(--edge); border-radius: 2px; overflow: hidden; }
.cmp-bar > div { height: 100%; }
.cmp-bar.hp > div { background: linear-gradient(#e05050, #a02828); }
.cmp-bar.xp > div { background: linear-gradient(#9ad0ff, #4a8ad0); }
.cmp-bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; color: #fff; text-shadow: 0 0 2px #000; }
.cmp-fallen, .cmp-away, .cmp-cap, .cmp-bite { font-size: 11px; color: var(--muted); padding: 1px 2px; }
.cmp-fallen { color: #e0806a; }
.cmp-stances { display: flex; gap: 3px; margin: 5px 2px; align-items: center; }
.cmp-stances .cmp-gap { flex: 1; }
.cmp-chal { position: relative; margin-left: 6px; overflow: hidden; }
.cmp-chal .cd { position: absolute; inset: 0; background: rgba(0,0,0,0.65); transform-origin: bottom; pointer-events: none; }
.cmp-chal .cds { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 11px system-ui, sans-serif; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.cmp-chal.ready { border-color: #c0503c; box-shadow: inset 0 0 6px #e0604855; }
.cmp-other { display: flex; justify-content: space-between; align-items: center; padding: 3px 2px; border-top: 1px solid #1f1b15; font-size: 12px; }
.cmp-other i { color: var(--muted); font-style: normal; font-size: 11px; }
.min-stats { margin: 2px 2px 4px; padding: 3px 0; border-top: 1px solid #1f1b15; border-bottom: 1px solid #1f1b15; } /* the skeletons' stats */
.min-stat { display: flex; align-items: baseline; gap: 6px; font-size: 11px; line-height: 16px; padding: 0 2px; }
.min-stat span { color: var(--muted); width: 58px; }
.min-stat b { color: #d8cfbf; font-weight: 600; }
.min-stat b.up { color: #8fd88a; }

#nameask { left: 50%; top: 40%; transform: translate(-50%, -50%); }
#yesask { left: 50%; top: 40%; transform: translate(-50%, -50%); width: 280px; }
#bindask { left: 50%; top: 40%; transform: translate(-50%, -50%); width: 280px; }
#bindask .sab { padding: 10px; color: #e8dcc0; font-size: 12.5px; line-height: 1.4; }
#bindask .bk { margin-top: 8px; text-align: center; color: var(--gold); font: 600 16px Georgia, serif; }
.hk .sc { position: absolute; right: 2px; top: 0; font-size: 9px; color: var(--gold); z-index: 2; text-shadow: 0 0 2px #000, 0 0 2px #000; max-width: 100%; overflow: hidden; white-space: nowrap; }
#yesask .sab { padding: 10px; color: #e8dcc0; font-size: 12.5px; line-height: 1.4; }
#nameask input { flex: 1; min-width: 0; user-select: text; }
#nameask .nan { padding: 0 8px 8px; color: #b9ad94; font-size: 11px; }
.lc-main:disabled { opacity: .45; cursor: default; }
/* upgraded gear (the forge: upgrade.go): its +N in the corner, a glow growing with it */
.plus { position: absolute; left: 2px; top: 1px; font: 700 10px system-ui, sans-serif; color: #ffd27a; text-shadow: 0 0 2px #000, 0 0 2px #000; z-index: 2; pointer-events: none; }
.upg1 { box-shadow: inset 0 0 6px rgba(255, 210, 122, 0.45); }
.upg2 { box-shadow: inset 0 0 9px rgba(255, 200, 70, 0.75), 0 0 3px rgba(255, 200, 70, 0.5); animation: upgpulse 2.4s ease-in-out infinite; }
.upg3 { box-shadow: inset 0 0 11px rgba(255, 120, 40, 0.9), 0 0 6px rgba(255, 130, 50, 0.8); animation: upgpulse 1.8s ease-in-out infinite; }
.upg4 { box-shadow: inset 0 0 12px rgba(190, 110, 255, 0.95), 0 0 8px rgba(200, 120, 255, 0.9); animation: upgpulse 1.3s ease-in-out infinite; }
.upg4 .plus { color: #e6c8ff; }
@keyframes upgpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.rare-epic { box-shadow: inset 0 0 9px rgba(190, 120, 255, 0.8); }
.rare-legendary { box-shadow: inset 0 0 10px rgba(255, 170, 60, 0.9), 0 0 4px rgba(255, 170, 60, 0.7); animation: upgpulse 2s ease-in-out infinite; }
/* a ring or an amulet of regeneration being worn (wear.go): a soft glow that breathes */
#equip .slot.wearing { animation: wearglow 2.4s ease-in-out infinite; }
#equip .slot.wear-hp { --wear: rgba(120, 235, 120, 0.85); }
#equip .slot.wear-mana { --wear: rgba(120, 180, 255, 0.9); }
#equip .slot.wear-both { --wear: rgba(160, 220, 230, 0.9); }
@keyframes wearglow { 0%, 100% { box-shadow: inset 0 0 4px var(--wear); } 50% { box-shadow: inset 0 0 11px var(--wear), 0 0 4px var(--wear); } }
.alchtabs { display: flex; gap: 4px; padding: 6px 10px 0; }
.alchtabs[hidden] { display: none; }
.alchtabs button { padding: 3px 14px; }
.alchtabs button.on { color: var(--gold); border-color: var(--gold-dim); background: #3a2e18; }
.alchstones { display: flex; gap: 4px; flex-wrap: wrap; }
.alchstone { padding: 2px; width: 28px; height: 28px; display: grid; place-items: center; opacity: 0.6; }
.alchstone.on { opacity: 1; outline: 2px solid #ffd27a; }

/* the PvP finder (pvpfinder.js) */
.pvcard { display: flex; gap: 10px; align-items: stretch; margin: 6px 0 8px; }
.pvmmr { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: 6px 8px; border: 1px solid var(--gold-dim); border-radius: 4px; background: rgba(255, 210, 122, 0.06); }
.pvmmr span, .pvrec span, .pvdmg span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pvmmr b { font: 700 24px Georgia, serif; color: var(--gold); font-variant-numeric: tabular-nums; }
.pvrec { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 12px; }
.pvrec div, .pvdmg div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pvrec b { font-variant-numeric: tabular-nums; }
.pvrec b.w { color: #8fd18a; } .pvrec b.l { color: #e2857a; }
.pvabout { font-size: 11.5px; line-height: 1.45; color: var(--text); margin-bottom: 6px; }
.pvabout b[data-tip] { cursor: help; border-bottom: 1px dotted var(--gold-dim); }
.pvvs { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 12px; }
.pvvs i { color: var(--gold); font: italic 600 13px Georgia, serif; }
.pvvs span:last-child { text-align: right; }
.pvvs small { color: var(--muted); }
.pvdmg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; margin-bottom: 4px; }
.pvdmg b { color: var(--gold); font-variant-numeric: tabular-nums; }
.pvclock { color: var(--gold); font-variant-numeric: tabular-nums; }
#pvpready { top: 26%; width: min(320px, calc(100vw - 32px)); z-index: 45; border-color: var(--gold-dim); }
#pvpready .wh { display: flex; justify-content: space-between; align-items: center; }
/* a battle's bar over the game (bghud.js): the two sides, the clock between, the last events under */
#bghud { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 6; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 96%; }
#bghud[hidden] { display: none; }
#bghud .bgrow { display: flex; align-items: stretch; gap: 0; background: rgba(16,13,9,0.82); border: 1px solid var(--edge-hi); border-radius: 6px; box-shadow: 0 2px 10px #000a; }
#bghud .bgs { display: flex; align-items: center; gap: 6px; padding: 4px 10px; min-width: 150px; }
#bghud .bgs.s0 { border-left: 4px solid var(--c0); border-radius: 6px 0 0 6px; }
#bghud .bgs.s1 { border-right: 4px solid var(--c1); border-radius: 0 6px 6px 0; flex-direction: row-reverse; text-align: right; }
#bghud .bgs b { display: block; font: 600 12px Georgia, serif; }
#bghud .bgs.s0 b { color: var(--c0); }
#bghud .bgs.s1 b { color: var(--c1); }
#bghud .bgnum { font: 700 20px Georgia, serif; color: #f4ead2; line-height: 1; }
#bghud .bgnum small { font-size: 11px; color: var(--muted); }
#bghud .bgs i { display: block; font-style: normal; font-size: 10.5px; color: #c9bda4; }
#bghud .bgs i.warn { color: #ffb35a; }
#bghud .bgbar { width: 120px; height: 5px; background: #0007; border-radius: 3px; margin: 3px 0; overflow: hidden; }
#bghud .bgbar div { height: 100%; }
#bghud .bgobjs { display: flex; gap: 2px; }
#bghud .bgs.s1 .bgobjs { justify-content: flex-end; }
#bghud .bgobj { position: relative; display: inline-block; width: 22px; height: 22px; }
#bghud .bgobj.burnt { opacity: 0.45; }
#bghud .bgobj.hot { animation: bghot 0.8s ease-in-out infinite alternate; }
#bghud .bgobj em { position: absolute; left: 0; bottom: -2px; height: 2px; background: #ffd27a; }
@keyframes bghot { from { filter: brightness(1); } to { filter: brightness(1.6); } }
#bghud .bgico { image-rendering: pixelated; display: block; }
#bghud .bgmid { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 12px; border-left: 1px solid var(--edge); border-right: 1px solid var(--edge); min-width: 90px; }
#bghud .bgtime { font: 700 14px Georgia, serif; color: #ffd27a; }
#bghud .bgmid small { font-size: 10px; color: var(--muted); }
#bghud .bgevents { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11.5px; color: #f4ead2; text-shadow: 0 0 2px #000, 1px 1px 0 #000; pointer-events: none; }
#bghud .bgevents div:last-child { color: #ffe9a8; }
#bghud .bgres { padding: 6px 18px; border-radius: 6px; font: 700 24px Georgia, serif; text-shadow: 0 0 3px #000, 2px 2px 0 #000; background: rgba(16,13,9,0.8); display: flex; flex-direction: column; align-items: center; }
#bghud .bgres.won { color: #ffd27a; } #bghud .bgres.lost { color: #e06a5a; } #bghud .bgres.draw { color: #c9c2b2; }
#bghud .bgres small { font-size: 13px; color: #ffd27a; }
/* the PvP window's Battleground tab */
.bgdefs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.bgdef { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; background: #15120d; border: 1px solid var(--edge); border-radius: 4px; padding: 6px 4px; cursor: help; }
.bgdef canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.bgdef b { color: #ffd27a; font: 600 12.5px Georgia, serif; line-height: 1.2; }
.bgdef small { display: block; color: var(--gold); font-size: 10.5px; }
.bgdef .bggo { margin-top: 4px; cursor: pointer; }
.bgscore { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.bgside { border-left: 3px solid var(--tc); padding-left: 6px; }
.bgsh { color: var(--tc); font: 600 12px Georgia, serif; margin-bottom: 2px; }
.bgside table { width: 100%; border-collapse: collapse; font-size: 11px; }
.bgside th { color: var(--muted); font-weight: normal; text-align: right; padding: 1px 4px; }
.bgside th:first-child, .bgside td:first-child { text-align: left; }
.bgside td { text-align: right; padding: 1px 4px; border-top: 1px solid #2a241b; }
.bgside td small { color: var(--muted); }
.bgside tr.me td { color: #ffd27a; }
.bgside td.hon { color: #ffd27a; }
#arenacount { position: fixed; left: 50%; top: 17%; transform: translate(-50%, -50%); z-index: 25; pointer-events: none;
  font: 700 92px Georgia, serif; color: #ffd27a; text-shadow: 0 0 18px rgba(255, 150, 40, 0.8), 0 4px 0 #3a2410; }
#arenacount.pop { animation: arenapop 0.9s ease-out; }
@keyframes arenapop { 0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } }
#arenaresult { top: 18%; left: 50%; transform: translateX(-50%); width: min(400px, calc(100vw - 32px)); z-index: 45; padding: 14px 16px 10px; text-align: center; border-color: var(--gold-dim); }
#arenaresult .ar-head { font: 700 34px Georgia, serif; letter-spacing: 0.04em; }
#arenaresult.ar-won .ar-head { color: #ffd27a; text-shadow: 0 0 12px rgba(255, 190, 80, 0.6); }
#arenaresult.ar-lost .ar-head { color: #e2857a; }
#arenaresult.ar-draw .ar-head { color: #c8c2b8; }
#arenaresult .ar-how { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
#arenaresult .ar-mmr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
#arenaresult .ar-mmr div { display: flex; flex-direction: column; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; }
#arenaresult .ar-mmr span { font-size: 11px; color: var(--muted); }
#arenaresult .ar-mmr b { font: 600 16px Georgia, serif; font-variant-numeric: tabular-nums; }
#arenaresult .ar-mmr i { font-style: normal; font-weight: 700; font-size: 14px; }
#arenaresult .up { color: #8fd18a; } #arenaresult .down { color: #e2857a; }
#arenaresult table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#arenaresult th, #arenaresult td { padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
#arenaresult th { text-align: left; color: var(--muted); font-weight: 400; }
#arenaresult tr:first-child th { text-align: right; color: var(--text); font-weight: 600; }
#arenaresult tr:first-child th:first-child { text-align: left; }
#arenaresult td { text-align: right; }
#arenaresult td.hi { color: var(--gold); font-weight: 700; }
#arenaresult .ar-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
#arenaresult .ar-bar { height: 3px; margin-top: 8px; background: rgba(255, 255, 255, 0.08); }
#arenaresult .ar-bar div { height: 100%; background: var(--gold-dim); }

/* trading with another player (trade.js) */
#tradewin { top: 60px; left: 130px; transform: none; width: min(420px, calc(100vw - 32px)); z-index: 32; }
#tradewin .wh { display: flex; justify-content: space-between; align-items: center; }
#tradewin .tr-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
#tradewin .tr-side { border: 1px solid var(--edge); border-radius: 4px; background: #14110d; min-height: 120px; }
#tradewin .tr-side.ok { border-color: #5fb04f; box-shadow: 0 0 6px #5fb04f66; }
#tradewin .tr-h { display: flex; justify-content: space-between; padding: 4px 6px; font-size: 12px; color: var(--gold); border-bottom: 1px solid var(--edge); }
#tradewin .tr-ok { color: #8fd18a; font-size: 11px; }
#tradewin .tr-list { max-height: 260px; overflow-y: auto; }
#tradewin .tr-row { display: flex; align-items: center; gap: 6px; padding: 2px 4px; font-size: 12px; cursor: pointer; }
#tradewin .tr-row:hover { background: #2a2418; }
#tradewin .tr-row canvas { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
#tradewin .tr-row.upg1 span, #tradewin .tr-row.upg2 span { color: #ffd27a; }
#tradewin .tr-row.upg3 span { color: #ff9a50; }
#tradewin .tr-row.upg4 span { color: #d6a8ff; }
#tradewin .tr-row.upg2, #tradewin .tr-row.upg3, #tradewin .tr-row.upg4 { animation: none; box-shadow: none; }
#tradewin .tr-empty { padding: 8px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
#tradewin .tr-note { padding: 0 10px; font-size: 12px; color: var(--muted); min-height: 16px; }
#tradewin .tr-btns { display: flex; gap: 8px; padding: 8px 10px 10px; }
#tradewin .tr-btns button { flex: 1; padding: 6px; }
#tr-accept:not(:disabled) { background: #3a2e18; border-color: var(--gold); color: var(--gold); }
.alchhead.looky, .alchneed.looky { cursor: pointer; } /* click: look at it */
.alchhead.looky:hover b { text-decoration: underline dotted; }
.rollcard .rc-top { cursor: pointer; } /* click: look at the item */
.rollcard .rc-top:hover .rc-name { text-decoration: underline dotted; }
.cmp-auto { font: 700 13px Georgia, serif; color: var(--muted); } /* the companion's auto challenge toggle */
.cmp-auto.on { color: var(--gold); border-color: var(--gold-dim); background: #3a2e18; }

/* the Talents window (talents.js): the three branches side by side, a grid of talents each */
.tl-head { color: #d8c9a2; font-size: 12px; margin-bottom: 6px; }
.tl-head b { color: #ffd76a; }
.tl-trees { display: flex; gap: 6px; justify-content: center; }
.tl-tree { border: 2px solid #4a3a22; border-radius: 4px; background: #120e0a; box-shadow: 0 2px 8px rgba(0,0,0,.6), inset 0 0 0 1px #000; }
.tl-thead { display: flex; align-items: center; gap: 5px; padding: 4px 6px; background: linear-gradient(#3a2d1a, #221a10); border-bottom: 1px solid #000; color: #ffe39a; font: 600 13px Georgia, serif; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.tl-thead canvas { image-rendering: pixelated; border: 1px solid #000; }
.tl-thead em { color: #9fd98a; font-style: normal; }
.tl-grid { position: relative; overflow: hidden; }
.tl-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .09; image-rendering: pixelated; filter: grayscale(.4); pointer-events: none; }
.tl-arrows { position: absolute; left: 0; top: 0; pointer-events: none; }
.tl-shaft-bg { fill: none; stroke: #000; stroke-width: 7; stroke-linejoin: round; opacity: .7; }
.tl-shaft { fill: none; stroke: #6b6b6b; stroke-width: 4; stroke-linejoin: round; }
.tl-shaft.on { stroke: #f0c53a; }
.tl-head-a { fill: #6b6b6b; stroke: #000; stroke-width: 1.2; }
.tl-head-a.on { fill: #f0c53a; }
.tl-cell { position: absolute; width: 34px; height: 34px; border: 2px solid #3c3c3c; border-radius: 3px; background: #000; box-shadow: 0 0 0 1px #000, 0 2px 4px rgba(0,0,0,.7); }
.tl-cell canvas { display: block; width: 32px; height: 32px; margin: 1px; image-rendering: pixelated; }
.tl-cell.locked canvas { filter: grayscale(1) brightness(.55); }
.tl-cell.open { border-color: #4fb33f; }
.tl-cell.can { cursor: pointer; }
.tl-cell.can:hover { border-color: #8cff6a; box-shadow: 0 0 0 1px #000, 0 0 8px #6fe04a; }
.tl-cell.full { border-color: #e8bf3a; box-shadow: 0 0 0 1px #000, 0 0 6px rgba(240,197,58,.55); }
.tl-badge { position: absolute; right: -8px; bottom: -7px; padding: 0 3px; font: 600 10px/13px sans-serif; color: #8a8a8a; background: #0a0a0a; border: 1px solid #333; border-radius: 3px; }
.tl-cell.open .tl-badge { color: #6fe04a; border-color: #2c5a22; }
.tl-cell.full .tl-badge { color: #ffd23a; border-color: #6a5418; }
.tl-tip { position: fixed; z-index: 9999; max-width: 240px; padding: 6px 8px; background: rgba(10,12,24,.95); border: 1px solid #8a8aa8; border-radius: 4px; color: #e8e2d0; font-size: 12px; line-height: 1.35; pointer-events: none; box-shadow: 0 3px 10px rgba(0,0,0,.6); }
.tl-tip .tl-tn { color: #fff; font-weight: 700; font-size: 13px; }
.tl-tip .tl-tr { color: #c9c9c9; }
.tl-tip .tl-no { color: #ff4a3a; }
.tl-tip .tl-td { color: #ffd76a; margin-top: 2px; }
.tl-tip .tl-yes { color: #6fe04a; margin-top: 2px; }
.tl-foot { margin-top: 6px; text-align: right; }
.tl-foot button { font-size: 11px; padding: 3px 8px; }

/* inscribed charts (charts.go): a corrupted one's slot, its tooltip, red words in a look */
.chart-corrupt { box-shadow: inset 0 0 10px rgba(230, 40, 40, 0.9), 0 0 4px rgba(230, 40, 40, 0.7); }
.redi { color: #ff4a3a; font-weight: 700; }
.chart-tip { position: fixed; z-index: 9999; max-width: 280px; padding: 7px 9px; background: rgba(12, 10, 18, 0.96); border: 1px solid #7a6aa0; border-radius: 4px;
  color: #e8e2d0; font-size: 12px; line-height: 1.4; pointer-events: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); }
.chart-tip .ct-n { font-weight: 700; font-size: 13px; margin-bottom: 3px; color: #e6dcc0; }
.chart-tip .ct-n.inscribed { color: #8fc0ff; }
.chart-tip .ct-n.rare { color: #c48cff; }
.chart-tip .ct-n.masterwork { color: #ffb43a; }
.chart-tip .ct-n.cor { color: #ff5a4a; }
.chart-tip .ct-l { color: #b8b4ff; }
.chart-tip .red, .mk-cl .red { color: #ff4a3a; }
.chart-tip .good, .mk-cl .good { color: #ffcf4a; }
.chart-tip .ct-mir, .mk-cl .mir, #gatewaywin .mir { color: #bfe8ff; font-weight: 600; } /* a Mirror crystal's copy */ /* a corruption in your favour (charts.go chartTip good) */
.chart-tip .ct-rw { color: #ffd76a; margin-top: 3px; }
.chart-tip .ct-cor { color: #ff3a2a; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.chart-tip .ct-h { color: #8a8478; font-size: 11px; margin-top: 3px; }
.mk-chartrow { align-items: flex-start; }
.mk-cr { font-weight: 700; text-transform: capitalize; }
.mk-cr.inscribed { color: #8fc0ff; } .mk-cr.rare { color: #c48cff; } .mk-cr.masterwork { color: #ffb43a; } .mk-cr.cor { color: #ff5a4a; }
.mk-cl { font-size: 11px; color: #b8b4ff; line-height: 1.35; margin-top: 2px; }
.mk-cl .rw { color: #ffd76a; }

/* the gateway's window (gateway.js) */
#gatewaywin { width: min(720px, calc(100vw - 32px)); top: 9%; }
/* the GM menu's chart maker (gmmenu.js chartField) */
.gmchart { flex-basis: 100%; min-width: 0; }
.gmc { display: flex; flex-direction: column; gap: 8px; }
.gmc-top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.gmc-sum { color: #e0b84a; font-size: 12px; }
.gmc-h { font: 600 12px Georgia, serif; color: #e8dcb8; border-bottom: 1px solid #3a2d18; margin-bottom: 4px; }
.gmc-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 4px 12px; }
.gmc-rows > * { min-width: 0; }
.gmc-sel { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #b8ab8c; }
.gmc-sel select { width: 100%; min-width: 0; max-width: 100%; font-size: 12px; text-overflow: ellipsis; }
.gmc-cb { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: #e0d6bc; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.gmc-cb input { flex: none; width: auto; }
.gmc-top .gmc-tier { width: auto; }
.gmc-sect:nth-of-type(n) .gmc-cb input { margin-top: 2px; }
#prismwin { width: min(420px, calc(100vw - 32px)); top: 20%; }
#prismwin .pp-body { padding: 10px; display: flex; flex-direction: column; gap: 5px; }
#prismwin .pp-h { font: 600 13px Georgia, serif; color: #e8dcb8; margin-bottom: 4px; }
#prismwin .pp-it { text-align: left; padding: 6px 8px; border: 1px solid #3a2d18; border-radius: 3px; background: #1a140c; color: #e0d6bc; cursor: pointer; font-size: 12px; }
#prismwin .pp-it:hover { border-color: #e0b84a; background: #2a2010; }
#gatewaywin .gw-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
#gatewaywin .gw-open { border: 1px solid #6a5aa0; background: linear-gradient(180deg, #241a34, #16121e); border-radius: 4px; padding: 8px 10px; }
#gatewaywin .gw-h { font: 600 14px Georgia, serif; color: #e8dcb8; margin-bottom: 4px; }
#gatewaywin .gw-main { display: grid; grid-template-columns: 230px 1fr; gap: 10px; min-height: 220px; }
#gatewaywin .gw-list { display: flex; flex-direction: column; gap: 3px; max-height: 340px; overflow-y: auto; }
#gatewaywin .gw-it { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border: 1px solid #3a2d18; border-radius: 3px; background: #1a140c; cursor: pointer; font-size: 12px; }
#gatewaywin .gw-it:hover { border-color: #8a6a30; }
#gatewaywin .gw-it.on { border-color: #e0b84a; background: #2a2010; }
#gatewaywin .gw-it .ic canvas { display: block; image-rendering: pixelated; }
#gatewaywin .gw-it .n { color: #a89a78; }
#gatewaywin .gw-pick { border: 1px solid #3a2d18; border-radius: 4px; background: #15110b; padding: 8px 10px; display: flex; flex-direction: column; }
#gatewaywin .gw-t { font-weight: 700; }
#gatewaywin .gw-t.plain, #gatewaywin .gw-t.inscribed { color: #8fc0ff; } #gatewaywin .gw-t.plain { color: #d8c9a2; }
#gatewaywin .gw-t.rare { color: #c48cff; } #gatewaywin .gw-t.masterwork { color: #ffb43a; } #gatewaywin .gw-t.cor { color: #ff5a4a; }
#gatewaywin .gw-lines { font-size: 12px; line-height: 1.45; color: #b8b4ff; }
#gatewaywin .gw-lines .red, #gatewaywin .red { color: #ff4a3a; }
#gatewaywin .gw-lines .good { color: #ffcf4a; }
#gatewaywin .gw-lines .rw { color: #ffd76a; margin-top: 3px; }
#gatewaywin .gw-lines .cor { color: #ff3a2a; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
#gatewaywin .gw-lines .plain { color: #a89a78; font-style: italic; }
#gatewaywin .gw-s { font-size: 11px; color: #a89a78; margin-top: 6px; }
#gatewaywin .gw-why { font-size: 12px; color: #ff8a6a; margin-top: 6px; }
#gatewaywin .gw-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; padding-top: 8px; }
#gatewaywin .gw-btns button { padding: 5px 16px; font-weight: 600; }
#gatewaywin .gw-empty { color: #a89a78; font-size: 12px; }
#gatewaywin .gw-tier { color: #7fe0c0; font-size: 11px; border: 1px solid #2f6a58; border-radius: 3px; padding: 0 4px; margin-right: 2px; }
.bagslot .plus.tier { color: #7fe0c0; }