/* Fethi Online HD UI kit (cq-ui) — original Conquer v3105 look, drawn at native resolution.
   1 "u" = one pixel of the original 1024x768 layout. --u is set by cq-ui.js (UI scale x window fit).
   Ornate art = original textures upscaled 4x (4xNomos8kDAT) with all baked text punched out.
   Plates, simple frames and ALL text = CSS. See ~/TQ/web/ui/README.md */

:root {
  --u: 1px;
  --cq-font: Tahoma, Verdana, "DejaVu Sans", "Segoe UI", sans-serif;
  /* measured from CloseBtn.dds / QueryBtn.dds / DialogChat.dds / ChatChkG1.dds */
  --cq-black: #080400;
  --cq-gold-hi: #f7ebbd;
  --cq-gold: #cebe94;
  --cq-gold-r: #bdae84;
  --cq-gold-mid: #9c865a;
  --cq-gold-lo: #625e49;
  --cq-gold-dk: #574f36;
  --cq-cream: #efd7ad;        /* button text */
  --cq-cream-hi: #ffebc0;
  --cq-label: #8cbee7;        /* light-blue label text of the main bar buttons */
  --cq-plate: #2a495a;        /* window plate (DialogChat, measured mean) */
  --cq-plate-top: #284556;
  --cq-plate-bot: #264456;
  --cq-navy: #182842;         /* square menu button plate */
  --cq-slot: #1c3c52;         /* quick slot plate */
  --cq-slot-dk: #0c1c28;
  --cq-tick: #e7db9c;
  --cq-tick-x: #bdae7b;
  --cq-tab: #213842;
  --cq-tab-bot: #294152;
  --cq-tab-hi: #637d8c;
}

.cq, .cq * { box-sizing: border-box; }
.cq {
  font-family: var(--cq-font);
  font-size: calc(12 * var(--u));
  line-height: 1.25;
  color: var(--cq-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  user-select: none;
  -webkit-user-select: none;
}
.cq img { -webkit-user-drag: none; user-select: none; }
.cq-art { position: absolute; display: block; pointer-events: none; image-rendering: auto; }

/* ------------------------------------------------------------------ text helpers */
.cq-outline {          /* the game draws small text with a 1px dark edge */
  text-shadow:
    calc(1 * var(--u)) 0 0 #000, calc(-1 * var(--u)) 0 0 #000,
    0 calc(1 * var(--u)) 0 #000, 0 calc(-1 * var(--u)) 0 #000;
}

/* ================================================================== WINDOW (DialogChat frame) */
.cq-win {
  position: absolute;
  min-width: calc(140 * var(--u));
  min-height: calc(120 * var(--u));
}
.cq-win > .cq-fr { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.cq-win > .cq-fr.tl { left: 0; top: 0; width: calc(70 * var(--u)); height: calc(60 * var(--u)); background-image: url(art/win_tl.png); }
.cq-win > .cq-fr.tr { right: 0; top: 0; width: calc(70 * var(--u)); height: calc(60 * var(--u)); background-image: url(art/win_tr.png); }
.cq-win > .cq-fr.bl { left: 0; bottom: 0; width: calc(70 * var(--u)); height: calc(60 * var(--u)); background-image: url(art/win_bl.png); }
.cq-win > .cq-fr.br { right: 0; bottom: 0; width: calc(70 * var(--u)); height: calc(60 * var(--u)); background-image: url(art/win_br.png); }
.cq-win > .cq-fr.t, .cq-win > .cq-fr.b {
  left: calc(70 * var(--u)); right: calc(70 * var(--u)); height: calc(60 * var(--u));
  background-size: calc(38 * var(--u)) 100%; background-repeat: round no-repeat;
}
.cq-win > .cq-fr.t { top: 0; background-image: url(art/win_t.png); }
.cq-win > .cq-fr.b { bottom: 0; background-image: url(art/win_b.png); }
.cq-win > .cq-fr.l, .cq-win > .cq-fr.r {
  top: calc(60 * var(--u)); bottom: calc(60 * var(--u)); width: calc(16 * var(--u));
  background-size: 100% calc(38 * var(--u)); background-repeat: no-repeat round;
}
.cq-win > .cq-fr.l { left: 0; background-image: url(art/win_l.png); }
.cq-win > .cq-fr.r { right: 0; background-image: url(art/win_r.png); }
/* plate: clean CSS (the original has a faint phoenix print; left out on purpose) */
.cq-win > .cq-plate {
  position: absolute;
  left: calc(16 * var(--u)); right: calc(16 * var(--u));
  top: calc(39 * var(--u)); bottom: calc(46 * var(--u));
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(70,120,140,.18), rgba(0,0,0,0) 60%),
    linear-gradient(var(--cq-plate-top), var(--cq-plate) 45%, var(--cq-plate-bot));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(0,8,16,.55), inset calc(1 * var(--u)) calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.35);
}
.cq-win > .cq-title {
  position: absolute; left: calc(40 * var(--u)); right: calc(40 * var(--u));
  top: calc(19 * var(--u)); height: calc(19 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(13 * var(--u)); font-weight: bold; letter-spacing: calc(.5 * var(--u));
  color: #f0dfa8;
  cursor: move;
  white-space: nowrap; overflow: hidden;
}
.cq-win > .cq-drag { position: absolute; left: 0; right: 0; top: 0; height: calc(39 * var(--u)); cursor: move; }
.cq-win > .cq-close { position: absolute; top: calc(21 * var(--u)); right: calc(19 * var(--u)); }
.cq-win > .cq-body {
  position: absolute;
  left: calc(16 * var(--u)); right: calc(16 * var(--u));
  top: calc(39 * var(--u)); bottom: calc(46 * var(--u));
  padding: calc(8 * var(--u));
  overflow: hidden;
}
.cq-win > .cq-foot {    /* buttons row, sits on the wide bottom fret band like the original dialogs */
  position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u));
  bottom: calc(18 * var(--u)); height: calc(22 * var(--u));
  display: flex; justify-content: center; gap: calc(24 * var(--u));
}

