/* CONQUEST AGE UI design system (M1) ---------------------------------------
   - Logical resolution 640x360 (16:9). The whole #cq-game is scaled by js/cq.js (integer scale first).
   - All shell classes use the cq- prefix. Legacy page bodies are styled by legacy.css, scoped under #cq-lgi.
   - Source images are shown at 1x; enlarge only by whole numbers (2x, 3x). Never stretch.
--------------------------------------------------------------------------- */
:root{
  --cq-bg:#1a1210; --cq-panel:#2a1d19; --cq-panel2:#35261f; --cq-line:#5a4038;
  --cq-text:#ffe6d9; --cq-muted:#b58a78; --cq-accent:#ffcf6b;
  --cq-ok:#7fd18b; --cq-bad:#ff6b5e; --cq-info:#6bb6ff; --cq-hp:#d9534f; --cq-sp:#4f8bd9;
}
*{box-sizing:border-box}
html,body.cq-body{margin:0;height:100%;overflow:hidden;background:#0b0706;color:var(--cq-text);
  font:7.2px/1.35 'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif;touch-action:manipulation}
.cq-body button,.cq-body input{font:inherit;color:inherit}

#cq-frame{position:absolute}
#cq-game{position:absolute;left:0;top:0;width:640px;height:360px;overflow:hidden;background:var(--cq-bg);transform-origin:0 0}

/* landscape guard */

/* HUD (top 24px) */
#cq-hud{position:absolute;left:0;top:0;width:640px;height:24px;background:#120c0a;border-bottom:1px solid var(--cq-line);z-index:5}
.cq-party{position:absolute;left:8px;top:3px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cq-accent);font-weight:700}
.cq-st{position:absolute;top:4px;display:flex;align-items:center;font-size:6.6px}
.cq-st>*{margin-right:5px}
.cq-st b{color:var(--cq-accent)}
.cq-ap{left:235px}.cq-ap .cq-bar{width:90px}.cq-ap .cq-bar>i{background:var(--cq-info)}
.cq-gil{right:8px}.cq-gil>*{margin-right:0;margin-left:5px}
#cq-login{position:absolute;right:6px;top:1px;display:flex;align-items:center;margin:0}
#cq-login>*{margin-left:4px}
.cq-in{width:84px;height:15px;background:#120c0a;border:1px solid var(--cq-line);padding:0 4px;color:var(--cq-text)}
.cq-in:focus{border-color:var(--cq-accent);outline:none}

/* legacy viewport: old page body, scaled so the old 780px layout fits 640px */
#cq-view{position:absolute;left:0;top:24px;width:640px;height:308px;background:var(--cq-bg)}
#cq-lg{position:absolute;left:0;top:0;right:0;bottom:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
#cq-lg::-webkit-scrollbar{width:8px;height:8px}
#cq-lg::-webkit-scrollbar-track{background:#120c0a;border-left:1px solid var(--cq-line)}
#cq-lg::-webkit-scrollbar-thumb{background:var(--cq-accent);border:1px solid #120c0a}
#cq-lgs{position:relative;overflow:hidden}
#cq-lgi{width:780px;transform-origin:0 0;position:absolute;left:0;top:0}

/* bottom bar (28px) */
#cq-bar{position:absolute;left:0;bottom:0;width:640px;height:28px;background:#120c0a;border-top:1px solid var(--cq-line);z-index:5;padding:3px 8px}
#cq-bar .cq-btn{margin-right:4px}
.cq-hint{position:absolute;right:8px;top:7px;font-size:6px;color:var(--cq-muted)}

/* components ------------------------------------------------------------ */
/* size, the three background pieces and the margins of the button are in ui9.css */
.cq-btn{display:inline-block;outline:none;font-size:5.4px;color:#f4e3bd;text-shadow:0 1px 1px #000a;text-decoration:none;cursor:pointer;vertical-align:middle;white-space:nowrap;text-align:center;font-weight:normal}
.cq-btn:hover,.cq-btn:focus-visible{filter:brightness(1.3);color:#fff3d2;outline:none}
.cq-btn:focus{outline:none}
.cq-btn.cq-on,.cq-btn[aria-pressed=true]{filter:brightness(1.22);color:var(--cq-accent)}
.cq-btn.cq-pri{color:#ffe08a;font-weight:700;filter:brightness(1.08)}
.cq-btn.cq-pri:hover{filter:brightness(1.4);color:#fff0b8}
.cq-btn[disabled]{opacity:.4;cursor:default;filter:none}
.cq-win{position:absolute;background:var(--cq-panel);border:1px solid var(--cq-line);box-shadow:0 0 0 1px #0b0706 inset,0 0 0 2px #3b2a24 inset}
.cq-ttl{height:18px;line-height:17px;padding:0 8px;color:var(--cq-accent);font-weight:700;font-size:6.6px;border-bottom:1px solid var(--cq-line);background:#35261f}
.cq-bar{height:5px;background:#0b0706;border:1px solid #000}
.cq-bar>i{display:block;height:100%;transition:width .3s}
.cq-bar.cq-hp>i{background:var(--cq-hp)}
.cq-mut{color:var(--cq-muted)}.cq-sm{font-size:6px}

/* native scenes (city / title): full stage, under the HUD and the bottom bar ----------------------------
   The city art is a painted 1280x720 picture shown at 640x360 (exactly 2x). Painted art must be smoothed,
   not pixelated, so .cq-art overrides the global pixel rule. */
.cq-scene{position:absolute;left:0;top:0;width:640px;height:360px;z-index:1;overflow:hidden}
.cq-body .cq-art{position:absolute;left:0;top:0;width:640px;height:360px}
.cq-art.cq-dim{filter:brightness(.55) saturate(.9)}

/* building name tags (positions from the reference image; all tags share one size) */
.cq-tag{position:absolute;width:74px;height:18px;padding:0;line-height:16px;text-align:center;font-size:6.6px;font-weight:700;background:#2a1d19ee;border:1px solid var(--cq-accent);color:var(--cq-text);box-shadow:0 1px 0 #000;white-space:nowrap;cursor:pointer;z-index:3}
.cq-tag:hover,.cq-tag.cq-hl,.cq-tag:focus{background:var(--cq-accent);color:#2a1a0a;outline:none}
#cq-tip{display:none;z-index:40;padding:3px 8px;white-space:nowrap;pointer-events:none;background:#120c0af2}
#cq-tip.cq-show{display:block}
#cq-msg{left:150px;top:282px;width:340px;height:46px;padding:3px 10px;background:#241814e6;text-align:center;z-index:3;line-height:1.25}
.cq-notice{color:#9fd4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-plz{position:absolute;left:500px;top:294px;z-index:3;background:#241814e6}

/* NPC dialog */
#cq-dlg{left:50px;top:204px;width:540px;height:124px;display:none;z-index:20;background:#241814}
#cq-dlg.cq-show{display:block}
#cq-dlg .cq-pt{position:absolute;left:10px;top:12px;width:100px;height:100px;border:1px solid var(--cq-line);background:#120c0a;padding:1px}
#cq-dlg .cq-dnm{position:absolute;left:124px;top:8px;color:var(--cq-accent);font-weight:700;font-size:7.8px}
#cq-dlg .cq-dtx{position:absolute;left:124px;top:30px;right:12px;height:42px}
#cq-dlg .cq-dch{position:absolute;left:124px;bottom:10px}
#cq-dlg .cq-dch .cq-btn{margin-right:6px}
#cq-dlg .cq-dx{position:absolute;right:6px;top:4px;height:18px;line-height:16px;padding:0 6px}

/* title (guest) screen */
.cq-logo{position:absolute;left:0;right:0;top:46px;text-align:center;font-size:18px;font-weight:700;letter-spacing:2px;color:var(--cq-accent);text-shadow:0 2px 0 #000,0 0 14px #000;z-index:2}
.cq-logo img{display:block;width:300px;height:85px;object-fit:contain;margin:0 auto}
#cq-tbox{left:195px;top:140px;width:250px;height:130px;background:#241814f2;z-index:3}
#cq-tbox .cq-bd{position:absolute;left:12px;right:12px;top:26px}
#cq-tbox .cq-row{display:flex;align-items:center;margin-bottom:8px}
#cq-tbox .cq-lbl{width:62px;color:var(--cq-muted)}
#cq-tbox .cq-w{width:150px}
#cq-tbox .cq-end{justify-content:flex-end}
#cq-tbox .cq-end>*{margin-left:6px}

/* form views (new account, first login) */
.cq-wbox{z-index:3;background:#241814f2}
.cq-wbox .cq-bd{position:absolute;left:12px;right:12px;top:26px}
.cq-wbox .cq-row{display:flex;align-items:center;margin-bottom:8px}
.cq-wbox .cq-row>*{margin-right:6px}
.cq-wbox .cq-lbl{width:74px;color:var(--cq-muted)}
.cq-wbox .cq-end{justify-content:flex-end;margin-right:0}
.cq-wbox .cq-w{width:170px}
.cq-err{background:#4a1f1a;border:1px solid var(--cq-bad);color:#ffb3a8;padding:2px 8px;margin-bottom:8px}
.cq-warn{color:#ff8a70;margin:4px 0 6px;line-height:1.4}
.cq-chk{display:block;margin-bottom:8px;cursor:pointer}
.cq-msgbox{padding:20px 0;text-align:center;color:var(--cq-accent)}
#cq-nbox{left:90px;top:44px;width:460px;height:268px}
#cq-fbox{left:36px;top:30px;width:568px;height:298px}
.cq-flash{position:absolute;left:150px;width:340px;top:100px;text-align:center;background:#1d3a24ee;border:1px solid var(--cq-ok);color:#c8f5d0;padding:3px 8px;z-index:3}
.cq-cards{display:flex;justify-content:space-between;margin:2px 0 8px}
.cq-card{width:128px;height:150px;background:var(--cq-panel2);border:1px solid var(--cq-line);text-align:center}
.cq-card.cq-sel{border-color:var(--cq-accent);box-shadow:0 0 0 1px var(--cq-accent) inset}
.cq-card .cq-cn{height:22px;line-height:22px;font-weight:700;font-size:6.6px}
.cq-card .cq-cimg{height:90px;display:flex;align-items:flex-end;justify-content:center}
.cq-card .cq-cimg img{display:block}
.cq-card .cq-sx{height:30px;display:flex;justify-content:center;align-items:center}
.cq-card .cq-sx label{display:inline-flex;align-items:center;margin:0 6px;cursor:pointer}
.cq-card .cq-sx input{margin:0 3px 0 0}

/* character detail & growth view ------------------------------------------------------------------- */
#cq-cbox,#cq-hbox,#cq-mbox,#cq-sbox,#cq-ibox,#cq-setbox,#cq-lbox,#cq-fbox{left:4px;top:28px;width:632px;height:300px;background:#1d1512;z-index:3}
.cq-clist{position:absolute;left:6px;top:24px;width:112px;bottom:6px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-cc{display:block;position:relative;min-height:44px;margin-bottom:4px;padding:4px 4px 4px 50px;background:var(--cq-panel2);border:1px solid var(--cq-line);color:var(--cq-text);text-decoration:none;font-size:6.6px}
.cq-cc img{position:absolute;left:3px;top:3px;max-width:44px;max-height:38px}
.cq-cc b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cq-cc i{display:block;font-style:normal;color:var(--cq-muted);font-size:6px}
.cq-cc:hover,.cq-cc.cq-on{border-color:var(--cq-accent)}
.cq-cc.cq-on{background:#3d2a22}
.cq-tabs{position:absolute;left:124px;right:6px;top:24px;height:22px}
.cq-tb{background:var(--cq-panel2);border:1px solid var(--cq-line);border-bottom:0;height:22px;padding:0 12px;margin-right:2px;color:var(--cq-muted);cursor:pointer}
.cq-tb.cq-act{background:#3d2a22;color:var(--cq-accent);border-color:var(--cq-accent)}
.cq-panes{position:absolute;left:124px;right:6px;top:46px;bottom:6px;border:1px solid var(--cq-line);background:#241814;overflow:auto;padding:8px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-pane{display:none}.cq-pane.cq-act{display:block}
.cq-panes::-webkit-scrollbar,.cq-clist::-webkit-scrollbar{width:8px}
.cq-panes::-webkit-scrollbar-track,.cq-clist::-webkit-scrollbar-track{background:#120c0a}
.cq-panes::-webkit-scrollbar-thumb,.cq-clist::-webkit-scrollbar-thumb{background:var(--cq-accent);border:1px solid #120c0a}
.cq-sg{display:flex;align-items:flex-start;margin-bottom:8px}
.cq-por{width:104px;text-align:center;margin-right:10px}
.cq-por img{margin:0 auto 4px;display:block;max-width:100px}
.cq-pn{font-weight:700;color:var(--cq-accent)}
.cq-st2{border-collapse:collapse;margin-right:12px}
.cq-st2 th{color:var(--cq-accent);text-align:left;font-weight:700;padding:1px 10px 1px 0;font-size:6.6px}
.cq-st2 td{padding:1px 0;font-size:6.6px}
.cq-st2 em{font-style:normal;color:#8899ff}
.cq-c-dmg{color:#ff8a7a}.cq-c-mag{color:#c38cff}.cq-c-def{color:var(--cq-ok)}.cq-c-mdef{color:var(--cq-info)}
.cq-sp{margin-left:8px;font-size:6.6px;line-height:1.5}
.cq-box{margin-bottom:8px;padding:6px;border:1px solid var(--cq-line);background:#1d1512}
.cq-boxh{color:var(--cq-accent);font-weight:700;margin:2px 0 4px;font-size:6.6px}
.cq-boxb{margin-bottom:6px}
.cq-up{display:flex;align-items:center;flex-wrap:wrap}
.cq-up label{margin-right:8px;font-size:6.6px}
.cq-up select,.cq-pt select,.cq-box select{background:#120c0a;border:1px solid var(--cq-line);color:var(--cq-text);height:15px;font:inherit}
.cq-acts{display:flex}.cq-acts form{margin:0 6px 0 0}
.cq-danger:hover{border-color:var(--cq-bad);color:var(--cq-bad)}
.cq-pt{border-collapse:separate;border-spacing:3px;margin-bottom:6px}
.cq-pt th{background:#3d2a22;color:var(--cq-accent);font-size:6px;padding:1px 6px;font-weight:700}
.cq-pt td{font-size:6.6px}.cq-pt .cq-n{text-align:center;color:var(--cq-muted)}
.cq-pt select{max-width:230px}.cq-q{width:46px}
.cq-pt option.cq-o0{background:#3d2a22;color:var(--cq-accent)}
.cq-pane .cq-row{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.cq-pane .cq-row>*{margin-right:6px}
.cq-pane .cq-end{justify-content:flex-end}
.cq-pane .cq-lbl,.cq-wbox .cq-pane .cq-lbl{width:auto;color:var(--cq-muted)}
.cq-eq{border-collapse:separate;border-spacing:0 3px;width:100%}
.cq-eq th{width:40px;color:var(--cq-accent);font-size:6.6px;text-align:left}
.cq-eq td{font-size:6.6px;vertical-align:middle}
.cq-eq td:nth-child(2){width:26px}
.cq-cls{display:flex;justify-content:center;margin:6px 0}
.cq-cls label{text-align:center;margin:0 18px;cursor:pointer}
.cq-frag{display:block;font-size:6.6px;text-align:left}
.cq-frag table{border-collapse:collapse}
/* old-style messages / confirmation forms printed by the game's Process code */
#cq-pre{left:20px;top:56px;width:592px;max-height:240px;z-index:30;background:#241814;display:block;overflow:hidden}
.cq-prew{position:relative;overflow-x:hidden;overflow-y:auto;max-height:190px;padding:4px;background:#241814;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-prew::-webkit-scrollbar{width:8px}
.cq-prew::-webkit-scrollbar-track{background:#120c0a}
.cq-prew::-webkit-scrollbar-thumb{background:var(--cq-accent);border:1px solid #120c0a}
.cq-prein{width:748px;transform-origin:0 0;transform:scale(.78)}
.cq-prex{position:absolute;right:6px;top:2px;height:18px;line-height:16px;padding:0 6px}

/* options window */
#cq-opt{left:150px;top:60px;width:340px;height:200px;display:none;z-index:50;background:#241814}
#cq-opt.cq-show{display:block}
#cq-opt .cq-bd{position:absolute;left:12px;right:12px;top:26px}
#cq-opt .cq-row{display:flex;align-items:center;margin-bottom:8px}
#cq-opt .cq-row>*{margin-right:6px}
#cq-opt .cq-lbl{width:64px;color:var(--cq-muted)}
#cq-opt .cq-cl{position:absolute;right:10px;bottom:10px}
#cq-toast{position:absolute;left:50%;top:296px;transform:translateX(-50%);background:#120c0a;border:1px solid var(--cq-accent);padding:3px 10px;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
#cq-toast.cq-show{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* field map list + map detail / party selection ------------------------------------------------------- */
.cq-hcol{position:absolute;top:26px;bottom:6px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-hmaps{left:8px;width:372px}.cq-hunion{left:390px;right:8px}
.cq-hcol::-webkit-scrollbar,.cq-pcs::-webkit-scrollbar,.cq-mmons::-webkit-scrollbar{width:8px}
.cq-hcol::-webkit-scrollbar-track,.cq-pcs::-webkit-scrollbar-track,.cq-mmons::-webkit-scrollbar-track{background:#120c0a}
.cq-hcol::-webkit-scrollbar-thumb,.cq-pcs::-webkit-scrollbar-thumb,.cq-mmons::-webkit-scrollbar-thumb{background:var(--cq-accent);border:1px solid #120c0a}
.cq-map{display:flex;align-items:center;height:36px;margin-bottom:4px;padding:0 8px;background:var(--cq-panel2);border:1px solid var(--cq-line);color:var(--cq-text);text-decoration:none}
.cq-map:hover{border-color:var(--cq-accent);background:#3d2a22}
.cq-map img{margin-right:8px}
.cq-map b{width:110px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--cq-accent)}
.cq-mp{width:92px;color:#ff8a7a;font-size:6.6px;overflow:hidden;white-space:nowrap}
.cq-me{flex:1;font-size:6.6px;color:var(--cq-muted);text-align:right;overflow:hidden;white-space:nowrap}
.cq-un{display:flex;align-items:flex-end;position:relative;min-height:60px;margin-bottom:6px;padding:0 6px;background:#120c0a no-repeat left bottom;border:1px solid var(--cq-line);color:var(--cq-text);text-decoration:none}
.cq-un:hover{border-color:var(--cq-accent)}
.cq-un img{margin-bottom:2px;max-width:140px}
.cq-un-t{margin-left:8px;align-self:center;font-size:6.6px}
.cq-un-t b{display:block;color:var(--cq-bad)}
.cq-un-t i{display:block;font-style:normal;color:var(--cq-muted);font-size:6px}
.cq-mhead{position:absolute;left:8px;right:8px;top:24px;height:30px;display:flex;align-items:center;border-bottom:1px solid var(--cq-line)}
.cq-mhead img{margin-right:8px}.cq-mhead b{color:var(--cq-accent);margin-right:10px}
.cq-mhead .cq-mp{width:auto;margin-right:10px}.cq-mhead .cq-me{flex:none;margin-right:14px;text-align:left}
.cq-mi{margin-left:auto;font-size:6.6px;color:var(--cq-muted)}.cq-mi b{color:var(--cq-text);margin:0}
.cq-mparty{position:absolute;left:8px;top:60px;width:392px;bottom:6px;margin:0}
.cq-pcs{height:158px;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a;margin-bottom:6px}
.cq-pc{position:relative;display:block;margin:0 4px 4px 0;cursor:pointer}
.cq-pcx{position:absolute;opacity:0;left:0;top:0}
.cq-pcb{display:block;width:122px;height:94px;padding-top:4px;border:1px solid var(--cq-line);background:var(--cq-panel2);text-align:center}
.cq-pcb img{margin:0 auto;display:block;max-height:60px}
.cq-pcb b{display:block;font-size:6.6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 4px}
.cq-pcb b em{font-style:normal;color:var(--cq-accent)}
.cq-pcb i{display:block;font-style:normal;font-size:6px;color:var(--cq-muted)}
.cq-pcx:checked+.cq-pcb{border-color:var(--cq-accent);background:#3d2a22;box-shadow:0 0 0 1px var(--cq-accent) inset}
.cq-pcx:focus+.cq-pcb{outline:1px dotted var(--cq-accent)}
.cq-mmons{position:absolute;right:8px;top:60px;width:216px;bottom:6px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-mm{display:flex;align-items:flex-end;height:56px;margin-bottom:4px;padding:0 4px;background:#120c0a no-repeat left bottom;border:1px solid var(--cq-line)}
.cq-mm img{margin-bottom:2px}
.cq-mm span{margin-left:6px;align-self:center;font-size:6.6px}.cq-mm b{display:block}
.cq-mm i{display:block;font-style:normal;color:var(--cq-muted);font-size:6px}

/* battle replay controls (bottom bar while a battle page is shown) */
#cq-bar.cq-battle>.cq-btn:not(.cq-bc),#cq-bar.cq-battle>.cq-hint{display:none}
#cq-bar .cq-bgrp{display:none}#cq-bar.cq-battle .cq-bgrp{display:inline-block}
#cq-bar .cq-bgrp .cq-btn{margin-right:4px}
@keyframes cq-rowin{from{opacity:0}to{opacity:1}}
.cq-rowin{animation:cq-rowin .35s ease-out}
body.cq-noanim .cq-rowin{animation:none}

/* shop / inventory / settings / battle logs --------------------------------------------------------- */
.cq-sform{position:absolute;left:8px;right:8px;top:24px;bottom:6px;margin:0;display:flex;flex-direction:column}
.cq-shead{position:relative;flex:none;height:98px;padding-left:108px}
.cq-spt{position:absolute;left:0;top:0;width:96px;height:96px;display:block;border:1px solid var(--cq-line);background:#120c0a;z-index:2}
.cq-shi{font-size:6.6px;line-height:1.35;height:54px;overflow:hidden;padding-top:2px;text-align:left}
.cq-stabs{margin-top:4px}.cq-stabs .cq-btn{margin-right:4px}
.cq-smoney{position:absolute;right:0;top:78px;font-size:6.6px;color:var(--cq-muted)}.cq-smoney b{color:var(--cq-accent)}
.cq-sform .cq-sfilter{flex:none;display:flex;flex-wrap:wrap;align-items:center;margin:2px 0 4px 0}
.cq-chip{background:var(--cq-panel2);border:1px solid var(--cq-line);height:18px;line-height:16px;padding:0 8px;margin:0 3px 3px 0;color:var(--cq-muted);font-size:6px;cursor:pointer}
.cq-chip.cq-on,.cq-chip:hover{border-color:var(--cq-accent);color:var(--cq-accent)}
.cq-slist{position:static;flex:1;min-height:0;overflow:auto;border:1px solid var(--cq-line);background:#241814;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-ilist{}
.cq-slist::-webkit-scrollbar{width:8px}.cq-slist::-webkit-scrollbar-track{background:#120c0a}.cq-slist::-webkit-scrollbar-thumb{background:var(--cq-accent);border:1px solid #120c0a}
.cq-pad{padding:10px}
.cq-si{display:flex;align-items:center;min-height:28px;padding:2px 6px;border-bottom:1px solid #2f2019;cursor:pointer}
.cq-si:hover{background:#2e1f19}.cq-si.cq-on{background:#3d2a22}
.cq-si.cq-ro{cursor:default}.cq-si.cq-ro:hover{background:none}
.cq-sck{margin:0 8px 0 0}
.cq-sprice{width:62px;text-align:right;color:var(--cq-accent);font-size:6.6px;margin-right:10px}
.cq-sdet{flex:1;min-width:0}
.cq-shave{margin:0 8px;white-space:nowrap}
.cq-sq{display:flex;align-items:center;white-space:nowrap}
.cq-qm,.cq-qp{width:18px;height:20px;padding:0;background:var(--cq-panel2);border:1px solid var(--cq-line);color:var(--cq-text);cursor:pointer}
.cq-qm:hover,.cq-qp:hover{border-color:var(--cq-accent);color:var(--cq-accent)}
.cq-qn{width:36px;height:20px;text-align:center;padding:0 2px}
.cq-sfoot{flex:none;height:28px;display:flex;align-items:center;justify-content:flex-end}
.cq-stot{margin-right:12px;font-size:6.6px}.cq-stot b{color:var(--cq-accent);font-size:7.8px}
.cq-stot.cq-over b{color:var(--cq-bad)}
.cq-setbd{position:absolute;left:8px;right:8px;top:24px;bottom:6px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-setbd .cq-row{display:flex;align-items:center;margin-bottom:6px}.cq-setbd .cq-row>*{margin-right:8px}
.cq-setbd .cq-lbl{color:var(--cq-muted);width:auto}
.cq-setbd select{background:#120c0a;border:1px solid var(--cq-line);color:var(--cq-text);height:15px;font:inherit;min-width:110px}
.cq-dbox{border-color:#6a2e26}
.cq-ltabs{position:absolute;left:8px;top:24px;right:8px}.cq-ltabs .cq-btn{margin-right:4px}
.cq-llist{position:absolute;left:8px;right:8px;top:52px;bottom:22px;overflow:auto;border:1px solid var(--cq-line);background:#241814;padding:4px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-llist::-webkit-scrollbar{width:8px}.cq-llist::-webkit-scrollbar-track{background:#120c0a}.cq-llist::-webkit-scrollbar-thumb{background:var(--cq-accent);border:1px solid #120c0a}
.cq-lr{display:flex;align-items:center;height:22px;padding:0 4px;color:var(--cq-text);text-decoration:none;border-bottom:1px solid #2f2019;font-size:6.6px}
.cq-lr:hover{background:#3d2a22}
.cq-ld{width:92px;color:var(--cq-muted)}.cq-lt{width:46px;text-align:right;margin-right:10px}
.cq-lteam{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cq-lteam i{font-style:normal;font-size:6px;color:var(--cq-muted);margin-left:6px}
.cq-lwin{color:var(--cq-ok)}.cq-llose{color:#c98b83}
.cq-lvs{width:26px;text-align:center;color:var(--cq-bad);font-weight:700}
.cq-lcap{position:absolute;left:10px;bottom:4px}

/* ---- M5 facility frame ---- */
#cq-fbox{display:flex;flex-direction:column}
#cq-fbox .cq-ttl{flex:none}
.cq-fhead{position:relative;flex:none;height:76px;margin:4px 8px 0 8px;padding-left:84px}
.cq-fhead .cq-spt{width:72px;height:72px}
.cq-fhead .cq-shi{height:42px;font-size:6.6px;line-height:1.35;overflow:hidden;text-align:left}
.cq-fhead .cq-stabs{position:absolute;left:84px;bottom:0}
#cq-fscroll{flex:1;min-height:0;margin:4px 8px 6px 8px;overflow:auto;background:#120c0a;border:1px solid var(--cq-line);scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
#cq-fscroll::-webkit-scrollbar{width:8px;height:8px}
#cq-fscroll::-webkit-scrollbar-track{background:#120c0a}
#cq-fscroll::-webkit-scrollbar-thumb{background:var(--cq-accent);border:1px solid #120c0a}
#cq-fs{position:relative;overflow:hidden}
#cq-fi{position:absolute;left:0;top:0;transform-origin:0 0;text-align:left}

/* ---- M6 native battle stage ---- */
#cq-bs{position:absolute;left:0;top:24px;width:640px;height:308px;background:#120c0a;z-index:1;overflow:hidden}
#cq-bf{position:absolute;left:80px;top:4px;width:480px;height:200px;overflow:hidden;background:#000;border:0}
#cq-bbg{position:absolute;left:0;top:0;display:block}
#cq-bunits{position:absolute;left:0;top:0;width:480px;height:200px}
.cq-bu{position:absolute;transition:left .35s,top .35s}
.cq-bu img{display:block}
.cq-bu img.cq-flip{transform:scaleX(-1)}
.cq-bu.cq-dead{opacity:.55;filter:grayscale(1)}
.cq-bhp{position:absolute;left:50%;bottom:-5px;width:36px;margin-left:-18px;height:4px;background:#000a;border:1px solid #000}
.cq-bhp i{display:block;height:100%;width:100%;background:#7fd18b;transition:width .3s}
.cq-bnm{position:absolute;top:2px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:6.6px;color:#fff;text-shadow:0 1px 0 #000,0 0 4px #000;z-index:2}
.cq-bnm.cq-l{left:6px}.cq-bnm.cq-r{right:6px}
#cq-bban{position:absolute;left:0;right:0;top:18px;text-align:center;opacity:0;pointer-events:none;z-index:3}
#cq-bban.cq-bshow{opacity:1;animation:cq-ban .7s ease-out}
#cq-bban img{vertical-align:middle;margin-right:4px}
#cq-bban b{display:inline-block;background:#120c0acc;border:1px solid var(--cq-accent);color:var(--cq-accent);padding:1px 10px;font-size:7.2px}
@keyframes cq-ban{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.cq-bu.cq-hit{animation:cq-hit .38s}
@keyframes cq-hit{0%{filter:brightness(3)}20%{transform:translateX(-4px)}40%{transform:translateX(4px);filter:brightness(2)}60%{transform:translateX(-3px)}100%{transform:none;filter:none}}
.cq-bu.cq-heal{animation:cq-heal .5s}
@keyframes cq-heal{0%{filter:brightness(1.8) hue-rotate(90deg)}100%{filter:none}}
.cq-bu.cq-actl{animation:cq-actl .3s}
.cq-bu.cq-actr{animation:cq-actr .3s}
@keyframes cq-actl{50%{transform:translateX(14px)}}
@keyframes cq-actr{50%{transform:translateX(-14px)}}
.cq-bnum{position:absolute;font-weight:700;font-size:9.6px;margin-left:-14px;text-shadow:0 1px 0 #000,0 0 3px #000,1px 0 0 #000,-1px 0 0 #000;animation:cq-num 1s ease-out forwards;pointer-events:none;z-index:4}
.cq-bnum.cq-d{color:#ff6b5e}.cq-bnum.cq-h{color:#7fd18b}
@keyframes cq-num{0%{transform:translateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.cq-bpnl{position:absolute;top:208px;width:146px;height:98px;overflow:hidden;background:#1d1512;border:1px solid var(--cq-line)}
.cq-bpl{left:4px}.cq-bpr{right:4px}
.cq-bpu{position:relative;height:15px;padding:0 3px;font-size:6px;line-height:11px}
.cq-bpu.cq-dead{opacity:.5}
.cq-bpn{display:inline-block;max-width:98px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.cq-bpv{position:absolute;right:3px;top:0;color:var(--cq-muted)}
.cq-bpb{position:absolute;left:3px;right:3px;top:11px;height:2px;background:#000}
.cq-bpb i{display:block;height:100%;background:#7fd18b}
.cq-bpb.cq-sp{top:13px}.cq-bpb.cq-sp i{background:var(--cq-sp)}
#cq-blogw{position:absolute;left:154px;top:208px;width:332px;height:98px;overflow-y:auto;background:#1d1512;border:1px solid var(--cq-line);padding:2px 5px;font-size:6px;line-height:13px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-bl{color:var(--cq-text)}.cq-bls{color:var(--cq-accent);font-weight:700}.cq-bld{color:#ff9d92}.cq-blh{color:#9be6a6}
#cq-bres{left:130px;top:34px;width:380px;z-index:6;background:#241814f2;display:none}
#cq-bres.cq-show{display:block}
.cq-bresb{display:flex;padding:8px 10px}
.cq-bresc{flex:1;font-size:6.6px;line-height:15px}
.cq-bresc b{display:block;color:var(--cq-accent);margin-bottom:2px}
body.cq-noanim .cq-bu,body.cq-noanim .cq-bhp i{transition:none;animation:none}
.cq-bresh{text-align:right;padding:0 10px 4px;font-size:6px;color:var(--cq-muted);cursor:pointer}

/* ---- M6b skill effects (CSS drawn; kind from js/skillfx.js) ---- */
#cq-bfx{position:absolute;left:0;top:0;width:480px;height:200px;pointer-events:none;z-index:3}
.cq-fx{position:absolute;width:0;height:0}
.cq-fx::before,.cq-fx::after{content:"";position:absolute;left:0;top:0}
.cq-fx-hit::before{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle,#fff,#ffe9a8 35%,transparent 70%);animation:cq-fxpop .4s ease-out forwards}
.cq-fx-slash::before{width:64px;height:4px;margin:-2px 0 0 -32px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 8px #fff;transform:rotate(-35deg);animation:cq-fxslash .35s ease-out forwards}
.cq-fx-pierce::before{width:70px;height:3px;margin:-1px 0 0 -35px;background:linear-gradient(90deg,transparent,#d9f0ff);box-shadow:0 0 6px #9fd8ff;animation:cq-fxpierce .3s ease-out forwards}
.cq-fx-break::before,.cq-fx-break::after{width:56px;height:4px;margin:-2px 0 0 -28px;background:#ffd166;box-shadow:0 0 6px #ff9a2e;animation:cq-fxpop .45s ease-out forwards}
.cq-fx-break::before{transform:rotate(45deg)}.cq-fx-break::after{transform:rotate(-45deg)}
.cq-fx-blow::before{width:20px;height:20px;margin:-10px 0 0 -10px;border:3px solid #fff;border-radius:50%;animation:cq-fxring .45s ease-out forwards}
.cq-fx-fire::before{width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:radial-gradient(circle,#fff7b0,#ff9a2e 40%,#e0401a 70%,transparent 75%);animation:cq-fxpop .6s ease-out forwards}
.cq-fx-meteor::before{width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:radial-gradient(circle,#fff7b0,#ff9a2e 45%,#e0401a 70%,transparent 75%);animation:cq-fxmeteor .8s ease-in forwards}
.cq-fx-ice::before{width:44px;height:44px;margin:-22px 0 0 -22px;background:linear-gradient(135deg,#f2fdff,#6fd3ff);box-shadow:0 0 10px #aef;transform:rotate(45deg);animation:cq-fxpop .6s ease-out forwards}
.cq-fx-ice::after{width:28px;height:28px;margin:-14px 0 0 -14px;border:2px solid #fff;animation:cq-fxring .6s ease-out forwards}
.cq-fx-thunder::before{width:14px;height:90px;margin:-90px 0 0 -7px;background:#fff36b;clip-path:polygon(60% 0,0 55%,45% 55%,25% 100%,100% 40%,55% 40%);filter:drop-shadow(0 0 6px #ffe14a);animation:cq-fxbolt .45s ease-out forwards}
.cq-fx-dark::before{width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;background:radial-gradient(circle,#1b0a2a 30%,#7a3fbf 60%,transparent 72%);animation:cq-fxin .6s ease-in forwards}
.cq-fx-earth::before{width:56px;height:30px;margin:-5px 0 0 -28px;border-radius:50%;background:radial-gradient(ellipse,#c9a063,#7a5a2e 60%,transparent 70%);animation:cq-fxpop .6s ease-out forwards}
.cq-fx-poison::before{width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle,#d6ff8a,#7bbf3a 45%,#6a2a8a 70%,transparent 75%);animation:cq-fxpop .8s ease-out forwards}
.cq-fx-holy::before{width:40px;height:150px;margin:-150px 0 0 -20px;background:linear-gradient(180deg,transparent,#fff7c2 50%,#fff);box-shadow:0 0 12px #ffe9a0;animation:cq-fxbeam .7s ease-out forwards}
.cq-fx-magic::before{width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle,#fff,#c79bff 40%,#6a4bdb 68%,transparent 75%);animation:cq-fxpop .55s ease-out forwards}
.cq-fx-heal::before,.cq-fx-mana::before,.cq-fx-revive::before{width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(circle,#eaffef,#7fd18b 50%,transparent 72%);animation:cq-fxpop .7s ease-out forwards}
.cq-fx-mana::before{background:radial-gradient(circle,#eaf4ff,#6bb6ff 50%,transparent 72%)}
.cq-fx-revive::before{background:radial-gradient(circle,#fff,#ffe9a0 50%,transparent 72%)}
.cq-fx-heal i,.cq-fx-mana i,.cq-fx-revive i{position:absolute;width:6px;height:6px;background:#9be6a6;box-shadow:0 0 4px #7fd18b;animation:cq-fxspark .9s ease-out forwards}
.cq-fx-mana i{background:#9fd0ff;box-shadow:0 0 4px #6bb6ff}.cq-fx-revive i{background:#fff3b0;box-shadow:0 0 4px #ffd166}
.cq-fx i:nth-child(1){left:-18px;top:6px}.cq-fx i:nth-child(2){left:2px;top:12px;animation-delay:.12s}.cq-fx i:nth-child(3){left:16px;top:2px;animation-delay:.24s}
.cq-fx-buff::before{width:46px;height:20px;margin:-6px 0 0 -23px;border:3px solid #ffd166;border-radius:50%;box-shadow:0 0 8px #ffd166;animation:cq-fxup .8s ease-out forwards}
.cq-fx-debuff::before,.cq-fx-bind::before{width:46px;height:20px;margin:-26px 0 0 -23px;border:3px solid #b07ae0;border-radius:50%;box-shadow:0 0 8px #7a3fbf;animation:cq-fxdown .8s ease-in forwards}
.cq-fx-bind::after{width:50px;height:50px;margin:-25px 0 0 -25px;border:2px dashed #b07ae0;border-radius:50%;animation:cq-fxring .8s ease-out forwards}
.cq-fx-shield::before{width:50px;height:56px;margin:-28px 0 0 -25px;border:3px solid #8fd0ff;border-radius:40% 40% 50% 50%;background:#6bb6ff33;box-shadow:0 0 10px #6bb6ff;animation:cq-fxpop .8s ease-out forwards}
.cq-fx-summon::before{width:70px;height:26px;margin:-4px 0 0 -35px;border:3px solid #ffd166;border-radius:50%;box-shadow:0 0 10px #ffd166,0 0 10px #ffd166 inset;animation:cq-fxcircle 1s ease-out forwards}
.cq-fx-summon::after{width:44px;height:14px;margin:2px 0 0 -22px;border:2px dashed #fff3b0;border-radius:50%;animation:cq-fxcircle 1s ease-out forwards}
.cq-fx-arrow{width:26px;height:3px;margin:-1px 0 0 -13px;background:linear-gradient(90deg,transparent,#fff);box-shadow:0 0 4px #fff;transform-origin:0 50%;transition:left .4s linear,top .4s linear}
@keyframes cq-fxpop{0%{transform:scale(.3);opacity:1}60%{opacity:1}100%{transform:scale(1.4);opacity:0}}
@keyframes cq-fxslash{0%{transform:rotate(-35deg) scaleX(0);opacity:1}60%{transform:rotate(-35deg) scaleX(1);opacity:1}100%{transform:rotate(-35deg) scaleX(1.1);opacity:0}}
@keyframes cq-fxpierce{0%{transform:translateX(-30px);opacity:1}70%{opacity:1}100%{transform:translateX(24px);opacity:0}}
@keyframes cq-fxring{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes cq-fxmeteor{0%{transform:translate(70px,-150px) scale(.7);opacity:1}70%{transform:translate(0,0) scale(1);opacity:1}100%{transform:scale(2.2);opacity:0}}
@keyframes cq-fxbolt{0%{opacity:0}10%{opacity:1}30%{opacity:.3}50%{opacity:1}100%{opacity:0}}
@keyframes cq-fxin{0%{transform:scale(1.8);opacity:0}50%{opacity:1}100%{transform:scale(.2);opacity:0}}
@keyframes cq-fxbeam{0%{transform:scaleX(.2);opacity:0}30%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1.4);opacity:0}}
@keyframes cq-fxspark{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-34px);opacity:0}}
@keyframes cq-fxup{0%{transform:translateY(16px) scale(.8);opacity:0}30%{opacity:1}100%{transform:translateY(-22px) scale(1.1);opacity:0}}
@keyframes cq-fxdown{0%{transform:translateY(-16px) scale(1.1);opacity:0}30%{opacity:1}100%{transform:translateY(22px) scale(.8);opacity:0}}
@keyframes cq-fxcircle{0%{transform:scale(.3);opacity:0}30%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(1.2) rotate(8deg);opacity:0}}
body.cq-noanim .cq-fx{display:none}

/* ---- M7 video-game style windows: [X], facility frame, menu, list rows, confirm box ---- */
.cq-ttl{position:relative}
.cq-x{position:absolute;right:3px;top:1px;width:16px;height:16px;line-height:14px;text-align:center;background:#7a2a22;border:1px solid #d9958c;color:#fff;font-size:6.6px;font-weight:700;text-decoration:none;box-shadow:inset 0 1px 0 #ffffff55,0 1px 0 #000;z-index:2}
.cq-x:hover,.cq-x:focus{outline:none;filter:brightness(1.35)}
.cq-fw{left:4px;top:28px;width:632px;height:300px;z-index:3;background:linear-gradient(#2d201b,#1a120f);border:2px solid #9a7a45;box-shadow:0 0 0 1px #0b0706,0 0 0 3px #3b2a24,0 8px 22px #000b}
.cq-fw>.cq-ttl{height:20px;line-height:19px;background:linear-gradient(#6a4528,#3a2418);border-bottom:2px solid #9a7a45;text-shadow:0 1px 0 #000;letter-spacing:1px;font-size:7.2px}
.cq-fw>.cq-ttl .cq-x{top:2px}
.cq-fw-in{position:absolute;left:0;right:0;top:20px;bottom:0;display:flex}
.cq-fw-l{width:116px;flex:none;padding:6px 6px 6px 8px;border-right:1px solid #3b2a24;background:#00000022}
.cq-fw-npc{width:100px;height:100px;padding:1px;background:#120c0a;border:2px solid #9a7a45;box-shadow:0 0 0 1px #000}
.cq-fw-npc img{display:block;width:96px;height:96px}
.cq-fw-gil{margin-top:5px;height:20px;line-height:18px;padding:0 6px 0 22px;position:relative;background:#120c0a;border:1px solid #5a4038;color:var(--cq-accent);text-align:right;font-size:7.2px}
.cq-coin{position:absolute;left:5px;top:3px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#e0a92e 60%,#8a5a12);box-shadow:0 0 0 1px #4a2f08}
.cq-menu{margin-top:6px}
.cq-mi{display:block;position:relative;height:24px;line-height:22px;padding:0 6px 0 18px;margin-bottom:4px;background:linear-gradient(#35261f,#241814);border:1px solid #5a4038;color:var(--cq-text);text-decoration:none;cursor:pointer;font-size:7.2px}
.cq-mi::before{content:"";position:absolute;left:5px;top:6px;border:5px solid transparent;border-left:7px solid #ffcf6b;border-right:0;opacity:0}
.cq-mi:hover,.cq-mi:focus,.cq-mi.cq-on{background:linear-gradient(#5a3a22,#3d2618);border-color:#ffcf6b;color:#ffe9a8;outline:none}
.cq-mi:hover::before,.cq-mi:focus::before,.cq-mi.cq-on::before{opacity:1}
.cq-mi:focus::before{animation:cq-blink .8s steps(2) infinite}
@keyframes cq-blink{50%{opacity:.2}}
.cq-fw-r{flex:1;min-width:0;display:flex;flex-direction:column;padding:6px 8px 6px 8px}
.cq-fw-say{position:relative;flex:none;height:44px;margin-left:8px;padding:4px 9px;background:#120c0a;border:2px solid #9a7a45;box-shadow:0 0 0 1px #000;font-size:6.6px;line-height:1.4;overflow:hidden;text-align:left}
.cq-fw-say::before{content:"";position:absolute;left:-9px;top:12px;border:6px solid transparent;border-right:7px solid #9a7a45;border-left:0}
.cq-tw.cq-typing::after{content:"";display:inline-block;width:6px;height:10px;margin-left:2px;background:var(--cq-accent);animation:cq-blink .6s steps(2) infinite;vertical-align:-1px}
.cq-fw-body{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:6px}
.cq-fw-foot{flex:none;display:flex;align-items:center;justify-content:flex-end;height:30px;padding-top:4px}
.cq-fw-foot>*{margin-left:8px}
.cq-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;background:#120c0a;border:1px solid #5a4038;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-list::-webkit-scrollbar{width:8px}.cq-list::-webkit-scrollbar-track{background:#120c0a}.cq-list::-webkit-scrollbar-thumb{background:var(--cq-accent);border:1px solid #120c0a}
.cq-it{position:relative;display:flex;align-items:center;min-height:30px;padding:2px 6px 2px 16px;border-bottom:1px solid #2e211c;cursor:pointer;outline:none}
.cq-it::before{content:"";position:absolute;left:4px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:7px solid #ffcf6b;border-right:0;opacity:0}
.cq-it:hover,.cq-it:focus{background:#2c1f19}
.cq-it:focus::before,.cq-it:hover::before{opacity:1}
.cq-it:focus::before{animation:cq-blink .8s steps(2) infinite}
.cq-it.cq-on{background:#43301f;box-shadow:inset 3px 0 0 var(--cq-accent)}
.cq-it .cq-sdet{flex:1;min-width:0}
.cq-chips{flex:none;display:flex;flex-wrap:wrap;margin-bottom:4px}
.cq-confirm-hide{display:none}
#cq-cfm{left:170px;top:120px;width:300px;height:104px;z-index:40;background:linear-gradient(#2d201b,#1a120f);border:2px solid #ffcf6b;box-shadow:0 0 0 1px #000,0 8px 24px #000c;display:none}
#cq-cfm.cq-show{display:block}
#cq-cfm .cq-ttl{background:linear-gradient(#6a4528,#3a2418)}
.cq-cfm-m{padding:12px 14px 6px 14px;min-height:46px;text-align:center;font-size:7.2px;line-height:1.4}
.cq-cfm-b{position:absolute;left:0;right:0;bottom:8px;text-align:center}
.cq-cfm-b .cq-btn{min-width:72px;margin:0 6px}
.cq-chips{align-items:center;margin-bottom:4px}
.cq-lbl2{color:var(--cq-muted);margin-right:6px;font-size:6.6px}
.cq-fsel{height:15px;background:#120c0a;border:1px solid #9a7a45;color:var(--cq-text);padding:0 4px;font-size:6.6px}
.cq-fsel:focus{border-color:var(--cq-accent);outline:none}

/* inn / generic facility panes */
.cq-pane2{display:none;flex-direction:column;flex:1;min-height:0}
.cq-pane2.cq-pshow{display:flex}
.cq-infoline{padding:3px 4px;font-size:7.2px;line-height:1.5}
.cq-infoline b{color:var(--cq-accent)}
.cq-infoline.cq-over b{color:var(--cq-bad)}
.cq-stepper{display:flex;align-items:center;padding:6px 4px}
.cq-stepper .cq-qm,.cq-stepper .cq-qp{width:24px;height:24px;font-size:8.4px}
.cq-sv{display:inline-block;min-width:44px;text-align:center;font-size:8.4px;color:var(--cq-accent)}
.cq-warn2{margin:4px;padding:3px 8px;background:#4a1f1a;border:1px solid var(--cq-bad);color:#ffb3a8;font-size:6.6px}
.cq-bbsf{display:flex;margin-bottom:4px}
.cq-bbsin{flex:1;width:auto;height:22px}
.cq-bbsf .cq-btn{margin-left:6px}
.cq-bbsl{padding:4px 6px;font-size:6.6px}
.cq-bbsx{font-size:6.6px;line-height:1.5}
.cq-pad{padding:10px}
.cq-short{flex:none;max-height:80px}
.cq-reveal{margin:2px 0 6px 0;padding:6px;background:radial-gradient(#5a3a22,#2a1a10);border:2px solid #ffcf6b;text-align:center;box-shadow:0 0 12px #ffcf6b66 inset}
.cq-rev-t{font-size:8.4px;font-weight:700;color:#fff3b0;text-shadow:0 0 6px #ffcf6b;letter-spacing:2px;animation:cq-pulse 1s ease-in-out infinite}
.cq-rev-i{display:inline-block;margin-top:2px}
@keyframes cq-pulse{50%{opacity:.6}}
.cq-it.cq-ro{cursor:default}.cq-it.cq-ro::before{display:none}

/* quest screen */
.cq-qwrap{display:flex;flex:1;min-height:0}
.cq-qcol{width:196px;flex:none;display:flex;flex-direction:column;margin-right:8px}
.cq-qrow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:6.6px}
.cq-qprog{margin-left:6px;font-size:6px;color:var(--cq-muted)}.cq-qprog.cq-qok{color:var(--cq-ok)}
.cq-it input[type=radio]{margin:0 6px 0 0}
.cq-qdet{flex:1;min-width:0;display:flex;flex-direction:column;background:#120c0a;border:1px solid #5a4038;padding:6px 8px}
.cq-qpick{padding:20px 6px;text-align:center}
.cq-qd{display:none;flex:1;min-height:0;overflow-y:auto;font-size:6.6px;line-height:1.45;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-qd.cq-qshow{display:block}
.cq-qn1{font-size:7.8px;font-weight:700;color:var(--cq-accent);margin-bottom:3px}
.cq-qtx{margin-bottom:6px;color:var(--cq-text)}
.cq-qg{margin:3px 0;display:flex;align-items:center}
.cq-qg .cq-frag{display:inline-block;margin:0 4px}
.cq-qdet .cq-fw-foot{height:30px;margin-top:auto}

/* auction */
.cq-ar{display:block;padding:3px 6px 3px 8px;min-height:0}
.cq-ar1{display:flex;align-items:center}
.cq-arno{flex:none;width:38px;color:var(--cq-muted);font-size:6px}
.cq-arp{flex:none;min-width:70px;text-align:right;color:var(--cq-accent);font-weight:700;font-size:7.8px}
.cq-ar2{display:flex;flex-wrap:wrap;align-items:center;font-size:6px;color:var(--cq-text);margin:1px 0 0 38px}
.cq-ar2>span{margin-right:10px}.cq-ar2 i{font-style:normal}
.cq-aut{color:#9be6a6}
.cq-arc{color:var(--cq-muted)}
.cq-arbid{margin-left:auto}.cq-arbid .cq-btn{}
a.cq-chip{text-decoration:none;display:inline-block}
.cq-regf{display:flex;flex-direction:column;flex:1;min-height:0}
.cq-regr{flex:none;display:flex;align-items:center;margin-top:4px}
.cq-regr .cq-lbl2{margin-left:8px}.cq-regr .cq-lbl2:first-child{margin-left:0}
.cq-regr .cq-in{height:15px;margin-left:4px}
.cq-w40{width:40px}.cq-w70{width:84px}.cq-wfull{flex:1;width:auto}
.cq-regr .cq-btn{margin-left:8px}

/* colosseum + recruit */
.cq-corow{display:flex;flex:1;min-height:0}
.cq-cocol{flex:1;min-width:0;display:flex;flex-direction:column;margin-right:6px}.cq-cocol:last-child{margin-right:0}
.cq-cot{flex:none;font-size:6.6px;font-weight:700;color:var(--cq-accent);margin-bottom:2px}
.cq-rcards{display:flex;justify-content:space-between;margin-bottom:6px}
.cq-rcard{display:flex;flex-direction:column;align-items:center;width:118px;padding:4px 2px;background:linear-gradient(#35261f,#241814);border:1px solid #5a4038;cursor:pointer;outline:none}
.cq-rcard:hover,.cq-rcard:focus{border-color:var(--cq-accent)}
.cq-rcard.cq-on{border-color:var(--cq-accent);background:linear-gradient(#5a3a22,#3d2618);box-shadow:0 0 8px #ffcf6b55}
.cq-rcard img{width:auto;max-width:100px;height:90px;object-fit:contain;margin:2px 0}
.cq-rcn{font-weight:700;font-size:7.2px;color:var(--cq-accent)}
.cq-rcp{font-size:6.6px}
.cq-w140{width:140px}
.cq-lbl2{white-space:nowrap}
.cq-regr .cq-lbl2.cq-mut{white-space:normal;font-size:6px;line-height:1.2}
.cq-regr label.cq-lbl2{display:inline-flex;align-items:center}
.cq-regr label.cq-lbl2 input{margin:0 3px 0 0}
#cq-dlg .cq-dx{display:none}
#cq-dlg .cq-x{right:5px;top:5px}

/* ---- M8 inventory: slot grid + vertical tooltip ---- */
.cq-inv{left:4px;top:28px;width:632px;height:300px;z-index:3;background:linear-gradient(#2d201b,#1a120f);border:2px solid #9a7a45;box-shadow:0 0 0 1px #0b0706,0 0 0 3px #3b2a24,0 8px 22px #000b}
.cq-inv>.cq-ttl{height:20px;line-height:19px;background:linear-gradient(#6a4528,#3a2418);border-bottom:2px solid #9a7a45;text-shadow:0 1px 0 #000;letter-spacing:1px;font-size:7.2px}
.cq-inv-in{position:absolute;left:8px;right:8px;top:26px;bottom:8px;display:flex;flex-direction:column}
.cq-inv-top{flex:none;display:flex;align-items:center;height:26px}
.cq-inv-cnt{margin-left:12px;font-size:6.6px;color:var(--cq-muted)}.cq-inv-cnt b{color:var(--cq-text)}
.cq-inv-gil{margin:0 0 0 auto;width:130px}
.cq-inv-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(10,52px);grid-auto-rows:52px;gap:4px;justify-content:center;align-content:start;overflow-y:auto;padding:4px;background:#120c0a;border:1px solid #5a4038;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-inv-grid::-webkit-scrollbar{width:8px}.cq-inv-grid::-webkit-scrollbar-track{background:#120c0a}.cq-inv-grid::-webkit-scrollbar-thumb{background:var(--cq-accent);border:1px solid #120c0a}
.cq-slot{position:relative;width:52px;height:52px;background:linear-gradient(#241814,#1a110e);border:2px solid #3b2a24;box-shadow:inset 0 0 0 1px #0b0706;outline:none}
.cq-slot:not(.cq-empty){cursor:pointer;border-color:#5a4038}
.cq-slot:not(.cq-empty):hover,.cq-slot:not(.cq-empty):focus{border-color:var(--cq-accent);background:linear-gradient(#43301f,#2a1d14);box-shadow:inset 0 0 8px #ffcf6b55}
.cq-slot img{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px}
.cq-scnt{position:absolute;right:2px;bottom:0;font-size:6.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-sref{position:absolute;left:2px;top:0;font-size:6px;font-style:normal;font-weight:700;color:#ffe9a8;text-shadow:1px 1px 0 #000}
.cq-tipsrc{display:none}
#cq-itip{display:none;width:196px;z-index:50;pointer-events:none;background:linear-gradient(#2d201b,#1a120f);border:2px solid #ffcf6b;box-shadow:0 0 0 1px #000,0 6px 16px #000c;padding:6px 8px;font-size:6.6px;line-height:1.4;text-align:left}
#cq-itip.cq-show{display:block}
.cq-tt-h{display:flex;align-items:center;margin-bottom:2px}.cq-tt-h img{width:24px;height:24px;margin-right:6px}.cq-tt-h b{color:var(--cq-accent);font-size:7.2px}
.cq-tt-s{color:var(--cq-text);margin-bottom:4px;border-bottom:1px solid #5a4038;padding-bottom:3px}
.cq-tt-b{margin-bottom:4px}.cq-tt-r{display:flex;justify-content:space-between}.cq-tt-r i{font-style:normal}
.cq-ta{color:#ff8a7d}.cq-tm{color:#8fb8ff}.cq-td{color:#8fe3a0}.cq-tmd{color:#8fe0e6}.cq-th{color:#ffd166}
.cq-tt-o{color:#c9b8ff;font-size:6px;margin-bottom:3px}
.cq-tt-e{color:#ac98ac;font-size:6px;margin-bottom:3px;white-space:normal}
.cq-tt-p{color:var(--cq-muted);border-top:1px solid #5a4038;padding-top:3px}.cq-tt-p b{color:var(--cq-accent)}

/* ---- M8 one window look for every screen: gold frame, ribbon title, corner studs ---- */
#cq-cbox,#cq-hbox,#cq-mbox,#cq-setbox,#cq-lbox,#cq-nbox,#cq-fbox,#cq-tbox{background:linear-gradient(#2d201b,#1a120f);border:2px solid #9a7a45;box-shadow:0 0 0 1px #0b0706,0 0 0 3px #3b2a24,0 8px 22px #000b}
#cq-cbox>.cq-ttl,#cq-hbox>.cq-ttl,#cq-mbox>.cq-ttl,#cq-setbox>.cq-ttl,#cq-lbox>.cq-ttl,#cq-nbox>.cq-ttl,#cq-fbox>.cq-ttl,#cq-tbox>.cq-ttl{height:20px;line-height:19px;background:linear-gradient(#6a4528,#3a2418);border-bottom:2px solid #9a7a45;text-shadow:0 1px 0 #000;letter-spacing:1px;font-size:7.2px}
.cq-pre{background:linear-gradient(#2d201b,#1a120f);border:2px solid #ffcf6b}
.cq-pre>.cq-ttl{background:linear-gradient(#6a4528,#3a2418);border-bottom:2px solid #9a7a45;height:20px;line-height:19px}
#cq-opt{background:linear-gradient(#2d201b,#1a120f);border:2px solid #9a7a45}
#cq-opt>.cq-ttl{background:linear-gradient(#6a4528,#3a2418);border-bottom:2px solid #9a7a45;height:20px;line-height:19px}
#cq-dlg{background:linear-gradient(#2d201b,#1a120f);border:2px solid #ffcf6b;box-shadow:0 0 0 1px #000,0 8px 24px #000c}

/* ---- Vinyl House (farm) + Omake mine ---- */
.cq-fw-r.cq-nosay .cq-fw-body{margin-top:0}
.cq-fmwrap{flex-direction:row}
.cq-ffield{flex:none;display:flex;align-self:flex-start;padding:4px;background:linear-gradient(#3b2a16,#2a1d10);border:2px solid #5a4038;box-shadow:inset 0 0 0 1px #0b0706}
.cq-fcol img{display:block;width:32px;height:32px}
.cq-ftop{position:relative;height:32px}
.cq-fwat{position:absolute;left:0;top:0;animation:cq-blink 1s steps(2) infinite}
.cq-fno{position:absolute;right:1px;bottom:0;font-style:normal;font-size:6px;font-weight:700;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.cq-fpanes{flex:1;min-width:0;margin-left:8px;display:flex;flex-direction:column;min-height:0}
.cq-fpanes .cq-pane2{flex:1;min-height:0}
.cq-fm-t{font-size:7.2px;font-weight:700;color:var(--cq-accent);margin:2px 0 3px 0}
.cq-fm-rates{display:flex;flex-direction:column;margin-bottom:4px}
.cq-fm-r{display:flex;align-items:center;font-size:7.2px;height:34px;border-bottom:1px solid #2e211c}
.cq-fm-r img{width:32px;height:32px;margin-right:6px}.cq-fm-r span{flex:1}.cq-fm-r b{color:var(--cq-accent)}
.cq-fm-g{font-size:6.6px;line-height:1.5;white-space:pre-line;margin-top:4px;text-align:left}
.cq-fm-opts{display:flex;flex-wrap:wrap;padding:2px 4px}
.cq-fm-o{display:inline-flex;align-items:center;margin:0 10px 4px 0;font-size:7.2px;cursor:pointer}
.cq-fm-o input{margin:0 4px 0 0}.cq-fm-o img{width:32px;height:32px;margin-right:3px}
.cq-fm-sl{flex:none;width:24px;color:var(--cq-muted);font-size:6.6px}
.cq-fm-sn{flex:1;min-width:0;font-size:7.2px}
.cq-fm-sc{flex:none;width:36px;font-size:6.6px;color:var(--cq-muted)}
.cq-fm-sp{flex:none;min-width:70px;text-align:right;font-size:7.2px;color:var(--cq-accent)}
.cq-fm-sp.cq-gain{color:#7fd18b}.cq-fm-sp.cq-loss{color:var(--cq-bad)}
.cq-fm-rk{display:flex;flex:1;min-height:0}
.cq-fm-rc{flex:1;min-width:0;display:flex;flex-direction:column;margin-right:6px;min-height:0}.cq-fm-rc:last-child{margin-right:0}
.cq-mfield{flex:none;display:grid;grid-template-columns:repeat(7,32px);grid-auto-rows:32px;align-self:flex-start;padding:4px;background:linear-gradient(#2b2320,#1a1412);border:2px solid #5a4038;box-shadow:inset 0 0 0 1px #0b0706;margin:0}
.cq-mt{width:32px;height:32px;display:block;padding:0;margin:0;border:0}
.cq-mdig{cursor:pointer;background:linear-gradient(135deg,#6b5a4a,#3f342b);border:1px solid #8a7560;box-shadow:inset 1px 1px 0 #ffffff33,inset -1px -1px 0 #00000066;color:#d8c9b6;font-size:6px;font-weight:700}
.cq-mdig:hover:not(:disabled),.cq-mdig:focus:not(:disabled){background:linear-gradient(135deg,#8a7560,#5a4a3b);color:#fff;outline:none;border-color:var(--cq-accent)}
.cq-mdig:disabled{opacity:.45;cursor:default}
.cq-mnone{background:radial-gradient(circle,#0f0b09 40%,#1c1511 80%)}
.cq-mfound{background:radial-gradient(circle,#4a3a14,#241a08);display:flex;align-items:center;justify-content:center}
.cq-mfound img{width:24px;height:24px}

/* town board */
.cq-boardl{padding:0}
.cq-brow{padding:4px 8px;font-size:6.6px;line-height:1.5;border-bottom:1px solid #2e211c;text-align:left}
.cq-brow.cq-odd{background:#1a110e}

/* party */
.cq-pcards{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;overflow-y:auto;padding:2px;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-pcard{position:relative;display:block;width:112px;height:148px;margin:0 6px 6px 0;padding:4px;background:linear-gradient(#35261f,#241814);border:2px solid #5a4038;box-shadow:inset 0 0 0 1px #0b0706;text-align:center;text-decoration:none;color:var(--cq-text)}
.cq-pcard:hover,.cq-pcard:focus{border-color:var(--cq-accent);background:linear-gradient(#5a3a22,#3d2618);outline:none}
.cq-pcard img{display:block;margin:0 auto;height:96px;width:auto;max-width:100px;object-fit:contain}
.cq-pcard b{display:block;font-size:7.2px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cq-pcard b em{color:var(--cq-accent);font-style:normal}
.cq-pcard i{display:block;font-style:normal;font-size:6px;color:var(--cq-muted)}
.cq-pcbar{position:absolute;left:6px;right:6px;bottom:5px;height:4px;background:#000;border:1px solid #000}.cq-pcbar u{display:block;height:100%;background:#7fd18b}
.cq-pt-rec{margin-left:10px;height:18px;line-height:16px;padding:0 8px;font-size:6px}

/* ---- M8 polish ---- */
#cq-lbox a:not(.cq-btn):not(.cq-tb),#cq-setbox a:not(.cq-btn),.cq-pre a{color:var(--cq-accent)}
.cq-fpanes .cq-pane2{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffcf6b #120c0a}
.cq-hmap{align-items:flex-start}

/* town ranking TOP 10 (default look - restyle freely; markup comes from rank.php cq_rank_panel()) */
.cq-rank{position:absolute;right:8px;top:8px;width:200px;z-index:3;background:#241814e6;font-size:6.6px;line-height:1.3}
.cq-rank .cq-ttl{font-size:7.2px;padding:2px 6px}
.cq-rk-list{list-style:none;margin:0;padding:2px 4px}
.cq-rk-row{display:flex;align-items:center;gap:4px;padding:1px 0;border-bottom:1px solid #ffffff14}
.cq-rk-row.cq-me{background:#ffcc0022;font-weight:bold}
.cq-rk-no{flex:0 0 22px;text-align:center}
.cq-rk-no img{width:16px;height:16px;vertical-align:middle}
.cq-rk-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-rk-rec{flex:0 0 auto;font-size:6px}
.cq-rk-my{padding:2px 6px;text-align:right}
.cq-rk-foot{padding:3px 6px;text-align:right}
.cq-map.cq-sp{border-color:#8a6d3a}
.cq-map.cq-sp img{width:24px;height:24px;border-radius:50%;object-fit:cover}