/* QUARTERLY - qvisual.css (Phase 1: office HUD frames, cursor, loading screen, elevator wipe).
   Loaded after q.css. Qourath's "Soot & Brass" layer (css/gdtheme.css) dresses the windows in a painted soot-slate tile
   with brass corner knots, the action bar in the same tile under a brass hairline, and every slot in a brass rim.
   Synergex is brushed aluminium, navy glass and one corporate blue: flat fills, 1 px hairlines, 6-8 px radii.
   Every rule is scoped to html.qtr (set by quarterly/js/qhud.js), so index.html is untouched. */

/* ---- tokens the older layers read (q.css set the line colours; these are the fills it left brown) ---- */
html.qtr {
  --gd-ink:#0a0f17; --gd-slate:#121a26; --gd-well0:#1a2332; --gd-well1:#0a0f17; --gd-btn0:#1e2a3c; --gd-btn1:#0e141e;
  --gd-glow-hover:drop-shadow(0 0 5px rgba(110,160,240,.75)) brightness(1.12);
  --qv-alu:linear-gradient(180deg,#f3f6f9,#c4ccd6 38%,#8d98a6 52%,#d8dee6);
  --qv-blue:#2c62c6; --qv-blue-hi:#5b8fe8; --qv-navy:#0d1626;
}

/* ---- windows: no soot tile, no brass corner knots ---- */
html.qtr.gdUI .panel, html.qtr.gdUI #helpCard, html.qtr.gdUI #dlg, html.qtr.gdUI #runSum {
  background:linear-gradient(180deg,#151d2a 0,#0f1520 64px,#0c111a) !important;
  border:1px solid #34507a !important; border-radius:8px !important;
  box-shadow:0 0 0 1px #05080d, inset 0 1px 0 rgba(156,192,240,.12), 0 24px 70px rgba(0,0,0,.8) !important; }
html.qtr.gdUI .panel h2, html.qtr.gdUI #helpCard h2 { letter-spacing:.14em; font-weight:700; }
html.qtr.gdUI .skSlot { border:1px solid rgba(90,122,168,.55) !important; border-radius:6px !important; }

/* ---- action bar: a flat navy strip under a blue hairline ---- */
html.qtr.gdUI #console { background:
    linear-gradient(180deg,rgba(91,143,232,.55),rgba(91,143,232,.55)) 0 14px/100% 1px no-repeat,
    linear-gradient(180deg,#000,#000) 0 15px/100% 1px no-repeat,
    linear-gradient(180deg,#141c29,#0b1018 60%,#080c12) !important; }
html.qtr.gdUI .slot, html.qtr .slot {
  border:1px solid rgba(90,122,168,.62) !important; border-radius:6px !important;
  background:linear-gradient(180deg,#1b2433,#0b1018) !important;
  box-shadow:inset 0 0 0 1px #05080d, inset 0 6px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(156,192,240,.10) !important; }
html.qtr.gdUI .slot:hover { border-color:#8fb6f0 !important; }
html.qtr.gdUI .slot .key { color:#9cc0f0; font-family:'Segoe UI',Arial,sans-serif; font-weight:700; }
html.qtr.gdUI .slot .cd { border-top-color:#5b8fe8 !important; background:rgba(6,10,18,.78) !important; }
html.qtr.gdUI #xpFill { background:linear-gradient(90deg,#1f4ea6,#3a74e0 60%,#8fb6f0) !important; }
html.qtr.gdUI #belt .bSlot { border:1px solid rgba(90,122,168,.62) !important; border-radius:6px !important;
  background:linear-gradient(180deg,#1b2433,#0b1018) !important; }
html.qtr.gdUI #belt .bSlot .bKey, html.qtr.gdUI #belt .bSlot b { color:#9cc0f0; }
html.qtr .globe { border-color:transparent; }
html.qtr.gdUI #mercBadge { font-family:'Segoe UI',Arial,sans-serif !important; border-radius:6px !important;
  background:linear-gradient(180deg,rgba(20,28,40,.92),rgba(10,15,23,.92)) !important; }

/* ---- the orbs (bezel art: quarterly/js/qvisual.js): no sepia "iron" filter, a clean number pill ---- */
html.qtr.gdUI .orbFrame, html.qtr .orbFrame { filter:none; }
html.qtr.gdUI .orbLiquid { filter:none; }
html.qtr .orbBezel { filter:drop-shadow(0 6px 10px rgba(0,0,0,.65)) !important; }
html.qtr .qoBez .globeTxt, html.qtr .globe .globeTxt { font:700 13px/1.1 'Segoe UI',Arial,sans-serif !important; letter-spacing:.04em; color:#eef4ff;
  background:linear-gradient(180deg,#1a2740,#0d1626) !important; border:1px solid #4a6a98 !important; border-radius:10px !important;
  padding:2px 10px 2px !important; box-shadow:0 2px 6px rgba(0,0,0,.7) !important; text-shadow:none; }
html.qtr .orbLbl { font:700 11px 'Segoe UI',Arial,sans-serif !important; letter-spacing:.3em !important; color:#9cb4d8 !important; }
html.qtr #hpGlobe .orbGlass { opacity:.55; }
html.qtr #hpGlobe .orbGlass::before, html.qtr #hpGlobe .orbGlass::after { opacity:.45; }
html.qtr #hpGlobe.low .orbWell { animation-name:qvMugLow; }
@keyframes qvMugLow { 50% { box-shadow:0 0 22px #e0602a99, inset 0 0 12px #e0602a66; } }

/* ---- the target bar: aluminium end caps, no spiked iron, no red gem ---- */
html.qtr #bossBar { border-color:#7d8a9c !important; border-radius:3px; box-shadow:0 0 0 2px #070a10, 0 0 0 3px #3a4a62, inset 0 2px 4px #000 !important; }
html.qtr #bossWrap #bossBar::before, html.qtr #bossWrap #bossBar::after,
html.qtr.qoTcaps #bossWrap #bossBar::before, html.qtr.qoTcaps #bossWrap #bossBar::after {
  width:7px !important; height:19px !important; margin-top:-9.5px !important; border-radius:2px !important; transform:none !important;
  background:var(--qv-alu) !important; border:1px solid #5d6a7c !important; box-shadow:0 0 0 1px #05080d, 0 2px 4px rgba(0,0,0,.6) !important; }
html.qtr #bossWrap #bossBar::before, html.qtr.qoTcaps #bossWrap #bossBar::before { left:-11px !important; }
html.qtr #bossWrap #bossBar::after, html.qtr.qoTcaps #bossWrap #bossBar::after { right:-11px !important; }
html.qtr #bossWrap[data-rank=boss] #bossBar::before, html.qtr #bossWrap[data-rank=boss] #bossBar::after,
html.qtr.qoTcaps #bossWrap[data-rank=boss] #bossBar::before, html.qtr.qoTcaps #bossWrap[data-rank=boss] #bossBar::after {
  width:9px !important; height:25px !important; margin-top:-12.5px !important; border-color:#8fb6f0 !important;
  box-shadow:0 0 0 1px #05080d, 0 0 8px rgba(91,143,232,.55) !important; }
html.qtr #bossWrap[data-rank=boss] #bossBar::before, html.qtr.qoTcaps #bossWrap[data-rank=boss] #bossBar::before { left:-14px !important; }
html.qtr #bossWrap[data-rank=boss] #bossBar::after, html.qtr.qoTcaps #bossWrap[data-rank=boss] #bossBar::after { right:-14px !important; }

/* ---- minimap: an aluminium rim, a sans compass in corporate blue (canvas fonts: js/minimap.js FONT) ---- */
html.qtr #mmHud .mmRim { border:3px solid #8d98a6 !important; box-shadow:0 0 0 1px #0a0f17, 0 0 0 2px #c4ccd6, 0 6px 22px #000c, inset 0 0 18px #000 !important; }
html.qtr #mmHud .mmB, html.qtr #mmHud .mmLegendBtn { font-family:'Segoe UI',Arial,sans-serif !important; color:#cfe0ff !important;
  background:radial-gradient(circle,#1e2a3c,#0b1018) !important; border:1px solid #4a6a98 !important; }
html.qtr #mmHud .mmZone, html.qtr #mmPop, html.qtr #mmBigW, html.qtr #zoomBtns::before { font-family:'Segoe UI',Arial,sans-serif !important; }
html.qtr #mmPop, html.qtr #mmBigW { border-color:#34507a !important; border-radius:8px; color:#d8dee8 !important; }
html.qtr #mmPop h4, html.qtr #mmBigW .bmSide h4, html.qtr #mmBigW .bmX { color:#9cc0f0 !important; }
html.qtr #mmPop input { accent-color:#2c62c6; }
html.qtr #mmHud .mmCompass circle { stroke:#6f7f94 !important; }
html.qtr #mmHud .mmCompass path { stroke:#7c8ea8 !important; }
html.qtr #mmHud .mmCompass text { fill:#cfe0ff !important; font:700 12px 'Segoe UI',Arial,sans-serif !important; }

/* ---- the elevator: two brushed-steel doors close over the screen, ding, open on the new floor ---- */
#qElev { position:fixed; inset:0; z-index:140; pointer-events:none; display:none; overflow:hidden; }
#qElev.on { display:block; }
#qElev .qeDoor { position:absolute; top:0; bottom:0; width:50.4%; transition:transform .26s cubic-bezier(.55,.05,.45,1);
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,0) 7%,rgba(255,255,255,0) 93%,rgba(0,0,0,.32)),
    linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 42%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 64%,rgba(255,255,255,.12) 70%,rgba(255,255,255,0) 76%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.04) 1px 3px,rgba(255,255,255,.03) 3px 4px),
    linear-gradient(180deg,#c9d0d8,#a7b0bb 30%,#c3cad3 55%,#959fab);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
#qElev .qeL { left:0; transform:translateX(-101%); }
#qElev .qeR { right:0; transform:translateX(101%); }
#qElev .qeL::after, #qElev .qeR::after { content:''; position:absolute; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#5d6672,#2a3038); }
#qElev .qeL::after { right:0; } #qElev .qeR::after { left:0; }
#qElev .qeSign { position:absolute; left:50%; top:9vh; transform:translate(-50%,-20px); opacity:0; transition:opacity .2s .12s, transform .2s .12s;
  display:flex; align-items:center; gap:14px; padding:10px 22px; border-radius:6px; background:#0b0f16; border:2px solid #6b7684;
  box-shadow:0 0 0 3px #b8c0ca, 0 8px 24px rgba(0,0,0,.6); font:700 22px 'Segoe UI',Arial,sans-serif; letter-spacing:.12em; color:#ffb347;
  text-shadow:0 0 10px rgba(255,160,40,.7); white-space:nowrap; z-index:2; }
#qElev .qeSign i { font-style:normal; font-size:18px; color:#ffb347; }
#qElev .qeSign b { font-weight:700; }
#qElev.shut .qeL, #qElev.shut .qeR { transform:none; }
#qElev.shut .qeSign { opacity:1; transform:translate(-50%,0); }
#qElev.open .qeL { transform:translateX(-101%); transition-duration:.42s; }
#qElev.open .qeR { transform:translateX(101%); transition-duration:.42s; }
#qElev.open .qeSign { opacity:0; transition-delay:0s; }

/* ---- the loading screen: a Synergex badge-in, not the crypt video ---- */
html.qtr #loadScr { background:#070b13 !important; color:#d8dee8; }
html.qtr #loadScr .ldVid, html.qtr #loadScr #ldEm, html.qtr #loadScr .ldSpark { display:none !important; }
html.qtr #loadScr .qLdArt { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
html.qtr #loadScr .qLdArt canvas, html.qtr #loadScr .qLdArt img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html.qtr #loadScr .qLdArt::after { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 45% at 50% 42%,rgba(7,11,19,.35),rgba(7,11,19,.82) 100%), linear-gradient(180deg,rgba(7,11,19,0) 60%,rgba(7,11,19,.9)); }
html.qtr #loadScr { isolation:isolate; }
html.qtr #loadScr .qLdBadge { width:148px; margin:0 auto 26px; border-radius:10px; overflow:hidden; background:#f4f6f9; box-shadow:0 18px 50px rgba(0,0,0,.7), 0 0 0 1px #0a0f17;
  font-family:'Segoe UI',Arial,sans-serif; color:#1f2430; text-align:center; position:relative; animation:qvBadge 2.6s ease-in-out infinite; }
html.qtr #loadScr .qLdBadge::before { content:''; position:absolute; left:50%; top:-60px; width:16px; height:66px; margin-left:-8px; z-index:-1;
  background:repeating-linear-gradient(180deg,#2c62c6 0 6px,#1f4ea6 6px 12px); border-radius:3px; }
html.qtr #loadScr .qLdBadge .qbClip { width:30px; height:7px; margin:7px auto 0; border-radius:4px; background:#c8d0dc; box-shadow:inset 0 1px 2px rgba(0,0,0,.35); }
html.qtr #loadScr .qLdBadge .qbHead { margin-top:6px; background:#2c62c6; color:#fff; font-weight:800; font-size:11px; letter-spacing:.24em; padding:4px 0 4px .24em; }
html.qtr #loadScr .qLdBadge .qbPh { width:66px; height:76px; margin:9px auto 6px; border-radius:5px; background:linear-gradient(180deg,#dfe6ee,#c9d3df); position:relative; overflow:hidden; }
html.qtr #loadScr .qLdBadge .qbPh::before { content:''; position:absolute; left:50%; top:14px; width:28px; height:30px; margin-left:-14px; border-radius:50%; background:#8a97a8; }
html.qtr #loadScr .qLdBadge .qbPh::after { content:''; position:absolute; left:50%; bottom:-14px; width:56px; height:38px; margin-left:-28px; border-radius:50% 50% 0 0; background:#8a97a8; }
html.qtr #loadScr .qLdBadge .qbName { font-weight:800; font-size:12px; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.qtr #loadScr .qLdBadge .qbDept { font-size:9.5px; letter-spacing:.14em; color:#6a7486; text-transform:uppercase; margin:2px 0 6px; }
html.qtr #loadScr .qLdBadge .qbBar { height:14px; margin:0 12px 10px; background:repeating-linear-gradient(90deg,#1f2430 0 2px,transparent 2px 3px,#1f2430 3px 4px,transparent 4px 7px,#1f2430 7px 10px,transparent 10px 11px); opacity:.85; }
@keyframes qvBadge { 0%,100% { transform:rotate(-2.5deg); } 50% { transform:rotate(2.5deg); } }
html.qtr #loadScr .ldTitle { font-family:'Segoe UI',Arial,sans-serif !important; font-weight:800 !important; color:#eef4ff; letter-spacing:.24em;
  text-shadow:0 2px 10px rgba(0,0,0,.8), 0 0 26px rgba(44,98,198,.55) !important; }
html.qtr #loadScr .ldWho { font-family:'Segoe UI',Arial,sans-serif !important; font-style:normal !important; color:#9cc0f0 !important; letter-spacing:.06em; }
html.qtr #loadScr .ldBottom { background:rgba(244,246,249,.96); border-radius:8px; padding:14px 18px 12px; box-shadow:0 14px 40px rgba(0,0,0,.6); }
html.qtr #loadScr .ldBottom::before { content:'SYNERGEX INTRANET  \203A  Badge reader  \203A  Access request'; display:block; margin:-2px 0 9px;
  font:600 11px 'Segoe UI',Arial,sans-serif; letter-spacing:.04em; color:#6a7486; }
html.qtr #loadScr .ldBar { height:10px !important; background:#dfe4ec !important; border:none !important; border-radius:5px; box-shadow:inset 0 1px 2px rgba(0,0,0,.18) !important; overflow:hidden; }
html.qtr #loadScr .ldFill { border-radius:5px; box-shadow:none !important;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.18) 0 8px,rgba(255,255,255,0) 8px 16px),linear-gradient(90deg,#1f4ea6,#3a74e0) !important;
  background-size:22px 22px,100% 100% !important; animation:qvStripe .9s linear infinite; }
@keyframes qvStripe { to { background-position:22px 0,0 0; } }
html.qtr #loadScr .ldTip { font-family:'Segoe UI',Arial,sans-serif !important; font-style:normal !important; color:#2a3448 !important; text-shadow:none !important; font-size:14px !important; }
html.qtr #loadScr .ldPct { font-family:'Segoe UI',Arial,sans-serif !important; color:#1f4ea6 !important; font-weight:800; }

/* ---- inventory leftovers: brass wells on empty/common equipment slots, the carry line ---- */
html.qtr #invPanel .eq:not(.filled), html.qtr #invPanel .eq.r0 { border-color:rgba(90,122,168,.55) !important; }
html.qtr #invPanel .carrySummary { color:#b8c8e0 !important; }