/* mod.css — the weapon modding screen (modscreen.js).
   The inspect window's frame, larger: stats on the left, the gun in the
   middle ringed by its slot boxes, parts on the right. Leans on inv.css for
   .tk-h, .tk-sl, .tk-note, .iv-x, .iv-note, .iv-hint and the .ibar bars.
   Scoped to #modWin and .md-ghost so no other screen moves. */

#modWin{position:fixed;inset:0;z-index:61;display:flex;align-items:center;justify-content:center;background:rgba(4,6,7,.66)}
#modWin.off{display:none}
#modWin .md{width:min(1480px,97vw);height:min(820px,92vh);display:flex;flex-direction:column;
  background:rgba(12,15,16,.97);border:1px solid rgba(200,196,184,.2);box-shadow:var(--shadow)}
#modWin .md>.tk-h{flex:0 0 auto}
#modWin .md-wn{font-family:var(--disp);font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--amber,#e0a51e)}
#modWin .md-body{flex:1;display:grid;grid-template-columns:290px minmax(0,1fr) 330px;min-height:0}
#modWin .md-hint{flex:0 0 auto;margin:0;padding:6px 12px 8px;border-top:1px solid rgba(200,196,184,.1)}
/* the bench's own message line (the lobby's toasts are drawn under this window) */
#modWin .md-msg{flex:0 0 auto;margin:0;height:0;overflow:hidden;padding:0 12px;font-family:var(--mono);font-size:11px;
  color:var(--good,#7fb069);background:rgba(127,176,105,.08);transition:height .15s}
#modWin .md-msg.show{height:26px;line-height:26px;border-top:1px solid rgba(127,176,105,.3)}
#modWin .md-msg.bad{color:var(--amber,#e0a51e);background:rgba(224,165,30,.08);border-top-color:rgba(224,165,30,.3)}
#modWin .md-msg b{color:var(--bone)}

/* ---------- the view ---------- */
#modWin .md-view{position:relative;min-height:0;overflow:hidden;cursor:grab;
  background:radial-gradient(ellipse at 50% 50%,rgba(70,76,74,.5),rgba(10,12,13,.96) 72%)}
#modWin .md-view:active{cursor:grabbing}
#modWin .md-view canvas{position:absolute;inset:0;width:100%;height:100%}
#modWin .md-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#modWin .md-lines line{stroke:rgba(216,220,216,.42);stroke-width:1}
#modWin .md-lines circle{fill:rgba(216,220,216,.75)}
#modWin .md-lines .mt{stroke:rgba(216,220,216,.16);fill:rgba(216,220,216,.28)}
#modWin .md-lines line.mt{stroke-dasharray:3 3}
#modWin .md-lines .on{stroke:var(--amber,#e0a51e);fill:var(--amber,#e0a51e)}
#modWin .md-slots{position:absolute;inset:0;pointer-events:none}

/* ---------- slot boxes, tinted like the stash's attachment tiles ---------- */
#modWin .md-slot{position:absolute;transform:translateX(-50%);width:128px;height:98px;pointer-events:auto;cursor:pointer;
  background:rgba(52,58,60,.86);border:1px solid rgba(200,196,184,.24);padding:4px 6px 5px;
  display:flex;flex-direction:column;align-items:center}
#modWin .md-slot:hover{border-color:rgba(230,226,214,.55)}
#modWin .md-slot.empty{background:rgba(30,34,35,.78)}
#modWin .md-slot.empty .mg{opacity:.35}
#modWin .md-slot.sel{border-color:var(--amber,#e0a51e);box-shadow:0 0 0 1px var(--amber,#e0a51e) inset}
#modWin .md-slot.drop{border-color:var(--good,#7fb069);box-shadow:0 0 0 2px var(--good,#7fb069) inset;background:rgba(58,78,56,.86)}
#modWin .md-slot.blocked{opacity:.55;cursor:default}
#modWin .md-sl{align-self:flex-start;font-family:var(--disp);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
#modWin .md-slot .mg{width:84px;height:50px;flex:0 0 auto;margin-top:2px}
#modWin .md-slot em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:#e8e4d8;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-shadow:0 1px 1px rgba(0,0,0,.9)}
#modWin .md-int{font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:var(--bone-dim);padding:16px 0 10px}
#modWin .md-strip{position:absolute;top:2px;right:3px;font-size:13px;line-height:1;color:var(--bone-dim);padding:1px 4px}
#modWin .md-strip:hover{color:var(--red,#e0483a)}

