/* ============================================================
   SCRAPLINE — UI design system (v2 visual pass)
   ============================================================ */
:root {
  --disp: 'Chakra Petch', ui-monospace, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --num: 'Rajdhani', 'Chakra Petch', sans-serif;
  --panel: linear-gradient(160deg, rgba(22,28,40,0.94), rgba(11,15,22,0.96));
  --panel2: linear-gradient(160deg, rgba(28,36,50,0.9), rgba(16,21,30,0.94));
  --line: rgba(130,170,190,0.14);
  --line2: rgba(130,170,190,0.28);
  --txt: #dbe4ee; --txt2: #8b98a8;
  --acc: #57e7c8; --acc2: #6fb8ff; --amber: #f0b24a; --danger: #ef6a5e;
  --shadow: 0 18px 50px rgba(0,0,0,0.55);
  --cut: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
#ui { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; color: var(--txt); font-family: var(--body); font-size: 14px; cursor: default; -webkit-font-smoothing: antialiased; }
#ui .screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
#ui .screen.center { align-items: center; justify-content: center; }
h1, h2, .lbl, .brand, .tag, button, .tabs button, .chip, .tierbtn { font-family: var(--disp); }
.lbl { font-size: 11px; letter-spacing: 2.5px; color: var(--txt2); margin-bottom: 12px; text-transform: uppercase; font-weight: 600; }
.lbl b { color: var(--amber); }
.muted { color: var(--txt2); font-size: 12.5px; line-height: 1.5; }
.topbar { display: flex; align-items: center; gap: 22px; padding: 14px 28px; background: linear-gradient(180deg, rgba(14,19,27,0.92), rgba(9,12,18,0.8)); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.topbar .brand { font-weight: 700; font-size: 20px; letter-spacing: 4px; color: #f2f6fb; text-shadow: 0 0 18px rgba(87,231,200,0.35); position: relative; padding-left: 16px; }
.topbar .brand::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 22px; background: linear-gradient(180deg, var(--acc), var(--acc2)); border-radius: 2px; box-shadow: 0 0 12px var(--acc); }
.topbar .stat { font-family: var(--num); font-size: 16px; font-weight: 700; color: var(--txt); letter-spacing: 0.5px; }
.topbar .xp { width: 150px; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; display: inline-block; margin-left: auto; }
.topbar .xp span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); box-shadow: 0 0 10px var(--acc); }
button { font-family: var(--disp); font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--txt); background: linear-gradient(180deg, rgba(40,52,70,0.7), rgba(24,32,46,0.7)); border: 1px solid var(--line2); padding: 10px 20px; cursor: pointer; clip-path: var(--cut); transition: all .14s ease; }
button:hover:not(:disabled) { color: #fff; border-color: var(--acc); background: linear-gradient(180deg, rgba(50,74,80,0.8), rgba(28,44,48,0.8)); box-shadow: 0 0 18px rgba(87,231,200,0.2); }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.primary { color: #04120e; background: linear-gradient(180deg, #7cf3d8, #3fd3b4); border: 0; font-weight: 700; box-shadow: 0 6px 20px rgba(87,231,200,0.3), inset 0 1px 0 rgba(255,255,255,0.4); }
button.primary:hover { box-shadow: 0 8px 28px rgba(87,231,200,0.5); }
#mEnter { font-size: 15px; padding: 16px 40px; }
.menubox { text-align: center; }
.menubox h1 { font-size: 84px; font-weight: 700; letter-spacing: 14px; color: #f4f8fc; text-shadow: 0 0 60px rgba(87,231,200,0.4), 0 4px 20px rgba(0,0,0,0.6); margin-bottom: 4px; }
.menubox .tag { font-family: var(--body); color: var(--acc); letter-spacing: 6px; text-transform: uppercase; font-size: 12px; font-weight: 600; margin-bottom: 36px; }
.menusub { margin-top: 22px; font-size: 12px; color: var(--txt2); font-family: var(--body); }
.menusub a { color: var(--acc); cursor: pointer; text-decoration: none; border-bottom: 1px dotted rgba(87,231,200,0.4); }
.menusub a:hover { color: #fff; }
.hub { flex: 1; width: 100%; max-width: 1560px; margin: 0 auto; display: flex; flex-direction: column; padding: 22px 32px 20px; overflow: hidden; box-sizing: border-box; }
.tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs button { clip-path: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 16px; color: var(--txt2); }
.tabs button:hover { color: var(--txt); background: none; box-shadow: none; }
.tabs button.on { color: var(--acc); border-bottom-color: var(--acc); text-shadow: 0 0 12px rgba(87,231,200,0.4); }
.tabbody { flex: 1; overflow: auto; background: var(--panel); border: 1px solid var(--line); clip-path: var(--cut); padding: 22px; box-shadow: var(--shadow); }
.hubfoot { display: flex; gap: 12px; justify-content: flex-end; padding-top: 16px; }
.hubfoot .modebtn.on { background: var(--acc); color: #04120e; border-color: var(--acc); box-shadow: 0 0 14px rgba(87,231,200,0.4); }
.pad { padding: 24px; }
::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: rgba(120,160,180,0.2); border-radius: 4px; }
.srow { display: flex; gap: 28px; }
.grid { position: relative; background-color: rgba(4,7,11,0.5); background-image: linear-gradient(rgba(120,160,180,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,180,0.06) 1px, transparent 1px); border: 1px solid var(--line2); border-radius: 3px; box-shadow: inset 0 2px 20px rgba(0,0,0,0.5); }
.grid.drop-ok { box-shadow: inset 0 0 0 2px rgba(87,231,200,0.4); }
.itile { position: absolute; margin: 2px; border: 1px solid; border-radius: 4px; background: linear-gradient(155deg, rgba(28,36,48,0.96), rgba(16,21,30,0.98)); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: grab; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); transition: box-shadow .1s; }
.itile::before { content: ''; position: absolute; inset: 0; border-radius: 4px; box-shadow: inset 0 0 14px currentColor; opacity: 0.16; }
.itile:hover { box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 16px currentColor; z-index: 3; }
.itile.dragging { opacity: 0.3; }
.itile .g { font-size: 17px; line-height: 1; filter: drop-shadow(0 0 6px currentColor); }
.itile .ic { width: 82%; height: 82%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); pointer-events: none; }
.itile .nm { font-family: var(--body); font-size: 8.5px; font-weight: 500; color: #aeb8c6; margin-top: 3px; padding: 0 3px; text-align: center; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
.itile .stk { position: absolute; right: 3px; bottom: 2px; font-family: var(--num); font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }
.itile .rr { position: absolute; left: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
#dragGhost { position: fixed; z-index: 200; pointer-events: none; border: 1.5px solid; border-radius: 5px; background: linear-gradient(155deg, rgba(30,40,54,0.96), rgba(18,24,34,0.99)); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 22px currentColor; }
#dragGhost .g { font-size: 18px; filter: drop-shadow(0 0 6px currentColor); }
#dragGhost .ic { width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
#dragGhost.bad { border-color: var(--danger) !important; color: var(--danger) !important; }

/* EFT stash containers — openable tile marker + floating popup window */
.itile.openable { cursor: pointer; }
.itile.openable::after { content: '⤢'; position: absolute; top: 2px; right: 3px; font-size: 9px; color: var(--acc); opacity: 0.7; text-shadow: 0 0 4px currentColor; }
.cwin { position: fixed; z-index: 120; background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; box-shadow: var(--shadow); min-width: 120px; }
.cwin.cwin-focus { z-index: 130; }
.cwin-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 10px; cursor: grab; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(40,52,70,0.6), rgba(20,26,38,0.3)); border-radius: 6px 6px 0 0; user-select: none; }
.cwin-bar:active { cursor: grabbing; }
.cwin-t { font-family: var(--disp); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; }
.cwin-x { background: none; border: 1px solid var(--line2); color: var(--txt2); width: 18px; height: 18px; border-radius: 3px; font-size: 10px; line-height: 1; cursor: pointer; padding: 0; }
.cwin-x:hover { color: var(--danger); border-color: var(--danger); }
.cwin-body { padding: 10px; }
.cwin-meta { margin-top: 7px; font-family: var(--disp); font-size: 9px; letter-spacing: 0.4px; color: var(--txt2); }
.sidecol { min-width: 214px; display: flex; flex-direction: column; gap: 14px; }
.dropzone { border: 1px dashed var(--line2); border-radius: 4px; padding: 20px 12px; text-align: center; font-family: var(--disp); font-size: 11px; letter-spacing: 1px; color: var(--txt2); transition: all .12s; }
.dropzone.sell { border-color: rgba(240,178,74,0.4); color: var(--amber); }
.dropzone.salv { border-color: rgba(111,184,255,0.4); color: var(--acc2); }
.dropzone.drop-ok { background: rgba(87,231,200,0.08); border-style: solid; border-color: var(--acc); color: #fff; }
.tooltip { position: fixed; z-index: 210; width: 236px; background: linear-gradient(165deg, rgba(16,22,32,0.98), rgba(9,13,20,0.99)); border: 1px solid var(--line2); clip-path: var(--cut); padding: 12px 14px; font-family: var(--body); font-size: 11.5px; pointer-events: none; box-shadow: 0 12px 40px rgba(0,0,0,0.7); }
.tooltip b { font-family: var(--disp); font-size: 14px; letter-spacing: 0.5px; }
.tooltip .sub { color: var(--txt2); margin: 3px 0 8px; text-transform: uppercase; font-size: 9.5px; letter-spacing: 1.5px; }
.tooltip .row { color: #c0cad6; margin: 3px 0; font-family: var(--num); font-size: 13px; font-weight: 600; }
.tooltip .tdesc { color: #9fb0c2; font-size: 11px; line-height: 1.45; margin: 2px 0 8px; font-family: var(--body); }
.tooltip .ammoline { color: var(--acc); font-size: 11px; letter-spacing: 0.4px; margin-top: 5px; }
.tooltip .ammoline b { font-family: var(--num); font-size: 12px; letter-spacing: 1px; }
.tooltip .aff { margin: 3px 0; font-size: 11px; }
.aff { margin: 3px 0; font-size: 11px; display: flex; align-items: baseline; gap: 6px; }
.aff.q-top { color: #f0b64a; text-shadow: 0 0 8px rgba(240,182,74,0.35); }
.aff.q-high { color: #7bd66b; }
.aff.q-mid { color: #64ffda; }
.aff.q-low { color: #9aa0a6; }
.afr { margin-left: auto; color: #6b7787; font-family: var(--num); font-size: 9.5px; letter-spacing: 0.3px; white-space: nowrap; }
.tooltip .val { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--amber); font-family: var(--num); font-size: 14px; font-weight: 700; }
.qc-brief { font-family: var(--body); font-size: 11.5px; font-style: italic; color: #b9c4d2; line-height: 1.45; margin: 2px 0 8px; padding-left: 9px; border-left: 2px solid var(--line2); }
.uitoast { position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px); z-index: 320; max-width: 460px;
  background: linear-gradient(165deg, rgba(20,27,38,0.98), rgba(10,14,20,0.99)); border: 1px solid var(--acc); border-radius: 8px;
  padding: 13px 20px; font-family: var(--body); font-size: 13px; font-style: italic; color: #dfe6ee; box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; text-align: center; }
.uitoast.show { opacity: 1; transform: translate(-50%, 0); }
.craftlist, .modlist, .shop, .quests { display: flex; flex-direction: column; gap: 10px; }
.shop { max-width: 440px; }   /* narrower shop item rows */
.shoprow { padding: 10px 14px; }
.craftrow, .shoprow, .modrow, .questbox { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; transition: border-color .12s; }
.craftrow:hover, .shoprow:hover, .modrow:hover { border-color: var(--line2); }
.craftrow.dim, .modrow.dim { opacity: 0.55; }
.craftrow .cn, .shoprow .sn { flex: 1; font-family: var(--disp); font-size: 13px; letter-spacing: 0.5px; }
.craftrow .cr { width: 96px; font-family: var(--disp); font-size: 11px; letter-spacing: 1px; }
.craftrow .cc, .modrow .cc { color: var(--amber); font-family: var(--num); font-size: 13px; font-weight: 600; margin-right: 8px; }
/* workbench recipe rows: fixed grid columns so name/rarity/costs line up across rows and the
   CRAFT button hugs the right edge — the flex row let a 2-3 material cost block push the
   button to a different x per card (overflowing the card on wide recipes) */
.craftrow { display: grid; grid-template-columns: 84px 84px 1fr auto; }
.craftrow .cn { flex: none; }
.craftrow .cr { width: auto; }
.craftrow .cc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-right: 0; }
/* reforge / modify-gear rows */
.reforgerow { display: flex; flex-direction: column; gap: 9px; padding: 12px 16px; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; }
.reforgerow:hover { border-color: var(--line2); }
.rfhead { display: flex; align-items: center; gap: 12px; }
.rfi { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.rfn { font-family: var(--disp); font-size: 13px; letter-spacing: 0.5px; }
.rfm { font-size: 11px; margin-left: auto; }
.rfbtns { display: flex; gap: 8px; }
.rfbtns button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; font-size: 11px; }
.rfc { font-family: var(--num); font-size: 9.5px; font-weight: 600; color: var(--txt2); letter-spacing: 0; text-transform: none; }
.cc.maxed { color: var(--acc); }
.shoprow .g { width: 20px; font-size: 16px; }
.shoprow .sg { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.shoprow .sp { color: var(--amber); font-family: var(--num); font-size: 15px; font-weight: 700; width: 66px; text-align: right; }
.modrow { flex-wrap: wrap; } .modrow .mh { flex: 1; min-width: 170px; font-family: var(--disp); } .modrow .mh b { font-size: 14px; }
.modrow .lvl { color: var(--acc); font-family: var(--num); font-size: 13px; font-weight: 700; margin-left: 6px; } .modrow .muted { flex-basis: 100%; margin-top: 2px; }
.questbox { flex-direction: column; align-items: flex-start; gap: 4px; }
.questbox b { font-family: var(--disp); font-size: 13px; letter-spacing: 1px; color: var(--acc); }
.questbox .qn { font-family: var(--disp); color: #f2f6fb; font-size: 14px; }
.questbox .qr { color: var(--amber); font-family: var(--num); font-size: 13px; font-weight: 600; }

/* trader select + subtabs (Tarkov-style) — tall narrow cards, all six on one row */
.traderstrip { display: flex; flex-wrap: nowrap; gap: 10px; margin-bottom: 14px; }
.traderav { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; flex: 1 1 0; min-width: 0; padding: 14px 10px 11px; border: 1px solid var(--line); border-top: 3px solid var(--tc); border-radius: 4px; background: linear-gradient(160deg, rgba(22,30,42,0.6), rgba(13,18,26,0.8)); cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.traderav.on { box-shadow: inset 0 0 22px color-mix(in srgb, var(--tc) 12%, transparent); border-color: var(--tc); }
.traderav:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--tc) 30%, transparent); }
.traderav.locked { opacity: 0.5; cursor: default; }
.traderav .tav-face { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-size: 24px; font-weight: 700; color: #0a0d12; background: var(--tc); box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 45%, transparent); flex: 0 0 auto; overflow: hidden; }
.traderav .tav-portrait { width: 56px; height: 56px; display: block; }
.traderav.locked .tav-portrait { filter: grayscale(0.85) brightness(0.6); }
.traderav .tav-info { flex: none; width: 100%; min-width: 0; }
.traderav .tav-name { font-family: var(--disp); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.traderav .tav-sub { font-size: 10px; color: var(--txt2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.traderav .tav-rep { font-family: var(--num); font-size: 12px; color: var(--amber); flex: none; }
/* traders tab: strip + subtabs pinned, store/quest pane scrolls on its own */
.tabbody.tb-traders { display: flex; flex-direction: column; overflow: hidden; }
.tb-traders .traderstrip, .tb-traders .tradersub { flex: 0 0 auto; }
.traderbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
.tradersub { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tradersub .subtab { clip-path: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 18px; color: var(--txt2); }
.tradersub .subtab:hover { color: var(--txt); background: none; box-shadow: none; }
.tradersub .subtab.on { color: var(--acc); border-bottom-color: var(--acc); }
.subnotif { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; margin-left: 6px; border-radius: 8px; font-family: var(--num); font-size: 10px; font-weight: 700; vertical-align: middle; }
.subnotif.ready { background: var(--danger); color: #fff; box-shadow: 0 0 8px rgba(239,106,94,0.6); }
.subnotif.fresh { background: var(--acc); color: #04120e; box-shadow: 0 0 8px rgba(87,231,200,0.5); }
.qlane.wide { max-width: 640px; }
.shoprow.bm { border-color: rgba(167,101,216,0.4); }

/* quest board */
.qboard { display: flex; gap: 18px; margin-bottom: 22px; }
.qlane { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.qtrader { font-family: var(--disp); font-size: 12px; letter-spacing: 2px; color: var(--acc2); text-transform: uppercase; margin-bottom: 2px; }
.qcard { background: linear-gradient(160deg, rgba(22,30,42,0.7), rgba(13,18,26,0.8)); border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 4px; padding: 12px 14px; }
.qcard.active { border-left-color: var(--acc); box-shadow: inset 0 0 20px rgba(87,231,200,0.05); }
.qcard.done { opacity: 0.5; border-left-color: #4caf50; }
.qcard.upcoming { opacity: 0.55; }
.qc-top { display: flex; justify-content: space-between; align-items: center; }
.qc-name { font-family: var(--disp); font-size: 14px; font-weight: 600; color: #f2f6fb; letter-spacing: 0.5px; }
.qc-ok { color: #7bd66b; font-size: 15px; }
.qc-tag { font-family: var(--disp); font-size: 8.5px; letter-spacing: 1.5px; color: var(--acc2); border: 1px solid var(--line2); border-radius: 3px; padding: 2px 6px; }
.qrep { font-family: var(--num); font-size: 10px; color: var(--amber); border: 1px solid rgba(240,178,74,0.35); border-radius: 3px; padding: 1px 6px; margin-left: 6px; }
.qc-desc { color: var(--txt2); font-size: 11.5px; margin: 4px 0 8px; }
.qc-prog { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.qc-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); box-shadow: 0 0 8px var(--acc); }
.qc-pn { font-family: var(--num); font-size: 11px; color: var(--txt2); text-align: right; margin-bottom: 6px; }
.qc-rw { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qb { font-family: var(--num); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--line2); }
.qb.cr { color: var(--amber); } .qb.xp { color: var(--acc2); } .qb.bp { color: #a765d8; } .qb.un { color: #64d0ff; }
.qcard button { width: 100%; margin-top: 2px; }

/* in-raid quest toasts */
#toasts { position: absolute; top: 214px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; z-index: 9; }
.toast { font-family: var(--disp); font-size: 13px; letter-spacing: 1px; padding: 9px 18px; border-radius: 4px; clip-path: var(--cut);
  background: linear-gradient(180deg, rgba(20,28,40,0.95), rgba(12,17,25,0.96)); border: 1px solid var(--acc); color: #eef3f8;
  box-shadow: 0 8px 26px rgba(0,0,0,0.6); animation: toastin .25s ease, toastout .4s ease 2.6s forwards; }
.toast.done { border-color: var(--warm); color: var(--warm); }
@keyframes toastin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateY(-8px); } }
/* OPERATOR character sheet */
.opwrap { display: flex; gap: 24px; align-items: flex-start; }
.opleft { width: 240px; flex: 0 0 auto; text-align: center; background: linear-gradient(165deg, rgba(20,27,38,0.6), rgba(11,15,22,0.7)); border: 1px solid var(--line); clip-path: var(--cut); padding: 16px; }
.opleft canvas { width: 200px; height: 254px; }
.opleft .opname { font-family: var(--disp); font-size: 22px; font-weight: 700; letter-spacing: 1px; margin-top: 4px; }
.opleft .optag { color: var(--txt2); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; margin: 3px 0 10px; }
.opleft .oplvl { font-family: var(--num); font-size: 15px; margin-bottom: 12px; }
.opleft .oppass { font-size: 11.5px; color: #c4ccd6; line-height: 1.5; text-align: left; border-top: 1px solid var(--line); padding-top: 10px; }
.opright { flex: 1; }
.opgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 18px; }
.opgrid.mini { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 6px 0 12px; }
.opgrid.col2 { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 6px; }

/* OPERATOR 3-pane layout */
.opcols { display: flex; gap: 20px; align-items: flex-start; }
.opcol { min-width: 0; }
.opcol-stats { flex: 0 0 300px; }
.opstatbox { background: linear-gradient(165deg, rgba(20,27,38,0.55), rgba(11,15,22,0.7)); border: 1px solid var(--line); clip-path: var(--cut); padding: 16px 18px; }
.opstatbox > .lbl:first-child { margin-top: 0; }
.opcol-gear { flex: 0 0 452px; max-width: 452px; }
.opcol-stash { flex: 1; }
.opcol .lbl { margin-top: 16px; }
.opcol > .lbl:first-child, .opcol .lbl2 { margin-top: 0; margin-bottom: 12px; min-height: 18px; line-height: 18px; }
.opstatbox .ophead { margin-bottom: 6px; }
.disprow { display: flex; gap: 10px; margin-top: 12px; }
.disprow .dropzone { flex: 1; text-align: center; }
.stashmeta { margin-top: 8px; font-size: 11px; }
.opgrid.mini .opstat { padding: 8px 10px; }
.opgrid.mini .osv { font-size: 18px; }
.opstat { background: linear-gradient(160deg, rgba(24,32,44,0.7), rgba(14,19,28,0.8)); border: 1px solid var(--line); border-radius: 4px; padding: 11px 12px; }
.opstat.hot { border-color: rgba(87,231,200,0.4); box-shadow: inset 0 0 16px rgba(87,231,200,0.06); }
.opstat .osl { font-family: var(--disp); font-size: 10px; letter-spacing: 1.5px; color: var(--txt2); }
.opstat .osv { font-family: var(--num); font-size: 22px; font-weight: 700; color: #eef3f8; margin-top: 3px; }
.opstat.hot .osv { color: var(--acc); }
.opbuild { display: flex; gap: 24px; padding: 12px 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; color: var(--txt2); }
.opbuild b { color: #eef3f8; font-family: var(--num); font-size: 15px; }
.opnote { margin-top: 12px; font-size: 11px; }

/* OPERATOR header + paper-doll character panel */
.ophead { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.ophead .opname { font-family: var(--disp); font-size: 24px; font-weight: 700; letter-spacing: 1px; }
.ophead .optag { color: var(--txt2); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.ophead .oppass { color: #c4ccd6; font-size: 12px; margin-top: 4px; }
.opchar { margin-bottom: 18px; }
.charmain { display: flex; gap: 18px; align-items: flex-start; }
.pdpanel { width: 100%; box-sizing: border-box; background: linear-gradient(165deg, rgba(20,27,38,0.55), rgba(11,15,22,0.7)); border: 1px solid var(--line); clip-path: var(--cut); padding: 16px; }
.pd-doll { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.pd-col { display: flex; flex-direction: column; gap: 10px; }
.pd-mid { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.pd-mid canvas { width: 150px; height: 176px; }
.pd-quick { display: flex; gap: 10px; margin-top: 2px; }
.pd-quick .pdq { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 4px; padding: 5px 12px; }
.pd-quick .pdq i { font-style: normal; font-family: var(--disp); font-size: 9px; letter-spacing: 1.5px; color: var(--txt2); }
.pd-quick .pdq b { font-family: var(--num); font-size: 19px; color: var(--acc); }
.pdslot { position: relative; width: 138px; min-height: 54px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line2); border-radius: 4px; background: linear-gradient(160deg, rgba(26,34,46,0.7), rgba(13,18,26,0.85)); cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.pdslot.filled { border-color: var(--rc); box-shadow: inset 0 0 16px color-mix(in srgb, var(--rc) 12%, transparent); }
.pdslot.filled:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 45%, transparent); }
.pdslot.empty { border-style: dashed; border-color: var(--line2); justify-content: center; opacity: 0.7; cursor: default; }
.pdslot .pdk { position: absolute; top: 3px; left: 8px; font-family: var(--disp); font-size: 8.5px; letter-spacing: 1.5px; color: var(--txt2); }
.pdslot .pdi { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.pdslot .pdn { font-family: var(--body); font-size: 11px; color: #dfe6ee; line-height: 1.25; margin-top: 8px; overflow: hidden; }
.pdslot .pdplus { font-size: 22px; color: var(--txt2); font-weight: 300; }
.pdslot.sm { width: 66px; min-height: 60px; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 6px 6px; }
.pdslot.sm .pdn { display: none; }
.pdslot.sm .pdi { width: 30px; height: 30px; }
.pd-medrow { display: flex; gap: 8px; margin-top: 12px; }
.pd-secrow { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.pd-seclab { font-family: var(--disp); font-size: 10px; letter-spacing: 1.5px; color: var(--amber); flex: 0 0 auto; width: 72px; }
.pd-secrow .pdslot.sm { border-color: rgba(240,178,74,0.3); }
.pd-ammo { margin-top: 12px; font-size: 12px; color: #c4ccd6; }
.pd-ammo .muted { font-family: var(--disp); font-size: 10px; letter-spacing: 1.5px; margin-right: 6px; }
.pd-weight { margin-top: 12px; }
.pd-weight .pdw-top { font-family: var(--disp); font-size: 11px; letter-spacing: 1px; color: var(--txt2); margin-bottom: 4px; }
.pd-weight .pdw-top b { font-family: var(--num); color: #eef3f8; font-size: 14px; } .pd-weight .pdw-top b.over { color: var(--danger); }
.pd-weight .pdw-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.pd-weight .pdw-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); } .pd-weight .pdw-bar span.over { background: linear-gradient(90deg, #d0574e, #f0736a); }
.charstash { flex: 1; min-width: 0; }
.charstash .lbl2 { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-size: 11px; letter-spacing: 2px; color: var(--acc2); margin-bottom: 10px; }
button.mini { padding: 5px 12px; font-size: 10px; letter-spacing: 1px; margin-left: auto; }
.itile.equipped { outline: 2px solid var(--acc); outline-offset: -2px; }
.itile.equipped::after { content: '✓'; position: absolute; right: 3px; top: 2px; font-size: 10px; color: var(--acc); font-weight: 700; }

/* EFT equipment slots + container grids */
.eqslot { position: relative; width: 100%; box-sizing: border-box; height: 62px; display: flex; align-items: center; gap: 8px; padding: 16px 10px 9px; border: 1px solid var(--line2); border-radius: 4px; background: linear-gradient(160deg, rgba(26,34,46,0.7), rgba(13,18,26,0.85)); cursor: grab; transition: box-shadow .12s, border-color .12s; }
.eqslot.filled { border-color: var(--rc); box-shadow: inset 0 0 16px color-mix(in srgb, var(--rc) 12%, transparent); }
.eqslot.filled:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 45%, transparent); }
.eqslot.empty { border-style: dashed; justify-content: center; opacity: 0.65; cursor: default; }
.eqslot.drop-ok { border-color: var(--acc) !important; border-style: solid !important; box-shadow: inset 0 0 0 2px rgba(87,231,200,0.45); opacity: 1; }
.eqslot .pdk { position: absolute; top: 3px; left: 8px; font-family: var(--disp); font-size: 8.5px; letter-spacing: 1.5px; color: var(--txt2); }
.eqslot .pdi { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.eqslot .pdn { font-family: var(--body); font-size: 11px; color: #dfe6ee; line-height: 1.22; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 28px; }
.eqslot .pdplus { font-size: 22px; color: var(--txt2); font-weight: 300; }
.pd-cont { margin-top: 12px; }
.pd-clab { font-family: var(--disp); font-size: 10px; letter-spacing: 1.5px; color: var(--acc2); margin-bottom: 6px; }
.pd-cont.sec .pd-clab { color: var(--amber); }
.pd-crow { display: flex; gap: 22px; align-items: flex-start; }
.pd-foot { margin-top: 14px; }
.grid.drop-ok { box-shadow: inset 0 0 0 2px rgba(87,231,200,0.45); }

/* skill web — constellation node-graph */
.skillwebwrap { overflow-x: auto; padding: 6px 0 10px; }
.skillweb { position: relative; margin: 0 auto; }
.skilledges { position: absolute; inset: 0; pointer-events: none; }
.skilledges line { stroke: rgba(120,150,175,0.18); stroke-width: 2; }
.skilledges line.on { stroke: rgba(87,231,200,0.55); stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(87,231,200,0.5)); }
.sweb-br { position: absolute; top: 4px; width: 344px; text-align: center; font-family: var(--disp); font-size: 11px; letter-spacing: 3px; color: var(--acc2); font-weight: 600; }
.snode { position: absolute; width: 102px; height: 36px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 3px 5px;
  border: 1px solid var(--line2); border-radius: 18px; background: linear-gradient(180deg, rgba(26,34,46,0.95), rgba(14,19,28,0.98)); font-family: var(--body); font-size: 10.5px; line-height: 1.15; color: #aeb8c6; z-index: 2; transition: all .12s; }
.snode.learned { border-color: var(--acc); color: var(--acc); background: linear-gradient(180deg, rgba(30,60,54,0.95), rgba(16,30,28,0.98)); box-shadow: 0 0 16px rgba(87,231,200,0.22); }
.snode.avail { border-color: rgba(240,178,74,0.6); color: var(--amber); cursor: pointer; box-shadow: 0 0 12px rgba(240,178,74,0.15); }
.snode.avail:hover { background: rgba(240,178,74,0.12); transform: scale(1.05); }
.snode.locked { opacity: 0.4; }
.snode.star { border-radius: 8px; font-weight: 700; }
.snode.star.learned { box-shadow: 0 0 20px rgba(87,231,200,0.4); }

/* augment / redline — matrix tiles with rank meters */
.auggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 10px; }
.augnode { position: relative; min-height: 84px; box-sizing: border-box; border: 1px solid var(--line2); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; font-family: var(--body); font-size: 11.5px; cursor: default; transition: all .12s; background: linear-gradient(160deg, rgba(24,32,44,0.7), rgba(13,18,26,0.85)); }
.augnode .arbar { margin-top: auto; }
.augnode.can { cursor: pointer; border-color: rgba(240,178,74,0.5); }
.augnode.can:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.augnode.on { border-color: var(--acc); box-shadow: inset 0 0 18px rgba(87,231,200,0.07); }
.augnode.redline.on { border-color: #ff5a6a; box-shadow: inset 0 0 18px rgba(255,90,106,0.08); }
.augnode.maxed { opacity: 0.6; }
.augnode .an { font-family: var(--disp); font-size: 12px; letter-spacing: 0.3px; color: #eef3f8; }
.augnode .arbar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.augnode .arbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); }
.augnode.redline .arbar span { background: linear-gradient(90deg, #ff9ac0, #ff5a6a); }
.augnode .ar { color: var(--txt2); font-family: var(--num); font-weight: 700; font-size: 11px; }

/* hideout — module cards */
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.modcard { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); clip-path: var(--cut); background: linear-gradient(160deg, rgba(22,30,42,0.7), rgba(13,18,26,0.85)); }
.modcard.built { border-color: rgba(87,231,200,0.3); }
.modcard .mc-ico { font-size: 26px; color: var(--acc2); filter: drop-shadow(0 0 8px rgba(100,208,255,0.4)); }
.modcard .mc-name { font-family: var(--disp); font-size: 15px; font-weight: 700; letter-spacing: 0.5px; }
.modcard .mc-lvl { display: flex; align-items: center; gap: 4px; }
.modcard .mp { width: 14px; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.1); }
.modcard .mp.on { background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.modcard .mc-ln { margin-left: 6px; font-family: var(--num); font-size: 11px; color: var(--txt2); }
.modcard .mc-desc { font-size: 11.5px; color: var(--txt2); flex: 1; }
.modcard .mc-cost { color: var(--amber); font-family: var(--num); font-size: 13px; font-weight: 600; }
.modcard .mc-cost.maxed { color: #7bd66b; }
.modcard button { width: 100%; margin-top: 2px; }
.deploy { flex: 1; width: 100%; max-width: 1560px; margin: 0 auto; display: flex; gap: 28px; padding: 22px 32px; overflow: auto; box-sizing: border-box; }
.dcol { flex: 1; } .dcol:last-of-type { max-width: 440px; }
.dcol-set { flex: 0 0 320px; max-width: 320px; } .dcol-char { flex: 1; max-width: none !important; }
.dcol-gear { flex: 0 0 452px; max-width: 452px !important; } .dcol-stash { flex: 1; max-width: none !important; }
.tiers { display: flex; flex-direction: column; gap: 8px; } .tierbtn { text-align: left; clip-path: none; border-radius: 4px; }
.tierbtn.on { border-color: var(--acc); background: linear-gradient(90deg, rgba(87,231,200,0.14), rgba(87,231,200,0.03)); color: var(--acc); }
.tierbtn.locked { opacity: 0.3; cursor: not-allowed; }
.threatrow, .biomerow, .contractrow { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.chip { font-size: 11px; padding: 7px 13px; border-radius: 20px; clip-path: none; background: rgba(255,255,255,0.03); border: 1px solid var(--line2); letter-spacing: 1px; }
.chip:hover { border-color: var(--acc); background: rgba(87,231,200,0.06); box-shadow: none; }
.chip.on { background: var(--acc); color: #04120e; border-color: var(--acc); box-shadow: 0 0 14px rgba(87,231,200,0.4); }
.depthval { padding: 0 14px; color: var(--amber); font-family: var(--num); font-size: 16px; font-weight: 700; }
.alprev { margin-top: 18px; background: linear-gradient(160deg, rgba(240,178,74,0.08), rgba(240,178,74,0.02)); border: 1px solid rgba(240,178,74,0.25); clip-path: var(--cut); padding: 14px 16px; }
.insurebox { margin-top: 16px; }
.insurebox button { width: 100%; }
.alprev .lbl b { font-family: var(--num); font-size: 22px; font-weight: 700; }
.loadslots { display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow: auto; }
.loadslots.secbox { min-height: 44px; border: 1px dashed rgba(240,178,74,0.35); border-radius: 4px; padding: 6px; }
.loadslots.secbox.drop-ok { border-style: solid; border-color: var(--amber); background: rgba(240,178,74,0.06); }
.lslot { display: flex; align-items: center; gap: 10px; border: 1px solid; border-radius: 4px; padding: 8px 12px; background: linear-gradient(155deg, rgba(24,32,44,0.8), rgba(16,21,30,0.9)); cursor: grab; font-family: var(--body); font-size: 12px; }
.lslot .g { font-size: 15px; filter: drop-shadow(0 0 5px currentColor); }
.lslot .lg { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.lslot:hover { border-color: var(--danger); }
.deploy .hubfoot { position: absolute; bottom: 20px; right: 32px; }
.classwrap { text-align: center; }
.classwrap h1 { font-size: 42px; font-weight: 700; letter-spacing: 8px; margin-bottom: 30px; color: #f4f8fc; text-shadow: 0 0 40px rgba(87,231,200,0.25); }
.classrow { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.classcard { width: 250px; border: 1px solid; clip-path: var(--cut); padding: 22px; text-align: left; background: linear-gradient(165deg, rgba(22,28,40,0.9), rgba(12,16,24,0.95)); cursor: pointer; transition: transform .14s, box-shadow .2s; position: relative; overflow: hidden; }
.classcard::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: currentColor; box-shadow: 0 0 16px currentColor; }
.classcard:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px currentColor; }
.classcard h2 { font-size: 24px; font-weight: 700; letter-spacing: 3px; }
.classcard .ctag { font-family: var(--body); color: var(--txt2); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; }
.classcard .cdesc { font-family: var(--body); font-size: 12.5px; color: #c0cad6; margin-bottom: 12px; line-height: 1.5; }
.classcard .cstat { font-family: var(--num); font-size: 15px; font-weight: 700; color: var(--amber); margin-bottom: 10px; }
.classcard .cpass { font-family: var(--body); font-size: 11.5px; color: var(--acc); margin-bottom: 8px; line-height: 1.45; }
.classcard .cwep { font-family: var(--body); font-size: 11px; color: var(--txt2); }
.ascpick { background: linear-gradient(160deg, rgba(87,231,200,0.08), rgba(87,231,200,0.02)); border: 1px solid rgba(87,231,200,0.25); clip-path: var(--cut); padding: 16px; margin-bottom: 18px; }
.ascrow { display: flex; gap: 14px; }
.asccard { flex: 1; border: 1px solid var(--line2); border-radius: 4px; padding: 14px; cursor: pointer; transition: all .14s; }
.asccard:hover { border-color: var(--acc); background: rgba(87,231,200,0.08); transform: translateY(-2px); }
.asccard b { font-family: var(--disp); color: var(--amber); letter-spacing: 1px; font-size: 15px; }
.summary { text-align: center; background: var(--panel); border: 1px solid var(--line2); clip-path: var(--cut); padding: 40px 54px; max-width: 680px; box-shadow: var(--shadow); }
.summary h1 { font-size: 60px; font-weight: 700; letter-spacing: 8px; }
.summary.good h1 { color: var(--acc); text-shadow: 0 0 40px rgba(87,231,200,0.4); }
.summary.bad h1 { color: var(--danger); text-shadow: 0 0 40px rgba(239,106,94,0.4); }
.sgrid { display: flex; gap: 48px; text-align: left; margin: 28px 0; }
.glist { margin-top: 10px; font-family: var(--body); font-size: 12.5px; max-height: 230px; overflow: auto; } .glist div { margin: 3px 0; }
.sstats div { margin: 6px 0; color: var(--txt2); font-family: var(--body); } .sstats b { color: var(--txt); font-family: var(--num); font-size: 16px; font-weight: 700; }
/* UX-1 death recap — killer banner + forfeited/recovered tally */
.death-recap { margin: 16px auto 2px; max-width: 520px; }
.dr-killer { font-family: var(--disp); font-size: 15px; letter-spacing: 1px; color: var(--txt2); text-transform: uppercase; }
.dr-killer b { color: var(--danger); font-weight: 700; }
.dr-tally { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 10px; font-family: var(--disp); font-size: 11px; letter-spacing: 1.5px; color: var(--txt2); }
.dr-tally b { font-family: var(--num); font-size: 19px; font-weight: 700; }
.dr-lost b { color: var(--danger); } .dr-kept b { color: var(--acc); }
.dr-kept .muted { font-family: var(--body); letter-spacing: 0; font-size: 10.5px; }
.dr-sep { color: var(--line2); font-size: 14px; }
/* stacked recovered/lost lists on the death summary */
.deathloot { display: flex; flex-direction: column; gap: 14px; }
.deathloot .keptlbl { color: var(--acc); } .deathloot .lostlbl { color: var(--danger); }
.glist.small { max-height: 110px; font-size: 12px; }
.glist.lost div { color: var(--danger) !important; opacity: 0.85; text-decoration: line-through; }
#raidhud { position: absolute; inset: 0; pointer-events: none; }
#stormTimer { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-family: var(--num); font-size: 30px; font-weight: 700; letter-spacing: 2px; color: #c0cad6; text-shadow: 0 2px 12px rgba(0,0,0,0.8); }
#stormTimer.danger { color: var(--danger); text-shadow: 0 0 18px rgba(239,106,94,0.6); }
#radWrap { position: absolute; left: 24px; bottom: 78px; display: flex; align-items: center; gap: 9px; }
#radWrap .rlabel { font-family: var(--disp); font-size: 10px; color: #8fbf3f; letter-spacing: 2px; }
#radWrap .rbar { width: 190px; height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
#radFill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4a7f2f, #9fdf4f); box-shadow: 0 0 8px rgba(159,223,79,0.5); }
#prompt { position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%); font-family: var(--disp); font-size: 15px; letter-spacing: 1px; color: var(--amber); text-shadow: 0 2px 12px rgba(0,0,0,0.9); }

/* consumable hotbar (bottom-center) */
#consumables { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 10px; }
.cslot { position: relative; width: 46px; height: 46px; border-radius: 4px; clip-path: polygon(6px 0,100% 0,100% 100%,0 100%,0 6px);
  background: linear-gradient(160deg, rgba(26,34,46,0.82), rgba(14,19,28,0.9)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 16px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; }
.cslot .cg { font-size: 20px; line-height: 1; color: var(--mc); filter: drop-shadow(0 0 6px var(--mc)); }
.cslot .ck { position: absolute; left: 4px; top: 2px; font-family: var(--disp); font-size: 10px; font-weight: 700; color: var(--txt2); }
.cslot .cn { position: absolute; right: 4px; bottom: 2px; font-family: var(--num); font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }
.cslot.empty { opacity: 0.32; filter: grayscale(0.8); }
.cslot.empty .cn { color: var(--txt2); }

/* ultimate pip — left of the hotbar */
#ultpip { position: absolute; left: 50%; bottom: 22px; transform: translateX(-186px); width: 54px; height: 54px; border-radius: 6px; clip-path: polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); overflow: hidden; background: linear-gradient(160deg, rgba(26,34,46,0.82), rgba(14,19,28,0.9)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
#ultpip .ult-fill { position: absolute; inset: 0; transform-origin: bottom; transform: scaleY(0); background: linear-gradient(180deg, rgba(167,101,216,0.4), rgba(167,101,216,0.12)); transition: transform 0.12s linear; }
#ultpip .ult-key { position: relative; font-family: var(--disp); font-size: 22px; font-weight: 700; color: var(--txt2); }
#ultpip .ult-name { position: absolute; top: 3px; left: 0; right: 0; text-align: center; font-family: var(--disp); font-size: 7.5px; letter-spacing: 0.5px; color: var(--txt2); }
#ultpip.ready { box-shadow: inset 0 0 0 1px var(--acc2), 0 0 16px rgba(167,101,216,0.35); }
#ultpip.ready .ult-key { color: #d0a0f0; text-shadow: 0 0 12px rgba(167,101,216,0.7); }
#ultpip.ready .ult-fill { transform: scaleY(1); background: linear-gradient(180deg, rgba(167,101,216,0.22), rgba(167,101,216,0.06)); }

/* gadget pip (UTILITY throwable / deployable) — sits right of the consumable hotbar
   (at -126px it covered quick-use slot 1: the slots span -107..+107 around center) */
#gadgetpip { --gc: #8fdfff; position: absolute; left: 50%; bottom: 22px; transform: translateX(121px); width: 54px; height: 54px; border-radius: 6px; clip-path: polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); background: linear-gradient(160deg, rgba(26,34,46,0.82), rgba(14,19,28,0.9)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); display: none; align-items: center; justify-content: center; }
#gadgetpip.on { display: flex; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 55%, transparent), 0 0 14px color-mix(in srgb, var(--gc) 22%, transparent); }
#gadgetpip .gad-glyph { position: relative; font-size: 24px; line-height: 1; color: var(--gc); text-shadow: 0 0 10px color-mix(in srgb, var(--gc) 60%, transparent); }
#gadgetpip .gad-key { position: absolute; top: 2px; left: 4px; font-family: var(--disp); font-size: 11px; font-weight: 700; color: var(--txt2); }
#gadgetpip .gad-name { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-family: var(--disp); font-size: 6.5px; letter-spacing: 0.4px; color: var(--txt2); white-space: nowrap; overflow: hidden; }
#gadgetpip .gad-count { position: absolute; top: 2px; right: 4px; font-family: var(--disp); font-size: 11px; font-weight: 700; color: var(--gc); }

/* channel bar (meds / search / extraction) — above the hotbar */
#channel { position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%); width: 260px; display: none; }
#channel.on { display: block; }
#channel .clabel { font-family: var(--disp); font-size: 12px; letter-spacing: 2px; color: #dbe4ee; text-align: center; margin-bottom: 5px; text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
#channel .cbar { height: 7px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
#channel .cbar span { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0); background: #64ffda; box-shadow: 0 0 10px currentColor; transition: transform 0.05s linear; }
#minimap { position: absolute; top: 16px; right: 18px; width: 220px; height: 250px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6)); }
#questTrack { position: absolute; top: 282px; right: 22px; max-width: 210px; text-align: right; font-family: var(--body); font-size: 12px; color: var(--txt2); display: flex; flex-direction: column; gap: 4px; }
#questTrack .qt-row { text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
#questTrack .qt-row.ready { color: var(--acc); }
#questTrack .qt-p { font-family: var(--num); color: #eef3f8; }
#compare { position: absolute; left: 24px; top: 42%; transform: translateY(-50%); z-index: 8; display: none; width: 228px;
  background: linear-gradient(165deg, rgba(16,22,32,0.96), rgba(9,13,20,0.98)); border: 1px solid var(--acc); border-left-width: 3px; clip-path: var(--cut);
  padding: 12px 14px; font-family: var(--body); font-size: 11.5px; box-shadow: 0 12px 40px rgba(0,0,0,0.7); pointer-events: none; }
#compare .cmp-h { font-family: var(--disp); font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
#compare .cmp-sub { color: var(--txt2); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin: 2px 0 8px; }
#compare .cmp-r { color: #c4ccd6; margin: 2px 0; }
#compare .cmp-a { font-size: 11px; margin: 1px 0; }
#compare .cmp-vs { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--txt2); font-size: 10.5px; }
#compare .cmp-d { font-family: var(--num); font-size: 15px; font-weight: 700; margin-top: 2px; }
#compare .cmp-v { margin-top: 8px; color: var(--amber); font-family: var(--num); font-size: 12px; }

#raidInv { position: absolute; inset: 0; z-index: 25; display: none; align-items: center; justify-content: center; background: rgba(5,8,13,0.78); backdrop-filter: blur(5px); }
.invbox { display: flex; gap: 28px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line2); clip-path: var(--cut); padding: 26px; box-shadow: var(--shadow); }
.invside { min-width: 200px; } .invside div { margin: 4px 0; }

/* ============================================================
   C2 — account / market / social
   ============================================================ */
.topbar .acctchip { font-family: var(--disp); font-size: 12px; font-weight: 700; letter-spacing: 0.6px; color: var(--acc); cursor: pointer; padding: 5px 12px; border: 1px solid var(--line2); border-radius: 5px; background: rgba(87,231,200,0.06); margin-left: 10px; white-space: nowrap; }
.topbar .acctchip:hover { background: rgba(87,231,200,0.14); box-shadow: 0 0 12px rgba(87,231,200,0.2); }

/* sign-in modal */
.modalback { position: fixed; inset: 0; z-index: 300; background: rgba(4,7,11,0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
.authbox { position: relative; width: 360px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; box-shadow: var(--shadow); padding: 26px 26px 22px; }
.authbox h2 { font-size: 22px; letter-spacing: 3px; margin: 0 0 6px; color: #f2f6fb; }
.authbox .authwho { font-size: 15px; color: var(--acc); margin: 6px 0; }
.authform { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.authform input { background: rgba(6,9,13,0.6); border: 1px solid var(--line2); border-radius: 5px; padding: 10px 12px; color: var(--txt); font-family: var(--body); font-size: 14px; }
.authform input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.autherr { min-height: 14px; font-size: 11px; color: var(--amber); font-family: var(--disp); letter-spacing: 0.4px; }
.authbox button { width: 100%; margin-top: 8px; }
.authbox button.danger { border-color: rgba(232,99,90,0.5); color: #e8635a; }
.authbox button.danger:hover { background: rgba(232,99,90,0.12); border-color: #e8635a; }
.authbox .authx { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; padding: 0; background: none; border: 1px solid var(--line2); color: var(--txt2); border-radius: 4px; }
.authbox .authx:hover { color: var(--danger); border-color: var(--danger); }

/* market / social tab */
.markethead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.msub { display: flex; gap: 4px; }
.msub button, .mfilters button { clip-path: none; background: rgba(255,255,255,0.03); border: 1px solid var(--line); color: var(--txt2); padding: 6px 14px; font-size: 11px; border-radius: 5px; }
.msub button.on, .mfilters button.on { color: var(--acc); border-color: var(--acc); background: rgba(87,231,200,0.08); }
.mfilters { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.marketbody { min-height: 200px; }

/* H3: settings menu */
/* [b] bigger settings modal: wide enough for the 2-col keymap to fit without an inner scroll */
.settingsbox { width: min(620px, 94vw); min-width: 380px; max-width: 620px; max-height: 92vh; overflow-y: auto; }
.kbrow.rebindable { cursor: pointer; border-radius: 4px; padding: 3px 6px; margin: 0 -6px; }
.kbrow.rebindable:hover { background: rgba(255,255,255,0.05); }
.kbrow kbd.capturing { color: var(--acc); border-color: var(--acc); background: rgba(87,231,200,0.14); }
.settingsbox .keybinds { max-height: none; overflow: visible; padding-right: 4px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.setrow label { font-size: 13px; color: var(--txt); }
.setctl { display: flex; align-items: center; gap: 10px; }
.setctl input[type=range] { width: 150px; accent-color: var(--acc); }
.settoggle { min-width: 52px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,0.03); color: var(--txt2); font-size: 11px; letter-spacing: 1px; }
.settoggle.on { color: var(--acc); border-color: var(--acc); background: rgba(87,231,200,0.08); }
.settingsbox .lbl { margin-top: 16px; }
.keybinds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 8px; }
.kbrow { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--txt2); padding: 3px 0; }
.kbrow kbd { font-family: var(--num, monospace); font-size: 11px; color: var(--txt); background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; letter-spacing: 1px; }
#settingsChip { cursor: pointer; padding: 4px 9px; }
#settingsChip:hover { color: var(--acc); border-color: var(--acc); }

/* F2: PvPvE squad code input */
.squadinput { width: 100%; max-width: 240px; margin-top: 6px; padding: 8px 12px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--line); border-radius: 5px; color: var(--txt); font-family: inherit; font-size: 12px; letter-spacing: 1px; }
.squadinput:focus { outline: none; border-color: var(--acc); background: rgba(87,231,200,0.06); }
.squadinput::placeholder { color: var(--txt2); letter-spacing: 0.5px; }

/* Phase G: season ladder */
/* P1#9: center the constrained ladder column so it doesn't leave a dead right half */
.laddertable { display: flex; flex-direction: column; gap: 3px; margin: 12px auto 0; max-width: 720px; }
.ladderrow { display: grid; grid-template-columns: 46px 1fr 84px 82px 40px 92px; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.ladderrow.mine { border-color: var(--acc); background: rgba(87,231,200,0.07); }
.ladderrow .lrank { color: var(--txt2); font-variant-numeric: tabular-nums; }
.ladderrow .lname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ladderrow .lcls { font-size: 10px; letter-spacing: 0.5px; }
.ladderrow .lstat { font-size: 11px; text-align: right; }
.ladderrow .lscore { text-align: right; color: var(--acc); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .ladderrow { grid-template-columns: 38px 1fr 60px; } .ladderrow .lcls, .ladderrow .lstat { display: none; } }
.mlist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 18px; }
.mrow { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, rgba(24,31,43,0.7), rgba(14,19,28,0.8)); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.mrow .mri { width: 30px; height: 30px; object-fit: contain; flex: none; }
.mrow .mrn { font-family: var(--disp); font-weight: 700; font-size: 13px; min-width: 150px; }
.mrow .mrc { font-size: 11px; min-width: 130px; }
.mrow .mrs { font-size: 11px; min-width: 90px; }
.mrow .mrp { font-family: var(--num); font-weight: 700; font-size: 15px; color: var(--amber); margin-left: auto; }
.mrow .mprice { width: 74px; background: rgba(6,9,13,0.6); border: 1px solid var(--line2); border-radius: 4px; padding: 5px 7px; color: var(--txt); font-family: var(--num); }
.mrow button.mini, .friendadd button, .tradeoffer button { margin-left: 8px; }
.tradeoffer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tradeoffer input, .friendadd input { background: rgba(6,9,13,0.6); border: 1px solid var(--line2); border-radius: 5px; padding: 8px 10px; color: var(--txt); font-family: var(--body); font-size: 13px; }
.tradeoffer .tpick { background: rgba(6,9,13,0.6); border: 1px solid var(--line2); border-radius: 5px; padding: 8px 10px; color: var(--txt); font-family: var(--body); font-size: 13px; min-width: 200px; }
.tradeoffer .tpick { width: 100%; margin: 6px 0; }
.friendadd { display: flex; gap: 8px; margin-bottom: 14px; }
.lbl2 { font-family: var(--disp); font-size: 12px; letter-spacing: 1.5px; color: var(--txt2); margin: 14px 0 8px; text-transform: uppercase; }
.pad { padding: 14px 2px; }
.partyrow { display: flex; gap: 8px; justify-content: center; margin: 8px 0 4px; }
.partyrow input { background: rgba(6,9,13,0.6); border: 1px solid var(--line2); border-radius: 5px; padding: 8px 12px; color: var(--txt); font-family: var(--body); font-size: 12px; width: 300px; }
.partyrow input:focus { outline: none; border-color: var(--acc); }

/* ============================================================
   Feedback pass — workbench 3-pane reforge
   ============================================================ */
.wbcols { display: flex; gap: 20px; align-items: flex-start; }
.wbcol { min-width: 0; }
/* craft col needs the most fixed-width room (name+rarity+costs+button per row); the reforge
   hint box has slack and the stash grid scale-fits itself, so they cede space */
.wbcol-craft { flex: 1.45; }
.wbcol-reforge { flex: 1.0; }
.wbcol-stash { flex: 1.15; }
.reforgeslot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 190px; justify-content: center; padding: 20px 16px; }
.reforgeslot.empty { border-style: dashed; }
.reforgeslot .rfslot-hint { text-align: center; font-family: var(--disp); font-size: 11.5px; letter-spacing: 0.6px; color: var(--txt2); line-height: 1.8; text-wrap: balance; }
.reforgeslot .rfbig { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }
.reforgeslot .rfname { font-family: var(--disp); font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-align: center; }
.reforgeslot .rfsub { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.reforgeslot .rfaffs { width: 100%; margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.rfopts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rfopt { display: flex; align-items: center; gap: 10px; text-align: left; clip-path: none; border-radius: 5px; padding: 10px 14px; }
.rfopt .rfoptn { font-family: var(--disp); font-weight: 700; letter-spacing: 1px; min-width: 74px; }
.rfopt .rfoptd { flex: 1; font-family: var(--body); font-size: 10.5px; text-transform: none; letter-spacing: 0; color: var(--txt2); }
.rfopt .rfc { color: var(--amber); font-family: var(--num); font-size: 12px; font-weight: 700; }
.wbcol-reforge .mini { margin-top: 10px; }

/* in-raid equipment paper-doll (equip found gear mid-raid) */
.inv-eqcol { width: 320px; display: flex; flex-direction: column; }
/* [a] full 8-slot paperdoll (parity with hideout): 2-col grid so it stays compact */
.inv-doll { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-doll .eqslot { height: 62px; }
/* read-only display slots (core/utility/secure/backpack in-raid): no grab cursor, dimmed placeholder */
.eqslot.ro { cursor: default; }
.eqslot.ro.empty { opacity: 0.5; }
.eqslot .pdammo { position: absolute; bottom: 3px; right: 8px; font-family: var(--num); font-size: 10px; color: var(--amber); letter-spacing: 0.5px; }

/* in-raid proximity loot picker (left side; scroll to select, E to take) */
#lootlist { position: absolute; left: 24px; top: 42%; transform: translateY(-50%); z-index: 9; display: none; width: 248px;
  background: linear-gradient(165deg, rgba(16,22,32,0.96), rgba(9,13,20,0.98)); border: 1px solid var(--line2); border-left: 3px solid var(--acc); clip-path: var(--cut);
  padding: 12px 14px; font-family: var(--body); font-size: 11.5px; box-shadow: 0 12px 40px rgba(0,0,0,0.7); pointer-events: none; }
#lootlist .lootlist-hd { font-family: var(--disp); font-size: 10px; letter-spacing: 1.5px; color: var(--txt2); text-transform: uppercase; margin-bottom: 8px; }
#lootlist .lootrows { display: flex; flex-direction: column; gap: 2px; max-height: 210px; overflow: hidden; margin-bottom: 10px; }
#lootlist .lootrow { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; border: 1px solid transparent; }
#lootlist .lootrow.on { background: rgba(87,231,200,0.1); border-color: var(--acc); }
#lootlist .lootrow .ldot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
#lootlist .lootrow .lname { flex: 1; font-family: var(--disp); font-size: 11px; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lootlist .lootrow .lcat { font-size: 9px; color: var(--txt2); text-transform: uppercase; letter-spacing: 0.5px; }
#lootlist .lootdetail { border-top: 1px solid var(--line); padding-top: 9px; }
#lootlist .cmp-h { font-family: var(--disp); font-size: 13px; font-weight: 700; }
#lootlist .cmp-sub { color: var(--txt2); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; margin: 2px 0 6px; }
#lootlist .cmp-r { color: #c4ccd6; margin: 2px 0; }
#lootlist .cmp-vs { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--txt2); font-size: 10px; }
#lootlist .cmp-d { font-family: var(--num); font-size: 14px; font-weight: 700; }
#lootlist .cmp-v { margin-top: 7px; color: var(--amber); font-family: var(--num); font-size: 12px; }

/* keep a normal cursor over body-appended overlays (the game body sets cursor:none) */
.modalback, .authbox, .cwin, .tooltip { cursor: default; }
.authform input, .tradeoffer input, .friendadd input, .mprice, .tradeoffer .tpick { cursor: text; }
/* workbench: grey out stash items with no available reforge */
.itile.rf-dim { opacity: 0.34; filter: grayscale(0.7); }
.itile.rf-dim::before { opacity: 0.05; }
/* quest notification badges (traders tab + portraits) */
.tabnotif { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px; border-radius: 8px; font-family: var(--num); font-size: 11px; font-weight: 700; vertical-align: middle; }
.tabnotif.ready { background: var(--danger); color: #fff; box-shadow: 0 0 8px rgba(239,106,94,0.6); }
.tabnotif.fresh { background: var(--acc); color: #04120e; box-shadow: 0 0 8px rgba(87,231,200,0.5); }
.qtoggle { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.qtoggle label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--body); font-size: 11px; color: var(--txt2); cursor: pointer; user-select: none; }
.qtoggle input { accent-color: var(--acc); cursor: pointer; }
.tav-badge { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; }
.tav-badge.ready { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.tav-badge.fresh { background: var(--acc); box-shadow: 0 0 8px var(--acc); }

/* ===== Squawk — the companion AI voice ===== */
.sqname { color: var(--amber); font-family: var(--disp); font-weight: 700; letter-spacing: 0.1em; font-size: 10.5px; margin-right: 9px; text-transform: uppercase; }
#squawk { position: absolute; top: 70px; left: 50%; transform: translate(-50%, -8px); max-width: 640px; width: max-content; padding: 9px 18px; text-align: center; font-family: var(--body); font-size: 14px; line-height: 1.45; color: #e7edf4; background: linear-gradient(180deg, rgba(10,14,20,0.86), rgba(10,14,20,0.66)); border: 1px solid rgba(240,178,74,0.28); border-left: 3px solid var(--amber); border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity .35s ease, transform .35s ease; text-shadow: 0 1px 4px #000; z-index: 6; }
#squawk.show { opacity: 1; transform: translate(-50%, 0); }
#squawk i { color: #d6c6ec; font-style: italic; }
#squawk b { color: #fff; }

/* ===== opening scene ===== */
.introscene { background: radial-gradient(120% 90% at 50% 40%, rgba(6,9,14,0.35), rgba(4,6,10,0.85)); }
.introbox { width: min(760px, 88vw); text-align: center; }
.intro-kicker { font-family: var(--disp); letter-spacing: 0.5em; font-size: 13px; color: var(--amber); opacity: 0.75; margin-bottom: 30px; }
.intro-lines { display: flex; flex-direction: column; gap: 20px; margin-bottom: 34px; min-height: 40vh; justify-content: center; }
.intro-line { font-family: var(--body); font-size: 18px; line-height: 1.6; color: #cdd7e2; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.intro-line.in { opacity: 1; transform: translateY(0); }
.intro-line b { color: #fff; }
.intro-line i { font-style: italic; }
.intro-line.sq { color: #eef2f7; }
.intro-line.sq i { color: #d6c6ec; }
.intro-foot { min-height: 44px; }
.intro-adv { font-family: var(--disp); font-size: 12px; letter-spacing: 0.12em; color: var(--txt2); cursor: pointer; text-transform: uppercase; opacity: 0.8; }
.intro-adv:hover { color: var(--acc); }
.intro-go { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.intro-go.in { opacity: 1; transform: translateY(0); }

/* ===== summary Squawk quip ===== */
.sum-squawk { margin: 6px auto 14px; max-width: 460px; font-size: 13.5px; line-height: 1.5; color: #cdd7e2; font-style: normal; }
.sum-squawk i { color: #d6c6ec; font-style: italic; }
.sum-squawk b { color: #fff; }

/* ===== boss encounter banner ===== */
#bossintro { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -14px); width: min(680px, 86vw); text-align: center; pointer-events: none; opacity: 0; transition: opacity .5s ease, transform .5s ease; z-index: 7; --bcol: #ef6a5e; }
#bossintro.show { opacity: 1; transform: translate(-50%, 0); }
#bossintro .bi-warn { font-family: var(--disp); font-size: 12px; letter-spacing: 0.4em; color: var(--bcol); opacity: 0.85; margin-bottom: 6px; }
#bossintro .bi-name { font-family: var(--disp); font-weight: 700; font-size: 40px; letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 24px var(--bcol), 0 2px 6px #000; margin-bottom: 10px; }
#bossintro .bi-line { font-family: var(--body); font-size: 15px; line-height: 1.5; color: #d6dee7; max-width: 560px; margin: 0 auto; text-shadow: 0 1px 4px #000; }
#bossintro::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -14px; height: 2px; background: linear-gradient(90deg, transparent, var(--bcol), transparent); opacity: 0.7; }

/* ===== Anomaly pinnacle deploy control ===== */
.pinbtn { margin-top: 8px; width: 100%; color: #cbb6ff; border-color: rgba(185,166,255,0.45); background: linear-gradient(180deg, rgba(46,34,64,0.7), rgba(28,20,40,0.7)); letter-spacing: 2px; }
.pinbtn:hover:not(:disabled) { color: #fff; border-color: #b9a6ff; box-shadow: 0 0 18px rgba(185,166,255,0.35); }
.pinbtn.on { color: #0c0814; background: linear-gradient(180deg, #cbb6ff, #a98fe6); border: 0; font-weight: 700; box-shadow: 0 0 22px rgba(185,166,255,0.5), inset 0 1px 0 rgba(255,255,255,0.4); }
.sum-pin { display: inline-block; margin-top: 8px; font-family: var(--disp); font-size: 11px; letter-spacing: 0.16em; color: #b9a6ff; border: 1px solid rgba(185,166,255,0.5); border-radius: 3px; padding: 3px 10px; }

/* ===== scene crossfade (only on actual scene changes) ===== */
#ui.scenein { animation: sceneIn .34s cubic-bezier(.2,.7,.3,1) both; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.mc-req { font-family: var(--disp); font-size: 10px; letter-spacing: 0.06em; color: var(--amber); opacity: 0.9; margin: 4px 0; }

/* ============================================================
   WAVE-2b — crafting panels · contracts board · legibility
   ============================================================ */

/* ---- §C workbench craft panels (signatures / temper / masterwork) ---- */
.craftpanels { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cpanel { background: rgba(20,27,38,0.55); border: 1px solid var(--line); border-radius: 5px; padding: 11px 13px; }
.cpanel .cph { font-family: var(--disp); font-size: 11px; letter-spacing: 1.4px; color: var(--txt); text-transform: uppercase; margin-bottom: 9px; }
.cpanel .cph .muted { letter-spacing: 0.6px; }
.cp-empty { font-size: 10.5px; font-style: italic; padding: 2px 0; }
.cp-imprinted { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.sigchip { font-family: var(--disp); font-size: 10px; letter-spacing: 0.8px; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--line2); color: var(--acc2); background: rgba(111,184,255,0.08); }
.sigchip.core { color: var(--amber); border-color: rgba(240,178,74,0.5); background: rgba(240,178,74,0.1); }
.cp-codex { display: flex; flex-direction: column; gap: 5px; }
.sigrow, .temprow { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 4px; background: rgba(255,255,255,0.02); }
.sigrow-n { font-family: var(--disp); font-size: 11px; letter-spacing: 0.5px; color: var(--acc2); flex: 0 0 auto; }
.sigrow-n.core { color: var(--amber); }
.sigrow-d { flex: 1; font-family: var(--body); font-size: 10px; color: var(--txt2); line-height: 1.35; min-width: 0; }
.temprow-n { flex: 1; font-family: var(--disp); font-size: 11px; letter-spacing: 0.6px; color: var(--txt); }
.sigrow .rfc, .temprow .rfc { color: var(--amber); font-family: var(--num); font-size: 11px; font-weight: 700; }
.cp-temper { display: flex; flex-direction: column; gap: 5px; }
button.mini.warn { color: #ffd9a0; border-color: rgba(240,178,74,0.5); }
.mwbar { display: flex; gap: 5px; margin: 4px 0 10px; }
.mwpip { flex: 1; height: 7px; border-radius: 3px; background: rgba(255,255,255,0.07); border: 1px solid var(--line); }
.mwpip.on { background: linear-gradient(180deg, #ffd77a, var(--amber)); border-color: var(--amber); box-shadow: 0 0 8px rgba(240,178,74,0.4); }
.cpanel button.primary.mini { width: 100%; margin: 0; }

/* ---- §N contracts board ---- */
.ctr-bal { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ctr-cur { font-family: var(--disp); font-size: 11px; letter-spacing: 0.6px; color: var(--txt2); padding: 9px 15px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); }
.ctr-cur b { font-family: var(--num); font-size: 16px; color: var(--txt); margin: 0 3px; }
.ctr-cur.frag b { color: #b9a6ff; }
.ctr-cur.uber b { color: #ff5bd0; }
.ctr-cur.key b { color: var(--amber); }
.ctrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 8px 0 22px; }
.ctrcard { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 4px; padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; }
.ctr-top { display: flex; align-items: flex-start; gap: 8px; }
.ctr-name { flex: 1; font-family: var(--disp); font-size: 13px; letter-spacing: 0.5px; color: var(--txt); }
.ctr-name.elite { color: var(--amber); text-shadow: 0 0 10px rgba(240,178,74,0.35); }
.ctr-rws { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ctr-rw { font-family: var(--num); font-size: 11px; font-weight: 700; color: var(--amber); background: rgba(240,178,74,0.1); border: 1px solid rgba(240,178,74,0.3); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
.ctr-rw.cos { color: #b9a6ff; background: rgba(185,166,255,0.1); border-color: rgba(185,166,255,0.3); text-transform: uppercase; font-family: var(--disp); font-size: 9.5px; letter-spacing: 0.5px; }
.ctr-desc { font-family: var(--body); font-size: 11px; color: var(--txt2); line-height: 1.4; }
.ctr-prog { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.ctr-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); border-radius: 4px; }
.ctr-prog.done span { background: linear-gradient(90deg, #7cf3d8, #3fd3b4); }
.ctr-foot { display: flex; align-items: center; gap: 10px; }
.ctr-pt { font-family: var(--num); font-size: 12px; font-weight: 600; color: var(--txt2); }
.ctr-foot button.mini { margin-left: auto; }
.ctr-claimed { margin-left: auto; font-family: var(--disp); font-size: 10px; letter-spacing: 1px; color: var(--txt2); }
.ctr-ready { margin-left: auto; font-family: var(--disp); font-size: 10px; letter-spacing: 1px; color: var(--acc); }
.ctr-stub { max-width: 560px; margin: 20px 0; padding: 20px; border: 1px dashed var(--line2); border-radius: 5px; }
.ctr-stub p { font-family: var(--body); font-size: 12px; line-height: 1.5; margin-top: 8px; }

/* ---- §C7 tooltip legibility + uber distinction ---- */
.tooltip.uber { border-color: #ff5bd0; box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 26px rgba(255,91,208,0.28); }
.tooltip .ubertag { color: #ff5bd0; font-weight: 700; letter-spacing: 1px; }
.tooltip .tuber { color: #ffb0ea; font-size: 11px; line-height: 1.45; margin: 2px 0 8px; font-family: var(--body); }
.tooltip .tmaker { margin: 6px 0 3px; font-family: var(--disp); font-size: 10.5px; letter-spacing: 0.5px; color: #cbb6ff; }
.tooltip .tmaker-b { color: var(--txt2); text-transform: uppercase; font-size: 9px; letter-spacing: 1px; }
.tooltip .tsigs { margin: 6px 0 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.tooltip .tlbl { font-family: var(--disp); font-size: 9px; letter-spacing: 1.5px; color: var(--txt2); }
.tooltip .tsig { font-family: var(--disp); font-size: 10px; letter-spacing: 0.5px; color: var(--acc2); border: 1px solid var(--line2); border-radius: 10px; padding: 1px 7px; }
.tooltip .tsig.core { color: var(--amber); border-color: rgba(240,178,74,0.5); }
.tooltip .tmw { margin: 5px 0 2px; font-family: var(--disp); font-size: 10.5px; letter-spacing: 0.6px; color: var(--amber); }
.tooltip .tal { margin: 6px 0 2px; font-family: var(--num); font-size: 11px; font-weight: 600; }
.tooltip .tal.ok { color: #7bd66b; }
.tooltip .tal.low { color: var(--danger); }
.tooltip .tal.hi { color: var(--txt2); }

/* ---- §D1 deploy biome lock (mirrors trader-lock) ---- */
.biomechip.locked { opacity: 0.4; cursor: not-allowed; border-color: var(--line) !important; background: rgba(255,255,255,0.02); color: var(--txt2); }
.biomechip.locked:hover { box-shadow: none; border-color: var(--line) !important; }

/* ============================================================
   §P CONSOLIDATED UI POLISH (wave 3)
   ============================================================ */

/* --- P0#3 stash scale-to-fit wrapper (grid transform-scaled to never clip) --- */
.gridscale { position: relative; overflow: hidden; }

/* --- P0#4 stash header: label > hint > right-aligned buttons --- */
.stashhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; min-height: 18px; flex-wrap: wrap; }
.stashhead .sh-t { font-family: var(--disp); font-size: 11px; letter-spacing: 2px; color: var(--txt2); text-transform: uppercase; font-weight: 600; }
.stashhead .sh-hint { font-family: var(--body); font-size: 10px; letter-spacing: 0.2px; color: var(--txt2); opacity: 0.65; margin-right: auto; }
.stashhead button.mini { margin-left: 0; }

/* --- P1#5 transaction feedback: ~300ms highlight pulse on the affected card/row --- */
@keyframes justBought {
  0%   { box-shadow: 0 0 0 1px var(--acc), 0 0 22px rgba(87,231,200,0.55); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}
.just-bought { animation: justBought 0.42s ease-out 1; border-color: var(--acc) !important; }

/* --- P1#6 have/need cost strings (shortfall tinted red) --- */
.cmat { font-family: var(--num); font-size: 12px; font-weight: 700; color: var(--amber); white-space: nowrap; }
.cmat.short { color: var(--danger); }
.craftrow .cc .cmat, .modcard .mc-cost .cmat { font-size: 12.5px; }
.shoprow .sp.short { color: var(--danger); }

/* --- P2#7/#8 node tooltips, click-to-confirm, stronger contrast --- */
.tooltip.nodetip { width: auto; max-width: 240px; min-width: 150px; }
.tooltip.nodetip .tdesc { margin: 4px 0 0; }
.snode.avail { border-color: var(--amber); color: #ffd27a; box-shadow: 0 0 16px rgba(240,178,74,0.28), inset 0 0 10px rgba(240,178,74,0.08); }
.snode.locked { opacity: 0.32; filter: grayscale(0.4); }
.augnode.can { box-shadow: inset 0 0 10px rgba(240,178,74,0.06); }
.snode.confirming, .augnode.confirming { border-color: var(--acc) !important; color: var(--acc) !important; animation: confirmPulse 0.6s ease-in-out infinite alternate; }
@keyframes confirmPulse { from { box-shadow: 0 0 0 1px var(--acc); } to { box-shadow: 0 0 16px 2px rgba(87,231,200,0.5); } }
.augnode { position: relative; }
.augnode.confirming::after { content: 'CLICK AGAIN'; position: absolute; top: 6px; right: 10px; font-family: var(--disp); font-size: 8px; letter-spacing: 1px; color: var(--acc); }

/* --- P2#11 module-card buttons pinned to the bottom (equal heights across cards) --- */
.modcard .mc-cost { margin-top: auto; }

/* --- P2#12 market empty-state hint --- */
.emptyhint { padding: 24px 8px; max-width: 460px; }
.emptyhint .eh-t { font-family: var(--disp); font-size: 13px; letter-spacing: 0.5px; color: var(--txt2); margin-bottom: 6px; }
.emptyhint .eh-s { font-family: var(--body); font-size: 12px; line-height: 1.55; color: var(--txt2); opacity: 0.8; }
.emptyhint .eh-s b { color: var(--acc); }

/* --- §E THE PIT deploy panel --- */
.pitpanel { margin-top: 8px; background: linear-gradient(160deg, rgba(30,20,40,0.55), rgba(14,10,20,0.7)); border: 1px solid rgba(185,166,255,0.28); clip-path: var(--cut); padding: 14px 16px; }
.pitstep { display: flex; align-items: center; gap: 12px; }
.pitstep .chip { min-width: 40px; text-align: center; font-size: 16px; padding: 6px 0; }
.pitval { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pitval .pv-l { font-family: var(--disp); font-size: 9px; letter-spacing: 2px; color: var(--txt2); }
.pitval .pv-n { font-family: var(--num); font-size: 30px; font-weight: 700; color: #cbb6ff; text-shadow: 0 0 16px rgba(185,166,255,0.4); }
.pittrack { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 12px; }
.pitpip { position: relative; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: 4px; background: rgba(255,255,255,0.03); }
.pitpip .pp-d { font-family: var(--num); font-size: 9.5px; font-weight: 700; color: var(--txt2); }
.pitpip.major { border-radius: 50%; border-color: rgba(185,166,255,0.5); }
.pitpip.reached { background: rgba(185,166,255,0.16); border-color: rgba(185,166,255,0.6); }
.pitpip.reached .pp-d { color: #cbb6ff; }
.pitpip.cur { box-shadow: 0 0 0 2px var(--acc); }
.pitpip.cur .pp-d { color: var(--acc); }
.pitstats { display: flex; gap: 22px; padding-top: 10px; border-top: 1px solid var(--line); }
.pstat { display: flex; flex-direction: column; gap: 2px; }
.pstat .ps-l { font-family: var(--disp); font-size: 9px; letter-spacing: 1.5px; color: var(--txt2); }
.pstat .ps-v { font-family: var(--num); font-size: 17px; font-weight: 700; color: #e8eef6; }
.pstat .ps-v.hot { color: #ff5bd0; text-shadow: 0 0 12px rgba(255,91,208,0.35); }
.pitboard { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pitboard .pb-h { font-family: var(--disp); font-size: 9px; letter-spacing: 2px; color: var(--txt2); margin-bottom: 6px; }
.pitboard .pb-r { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 2px 0; }
.pitboard .pb-rk { font-family: var(--num); color: var(--txt2); width: 26px; }
.pitboard .pb-n { flex: 1; font-family: var(--disp); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitboard .pb-d { font-family: var(--num); font-weight: 700; color: #cbb6ff; }

/* --- §P-A polish: craft panels + contracts legibility --- */
.craftpanels .cpanel + .cpanel { margin-top: 0; }
.cpanel .cph { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.sigrow, .temprow { justify-content: space-between; }
.sigrow .mini, .temprow .mini { margin-left: 4px; }
.ctrgrid { align-items: stretch; }
.ctrcard .ctr-prog { margin-top: auto; }
.ctrcard { transition: border-color .12s, box-shadow .12s; }
.ctrcard:hover { border-left-color: var(--acc); }
.ctr-prog.done { box-shadow: 0 0 0 1px rgba(87,231,200,0.2); }

/* ============================================================
   UX AUDIT PASS (UI-1/2/4/5/6) — legibility · shooter feedback · onboarding
   ============================================================ */

/* --- UI-4 clearer have/need cost chips (need N label · have H; whole chip red on shortfall) --- */
.cmat { display: inline-flex; align-items: baseline; gap: 5px; }
.cmat .cm-need { color: var(--amber); font-family: var(--num); font-weight: 700; }
.cmat .cm-have { color: var(--txt2); font-family: var(--num); font-weight: 400; font-size: 10.5px; letter-spacing: 0.2px; }
.cmat.short .cm-need, .cmat.short .cm-have { color: var(--danger); }

/* --- UI-1 let the deploy stash column shrink so scaleFitGrid can scale (never pins to grid width) --- */
.dcol-stash { min-width: 0; }

/* --- UI-2a kill feed (top-left, under any team roster) --- */
#killfeed { position: absolute; top: 148px; left: 16px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; pointer-events: none; z-index: 8; }
.kf-row { font-family: var(--disp); font-size: 12px; letter-spacing: 0.6px; padding: 5px 11px; border-radius: 4px; clip-path: var(--cut);
  background: linear-gradient(90deg, rgba(14,19,27,0.9), rgba(14,19,27,0.4)); border-left: 3px solid var(--danger);
  color: #e6ecf4; text-shadow: 0 1px 4px #000; opacity: 0; transform: translateX(-10px); transition: opacity .22s ease, transform .22s ease; }
.kf-row.in { opacity: 1; transform: translateX(0); }
.kf-row.out { opacity: 0; transform: translateX(-10px); }
.kf-row .kf-verb { color: var(--danger); font-weight: 700; font-size: 9.5px; letter-spacing: 1.4px; }
.kf-row .kf-name { color: #fff; font-weight: 700; }
.kf-row.elite { border-left-color: var(--amber); } .kf-row.elite .kf-verb { color: var(--amber); }
.kf-row.boss { border-left-color: #ff5bd0; background: linear-gradient(90deg, rgba(40,10,34,0.92), rgba(20,8,18,0.4)); } .kf-row.boss .kf-verb { color: #ff5bd0; }

/* --- UI-2b crosshair hit markers (fixed at the reticle; light tick on hit, red X on kill) --- */
#hitmarker { position: fixed; left: -200px; top: 0; width: 0; height: 0; pointer-events: none; z-index: 9; opacity: 0; }
#hitmarker .hm { position: absolute; width: 2px; height: 7px; border-radius: 1px; background: #eafff9; box-shadow: 0 0 5px rgba(120,255,218,0.9); }
#hitmarker .hm.t { transform: translate(-50%, -15px); }
#hitmarker .hm.b { transform: translate(-50%, 8px); }
#hitmarker .hm.l { width: 7px; height: 2px; transform: translate(-15px, -50%); }
#hitmarker .hm.r { width: 7px; height: 2px; transform: translate(8px, -50%); }
#hitmarker.hit { animation: hmHit .26s ease-out; }
#hitmarker.kill { transform: rotate(45deg) scale(1.55); animation: hmKill .42s ease-out; }
#hitmarker.kill .hm { background: #ff5a5a; box-shadow: 0 0 8px rgba(255,90,90,0.95); }
@keyframes hmHit { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hmKill { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }

/* --- UI-2c in-raid teammate HUD (roster + off-screen direction arrows) --- */
#teamhud { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.th-roster { position: absolute; top: 64px; left: 16px; display: flex; flex-direction: column; gap: 5px; }
.th-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--line); border-left: 3px solid var(--acc);
  background: linear-gradient(90deg, rgba(10,14,20,0.72), rgba(10,14,20,0.28)); }
.th-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 6px var(--acc); flex: none; }
.th-n { font-family: var(--disp); font-size: 11px; letter-spacing: 0.6px; color: #dbe4ee; min-width: 72px; text-shadow: 0 1px 3px #000; }
.th-hpbar { width: 74px; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; flex: none; }
.th-hpbar span { display: block; height: 100%; background: linear-gradient(90deg, #3fd3b4, #7cf3d8); }
.th-hpbar span.low { background: linear-gradient(90deg, #d0574e, #f0736a); }
.th-arrow { position: absolute; z-index: 8; }
.th-tri { display: block; width: 0; height: 0; border-left: 11px solid var(--acc); border-top: 7px solid transparent; border-bottom: 7px solid transparent; filter: drop-shadow(0 0 5px var(--acc)); }
.th-arrow.low .th-tri { border-left-color: #f0736a; filter: drop-shadow(0 0 5px #f0736a); }
.th-atag { position: absolute; transform: translateX(-50%); font-family: var(--disp); font-size: 8.5px; letter-spacing: 0.5px; color: #cdd7e2; text-shadow: 0 1px 3px #000; white-space: nowrap; }

/* --- UI-6 first-raid controls onboarding (dismiss-once) --- */
#ctrlhint { position: fixed; inset: 0; z-index: 260; display: flex; align-items: center; justify-content: center; background: rgba(4,7,11,0.55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; }
#ctrlhint.in { opacity: 1; }
#ctrlhint.out { opacity: 0; }
#ctrlhint .ch-card { pointer-events: auto; width: min(460px, 90vw); background: var(--panel); border: 1px solid var(--line2); border-left: 3px solid var(--amber); clip-path: var(--cut);
  padding: 22px 26px; box-shadow: var(--shadow); text-align: center; transform: translateY(8px); transition: transform .3s ease; }
#ctrlhint.in .ch-card { transform: translateY(0); }
#ctrlhint .ch-hd { font-family: var(--body); font-size: 13px; color: #dfe6ee; line-height: 1.5; margin-bottom: 16px; }
#ctrlhint .ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-bottom: 18px; text-align: left; }
#ctrlhint .ch-row { display: flex; align-items: center; gap: 10px; }
#ctrlhint .ch-row kbd { flex: none; min-width: 52px; text-align: center; font-family: var(--num, monospace); font-size: 11px; font-weight: 700; color: #eef3f8;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line2); border-radius: 4px; padding: 4px 8px; letter-spacing: 1px; }
#ctrlhint .ch-row span { font-family: var(--body); font-size: 12px; color: var(--txt2); text-transform: uppercase; letter-spacing: 0.5px; }
#ctrlhint .ch-go { width: 100%; }