/* Nine-slice / three-slice skin. Loaded last.
   One rule for all three parts: the pieces are drawn on ONE layer under everything (a layer element for windows and the notice box, the background of the
   element for buttons); the real content sits in its own area on top of it, inset by the part's base margin. The pieces never act as padding.
   - default window  gui_window_frame.png  627x627 (original in art_src/), corners 130x130, the rest is TILED. base margin 74px. scale --ws  (pieces: gui_window_{tl,t,tr,l,r,bl,b,br}.png)
   - notice window   gui_msg_box.png        54x54,   corners 24x24 (minimum height 48), the rest is TILED. base margin 12px. scale --ns  (gui_msg_*.png)
   - button          gui_button_{l,c,r}.png 24x55 / 49x55 / 24x55, the middle is STRETCHED. height 55 at most, base margin 14px. scale --bs
   Every size is (source size x scale), so the proportions never change when a part is made smaller. */
:root{--ws:.2;--ns:.4}

/* ---- default window (gui_window_frame.png, corners 130x130, the rest tiled, base margin 74) ----
   The nine pieces live in one layer (<span class="cq-w9"> inserted by js/ui9.js as the FIRST child, behind the content, z-index -1). The element
   itself only keeps a transparent border = the base margin: the content area is the padding box, the pieces never act as padding.
   Seams: the edge pieces and the centre run 1px under the corners, corners are drawn last, and the centre is the flat colour of the frame. */
.cq-body .cq-fw,.cq-body #cq-cbox,.cq-body #cq-hbox,.cq-body #cq-mbox,.cq-body #cq-sbox,.cq-body #cq-ibox,.cq-body #cq-setbox,.cq-body #cq-lbox,.cq-body #cq-fbox,.cq-body #cq-townbox,.cq-body #cq-opt,.cq-body #cq-tbox,.cq-body #cq-nbox,.cq-body #cq-rank,.cq-body #cq-hsw,.cq-body #cq-tchat,.cq-body #cq-rfres,.cq-body .cq-dlg2,.cq-body #cq-bres,.cq-body #cq-cfm,.cq-body #cq-pre,.cq-body .cq-cowin{
  --wm:calc(74px * var(--ws));--wb:calc(130px * var(--ws));
  box-sizing:border-box;border:0 solid transparent;border-width:4px var(--wm) var(--wm);background:none;border-radius:0;box-shadow:none;isolation:isolate}