/* ---------- part silhouettes ---------- */
.mg{display:block}
.mg *{fill:#b1ad9e}
.mg .d{fill:#262b2c}
.mg .r{fill:var(--red,#e0483a)}
.mg .g{fill:var(--good,#7fb069)}
.mg .s{fill:none;stroke:#b1ad9e;stroke-width:2.2}
.mg text{font-family:var(--mono)}

/* ---------- stats (left) ---------- */
#modWin .md-left,#modWin .md-right{min-height:0;overflow-y:auto}
#modWin .md-left{border-right:1px solid rgba(200,196,184,.12)}
#modWin .md-right{border-left:1px solid rgba(200,196,184,.12);display:flex;flex-direction:column}
#modWin .md-sub{font-size:10.5px}
#modWin .md-stats{padding:6px 12px 10px}
#modWin .md-stats>div{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:4.5px 0;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:11.5px}
#modWin .md-stats span{color:var(--bone-dim);font-family:var(--disp);letter-spacing:.12em;text-transform:uppercase;font-size:9.5px}
#modWin .md-stats b{font-family:var(--mono);font-weight:500;color:var(--bone);text-align:right;min-width:62px}
#modWin .md-stats em{font-style:normal;font-family:var(--mono);font-size:10.5px}
#modWin .md-stats .ibar{grid-template-columns:78px 1fr 30px}
#modWin .md-stats .ibar i{height:5px;background:rgba(255,255,255,.08);display:block}
#modWin .md-stats .ibar u{display:block;height:100%;background:#b8b4a4}
#modWin .md-stats .ibar b{min-width:0}
#modWin .up{color:var(--good,#7fb069)}
#modWin .dn{color:var(--red,#e0483a)}
#modWin .nt{color:var(--cold,#6fb3c4)}
#modWin .md-stats>.md-flags{display:flex;flex-wrap:wrap;gap:6px;border:0;padding-top:8px}
#modWin .md-flags span{border:1px solid rgba(200,196,184,.16);padding:2px 6px;font-size:9px}
#modWin .md-flags span.up{color:var(--good,#7fb069);border-color:rgba(127,176,105,.4)}
#modWin .md-flags span.dn{color:var(--red,#e0483a);border-color:rgba(224,72,58,.4)}
#modWin .md-pnote{margin:10px 0 0}

/* ---------- parts (right) ---------- */
#modWin .md-list{padding:6px 10px 12px;overflow-y:auto}
#modWin .md-gl{margin:10px 0 5px}
#modWin .md-gl:first-child{margin-top:4px}
#modWin .md-row{display:grid;grid-template-columns:62px 1fr auto;gap:8px;align-items:center;padding:4px 6px 4px 4px;margin-bottom:4px;
  background:rgba(52,58,60,.62);border:1px solid rgba(200,196,184,.14);user-select:none}
#modWin .md-row.can{cursor:grab}
#modWin .md-row.can:hover{border-color:rgba(230,226,214,.5);background:rgba(62,68,70,.8)}
#modWin .md-row.fit{border-color:rgba(224,165,30,.55);background:rgba(66,58,38,.7)}
#modWin .md-row.buy{background:rgba(30,34,35,.6)}
#modWin .md-row.buy .md-ic,#modWin .md-row.buy .md-nm{opacity:.62}
#modWin .md-row.lock{background:rgba(24,26,27,.6);opacity:.45;cursor:not-allowed}
#modWin .md-ic{width:62px;height:38px;background:rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center}
#modWin .md-ic .mg{width:58px;height:35px}
#modWin .md-nm{font-size:12px;color:var(--bone);min-width:0}
#modWin .md-nm small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--bone-dim);margin-top:2px;line-height:1.45}
#modWin .md-nm small u{text-decoration:none;white-space:nowrap}
#modWin .md-px{font-family:var(--mono);font-size:10px;color:var(--bone-dim);text-align:right;white-space:nowrap}
#modWin .md-px b{color:var(--amber,#e0a51e);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:9.5px}
#modWin .md-buy{font-family:var(--mono);font-size:10px;padding:3px 7px;border:1px solid rgba(224,165,30,.45);color:var(--amber,#e0a51e);background:rgba(224,165,30,.06)}
#modWin .md-buy:hover{background:rgba(224,165,30,.16)}
#modWin .md-buy[disabled]{border-color:rgba(200,196,184,.16);color:var(--bone-dim);background:none;cursor:not-allowed}

/* the lobby's way in: a MODIFY tab on the On-sling slot (markup wired by the
   lead in invscreen.js, see MOD-NOTES.md) */
.tk-slot .tk-mod{position:absolute;top:4px;right:6px;z-index:2;font-family:var(--disp);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;padding:2px 8px;color:var(--amber,#e0a51e);border:1px solid rgba(224,165,30,.45);background:rgba(224,165,30,.07)}
.tk-slot .tk-mod:hover{background:rgba(224,165,30,.18)}

/* the part being carried to its slot */
.md-ghost{position:fixed;z-index:70;pointer-events:none;width:84px;height:50px;transform:translate(-50%,-50%);
  background:rgba(52,58,60,.9);border:1px solid rgba(230,226,214,.6);padding:2px}
.md-ghost .mg{width:100%;height:100%}

@media (max-width:1200px){
  #modWin .md-body{grid-template-columns:230px minmax(0,1fr) 280px}
  #modWin .md-slot{width:108px;height:88px}
  #modWin .md-slot .mg{width:70px;height:42px}
}

/* ---------- the magnified-optic overlay's glass (combat.js scopeDress) ----------
   style.css owns #scope: the ring, the black outside it and a plain cross.
   combat.js tags it with the fitted optic's reticle (guns.js reticle) and
   prints the power under the ring; these draw each reticle over the plain
   cross. Same 64vmin circle, an SVG laid edge to edge across it, so every
   reticle's centre IS the screen centre -- the camera axis the round is
   zeroed along. Here rather than in style.css because this pass owns this
   file; it is loaded on every page (index.html). */
/* a 3-9x's duplex: heavy posts from the edge, a fine cross in the middle */
#scope[data-ret="duplex"]::after{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%230a0c0c'><rect x='0' y='49.4' width='37' height='1.2'/><rect x='63' y='49.4' width='37' height='1.2'/><rect x='49.4' y='0' width='1.2' height='37'/><rect x='49.4' y='63' width='1.2' height='37'/><rect x='37' y='49.86' width='26' height='0.28'/><rect x='49.86' y='37' width='0.28' height='26'/></g></svg>") 50% 50%/100% 100% no-repeat}
/* a prism's lit chevron on a bullet-drop stadia, fine arms either side */
#scope[data-ret="chevron"]::after{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%230a0c0c'><rect x='0' y='49.85' width='42' height='0.3'/><rect x='58' y='49.85' width='42' height='0.3'/><rect x='49.85' y='54' width='0.3' height='26'/><rect x='47' y='58' width='6' height='0.35'/><rect x='47.75' y='63' width='4.5' height='0.35'/><rect x='48.5' y='68' width='3' height='0.35'/><rect x='49' y='73' width='2' height='0.35'/></g><path d='M46.2 53.6 L50 49.9 L53.8 53.6' fill='none' stroke='%23ff5a2a' stroke-width='0.7'/></svg>") 50% 50%/100% 100% no-repeat}
/* an LPVO's lit circle-dot inside heavy posts: fast at 1x, a frame at 6x */
#scope[data-ret="dot"]::after{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%230a0c0c'><rect x='0' y='49.4' width='30' height='1.2'/><rect x='70' y='49.4' width='30' height='1.2'/><rect x='49.4' y='70' width='1.2' height='30'/></g><circle cx='50' cy='50' r='6' fill='none' stroke='%23ff3a24' stroke-width='0.45'/><circle cx='50' cy='50' r='0.55' fill='%23ff3a24'/></svg>") 50% 50%/100% 100% no-repeat}
/* the power the glass is set to, on the black under the ring */
#scope .sc-mag{position:absolute;left:50%;top:calc(50% + 34vmin);transform:translateX(-50%);font-style:normal;
  font-family:var(--mono,monospace);font-size:12px;letter-spacing:.14em;color:rgba(214,218,206,.62);white-space:pre}