/* QUARTERLY - the corporate skin over Qourath's HUD (html.qtr is set by quarterly/js/qhud.js). */

/* ---- Qourath widgets an office has no use for ---- */
html.qtr #flickerWrap, html.qtr #corrWrap, html.qtr #memWrap, html.qtr #resWrap, html.qtr #huntBtn,
html.qtr #qoQuestMarks, html.qtr #vcardRoot, html.qtr #lbDeath, html.qtr #flipFx, html.qtr #xpLbl, html.qtr #shardLbl, html.qtr #navObj { display:none !important; }

/* ---- palette + type: Qourath's brass and serif become corporate steel-blue and a sans ---- */
html.qtr {
  --gd-line:#5a7aa8; --gd-line-hi:#9cc0f0; --gd-line-dim:rgba(90,122,168,.38); --gd-text:#d8dee8; --gd-dim:#8a94a6; --gd-head:#e8eef8;
  --gd-glow:rgba(110,160,240,.7); --bronze:#5a7aa8; --bronze-hi:#9cc0f0; --bronze-lo:#2a3a58; --bronze-deep:#121a28;
  --brass:#5a7aa8; --brass-hi:#9cc0f0; --brass-lo:#2a3a58;
  --hs-hair:linear-gradient(90deg,rgba(90,122,168,.14),rgba(156,192,240,.55),rgba(90,122,168,.14));
  --hs-ring:linear-gradient(160deg,#dfe8f6,#5a7aa8 42%,#1e2a40 62%,#5a7aa8);
  --hs-gold:#9cc0f0; --hs-ink:#e8eef8;
  --display:'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
html.qtr body *:not(svg):not(path), html.qtr body, html.qtr #hud, html.qtr .panel, html.qtr #log, html.qtr #msg, html.qtr #sub, html.qtr #zoneLbl, html.qtr button,
html.qtr #tooltip, html.qtr #hoverLbl, html.qtr .slot, html.qtr #navRoot, html.qtr #mmHud {
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif !important;
}
html.qtr #msg { letter-spacing:4px; font-weight:700; color:#eaf2ff; text-shadow:0 2px 14px #000, 0 0 30px #2a5bb855; }
html.qtr #sub { color:#b8c8e0; }
html.qtr #zoneLbl { color:#cfe0ff; letter-spacing:3px; }
html.qtr .panel { background:linear-gradient(180deg,#141b26f6,#0d121af8) !important; border-color:#3a5a88 !important; outline-color:#1a2638 !important; }
html.qtr .panel h2 { color:#dbe8ff; }
html.qtr .panel h2::before, html.qtr .panel h2::after { content:'' !important; }
html.qtr #hudBar { background:linear-gradient(180deg,#121a26f0,#0a0f17fa 40%) !important; border-top-color:#2e4466 !important; }
html.qtr .orbLbl { letter-spacing:2px; font-weight:700; }
#qBudget { position:fixed; left:198px; bottom:104px; z-index:30; pointer-events:none; font:700 14px 'Segoe UI',Arial,sans-serif; color:#ffe08a; text-shadow:0 1px 3px #000; }
#qXp { position:fixed; bottom:11px; left:50%; transform:translateX(-50%); z-index:30; pointer-events:none; font:600 12px 'Segoe UI',Arial,sans-serif; color:#9cc0f0; text-shadow:0 0 3px #000; white-space:nowrap; }

/* ---- floating office shouts (QO.Q.shout) ---- */
html.qtr .dmgF.qShout { font-family:'Segoe UI',Arial,sans-serif; font-weight:800; letter-spacing:.5px; white-space:nowrap;
  text-shadow:0 2px 0 #000, 0 0 6px #000, 0 0 14px #000a; }

/* ---- memos (story cards) ---- */
html.qtr #storyScr[data-mode=memo] { background:rgba(8,12,20,.78); padding:0; }
html.qtr #storyScr[data-mode=memo] #storyTitle { width:min(680px,86vw); box-sizing:border-box; margin:0; padding:14px 22px; font:700 18px 'Segoe UI',Arial,sans-serif;
  letter-spacing:1px; color:#fff; text-shadow:none; background:linear-gradient(180deg,#2c62c6,#1f4ea6); border-radius:8px 8px 0 0; text-align:left; }
html.qtr #storyScr[data-mode=memo] #storyTitle::before { content:'✉  '; }
html.qtr #storyScr[data-mode=memo] #storyBody { width:min(680px,86vw); max-width:none; box-sizing:border-box; padding:20px 26px 10px; background:#f6f7f9; color:#1f2430;
  font:15px/1.6 'Segoe UI',Arial,sans-serif; text-align:left; border-radius:0 0 8px 8px; box-shadow:0 20px 60px #000c; }
html.qtr #storyScr[data-mode=memo] #storyBody p:first-child { color:#5a6478; font-size:13px; border-bottom:1px solid #d8dce4; padding-bottom:10px; }
html.qtr #storyScr[data-mode=memo] #storyBody b { color:#1f2430; }
html.qtr #storyScr[data-mode=memo] #storyBtn { margin-top:16px !important; background:#2c62c6; color:#fff; border:none; border-radius:6px; padding:10px 26px;
  font:700 14px 'Segoe UI',Arial,sans-serif; letter-spacing:1.5px; box-shadow:0 6px 20px #0008; cursor:pointer; }
html.qtr #storyScr[data-mode=memo] #storyBtn:hover { background:#3a74e0; }

/* ---- the inbox toast ---- */
#qMail { position:fixed; right:18px; top:250px; width:300px; z-index:44; pointer-events:none; opacity:0; transform:translateX(30px);
  transition:opacity .35s, transform .35s; background:#f6f7f9; border-radius:8px; box-shadow:0 10px 30px #000b; overflow:hidden;
  font:13px/1.4 'Segoe UI',Arial,sans-serif; color:#1f2430; }
#qMail.on { opacity:.96; transform:none; }
#qMail .qmHead { background:#2c62c6; color:#fff; padding:6px 10px; font-size:12px; }
#qMail .qmIcon { font-size:13px; }
#qMail .qmBody { padding:9px 11px 10px; }

/* ---- Q1 KPIs (where the Hunt was) ---- */
#qKpi { position:fixed; left:14px; top:190px; width:230px; z-index:20; pointer-events:none; padding:8px 10px 6px;
  background:linear-gradient(180deg,rgba(18,26,38,.82),rgba(10,15,23,.86)); border:1px solid #2e4466; border-radius:8px;
  font:12px/1.5 'Segoe UI',Arial,sans-serif; color:#c8d4e6; box-shadow:0 6px 16px #0007; }
#qKpi .qkTitle { font-weight:800; letter-spacing:2px; color:#9cc0f0; font-size:11px; margin-bottom:3px; }
#qKpi .qkTitle span { float:right; letter-spacing:0; color:#ffe08a; font-weight:600; font-size:11px; }
#qKpi .qkRow { display:flex; justify-content:space-between; border-top:1px solid #ffffff10; padding:1px 0; }
#qKpi .qkRow b { color:#eef4ff; font-weight:600; }
html.qtr body.inTown #qKpi { display:none; }

/* ---- the announcer ---- */
#qAnn { position:fixed; left:0; right:0; top:15vh; text-align:center; z-index:46; pointer-events:none; opacity:0; transform:scale(.7);
  transition:opacity .2s, transform .25s cubic-bezier(.2,1.6,.4,1); }
#qAnn.on { opacity:1; transform:none; }
#qAnn .qaMain { font:900 46px 'Segoe UI',Impact,Arial,sans-serif; letter-spacing:3px; color:#ffe08a;
  text-shadow:0 3px 0 #6a4a00, 0 0 24px #ffb02a88, 0 0 2px #000; font-style:italic; }
#qAnn .qaSub { font:600 15px 'Segoe UI',Arial,sans-serif; color:#dbe8ff; text-shadow:0 2px 6px #000; margin-top:2px; }

/* ---- the title: Qourath's #menu re-dressed (quarterly/js/qfront.js) ---- */
html.qtr #frontBg, html.qtr #saveCard, html.qtr #menu .fShadeL, html.qtr #menu .fCrest, html.qtr #menu video, html.qtr #menu .ldVid, html.qtr .lcRoot, html.qtr #menu .fKeyart { display:none !important; }
#qTitleBg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; pointer-events:none; }
html.qtr #menu { background:#05070d !important; isolation:isolate; }
html.qtr #menu h1.fLogo { font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif !important; font-weight:900 !important; letter-spacing:.12em !important;
  font-size:clamp(34px,5.4vw,84px) !important; white-space:nowrap !important; color:#eef4ff !important; background:none !important; -webkit-text-fill-color:#eef4ff !important;
  text-shadow:0 0 30px #2a5bb8, 0 4px 0 #1a2a48 !important; animation:none !important; }
html.qtr #menu h1.fLogo::after, html.qtr #menu h1.fLogo::before { display:none !important; }
html.qtr #menu .fTitle .fSub { color:#9cc0f0 !important; letter-spacing:.3em !important; font-size:clamp(12px,1.3vw,18px) !important; }
html.qtr #menu .fTitle .tag { color:#ffe08a !important; letter-spacing:.4em !important; font-style:italic; }
html.qtr #menu .mBtn .lbl { font-family:'Segoe UI',Arial,sans-serif !important; letter-spacing:.14em !important; color:#dbe8ff; }
html.qtr #menu .mBtn:hover .lbl { color:#fff; }
html.qtr #menu .fFoot { color:#5a7aa8 !important; }

/* ---- the onboarding portal ---- */
#qOnboard { position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; background:rgba(5,8,14,.72);
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif; color:#1f2430; }
#qOnboard.on { display:flex; }
#qOnboard .qoWin { width:min(1180px,96vw); height:min(760px,94vh); background:#f3f5f8; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 90px #000d; }
#qOnboard .qoTop { background:#1f4ea6; color:#dbe8ff; padding:10px 18px; font-size:13px; }
#qOnboard .qoLogo { color:#fff; font-weight:800; letter-spacing:.5px; }
#qOnboard .qoMain { flex:1; display:flex; min-height:0; }
#qOnboard .qoSteps { width:190px; margin:0; padding:18px 0 0; list-style:none; background:#e6eaf0; border-right:1px solid #d4dae4; }
#qOnboard .qoSteps li { padding:10px 18px; color:#7a8496; font-size:14px; counter-increment:st; }
#qOnboard .qoSteps li::before { content:counter(st) '. '; }
#qOnboard .qoSteps li.on { color:#1f4ea6; font-weight:700; background:#fff; border-left:3px solid #1f4ea6; }
#qOnboard .qoSteps li.done { color:#1f7a3a; } #qOnboard .qoSteps li.done::after { content:' ✓'; }
#qOnboard .qoBody { flex:1; padding:16px 22px; overflow:auto; display:flex; flex-direction:column; }
#qOnboard h3 { margin:0 0 2px; font-size:19px; color:#1f2430; }
#qOnboard .qoHint { margin:0 0 12px; color:#6a7486; font-size:13px; }
#qOnboard .qoCards { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; flex:1; min-height:0; }
#qOnboard .qoCard { background:#fff; border:2px solid #dfe4ec; border-radius:10px; cursor:pointer; display:flex; flex-direction:column; overflow:hidden; transition:transform .12s, border-color .12s, box-shadow .12s; }
#qOnboard .qoCard:hover { transform:translateY(-3px); box-shadow:0 8px 20px #0002; }
#qOnboard .qoCard.on { border-color:#2c62c6; box-shadow:0 0 0 3px #2c62c633, 0 10px 24px #0003; }
#qOnboard .qoBadge { text-align:center; padding:0 0 8px; background:linear-gradient(180deg,#f8fafc,#eef2f7); border-bottom:1px solid #e4e8ef; }
#qOnboard .qoDept { color:#fff; font-size:11px; font-weight:800; letter-spacing:2px; padding:4px 0; }
#qOnboard .qoBadge img, #qOnboard .qoPh { width:96px; height:114px; object-fit:cover; margin:8px auto 4px; display:block; border-radius:6px; border:1px solid #cfd6e0; background:#dfe6ee; }
#qOnboard .qoPh { font-size:48px; line-height:114px; }
#qOnboard .qoJob { font-weight:800; font-size:16px; }
#qOnboard .qoRole { font-size:11px; color:#6a7486; letter-spacing:1px; text-transform:uppercase; }
#qOnboard .qoInfo { padding:8px 10px 10px; font-size:12px; display:flex; flex-direction:column; gap:5px; flex:1; min-height:0; overflow:auto; }
#qOnboard .qoInfo::-webkit-scrollbar { width:5px; } #qOnboard .qoInfo::-webkit-scrollbar-thumb { background:#c8d0dc; border-radius:3px; }
#qOnboard .qoTag { font-style:italic; color:#2c62c6; font-weight:600; }
#qOnboard .qoLore { color:#4a5468; line-height:1.35; font-size:11.5px; }
#qOnboard .qoBar { display:flex; align-items:center; gap:6px; font-size:10.5px; color:#5a6478; }
#qOnboard .qoBar span { width:92px; }
#qOnboard .qoBar i { flex:1; height:6px; background:#e4e8ef; border-radius:3px; overflow:hidden; }
#qOnboard .qoBar b { display:block; height:100%; background:#2c62c6; }
#qOnboard .qoSk { display:flex; flex-direction:column; gap:2px; margin-top:2px; }
#qOnboard .qoSk span { background:#eef2f8; border-radius:4px; padding:2px 6px; font-size:11px; color:#2a3448; }
#qOnboard .qoNav { display:flex; justify-content:space-between; margin-top:14px; }
#qOnboard .qoBtn { background:#2c62c6; color:#fff; border:none; border-radius:6px; padding:10px 22px; font:700 13px 'Segoe UI',Arial,sans-serif; letter-spacing:1.2px; cursor:pointer; }
#qOnboard .qoBtn:hover { background:#3a74e0; }
#qOnboard .qoBtn.ghost { background:#e4e8ef; color:#2a3448; } #qOnboard .qoBtn.ghost:hover { background:#d6dce6; }
#qOnboard .qoBtn.sm { padding:8px 12px; }
#qOnboard .qoBtn.sign { background:#1f7a3a; font-size:15px; padding:12px 30px; } #qOnboard .qoBtn.sign:hover { background:#28944a; }
#qOnboard .qoForm { display:flex; flex-direction:column; gap:10px; max-width:640px; }
#qOnboard .qoForm label { font-size:12px; font-weight:700; color:#4a5468; letter-spacing:.5px; display:block; }
#qOnboard .qoSum { display:flex; gap:14px; align-items:center; background:#fff; border:1px solid #dfe4ec; border-radius:8px; padding:10px; font-size:13px; }
#qOnboard .qoSum img { width:70px; height:83px; object-fit:cover; border-radius:5px; }
#qOnboard .qoSum i { color:#8a94a6; font-size:12px; }
#qOnboard .qoRow { display:flex; gap:8px; margin-top:4px; }
#qOnboard input#qoName { flex:1; font:600 16px 'Segoe UI',Arial,sans-serif; padding:9px 12px; border:1px solid #c8d0dc; border-radius:6px; color:#1f2430; background:#fff; user-select:text; }
#qOnboard .qoDiff { display:flex; gap:10px; }
#qOnboard .qoOpt { flex:1; background:#fff; border:2px solid #dfe4ec; border-radius:8px; padding:10px 12px; cursor:pointer; font-size:12px; color:#5a6478; }
#qOnboard .qoOpt b { display:block; font-size:14px; color:#1f2430; margin-bottom:2px; }
#qOnboard .qoOpt.on { border-color:#2c62c6; background:#f4f8ff; }
#qOnboard .qoChk { font-weight:400 !important; color:#5a6478 !important; display:flex !important; gap:8px; align-items:flex-start; letter-spacing:0 !important; }

/* ---- the lobby captions (Qourath's say Mirrorhold) ---- */
html.qtrLobby #zoneLbl, html.qtrLobby #mmHud .mmZone { visibility:hidden !important; }
#qZone { display:none; position:fixed; left:14px; top:10px; z-index:30; pointer-events:none; font:700 14px 'Segoe UI',Arial,sans-serif; letter-spacing:3px; color:#cfe0ff; text-shadow:0 1px 4px #000; }
html.qtrLobby #qZone { display:block; }

/* ---- memos: switch off Qourath's story-card ornaments (js/storycard.js) ---- */
html.qtr #storyScr[data-mode=memo] .scMotes, html.qtr #storyScr[data-mode=memo] .scKick, html.qtr #storyScr[data-mode=memo] .scAct,
html.qtr #storyScr[data-mode=memo] .scRule, html.qtr #storyScr[data-mode=memo] .scDrip, html.qtr #storyScr[data-mode=memo] .scSeam,
html.qtr #storyScr[data-mode=memo] .scHint { display:none !important; }
html.qtr #storyScr[data-mode=memo]::after, html.qtr #storyScr[data-mode=memo]::before { display:none !important; }
html.qtr #storyScr[data-mode=memo] .scCard { background:none !important; border:0 !important; border-image:none !important; -webkit-mask:none !important; mask:none !important;
  padding:0 !important; box-shadow:none !important; width:auto !important; display:flex; flex-direction:column; align-items:center; animation:qMemoIn .35s ease-out both !important; }
@keyframes qMemoIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
html.qtr #storyScr[data-mode=memo] #storyTitle .scCh, html.qtr #storyScr[data-mode=memo] #storyTitle .scW { color:#fff !important; background:none !important;
  -webkit-background-clip:initial !important; background-clip:initial !important; animation:none !important; filter:none !important; opacity:1 !important; transform:none !important; }
html.qtr #storyScr[data-mode=memo] #storyBody p { animation:none !important; opacity:1 !important; filter:none !important; transform:none !important;
  color:#1f2430 !important; font:15px/1.6 'Segoe UI',Arial,sans-serif !important; text-align:left !important; margin:0 0 12px !important; }
html.qtr #storyScr[data-mode=memo] #storyBody p:first-child { color:#5a6478 !important; font-size:13px !important; }
html.qtr #storyScr[data-mode=memo] #storyBody p::first-letter { font:inherit !important; color:inherit !important; float:none !important; margin:0 !important; padding:0 !important; text-shadow:none !important; }
html.qtr #storyScr[data-mode=memo] #storyBody p::before, html.qtr #storyScr[data-mode=memo] #storyBody p::after { display:none !important; }
html.qtr #storyScr[data-mode=memo] #storyBtn::before, html.qtr #storyScr[data-mode=memo] #storyBtn::after { display:none !important; }
html.qtr #storyScr[data-mode=memo] #storyBtn { font-family:'Segoe UI',Arial,sans-serif !important; color:#fff !important; text-shadow:none !important; }
html.qtr #storyScr[data-mode=memo] #storyBody p { text-transform:none !important; letter-spacing:normal !important; text-shadow:none !important; }
html.qtr #storyScr[data-mode=memo] #storyBtn { opacity:1 !important; visibility:visible !important; animation:none !important; transform:none !important; pointer-events:auto !important; }

/* objective arrow: big and readable for non-gamers (Pavel could not find Dave's desk from the small arrow) */
html.qtr #navMark .arr{border-left-width:20px;border-right-width:20px;border-bottom:34px solid #ffd24a;filter:drop-shadow(0 0 10px #ffb02a) drop-shadow(0 0 2px #000);animation:qNavPulse 1.1s ease-in-out infinite}
html.qtr #navMark .dia{width:24px;height:24px;border-color:#ffd24a}
html.qtr #navMark .txt{font-family:"Segoe UI",Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:1px;color:#1a1400;background:#ffd24a;border-radius:12px;padding:3px 10px;margin-top:8px;text-shadow:none;box-shadow:0 2px 8px rgba(0,0,0,.5)}
@keyframes qNavPulse{0%,100%{opacity:1}50%{opacity:.6}}