.cq-body #cq-rank,.cq-body #cq-hsw,.cq-body #cq-tchat{--ws:.2;padding-top:calc(var(--wb) - 4px)}
.cq-w9{position:absolute;left:calc(-1 * var(--wm));right:calc(-1 * var(--wm));top:-4px;bottom:calc(-1 * var(--wm));z-index:-1;pointer-events:none;filter:drop-shadow(0 6px 10px #0008)}
.cq-w9>i{position:absolute;display:block;background-repeat:no-repeat}
.cq-w9>.c{left:calc(var(--wb) - 1px);right:calc(var(--wb) - 1px);top:calc(var(--wb) - 1px);bottom:calc(var(--wb) - 1px);background:#2b1d18}
.cq-w9>.t{left:calc(var(--wb) - 1px);right:calc(var(--wb) - 1px);top:0;height:var(--wb);background:url(../img/gui_window_t.png) 0 0 / calc(367px * var(--ws)) 100% repeat-x}
.cq-w9>.b{left:calc(var(--wb) - 1px);right:calc(var(--wb) - 1px);bottom:0;height:var(--wb);background:url(../img/gui_window_b.png) 0 0 / calc(367px * var(--ws)) 100% repeat-x}
.cq-w9>.l{left:0;width:var(--wb);top:calc(var(--wb) - 1px);bottom:calc(var(--wb) - 1px);background:url(../img/gui_window_l.png) 0 0 / 100% calc(367px * var(--ws)) repeat-y}
.cq-w9>.r{right:0;width:var(--wb);top:calc(var(--wb) - 1px);bottom:calc(var(--wb) - 1px);background:url(../img/gui_window_r.png) 0 0 / 100% calc(367px * var(--ws)) repeat-y}
.cq-w9>.tl,.cq-w9>.tr,.cq-w9>.bl,.cq-w9>.br{width:var(--wb);height:var(--wb);background-size:100% 100%}
.cq-w9>.tl{left:0;top:0;background-image:url(../img/gui_window_tl.png)}
.cq-w9>.tr{right:0;top:0;background-image:url(../img/gui_window_tr.png)}
.cq-w9>.bl{left:0;bottom:0;background-image:url(../img/gui_window_bl.png)}
.cq-w9>.br{right:0;bottom:0;background-image:url(../img/gui_window_br.png)}
/* the title row sits in the dark band of the frame (band = 52..130 source px from the top edge, the content area starts under it) */
.cq-body .cq-fw>.cq-ttl,.cq-body #cq-cbox>.cq-ttl,.cq-body #cq-hbox>.cq-ttl,.cq-body #cq-mbox>.cq-ttl,.cq-body #cq-sbox>.cq-ttl,.cq-body #cq-ibox>.cq-ttl,.cq-body #cq-setbox>.cq-ttl,.cq-body #cq-lbox>.cq-ttl,.cq-body #cq-fbox>.cq-ttl,.cq-body #cq-townbox>.cq-ttl,.cq-body #cq-opt>.cq-ttl,.cq-body #cq-tbox>.cq-ttl,.cq-body #cq-nbox>.cq-ttl,.cq-body #cq-rfres>.cq-ttl,.cq-body .cq-dlg2>.cq-ttl,.cq-body #cq-bres>.cq-ttl,.cq-body #cq-cfm>.cq-ttl,.cq-body #cq-pre>.cq-ttl,.cq-body .cq-cowin>.cq-ttl{
  background:none;border:0;height:22px;line-height:28px;white-space:nowrap;text-shadow:0 1px 1px #000}
/* close button: in the band, at the right end, the same place in every window */
.cq-body .cq-fw .cq-x,.cq-body #cq-cbox .cq-x,.cq-body #cq-hbox .cq-x,.cq-body #cq-mbox .cq-x,.cq-body #cq-sbox .cq-x,.cq-body #cq-ibox .cq-x,.cq-body #cq-setbox .cq-x,.cq-body #cq-lbox .cq-x,.cq-body #cq-fbox .cq-x,.cq-body #cq-townbox .cq-x,.cq-body #cq-opt .cq-x,.cq-body #cq-tbox .cq-x,.cq-body #cq-nbox .cq-x,.cq-body #cq-rfres .cq-x,.cq-body .cq-dlg2 .cq-x,.cq-body #cq-bres .cq-x,.cq-body #cq-cfm .cq-x,.cq-body #cq-pre .cq-x{
  position:absolute;top:2px;right:calc(-1 * var(--wm) + 11px);width:19px;height:19px;border:0;background:transparent url(../img/gui_button_close.png) center/contain no-repeat;color:transparent!important;font-size:0;box-shadow:none;z-index:3}
.cq-body .cq-x:hover,.cq-body .cq-x:focus-visible{filter:brightness(1.35);outline:none;background-color:transparent}

/* ---- notice window (gui_msg_box.png, corners 24x24, minimum height 48 x scale, the rest tiled, base margin 12): the city notice only ---- */
.cq-body #cq-notice{--nm:calc(12px * var(--ns));--nb:calc(24px * var(--ns));box-sizing:border-box;border:0 solid transparent;border-width:var(--nm);background:none;border-radius:0;isolation:isolate;min-height:calc(48px * var(--ns))}
.cq-n9{position:absolute;inset:calc(-1 * var(--nm));z-index:-1;pointer-events:none}
.cq-n9>i{position:absolute;display:block;background-repeat:no-repeat}
.cq-n9>.c{left:calc(var(--nb) - 1px);right:calc(var(--nb) - 1px);top:calc(var(--nb) - 1px);bottom:calc(var(--nb) - 1px);background:#613b23}
.cq-n9>.t{left:calc(var(--nb) - 1px);right:calc(var(--nb) - 1px);top:0;height:var(--nb);background:url(../img/gui_msg_t.png) 0 0 / calc(6px * var(--ns)) 100% repeat-x}
.cq-n9>.b{left:calc(var(--nb) - 1px);right:calc(var(--nb) - 1px);bottom:0;height:var(--nb);background:url(../img/gui_msg_b.png) 0 0 / calc(6px * var(--ns)) 100% repeat-x}
.cq-n9>.l{left:0;width:var(--nb);top:calc(var(--nb) - 1px);bottom:calc(var(--nb) - 1px);background:url(../img/gui_msg_l.png) 0 0 / 100% calc(6px * var(--ns)) repeat-y}
.cq-n9>.r{right:0;width:var(--nb);top:calc(var(--nb) - 1px);bottom:calc(var(--nb) - 1px);background:url(../img/gui_msg_r.png) 0 0 / 100% calc(6px * var(--ns)) repeat-y}
.cq-n9>.tl,.cq-n9>.tr,.cq-n9>.bl,.cq-n9>.br{width:var(--nb);height:var(--nb);background-size:100% 100%}
.cq-n9>.tl{left:0;top:0;background-image:url(../img/gui_msg_tl.png)}
.cq-n9>.tr{right:0;top:0;background-image:url(../img/gui_msg_tr.png)}
.cq-n9>.bl{left:0;bottom:0;background-image:url(../img/gui_msg_bl.png)}
.cq-n9>.br{right:0;bottom:0;background-image:url(../img/gui_msg_br.png)}

/* ---- button: left 24 | middle stretched | right 24 (x 55 high), margin 14. The centre runs 1.5px under both edge pieces, so no seam shows ---- */
.cq-body .cq-btn,.cq-body .cq-tag,.cq-body a.cq-mi,.cq-body .cq-chip,.cq-body .cq-tb{--bs:.4;--bh:calc(55px * var(--bs));--be:calc(24px * var(--bs));box-sizing:border-box;height:var(--bh);max-height:55px;border:0;border-image:none;border-radius:0;
  padding:0 calc(14px * var(--bs));box-shadow:none;
  background:url(../img/gui_button_l.png) left top / auto 100% no-repeat,url(../img/gui_button_r.png) right top / auto 100% no-repeat,url(../img/gui_button_c.png) calc(var(--be) - 1.5px) top / calc(100% - 2 * var(--be) + 3px) 100% no-repeat}
/* a button never gets narrower than 100 source px (x scale), so the stretched middle is never squeezed below about half of its natural width */
.cq-body .cq-btn,.cq-body .cq-tag,.cq-body a.cq-mi,.cq-body .cq-chip,.cq-body .cq-tb{min-width:calc(100px * var(--bs))}
.cq-body .cq-btn{line-height:var(--bh)}
.cq-body .cq-btn.cq-sm,.cq-body .cq-arbid .cq-btn{--bs:.327}
.cq-body .cq-btn.cq-lg{--bs:.509}
.cq-body .cq-tag{--bs:.5;padding:0 calc(14px * var(--bs)) 0 calc(4px * var(--bs))}
.cq-body a.cq-mi{--bs:.436;line-height:var(--bh)}
.cq-body .cq-rk-foot .cq-btn{--bs:.4}
/* the bottom bar items are icon buttons, not 3-slice buttons */
.cq-city #cq-bar .cq-btn{background:none;height:40px;max-height:none;padding:0;min-width:0}

/* quantity -/+ : arrow buttons 49x52 */
.cq-body .cq-qm,.cq-body .cq-qp,.cq-body .cq-stepper .cq-qm,.cq-body .cq-stepper .cq-qp{width:15px;height:16px;padding:0;border:0;border-radius:0;font-size:0;color:transparent;
  background:url(../img/gui_button_left.png) center / 100% 100% no-repeat;cursor:pointer;flex:none}
.cq-body .cq-qp,.cq-body .cq-stepper .cq-qp{background-image:url(../img/gui_button_right.png)}
.cq-body .cq-qm:hover,.cq-body .cq-qp:hover,.cq-body .cq-qm:focus-visible,.cq-body .cq-qp:focus-visible{filter:brightness(1.3);outline:none}

/* check box / radio box */
.cq-body input[type=checkbox],.cq-body input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:none;width:11px;height:11px;margin:0;padding:0;border:0;border-radius:0;vertical-align:middle;cursor:pointer;
  background:url(../img/gui_check_box.png) center / 100% 100% no-repeat;accent-color:initial}
.cq-body input[type=checkbox]:checked{background-image:url(../img/gui_check_box_check.png)}
.cq-body input[type=radio]{background-image:url(../img/gui_radio_box.png)}
.cq-body input[type=radio]:checked{background-image:url(../img/gui_radio_box_check.png)}
.cq-body input[type=checkbox]:focus-visible,.cq-body input[type=radio]:focus-visible{outline:1px solid #d7b779;outline-offset:1px}
.cq-body input[type=checkbox][disabled],.cq-body input[type=radio][disabled]{opacity:.45;cursor:default}

/* ---- icons: one file each ---- */
.cq-body .cq-ui-icon{display:inline-block;flex:none;width:28px;height:28px;background:center / contain no-repeat}
.cq-body .cq-icon-town{background-image:url(../img/gui_icon_town.png)}
.cq-body .cq-icon-field{background-image:url(../img/gui_icon_field.png)}
.cq-body .cq-icon-party{background-image:url(../img/gui_icon_party.png)}
.cq-body .cq-icon-bag{background-image:url(../img/gui_icon_bag.png)}
.cq-body .cq-icon-plaza{background-image:url(../img/gui_icon_board.png)}
.cq-body .cq-icon-log{background-image:url(../img/gui_icon_news.png)}
.cq-body .cq-icon-data{background-image:url(../img/gui_icon_book.png)}
.cq-body .cq-icon-opt{background-image:url(../img/gui_icon_config.png)}
.cq-body .cq-icon-farm{background-image:url(../img/gui_icon_farm.png)}
.cq-body .cq-icon-mine{background-image:url(../img/gui_icon_mine.png)}
.cq-body .cq-icon-news{background-image:url(../img/gui_icon_board.png)}
.cq-body .cq-icon-gold{background-image:url(../img/gui_icon_gold.png)}
.cq-body .cq-icon-trophy1{background-image:url(../img/gui_icon_rank_1.png)}
.cq-body .cq-icon-trophy2{background-image:url(../img/gui_icon_rank_2.png)}
.cq-body .cq-icon-trophy3{background-image:url(../img/gui_icon_rank_3.png)}
.cq-body .cq-map .cq-ui-icon{width:24px;height:24px;margin-right:8px}
/* guest bottom bar: every button the same size and the same text size (<button> and <a> alike) */
.cq-body:not(.cq-city) #cq-bar .cq-btn{box-sizing:border-box;width:calc(100px * var(--bs));padding:0;font-size:5.4px;font-family:inherit;line-height:var(--bh);text-align:center;overflow:hidden}
/* pictures: smooth (bilinear) everywhere, EXCEPT character and monster sprites (point sampling): image/char (not the face_ portraits), image/char_rev, the first-login character art */
.cq-body img[src*="image/char/"]:not([src*="face_"]),.cq-body img[src*="image/char_rev/"],.cq-body img[src*="selectchar"]{image-rendering:pixelated;image-rendering:crisp-edges}

/* city ranking panel: the title sits in the band of the frame like any window title; the list starts right under it */
.cq-body #cq-rank{padding-top:0}
.cq-body #cq-rank>.cq-ttl{height:22px;min-height:0;line-height:28px;padding:0 2px;margin:0 0 4px;border:0;white-space:nowrap}
/* city facility list: each entry uses gui_window_buildings.png (240x55) as one picture, scaled as a whole (120 x 27.5 keeps its ratio) */
.cq-body .cq-tag{background:url(../img/gui_window_buildings.png) center / 100% 100% no-repeat;border:0}
.cq-body #cq-hsw{padding-top:10px}
/* city notice: gui_window_notice.png (400x56) shown whole, scaled by --nts so it fits between the ranking panel and the facility list;
   the text area is the padding 16 (top/bottom) x 48 (left/right) of the picture, times the same scale */
.cq-body #cq-notice{--nts:.375;box-sizing:border-box;width:calc(400px * var(--nts));min-width:0;max-width:none;height:calc(56px * var(--nts));min-height:0;
  padding:calc(16px * var(--nts)) calc(48px * var(--nts));border:0;background:url(../img/gui_window_notice.png) center / 100% 100% no-repeat;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.cq-body #cq-notice .cq-news-link{max-width:100%;line-height:normal}

/* facility side menu: text in the middle; the hover / current-item marker on the left is the same arrow glyph (U+203A) as the city facility list (it replaces the old triangle) */
.cq-body a.cq-mi{text-align:center;padding-left:calc(18px * var(--bs));padding-right:calc(18px * var(--bs))}
.cq-body a.cq-mi::after{display:none}
.cq-body a.cq-mi::before{content:"\203A";position:absolute;left:calc(-14px * var(--bs));top:0;width:auto;height:auto;border:0;line-height:var(--bh);font-family:Georgia,serif;font-size:12px;color:#ffd978;text-shadow:0 1px 2px #000;opacity:0}
.cq-body a.cq-mi:hover::before,.cq-body a.cq-mi:focus-visible::before,.cq-body a.cq-mi.cq-on::before{opacity:1}
.cq-body a.cq-mi:focus::before{animation:none}
/* prices / money inside windows: gui_icon_price.png (gui_icon_gold.png is the HUD money) */
.cq-body .cq-coin{left:3px;top:1px;width:16px;height:16px;border-radius:0;background:url(../img/gui_icon_price.png) center / contain no-repeat;box-shadow:none}
/* item lists: name | detail (stats, recipe materials, the <description> of the game in small text) */
.cq-body .cq-icols{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);column-gap:8px;align-items:center;width:100%}
.cq-body .cq-icd{text-align:left;font-size:6.8px;line-height:11px}
.cq-body .cq-lgx .smalltxt,.cq-body .cq-frag .smalltxt{font-size:6.8px;line-height:1.4;color:#ac98ac}
/* the drop-down list of a select opens outside the scaled stage: give it a readable size */
.cq-body select option{font-size:13px}
@supports (appearance: base-select){
  .cq-body select.cq-fsel,.cq-body select.cq-fsel::picker(select){appearance:base-select}
  .cq-body select.cq-fsel{box-sizing:border-box;display:inline-flex;align-items:center;height:15px;min-height:0;padding:0 6px;font-size:6px;line-height:13px;background:#120c0a;color:#ffe6d9;border:1px solid #ffcf6b;border-radius:0}
  .cq-body select.cq-fsel::picker-icon{color:#ffcf6b;font-size:6px}
  .cq-body select.cq-fsel::picker(select){font-size:13px;background:#120c0a;color:#efe5d2;border:1px solid #b99c5b;padding:2px 0}
  .cq-body select.cq-fsel option{padding:3px 10px;font-size:13px}
  .cq-body select.cq-fsel option:checked{color:#ffd978}
  .cq-body select.cq-fsel option::checkmark{display:none}
}
/* main action buttons of the facility / character windows (buy, sell, rest, refine, bid, learn, apply ...): 3x wider than the default minimum */
.cq-body .cq-win:not(#cq-opt):not(#cq-nbox):not(#cq-fbox):not(#cq-tbox):not(.cq-cfm) .cq-btn.cq-pri{min-width:120px;width:120px;text-align:center}
/* shop list rows: slightly smaller arrow buttons so the quantity column stays narrow */

/* sub buttons (chips: inventory types, auction sort, box tabs ...; tabs: character window) look like the shop category buttons */
.cq-body .cq-chip,.cq-body .cq-tb{--bs:.38;display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:calc(100px * var(--bs));margin:0 3px 0 0;padding:0 calc(14px * var(--bs));color:#f4e3bd;text-shadow:0 1px 1px #000a;font-size:5.4px;font-family:inherit;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;border:0;background-color:transparent}
.cq-body .cq-chip:hover,.cq-body .cq-chip:focus-visible,.cq-body .cq-tb:hover,.cq-body .cq-tb:focus-visible{filter:brightness(1.3);color:#fff3d2;outline:none}
.cq-body .cq-chip.cq-on,.cq-body .cq-tb.cq-act{filter:brightness(1.22);color:var(--cq-accent)}
.cq-body .cq-tabs{height:calc(55px * .38)}
/* every input box and every select box is 15 game px high (30 px on the default 2x screen) */
.cq-body input.cq-in,.cq-body input[type=text],.cq-body input[type=password],.cq-body input[type=search],.cq-body input[type=number],.cq-body select{box-sizing:border-box;height:15px;min-height:0}
.cq-body input.cq-in.cq-qn{height:16px}
/* < > quantity buttons: 15 x 16 game px (the picture is 49 x 52) */
/* price icon after an amount (e.g. "expected cost 750 (icon)") */
.cq-body .cq-pic{display:inline-block;width:10px;height:10px;margin:0 0 0 2px;vertical-align:-2px;background:url(../img/gui_icon_price.png) center / contain no-repeat}

/* refine result window (view/smithy.php): item, +from -> +to, one mark per try, cost, [OK] */
.cq-body #cq-rfres{position:absolute;left:50%;top:50%;z-index:40;width:220px;height:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:stretch;color:#efe5d2}
.cq-body #cq-rfres[hidden]{display:none}
.cq-rfres .cq-rf-top{display:flex;align-items:center;gap:8px;padding:2px 2px 6px}
.cq-rfres .cq-rf-ic{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#120c0a;border:1px solid #79613c;border-radius:3px}
.cq-rfres .cq-rf-ic img{width:24px;height:24px;object-fit:contain}
.cq-rfres .cq-rf-main{flex:1;min-width:0}
.cq-rfres .cq-rf-name{font-size:7.2px;color:#d5bf99}
.cq-rfres .cq-rf-lv{display:flex;align-items:center;gap:5px;margin:1px 0;font-size:12px;font-weight:700;line-height:15px}
.cq-rfres .cq-rf-lv span{color:#b29b80}
.cq-rfres .cq-rf-lv i{width:10px;height:10px;background:url(../img/gui_button_right.png) center / contain no-repeat}
.cq-rf-ok .cq-rf-lv b{color:#ffd978;text-shadow:0 0 6px #ffb84a99}
.cq-rf-ng .cq-rf-lv b{color:#ff6a5a;text-decoration:line-through}
.cq-rfres .cq-rf-msg{font-size:7.8px;font-weight:700}
.cq-rf-ok .cq-rf-msg{color:#7fe08a}
.cq-rf-ng .cq-rf-msg{color:#ff7a6a}
.cq-rfres .cq-rf-steps{display:flex;flex-wrap:wrap;gap:3px;padding:4px;background:#120c0a99;border:1px solid #6d533d}
.cq-rfres .cq-rf-steps span{min-width:20px;padding:1px 3px;text-align:center;font-size:6px;border-radius:2px}
.cq-rfres .cq-rf-s1{color:#d9ffd9;background:#2e5a2a;border:1px solid #5fae5a}
.cq-rfres .cq-rf-s0{color:#ffe0dc;background:#6a2620;border:1px solid #c0554a}
.cq-rfres .cq-rf-note{margin-top:4px;font-size:6.6px;color:#ff9a8a;text-align:center}
.cq-rfres .cq-rf-cost{margin-top:5px;text-align:center;font-size:6.6px;color:#d5bf99}
.cq-rfres .cq-rf-cost b{font-size:7.8px;color:#ffd978}
.cq-rfres .cq-rf-foot{display:flex;justify-content:center;margin-top:6px}.cq-body .cq-rfdim{position:absolute;left:0;top:0;right:0;bottom:0;z-index:39;background:#0009}
.cq-body .cq-rfdim[hidden]{display:none}
/* create result window (same frame as the refine result) */
.cq-crres .cq-cr-name{font-size:9px;font-weight:700;line-height:12px;color:#ffd978}
.cq-crres .cq-rf-ic img{image-rendering:auto}
.cq-crres .cq-cr-det{padding:5px 6px;font-size:7px;line-height:11px;background:#120c0a99;border:1px solid #6d533d;text-align:center}
.cq-crres .cq-cr-det .smalltxt,.cq-crres .cq-cr-det font{display:block;font-size:6px;color:#b29b80}
.cq-crres .cq-cr-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:4px}
.cq-crres .cq-cr-opts span{padding:1px 5px;font-size:6.6px;border-radius:2px}
.cq-crres .cq-cr-oa{color:#fff1c8;background:#6a4a1c;border:1px solid #d9a845}
.cq-crres .cq-cr-or{color:#dff1ff;background:#1f3f5e;border:1px solid #5f9fd6}
.cq-crres .cq-cr-leg{display:flex;justify-content:center;gap:8px;margin-top:3px}
.cq-crres .cq-cr-leg span{padding:0 0 0 7px;position:relative;font-size:5.4px;color:#b29b80;background:none;border:0}
.cq-crres .cq-cr-leg span:before{content:"";position:absolute;left:0;top:2px;width:4px;height:4px;border-radius:1px}
.cq-crres .cq-cr-leg .cq-cr-oa:before{background:#d9a845}
.cq-crres .cq-cr-leg .cq-cr-or:before{background:#5f9fd6}
/* item category buttons above the content lists (shop, smithy): one picture, fixed 43 x 19 game px */
.cq-body #cq-scats{flex:1;min-width:0;display:flex;gap:3px}
.cq-body #cq-scats .cq-scat{flex:none;box-sizing:border-box;width:43px;min-width:0;height:19px;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:url(../img/gui_button_category.png) center / 100% 100% no-repeat;font-size:6px;line-height:19px;text-align:center;white-space:nowrap;color:#e8d8b8}
.cq-body #cq-scats .cq-scat:before,.cq-body #cq-scats .cq-scat:after{display:none}
.cq-body #cq-scats .cq-scat.cq-on{color:#ffd978;filter:brightness(1.25)}
/* party window: character slots = gui_window_character.png (240 x 248 -> 120 x 124 game px), no gaps (the picture has its own margin).
   The sprite is shown at its own pixel size (1 sprite px = 1 game px = 2 screen px at the default 2x), bottom centre above the name. */
.cq-body #cq-ptbox .cq-pcards{display:grid;grid-template-columns:repeat(3,120px);grid-auto-rows:124px;justify-content:center;align-content:start;gap:0;padding:0}
.cq-body #cq-ptbox .cq-pcard{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:120px;height:124px;margin:0;padding:0 10px 11px;border:0;box-shadow:none;background:url(../img/gui_window_character.png) center / 100% 100% no-repeat;color:#efe5d2}
.cq-body #cq-ptbox .cq-pcard:hover,.cq-body #cq-ptbox .cq-pcard:focus{background:url(../img/gui_window_character.png) center / 100% 100% no-repeat;filter:brightness(1.25);outline:none}
.cq-body #cq-ptbox .cq-pcard img{flex:none;height:auto;width:auto;max-width:96px;max-height:78px;margin:0 0 3px;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}
.cq-body #cq-ptbox .cq-pcard b{flex:none;max-width:100%;margin:0;font-size:7px;line-height:9px}
.cq-body #cq-ptbox .cq-pcard i{flex:none;font-size:6px;line-height:8px;color:#d5bf99}
.cq-body #cq-ptbox .cq-pt-rec{--bs:.38;display:inline-block;box-sizing:border-box;width:52px;min-width:0;height:20.9px;padding:0;margin-left:10px;line-height:20.9px;font-size:5.4px;text-align:center;white-space:nowrap}
/* party slots v2: half size (60 x 62 game px), the sprite at 1 picture px = 1 screen px (half of its game-px size) */
.cq-body #cq-ptbox .cq-pcards{grid-template-columns:repeat(7,60px);grid-auto-rows:62px}
.cq-body #cq-ptbox .cq-pcard{width:60px;height:62px;padding:0 5px 6px}
.cq-body #cq-ptbox .cq-pcard img{max-width:50px;max-height:40px;margin:0 0 1px}
.cq-body #cq-ptbox .cq-pcard b{font-size:5.4px;line-height:7px}
.cq-body #cq-ptbox .cq-pcard i{font-size:4.8px;line-height:6px}
/* party slots v3: the picture is 260 x 274 now -> 65 x 68.5 game px (same quarter ratio as before) */
.cq-body #cq-ptbox .cq-pcards{grid-template-columns:repeat(7,65px);grid-auto-rows:68.5px}
.cq-body #cq-ptbox .cq-pcard{width:65px;height:68.5px;padding:0 5px 7px}
.cq-body #cq-ptbox .cq-pcard img{max-width:55px;max-height:44px}
.cq-body #cq-ptbox .cq-pcard b{font-size:5.8px;line-height:7.5px}
.cq-body #cq-ptbox .cq-pcard i{font-size:5px;line-height:6.5px}
.cq-body #cq-ptbox .cq-pcard b{font-size:6.8px;line-height:8.5px}
.cq-body #cq-ptbox .cq-pcard i{font-size:7px;line-height:8px}
.cq-body #cq-ptbox .cq-pcard img{max-height:40px}
/* party v4: slot picture 260 x 320 -> 64 x 78.8 game px (7 columns + the scroll bar fit in the 458 px list);
   head row = the shop / smithy tool bar (20.9 high, 3 px under it), [go to the mercenary market] at the right end like the smithy's pane buttons */
.cq-body #cq-ptbox .cq-pthead{flex:none;display:flex;align-items:center;height:20.9px;margin:0 0 3px;padding:0 0 0 2px;font-size:6.6px;line-height:20.9px}
.cq-body #cq-ptbox .cq-pthead .cq-pt-rec{margin-left:auto}
.cq-body #cq-ptbox .cq-pcards{flex:1;min-height:0;overflow-y:auto;grid-template-columns:repeat(7,64px);grid-auto-rows:78.8px;justify-content:start;scrollbar-gutter:stable}
.cq-body #cq-ptbox .cq-pcard{width:64px;height:78.8px;padding:0 5px 9px}
.cq-body #cq-ptbox .cq-pcard img{max-height:46px}
/* party v5: picture 260 x 308 -> 64 x 75.8 game px (3 rows = 227.5 fit in the 233 px list); name / level 3 px lower */
.cq-body #cq-ptbox .cq-pcards{grid-auto-rows:75.8px}
.cq-body #cq-ptbox .cq-pcard{height:75.8px;padding:0 5px 6px}
/* party v6: name + level 2 px lower, the sprite stays where it was */
.cq-body #cq-ptbox .cq-pcard{padding-bottom:4px}
.cq-body #cq-ptbox .cq-pcard img{margin-bottom:3px}
/* character screen: tabs (status / skill / pattern / equipment / class) = the item category button, fixed 43 x 19 */
.cq-body #cq-cbox .cq-tabs .cq-tb{box-sizing:border-box;width:43px;min-width:0;height:19px;min-height:0;padding:0;margin:0 3px 0 0;border:0;border-radius:0;background:url(../img/gui_button_category.png) center / 100% 100% no-repeat;font-size:6px;line-height:19px;text-align:center;white-space:nowrap;color:#e8d8b8}
.cq-body #cq-cbox .cq-tabs .cq-tb:before,.cq-body #cq-cbox .cq-tabs .cq-tb:after{display:none}
.cq-body #cq-cbox .cq-tabs .cq-tb.cq-act{color:#ffd978;filter:brightness(1.25)}
/* pattern pane: formation bar on top, then the editor */
.cq-body #cq-cbox .cq-form{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:4px 6px;font-size:6.6px}
.cq-body #cq-cbox .cq-form label{display:inline-flex;align-items:center;gap:2px}
.cq-body #cq-cbox .cq-form select{width:110px}
.cq-body #cq-cbox .cq-form .cq-btn{margin-left:auto}
.cq-pated .cq-pathead{display:flex;align-items:center;gap:5px;margin:0 0 3px;font-size:6.6px}
.cq-pated .cq-pathead .cq-lbl b{color:#ffd978}
.cq-pated .cq-pathint{flex:1;min-width:0;font-size:5.6px}
.cq-pated .cq-patcols,.cq-pated .cq-patrow{display:grid;grid-template-columns:12px 12px minmax(0,1.25fr) 30px minmax(0,1fr) 30px;column-gap:4px;align-items:center}
.cq-pated .cq-patcols{padding:0 4px;min-height:13px;font-size:5.4px;color:#d5bf99;background:linear-gradient(#392d20,#211a13);border:1px solid #78603d;border-bottom:0}
.cq-pated .cq-patlist{list-style:none;margin:0;padding:0;border:1px solid #78603d;background:#15110e;touch-action:none}
.cq-pated .cq-patrow{padding:2px 4px;min-height:20px;border-bottom:1px solid #6d533d55;background:transparent}
.cq-pated .cq-patrow:hover{background:#70522e22}
.cq-pated .cq-patrow.cq-drag{background:#8e682b55;box-shadow:inset 0 0 0 1px #e5bd70;position:relative;z-index:2}
.cq-pated .cq-dragging{cursor:grabbing}
.cq-pated .cq-pathd{width:10px;height:14px;cursor:grab;background:repeating-linear-gradient(#b99c5b 0 1px,transparent 1px 3px) center / 6px 9px no-repeat;opacity:.8}
.cq-pated .cq-pathd:hover{opacity:1}
.cq-pated .cq-patno{text-align:center;font-size:6.6px;color:#ffd978}
.cq-pated select,.cq-pated .cq-patq{box-sizing:border-box;width:100%;height:15px;font-size:6px}
.cq-pated .cq-patq{text-align:center;padding:0 2px}
.cq-pated .cq-patbtns{display:flex;gap:2px;justify-content:flex-end}
.cq-pated .cq-patbtns button{width:13px;height:13px;padding:0;border:1px solid #79613c;border-radius:2px;background:#241814;color:#e8d8b8;font-size:8px;line-height:11px;cursor:pointer}
.cq-pated .cq-patbtns button:hover{border-color:#e5bd70;color:#ffd978}
.cq-pated .cq-patbtns .cq-patdel:hover{border-color:#c0554a;color:#ff8a7a}
.cq-pated .cq-patfoot{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:5px}
.cq-pated .cq-patdirty{margin-right:auto;font-size:6px;color:#ffb36a}
.cq-pated .cq-patdirty[hidden]{display:none}
.cq-pated .cq-btn.cq-glow{filter:brightness(1.3);box-shadow:0 0 6px #ffb84a99}
.cq-pated select,.cq-body #cq-cbox .cq-form select{background:#120c0a;border:1px solid #79613c;color:#efe5d2;border-radius:2px;padding:0 3px}
.cq-pated select:focus,.cq-pated .cq-patq:focus{border-color:#dfb66b;outline:none}
.cq-pated option{background:#120c0a;color:#efe5d2}
.cq-pated option.cq-o0{background:#3d2a22;color:#ffd978}
/* ===== character status tab (reference: mock-up 2026-10-19): left = who / stats, right = equipment / battle settings ===== */
.cq-body #cq-cbox .cq-panes{padding:6px}
.cq-body #cq-cbox .cq-pane[data-pane=stat].cq-act{display:grid;grid-template-columns:minmax(0,1fr) 170px;grid-template-rows:minmax(0,1fr) auto;gap:4px 5px;height:100%;font-size:6px;color:#efe5d2}
.cq-pane[data-pane=stat] .cq-stl,.cq-pane[data-pane=stat] .cq-str{display:flex;flex-direction:column;gap:3px;min-width:0}
.cq-pane[data-pane=stat] .cq-stbox,.cq-pane[data-pane=stat] .cq-sthead,.cq-pane[data-pane=stat] .cq-sthpsp>div,.cq-pane[data-pane=stat] .cq-stbat>div{background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px}
.cq-pane[data-pane=stat] .cq-stbox{padding:3px 5px 4px}
.cq-pane[data-pane=stat] .cq-stbh{display:flex;align-items:center;justify-content:space-between;height:11px;margin:0 0 2px;font-size:6.8px;font-weight:700;color:#ffd978;letter-spacing:.3px}
/* head card */
.cq-pane[data-pane=stat] .cq-sthead{display:flex;align-items:center;gap:6px;height:34px;padding:2px 6px 2px 2px}
.cq-pane[data-pane=stat] .cq-stspr{flex:none;width:30px;height:30px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 70%,#4a3424,#120c0a);border:1px solid #c4a366;border-radius:50%}
.cq-pane[data-pane=stat] .cq-stspr img{max-width:34px;max-height:34px;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;margin-bottom:-2px}
.cq-pane[data-pane=stat] .cq-stid{min-width:0}
.cq-pane[data-pane=stat] .cq-stname{font-size:10px;font-weight:700;line-height:12px;color:#ffe9b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-pane[data-pane=stat] .cq-stjob{font-size:6.4px;color:#d5bf99}
.cq-pane[data-pane=stat] .cq-stexp{margin-left:auto;width:118px;flex:none}
.cq-pane[data-pane=stat] .cq-stexp div{text-align:right;font-size:5.6px;color:#b29b80;margin-bottom:2px}
.cq-pane[data-pane=stat] .cq-stexp b{color:#efe5d2}
.cq-pane[data-pane=stat] .cq-stexp i,.cq-pane[data-pane=stat] .cq-sth i{display:block;height:4px;background:#0b0806;border:1px solid #5a4430;border-radius:3px;overflow:hidden}
.cq-pane[data-pane=stat] .cq-stexp u{display:block;height:100%;background:linear-gradient(#8ff09a,#3fae4f)}
/* HP / SP */
.cq-pane[data-pane=stat] .cq-sthpsp{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.cq-pane[data-pane=stat] .cq-sthpsp>div{display:flex;align-items:baseline;gap:5px;height:16px;padding:0 7px;line-height:15px}
.cq-pane[data-pane=stat] .cq-sthpsp span{font-size:5.8px;font-weight:700;color:#ff8a7a}
.cq-pane[data-pane=stat] .cq-stsp span{color:#7fc4ff}
.cq-pane[data-pane=stat] .cq-sthpsp b{font-size:9px;color:#fff}
.cq-pane[data-pane=stat] .cq-sthpsp em,.cq-pane[data-pane=stat] .cq-stbo{font-style:normal;font-size:6px;color:#7fe08a}
/* base stats + distribution */
.cq-pane[data-pane=stat] .cq-stfree{padding:0 5px;height:9px;line-height:8px;font-size:5.6px;font-weight:400;color:#d5bf99;border:1px solid #6d533d;border-radius:5px}
.cq-pane[data-pane=stat] .cq-stfree b{color:#ffd978}
.cq-pane[data-pane=stat] .cq-stfree.cq-has{border-color:#e5bd70;box-shadow:0 0 4px #ffb84a66}
.cq-pane[data-pane=stat] .cq-strow{display:grid;grid-template-columns:minmax(0,1.4fr) .6fr .6fr .6fr 52px;align-items:center;height:11px;text-align:center}
.cq-pane[data-pane=stat] .cq-strow>span:first-child{text-align:left}
.cq-pane[data-pane=stat] .cq-strh{height:9px;font-size:5.2px;color:#b29b80;border-bottom:1px solid #6d533d77}
.cq-pane[data-pane=stat] .cq-strow+.cq-strow:not(.cq-strh){border-top:1px solid #6d533d33}
.cq-pane[data-pane=stat] .cq-stn b{display:inline-block;width:17px;font-size:6px;color:#ffe9b0}
.cq-pane[data-pane=stat] .cq-stn span{font-size:5.4px;color:#b29b80}
.cq-pane[data-pane=stat] .cq-sttot{font-weight:700}
.cq-pane[data-pane=stat] .cq-strow.cq-up .cq-sttot,.cq-pane[data-pane=stat] .cq-strow.cq-up .cq-stv{color:#7fe08a}
.cq-pane[data-pane=stat] .cq-stadd{display:flex;align-items:center;justify-content:center;gap:1px}
.cq-body #cq-cbox .cq-stadd .cq-qm,.cq-body #cq-cbox .cq-stadd .cq-qp{width:10px;height:10.7px}
.cq-body #cq-cbox .cq-stadd button:disabled{opacity:.3;cursor:default}
.cq-pane[data-pane=stat] .cq-stv{width:14px;font-size:6px;text-align:center}
.cq-pane[data-pane=stat] .cq-stbtns{display:flex;justify-content:flex-end;gap:4px;margin-top:3px}
.cq-body #cq-cbox .cq-stbtns .cq-btn{--bs:.32;min-width:0;width:auto;padding:0 8px;font-size:5.6px}
.cq-body #cq-cbox .cq-stbtns .cq-btn.cq-pri{width:76px}
.cq-pane[data-pane=stat] .cq-streset i{display:inline-block;width:7px;height:7px;vertical-align:-1px;background:url(../img/gui_symbol_refresh.png) center / contain no-repeat}
/* battle power */
.cq-pane[data-pane=stat] .cq-stbat{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.cq-pane[data-pane=stat] .cq-stbat>div{height:20px;padding:2px 5px;line-height:8px}
.cq-pane[data-pane=stat] .cq-stbat span{display:block;font-size:5px;color:#b29b80}
.cq-pane[data-pane=stat] .cq-stbat b{font-size:8.4px}
.cq-pane[data-pane=stat] .cq-stbat small{font-size:5.4px;margin-left:1px;opacity:.85}
/* equipment */
.cq-pane[data-pane=stat] .cq-stlink{font-size:5.4px;font-weight:400;color:#d5bf99;text-decoration:none;cursor:pointer}
.cq-pane[data-pane=stat] .cq-stlink:hover{color:#ffd978}
.cq-pane[data-pane=stat] .cq-eqs{display:grid;grid-template-columns:20px 16px minmax(0,1fr);align-items:center;gap:3px;height:21px;padding:1px 0;border-top:1px solid #6d533d33}
.cq-pane[data-pane=stat] .cq-eqs:first-of-type{border-top:0}
.cq-pane[data-pane=stat] .cq-eqi{width:19px;height:19px;display:flex;align-items:center;justify-content:center;background:#120c0a;border:1px solid #8a6b3d;border-radius:2px}
.cq-pane[data-pane=stat] .cq-eqi img{max-width:16px;max-height:16px}
.cq-pane[data-pane=stat] .cq-eq0 .cq-eqi{border-style:dashed;opacity:.5}
.cq-pane[data-pane=stat] .cq-eql{font-size:5.2px;color:#b29b80}
.cq-pane[data-pane=stat] .cq-eqn{font-size:6.2px;font-weight:700;line-height:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffe9b0}
.cq-pane[data-pane=stat] .cq-eqd{font-size:5.2px;line-height:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none}
.cq-pane[data-pane=stat] .cq-eqd *{font-size:inherit}
.cq-pane[data-pane=stat] .cq-sth{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;margin-top:3px;font-size:5.4px;color:#b29b80}
.cq-pane[data-pane=stat] .cq-sth u{display:block;height:100%;background:linear-gradient(#ffe08a,#d39a2a)}
.cq-pane[data-pane=stat] .cq-sth b{color:#efe5d2}
/* battle settings */
.cq-pane[data-pane=stat] .cq-stset{flex:1}
.cq-pane[data-pane=stat] .cq-stkv{display:flex;justify-content:space-between;gap:4px;padding:1px 0;font-size:5.6px;line-height:8px;border-top:1px solid #6d533d33}
.cq-pane[data-pane=stat] .cq-stkv span{color:#b29b80;flex:none}
.cq-pane[data-pane=stat] .cq-stkv b{font-weight:400;text-align:right;color:#efe5d2}
.cq-pane[data-pane=stat] .cq-stsp2 b{color:#7fe08a}
/* footer links */
.cq-pane[data-pane=stat] .cq-stfoot{grid-column:1 / -1;display:flex;align-items:center;gap:8px;height:10px}
.cq-pane[data-pane=stat] .cq-stfoot form{margin:0}
.cq-pane[data-pane=stat] .cq-stln{height:auto;min-height:0;padding:0;border:0;background:none;font-size:5.4px;color:#b29b80;cursor:pointer}
.cq-pane[data-pane=stat] .cq-stln:hover{color:#ffd978;text-decoration:underline}
.cq-pane[data-pane=stat] .cq-stbye{margin-left:auto !important}
.cq-pane[data-pane=stat] .cq-stdanger{color:#e0705f}
/* status tab: use the free height (rows a little taller, bigger head card) */
.cq-pane[data-pane=stat] .cq-sthead{height:40px}
.cq-pane[data-pane=stat] .cq-stspr{width:36px;height:36px}
.cq-pane[data-pane=stat] .cq-stspr img{max-width:40px;max-height:40px}
.cq-pane[data-pane=stat] .cq-strow{height:12.5px}
.cq-pane[data-pane=stat] .cq-stbat>div{height:23px;padding-top:3px}
.cq-pane[data-pane=stat] .cq-eqs{height:23px}
.cq-pane[data-pane=stat] .cq-sthead{height:36px}
.cq-pane[data-pane=stat] .cq-stspr{width:32px;height:32px}
.cq-pane[data-pane=stat] .cq-strow{height:11.5px}
/* category buttons: the picture is 86 x 30 now -> 43 x 15 game px (shop, smithy, character tabs) */
.cq-body #cq-scats .cq-scat,.cq-body #cq-cbox .cq-tabs .cq-tb{height:15px;line-height:15px}
/* very small buttons (rename / stat reset / dismiss): gui_button_small.png 88 x 28 -> 44 x 14 game px */
.cq-pane[data-pane=stat] .cq-stln{box-sizing:border-box;width:44px;height:14px;padding:0;border:0;background:url(../img/gui_button_small.png) center / 100% 100% no-repeat;font-size:5.2px;line-height:14px;text-align:center;color:#e8d8b8;cursor:pointer}
.cq-pane[data-pane=stat] .cq-stln:hover{filter:brightness(1.25);color:#fff3d2;text-decoration:none}
.cq-pane[data-pane=stat] .cq-stdanger{color:#ff8a7a}
.cq-pane[data-pane=stat] .cq-stfoot{height:14px;gap:4px}
/* status: battle power now sits under HP / SP */
.cq-pane[data-pane=stat] .cq-strow{height:11px}
/* character list (left): two columns of slot frames, sprite at 1 picture px = 1 screen px, pivot = bottom centre, name / Lv under it */
.cq-body #cq-cbox .cq-clist{display:grid;grid-template-columns:repeat(2,51px);grid-auto-rows:60.4px;gap:1px;align-content:start;padding:0;scrollbar-gutter:stable}
.cq-body #cq-cbox .cq-cc{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:51px;height:60.4px;min-height:0;margin:0;padding:0 3px 5px;border:0;background:url(../img/gui_window_character.png) center / 100% 100% no-repeat;text-align:center;color:#efe5d2}
.cq-body #cq-cbox .cq-cc:hover{filter:brightness(1.2)}
.cq-body #cq-cbox .cq-cc.cq-on{filter:brightness(1.3) drop-shadow(0 0 2px #ffcf6bcc)}
.cq-body #cq-cbox .cq-ccimg{flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.cq-body #cq-cbox .cq-cc img{position:static;flex:none;max-width:none;max-height:none;image-rendering:pixelated;image-rendering:crisp-edges}
.cq-body #cq-cbox .cq-cc b{flex:none;max-width:100%;margin-top:1px;font-size:5.4px;line-height:7px;color:#ffe9b0}
.cq-body #cq-cbox .cq-cc i{flex:none;font-size:4.8px;line-height:6px;color:#d5bf99}
.cq-body #cq-cbox .cq-cc.cq-on b{color:#ffd978}
.cq-body #cq-cbox .cq-clist{grid-template-columns:repeat(2,50px);grid-auto-rows:59.2px;overflow-x:hidden;overflow-y:auto}
.cq-body #cq-cbox .cq-cc{width:50px;height:59.2px}
.cq-body #cq-cbox .cq-cc.cq-on{filter:brightness(1.3)}
/* small dialogs on the character screen (rename / stat reset / dismiss / messages) */
.cq-body .cq-dlgdim{position:absolute;left:0;top:0;right:0;bottom:0;z-index:39;background:#0009}
.cq-body .cq-dlgdim[hidden],.cq-body .cq-dlg2[hidden]{display:none}
.cq-body .cq-dlg2{position:absolute;left:50%;top:50%;z-index:40;width:210px;height:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;color:#efe5d2;font-size:6.6px}
.cq-dlg2 .cq-dlgb{padding:2px 2px 0;line-height:10px}
.cq-dlg2 .cq-dlgb p{margin:0 0 4px}
.cq-dlg2 .cq-dlgname{color:#ffd978}
.cq-dlg2 .cq-dlgin,.cq-dlg2 .cq-dlgsel{box-sizing:border-box;width:100%;height:15px;margin:1px 0 5px;font-size:7px}
.cq-dlg2 .cq-dlgnote{font-size:5.8px;color:#d5bf99}
.cq-dlg2 .cq-dlgwarn{font-size:6px;color:#ff8a7a}
.cq-dlg2 .cq-dlgok{color:#bff0c4}
.cq-dlg2 .cq-dlgwho{display:flex;justify-content:center;align-items:flex-end;height:42px;margin:0 0 4px}
.cq-dlg2 .cq-dlgwho img{image-rendering:pixelated;image-rendering:crisp-edges;filter:grayscale(.35)}
.cq-dlg2 .cq-dlgf{display:flex;justify-content:center;gap:6px;margin-top:4px}
.cq-body .cq-dlg2 .cq-dlgf .cq-btn{--bs:.34;min-width:64px;width:auto;padding:0 10px;font-size:6px}
.cq-dlgmsg .cq-dlgb{text-align:center}

/* ===== character screen: skill / equipment / class change tabs (reference: mock-ups 2026-10-20) ===== */
.cq-body #cq-cbox .cq-pane[data-pane=skill].cq-act,.cq-body #cq-cbox .cq-pane[data-pane=equip].cq-act,.cq-body #cq-cbox .cq-pane[data-pane=class].cq-act{height:100%;font-size:6px;color:#efe5d2}
#cq-cbox .cq-pos{color:#7fe08a}
#cq-cbox .cq-neg{color:#ff7a6a}
#cq-cbox .cq-skbox{display:flex;flex-direction:column;min-height:0;padding:3px 5px 4px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px}
#cq-cbox .cq-skbh{flex:none;display:flex;align-items:center;justify-content:space-between;height:11px;margin:0 0 2px;font-size:6.8px;font-weight:700;color:#ffd978}
#cq-cbox .cq-skbh i{font-style:normal;font-weight:400;font-size:5.6px;color:#b29b80;margin-left:3px}
#cq-cbox .cq-skpts{padding:0 5px;height:10px;line-height:9px;font-size:5.6px;font-weight:400;color:#d5bf99;border:1px solid #e5bd70;border-radius:5px}
#cq-cbox .cq-skpts b{color:#ffd978;font-size:6.6px}

/* skills */
#cq-cbox .cq-skform{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:5px;height:100%}
#cq-cbox .cq-skl,#cq-cbox .cq-skr2{display:flex;flex-direction:column;gap:3px;min-height:0}
#cq-cbox .cq-skhead{flex:none;display:flex;align-items:center;justify-content:space-between;height:15px;padding:0 5px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px}
#cq-cbox .cq-skwho{font-size:6px;color:#d5bf99}
#cq-cbox .cq-skwho b{font-size:7.6px;color:#ffe9b0;margin-right:3px}
#cq-cbox .cq-skl .cq-skbox{flex:1}
#cq-cbox .cq-skl .cq-skbox+.cq-skbox{flex:1.15}
#cq-cbox .cq-sklist{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
#cq-cbox .cq-skr{display:grid;grid-template-columns:14px 58px 24px minmax(0,1fr) 40px;align-items:center;gap:3px;min-height:15px;padding:1px 2px;border-top:1px solid #6d533d33;cursor:pointer}
#cq-cbox .cq-skc{grid-template-columns:14px 58px 24px minmax(0,1fr) 30px 9px}
#cq-cbox .cq-skr:first-child{border-top:0}
#cq-cbox .cq-skr:hover{background:#70522e22}
#cq-cbox .cq-skr.cq-on{background:#8e682b33;box-shadow:inset 0 0 0 1px #e5bd7088}
#cq-cbox .cq-ski{width:13px;height:13px;display:flex;align-items:center;justify-content:center;background:#120c0a;border:1px solid #8a6b3d;border-radius:2px}
#cq-cbox .cq-ski img{max-width:12px;max-height:12px}
#cq-cbox .cq-skn{font-size:6.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffe9b0}
#cq-cbox .cq-sksp{font-size:5.6px;white-space:nowrap}
#cq-cbox .cq-sksp i{font-style:normal;font-size:4.8px;color:#b29b80}
#cq-cbox .cq-ske{font-size:5.4px;line-height:7px;color:#d5bf99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cq-cbox .cq-skdone{justify-self:end;padding:0 4px;height:9px;line-height:8px;font-size:5px;color:#ffd978;border:1px solid #a8843f;border-radius:2px}
#cq-cbox .cq-skpt{font-size:5.2px;color:#b29b80;text-align:right;white-space:nowrap}
#cq-cbox .cq-skpt b{color:#efe5d2;font-size:6px}
#cq-cbox .cq-skno .cq-skpt b{color:#ff7a6a}
#cq-cbox .cq-skc input{margin:0;justify-self:center}
#cq-cbox .cq-skempty{padding:6px;font-size:5.8px}
#cq-cbox .cq-skinfo{flex:1}
#cq-cbox .cq-skitop{display:flex;gap:5px;align-items:flex-start}
#cq-cbox .cq-skibig{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:radial-gradient(#4a3424,#120c0a);border:1px solid #c4a366;border-radius:3px}
#cq-cbox .cq-skibig img{width:24px;height:24px;object-fit:contain}
#cq-cbox .cq-skiname{display:block;font-size:8.4px;line-height:10px;color:#ffe9b0;margin-bottom:1px}
#cq-cbox .cq-skikv{font-size:5.4px;line-height:7.5px;color:#b29b80}
#cq-cbox .cq-skikv b{font-weight:400;color:#efe5d2}
#cq-cbox .cq-skidesc{flex:1;margin-top:4px;padding:3px 4px;font-size:5.8px;line-height:8px;color:#efe5d2;background:#120c0a99;border:1px solid #6d533d77;border-radius:2px;overflow:hidden}
#cq-cbox .cq-skres{flex:none}
#cq-cbox .cq-skkv{display:flex;justify-content:space-between;padding:1px 3px;font-size:5.8px;line-height:8px;border-top:1px solid #6d533d33}
#cq-cbox .cq-skkv span{color:#b29b80}
#cq-cbox .cq-skuse b{color:#ff9a7a}
.cq-body #cq-cbox .cq-skres .cq-btn.cq-pri{--bs:.34;width:100%;min-width:0;margin-top:3px;font-size:6.4px}
.cq-body #cq-cbox .cq-skreset{display:block;margin:3px auto 0;width:44px;height:14px;padding:0;border:0;background:url(../img/gui_button_small.png) center / 100% 100% no-repeat;font-size:5.2px;color:#e8d8b8;cursor:pointer}

/* equipment */
.cq-body #cq-cbox .cq-pane[data-pane=equip].cq-act{display:flex;gap:5px}
#cq-cbox .cq-eql2{flex:0 0 134px;display:flex;flex-direction:column;gap:3px;min-height:0}
#cq-cbox .cq-eqcur{flex:1}
#cq-cbox .cq-eqs2{display:grid;grid-template-columns:8px 20px minmax(0,1fr);align-items:center;gap:3px;height:31px;padding:0 2px;border-top:1px solid #6d533d33;cursor:pointer}
#cq-cbox .cq-eqs2:hover{background:#70522e22}
#cq-cbox .cq-eqs2 input{margin:0;width:7px;height:7px}
#cq-cbox .cq-eqs2:has(input:checked){background:#8e682b33;box-shadow:inset 0 0 0 1px #e5bd7088}
#cq-cbox .cq-eqs2.cq-eq0{cursor:default}
#cq-cbox .cq-eqs2 .cq-eqi,#cq-cbox .cq-eqrow .cq-eqi{width:19px;height:19px;display:flex;align-items:center;justify-content:center;background:#120c0a;border:1px solid #8a6b3d;border-radius:2px}
#cq-cbox .cq-eqi img{max-width:16px;max-height:16px}
#cq-cbox .cq-eq0 .cq-eqi{border-style:dashed;opacity:.5}
#cq-cbox .cq-eqs2 .cq-eqt{display:flex;flex-direction:column;min-width:0}
#cq-cbox .cq-eqs2 .cq-eql{font-size:5px;color:#b29b80}
#cq-cbox .cq-eqn{font-size:6.2px;font-weight:700;line-height:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffe9b0}
#cq-cbox .cq-eqd{display:block;font-size:5.2px;line-height:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none}
#cq-cbox .cq-eqd *{font-size:inherit}
#cq-cbox .cq-sth{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;margin-top:3px;font-size:5.4px;color:#b29b80}
#cq-cbox .cq-sth i{display:block;height:4px;background:#0b0806;border:1px solid #5a4430;border-radius:3px;overflow:hidden}
#cq-cbox .cq-sth u{display:block;height:100%;background:linear-gradient(#ffe08a,#d39a2a)}
#cq-cbox .cq-sth b{color:#efe5d2}
#cq-cbox .cq-eqbtns{flex:none;display:flex;gap:3px}
.cq-body #cq-cbox .cq-eqbtns .cq-btn{--bs:.32;flex:1;min-width:0;width:auto;padding:0 4px;font-size:5.8px}
#cq-cbox .cq-eqr2{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
#cq-cbox .cq-eqtool{flex:none;display:flex;align-items:center;gap:4px;margin:0 0 3px}
#cq-cbox .cq-eqtool .cq-ssearch{position:relative;flex:1;min-width:0;height:15px;margin:0}
#cq-cbox .cq-eqtool .cq-ssearch .cq-in{box-sizing:border-box;width:100%;height:15px;padding:0 3px 0 14px;font-size:5.8px;background:#0b0d10cc;border:1px solid #79613c;border-radius:2px;color:#f2e5ce}
#cq-cbox .cq-eqtool .cq-ssearch-ic{position:absolute;left:3px;top:2.5px;width:9px;height:9px;background:url(../img/gui_symbol_search.png) center / contain no-repeat;pointer-events:none}
#cq-cbox .cq-eqtool #cq-scats{flex:none;gap:2px}
#cq-cbox .cq-eqhead,#cq-cbox .cq-eqrow{display:grid;grid-template-columns:8px 20px minmax(0,1fr) minmax(0,1.25fr) 14px 16px;align-items:center;gap:3px;padding:1px 4px}
#cq-cbox .cq-eqhead{flex:none;min-height:12px;font-size:5.2px;color:#d5bf99;background:linear-gradient(#392d20,#211a13);border:1px solid #78603d;border-bottom:0}
#cq-cbox .cq-eqhead span:nth-child(n+5){text-align:center}
#cq-cbox .cq-eqlist{flex:1;min-height:0;overflow-y:auto;border:1px solid #78603d;background:#15110e;scrollbar-gutter:stable}
#cq-cbox .cq-eqrow{min-height:22px;border-bottom:1px solid #6d533d55;background:transparent;cursor:pointer}
#cq-cbox .cq-eqrow:before{display:none}
#cq-cbox .cq-eqrow:hover{background:#70522e33}
#cq-cbox .cq-eqrow.cq-on{background:#8e682b33;box-shadow:inset 0 0 0 1px #e5bd7088}
#cq-cbox .cq-eqrow input{margin:0;width:7px;height:7px}
#cq-cbox .cq-eqrow .cq-eqd{white-space:normal;max-height:14px}
#cq-cbox .cq-eqh,#cq-cbox .cq-eqhave{text-align:center;font-size:6px}
#cq-cbox .cq-eqprev{flex:none;display:flex;align-items:center;gap:5px;min-height:26px;margin-top:3px;padding:2px 4px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px}
#cq-cbox .cq-eqpv{flex:1;min-width:0;font-size:5.8px;line-height:8px}
#cq-cbox .cq-pvn{color:#ffe9b0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cq-cbox .cq-pvd{font-weight:400;font-size:5.2px;color:#b29b80}
#cq-cbox .cq-pvs{display:inline-block;margin-right:6px;white-space:nowrap}
#cq-cbox .cq-pvs i{font-style:normal;font-size:5px;color:#b29b80}
#cq-cbox .cq-pvs em{font-style:normal;color:#b29b80}
#cq-cbox .cq-pvs small{font-size:5px}
.cq-body #cq-cbox .cq-eqprev .cq-btn.cq-pri{--bs:.34;flex:none;width:72px;min-width:0;font-size:6px}

/* class change */
#cq-cbox .cq-ccform{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:5px;height:100%}
#cq-cbox .cq-ccl{display:flex;flex-direction:column;min-height:0;padding:3px 5px 4px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px}
#cq-cbox .cq-cccards{flex:1;min-height:0;display:flex;gap:4px;overflow-x:auto;padding:1px}
#cq-cbox .cq-cccard{position:relative;flex:1 1 0;min-width:80px;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 3px 4px;background:radial-gradient(ellipse at 50% 35%,#4a3424,#1a120f 75%);border:1px solid #6d533d;border-radius:3px;cursor:pointer;text-align:center}
#cq-cbox .cq-cccard:hover{border-color:#b99c5b}
#cq-cbox .cq-cccard.cq-on{border-color:#ffd978;box-shadow:inset 0 0 0 1px #ffd97866,0 0 5px #ffb84a66}
#cq-cbox .cq-cccard input{position:absolute;left:3px;top:3px;margin:0}
#cq-cbox .cq-ccimg{flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center}
#cq-cbox .cq-ccimg img{image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;max-height:100%}
#cq-cbox .cq-ccname{flex:none;font-size:8px;color:#ffe9b0}
#cq-cbox .cq-cccard.cq-on .cq-ccname{color:#ffd978}
#cq-cbox .cq-cceq,#cq-cbox .cq-ccsk{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1px 2px;font-size:4.8px;color:#b29b80}
#cq-cbox .cq-cceq>span,#cq-cbox .cq-ccsk>span{width:100%}
#cq-cbox .cq-cceq i{font-style:normal;padding:0 2px;color:#efe5d2;background:#120c0a;border:1px solid #6d533d;border-radius:2px}
#cq-cbox .cq-ccsk img{width:10px;height:10px}
#cq-cbox .cq-ccnote{flex:none;margin-top:3px;font-size:5.2px;color:#b29b80}
#cq-cbox .cq-ccr{display:flex;flex-direction:column;min-height:0}
#cq-cbox .cq-ccsel{flex:1}
#cq-cbox .cq-ccsub{font-size:5.4px;color:#b29b80;margin:2px 0 1px;padding-left:3px;border-left:2px solid #a8843f}
#cq-cbox .cq-ccjob{display:flex;align-items:center;gap:5px;min-height:30px;padding:2px 4px;background:#120c0a99;border:1px solid #6d533d77;border-radius:2px}
#cq-cbox .cq-ccjob b{display:block;font-size:7.6px;color:#ffe9b0}
#cq-cbox .cq-ccjob small{display:block;font-size:5.2px;color:#b29b80}
#cq-cbox .cq-ccjimg{flex:none;width:30px;height:28px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
#cq-cbox .cq-ccjimg img{image-rendering:pixelated;image-rendering:crisp-edges;max-width:30px;max-height:28px}
#cq-cbox .cq-ccto.cq-on{border-color:#e5bd70}
#cq-cbox .cq-ccto.cq-on b{color:#ffd978}
#cq-cbox .cq-ccarrow{height:9px;margin:2px 0 0;background:linear-gradient(135deg,transparent 50%,#e5bd70 50%) center top / 7px 7px no-repeat;transform:rotate(45deg) scale(.7)}
#cq-cbox .cq-ccwarn{margin:4px 0 0;font-size:5.4px;line-height:7px}
#cq-cbox .cq-ccbtns{display:flex;gap:3px;margin-top:auto;padding-top:3px}
.cq-body #cq-cbox .cq-ccbtns .cq-btn{--bs:.32;flex:1;min-width:0;width:auto;padding:0 4px;font-size:6px}
#cq-cbox .cq-skl .cq-skbox:has(.cq-skempty){flex:none}
#cq-cbox .cq-eqrow .cq-eqd,#cq-cbox .cq-eqs2 .cq-eqd{text-align:left}
#cq-cbox .cq-eqhead span:nth-child(-n+4){text-align:left}
/* character tabs: the shared "primary button = 120 wide" rule does not apply inside these small groups */
.cq-body #cq-cbox .cq-ccbtns .cq-btn{flex:1 1 0 !important;width:auto !important;min-width:0 !important}
.cq-body #cq-cbox .cq-eqprev .cq-btn.cq-pri{width:74px !important;min-width:0 !important}
.cq-body #cq-cbox .cq-skres .cq-btn.cq-pri{width:100% !important;min-width:0 !important}
.cq-body #cq-cbox .cq-stbtns .cq-btn.cq-pri{width:76px !important;min-width:0 !important}
.cq-body #cq-cbox .cq-eqbtns .cq-btn{min-width:0 !important}

/* ===== bag (view/items.php, reference mock-up 2026-10-20): left = tools + slot grid, right = item details ===== */
.cq-body #cq-ibox .cq-inv-in{flex-direction:row;gap:6px;font-size:6px;color:#efe5d2}
#cq-ibox .cq-invl{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
#cq-ibox .cq-invtool{flex:none;display:flex;align-items:center;gap:5px;margin:0 0 3px}
#cq-ibox .cq-invtool .cq-ssearch{position:relative;flex:1;min-width:0;height:15px;margin:0}
#cq-ibox .cq-invtool .cq-ssearch .cq-in{box-sizing:border-box;width:100%;height:15px;padding:0 4px 0 16px;font-size:6px;background:#0b0d10cc;border:1px solid #79613c;border-radius:2px;color:#f2e5ce}
#cq-ibox .cq-invtool .cq-ssearch-ic{position:absolute;left:3px;top:2.5px;width:10px;height:10px;background:url(../img/gui_symbol_search.png) center / contain no-repeat;pointer-events:none}
#cq-ibox .cq-invtool .cq-fsel{flex:none;width:72px}
#cq-ibox .cq-inv-cnt{flex:none;margin:0 2px 0 4px;font-size:6px;color:#d5bf99}
#cq-ibox .cq-inv-cnt b{color:#ffd978}
#cq-ibox #cq-scats{flex:none;gap:2px;margin:0 0 3px}
.cq-body #cq-ibox .cq-inv-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(10,38px);grid-auto-rows:44px;gap:1px;justify-content:start;align-content:start;overflow-y:auto;overflow-x:hidden;padding:1px;scrollbar-gutter:stable}
.cq-body #cq-ibox .cq-slot{position:relative;box-sizing:border-box;width:38px;height:44px;display:flex;flex-direction:column;align-items:center;padding:3px 1px 0;background:linear-gradient(#2a1d16,#17100c);border:1px solid #4a3628;border-radius:2px;box-shadow:inset 0 0 0 1px #0b0706aa}
.cq-body #cq-ibox .cq-slot:not(.cq-empty){cursor:pointer;border-color:#6d533d}
.cq-body #cq-ibox .cq-slot:not(.cq-empty):hover{border-color:#b99c5b;background:linear-gradient(#3a2a1d,#1e150f)}
.cq-body #cq-ibox .cq-slot.cq-on,.cq-body #cq-ibox .cq-slot:focus{outline:none;border-color:#ffd978;box-shadow:inset 0 0 0 1px #ffd97866,0 0 4px #ffb84a88;background:linear-gradient(#4a3420,#24180f)}
.cq-body #cq-ibox .cq-empty{opacity:.45}
#cq-ibox .cq-sico{position:relative;flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#3a2a1e,#120c0a 75%);border-radius:2px}
.cq-body #cq-ibox .cq-sico img{position:static;width:24px;height:24px;margin:0}
.cq-body #cq-ibox .cq-sref{position:absolute;left:-1px;top:-2px;font-size:5.4px;font-style:normal;font-weight:700;color:#ffe9a8;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.cq-body #cq-ibox .cq-scnt{position:absolute;right:-2px;bottom:-2px;font-size:5.6px;font-weight:700;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
#cq-ibox .cq-snm{display:block;width:100%;margin-top:2px;font-size:4.8px;line-height:6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e8d8b8}
#cq-ibox .cq-invhint{flex:none;margin-top:3px;font-size:5.4px;color:#b29b80}
#cq-ibox .cq-invhint i{display:inline-block;width:7px;height:7px;line-height:7px;text-align:center;font-style:normal;font-weight:700;font-size:5px;color:#1a120f;background:#b29b80;border-radius:50%}
/* details */
#cq-ibox .cq-invr{flex:0 0 160px;display:flex;flex-direction:column;min-height:0;padding:3px 6px 5px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px}
#cq-ibox .cq-skbh{flex:none;height:11px;margin:0 0 3px;font-size:6.8px;font-weight:700;color:#ffd978}
#cq-ibox .cq-invdet{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#cq-ibox .cq-idnone{padding:10px 2px;font-size:5.8px;text-align:center}
#cq-ibox .cq-idtop{display:flex;gap:5px;padding-bottom:4px;border-bottom:1px solid #6d533d77}
#cq-ibox .cq-idbig{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#4a3424,#120c0a 75%);border:1px solid #c4a366;border-radius:3px}
#cq-ibox .cq-idbig img{width:32px;height:32px;image-rendering:pixelated;image-rendering:crisp-edges}
#cq-ibox .cq-idhd{min-width:0}
#cq-ibox .cq-idname{display:block;font-size:8px;line-height:10px;color:#ffd978}
#cq-ibox .cq-idtype,#cq-ibox .cq-idamt{font-size:5.6px;line-height:8px;color:#d5bf99}
#cq-ibox .cq-idamt b{color:#efe5d2}
#cq-ibox .cq-idrows{padding:2px 0}
#cq-ibox .cq-idr{display:flex;justify-content:space-between;gap:4px;padding:1px 1px;font-size:6px;line-height:8px;border-bottom:1px solid #6d533d33}
#cq-ibox .cq-idr b{color:#efe5d2;text-align:right}
#cq-ibox .cq-idopt b{font-weight:400;font-size:5.4px;color:#c9b8ff}
#cq-ibox .cq-idsub{margin-top:3px;font-size:6px;font-weight:700;color:#ffd978}
#cq-ibox .cq-iddesc{flex:1;min-height:0;overflow:hidden;margin-top:2px;padding:2px 3px;font-size:5.8px;line-height:8px;background:#120c0a99;border:1px solid #6d533d55;border-radius:2px}
#cq-ibox .cq-idprice{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:6px;color:#d5bf99}
#cq-ibox .cq-idprice b{margin-left:auto;font-size:7.4px;color:#ffd978}
#cq-ibox .cq-idnote{font-size:5px;color:#b29b80}

/* ===== battle stage (js/stage.js, reference mock-up 2026-10-20): framed field with team ribbons and a skill plaque,
   bottom = enemy panel | battle log | party panel, bottom bar = playback controls ===== */
.cq-body #cq-bs{background:radial-gradient(ellipse at 50% 30%,#2a1d14,#0e0907 80%)}
.cq-body #cq-bf{left:78px;top:5px;width:480px;height:200px;border:2px solid #c9a35c;border-radius:2px;box-shadow:0 0 0 1px #3b2a18,0 0 0 3px #7a5a2e,0 4px 10px #000c}
.cq-body #cq-bf:before,.cq-body #cq-bf:after{content:"";position:absolute;top:-1px;width:10px;height:10px;border-top:2px solid #ffd978;z-index:5;pointer-events:none}
.cq-body #cq-bf:before{left:-1px;border-left:2px solid #ffd978}
.cq-body #cq-bf:after{right:-1px;border-right:2px solid #ffd978}
/* team ribbons */
.cq-body .cq-bnm{top:4px;max-width:170px;height:13px;line-height:13px;padding:0 8px;font-size:6.6px;color:#fff3dc;text-shadow:0 1px 0 #000}
.cq-body .cq-bnm.cq-l{left:0;padding-left:6px;background:linear-gradient(90deg,#7a1e1ae6,#7a1e1a99 70%,transparent);border-left:3px solid #c9a35c}
.cq-body .cq-bnm.cq-r{right:0;padding-right:6px;text-align:right;background:linear-gradient(270deg,#1d3f7ae6,#1d3f7a99 70%,transparent);border-right:3px solid #c9a35c}
/* skill plaque */
.cq-body #cq-bban{top:4px}
.cq-body #cq-bban b{display:inline-flex;align-items:center;gap:3px;height:13px;padding:0 14px;font-size:7px;line-height:13px;color:#ffe9b0;background:linear-gradient(#2a1d14f2,#120c0af2);border:1px solid #c9a35c;border-radius:2px;box-shadow:0 0 0 1px #000a,0 2px 6px #000c}
.cq-body #cq-bban b img{width:11px;height:11px;margin:0}
/* bottom panels */
.cq-body .cq-bpnl,.cq-body #cq-blogbox{position:absolute;top:210px;height:94px;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(#24190fee,#140d09ee);border:1px solid #8a6b3d;border-radius:2px;box-shadow:inset 0 0 0 1px #0007}
.cq-body .cq-bpl{left:4px;width:172px}
.cq-body .cq-bpr{right:4px;width:172px}
.cq-body #cq-blogbox{left:181px;width:278px}
.cq-body .cq-bph{flex:none;height:12px;padding:0 5px;line-height:12px;font-size:6.6px;font-weight:700;color:#ffd978;border-bottom:1px solid #6d533d}
.cq-body .cq-bpl .cq-bph{background:linear-gradient(90deg,#5a1814aa,transparent)}
.cq-body .cq-bpr .cq-bph{background:linear-gradient(90deg,#1d3f7aaa,transparent);color:#e8f0ff}
.cq-body .cq-bpls{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
.cq-body .cq-bpu{display:grid;grid-template-columns:15px minmax(0,1fr) 9px 52px 40px;grid-template-rows:6.5px 6.5px;column-gap:3px;align-items:center;height:auto;padding:1.5px 3px;line-height:6.5px;border-bottom:1px solid #6d533d44}
.cq-body .cq-bpi{grid-row:1 / 3;width:15px;height:13px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.cq-body .cq-bpi img{max-width:15px;max-height:13px;image-rendering:pixelated;image-rendering:crisp-edges}
.cq-body .cq-bpn{grid-row:1 / 3;max-width:none;font-size:5.8px;color:#efe5d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-body .cq-bpk{font-size:4.6px;color:#b29b80}
.cq-body .cq-bpb{position:static;height:3px;background:#0b0806;border:1px solid #4a3628;border-radius:2px;overflow:hidden}
.cq-body .cq-bpb i{transition:width .3s}
.cq-body .cq-bpb.cq-sp i{background:#4aa8ff}
.cq-body .cq-bpv{position:static;font-size:4.8px;color:#d5bf99;text-align:right;white-space:nowrap}
.cq-body .cq-bpu.cq-dead{opacity:.45;filter:grayscale(1)}
/* log */
.cq-body #cq-blogw{position:static;flex:1;min-height:0;width:auto;height:auto;padding:2px 6px;border:0;background:none;font-size:6px;line-height:9px}
.cq-body .cq-bl{color:#efe5d2}
.cq-body .cq-bls{margin-top:3px;font-weight:700;color:#ffd978}
.cq-body .cq-bls.cq-ble{color:#ff9a7a}
.cq-body .cq-bld{color:#ffb0a6}
.cq-body .cq-blh{color:#9be6a6}
/* playback controls in the bottom bar */
.cq-body #cq-bar.cq-battle .cq-bgrp{display:flex;align-items:center;justify-content:center;width:100%;position:relative}
.cq-body #cq-bar.cq-battle #cq-bplay,.cq-body #cq-bar.cq-battle #cq-bdone{display:flex;align-items:center;gap:3px}
.cq-body #cq-bar.cq-battle #cq-bplay[style*="none"],.cq-body #cq-bar.cq-battle #cq-bdone[style*="none"]{display:none !important}
.cq-body #cq-bar.cq-battle .cq-bgrp .cq-btn{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;width:46px;min-width:0;height:17px;margin:0;padding:0;border:0;border-radius:0;
  background:url(../img/gui_button_category.png) center / 100% 100% no-repeat;font-size:6.4px;line-height:17px;color:#e8d8b8;text-decoration:none;filter:none}
.cq-body #cq-bar.cq-battle .cq-bgrp .cq-btn:after{display:none}
.cq-body #cq-bar.cq-battle .cq-bgrp .cq-bsp{width:32px}
.cq-body #cq-bar.cq-battle .cq-bgrp .cq-btn:hover{filter:brightness(1.25);color:#fff3d2;background:url(../img/gui_button_category.png) center / 100% 100% no-repeat}
.cq-body #cq-bar.cq-battle .cq-bgrp .cq-btn[aria-pressed=true]{filter:brightness(1.35);color:#ffd978}
.cq-body #cq-bar.cq-battle .cq-bgrp .cq-btn.cq-pri{color:#ffd978;filter:brightness(1.2)}
.cq-body #cq-bar.cq-battle .cq-bkeys{position:absolute;right:10px;font-size:5.4px;color:#b29b80}
/* result window */
.cq-body #cq-bres{left:170px;top:40px;width:300px}
/* battle: bottom panels fit between the field (ends ~209) and the bottom bar (starts 291 in the stage) */
.cq-body .cq-bpnl,.cq-body #cq-blogbox{top:212px;height:76px}
.cq-body .cq-bph{height:11px;line-height:11px;font-size:6.2px}
.cq-body .cq-bpu{grid-template-rows:5.5px 5.5px;padding:.8px 3px;line-height:5.5px}
.cq-body .cq-bpn{font-size:5.6px}
.cq-body .cq-bpv{font-size:4.6px}
.cq-body .cq-bpi,.cq-body .cq-bpi img{max-height:11px;height:11px}
.cq-body .cq-bpls{scrollbar-width:thin;scrollbar-color:#8a6b3d #120c0a}
.cq-body #cq-blogw{font-size:5.8px;line-height:8.5px}
.cq-body .cq-bvd{color:#ff6b5e;font-size:6.6px}
.cq-body .cq-bvh{color:#7fe08a;font-size:6.6px}
.cq-body .cq-bft{font-size:5.2px;color:#b29b80}
.cq-body .cq-bld{color:#efe5d2}
.cq-body .cq-bldead{color:#ff9a8a}
.cq-body .cq-bpl,.cq-body .cq-bpr{width:190px}
.cq-body #cq-blogbox{left:198px;width:244px}
.cq-body .cq-bpu{grid-template-columns:13px minmax(0,1fr) 8px 40px 36px}

/* battle result window: same frame as the other windows */
.cq-body #cq-bres{position:absolute;left:50%;top:44%;width:280px;height:auto;transform:translate(-50%,-50%);z-index:6;cursor:pointer;color:#efe5d2}
.cq-body #cq-bres:not(.cq-show){display:none}
.cq-body #cq-bres .cq-bresb{display:flex;gap:8px;padding:2px}
.cq-body #cq-bres .cq-bresc{flex:1;min-width:0;padding:3px 6px;font-size:6px;line-height:9px;background:#120c0a99;border:1px solid #6d533d77;border-radius:2px}
.cq-body #cq-bres .cq-bresc b{display:block;margin:0 0 2px;padding-bottom:2px;font-size:7px;color:#ffd978;border-bottom:1px solid #6d533d77}
.cq-body #cq-bres .cq-bresc+.cq-bresc b{color:#9fc8ff}
.cq-body #cq-bres .cq-bresc div{border-bottom:1px solid #6d533d33}
.cq-body #cq-bres .cq-bresh{padding:4px 2px 0;text-align:center;font-size:5.4px;color:#b29b80}/* guard: the defender steps in front of the target */
.cq-body .cq-bnum.cq-g{color:#9be66a;font-size:7.4px}
.cq-body .cq-bu.cq-guardfx{filter:drop-shadow(0 0 3px #77ff00)}
.cq-body .cq-blg{color:#9be66a}
/* skill plaque: appears at once (opaque), fades out when its time is up */
.cq-body #cq-bban{opacity:0;transition:opacity .35s ease-in;animation:none}
.cq-body #cq-bban.cq-bshow{opacity:1;transition:none;animation:none}
/* ===== field map list (view/hunt.php): maps = 2 columns of cards (icon, name, level, description), union = tile cards ===== */
.cq-body #cq-hbox .cq-hcol{font-size:6px;color:#efe5d2}
.cq-body #cq-hbox .cq-boxh{height:11px;margin:0 0 3px;font-size:6.8px;color:#ffd978}
.cq-body #cq-hbox .cq-hmaps{left:8px;width:366px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min-content;gap:3px;align-content:start;padding-right:3px}
.cq-body #cq-hbox .cq-hmaps>.cq-boxh,.cq-body #cq-hbox .cq-hmaps>.cq-mut{grid-column:1 / -1}
.cq-body #cq-hbox .cq-map{box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;column-gap:5px;align-items:center;height:auto;min-height:36px;margin:0;padding:3px 5px;background:linear-gradient(#2a1d16,#17100c);border:1px solid #6d533d;border-radius:2px}
.cq-body #cq-hbox .cq-map:hover{border-color:#ffd978;background:linear-gradient(#3a2a1d,#1e150f)}
.cq-body #cq-hbox .cq-map img{grid-row:1 / 3;width:24px;height:24px;margin:0;align-self:start}
.cq-body #cq-hbox .cq-mhd{display:flex;align-items:baseline;justify-content:space-between;gap:4px;min-width:0}
.cq-body #cq-hbox .cq-map b{width:auto;min-width:0;font-size:6.8px;color:#ffe9b0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-body #cq-hbox .cq-mp{flex:none;width:auto;padding:0 3px;font-size:5.2px;line-height:7px;color:#ff9a8a;border:1px solid #8a4a40;border-radius:2px;white-space:nowrap}
.cq-body #cq-hbox .cq-me{display:block;margin-top:1px;font-size:5.4px;line-height:7.4px;color:#b29b80;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* union monsters: tile + monster standing on it (bottom centre = pivot, picture at half its game-px size) */
.cq-body #cq-hbox .cq-hunion{left:384px;right:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min-content;gap:3px;align-content:start;padding-right:3px}
.cq-body #cq-hbox .cq-hunion>.cq-boxh,.cq-body #cq-hbox .cq-hunion>.cq-sm,.cq-body #cq-hbox .cq-hunion>.cq-mut,.cq-body #cq-hbox .cq-hunion>.cq-row{grid-column:1 / -1}
.cq-body #cq-hbox .cq-un{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;min-height:0;margin:0;padding:3px 2px 4px;background:radial-gradient(ellipse at 50% 70%,#3a2a1e,#120c0a 80%);border:1px solid #6d533d;border-radius:2px}
.cq-body #cq-hbox .cq-un:hover{border-color:#ffd978}
.cq-body #cq-hbox .cq-unf{position:relative;flex:none;width:100%;height:78px}
.cq-body #cq-hbox .cq-unt{position:absolute;left:50%;bottom:0;width:61px;height:27px;margin-left:-30.5px;background:center / 100% 100% no-repeat}
.cq-body #cq-hbox .cq-un .cq-unf img{position:absolute;left:50%;bottom:13px;margin:0;max-width:none;transform:translateX(-50%);image-rendering:pixelated;image-rendering:crisp-edges}
.cq-body #cq-hbox .cq-un-t{margin:2px 0 0;align-self:stretch;text-align:center;font-size:6px}
.cq-body #cq-hbox .cq-un-t b{display:block;font-size:6.4px;color:#ff9a8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-body #cq-hbox .cq-un-t i{font-size:5.4px;color:#b29b80}
.cq-body #cq-hbox .cq-hunion .cq-row{margin-top:2px}
.cq-body #cq-hbox .cq-map .cq-me{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;max-height:15px}
/* ===== union monster screen (view/union.php): monster | challenging party / my characters ===== */
.cq-body #cq-mbox.cq-ubox .cq-uform{position:absolute;left:8px;right:8px;top:26px;bottom:6px;display:grid;grid-template-columns:154px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:4px;font-size:6px;color:#efe5d2}
.cq-ubox .cq-umon,.cq-ubox .cq-upty,.cq-ubox .cq-ubench{min-height:0;padding:3px 5px 4px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px}
.cq-ubox .cq-skbh{display:flex;align-items:center;justify-content:space-between;height:11px;margin:0 0 3px;font-size:6.8px;font-weight:700;color:#ffd978}
.cq-ubox .cq-skbh i{font-style:normal;font-weight:400;font-size:5.6px;color:#b29b80;margin-left:3px;margin-right:auto}
.cq-ubox .cq-umon{display:flex;flex-direction:column;align-items:center}
.cq-ubox .cq-umon .cq-skbh{align-self:stretch}
.cq-ubox .cq-umf{position:relative;width:100%;height:70px;flex:none}
.cq-ubox .cq-umf .cq-unt{position:absolute;left:50%;bottom:0;width:61px;height:27px;margin-left:-30.5px;background:center / 100% 100% no-repeat}
.cq-ubox .cq-umf img{position:absolute;left:50%;bottom:13px;max-width:none;transform:translateX(-50%);image-rendering:pixelated;image-rendering:crisp-edges}
.cq-ubox .cq-uname{margin-top:2px;font-size:8.4px;font-weight:700;color:#ff9a8a;text-align:center}
.cq-ubox .cq-ulim{font-size:5.8px;color:#d5bf99}
.cq-ubox .cq-ulim b{color:#ffd978;font-size:7px}
.cq-ubox .cq-ubars{align-self:stretch;margin-top:3px}
.cq-ubox .cq-ubar{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:3px;height:8px;font-size:5px}
.cq-ubox .cq-ubar span{color:#b29b80}
.cq-ubox .cq-ubar i{display:block;height:4px;background:#0b0806;border:1px solid #4a3628;border-radius:3px;overflow:hidden}
.cq-ubox .cq-ubar u{display:block;height:100%;background:linear-gradient(#8ff09a,#3fae4f)}
.cq-ubox .cq-ubar.cq-sp u{background:#4aa8ff}
.cq-ubox .cq-ubar b{font-weight:400;color:#efe5d2}
.cq-ubox .cq-ust{align-self:stretch;display:flex;flex-wrap:wrap;gap:1px 6px;margin-top:3px;font-size:5.4px;color:#efe5d2}
.cq-ubox .cq-ust i{font-style:normal;color:#b29b80}
/* party */
.cq-ubox .cq-upty{display:flex;flex-direction:column}
.cq-ubox .cq-uinfo{display:flex;gap:8px;margin-left:auto;font-size:5.8px;font-weight:400;color:#d5bf99}
.cq-ubox .cq-uinfo b{color:#ffd978;font-size:6.8px}
.cq-ubox .cq-uc2.cq-over b,.cq-ubox .cq-uc2.cq-over{color:#ff7a6a}
.cq-ubox .cq-uc2.cq-ok b{color:#7fe08a}
.cq-ubox .cq-uslots{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,50px);grid-auto-rows:59px;gap:3px;justify-content:center;align-content:center}
.cq-ubox .cq-uph{box-sizing:border-box;width:50px;height:59px;display:flex;align-items:center;justify-content:center;border:1px dashed #6d533d;border-radius:3px;background:#120c0a66;color:#6d533d;font-size:9px}
.cq-ubox .cq-uact{flex:none;display:flex;align-items:center;gap:6px;margin-top:3px;font-size:5.8px;color:#d5bf99}
.cq-ubox .cq-uap{margin-right:auto}
.cq-ubox .cq-uap b{color:#efe5d2}
.cq-ubox .cq-umem{display:inline-flex;align-items:center;gap:2px}
.cq-body #cq-mbox.cq-ubox .cq-uact .cq-btn{--bs:.34;min-width:0;width:auto;padding:0 8px;font-size:6px}
.cq-body #cq-mbox.cq-ubox .cq-uact .cq-btn.cq-pri{width:76px !important}
/* my characters */
.cq-ubox .cq-ubench{grid-column:1 / -1;display:flex;flex-direction:column}
.cq-ubox .cq-uhint{margin-left:auto;font-size:5.2px;font-weight:400;color:#b29b80}
.cq-ubox .cq-uchars{flex:1;min-height:0;display:grid;grid-template-columns:repeat(11,50px);grid-auto-rows:59px;gap:1px;justify-content:start;align-content:start;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
/* a character slot (same picture as the party screen) */
.cq-body .cq-ubox .cq-uc{position:relative;box-sizing:border-box;width:50px;height:59px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 3px 4px;background:url(../img/gui_window_character.png) center / 100% 100% no-repeat;text-align:center;cursor:pointer;color:#efe5d2}
.cq-body .cq-ubox .cq-uc input{position:absolute;opacity:0;pointer-events:none}
.cq-body .cq-ubox .cq-uc:hover,.cq-body .cq-ubox .cq-uc:focus{filter:brightness(1.25);outline:none}
.cq-body .cq-ubox .cq-ucimg{flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.cq-body .cq-ubox .cq-ucimg img{flex:none;image-rendering:pixelated;image-rendering:crisp-edges}
.cq-body .cq-ubox .cq-ucn{flex:none;max-width:100%;margin-top:1px;font-size:5.4px;line-height:7px;color:#ffe9b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-body .cq-ubox .cq-ucl{flex:none;font-style:normal;font-size:5px;line-height:6px;color:#d5bf99}
.cq-body .cq-ubox .cq-uchars.cq-full .cq-uc{filter:grayscale(1) brightness(.55);cursor:not-allowed}
.cq-body .cq-ubox .cq-uchars.cq-full .cq-uc:hover{filter:grayscale(1) brightness(.55)}
.cq-body .cq-ubox .cq-uslots .cq-uc.cq-uin{filter:none}
.cq-ubox .cq-uchars{grid-template-columns:repeat(10,50px)}
/* battle log list: compact rows, category-style buttons, more rows on one screen */
.cq-body #cq-lbox .cq-ltabs{top:25px}
.cq-body #cq-lbox .cq-ltabs .cq-btn{box-sizing:border-box;width:43px;min-width:0;height:15px;min-height:0;padding:0;margin:0 3px 0 0;border:0;border-radius:0;background:url(../img/gui_button_category.png) center / 100% 100% no-repeat;font-size:6px;line-height:15px;text-align:center;white-space:nowrap;color:#e8d8b8}
.cq-body #cq-lbox .cq-ltabs .cq-btn:before,.cq-body #cq-lbox .cq-ltabs .cq-btn:after{display:none}
.cq-body #cq-lbox .cq-ltabs .cq-btn.cq-on{color:#ffd978;filter:brightness(1.25)}
.cq-body #cq-lbox .cq-llist{top:44px;bottom:6px;padding:2px 4px;font-size:6px}
.cq-body #cq-lbox .cq-lcap{display:none}
.cq-body #cq-lbox .cq-boxh{height:11px;margin:3px 0 1px;font-size:6.6px;line-height:11px}
.cq-body #cq-lbox .cq-lr{height:13px;padding:0 4px;font-size:6px;line-height:13px}
.cq-body #cq-lbox .cq-ld{width:78px}
.cq-body #cq-lbox .cq-lt{width:34px;margin-right:8px}
.cq-body #cq-lbox .cq-lteam i{font-size:5.4px}
.cq-body #cq-lbox .cq-lvs{width:20px;font-size:5.6px}
/* full battle log (js/stage.js buildFull): team cards on top, then every action as a numbered entry */
.cq-body #cq-flog{position:absolute;left:4px;right:4px;top:3px;bottom:3px;z-index:8;display:flex;flex-direction:column;padding:4px 6px 5px;background:linear-gradient(#241a12,#130d09);border:1px solid #8a6b3d;border-radius:2px;box-shadow:0 0 0 1px #000a,inset 0 0 0 1px #0007;color:#efe5d2;font-size:6px}
.cq-body #cq-flog[style*="display: none"]{display:none !important}
.cq-fl-top{flex:none;display:flex;align-items:baseline;gap:8px;height:12px;margin-bottom:3px;border-bottom:1px solid #6d533d;padding-bottom:2px}
.cq-fl-t{font-size:7.8px;color:#ffd978}
.cq-fl-when{font-size:5.6px;color:#b29b80}
.cq-fl-res{margin-left:auto;font-size:6.6px;font-weight:700;color:#ffe9b0}
.cq-fl-teams{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:3px}
.cq-fl-team{display:flex;align-items:baseline;gap:8px;height:15px;padding:0 6px;line-height:15px;border-radius:2px;border:1px solid #6d533d}
.cq-fl-e{background:linear-gradient(90deg,#5a1814aa,#1a120f)}
.cq-fl-m{background:linear-gradient(90deg,#1d3f7aaa,#1a120f)}
.cq-fl-team b{font-size:7px;color:#fff3dc}
.cq-fl-team span{font-size:5.6px;color:#d5bf99}
.cq-fl-team i{font-style:normal;color:#b29b80}
.cq-fl-list{flex:1;min-height:0;overflow-y:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a;background:#0f0a08aa;border:1px solid #4a3628;border-radius:2px}
.cq-fl-sk{display:flex;align-items:center;gap:4px;height:12px;margin-top:2px;padding:0 4px;font-size:6.4px;background:linear-gradient(90deg,#3a2a1d,transparent);border-top:1px solid #6d533d55}
.cq-fl-sk i,.cq-fl-l i{flex:none;display:inline-block;min-width:11px;margin-right:3px;font-style:normal;font-size:5px;color:#b29b80;text-align:right}
.cq-fl-sk img{width:9px;height:9px}
.cq-fl-sk b{color:#ffe9b0}
.cq-fl-sk span{color:#ffd978}
.cq-fl-s0 b{color:#ff9a7a}
.cq-fl-s1 b{color:#9fc8ff}
.cq-fl-l{padding:0 4px 0 20px;line-height:9px;font-size:6px;color:#efe5d2}
.cq-fl-l i{margin-left:-17px}
.cq-fl-l b{font-size:6.8px}
.cq-fl-d b{color:#ff6b5e}
.cq-fl-h b{color:#7fe08a}
.cq-fl-l small{font-size:5.2px;color:#b29b80}
.cq-fl-g{color:#9be66a}
.cq-fl-x{color:#ff9a8a;font-weight:700}
.cq-fl-n{color:#b29b80}
.cq-body #cq-flog{bottom:20px}
.cq-fl-c b{color:#ffb36a}
/* full log: left / right split (first team left, second team right), in the order things happened; a TURN marker between turns */
.cq-fl-list{display:block;padding:0 3px 2px 0}
.cq-fl-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;padding:1px 3px}
.cq-fl-blk{min-width:0;padding:1px 0 2px;background:#1a120fcc;border-radius:2px}
.cq-fl-b0{border-left:2px solid #c0554a}
.cq-fl-b1{border-right:2px solid #4a7ac0}
.cq-fl-b1 .cq-fl-sk{flex-direction:row}
.cq-fl-turn{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:6px;height:11px;margin:2px 0;font-size:5.4px;color:#b29b80}
.cq-fl-turn span{height:1px;background:linear-gradient(90deg,transparent,#6d533d)}
.cq-fl-turn span:last-child{background:linear-gradient(270deg,transparent,#6d533d)}
.cq-fl-turn b{font-size:5.8px;letter-spacing:.5px;color:#ffd978}
.cq-fl-turn em{font-style:normal;color:#ff9a7a}
.cq-fl-turn em.cq-r{color:#9fc8ff}
.cq-fl-sk{margin-top:0;background:linear-gradient(90deg,#3a2a1d,transparent);border-top:0}
.cq-fl-b1 .cq-fl-sk{background:linear-gradient(270deg,#3a2a1d,transparent)}
.cq-fl-b1 .cq-fl-l{text-align:right;padding:0 20px 0 4px}
.cq-fl-b1 .cq-fl-l i{display:none}
.cq-fl-b1 .cq-fl-sk{justify-content:flex-end}
.cq-fl-b1 .cq-fl-sk i{order:5;margin:0 0 0 3px}
/* both columns read left to right (like the old two-column log); the team is told by the colour bar */
.cq-fl-b1{border-right:0;border-left:2px solid #4a7ac0}
.cq-fl-b1 .cq-fl-l{text-align:left;padding:0 4px 0 20px}
.cq-fl-b1 .cq-fl-l i{display:inline-block}
.cq-fl-b1 .cq-fl-sk{justify-content:flex-start;background:linear-gradient(90deg,#3a2a1d,transparent)}
.cq-fl-b1 .cq-fl-sk i{order:0;margin:0 3px 0 0}
/* bag details: options as a list, the description box only when there is a description */
#cq-ibox .cq-idopts{list-style:none;margin:2px 0 0;padding:0}
#cq-ibox .cq-idopts li{position:relative;margin:0;padding:1px 3px 1px 8px;font-size:6px;line-height:8px;color:#c9b8ff;border-bottom:1px solid #6d533d33}
#cq-ibox .cq-idopts li:before{content:"";position:absolute;left:2px;top:4px;width:3px;height:3px;background:#c9b8ff;transform:rotate(45deg)}
#cq-ibox .cq-iddesc{flex:none}
#cq-ibox .cq-idprice{margin-top:auto}
/* defence = "rate % . flat": the dot keeps the two numbers apart */
.cq-dsep{margin:0 2px;color:#b29b80;font-weight:400}
/* ===== options window: centred, the rest of the screen dimmed ===== */
.cq-body #cq-optdim{display:none;position:absolute;left:0;top:0;right:0;bottom:0;z-index:49;background:#000b}
.cq-body #cq-opt.cq-show+#cq-optdim{display:block}
.cq-body #cq-opt{left:50%;top:50%;width:300px;height:auto;transform:translate(-50%,-50%);color:#efe5d2;font-size:6.2px}
.cq-body #cq-opt:not(.cq-show){display:none}
.cq-body #cq-opt .cq-bd{position:static;display:flex;flex-direction:column;gap:0;padding:2px 4px 0}
.cq-body #cq-opt .cq-row{display:flex;align-items:center;gap:6px;min-height:23px;margin:0;padding:3px 0;border-bottom:1px solid #6d533d55}
.cq-body #cq-opt .cq-row:last-child{border-bottom:0}
.cq-body #cq-opt .cq-row>*{margin-right:0}
.cq-body #cq-opt .cq-lbl{flex:none;width:56px;font-size:6.2px;font-weight:700;color:#ffd978}
.cq-body #cq-opt #cq-optinfo{margin:-2px 0 2px 62px;font-size:5px;color:#b29b80;border:0}
.cq-body #cq-opt .cq-row form{margin:0}
/* link / action buttons: the category picture, fixed 62 x 15 */
.cq-body #cq-opt .cq-row a.cq-btn,.cq-body #cq-opt .cq-row input.cq-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:62px;min-width:0;height:15px;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:url(../img/gui_button_category.png) center / 100% 100% no-repeat;font-size:5.8px;line-height:15px;color:#e8d8b8;text-decoration:none;white-space:nowrap;cursor:pointer}
.cq-body #cq-opt .cq-row a.cq-btn:before,.cq-body #cq-opt .cq-row a.cq-btn:after{display:none}
.cq-body #cq-opt .cq-row a.cq-btn:hover,.cq-body #cq-opt .cq-row input.cq-btn:hover{filter:brightness(1.25);color:#fff3d2}
/* choices (screen size, battle mode): radio boxes, the chosen one is checked */
.cq-body #cq-opt .cq-orad{box-sizing:border-box;display:inline-flex;align-items:center;gap:3px;width:auto;min-width:0;height:15px;min-height:0;padding:0 7px 0 0;margin:0;border:0;border-radius:0;background:none;filter:none;font-size:6px;line-height:15px;color:#d5bf99;white-space:nowrap;cursor:pointer}
.cq-body #cq-opt .cq-orad:before{content:"";display:block !important;flex:none;width:11px;height:11px;background:url(../img/gui_radio_box.png) center / contain no-repeat}
.cq-body #cq-opt .cq-orad:after{display:none}
.cq-body #cq-opt .cq-orad[aria-pressed=true]:before{background-image:url(../img/gui_radio_box_check.png)}
.cq-body #cq-opt .cq-orad[aria-pressed=true]{color:#ffd978;filter:none}
.cq-body #cq-opt .cq-orad:hover{color:#fff3d2;filter:none}
.cq-body #cq-opt .cq-optf{display:flex;justify-content:flex-end;padding:4px 4px 0}
.cq-body #cq-opt .cq-optf .cq-cl{position:static;--bs:.36;min-width:0;width:64px;height:auto;margin:0;font-size:6.2px}
.cq-body #cq-opt #cq-optinfo{margin:-3px 0 0 62px;padding:0 0 3px;line-height:7px}
/* ===== account settings (view/setting.php): account + colour palette on the left, data deletion on the right ===== */
.cq-body #cq-setbox .cq-setbd.cq-setgrid{position:absolute;left:8px;right:8px;top:26px;bottom:6px;display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:5px;overflow:hidden;font-size:6px;color:#efe5d2}
#cq-setbox .cq-setl,#cq-setbox .cq-setr{display:flex;flex-direction:column;gap:4px;min-height:0}
#cq-setbox .cq-skbox{display:flex;flex-direction:column;min-height:0;padding:3px 6px 5px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px}
#cq-setbox .cq-skbh{flex:none;height:11px;margin:0 0 3px;font-size:6.8px;font-weight:700;color:#ffd978}
#cq-setbox .cq-setacc{flex-direction:row;align-items:center;gap:14px;flex:none}
#cq-setbox .cq-setacc .cq-skbh{margin:0}
#cq-setbox .cq-setkv{display:flex;gap:6px;align-items:baseline;font-size:6px;color:#b29b80}
#cq-setbox .cq-setkv b{font-size:7.4px;color:#ffe9b0}
#cq-setbox .cq-setcol{flex:1}
#cq-setbox .cq-sethint{margin:0 0 3px;font-size:5.6px;color:#b29b80}
#cq-setbox .cq-colbody{display:flex;gap:8px;align-items:flex-start}
#cq-setbox .cq-pal{flex:none;display:grid;grid-template-columns:repeat(18,10px);grid-auto-rows:10px;gap:1px;padding:2px;background:#0b0806;border:1px solid #4a3628;border-radius:2px}
#cq-setbox .cq-sw{display:block;cursor:pointer}
#cq-setbox .cq-sw:hover{outline:1px solid #fff;outline-offset:-1px;position:relative;z-index:1}
#cq-setbox .cq-sw.cq-sel{outline:2px solid #fff;outline-offset:-1px;box-shadow:0 0 0 1px #000;position:relative;z-index:2}
#cq-setbox .cq-colside{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
#cq-setbox .cq-colbig{width:100%;height:38px;border:1px solid #c4a366;border-radius:3px;box-shadow:inset 0 0 0 1px #0008}
#cq-setbox .cq-colhex{font-size:6.6px;color:#efe5d2;letter-spacing:.5px}
.cq-body #cq-setbox .cq-colside .cq-btn{box-sizing:border-box;width:46px;min-width:0;height:15px;min-height:0;padding:0;border:0;border-radius:0;background:url(../img/gui_button_category.png) center / 100% 100% no-repeat;font-size:5.8px;line-height:15px;color:#e8d8b8}
.cq-body #cq-setbox .cq-colside .cq-btn:before,.cq-body #cq-setbox .cq-colside .cq-btn:after{display:none}
.cq-body #cq-setbox .cq-colside .cq-btn[aria-pressed=true]{filter:brightness(1.3);color:#ffd978}
#cq-setbox .cq-colpv{margin-top:5px;display:flex;align-items:baseline;gap:6px;padding:3px 6px;font-size:7px;background:#120c0a99;border:1px solid #6d533d77;border-radius:2px}
#cq-setbox .cq-colwho{font-size:6px;color:#b29b80}
#cq-setbox .cq-setf{display:flex;justify-content:flex-end;margin-top:auto;padding-top:4px}
.cq-body #cq-setbox .cq-setf .cq-btn{--bs:.34;min-width:0;width:70px;font-size:6.2px}
/* deletion */
#cq-setbox .cq-setdel{flex:1;border-color:#7a3a30;background:linear-gradient(#2a1814ee,#1a0f0cee)}
#cq-setbox .cq-setdel .cq-skbh{color:#ff9a8a}
#cq-setbox .cq-setwarn{font-size:5.8px;line-height:8px;color:#d5bf99}
#cq-setbox .cq-setpw{display:flex;align-items:center;gap:5px;margin:6px 0 4px;font-size:6px;color:#b29b80}
#cq-setbox .cq-setpw .cq-in{flex:1;min-width:0}
#cq-setbox .cq-setdel .cq-warn{font-size:5.4px;line-height:7.4px;color:#ff9a8a}
/* ===== first login (party name + first member): a compact window, characters at 1 picture px = 1 screen px ===== */
.cq-body #cq-fbox{left:50%;top:50%;width:326px;height:auto;transform:translate(-50%,-50%);display:block;color:#efe5d2;font-size:6.2px}
.cq-body #cq-fbox .cq-bd.cq-fl{position:static;display:flex;flex-direction:column;gap:5px;padding:3px 4px 0}
.cq-body #cq-fbox .cq-fl-row{display:grid;grid-template-columns:62px 118px minmax(0,1fr);align-items:center;gap:6px;margin:0}
.cq-body #cq-fbox .cq-fl-row .cq-lbl{width:auto;font-size:6.2px;font-weight:700;color:#ffd978}
.cq-body #cq-fbox .cq-fl-row .cq-w{width:100%}
.cq-body #cq-fbox .cq-fl-row .cq-mut{font-size:5.2px;color:#b29b80}
.cq-body #cq-fbox .cq-fl-pick{margin:2px 0 0;font-size:6.4px;color:#ffe9b0;text-align:center}
.cq-body #cq-fbox .cq-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0}
.cq-body #cq-fbox .cq-card{box-sizing:border-box;width:auto;height:auto;padding:3px 2px 4px;background:linear-gradient(#2a1d16,#17100c);border:1px solid #6d533d;border-radius:3px}
.cq-body #cq-fbox .cq-card.cq-sel{border-color:#ffd978;box-shadow:inset 0 0 0 1px #ffd97866,0 0 4px #ffb84a66;background:linear-gradient(#4a3420,#24180f)}
.cq-body #cq-fbox .cq-card .cq-cn{height:11px;line-height:11px;font-size:6.6px;color:#ffe9b0}
.cq-body #cq-fbox .cq-card .cq-cimg{height:46px;display:flex;align-items:flex-end;justify-content:center}
.cq-body #cq-fbox .cq-card .cq-cimg img{image-rendering:pixelated;image-rendering:crisp-edges}
.cq-body #cq-fbox .cq-card .cq-sx{height:14px;gap:10px}
.cq-body #cq-fbox .cq-card .cq-sx label{display:inline-flex;align-items:center;gap:2px;margin:0;cursor:pointer}
.cq-body #cq-fbox .cq-card .cq-sx input{margin:0;width:10px;height:10px}
.cq-body #cq-fbox .cq-fl-btns{display:flex;justify-content:center;gap:6px;margin:2px 0 0;padding:0 0 2px}
.cq-body #cq-fbox .cq-fl-btns .cq-btn{--bs:.34;width:78px;min-width:0;font-size:6.2px}
.cq-body #cq-fbox .cq-in{height:15px;font-size:6.4px;padding:0 5px}
.cq-body #cq-fbox .cq-err{padding:2px 6px;font-size:6px;color:#ff9a8a;background:#3a1814aa;border:1px solid #7a3a30;border-radius:2px}
/* one-time notice on the title screen (account created / deleted / login failed) */
.cq-body .cq-flash-err{background:#3a1814ee;border-color:#c0554a;color:#ffd0c8}
/* ===== character introduction (view/gamedata.php): family buttons, job list on the left, details on the right ===== */
.cq-body #cq-lbox .cq-gd{position:absolute;left:8px;right:8px;top:25px;bottom:6px;display:flex;flex-direction:column;gap:4px;font-size:6px;color:#efe5d2}
.cq-gd .cq-gdtabs{flex:none;display:flex;gap:3px}
.cq-body #cq-lbox .cq-gdtabs .cq-scat{box-sizing:border-box;flex:none;width:43px;min-width:0;height:15px;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:url(../img/gui_button_category.png) center / 100% 100% no-repeat;font-size:6px;line-height:15px;text-align:center;white-space:nowrap;color:#e8d8b8}
.cq-body #cq-lbox .cq-gdtabs .cq-scat:before,.cq-body #cq-lbox .cq-gdtabs .cq-scat:after{display:none}
.cq-body #cq-lbox .cq-gdtabs .cq-scat.cq-on{color:#ffd978;filter:brightness(1.25)}
.cq-gd .cq-gdbody{flex:1;min-height:0;display:grid;grid-template-columns:158px minmax(0,1fr);gap:5px}
.cq-gd .cq-gdlist,.cq-gd .cq-gddet{min-height:0;overflow-y:auto;padding:3px 4px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-gd .cq-gdi{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:5px;height:24px;padding:0 4px;border-bottom:1px solid #6d533d33;cursor:pointer}
.cq-gd .cq-gdi:hover{background:#70522e22}
.cq-gd .cq-gdi.cq-on{background:#8e682b33;box-shadow:inset 0 0 0 1px #e5bd7088}
.cq-gd .cq-gdi:focus{outline:none}
.cq-gd .cq-gdmini{height:22px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.cq-gd .cq-gdmini img{image-rendering:pixelated;image-rendering:crisp-edges;max-width:22px;max-height:22px;object-fit:contain}
.cq-gd .cq-gdi b{font-size:6.8px;color:#ffe9b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-gd .cq-gdt{font-style:normal;padding:0 3px;font-size:4.8px;line-height:7px;border-radius:2px;border:1px solid #8a6b3d;color:#d5bf99}
.cq-gd .cq-gdt2{border-color:#c0a050;color:#ffd978}
/* details */
.cq-gd .cq-gdhead{display:grid;grid-template-columns:58px 58px minmax(0,1fr);gap:5px;align-items:end}
.cq-gd .cq-gdspr{position:relative;height:58px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(ellipse at 50% 85%,#4a3424,#120c0a 80%);border:1px solid #6d533d;border-radius:3px;padding-bottom:3px;box-sizing:border-box}
.cq-gd .cq-gdspr img{image-rendering:pixelated;image-rendering:crisp-edges;max-width:52px;max-height:50px;object-fit:contain}
.cq-gd .cq-gdsx{position:absolute;left:3px;top:2px;font-size:5px;color:#b29b80}
.cq-gd .cq-gdinfo{align-self:start;min-width:0}
.cq-gd .cq-gdname{font-size:10px;color:#ffd978;margin-right:4px}
.cq-gd .cq-gdesc{margin:3px 0 0;font-size:6.2px;line-height:9px;color:#efe5d2}
.cq-gd .cq-gdsub{margin:6px 0 2px;padding-left:3px;border-left:2px solid #a8843f;font-size:6.2px;font-weight:700;color:#ffd978}
.cq-gd .cq-gdeq{display:flex;flex-wrap:wrap;gap:2px}
.cq-gd .cq-gdeq i{font-style:normal;padding:0 4px;font-size:5.6px;line-height:9px;color:#efe5d2;background:#120c0a;border:1px solid #6d533d;border-radius:2px}
.cq-gd .cq-gds{display:grid;grid-template-columns:16px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:5px;align-items:center;padding:2px 3px;border-bottom:1px solid #6d533d33}
.cq-gd .cq-gds .cq-ski{grid-row:1 / 3;width:15px;height:15px;display:flex;align-items:center;justify-content:center;background:#120c0a;border:1px solid #8a6b3d;border-radius:2px}
.cq-gd .cq-gds .cq-ski img{max-width:13px;max-height:13px}
.cq-gd .cq-gds b{font-size:6.6px;color:#ffe9b0}
.cq-gd .cq-gdsm{font-size:5.4px;color:#b29b80;text-align:right}
.cq-gd .cq-gde{grid-column:2 / 4;font-size:5.6px;line-height:8px;color:#d5bf99}
/* ===== help (view/help.php + js/help.js): contents + search on the left, the chapter on the right ===== */
.cq-body #cq-lbox .cq-hp{position:absolute;left:8px;right:8px;top:25px;bottom:6px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:5px;font-size:6.4px;color:#efe5d2}
.cq-hp .cq-hside{min-height:0;display:flex;flex-direction:column;gap:3px}
.cq-hp .cq-hsearch{position:relative;flex:none;height:15px;margin:0}
.cq-hp .cq-hsearch .cq-in{box-sizing:border-box;width:100%;height:15px;padding:0 4px 0 16px;font-size:6px;background:#0b0d10cc;border:1px solid #79613c;border-radius:2px;color:#f2e5ce}
.cq-hp .cq-hsearch .cq-ssearch-ic{position:absolute;left:3px;top:2.5px;width:10px;height:10px;background:url(../img/gui_symbol_search.png) center / contain no-repeat;pointer-events:none}
.cq-hp .cq-hlist,.cq-hp .cq-hbody{min-height:0;overflow-y:auto;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-hp .cq-hlist{flex:1;padding:2px}
.cq-hp .cq-hi{display:grid;grid-template-columns:12px minmax(0,1fr);align-items:center;gap:4px;height:19px;padding:0 5px;color:#d5bf99;text-decoration:none;border-bottom:1px solid #6d533d33}
.cq-hp .cq-hi:hover{background:#70522e22;color:#fff3d2}
.cq-hp .cq-hi.cq-on{background:#8e682b33;box-shadow:inset 0 0 0 1px #e5bd7088;color:#ffd978}
.cq-hp .cq-hn{font-size:5.4px;color:#b29b80;text-align:right}
.cq-hp .cq-hi b{font-size:6.4px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-hp .cq-hnone{padding:8px 4px;font-size:5.8px}
.cq-hp .cq-hbody{padding:6px 10px 10px;line-height:10.5px}
.cq-hp .cq-hh{margin:0 0 5px;padding-bottom:3px;font-size:10px;font-weight:700;color:#ffd978;border-bottom:1px solid #6d533d}
.cq-hp h3{margin:8px 0 3px;padding-left:4px;border-left:2px solid #a8843f;font-size:7.2px;color:#ffe9b0}
.cq-hp p{margin:0 0 4px}
.cq-hp ul,.cq-hp ol{margin:0 0 5px;padding-left:12px}
.cq-hp li{margin:0 0 2px}
.cq-hp b{color:#ffe9b0}
.cq-hp mark{background:#c4a366;color:#1a120f;padding:0 1px;border-radius:1px}
.cq-hp .cq-htbl{width:100%;margin:2px 0 6px;border-collapse:collapse;font-size:6.2px}
.cq-hp .cq-htbl th{padding:2px 5px;text-align:left;font-weight:700;color:#d5bf99;background:#3a2a1d;border:1px solid #6d533d}
.cq-hp .cq-htbl td{padding:2px 5px;border:1px solid #6d533d77;vertical-align:top}
.cq-hp .cq-htbl tr:nth-child(even) td{background:#ffffff08}
.cq-hp .cq-htip,.cq-hp .cq-hwarn{display:flex;gap:6px;align-items:flex-start;margin:4px 0 6px;padding:4px 6px;border-radius:2px;border:1px solid #6d533d}
.cq-hp .cq-htip{background:#1d3a2455;border-color:#4a8a5a}
.cq-hp .cq-hwarn{background:#3a181455;border-color:#c0554a}
.cq-hp .cq-htip i,.cq-hp .cq-hwarn i{flex:none;min-width:14px;font-style:normal;font-size:5.2px;font-weight:700;text-align:center;line-height:8px;border-radius:2px}
.cq-hp .cq-htip i{color:#bff0c4;background:#2a6a3a}
.cq-hp .cq-hwarn i{color:#ffd0c8;background:#8a2a22}
/* ===== auction list (view/auction.php): sort / "mine" buttons on top, two-line rows, price with the price icon ===== */
.cq-body #cq-aubody .cq-autool{flex:none;display:flex;align-items:center;gap:6px;margin:0 0 3px}
.cq-body #cq-aubody .cq-aucnt{flex:1;min-width:0;font-size:6.2px;color:#d5bf99;white-space:nowrap}
.cq-body #cq-aubody .cq-aucnt b{color:#ffd978}
.cq-body #cq-aubody .cq-aucnt i{display:inline-block;width:1px;height:7px;margin:0 6px;background:#6d533d;vertical-align:-1px}
.cq-body #cq-aubody .cq-ausorts{flex:none;display:flex;gap:2px;margin:0}
.cq-body #cq-aubody .cq-ausorts .cq-scat{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:none;width:43px;min-width:0;height:15px;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:url(../img/gui_button_category.png) center / 100% 100% no-repeat;font-size:5.6px;line-height:15px;color:#e8d8b8;text-decoration:none;white-space:nowrap}
.cq-body #cq-aubody .cq-ausorts .cq-scat:before,.cq-body #cq-aubody .cq-ausorts .cq-scat:after{display:none}
.cq-body #cq-aubody .cq-ausorts .cq-scat.cq-on{color:#ffd978;filter:brightness(1.25)}
.cq-body #cq-aubody .cq-aulist{flex:1;min-height:0;overflow-y:auto;border:1px solid #78603d;background:#15110e;scrollbar-gutter:stable}
.cq-body #cq-aubody .cq-ar{display:grid;grid-template-columns:22px minmax(0,1fr) 62px 40px;align-items:center;gap:5px;min-height:27px;padding:2px 4px;border-bottom:1px solid #6d533d55;background:transparent;cursor:default}
.cq-body #cq-aubody .cq-ar:before{display:none}
.cq-body #cq-aubody .cq-ar:hover{background:#70522e22}
.cq-body #cq-aubody .cq-armine{background:linear-gradient(90deg,#4a38141a,transparent);box-shadow:inset 2px 0 0 #c4a366}
.cq-body #cq-aubody .cq-arno{font-size:5.4px;color:#8a7a68}
.cq-body #cq-aubody .cq-armain{min-width:0}
.cq-body #cq-aubody .cq-arit{display:flex;align-items:center;gap:6px;min-width:0}
.cq-body #cq-aubody .cq-arn{flex:none}
.cq-body #cq-aubody .cq-ars{min-width:0;flex:1}
.cq-body #cq-aubody .cq-arn .cq-frag,.cq-body #cq-aubody .cq-ars .cq-frag{background:none;text-align:left;font-size:6.4px;line-height:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-body #cq-aubody .cq-arn img{width:16px;height:16px;object-fit:contain;margin:0 4px 0 0;vertical-align:-4px}
.cq-body #cq-aubody .cq-arn .light{display:none}
.cq-body #cq-aubody .cq-ars .cq-frag{font-size:6px}
.cq-body #cq-aubody .cq-arsub{display:flex;flex-wrap:wrap;gap:0 8px;margin-top:1px;font-size:5.4px;line-height:7.5px;color:#d5bf99}
.cq-body #cq-aubody .cq-arsub i{font-style:normal;color:#8a7a68}
.cq-body #cq-aubody .cq-arsub b{font-weight:400;color:#efe5d2}
.cq-body #cq-aubody .cq-arsub .cq-army{color:#ffd978}
.cq-body #cq-aubody .cq-arc{color:#b29b80;font-style:italic}
.cq-body #cq-aubody .cq-arside{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.cq-body #cq-aubody .cq-aut{padding:0 4px;font-size:5.2px;line-height:7px;color:#9be6a6;border:1px solid #3a6a4a;border-radius:6px}
.cq-body #cq-aubody .cq-aut.cq-soon{color:#ffb36a;border-color:#8a5a2a}
.cq-body #cq-aubody .cq-arp{display:inline-flex;align-items:center;font-size:7.8px;font-weight:700;color:#ffd978}
.cq-body #cq-aubody .cq-arp .cq-pic{width:9px;height:9px;margin-left:2px;vertical-align:0}
.cq-body #cq-aubody .cq-arbidc{display:flex;justify-content:flex-end}
.cq-body #cq-aubody .cq-arbid{margin:0}
.cq-body #cq-aubody .cq-arbid .cq-btn{--bs:.3;min-width:0;width:38px;padding:0;font-size:5.8px}
.cq-body #cq-aubody .cq-arlock{font-size:5px;text-align:right;color:#8a7a68}
.cq-body #cq-aubody .cq-arbid .cq-btn.cq-pri{width:38px !important;min-width:0 !important}
/* auction log: one row per event with a coloured kind badge */
.cq-body #cq-aubody .cq-allist{flex:1;min-height:0;overflow-y:auto;border:1px solid #78603d;background:#15110e;scrollbar-gutter:stable}
.cq-body #cq-aubody .cq-al{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:6px;min-height:15px;padding:1px 6px;border-bottom:1px solid #6d533d44;background:transparent;cursor:default}
.cq-body #cq-aubody .cq-al:before{display:none}
.cq-body #cq-aubody .cq-alk{padding:0;text-align:center;font-size:5.2px;line-height:8px;border-radius:2px;border:1px solid #6d533d}
.cq-body #cq-aubody .cq-al-put .cq-alk{color:#ffe0a0;border-color:#a8843f;background:#3a2c14}
.cq-body #cq-aubody .cq-al-sold .cq-alk{color:#bff0c4;border-color:#4a8a5a;background:#173a22}
.cq-body #cq-aubody .cq-al-cancel .cq-alk{color:#ffc9c0;border-color:#8a3a32;background:#3a1814}
.cq-body #cq-aubody .cq-alt{background:none;text-align:left;font-size:6.2px;line-height:9px;white-space:normal}
.cq-body #cq-aubody .cq-alt .bold{font-weight:700}
/* auction row: remaining time and price on one line, both vertically centred (valign middle) */
.cq-body #cq-aubody .cq-ar{grid-template-columns:22px minmax(0,1fr) 112px 40px}
.cq-body #cq-aubody .cq-arside{flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;align-self:center}
.cq-body #cq-aubody .cq-arside .cq-aut{display:inline-flex;align-items:center;height:10px;padding:0 5px}
.cq-body #cq-aubody .cq-arside .cq-arp{display:inline-flex;align-items:center;height:10px;line-height:10px}
.cq-body #cq-aubody .cq-ar{grid-template-columns:22px minmax(0,1fr) 128px 40px}
.cq-body #cq-aubody .cq-arside .cq-aut{white-space:nowrap;flex:none}
/* auction row: time chip fixed width, amount right-aligned in its own fixed box, narrower column */
.cq-body #cq-aubody .cq-ar{grid-template-columns:22px minmax(0,1fr) 98px 38px;gap:4px}
.cq-body #cq-aubody .cq-arside{display:grid;grid-template-columns:42px 52px;gap:4px;justify-content:end;align-items:center}
.cq-body #cq-aubody .cq-arside .cq-aut{box-sizing:border-box;width:42px;justify-content:center;text-align:center;padding:0 2px}
.cq-body #cq-aubody .cq-arside .cq-arp{justify-content:flex-end;text-align:right;width:52px}
.cq-body #cq-aubody .cq-arside .cq-arp{min-width:0;width:52px;box-sizing:border-box}
/* ===== confirm window (CQ.confirm: bid, buy, craft ...): centred, dark backdrop, amount with the price icon ===== */
.cq-body #cq-cfmdim{display:none;position:absolute;left:0;top:0;right:0;bottom:0;z-index:39;background:#000b}
.cq-body #cq-cfmdim.cq-show{display:block}
.cq-body #cq-cfm{left:50%;top:50%;width:220px;height:auto;transform:translate(-50%,-50%);z-index:40;display:none;flex-direction:column;color:#efe5d2;font-size:6.6px}
.cq-body #cq-cfm.cq-show{display:flex}
.cq-body #cq-cfm .cq-cfm-m{position:static;padding:8px 8px 6px;min-height:0;text-align:center;font-size:7px;line-height:11px}
.cq-body #cq-cfm .cq-cfmg{font-size:9px;color:#ffd978}
.cq-body #cq-cfm .cq-cfm-m .cq-pic{width:10px;height:10px;margin:0 1px 0 2px;vertical-align:-1.5px}
.cq-body #cq-cfm .cq-cfm-b{position:static;display:flex;justify-content:center;gap:6px;padding:2px 0 3px}
.cq-body #cq-cfm .cq-cfm-b .cq-btn{--bs:.34;width:66px !important;min-width:0 !important;margin:0;padding:0;font-size:6.2px}
.cq-body #cq-cfm #cq-cfm-n{order:1}
.cq-body #cq-cfm #cq-cfm-y{order:2}
/* result / error window of the facility screens */
.cq-body #cq-fwmsg:not([hidden]){display:flex}
.cq-body #cq-fwmsg[hidden],.cq-body #cq-fwdim[hidden]{display:none}
.cq-body #cq-fwmsg .cq-cfmg{font-size:8.4px;color:#ffd978}
.cq-body #cq-fwmsg .cq-pic{width:9px;height:9px;margin:0 1px 0 2px;vertical-align:-1px}
/* ===== auction: list an item (grid on the left, details + form on the right) ===== */
.cq-body #cq-aubody .cq-regv{flex:1;min-height:0;display:grid;grid-template-columns:292px minmax(0,1fr);gap:5px}
.cq-regv .cq-regl{min-width:0;min-height:0;display:flex;flex-direction:column}
.cq-regv .cq-stool{flex:none;display:flex;align-items:center;gap:6px;margin:0 0 3px}
.cq-regv .cq-ssearch{position:relative;flex:0 0 100px;height:15px;margin:0}
.cq-regv .cq-ssearch .cq-in{box-sizing:border-box;width:100%;height:15px;padding:0 4px 0 16px;font-size:6px;background:#0b0d10cc;border:1px solid #79613c;border-radius:2px;color:#f2e5ce}
.cq-regv .cq-ssearch-ic{position:absolute;left:3px;top:2.5px;width:10px;height:10px;background:url(../img/gui_symbol_search.png) center / contain no-repeat;pointer-events:none}
.cq-regv .cq-reghint{font-size:5.6px;color:#b29b80}
.cq-regv .cq-reggrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,38px);grid-auto-rows:44px;gap:1px;justify-content:start;align-content:start;overflow-y:auto;overflow-x:hidden;padding:1px;border:1px solid #78603d;background:#15110e;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-regv .cq-rslot{position:relative;box-sizing:border-box;width:38px;height:44px;display:flex;flex-direction:column;align-items:center;padding:3px 1px 0;background:linear-gradient(#2a1d16,#17100c);border:1px solid #6d533d;border-radius:2px;cursor:pointer;color:#e8d8b8}
.cq-regv .cq-rslot:hover{border-color:#b99c5b;background:linear-gradient(#3a2a1d,#1e150f)}
.cq-regv .cq-rslot.cq-on,.cq-regv .cq-rslot:focus{outline:none;border-color:#ffd978;box-shadow:inset 0 0 0 1px #ffd97866,0 0 4px #ffb84a88;background:linear-gradient(#4a3420,#24180f)}
.cq-regv .cq-rslot input{position:absolute;opacity:0;pointer-events:none}
.cq-regv .cq-sico{position:relative;flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#3a2a1e,#120c0a 75%);border-radius:2px}
.cq-regv .cq-sico img{width:24px;height:24px}
.cq-regv .cq-sref{position:absolute;left:-1px;top:-2px;font-size:5.4px;font-style:normal;font-weight:700;color:#ffe9a8;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.cq-regv .cq-scnt{position:absolute;right:-2px;bottom:-2px;font-size:5.6px;font-weight:700;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.cq-regv .cq-snm{display:block;width:100%;margin-top:2px;font-size:4.8px;line-height:6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-regv .cq-regr2{min-height:0;display:flex;flex-direction:column;padding:3px 6px 5px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px;font-size:6px;color:#efe5d2}
.cq-regv .cq-skbh{flex:none;height:11px;margin:0 0 3px;font-size:6.8px;font-weight:700;color:#ffd978}
.cq-regv .cq-regsel{flex:none;min-height:84px}
.cq-regv .cq-regnone{padding:14px 2px;font-size:5.8px;text-align:center}
.cq-regv .cq-rdhead{display:flex;gap:5px;align-items:center}
.cq-regv .cq-rdbig{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#4a3424,#120c0a 75%);border:1px solid #c4a366;border-radius:3px}
.cq-regv .cq-rdbig img{width:22px;height:22px}
.cq-regv .cq-rdname{display:block;font-size:7px;line-height:9px;color:#ffd978}
.cq-regv .cq-rdtype,.cq-regv .cq-rdhave{font-size:5.4px;line-height:7px;color:#d5bf99}
.cq-regv .cq-rdhave b{color:#efe5d2}
.cq-regv .cq-rdstats{margin-top:2px;font-size:5.8px;line-height:8px}
.cq-regv .cq-rdstats .cq-frag{background:none;text-align:left;font-size:5.8px;line-height:8px}
.cq-regv .cq-rdref{margin-top:1px;font-size:5.4px;color:#b29b80}
.cq-regv .cq-rdref b{color:#efe5d2}
.cq-regv .cq-rdref .cq-pic,.cq-regv .cq-rfp .cq-pic,.cq-regv .cq-regfee .cq-pic{width:8px;height:8px;margin-left:2px;vertical-align:-1px}
.cq-regv .cq-regfields{flex:1;min-height:0;margin-top:3px;padding-top:3px;border-top:1px solid #6d533d77}
.cq-regv .cq-rf{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:4px;margin:0 0 3px;font-size:5.8px;color:#b29b80}
.cq-regv .cq-rf .cq-in,.cq-regv .cq-rf .cq-fsel{box-sizing:border-box;width:100%;height:15px;font-size:6px}
.cq-regv .cq-rfq{display:flex;align-items:center;gap:1px}
.cq-regv .cq-rfq .cq-qn{width:26px;flex:none;height:16px}
.cq-body .cq-regv .cq-rfq .cq-qm,.cq-body .cq-regv .cq-rfq .cq-qp{width:15px;height:16px}
.cq-regv .cq-rall{margin-left:3px;padding:0 4px;height:13px;font-size:5.2px;color:#e8d8b8;background:#241814;border:1px solid #79613c;border-radius:2px;cursor:pointer}
.cq-regv .cq-rall:hover{border-color:#e5bd70;color:#ffd978}
.cq-regv .cq-rfp{position:relative;display:block}
.cq-regv .cq-rfp .cq-in{padding-right:14px;text-align:right}
.cq-regv .cq-rfp .cq-pic{position:absolute;right:3px;top:3.5px;margin:0}
.cq-regv .cq-rfn{margin:-1px 0 3px 40px;font-size:5px;line-height:6.5px;color:#8a7a68}
.cq-regv .cq-rfn.cq-on{color:#ffb36a}
.cq-regv .cq-regfoot{flex:none;display:flex;align-items:center;gap:5px;margin-top:auto}
.cq-regv .cq-regfee{margin-right:auto;font-size:5.6px;color:#d5bf99}
.cq-regv .cq-regfee b{color:#ffd978;font-size:6.6px}
.cq-body .cq-regv .cq-regfoot .cq-btn.cq-pri{--bs:.34;width:80px !important;min-width:0 !important;font-size:6px}

#cq-aubody .cq-regv #cq-scats{flex:none;display:flex;gap:2px;margin:0}

.cq-regv .cq-rdgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.cq-regv .cq-rdc{box-sizing:border-box;min-width:0;min-height:13px;display:flex;align-items:center;justify-content:center;padding:1px 2px;text-align:center;font-size:5.6px;line-height:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#120c0acc;border:1px solid #5a4533;border-radius:2px;color:#efe5d2}
.cq-regv .cq-rdc span{font-size:inherit !important}
.cq-regv .cq-rdnote{margin-top:2px;font-size:5.2px;line-height:7px;color:#b29b80}
.cq-regv .cq-rdnote *{font-size:inherit !important}

.cq-body #cq-aubody .cq-ars .smalltxt{font-size:inherit;line-height:inherit;color:#b8a48c}
.cq-body #cq-aubody .cq-ars .cq-frag,.cq-body #cq-aubody .cq-arn .cq-frag{display:flex;align-items:center;min-height:16px}
.cq-body #cq-aubody .cq-ars .cq-frag{font-size:6.4px}

.cq-body #cq-aubody .cq-ars .cq-frag,.cq-body #cq-aubody .cq-arn .cq-frag{display:block;line-height:16px;min-height:16px}
.cq-body #cq-aubody .cq-arn img{vertical-align:middle}
#cq-atip{position:absolute;z-index:60;width:160px;box-sizing:border-box;padding:5px 6px 6px;background:linear-gradient(#2a1e17,#1a120f);border:1px solid #c4a366;border-radius:3px;box-shadow:0 2px 8px #000a;color:#efe5d2;pointer-events:none}
#cq-atip[hidden]{display:none}
#cq-atip .cq-tph{display:flex;gap:5px;align-items:center;margin-bottom:4px}
#cq-atip .cq-tpi{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#4a3424,#120c0a 75%);border:1px solid #c4a366;border-radius:3px}
#cq-atip .cq-tpi img{width:20px;height:20px}
#cq-atip .cq-tpn{display:block;font-size:7px;line-height:9px;color:#ffd978}
#cq-atip .cq-tpt{font-size:5.4px;line-height:7px;color:#d5bf99}
#cq-atip .cq-rdgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
#cq-atip .cq-rdc{box-sizing:border-box;min-width:0;min-height:13px;display:flex;align-items:center;justify-content:center;padding:1px 2px;text-align:center;font-size:5.6px;line-height:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#120c0acc;border:1px solid #5a4533;border-radius:2px;color:#efe5d2}
#cq-atip .cq-rdc span{font-size:inherit !important}
#cq-atip .cq-rdnote{margin-top:3px;font-size:5.2px;line-height:7px;color:#b29b80}
#cq-atip .cq-rdnote *{font-size:inherit !important}

/* compact stat chips: the details box scrolls when an item has many values */
.cq-regv .cq-regsel{min-height:60px;max-height:92px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-regv .cq-rdgrid{gap:1px 2px}
.cq-regv .cq-rdc,#cq-atip .cq-rdc{min-height:10px;padding:0 2px;font-size:5.2px;line-height:9px}
.cq-regv .cq-rdstats{margin-top:2px}
.cq-regv .cq-rf{margin:0 0 2px}
.cq-regv .cq-regfields{margin-top:2px;padding-top:3px}
/* the details box takes whatever the form below does not need */
.cq-regv .cq-regsel{flex:1 1 auto;max-height:none}
.cq-regv .cq-regfields{flex:none}
.cq-regv .cq-rdh,#cq-atip .cq-rdh{margin-left:3px;color:#ffd978;white-space:nowrap}
.cq-regv .cq-rdh,#cq-atip .cq-rdh{font-weight:700}
.cq-body #cq-ibox .cq-rdh{margin-left:3px;color:#ffd978;font-weight:700;white-space:nowrap}

/* item text in the shop, smithy and box screens: the same 6.4px as the auction list (name, stats, description) */
#cq-game #cq-sbox .cq-frag,#cq-game #cq-smbox .cq-frag,#cq-game #cq-bxbox .cq-frag{font-size:6.4px}
#cq-game #cq-sbox .cq-frag .smalltxt,#cq-game #cq-smbox .cq-frag .smalltxt,#cq-game #cq-bxbox .cq-frag .smalltxt,
#cq-game #cq-sbox .cq-frag span:not([style]),#cq-game #cq-smbox .cq-frag span:not([style]),#cq-game #cq-bxbox .cq-frag span:not([style]){font-size:inherit}

/* appraiser: material craft / divide tables and the box log */
#cq-bxbox .cq-bxhead,#cq-bxbox .cq-bxrow{display:grid;align-items:center;column-gap:6px;padding:2px 6px}
#cq-bxbox .cq-bxmk{grid-template-columns:11px minmax(0,1fr) 10px minmax(0,1.3fr) 40px}
#cq-bxbox .cq-bxdv{grid-template-columns:11px minmax(0,1.2fr) 10px minmax(0,1fr) 44px}
#cq-bxbox .cq-bxhead{flex:none;min-height:14px;padding-right:12px;font-size:5.4px;color:#d5bf99;background:linear-gradient(#392d20,#211a13);border:1px solid #78603d;border-bottom:0}
#cq-bxbox .cq-bxhead span:nth-child(5){text-align:center}
#cq-bxbox .cq-bxlist{border-top-left-radius:0;border-top-right-radius:0}
#cq-bxbox .cq-bxrow{min-height:24px;border-bottom:1px solid #6d533d55;font-size:6.4px;color:#efe5d2;cursor:pointer}
#cq-bxbox .cq-bxrow input[type=radio]{position:static;opacity:1;width:11px;height:11px;margin:0;pointer-events:none}
#cq-bxbox .cq-bxres,#cq-bxbox .cq-bxn{display:flex;align-items:center;gap:3px;min-width:0}
#cq-bxbox .cq-bxneeds,#cq-bxbox .cq-bxhaves{display:flex;flex-direction:column;gap:1px;padding:1px 0}
#cq-bxbox .cq-bxn{min-height:14px}
#cq-bxbox .cq-bxhaves .cq-bxn{justify-content:center}
#cq-bxbox .cq-bxi{flex:none;position:relative;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}
#cq-bxbox .cq-bxi img{width:14px;height:14px;object-fit:contain}
#cq-bxbox .cq-bxres .cq-bxi,#cq-bxbox .cq-bxres .cq-bxi img{width:18px;height:18px}
#cq-bxbox .cq-bxnm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cq-bxbox .cq-bxx{flex:none;font-weight:700;color:#ffd978}
#cq-bxbox .cq-bxown{flex:none;margin-left:auto;font-size:5.6px;color:#d5bf99}
#cq-bxbox .cq-bxown i{font-style:normal;color:#8a7a68}
#cq-bxbox .cq-bxok{color:#9fe08a}
#cq-bxbox .cq-bxng{color:#ff7a6a}
#cq-bxbox .cq-bxbrk{text-align:center;font-weight:700;color:#ff9a7a}
#cq-bxbox .cq-bxlog{padding:2px 0}
#cq-bxbox .cq-bxlg{display:flex;align-items:center;gap:3px;min-height:18px;padding:1px 8px;border-bottom:1px solid #6d533d44;font-size:6.4px;color:#d5bf99}
#cq-bxbox .cq-bxlgn{color:#ffe9a8}
#cq-bxbox .cq-bxlgi{color:#ff9a7a}

/* appraiser: box opening pane = box slot | appraisal table (gui_appraisal_table_background.png 640x320) | fee + [open] */
#cq-bxbox [data-pane=open].cq-pshow{display:flex;flex-direction:column;min-height:0}
#cq-bxbox .cq-bxtop{flex:none;display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:4px 6px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px}
#cq-bxbox .cq-bxslot{flex:none;position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#3a2a1e,#120c0a 75%);border:1px solid #c4a366;border-radius:3px;box-shadow:inset 0 0 4px #000}
#cq-bxbox .cq-bxslot img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
#cq-bxbox .cq-bxslot.cq-bx0 img{opacity:.3;filter:grayscale(1)}
#cq-bxbox .cq-bxcnt{position:absolute;right:1px;bottom:0;font-size:6px;font-weight:700;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
#cq-bxbox .cq-bxtx{min-width:0;flex:1}
#cq-bxbox .cq-bxnm2{display:block;font-size:7.4px;color:#ffd978}
#cq-bxbox .cq-bxexp{font-size:5.6px;line-height:8px;color:#b29b80}
#cq-bxbox .cq-bxhv{font-size:5.8px;color:#d5bf99}
#cq-bxbox .cq-bxhv b{color:#efe5d2}
#cq-bxbox .cq-bxnone{color:#ff9a7a}
#cq-bxbox .cq-bxtable{position:relative;flex:1;min-height:0;overflow:hidden;background:#120c0a url(../img/gui_appraisal_table_background.png) center 60% / cover no-repeat;border:1px solid #6d533d;border-radius:2px;box-shadow:inset 0 0 14px #000c}
#cq-bxbox .cq-bxstage{position:absolute;left:50%;top:56%;width:0;height:0}
#cq-bxbox .cq-bxstage img{position:absolute;left:-16px;top:-16px;width:32px;height:32px;object-fit:contain;image-rendering:pixelated;opacity:0}
#cq-bxbox .cq-bxflash{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff7d6cc 18%,#ffcf6b55 42%,transparent 70%);opacity:0;transform:scale(.2);pointer-events:none}
#cq-bxbox .cq-bxplay .cq-bxbox{animation:cq-bx-in .9s ease-out forwards,cq-bx-out .25s ease-in 1.15s forwards}
#cq-bxbox .cq-bxplay .cq-bxflash{animation:cq-bx-flash .6s ease-out 1.05s forwards}
#cq-bxbox .cq-bxplay .cq-bxitem{animation:cq-bx-rise .8s cubic-bezier(.2,.8,.3,1) 1.3s forwards,cq-bx-glow 1.6s ease-in-out 2.1s infinite}
#cq-bxbox .cq-bxend .cq-bxbox,#cq-bxbox .cq-bxend .cq-bxflash{animation:none;opacity:0}
#cq-bxbox .cq-bxend .cq-bxitem{animation:cq-bx-glow 1.6s ease-in-out infinite;opacity:1;transform:translateY(-14px) scale(1.25)}
@keyframes cq-bx-in{0%{opacity:0;transform:translateY(-10px) scale(1.2)}70%{opacity:1;transform:translateY(1px) scale(1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cq-bx-out{to{opacity:0;transform:scale(1.15)}}
@keyframes cq-bx-flash{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes cq-bx-rise{0%{opacity:0;transform:translateY(0) scale(.6)}100%{opacity:1;transform:translateY(-14px) scale(1.25)}}
@keyframes cq-bx-glow{0%,100%{filter:drop-shadow(0 0 2px #ffcf6b)}50%{filter:drop-shadow(0 0 6px #ffe9a8)}}
#cq-bxbox .cq-bxfoot{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px}
#cq-bxbox .cq-bxfee{font-size:6.4px;color:#d5bf99}
#cq-bxbox .cq-bxfee b{color:#ffd978;font-size:7.2px}
/* result window */
.cq-body .cq-bxgot{position:absolute;left:50%;top:50%;z-index:41;width:200px;transform:translate(-50%,-50%)}
.cq-body .cq-bxgot[hidden]{display:none}
.cq-bxgot .cq-bxgh{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.cq-bxgot .cq-bxgi{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#5a3a22,#120c0a 75%);border:1px solid #ffcf6b;border-radius:3px;box-shadow:0 0 6px #ffcf6b88}
.cq-bxgot .cq-bxgi img{width:24px;height:24px;image-rendering:pixelated}
.cq-bxgot .cq-bxgn{display:block;font-size:8px;color:#ffd978}
.cq-bxgot .cq-bxgt{font-size:5.6px;color:#d5bf99}
.cq-bxgot .cq-rdh{margin-left:3px;color:#ffd978;font-weight:700;white-space:nowrap}
.cq-bxgot .cq-rdgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 2px}
.cq-bxgot .cq-rdc{box-sizing:border-box;min-width:0;min-height:10px;display:flex;align-items:center;justify-content:center;padding:0 2px;font-size:5.6px;line-height:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#120c0acc;border:1px solid #5a4533;border-radius:2px;color:#efe5d2}
.cq-bxgot .cq-rdc span{font-size:inherit !important}
.cq-bxgot .cq-rdnote{margin-top:3px;font-size:5.6px;line-height:8px;color:#b29b80}
.cq-bxgot .cq-rdnote *{font-size:inherit !important}
.cq-body #cq-bxdim{position:absolute;left:0;top:0;right:0;bottom:0;z-index:40;background:#0009}
.cq-body #cq-bxdim[hidden]{display:none}

#cq-bxbox .cq-bxar{width:8px;height:8px;justify-self:center;background:url(../img/gui_button_right.png) center / contain no-repeat;opacity:.85}
#cq-bxbox .cq-bxarl{transform:scaleX(-1)}
#cq-bxbox .cq-bxhn{font-weight:400;color:#efe5d2}
#cq-bxbox .cq-bxrow{border-radius:2px;transition:background .12s}
#cq-bxbox .cq-bxrow:hover{background:#3a2a1d66}
#cq-bxbox .cq-bxrow.cq-on{background:linear-gradient(90deg,#5a3f22aa,#2a1d1488);box-shadow:inset 0 0 0 1px #c4a36688}
#cq-bxbox .cq-bxrow.cq-on .cq-bxres .cq-bxnm{color:#ffd978}
#cq-game #cq-bxbox .cq-bxrow:before{display:none}

/* message window: an item named in a line (craft / divide / box results) */
.cq-dlgmsg .cq-dlgb p{margin:2px 0;line-height:12px}
.cq-dlgmsg .cq-dlgit{display:inline-flex;align-items:center;gap:3px;margin:0 2px;vertical-align:middle}
.cq-dlgmsg .cq-dlgic{flex:none;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle,#4a3424,#120c0a 75%);border:1px solid #c4a366;border-radius:3px}
.cq-dlgmsg .cq-dlgic img{width:14px;height:14px;object-fit:contain;image-rendering:pixelated}
.cq-dlgmsg .cq-dlgit b{color:#ffd978}
.cq-dlgmsg .cq-dlgb img.vcent{width:14px;height:14px;vertical-align:middle}

/* old notice (Process output with a form in it): the same window frame, centred, over a dark backdrop */
.cq-body #cq-pre{position:absolute;left:50%;top:50%;z-index:40;width:420px;max-height:260px;transform:translate(-50%,-50%);box-shadow:0 0 0 2000px #0009}
.cq-body #cq-pre .cq-prew{background:none;max-height:200px}
/* appraiser: the count next to the craft / divide button, and the many-at-once result window */
#cq-bxbox .cq-bxfoot2{display:flex;align-items:center;justify-content:flex-end;gap:8px}
#cq-bxbox .cq-bxqty{display:flex;align-items:center;gap:1px;font-size:6px;color:#d5bf99}
#cq-bxbox .cq-bxqty>span{margin-right:4px}
#cq-bxbox .cq-bxqty .cq-qn{width:26px;height:15px;box-sizing:border-box;text-align:center;font-size:6.4px}
.cq-body #cq-bxbox .cq-bxqty .cq-qm,.cq-body #cq-bxbox .cq-bxqty .cq-qp{width:15px;height:16px}
#cq-bxbox .cq-bxqmax{margin-left:3px;padding:0 4px;height:13px;font-size:5.2px;color:#e8d8b8;background:#241814;border:1px solid #79613c;border-radius:2px;cursor:pointer}
#cq-bxbox .cq-bxqmax:hover{border-color:#e5bd70;color:#ffd978}
.cq-body .cq-bxbulk{position:absolute;left:50%;top:50%;z-index:41;width:260px;transform:translate(-50%,-50%)}
.cq-bxbulk .cq-dlgb{text-align:left}
.cq-bxbulk .cq-bkst{min-height:9px;font-size:6px;color:#d5bf99;text-align:center}
.cq-bxbulk .cq-bkbar{height:4px;margin:3px 0 5px;background:#120c0a;border:1px solid #6d533d;border-radius:2px;overflow:hidden}
.cq-bxbulk .cq-bkbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c4903c,#ffd978);transition:width .15s}
.cq-bxbulk .cq-bksum{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:6.2px;color:#d5bf99}
.cq-bxbulk .cq-bksum b{color:#efe5d2}
.cq-bxbulk .cq-bksum .cq-pic{width:8px;height:8px;vertical-align:-1px}
.cq-bxbulk .cq-bkgot{width:100%;margin-top:2px;line-height:20px}
.cq-bxbulk .cq-bkbad{color:#ff8a7a !important}
.cq-bxbulk .cq-bklist{max-height:110px;margin-top:4px;overflow-y:auto;border:1px solid #6d533d77;background:#120c0a99;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-bxbulk .cq-bkr{display:flex;align-items:center;gap:4px;min-height:20px;padding:0 6px;border-bottom:1px solid #6d533d33;font-size:6.2px;color:#efe5d2}
.cq-bxbulk .cq-bkn{width:16px;flex:none;color:#8a7a68;text-align:right}
.cq-bxbulk .cq-dlgit{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.cq-bxbulk .cq-dlgic{flex:none;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle,#4a3424,#120c0a 75%);border:1px solid #c4a366;border-radius:3px}
.cq-bxbulk .cq-dlgic img{width:12px;height:12px;object-fit:contain;image-rendering:pixelated}
.cq-bxbulk .cq-dlgit b{color:#ffd978}
.cq-body #cq-bkdim{position:absolute;left:0;top:0;right:0;bottom:0;z-index:40;background:#0009}
#cq-bxbox .cq-bxcost{font-size:6.4px;color:#d5bf99;white-space:nowrap}
#cq-bxbox .cq-bxcost b{color:#ffd978;font-size:7.2px}

/* apple old man: the key list uses the appraiser craft table */
#cq-qbox .cq-bxhead,#cq-qbox .cq-bxrow{display:grid;align-items:center;column-gap:6px;padding:2px 6px}
#cq-qbox .cq-bxmk{grid-template-columns:11px minmax(0,1fr) 10px minmax(0,1.3fr) 40px}
#cq-qbox .cq-bxhead{flex:none;min-height:14px;padding-right:12px;font-size:5.4px;color:#d5bf99;background:linear-gradient(#392d20,#211a13);border:1px solid #78603d;border-bottom:0}
#cq-qbox .cq-bxhead span:nth-child(5){text-align:center}
#cq-qbox .cq-bxlist{border-top-left-radius:0;border-top-right-radius:0}
#cq-qbox .cq-bxrow{min-height:24px;border-bottom:1px solid #6d533d55;font-size:6.4px;color:#efe5d2;cursor:pointer}
#cq-qbox .cq-bxrow input[type=radio]{position:static;opacity:1;width:11px;height:11px;margin:0;pointer-events:none}
#cq-qbox .cq-bxres,#cq-qbox .cq-bxn{display:flex;align-items:center;gap:3px;min-width:0}
#cq-qbox .cq-bxneeds,#cq-qbox .cq-bxhaves{display:flex;flex-direction:column;gap:1px;padding:1px 0}
#cq-qbox .cq-bxn{min-height:14px}
#cq-qbox .cq-bxhaves .cq-bxn{justify-content:center}
#cq-qbox .cq-bxi{flex:none;position:relative;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}
#cq-qbox .cq-bxi img{width:14px;height:14px;object-fit:contain}
#cq-qbox .cq-bxres .cq-bxi,#cq-qbox .cq-bxres .cq-bxi img{width:18px;height:18px}
#cq-qbox .cq-bxnm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cq-qbox .cq-bxx{flex:none;font-weight:700;color:#ffd978}
#cq-qbox .cq-bxnm2{display:block;font-size:7.4px;color:#ffd978}
#cq-qbox .cq-bxar{width:8px;height:8px;justify-self:center;background:url(../img/gui_button_right.png) center / contain no-repeat;opacity:.85}
#cq-qbox .cq-bxarl{transform:scaleX(-1)}
#cq-qbox .cq-bxhn{font-weight:400;color:#efe5d2}
#cq-qbox .cq-bxrow{border-radius:2px;transition:background .12s}
#cq-qbox .cq-bxrow:hover{background:#3a2a1d66}
#cq-qbox .cq-bxrow.cq-on{background:linear-gradient(90deg,#5a3f22aa,#2a1d1488);box-shadow:inset 0 0 0 1px #c4a36688}
#cq-qbox .cq-bxrow.cq-on .cq-bxres .cq-bxnm{color:#ffd978}
#cq-game #cq-qbox .cq-bxrow:before{display:none}
#cq-qbox .cq-bxfoot2{display:flex;align-items:center;justify-content:flex-end;gap:8px}
#cq-qbox .cq-bxcost{font-size:6.4px;color:#d5bf99;white-space:nowrap}
#cq-qbox .cq-bxcost b{color:#ffd978;font-size:7.2px}

/* apple old man: quest list (left) + details with goal / reward cards (right); only the buttons that apply are shown */
#cq-qbox .cq-qcol{width:180px}
#cq-qbox .cq-qcol .cq-list{flex:1;min-height:0;background:#120c0a;border:1px solid #6d533d;border-radius:2px}
#cq-qbox .cq-qitem{display:flex;align-items:center;gap:5px;min-height:20px;padding:2px 6px;border-bottom:1px solid #6d533d44;border-radius:2px;cursor:pointer}
#cq-qbox .cq-qitem input[type=radio]{position:static;opacity:1;flex:none;width:11px;height:11px;margin:0;pointer-events:none}
#cq-game #cq-qbox .cq-qitem:before{display:none}
#cq-qbox .cq-qitem:hover{background:#3a2a1d66}
#cq-qbox .cq-qitem.cq-on{background:linear-gradient(90deg,#5a3f22aa,#2a1d1488);box-shadow:inset 0 0 0 1px #c4a36688}
#cq-qbox .cq-qitem.cq-on .cq-qrow{color:#ffd978}
#cq-qbox .cq-qrow{font-size:6.4px;color:#efe5d2}
#cq-qbox .cq-qprog{flex:none;padding:0 4px;height:10px;line-height:10px;font-size:5.4px;color:#d5bf99;background:#241814;border:1px solid #6d533d;border-radius:5px}
#cq-qbox .cq-qprog.cq-qok{color:#9fe08a;border-color:#5fae5a}
#cq-qbox .cq-qprog.cq-qdone{color:#ffd978;border-color:#a8843c}
#cq-qbox .cq-qdet{background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px;padding:6px 8px 5px}
#cq-qbox .cq-qn1{font-size:8px;color:#ffd978;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid #6d533d77}
#cq-qbox .cq-qtx{font-size:6.2px;line-height:9.5px;color:#e8dcc6;margin-bottom:6px}
#cq-qbox .cq-qtx *{font-size:inherit !important}
#cq-qbox .cq-qcards{display:flex;flex-direction:column;gap:3px}
#cq-qbox .cq-qcard{display:flex;align-items:center;gap:6px;padding:4px 6px;background:#120c0acc;border:1px solid #6d533d;border-radius:3px}
#cq-qbox .cq-qrew{border-color:#a8843c;box-shadow:inset 0 0 6px #ffcf6b22}
#cq-qbox .cq-qlb{flex:none;width:22px;padding:1px 0;text-align:center;font-size:5.4px;color:#d5bf99;background:#241814;border:1px solid #6d533d;border-radius:2px}
#cq-qbox .cq-qrew .cq-qlb{color:#ffd978;border-color:#a8843c}
#cq-qbox .cq-qcard .cq-bxi{flex:none;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle,#4a3424,#120c0a 75%);border:1px solid #c4a366;border-radius:3px}
#cq-qbox .cq-qcard .cq-bxi img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
#cq-qbox .cq-qci{flex:1;min-width:0}
#cq-qbox .cq-qcn{display:block;font-size:6.6px;color:#efe5d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cq-qbox .cq-qcn i{font-style:normal;color:#ffd978}
#cq-qbox .cq-qpg{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:5.6px;color:#d5bf99}
#cq-qbox .cq-qpg i{font-style:normal;color:#8a7a68}
#cq-qbox .cq-qbar{flex:1;height:4px;background:#241814;border:1px solid #6d533d;border-radius:2px;overflow:hidden}
#cq-qbox .cq-qbar i{display:block;height:100%;background:linear-gradient(90deg,#c4903c,#ffd978)}
#cq-qbox .cq-qpok .cq-qbar i{background:linear-gradient(90deg,#4f9a4a,#9fe08a)}
#cq-qbox .cq-qpok{color:#9fe08a}
#cq-qbox .cq-qdet .cq-fw-foot{position:static;flex:none;display:flex;justify-content:flex-end;gap:6px;height:auto;margin-top:auto;padding-top:5px}
#cq-qbox .cq-qpick{margin:auto 0;padding:20px 6px}
#cq-qbox .cq-qkey{display:flex;flex-direction:column;flex:1;min-height:0}

/* mine: rock field (gui_mine_block1..6.png, broken = gui_mine_bloken.png, 64x64 -> 32 game px), the dig effect, the side cards */
#cq-mnbox .cq-mfield{gap:1px;padding:5px;background:linear-gradient(#1d1714,#0e0a08);border:1px solid #6d533d;border-radius:3px;box-shadow:inset 0 0 12px #000,0 0 0 1px #000}
#cq-mnbox .cq-mt{position:relative;width:32px;height:32px;box-sizing:border-box;border:0;border-radius:2px;background:#0c0908 center / 100% 100% no-repeat;box-shadow:none;overflow:visible}
#cq-mnbox .cq-mb1{background-image:url(../img/gui_mine_block1.png)}
#cq-mnbox .cq-mb2{background-image:url(../img/gui_mine_block2.png)}
#cq-mnbox .cq-mb3{background-image:url(../img/gui_mine_block3.png)}
#cq-mnbox .cq-mb4{background-image:url(../img/gui_mine_block4.png)}
#cq-mnbox .cq-mb5{background-image:url(../img/gui_mine_block5.png)}
#cq-mnbox .cq-mb6{background-image:url(../img/gui_mine_block6.png)}
#cq-mnbox .cq-mbk{background-image:url(../img/gui_mine_bloken.png);display:flex;align-items:center;justify-content:center}
#cq-mnbox .cq-mbk.cq-mnew{background-image:none}
#cq-mnbox .cq-mbk.cq-mnew.cq-mb1{background-image:url(../img/gui_mine_block1.png)}
#cq-mnbox .cq-mbk.cq-mnew.cq-mb2{background-image:url(../img/gui_mine_block2.png)}
#cq-mnbox .cq-mbk.cq-mnew.cq-mb3{background-image:url(../img/gui_mine_block3.png)}
#cq-mnbox .cq-mbk.cq-mnew.cq-mb4{background-image:url(../img/gui_mine_block4.png)}
#cq-mnbox .cq-mbk.cq-mnew.cq-mb5{background-image:url(../img/gui_mine_block5.png)}
#cq-mnbox .cq-mbk.cq-mnew.cq-mb6{background-image:url(../img/gui_mine_block6.png)}
#cq-mnbox .cq-mbk.cq-mbreak{background-image:url(../img/gui_mine_bloken.png)}
#cq-mnbox .cq-mnew .cq-mitem{opacity:0}
#cq-mnbox .cq-mdig{cursor:pointer;filter:brightness(.92);transition:filter .12s,transform .12s}
#cq-mnbox .cq-mdig:hover:not(:disabled),#cq-mnbox .cq-mdig:focus:not(:disabled){filter:brightness(1.25) drop-shadow(0 0 3px #ffcf6b);transform:translateY(-1px);outline:none;z-index:1}
#cq-mnbox .cq-mdig:disabled{filter:brightness(.55) saturate(.6);cursor:default;opacity:1}
#cq-mnbox .cq-mitem{position:relative;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle,#ffcf6b44,transparent 70%)}
#cq-mnbox .cq-mitem img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 2px #000)}
#cq-mnbox .cq-mshake{animation:cq-m-shake .38s linear}
#cq-mnbox .cq-mpart{position:absolute;left:50%;top:50%;margin:-3px 0 0 -3px;border-radius:1px;background-size:64px 64px;box-shadow:0 0 2px #000;pointer-events:none;z-index:3;animation:cq-m-part .8s cubic-bezier(.2,.7,.4,1) forwards}
#cq-mnbox .cq-mflash{position:absolute;left:-14px;top:-14px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#fff8e0 0,#ffd97899 30%,transparent 70%);pointer-events:none;z-index:2;animation:cq-m-flash .45s ease-out forwards}
#cq-mnbox .cq-mpop .cq-mitem{animation:cq-m-pop .6s cubic-bezier(.2,1.6,.4,1) forwards,cq-m-glow 1.6s ease-in-out .6s infinite}
@keyframes cq-m-shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,0)}80%{transform:translate(1px,1px)}}
@keyframes cq-m-part{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 14px)) rotate(var(--rt))}}
@keyframes cq-m-flash{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
@keyframes cq-m-pop{0%{opacity:0;transform:translateY(4px) scale(.2)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cq-m-glow{0%,100%{filter:drop-shadow(0 0 1px #ffcf6b)}50%{filter:drop-shadow(0 0 5px #ffe9a8)}}
/* side: level / exp, digs left, guide; ranking */
#cq-mnbox .cq-fpanes .cq-pane2{display:none;flex-direction:column;gap:4px}
#cq-mnbox .cq-fpanes .cq-pane2.cq-pshow{display:flex}
#cq-mnbox .cq-mncard{padding:5px 7px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:3px}
#cq-mnbox .cq-mnlv{font-size:7px;color:#d5bf99}
#cq-mnbox .cq-mnlv b{font-size:11px;color:#ffd978;text-shadow:0 0 6px #ffb84a66}
#cq-mnbox .cq-mnexp,#cq-mnbox .cq-mnrow{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:6.2px;color:#d5bf99}
#cq-mnbox .cq-mnexp b,#cq-mnbox .cq-mnrow b{flex:none;color:#efe5d2}
#cq-mnbox .cq-mnbar{flex:1;height:5px;background:#120c0a;border:1px solid #6d533d;border-radius:3px;overflow:hidden}
#cq-mnbox .cq-mnbar i{display:block;height:100%;background:linear-gradient(90deg,#c4903c,#ffd978)}
#cq-mnbox .cq-mnpips{flex:1;display:flex;gap:2px}
#cq-mnbox .cq-mnpips i{width:12px;height:12px;background:url(../img/gui_mine_bloken.png) center / 100% 100% no-repeat;opacity:.7}
#cq-mnbox .cq-mnpips i.cq-on{background-image:url(../img/gui_mine_block1.png);opacity:1;box-sizing:border-box;border:1px solid #ffd978;border-radius:2px}
#cq-mnbox .cq-mnwait b{color:#ff9a7a}
#cq-mnbox .cq-mnguide{padding:5px 7px;font-size:6px;line-height:9px;color:#d5bf99;background:#120c0a99;border:1px solid #6d533d77;border-radius:3px}
#cq-mnbox .cq-mnguide .cq-mut{margin-top:3px}
#cq-mnbox .cq-mnrank{display:flex;flex-direction:column;flex:1;min-height:0}
#cq-mnbox .cq-mnrt{font-size:7.4px;font-weight:700;color:#ffd978;margin:0 0 3px}
#cq-mnbox .cq-mnrank .cq-list{flex:1;min-height:0;background:#120c0a;border:1px solid #6d533d;border-radius:2px}
#cq-mnbox .cq-mnr{display:flex;align-items:center;min-height:18px;padding:0 8px;border-bottom:1px solid #6d533d44}
#cq-mnbox .cq-mnr .cq-fm-sl{width:16px;font-weight:700}
#cq-mnbox .cq-mnr1 .cq-fm-sl{color:#ffd978}
#cq-mnbox .cq-mnr2 .cq-fm-sl{color:#d8dde3}
#cq-mnbox .cq-mnr3 .cq-fm-sl{color:#d9a066}
#cq-mnbox .cq-mnr .cq-fm-sn,#cq-mnbox .cq-mnr .cq-fm-sp{font-size:6.4px}
/* mine as one screen: status cards + ranking on the right, the guide at the bottom of the left column */
#cq-mnbox .cq-mnside{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px}
#cq-mnbox .cq-fw-l .cq-mnguide{margin-top:auto;text-align:left}
#cq-mnbox .cq-mnrank{flex:1;min-height:0;padding:5px 7px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:3px}
#cq-mnbox .cq-mnrank .cq-list{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
#cq-mnbox .cq-mnrank{padding:2px 0 0;background:none;border:0;border-radius:0}
#cq-mnbox .cq-mntr{display:block;width:14px;height:14px;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 0 2px #000)}
#cq-mnbox .cq-mnr .cq-fm-sl{display:flex;align-items:center;justify-content:center}
#cq-mnbox .cq-mnrank{display:flex;flex-direction:column}
#cq-mnbox .cq-mnrank .cq-list{flex:none;overflow:hidden}
#cq-mnbox .cq-mnpg{flex:none;margin-top:4px}

/* vinyl house, one screen: field (back01.gif at its own size 176x192, tiles 16) | rates, plot list, the picked plot's actions */
#cq-fmbox #cq-farm{display:flex;flex-direction:row;gap:8px}
#cq-fmbox .cq-fmleft{flex:none;width:176px;display:flex;flex-direction:column;gap:5px}
#cq-fmbox .cq-fmfield{position:relative;width:176px;height:192px;background:url(../../image/farm/back01.gif?v=214) 0 0 / 176px 192px no-repeat;border-radius:3px;box-shadow:0 0 0 1px #6d533d,0 2px 6px #000a}
#cq-fmbox .cq-fmgrid{position:absolute;left:32px;top:16px;display:flex}
#cq-fmbox .cq-fmcol{display:flex;flex-direction:column;width:16px;padding:0;margin:0;border:0;background:none;cursor:pointer;border-radius:2px}
#cq-fmbox .cq-fmcol img{display:block;width:16px;height:16px;image-rendering:pixelated}
#cq-fmbox .cq-fmw{display:block;width:16px;height:16px}
#cq-fmbox .cq-fmw img{animation:cq-blink 1s steps(2) infinite}
#cq-fmbox .cq-fmgap{display:flex;align-items:center;justify-content:center;height:8px}
#cq-fmbox .cq-fmgap i{font-style:normal;font-size:5px;line-height:8px;font-weight:700;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
#cq-fmbox .cq-fmcol:hover{background:#ffffff1a}
#cq-fmbox .cq-fmcol.cq-on{background:#ffd97826;box-shadow:0 0 0 1px #ffd978}
#cq-fmbox .cq-fmguide{flex:1;min-height:0;overflow:auto;padding:4px 6px;font-size:5.4px;line-height:8px;white-space:pre-line;color:#b29b80;background:#120c0a99;border:1px solid #6d533d77;border-radius:3px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
#cq-fmbox .cq-fmright{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#cq-fmbox .cq-fmrates{flex:none;display:flex;align-items:center;gap:8px;padding:3px 6px;font-size:6px;color:#d5bf99;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:3px}
#cq-fmbox .cq-fmrl{color:#8a7a68}
#cq-fmbox .cq-fmrate{display:inline-flex;align-items:center;gap:2px}
#cq-fmbox .cq-fmrate img{width:16px;height:16px;image-rendering:pixelated}
#cq-fmbox .cq-fmrate b,#cq-fmbox .cq-fmline b{color:#efe5d2}
#cq-fmbox .cq-up{color:#9fe08a !important}
#cq-fmbox .cq-dn{color:#ff8a7a !important}
#cq-fmbox .cq-fmlist{flex:none;display:flex;flex-direction:column;background:#120c0a;border:1px solid #6d533d;border-radius:2px}
#cq-fmbox .cq-fmp{display:grid;grid-template-columns:10px 16px 34px minmax(0,1fr) 36px;align-items:center;gap:4px;height:17px;padding:0 6px;margin:0;border:0;border-bottom:1px solid #6d533d44;background:none;font-size:6px;color:#efe5d2;text-align:left;cursor:pointer}
#cq-fmbox .cq-fmp:last-child{border-bottom:0}
#cq-fmbox .cq-fmp:hover{background:#3a2a1d66}
#cq-fmbox .cq-fmp.cq-on{background:linear-gradient(90deg,#5a3f22aa,#2a1d1488);box-shadow:inset 0 0 0 1px #c4a36688}
#cq-fmbox .cq-fmno{font-weight:700;color:#d5bf99;text-align:center}
#cq-fmbox .cq-fmci img{display:block;width:16px;height:16px;image-rendering:pixelated}
#cq-fmbox .cq-fmbar{display:flex;gap:1px}
#cq-fmbox .cq-fmbar i{flex:1;height:4px;background:#2a1e17;border:1px solid #4a3628;border-radius:1px}
#cq-fmbox .cq-fmbar i.cq-on{background:linear-gradient(#9fe08a,#4f9a4a);border-color:#5fae5a}
#cq-fmbox .cq-fmst{font-size:5.4px;text-align:right;color:#d5bf99}
#cq-fmbox .cq-fms-dry .cq-fmst{color:#7fc4ff}
#cq-fmbox .cq-fms-ripe .cq-fmst{color:#ffd978}
#cq-fmbox .cq-fms-empty .cq-fmst{color:#8a7a68}
#cq-fmbox .cq-fmact{flex:1;min-height:0;display:flex;flex-direction:column;padding:5px 7px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:3px}
#cq-fmbox .cq-fmah{font-size:7px;color:#ffd978;margin-bottom:3px}
#cq-fmbox .cq-fmah span{font-size:6px;color:#d5bf99;margin-left:3px}
#cq-fmbox .cq-fmab{flex:1;min-height:0}
#cq-fmbox .cq-fmline{display:flex;justify-content:space-between;align-items:center;min-height:9px;font-size:6px;color:#d5bf99}
#cq-fmbox .cq-fmwarn span{color:#7fc4ff}
#cq-fmbox .cq-fmf{flex:none;display:flex;align-items:center;gap:6px;justify-content:flex-end}
#cq-fmbox .cq-fmf2 form{display:flex;align-items:center;gap:3px}
#cq-fmbox .cq-fmf2{gap:10px}
#cq-fmbox .cq-fmcrops{display:flex;gap:3px;margin-right:auto}
#cq-fmbox .cq-fmcrop{display:flex;align-items:center;gap:2px;padding:1px 4px 1px 2px;font-size:6px;color:#efe5d2;background:#120c0a;border:1px solid #6d533d;border-radius:2px;cursor:pointer}
#cq-fmbox .cq-fmcrop input{width:9px;height:9px;margin:0}
#cq-fmbox .cq-fmcrop img{width:16px;height:16px;image-rendering:pixelated}
#cq-fmbox .cq-fmcrop:has(input:checked){border-color:#ffd978;background:#3a2a1d}
#cq-fmbox .cq-fmcost{font-size:6px;color:#d5bf99;white-space:nowrap}
#cq-fmbox .cq-fmcost b{color:#ffd978}
#cq-fmbox .cq-fmcost .cq-pic{width:8px;height:8px;vertical-align:-1px}
#cq-fmbox .cq-fmf .cq-btn{min-width:0 !important;width:auto !important;padding:0 8px}
/* left column: points + the ranking button */
#cq-fmbox .cq-fmstat{margin-top:auto;padding:5px 7px;font-size:6px;color:#d5bf99;background:#120c0a99;border:1px solid #6d533d77;border-radius:3px}
#cq-fmbox .cq-fmstat>div{display:flex;justify-content:space-between}
#cq-fmbox .cq-fmstat b{color:#ffd978}
#cq-fmbox .cq-fmrkb{display:block;width:100%;margin-top:4px}
/* ranking window */
.cq-body .cq-fmrk{position:absolute;left:50%;top:50%;z-index:41;width:330px;transform:translate(-50%,-50%)}
.cq-body .cq-fmrk[hidden],.cq-body #cq-fmrkdim[hidden]{display:none}
.cq-body #cq-fmrkdim{position:absolute;left:0;top:0;right:0;bottom:0;z-index:40;background:#0009}
.cq-fmrk .cq-fmrkc{display:flex;gap:8px;text-align:left}
.cq-fmrk .cq-fmrkl{flex:1;min-width:0}
.cq-fmrk .cq-fmrkt{font-size:7px;font-weight:700;color:#ffd978;margin-bottom:3px}
.cq-fmrk .cq-list{background:#120c0a;border:1px solid #6d533d;border-radius:2px}
.cq-fmrk .cq-fmrr{display:flex;align-items:center;min-height:17px;padding:0 6px;border-bottom:1px solid #6d533d44;font-size:6.2px}
.cq-fmrk .cq-fm-sl{display:flex;justify-content:center;width:16px;flex:none;font-weight:700}
.cq-fmrk .cq-fm-sn{flex:1;min-width:0;font-size:6.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-fmrk .cq-fm-sp{min-width:0;font-size:6.2px}
.cq-fmrk .cq-mntr{display:block;width:12px;height:12px;background-position:center;background-size:contain;background-repeat:no-repeat}
#cq-fmbox .cq-fmw,#cq-fmbox .cq-fmw+img{position:relative;top:-6px}
#cq-fmbox .cq-fmgap i{position:relative;top:-3px}
/* vinyl house: wider left box + supply, whole-crop picker, water | sell halves */
#cq-fmbox .cq-fw-l .cq-fmstat{align-self:stretch;box-sizing:border-box;width:auto;margin-left:6px;margin-right:6px}
#cq-fmbox .cq-fmsup{align-self:stretch;margin:4px 6px 0;padding:5px 7px;background:#120c0a99;border:1px solid #6d533d77;border-radius:3px;font-size:6px;color:#d5bf99;text-align:left}
#cq-fmbox .cq-fmsupt{font-size:6.6px;font-weight:700;color:#ffd978;margin-bottom:3px}
#cq-fmbox .cq-fmsr{display:flex;align-items:center;gap:3px;height:15px}
#cq-fmbox .cq-fmsr img{width:14px;height:14px;image-rendering:pixelated}
#cq-fmbox .cq-fmsn{width:20px}
#cq-fmbox .cq-fmsb{flex:1;height:4px;background:#241814;border:1px solid #6d533d;border-radius:2px;overflow:hidden}
#cq-fmbox .cq-fmsb i{display:block;height:100%;background:linear-gradient(90deg,#c4903c,#ffd978)}
#cq-fmbox .cq-fmsr b{width:16px;text-align:right;color:#efe5d2}
#cq-fmbox .cq-fmsuph{margin-top:3px;font-size:5.2px;line-height:7.5px;color:#8a7a68}
#cq-fmbox .cq-fmcrop{flex-direction:column;gap:1px;padding:3px 6px 2px}
#cq-fmbox .cq-fmcpic{display:flex;flex-direction:column;align-items:center}
#cq-fmbox .cq-fmcpic img{display:block;width:16px;height:16px}
#cq-fmbox .cq-fmcl{display:flex;align-items:center;gap:2px}
#cq-fmbox .cq-fmf2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#cq-fmbox .cq-fmf2 form{justify-content:flex-end;gap:5px;padding:3px 4px;background:#120c0a66;border:1px solid #6d533d55;border-radius:3px}
#cq-fmbox .cq-fmsr{height:12px}
#cq-fmbox .cq-fmsup{padding:4px 6px}
#cq-fmbox .cq-fmsupt{margin-bottom:1px}
#cq-fmbox .cq-fmcrop{padding:2px 5px 1px}
#cq-fmbox #cq-fmbuy{align-items:flex-end}
#cq-fmbox .cq-fw-l .cq-fmstat{padding:3px 6px}
#cq-fmbox .cq-fmrkb{margin-top:3px}
#cq-fmbox .cq-fmsup{margin-top:3px;padding:3px 6px}
#cq-fmbox .cq-fmsr{height:11px}
/* plant / water / sell: each = a box with the cost and a wide button */
#cq-fmbox .cq-fmbx{display:flex;align-items:center;gap:5px;width:126px;box-sizing:border-box;padding:3px 4px;background:#120c0a66;border:1px solid #6d533d55;border-radius:3px}
#cq-fmbox .cq-fmbx .cq-fmcost,#cq-fmbox .cq-fmf2 form .cq-fmcost{flex:none}
#cq-fmbox .cq-fmbx .cq-btn,#cq-fmbox .cq-fmf2 form .cq-btn{flex:1;min-width:0 !important;width:auto !important}
#cq-fmbox .cq-fmf2 form{justify-content:flex-start}
#cq-fmbox .cq-fmcrops{display:flex;gap:0;width:126px;flex:none}
#cq-fmbox .cq-fmcrop{flex:none;box-sizing:border-box;width:40px;margin:0 1px;padding:2px 0 1px;align-items:center}
#cq-fmbox .cq-fmbx .cq-btn,#cq-fmbox .cq-fmf2 form .cq-btn{flex:none;width:52px !important}
#cq-fmbox .cq-fmbx .cq-fmcost,#cq-fmbox .cq-fmf2 form .cq-fmcost{flex:1;min-width:0;text-align:right}
/* party: a dismissed character's card hops, tips over sideways and fades */
.cq-body #cq-ptbox .cq-pkick{pointer-events:none;z-index:2}
.cq-body #cq-ptbox .cq-pkick.cq-pkgo{animation:cq-pkick 1.25s cubic-bezier(.3,.1,.6,1) forwards}
@keyframes cq-pkick{0%{transform:translate(0,0) rotate(0);opacity:1}18%{transform:translate(2px,-12px) rotate(-3deg);opacity:1}40%{transform:translate(10px,-4px) rotate(8deg);opacity:1}100%{transform:translate(46px,70px) rotate(32deg);opacity:0}}

/* mercenary market, laid out like the first-party screen: a centred panel with 4 cards, the name, the price + [hire] */
#cq-rcbox .cq-rcv{display:flex;align-items:center;justify-content:center}
#cq-rcbox .cq-rcpanel{box-sizing:border-box;width:340px;display:flex;flex-direction:column;gap:6px;padding:8px 10px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:3px}
#cq-rcbox .cq-rcpick{font-size:6.6px;color:#ffe9b0;text-align:center}
#cq-rcbox .cq-rccards{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
#cq-rcbox .cq-rccard{box-sizing:border-box;padding:3px 2px 4px;text-align:center;background:linear-gradient(#2a1d16,#17100c);border:1px solid #6d533d;border-radius:3px;cursor:pointer}
#cq-rcbox .cq-rccard:hover{border-color:#b99c5b}
#cq-rcbox .cq-rccard.cq-sel{border-color:#ffd978;box-shadow:inset 0 0 0 1px #ffd97866,0 0 4px #ffb84a66;background:linear-gradient(#4a3420,#24180f)}
#cq-rcbox .cq-rccn{height:11px;line-height:11px;font-size:6.6px;font-weight:700;color:#ffe9b0}
#cq-rcbox .cq-rcimg{height:50px;display:flex;align-items:flex-end;justify-content:center}
#cq-rcbox .cq-rcimg img{image-rendering:pixelated}
#cq-rcbox .cq-rcsx{height:14px;display:flex;justify-content:center;align-items:center;gap:10px}
#cq-rcbox .cq-rcsx label{display:inline-flex;align-items:center;gap:2px;cursor:pointer}
#cq-rcbox .cq-rcsx input{margin:0;width:10px;height:10px}
#cq-rcbox .cq-rcpr{font-size:6.4px;color:#d5bf99}
#cq-rcbox .cq-rcpr b{color:#ffd978}
#cq-rcbox .cq-rcpoor .cq-rcpr b{color:#ff8a7a}
#cq-rcbox .cq-pic{width:8px;height:8px;vertical-align:-1px}
#cq-rcbox .cq-rcrow{display:grid;grid-template-columns:52px 120px minmax(0,1fr);align-items:center;gap:6px}
#cq-rcbox .cq-rcrow .cq-lbl{font-size:6.2px;font-weight:700;color:#ffd978}
#cq-rcbox .cq-rcrow .cq-in{box-sizing:border-box;width:100%;height:15px;font-size:6.4px;padding:0 5px}
#cq-rcbox .cq-rcrow .cq-mut{font-size:5.2px;color:#b29b80}
#cq-rcbox .cq-rcfoot{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:2px}
#cq-rcbox .cq-rccost{font-size:6.4px;color:#d5bf99}
#cq-rcbox .cq-rccost b{color:#ffd978;font-size:7px}
#cq-rcbox .cq-rccost b.cq-rcno{color:#ff8a7a}
/* mercenary market, two halves: cards 2x2 + name + hire (left, 160) | the class introduction (right) */
#cq-rcbox .cq-rcv{display:grid;grid-template-columns:160px minmax(0,1fr);gap:6px;align-items:stretch;justify-content:stretch}
#cq-rcbox .cq-rcl{min-height:0;display:flex;flex-direction:column;gap:5px}
#cq-rcbox .cq-rccards{grid-template-columns:repeat(2,1fr);gap:4px}
#cq-rcbox .cq-rcimg{height:44px}
#cq-rcbox .cq-rcrow{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin-top:auto}
#cq-rcbox .cq-rcrow .cq-lbl{font-size:6.2px}
#cq-rcbox .cq-rcfoot{display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:2px}
#cq-rcbox .cq-rcfoot .cq-btn{min-width:0 !important;width:80px !important}
#cq-rcbox .cq-rcr{min-height:0;display:flex}
#cq-rcbox .cq-rcr .cq-gddet{flex:1;min-height:0;overflow-y:auto;padding:4px 6px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:2px;font-size:6px;color:#efe5d2;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
#cq-rcbox .cq-rcnone{padding:30px 6px;text-align:center}
#cq-rcbox .cq-gdspr{opacity:.55}
#cq-rcbox .cq-gdspr.cq-on{opacity:1;border-color:#ffd978;box-shadow:0 0 4px #ffb84a66}
/* hire result: the new member drops in with a soft glow */
.cq-dlghire .cq-hirewho{position:relative;height:48px}
.cq-dlghire .cq-hirewho img{position:relative;z-index:1;image-rendering:pixelated;filter:none;animation:cq-hire-in .7s cubic-bezier(.2,1.5,.4,1) both}
.cq-dlghire .cq-hireglow{position:absolute;left:50%;bottom:-2px;width:60px;height:24px;margin-left:-30px;border-radius:50%;background:radial-gradient(ellipse,#ffd97866,transparent 70%);animation:cq-hire-glow 1.8s ease-in-out .5s infinite}
.cq-dlghire .cq-hirename{margin-bottom:2px}
.cq-dlghire .cq-dlgname{font-size:8px;color:#ffd978}
.cq-dlghire .cq-hirejob{font-size:6px;color:#d5bf99}
.cq-dlghire .cq-dlgf{gap:6px}
@keyframes cq-hire-in{0%{opacity:0;transform:translateY(-16px) scale(.8)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cq-hire-glow{0%,100%{opacity:.6}50%{opacity:1}}
.cq-body #cq-ptbox .cq-pkick.cq-pkgo{animation:cq-pkick2 1.1s linear forwards}
@keyframes cq-pkick2{0%{transform:translate(0.0px,0.0px) rotate(0.0deg);opacity:1}10%{transform:translate(4.8px,-9.0px) rotate(0.8deg);opacity:1}20%{transform:translate(9.6px,-13.4px) rotate(2.2deg);opacity:1}30%{transform:translate(14.4px,-13.4px) rotate(4.4deg);opacity:1}40%{transform:translate(19.2px,-9.0px) rotate(7.4deg);opacity:1.00}50%{transform:translate(24.0px,0.0px) rotate(11.0deg);opacity:0.83}60%{transform:translate(28.8px,13.4px) rotate(15.4deg);opacity:0.67}70%{transform:translate(33.6px,31.4px) rotate(20.4deg);opacity:0.50}80%{transform:translate(38.4px,53.8px) rotate(26.2deg);opacity:0.33}90%{transform:translate(43.2px,80.6px) rotate(32.8deg);opacity:0.17}100%{transform:translate(48.0px,112.0px) rotate(40.0deg);opacity:0.00}}

/* inn: one screen on gui_inn_background.png (640x320); the stay card top right, the guest book as a chat window bottom left */
#cq-innbox .cq-innv{position:relative;overflow:hidden;background:#120c0a url(../img/gui_inn_background.png) center / cover no-repeat;border:1px solid #6d533d;border-radius:3px;box-shadow:inset 0 0 18px #000c}
#cq-innbox .cq-innv:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0008,transparent 45%,transparent 60%,#0006);pointer-events:none}
#cq-innbox .cq-innstay{position:absolute;right:6px;top:6px;width:150px;box-sizing:border-box;padding:5px 7px 6px;background:#1a120dd9;border:1px solid #a8843c;border-radius:3px;box-shadow:0 2px 8px #000a;font-size:6px;color:#d5bf99}
#cq-innbox .cq-innstay .cq-chips{margin-bottom:3px}
#cq-innbox .cq-innstay .cq-pane2{display:none}
#cq-innbox .cq-innstay .cq-pane2.cq-pshow{display:block}
#cq-innbox .cq-innl{display:block;margin:0 0 2px;line-height:8.5px}
#cq-innbox .cq-innl b{color:#ffd978}
#cq-innbox .cq-innl .cq-pic,#cq-innbox .cq-innfoot .cq-pic{width:8px;height:8px;vertical-align:-1px;margin-left:1px}
#cq-innbox .cq-innstay .cq-stepper{display:flex;align-items:center;gap:3px;margin:3px 0}
#cq-innbox .cq-innfoot{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:4px}
#cq-innbox .cq-innfoot .cq-btn{min-width:0 !important;width:64px !important}
#cq-innbox .cq-innchat{position:absolute;left:6px;bottom:6px;width:250px;height:150px;display:flex;flex-direction:column;background:linear-gradient(#0c0806aa,#0c0806dd);border:1px solid #6d533d99;border-radius:3px;box-shadow:0 2px 8px #0008}
#cq-innbox .cq-innct{flex:none;padding:3px 7px 2px;font-size:6.4px;font-weight:700;color:#ffd978;border-bottom:1px solid #6d533d66}
#cq-innbox .cq-innlog{flex:1;min-height:0;overflow-y:auto;padding:3px 7px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
#cq-innbox .cq-innmsg{margin:0 0 2px;font-size:6.2px;line-height:9px;color:#efe5d2;text-shadow:0 1px 1px #000;word-break:keep-all;overflow-wrap:anywhere}
#cq-innbox .cq-innwho{margin-right:4px;color:#ffe9a8}
#cq-innbox .cq-inntime{margin-left:4px;font-style:normal;font-size:5px;color:#9c8a74}
#cq-innbox .cq-innnone{padding:10px 0;text-align:center}
#cq-innbox .cq-innsay{flex:none;display:flex;gap:3px;padding:4px;border-top:1px solid #6d533d66}
#cq-innbox .cq-innsay .cq-in{flex:1;min-width:0;height:15px;box-sizing:border-box;font-size:6.2px;padding:0 5px;background:#0b0d10cc}
#cq-innbox .cq-innsay .cq-btn{min-width:0 !important;width:48px !important}
#cq-innbox .cq-innsay{align-items:center}

/* colosseum: the panes on gui_colosseum_background.png (720x360), framed see-through windows on it */
#cq-cobox .cq-cov{position:relative;overflow:hidden;background:#120c0a url(../img/gui_colosseum_background.png) center 40% / cover no-repeat;border:1px solid #6d533d;border-radius:3px;box-shadow:inset 0 0 18px #000c}
#cq-cobox .cq-cov>.cq-pane2{position:absolute;inset:0;display:none;padding:8px 10px}
#cq-cobox .cq-cov>.cq-pane2.cq-pshow{display:flex;flex-direction:column}
.cq-body .cq-cowin{--ws:.2;position:relative;padding-top:calc(var(--wb) - 4px);color:#efe5d2}
.cq-body .cq-cowin>.cq-w9{opacity:.85}
.cq-body .cq-cowin>.cq-w9>.c{background:#1d1410}
.cq-body .cq-cowin>.cq-ttl{display:flex;align-items:center;gap:4px;font-size:6.8px;color:#ffd978}
#cq-cobox .cq-cowins{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:4px 10px 0}
#cq-cobox .cq-colist{display:flex;flex-direction:column}
.cq-body .cq-corow{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:4px;height:15px;padding:0 4px;border-bottom:1px solid #6d533d44;font-size:6.2px;color:#efe5d2}
.cq-body .cq-corow.cq-me{background:linear-gradient(90deg,#8e682b66,#8e682b22);box-shadow:inset 2px 0 0 #ffd978;color:#ffe9a8}
.cq-body .cq-cono{display:flex;align-items:center;justify-content:center;font-weight:700;color:#d5bf99}
.cq-body .cq-cono .cq-ui-icon{display:block;width:12px;height:12px;background-size:contain;background-position:center;background-repeat:no-repeat}
.cq-body .cq-coname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-body .cq-corec{font-size:5.4px;color:#b29b80;white-space:nowrap}
.cq-body .cq-corec b{color:#ffd978;font-weight:400}
#cq-cobox .cq-comy{margin-left:auto;font-size:7.4px;color:#fff}
#cq-cobox .cq-copad,#cq-lbox .cq-copad{padding:16px 6px;text-align:center}
#cq-cobox .cq-cogo{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px}
#cq-cobox .cq-cowait{padding:2px 6px;font-size:6.2px;color:#d5bf99;background:#0c0806cc;border-radius:2px}
#cq-cobox .cq-cowait b{color:#ff9a7a}
/* team (union picker look) */
#cq-cobox .cq-coteam{gap:16px}
#cq-cobox .cq-cotop{flex:none;margin:0 10px}
#cq-cobox .cq-cocnt{margin-left:auto;font-size:6px;color:#d5bf99}
#cq-cobox .cq-cocnt b{color:#ffd978;font-size:7px}
#cq-cobox .cq-coteam .cq-uslots{height:62px;display:grid;grid-template-columns:repeat(5,50px);grid-auto-rows:59px;gap:3px;justify-content:center;align-content:center}
#cq-cobox .cq-coact{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:3px;font-size:5.8px;color:#d5bf99}
#cq-cobox .cq-coact .cq-mut{margin-right:auto}
#cq-cobox .cq-coact .cq-cowait{margin-right:auto}
#cq-cobox .cq-coact .cq-btn{--bs:.34;min-width:0 !important;width:auto !important;padding:0 8px;font-size:6px}
#cq-cobox .cq-coact .cq-btn.cq-pri{width:76px !important}
#cq-cobox .cq-cobench{flex:1;min-height:0;margin:0 10px;display:flex;flex-direction:column}
#cq-cobox .cq-cobench>.cq-ttl i{font-style:normal;font-size:5.6px;color:#b29b80}
#cq-cobox .cq-cobench .cq-uhint{margin-left:auto;font-size:5.2px;color:#b29b80}
#cq-cobox .cq-coteam .cq-uchars{flex:1;min-height:0;grid-template-columns:repeat(8,50px);justify-content:center}
/* full ranking (?rank): two columns of ten on the colosseum picture, pages + [my place] */
.cq-body #cq-lbox.cq-rabox .cq-ra{position:absolute;left:8px;right:8px;top:25px;bottom:6px;display:flex;flex-direction:column;padding:6px 8px;background:linear-gradient(#0c0806b3,#0c0806d9),url(../img/gui_colosseum_background.png) center 40% / cover no-repeat;border:1px solid #6d533d;border-radius:3px}
#cq-lbox .cq-ralist{flex:1;min-height:0;display:grid;grid-template-rows:repeat(10,15px);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:14px;align-content:start}
#cq-lbox .cq-rafoot{flex:none;display:flex;align-items:center;gap:6px;margin-top:6px}
#cq-lbox .cq-ratot{flex:1;font-size:6px;color:#d5bf99}
#cq-lbox .cq-ratot b{color:#ffd978}
#cq-lbox .cq-rafoot .cq-btn{flex:none;min-width:0 !important;width:auto !important;margin-left:auto}
#cq-lbox .cq-rafoot>.cq-btn{flex:1;max-width:70px}
.cq-body .cq-corow .cq-coname{text-align:left}
#cq-cobox .cq-coteam{gap:6px;padding:4px 8px}
#cq-cobox .cq-coteam .cq-cowin{--ws:.14}
#cq-cobox .cq-coteam .cq-uslots{height:60px}
#cq-cobox .cq-coact{margin-top:1px}
#cq-lbox .cq-ralist{grid-template-rows:repeat(15,15px)}
#cq-lbox .cq-ralist{grid-template-rows:repeat(14,15px)}
/* full ranking footer: total | pages in the middle | [my place] (gui_button_small 88x28 -> 44x14) */
#cq-lbox .cq-rafoot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
#cq-lbox .cq-rasm{justify-self:end;box-sizing:border-box;width:44px;height:14px;padding:0;border:0;background:url(../img/gui_button_small.png) center / 100% 100% no-repeat;font-size:5.2px;line-height:14px;text-align:center;color:#e8d8b8;cursor:pointer}
#cq-lbox .cq-rasm:hover:not(:disabled){filter:brightness(1.25);color:#ffd978}
#cq-lbox .cq-rasm:disabled{opacity:.45;cursor:default}
#cq-cobox .cq-cov>.cq-pane2[data-pane=team]{padding:0}
#cq-cobox .cq-coteam{flex:1;min-height:0;display:flex;flex-direction:column}
/* colosseum v2: frame centre = the frame's own inside colour (no darker middle), even rows, one team window */
.cq-body .cq-cowin>.cq-w9>.c{background:#2b1d18}
.cq-body .cq-corow{box-sizing:border-box;height:14px;min-height:14px;max-height:14px;overflow:hidden}
.cq-body .cq-cono .cq-ui-icon{width:11px;height:11px}
#cq-cobox .cq-cowins{padding:2px 10px 0}
#cq-cobox .cq-cogo{justify-content:space-between;margin-top:4px}
#cq-cobox .cq-conote{max-width:300px;padding:2px 6px;font-size:5.6px;line-height:8px;color:#e8dcc6;background:#0c0806cc;border-radius:2px}
#cq-cobox .cq-coteamw{flex:1;min-height:0;margin:4px 8px;display:flex;flex-direction:column}
#cq-cobox .cq-coteamw .cq-uslots{flex:none;height:60px}
#cq-cobox .cq-cobench{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:4px;padding-top:4px;border-top:1px solid #6d533d99}
#cq-cobox .cq-cobh{flex:none;display:flex;align-items:center;gap:4px;height:11px;margin-bottom:2px;font-size:6.6px;font-weight:700;color:#ffd978}
#cq-cobox .cq-cobh i{font-style:normal;font-weight:400;font-size:5.6px;color:#b29b80}
#cq-cobox .cq-cobh .cq-uhint{margin-left:auto;font-weight:400}
#cq-cobox .cq-coteam .cq-uchars{grid-template-columns:repeat(7,50px);grid-auto-rows:59px;gap:1px;justify-content:center;max-height:119px}
.cq-body .cq-cowin{padding-top:8px}
.cq-body .cq-cowin>.cq-ttl{height:16px;line-height:16px}
/* team window: two rows of characters fit */
#cq-cobox .cq-coteamw{margin:1px 8px}
#cq-cobox .cq-coteamw>.cq-ttl{height:13px;line-height:13px}
#cq-cobox .cq-coteamw .cq-uslots{height:59px}
#cq-cobox .cq-coact{height:15px;margin-top:0}
#cq-cobox .cq-cobench{margin-top:2px;padding-top:2px}
#cq-cobox .cq-cobh{height:10px;margin-bottom:1px}
/* team: no title row; "team / 4 / 5" sits at the left of the seats, the seats move up, room above the buttons */
#cq-cobox .cq-cotrow{position:relative;flex:none;margin-top:2px}
#cq-cobox .cq-cotlab{position:absolute;left:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}
#cq-cobox .cq-cotlab>b{font-size:6.8px;color:#ffd978}
#cq-cobox .cq-cotlab .cq-cocnt{margin:0;font-size:6px;color:#d5bf99}
#cq-cobox .cq-coact{margin-top:6px}

/* basic tutorial: the instructor's lines (party > training) and the document (also the "?tutorial" page) */
.cq-body .cq-tutin{position:absolute;inset:0;display:flex;flex-direction:column;gap:5px}
.cq-body .cq-tlines{flex:none;padding:5px 8px;background:linear-gradient(#3a1810dd,#1d0c08dd);border:1px solid #8a3a2a;border-radius:3px;box-shadow:inset 0 0 8px #000}
.cq-body .cq-tlines p{margin:0;font-size:6.4px;line-height:9.6px;color:#ff9a5a;text-shadow:0 1px 1px #000}
.cq-body .cq-tlines p:before{content:"\25B8 ";color:#ffd978}
.cq-body .cq-tdoc{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 6px;background:linear-gradient(#2a1e17ee,#1a120fee);border:1px solid #6d533d;border-radius:3px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-body .cq-tsec{margin:0 0 8px}
.cq-body .cq-tsec h4{margin:4px 0 3px;padding-left:4px;border-left:2px solid #ffd978;font-size:7.4px;color:#ffd978}
.cq-body .cq-tsec ul{margin:2px 0 0;padding-left:10px}
.cq-body .cq-tsec li{margin:0 0 2px;font-size:6.2px;line-height:9px;color:#efe5d2}
.cq-body .cq-tsec li b{color:#ffe9b0}
.cq-body .cq-tsec li em{font-style:normal;font-weight:700;color:#ff8a6a}
.cq-body .cq-timg{text-align:center;margin:2px 0 4px}
.cq-body .cq-timg img{max-width:100%;height:auto;border:1px solid #6d533d;border-radius:2px;image-rendering:pixelated}
/* still copy of the action pattern list */
.cq-body .cq-tpat{margin:2px 0 5px;padding:5px 6px;background:#120c0acc;border:1px solid #6d533d;border-radius:3px;font-size:5.8px;color:#d5bf99}
.cq-body .cq-tpform{display:flex;align-items:center;gap:6px;padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid #6d533d66}
.cq-body .cq-tpl{color:#b29b80}
.cq-body .cq-tprd{display:inline-flex;align-items:center;gap:2px;color:#efe5d2}
.cq-body .cq-tprd:before{content:"";width:8px;height:8px;background:url(../img/gui_radio_box.png) center / contain no-repeat}
.cq-body .cq-tprd.cq-on:before{background-image:url(../img/gui_radio_box_check.png)}
.cq-body .cq-tpsel{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-between;min-width:0;height:13px;padding:0 4px;color:#efe5d2;background:#0b0d10;border:1px solid #79613c;border-radius:2px;white-space:nowrap;overflow:hidden}
.cq-body .cq-tpsel:after{content:"\25BE";margin-left:4px;color:#d5bf99}
.cq-body .cq-tphead,.cq-body .cq-tprow{display:grid;grid-template-columns:22px minmax(0,1.3fr) 30px minmax(0,1.3fr);gap:4px;align-items:center}
.cq-body .cq-tphead{padding:0 0 2px;color:#b29b80;font-size:5.4px}
.cq-body .cq-tprow{height:16px;border-top:1px solid #6d533d44}
.cq-body .cq-tpno{color:#ffd978;font-weight:700;text-align:center}
.cq-body .cq-tpno:before{content:"\2630 ";color:#8a7a68;font-weight:400}
.cq-body .cq-tpval{box-sizing:border-box;height:13px;line-height:11px;text-align:center;color:#efe5d2;background:#0b0d10;border:1px solid #79613c;border-radius:2px}
/* "?tutorial" page window */
.cq-body #cq-lbox.cq-tutbox .cq-tutwrap{position:absolute;left:8px;right:8px;top:25px;bottom:6px;display:flex;flex-direction:column;gap:4px}
.cq-body #cq-lbox.cq-tutbox .cq-tut{flex:1;min-height:0;display:flex;flex-direction:column}
.cq-body #cq-lbox.cq-tutbox .cq-tutfoot{flex:none;display:flex;justify-content:center}
.cq-body #cq-ptbox .cq-pane2[data-pane=train]{position:relative;flex:1;min-height:0}
/* the instructor's original scrolling lines; the battle layout picture at its own size (480x200 -> 240x100) */
.cq-body .cq-tutin>.cq-tut{flex:1;min-height:0;display:flex;flex-direction:column}
.cq-body .cq-tmq{font-size:6.4px;line-height:9.6px}
.cq-body .cq-tmq marquee{display:block;height:58px}
.cq-body .cq-tmq font{color:#ff8811}
.cq-body .cq-timg img{width:240px;height:100px;max-width:none}
/* the instructor's lines: up from under the box until the last line has left it, then again (hover = pause) */
.cq-body .cq-tmq{height:58px;overflow:hidden;color:#ff8811}
.cq-body .cq-tmqin{animation:cq-tmq 38s linear infinite}
.cq-body .cq-tmq:hover .cq-tmqin{animation-play-state:paused}
@keyframes cq-tmq{0%{transform:translateY(58px)}100%{transform:translateY(-100%)}}
.cq-body #cq-cbox .cq-form select[name=guard]{width:140px}
#cq-apbox .cq-bar i{transition:width 1s linear}
#cq-hud #cq-apbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* town chat window: a thinner frame (the shared side window rule above uses a 26px top band); the title sits in the dark band of the top edge */
.cq-body #cq-tchat{--ws:.14;padding-top:4px}

/* ONE page list for every list with pages (colosseum ranking, mine ranking, news): number boxes, plain arrow glyphs; buttons (js: cqPager in cq.js) or links (news) */
.cq-body .cq-pgr{display:flex;justify-content:center;align-items:center;gap:2px}
.cq-body .cq-pgr>*{box-sizing:border-box;display:inline-block;min-width:14px;height:14px;padding:0 3px;margin:0;font-size:6px;line-height:12px;text-align:center;color:#d5bf99;background:#241814;border:1px solid #6d533d;border-radius:2px;text-decoration:none;cursor:pointer}
.cq-body .cq-pgr>*:hover:not(:disabled):not(.cq-dis),.cq-body .cq-pgr>a:focus-visible{border-color:#e5bd70;color:#ffd978;outline:none}
.cq-body .cq-pgr>:disabled,.cq-body .cq-pgr>.cq-dis{opacity:.4;cursor:default}
.cq-body .cq-pgr>.cq-on{color:#2a1a0a;background:linear-gradient(#ffe39a,#d9a54a);border-color:#ffd978;font-weight:700}
.cq-body .cq-pgr>.cq-raar{min-width:10px;padding:0 2px;font-family:Georgia,serif;font-size:10.8px;color:#e8d3a3;background:none;border:0}
.cq-body .cq-pgr>.cq-raar:hover:not(:disabled):not(.cq-dis){color:#ffd978}

/* ---- field map detail (view/common.php): the union screen's layout. Left = the map and its monsters (1x), top right = party slots, bottom right = all my characters ---- */
.cq-body #cq-mbox.cq-fldbox .cq-uform{grid-template-columns:172px minmax(0,1fr)}
.cq-fldbox .cq-umon{grid-row:1 / -1;align-items:stretch;overflow:hidden}
.cq-fldbox .cq-ubench{grid-column:2}
.cq-fldbox .cq-uchars{grid-template-columns:repeat(7,50px);justify-content:center}
.cq-fldbox .cq-fmap{flex:none;display:flex;align-items:center;gap:5px;margin:0 0 3px}
.cq-fldbox .cq-fmap img{flex:none;width:24px;height:24px;image-rendering:pixelated;image-rendering:crisp-edges}
.cq-fldbox .cq-fmap b{display:block;font-size:7.6px;line-height:10px;color:#ffd978}
.cq-fldbox .cq-fmlv{display:block;font-size:5.6px;line-height:7px;color:#ff9a8a}
.cq-fldbox .cq-fmexp{flex:none;margin:0 0 4px;padding:0 0 4px;border-bottom:1px solid #6d533d66;font-size:5.4px;line-height:7px;color:#b29b80;word-break:keep-all}
.cq-fldbox .cq-fml{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-fldbox .cq-fmc{display:flex;align-items:center;gap:4px;margin:0 0 3px;padding:0 3px;background:#120c0a;border:1px solid #4a3628;border-radius:2px}
.cq-fldbox .cq-fmf{position:relative;flex:none}
.cq-fldbox .cq-fmf .cq-unt{position:absolute;left:50%;bottom:2px;width:61px;height:27px;margin-left:-30.5px;background:center / 100% 100% no-repeat}
.cq-fldbox .cq-fmf img{position:absolute;left:50%;bottom:14px;max-width:none;transform:translateX(-50%);image-rendering:pixelated;image-rendering:crisp-edges}
.cq-fldbox .cq-fmn{flex:1;min-width:0}
.cq-fldbox .cq-fmn b{display:block;font-size:6.4px;line-height:8px;color:#ffe9b0;word-break:keep-all;overflow-wrap:anywhere}
.cq-fldbox .cq-fmn i{display:block;font-style:normal;font-size:5.6px;line-height:7px;color:#d5bf99}
.cq-body #cq-mbox.cq-fldbox .cq-uform{top:24px;gap:2px 4px}
.cq-fldbox .cq-uact{margin-top:1px}

/* a dead summon leaves the stage */
.cq-body .cq-bu.cq-gone{opacity:0;pointer-events:none;transition:opacity .5s}

/* settings: password change box above the delete box (right column) */
#cq-setbox .cq-setpwc{flex:none}
#cq-setbox .cq-setpwc .cq-setpw{margin:3px 0}
#cq-setbox .cq-setpwc .cq-setpw>span{flex:0 0 56px}
#cq-setbox .cq-setpwc .cq-setpwr{margin:2px 0 3px;font-size:5.2px;line-height:7px}