/* close X (CloseBtnS.dds, 15x14) */
.cq-close {
  width: calc(15 * var(--u)); height: calc(14 * var(--u));
  border: 0; padding: 0; background: url(art/close_x.png) center / 100% 100% no-repeat;
  cursor: pointer;
}
.cq-close:hover { filter: brightness(1.25); }
.cq-close:active { transform: translate(calc(1 * var(--u)), calc(1 * var(--u))); }

/* ================================================================== STANDARD BUTTON (CloseBtn.dds, 64x22) */
/* layers: black outline (chamfered 3px) > cream-gold bevel > dark ring > two-tone steel-blue plate */
.cq-btn {
  --w: 64; --h: 22;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  padding: 0 calc(5 * var(--u)) calc(1 * var(--u));
  border: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: calc(12 * var(--u)); color: var(--cq-cream);
  background: var(--cq-black);
  clip-path: polygon(calc(3 * var(--u)) 0, calc(100% - 3 * var(--u)) 0, 100% calc(3 * var(--u)), 100% calc(100% - 3 * var(--u)),
                     calc(100% - 3 * var(--u)) 100%, calc(3 * var(--u)) 100%, 0 calc(100% - 3 * var(--u)), 0 calc(3 * var(--u)));
  isolation: isolate;
  white-space: nowrap;
  text-shadow: 0 calc(1 * var(--u)) 0 rgba(0,0,0,.7);
}
.cq-btn::before {   /* gold bevel: light top/left, darker right/bottom */
  content: ""; position: absolute; inset: calc(1 * var(--u)); z-index: -2;
  background:
    linear-gradient(to right, var(--cq-gold-hi) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(100% - 1 * var(--u)), var(--cq-gold-r) calc(100% - 1 * var(--u))),
    linear-gradient(var(--cq-gold) 0 calc(1 * var(--u)), var(--cq-gold-lo) calc(1 * var(--u)) calc(100% - 2 * var(--u)), var(--cq-gold-mid) calc(100% - 2 * var(--u)));
  clip-path: polygon(calc(2 * var(--u)) 0, calc(100% - 2 * var(--u)) 0, 100% calc(2 * var(--u)), 100% calc(100% - 2 * var(--u)),
                     calc(100% - 2 * var(--u)) 100%, calc(2 * var(--u)) 100%, 0 calc(100% - 2 * var(--u)), 0 calc(2 * var(--u)));
}
.cq-btn::after {    /* plate: dark teal top half, lighter steel-blue lower half, pale bottom bevel line */
  content: ""; position: absolute; z-index: -1;
  left: calc(3 * var(--u)); right: calc(3 * var(--u)); top: calc(3 * var(--u)); bottom: calc(2 * var(--u));
  background:
    linear-gradient(to right, rgba(0,0,0,.35) 0 calc(1 * var(--u)), transparent calc(1 * var(--u))),
    linear-gradient(#101810 0 calc(1 * var(--u)), #1e2f33 calc(1 * var(--u)), #172a33 38%, #213b48 50%, #3f6276 56%, #4d6e83 75%, #3f6276 calc(100% - 2 * var(--u)), #aca690 calc(100% - 2 * var(--u)), #8d8c83 100%);
}
.cq-btn:hover { color: var(--cq-cream-hi); }
.cq-btn:hover::after { filter: brightness(1.18) saturate(1.05); }
.cq-btn:active, .cq-btn.is-pressed { padding-top: calc(2 * var(--u)); padding-left: calc(6 * var(--u)); }
.cq-btn:active::after, .cq-btn.is-pressed::after {   /* CloseBtnClick.dds: flat sunk steel-blue */
  background: linear-gradient(#1b2b36, #294152 20%, #233f4c 60%, #21384a calc(100% - 1 * var(--u)), #5a6973 100%);
}
.cq-btn:active::before, .cq-btn.is-pressed::before { filter: brightness(.78); }
.cq-btn:disabled, .cq-btn.is-disabled { cursor: default; color: #8e8a7e; text-shadow: none; padding: 0 calc(5 * var(--u)) calc(1 * var(--u)); }
.cq-btn:disabled::after, .cq-btn.is-disabled::after { filter: grayscale(.85) brightness(.85); background:
    linear-gradient(#101810 0 calc(1 * var(--u)), #1e2f33 calc(1 * var(--u)), #172a33 38%, #213b48 50%, #3f6276 56%, #4d6e83 75%, #3f6276 calc(100% - 2 * var(--u)), #aca690 calc(100% - 2 * var(--u)), #8d8c83 100%); }
.cq-btn:disabled::before, .cq-btn.is-disabled::before { filter: grayscale(.7) brightness(.8); }
.cq-btn:focus-visible { outline: none; color: #fff4d0; }

/* red variant (GUESS: same construction, crimson plate — no original red 64x22 button measured yet) */
.cq-btn.red::after {
  background:
    linear-gradient(to right, rgba(0,0,0,.35) 0 calc(1 * var(--u)), transparent calc(1 * var(--u))),
    linear-gradient(#180808 0 calc(1 * var(--u)), #331414 calc(1 * var(--u)), #2a0e0e 38%, #4a1616 50%, #7a2620 56%, #93342a 75%, #7a2620 calc(100% - 2 * var(--u)), #b8a28c calc(100% - 2 * var(--u)), #8d8378 100%);
}
.cq-btn.red:active::after, .cq-btn.red.is-pressed::after { background: linear-gradient(#361414, #5a1e1a 20%, #4e1a16 60%, #441614 calc(100% - 1 * var(--u)), #735a55 100%); }

/* ================================================================== CHECKBOX / TICK (ChatChk boxes, 13x13 + 1px light edge) */
.cq-check {
  position: relative; display: inline-block; vertical-align: middle;
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  cursor: pointer; flex: none;
  background:
    linear-gradient(135deg, transparent 47%, rgba(140,175,195,.22) 49%, rgba(140,175,195,.22) 51%, transparent 53%), /* glass glint as in the original */
    linear-gradient(to right, #001018 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(100% - 1 * var(--u)), #4a6d7b calc(100% - 1 * var(--u))),
    linear-gradient(#001018 0 calc(1 * var(--u)), #182c39 calc(1 * var(--u)) calc(100% - 1 * var(--u)), #4a6d7b calc(100% - 1 * var(--u)));
}
.cq-check > svg { position: absolute; inset: calc(1 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); overflow: visible; }
.cq-check > svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cq-check > svg .sh { stroke: rgba(0,0,0,.85); stroke-width: 3.2; }
.cq-check > svg .gl { stroke: var(--cq-tick); stroke-width: 1.8; }
.cq-check.x > svg .gl { stroke: var(--cq-tick-x); }
.cq-check:hover { filter: brightness(1.2); }
label.cq-checkline { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); cursor: pointer; }

/* ================================================================== CHAT FILTER TAB (ChatChkG1.dds, 76x20) */
.cq-chattab {
  position: relative; display: inline-flex; align-items: center;
  width: calc(76 * var(--u)); height: calc(20 * var(--u));
  padding-left: calc(4 * var(--u));
  background:
    linear-gradient(to right, transparent calc(100% - 3 * var(--u)), #526d84 calc(100% - 3 * var(--u)) calc(100% - 2 * var(--u)), #263f4c calc(100% - 2 * var(--u))),
    linear-gradient(var(--cq-tab-hi) 0 calc(1 * var(--u)), var(--cq-tab) calc(1 * var(--u)) 40%, var(--cq-tab-bot) 70%, #28434f calc(100% - 1 * var(--u)), #182c39 calc(100% - 1 * var(--u)));
  color: var(--cq-cream); font-size: calc(12 * var(--u));
  cursor: pointer;
}
.cq-chattab > .lbl { display: inline-block; width: auto; max-width: none; white-space: nowrap; font-size: calc(11.5 * var(--u)); letter-spacing: calc(-0.3 * var(--u)); }
.cq-chattab > .cq-check { position: absolute; top: calc(3 * var(--u)); }
.cq-chattab > .cq-check.a { left: calc(40 * var(--u)); }
.cq-chattab > .cq-check.b { left: calc(59 * var(--u)); }
.cq-chattab > .cq-check.b > i { position: absolute; inset: calc(3 * var(--u)); background: var(--sw, transparent); }
.cq-chattab:hover > .lbl { color: var(--cq-cream-hi); }

/* ================================================================== TEXT FIELD (TaskEdt / chat edit) */
.cq-input {
  display: inline-block; height: calc(20 * var(--u)); width: calc(120 * var(--u));
  padding: 0 calc(4 * var(--u));
  font: inherit; font-size: calc(12 * var(--u)); color: #fff;
  background: linear-gradient(#050d14, #0b1720);
  border: calc(1 * var(--u)) solid; border-color: #000 #4a6d7b #4a6d7b #000;
  box-shadow: inset calc(1 * var(--u)) calc(1 * var(--u)) 0 rgba(0,0,0,.6);
  outline: none; caret-color: var(--cq-gold);
  user-select: text; -webkit-user-select: text;
}
.cq-input::placeholder { color: #5f7684; }
.cq-input:focus { border-color: #000 #8ab0c4 #8ab0c4 #000; }

/* ================================================================== SCROLL BAR (Task: DragBG / Up / Down / Drag) */
.cq-scroll { position: relative; overflow: hidden; }
.cq-scroll > .cq-scroll-view { position: absolute; inset: 0; right: calc(20 * var(--u)); overflow: hidden; }
.cq-scroll > .cq-sb { position: absolute; top: 0; bottom: 0; right: 0; width: calc(19 * var(--u)); }
.cq-sb > .up, .cq-sb > .dn {
  position: absolute; left: 0; width: calc(19 * var(--u)); height: calc(19 * var(--u));
  border: 0; padding: 0; cursor: pointer; background: center / 100% 100% no-repeat;
}
.cq-sb > .up { top: 0; background-image: url(art/sb_up.png); }
.cq-sb > .dn { bottom: 0; background-image: url(art/sb_down.png); }
.cq-sb > .up:active, .cq-sb > .dn:active { filter: brightness(.8); }
.cq-sb > .up:hover, .cq-sb > .dn:hover { filter: brightness(1.2); }
.cq-sb > .track {   /* DragBG.dds: 11px slot, pale edge, dark inner */
  position: absolute; top: calc(19 * var(--u)); bottom: calc(19 * var(--u)); left: calc(4 * var(--u)); width: calc(11 * var(--u));
  background: linear-gradient(to right, #a5967b 0 calc(1 * var(--u)), #212829 calc(1 * var(--u)) calc(3 * var(--u)), #232d39 calc(3 * var(--u)) calc(8 * var(--u)), #182429 calc(8 * var(--u)) calc(9 * var(--u)), #76705f calc(9 * var(--u)) calc(10 * var(--u)), #182429 calc(10 * var(--u)));
}
.cq-sb > .thumb {
  position: absolute; left: calc(-0.5 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u));
  background: url(art/sb_thumb.png) center / 100% 100% no-repeat; cursor: grab;
}
.cq-sb > .thumb:hover { filter: brightness(1.15); }

/* ================================================================== ITEM SLOT (42x40 cell) */
.cq-slot {
  --w: 42; --h: 40;
  position: relative; display: inline-block; flex: none;
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.cq-slot.framed {   /* stand-alone slot (inventory cell, DialogMpcGoods): black line, pale steel line, sunk navy plate */
  background: linear-gradient(135deg, #102029 0%, #172d39 25%, #1e3645 55%, #1e3544 100%);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #000, inset 0 0 0 calc(2 * var(--u)) #adb6b9,
              inset calc(4 * var(--u)) calc(4 * var(--u)) calc(3 * var(--u)) calc(-1 * var(--u)) rgba(8,20,28,.9);
}
.cq-slot > .ico { position: absolute; inset: calc(1 * var(--u)); width: calc(100% - 2 * var(--u)); height: calc(100% - 2 * var(--u)); object-fit: contain; pointer-events: none; }
.cq-slot > .cnt {
  position: absolute; right: calc(2 * var(--u)); bottom: calc(1 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: bold; color: #fff; pointer-events: none;
}
.cq-slot > .key { position: absolute; left: calc(3 * var(--u)); top: calc(1 * var(--u)); font-size: calc(10 * var(--u)); color: #cfe3f0; pointer-events: none; }
.cq-slot > .cd {
  position: absolute; inset: calc(1 * var(--u)); pointer-events: none; display: none;
  background: conic-gradient(rgba(0,0,0,.62) calc(var(--cd, 0) * 360deg), rgba(0,0,0,0) 0);
}
.cq-slot > .cdt { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: calc(13 * var(--u)); font-weight: bold; color: #fff; pointer-events: none; }
.cq-slot.cooling > .cd { display: block; }
.cq-slot.cooling > .cdt { display: flex; }
.cq-slot:hover::after {
  content: ""; position: absolute; inset: calc(1 * var(--u)); pointer-events: none;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255,236,170,.75), inset 0 0 calc(6 * var(--u)) rgba(255,230,160,.25);
}
.cq-slot.drop-target::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 calc(2 * var(--u)) #ffe08a; }

/* ================================================================== TOOLTIP (item/info tip) */
.cq-tip {
  position: fixed; z-index: 10000; pointer-events: none;
  max-width: calc(260 * var(--u));
  padding: calc(5 * var(--u)) calc(7 * var(--u));
  background: rgba(4, 12, 22, .86);
  border: calc(1 * var(--u)) solid #8a7a52;
  box-shadow: 0 0 0 calc(1 * var(--u)) #000, inset 0 0 0 calc(1 * var(--u)) rgba(0,0,0,.6);
  color: #fff; font-family: var(--cq-font); font-size: calc(12 * var(--u)); line-height: 1.4;
  display: none;
}
.cq-tip .t-name { color: #ffe68c; font-weight: bold; overflow-wrap: anywhere; }   /* long item names stay inside the tip */
.cq-tip .t-dim { color: #9fb6c4; }
.cq-tip .t-good { color: #6cff6c; }
.cq-tip .t-bad { color: #ff5a5a; }

/* ================================================================== MAIN BAR (dialog 130, 1024x114) */
.cq-mainbar {
  position: fixed; left: calc(50% - 512 * var(--u)); bottom: 0; z-index: 50;
  width: calc(1024 * var(--u)); height: calc(114 * var(--u));
}
.cq-mainbar > .art { left: 0; top: 0; width: 100%; height: 100%; }
.cq-mainbar > svg.orbfill { position: absolute; left: 0; top: 0; width: calc(100 * var(--u)); height: calc(114 * var(--u)); pointer-events: none; }
.cq-mainbar > .orbhit { position: absolute; left: calc(12 * var(--u)); top: calc(31 * var(--u)); width: calc(70 * var(--u)); height: calc(70 * var(--u)); border-radius: 50%; }
.cq-mainbar > .plate {   /* clean plate under the punched slot interiors */
  position: absolute; width: calc(39 * var(--u)); height: calc(39 * var(--u)); top: calc(67 * var(--u));
  background:
    radial-gradient(70% 70% at 55% 55%, #2a5470 0%, #214560 45%, rgba(25,55,78,0) 75%),
    linear-gradient(135deg, #0e2433 0%, #1a3a52 30%, #1e4058 70%, #1b3a50 100%);
  box-shadow: inset calc(2 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.65), inset 0 0 0 calc(1 * var(--u)) rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.cq-mainbar > .plate > .fk {   /* embossed F-key label like the original, but crisp */
  font-size: calc(14 * var(--u)); color: #0f2b3f; letter-spacing: calc(.3 * var(--u));
  text-shadow: calc(1 * var(--u)) calc(1 * var(--u)) 0 rgba(90,140,175,.45);
}
.cq-mainbar > .skillplate {
  position: absolute; left: calc(520 * var(--u)); top: calc(66 * var(--u)); width: calc(42 * var(--u)); height: calc(35 * var(--u));
  border-radius: calc(7 * var(--u));
  background: radial-gradient(80% 80% at 50% 40%, #1f4766, #142d44 70%, #0d1f30);
}
.cq-mainbar > .skillbtn {
  position: absolute; left: calc(519 * var(--u)); top: calc(67 * var(--u)); width: calc(42 * var(--u)); height: calc(42 * var(--u));
  display: flex; align-items: flex-start; justify-content: center; padding-top: calc(13 * var(--u));
  color: var(--cq-label); font-size: calc(11 * var(--u)); letter-spacing: calc(-0.2 * var(--u)); cursor: pointer;
  text-shadow: 0 0 calc(2 * var(--u)) #000;
}
.cq-mainbar > .skillbtn:hover { color: #c5e2fa; }
.cq-mainbar > .skillbtn:active { padding-top: calc(14 * var(--u)); }
.cq-mainbar > .qslot { position: absolute; top: calc(67 * var(--u)); --w: 39; --h: 39; }
.cq-mainbar > .plate.filled > .fk { visibility: hidden; }   /* the F-key print is hidden under an icon */
.cq-mainbar.inline { position: relative; left: auto; bottom: auto; }
.cq-mainbar > .exp {
  position: absolute; left: calc(108 * var(--u)); top: calc(108 * var(--u)); width: calc(398 * var(--u)); height: calc(4 * var(--u));
  pointer-events: auto;
}
.cq-mainbar > .exp > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--exp, 0) * 100%);
  background: linear-gradient(#fff2b0, #f2c84a 45%, #b07a18);
}
.cq-mainbar .chatname, .cq-mainbar .chattext {
  position: absolute; top: calc(37 * var(--u)); height: calc(19 * var(--u));
  background: transparent; border: 0; outline: none; color: #fff;
  font: inherit; font-size: calc(12 * var(--u)); padding: 0 calc(5 * var(--u));
  user-select: text; -webkit-user-select: text; caret-color: var(--cq-gold);
}
.cq-mainbar .chatname { left: calc(116 * var(--u)); width: calc(100 * var(--u)); }
.cq-mainbar .chattext { left: calc(310 * var(--u)); width: calc(300 * var(--u)); }
.cq-mainbar .chatname::placeholder, .cq-mainbar .chattext::placeholder { color: #4f6a7c; }
.cq-mainbar > .mini {     /* chat channel / clear / log mini buttons (dialog 145) */
  position: absolute; top: calc(39 * var(--u)); --w: 43; --h: 18; font-size: calc(10.5 * var(--u)); padding: 0 !important;
}
/* square menu buttons (QueryBtn.dds etc., 51x49 frame) */
.cq-menubtn {
  position: absolute; top: calc(62 * var(--u)); width: calc(51 * var(--u)); height: calc(49 * var(--u));
  cursor: pointer;
}
.cq-menubtn > .pl { position: absolute; left: calc(5 * var(--u)); top: calc(5 * var(--u)); width: calc(41 * var(--u)); height: calc(38 * var(--u));
  background: linear-gradient(#1a2a44, var(--cq-navy) 40%, #182439); box-shadow: inset 0 0 0 calc(1 * var(--u)) #263852; }
.cq-menubtn > .ic { position: absolute; left: calc(5 * var(--u)); top: calc(5 * var(--u)); width: calc(41 * var(--u)); height: calc(38 * var(--u)); }
.cq-menubtn > .rg { left: 0; top: 0; width: 100%; height: 100%; }
.cq-menubtn > .lb {
  position: absolute; left: calc(3 * var(--u)); right: calc(5 * var(--u)); top: calc(29 * var(--u));
  text-align: center; font-size: calc(12 * var(--u)); color: var(--cq-label); white-space: nowrap;
  text-shadow: 0 0 calc(2 * var(--u)) #000, 0 0 calc(1 * var(--u)) #000;
}
.cq-menubtn:hover > .ic { filter: brightness(1.18); }
.cq-menubtn:hover > .lb { color: #c5e2fa; }
.cq-menubtn:active > .ic, .cq-menubtn:active > .lb, .cq-menubtn.on > .ic, .cq-menubtn.on > .lb { transform: translate(calc(1 * var(--u)), calc(1 * var(--u))); }
.cq-menubtn:active > .pl, .cq-menubtn.on > .pl { filter: brightness(.8); }

/* ================================================================== CHAT LOG (drawn over the world, bottom-left) */
.cq-chatlog {
  position: fixed; left: 0; z-index: 40;
  bottom: calc(118 * var(--u)); width: calc(560 * var(--u)); max-height: calc(200 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u));
  overflow: hidden; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cq-chatlog > div { white-space: pre-wrap; word-break: break-word; }
.cq-chatlog .who { cursor: pointer; pointer-events: auto; }

/* ================================================================== NPC DIALOG (dialog 173, CDlgTask)
   All numbers are the original's (window coordinates, cq-ui.js npcDialog): DialogTask.dds plate 544 wide, height =
   content + 10; portrait 64x64 at (10,30); text #ff0 from (84,30) 420 wide, line 16; answers from y 104 in two
   210-wide columns at x 22 / 282, white, red (#f00) under the mouse; edit 180x18; close [173-1180] at (512,8). */
.cq-npc {
  position: absolute; width: calc(544 * var(--u)); box-sizing: border-box;
  min-height: calc(104 * var(--u));
  padding: calc(30 * var(--u)) 0 calc(10 * var(--u));
  font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u));
}
.cq-npc::before {        /* DialogTask.dds: thin gold frame over the translucent plate, 9-slice so any height stays crisp */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-style: solid; border-width: calc(16 * var(--u));
  border-image: url(art/frame_thin9.png) 64 fill / calc(16 * var(--u)) stretch;
}
.cq-npc { isolation: isolate; }
.cq-npc > .face {
  position: absolute; left: calc(10 * var(--u)); top: calc(30 * var(--u));
  width: calc(64 * var(--u)); height: calc(64 * var(--u)); display: block;
  image-rendering: auto; pointer-events: none;
}
.cq-npc > .head { margin-left: calc(84 * var(--u)); width: calc(420 * var(--u)); }
.cq-npc.has-opts > .head { min-height: calc(74 * var(--u)); }      /* first answer row at y >= 104 */
.cq-npc .txt { color: #ffff00; white-space: pre-wrap; overflow-wrap: anywhere; }
.cq-npc > .opts {
  display: grid; grid-template-columns: calc(210 * var(--u)) calc(210 * var(--u));
  column-gap: calc(50 * var(--u)); margin-left: calc(22 * var(--u)); align-items: start;
}
.cq-npc .opt {
  color: #fff; cursor: pointer; padding-bottom: calc(5 * var(--u));
  overflow-wrap: anywhere; user-select: none;
}
.cq-npc .opt:hover { color: #ff0000; }
.cq-npc .edit { height: calc(44 * var(--u)); position: relative; }
.cq-npc .edit > .lbl {
  position: absolute; left: calc(62 * var(--u)); top: calc(-2 * var(--u)); white-space: nowrap; color: #ffff00;
}
.cq-npc .edit > .row {
  position: absolute; left: calc(20 * var(--u)); top: calc(16 * var(--u));
  display: flex; align-items: center; gap: calc(4 * var(--u));
}
.cq-npc .edit input {    /* Edit230 = TaskEdt.dds: black box, 1px #5a4921 edge */
  width: calc(180 * var(--u)); height: calc(18 * var(--u)); box-sizing: border-box; margin: 0;
  padding: 0 calc(3 * var(--u)); border: calc(1 * var(--u)) solid #5a4921; border-radius: 0;
  background: #000; color: #fff; font: inherit; line-height: calc(16 * var(--u)); outline: none;
}
.cq-npc .edit input:focus { border-color: #8a7038; }
.cq-npc .edit .ok {       /* Button230 = TaskAnswerBtn.dds 20x20 */
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); border: 0; padding: 0; cursor: pointer;
  background: url(art/answer.png) center / 100% 100% no-repeat;
}
.cq-npc .edit .ok:hover { filter: brightness(1.2); }
.cq-npc .edit .ok:active { filter: brightness(1.35) hue-rotate(-10deg); transform: translate(calc(1 * var(--u)), calc(1 * var(--u))); }
.cq-npc > .cq-close {
  position: absolute; left: calc(512 * var(--u)); top: calc(8 * var(--u));
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); background-size: calc(15 * var(--u)) calc(14 * var(--u));
}

/* ================================================================== MINIMAP FRAME */
.cq-minimap {
  position: absolute; width: calc(170 * var(--u));
  border-style: solid; border-width: calc(16 * var(--u));
  border-image: url(art/frame_thin9.png) 64 fill / calc(16 * var(--u)) stretch;
}
.cq-minimap > .in { margin: calc(-9 * var(--u)); }
.cq-minimap .mapname { text-align: center; color: #ffe68c; font-weight: bold; height: calc(16 * var(--u)); }
.cq-minimap .view {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #02060a;
  border: calc(1 * var(--u)) solid #000; box-shadow: 0 0 0 calc(1 * var(--u)) #5d5336;
}
.cq-minimap .view > img, .cq-minimap .view > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cq-minimap .dot { position: absolute; width: calc(5 * var(--u)); height: calc(5 * var(--u)); margin: calc(-2.5 * var(--u)); border-radius: 50%; }
.cq-minimap .dot.me { background: #fff; box-shadow: 0 0 0 calc(1 * var(--u)) #000; }
.cq-minimap .dot.npc { background: #ffd23c; }
.cq-minimap .dot.mob { background: #ff3c3c; }
.cq-minimap .dot.party { background: #3cc8ff; }
.cq-minimap .coords { display: flex; justify-content: space-between; align-items: center; margin-top: calc(4 * var(--u)); color: #cfe3f0; font-size: calc(11 * var(--u)); }
.cq-minimap .zoom { display: flex; gap: calc(3 * var(--u)); }
.cq-minimap .zoom .cq-btn { --w: 18; --h: 16; padding: 0; font-size: calc(12 * var(--u)); }

.cq-slot > .plus { position: absolute; right: calc(4 * var(--u)); top: calc(3 * var(--u)); z-index: 2; font-size: calc(10 * var(--u)); font-weight: bold; white-space: nowrap;
  color: #ffe27a; pointer-events: none; line-height: 1; }