/* ╔══════════════════════════════════════════════════════════════════╗
   ║ Stellar Salvage — Deep Pass Styles                                 ║
   ║ Salvage run overlay · scanner/grappler tree · daily contract HUD   ║
   ║ Earn-pop fallback · loot drawer · hazard glyphs                    ║
   ║ Original. No third-party assets.                                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── EARN POP FALLBACK (referenced by inline payOnyx) ───────────── */
.salv-earn-pop{
  position:fixed; left:50%; top:18vh; transform:translateX(-50%);
  z-index:9999; pointer-events:none;
  background:linear-gradient(135deg,rgba(124,58,237,0.92),rgba(34,211,238,0.88));
  color:#fff; font-family:'Audiowide',sans-serif; font-weight:800;
  letter-spacing:0.18em; font-size:1rem;
  padding:10px 22px; border-radius:30px;
  box-shadow:0 8px 28px rgba(124,58,237,0.55), 0 0 18px rgba(34,211,238,0.45);
  animation: salvEarnPop 1.7s ease-out forwards;
}
@keyframes salvEarnPop{
  0%{transform:translate(-50%,16px) scale(0.7);opacity:0;}
  18%{transform:translate(-50%,0) scale(1.05);opacity:1;}
  82%{transform:translate(-50%,-12px) scale(1);opacity:1;}
  100%{transform:translate(-50%,-44px) scale(0.95);opacity:0;}
}

/* ── DAILY CONTRACT CHIP (in HUD) ───────────────────────────────── */
#ss-daily{
  position:absolute; left:14px; bottom:14px; z-index:25;
  display:flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:linear-gradient(135deg,rgba(167,139,250,0.20),rgba(34,211,238,0.14));
  border:1px solid rgba(167,139,250,0.55);
  border-radius:8px; backdrop-filter:blur(6px);
  font-family:'JetBrains Mono',monospace; font-size:0.7rem;
  color:#e2e8f0; cursor:pointer;
  transition:transform 0.15s, filter 0.15s, box-shadow 0.18s;
  box-shadow:0 6px 18px rgba(167,139,250,0.30);
}
#ss-daily:hover{transform:translateY(-2px); filter:brightness(1.15);
  box-shadow:0 10px 24px rgba(167,139,250,0.45);}
#ss-daily.done{border-color:rgba(34,197,94,0.6); background:linear-gradient(135deg,rgba(34,197,94,0.18),rgba(15,26,48,0.85));}
#ss-daily .lbl{
  font-family:'Audiowide',sans-serif; letter-spacing:0.12em;
  color:#a78bfa; font-size:0.66rem;
}
#ss-daily.done .lbl{color:#22c55e;}
#ss-daily .name{font-weight:700;color:#fff;}

/* ── RUN-LAUNCH BUTTON (next to gear) ───────────────────────────── */
#ss-run-btn{
  position:fixed; right:14px; bottom:64px; z-index:25;
  width:auto; padding:10px 16px;
  background:linear-gradient(135deg,#22d3ee,#7c3aed);
  border:1px solid rgba(34,211,238,0.5);
  border-radius:24px; color:#fff;
  font-family:'Audiowide',sans-serif; letter-spacing:0.14em;
  font-size:0.78rem; font-weight:800; cursor:pointer;
  box-shadow:0 8px 22px rgba(124,58,237,0.45);
  transition:transform 0.15s, filter 0.15s;
  display:flex; align-items:center; gap:8px;
}
#ss-run-btn:hover{transform:translateY(-2px); filter:brightness(1.2);}
#ss-run-btn .icn{font-size:1rem;}

/* ── SALVAGE RUN OVERLAY ────────────────────────────────────────── */
#ss-run{
  position:fixed; inset:0; z-index:80;
  display:none; flex-direction:column;
  background:radial-gradient(ellipse at 50% 30%, rgba(34,211,238,0.10), transparent 70%),
             linear-gradient(180deg,#02050c 0%,#070a17 100%);
  font-family:'Rajdhani',sans-serif; color:#e2e8f0;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
#ss-run.open{display:flex;}

#ss-run-top{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:8px; padding:10px 14px;
  background:rgba(7,10,23,0.78); border-bottom:1px solid rgba(34,211,238,0.20);
  font-family:'JetBrains Mono',monospace; font-size:0.66rem;
  letter-spacing:0.10em;
}
#ss-run-top .cell{display:flex; flex-direction:column; gap:4px;}
#ss-run-top .lbl{color:#64748b; font-size:0.58rem; letter-spacing:0.18em;}
#ss-run-top .val{color:#e2e8f0; font-family:'Audiowide',sans-serif; font-size:0.85rem; letter-spacing:0.06em;}
#ss-run-top .bar{
  height:6px; background:rgba(34,211,238,0.10);
  border-radius:3px; overflow:hidden;
}
#ss-run-top .bar > i{display:block; height:100%; transition:width 0.25s;}
#ss-run-top .bar.shield > i{background:linear-gradient(90deg,#22c55e,#22d3ee);}
#ss-run-top .bar.cargo > i{background:linear-gradient(90deg,#fbbf24,#a78bfa);}
#ss-run-top .bar.timer > i{background:linear-gradient(90deg,#a78bfa,#ff2bd6);}

#ss-run-field{
  flex:1; position:relative; overflow:hidden;
  cursor:crosshair;
}
#ss-run-field canvas{display:block; width:100%; height:100%;}

#ss-run-bot{
  display:flex; gap:10px; padding:10px 14px;
  background:rgba(7,10,23,0.85); border-top:1px solid rgba(34,211,238,0.20);
}
#ss-run-bot button{
  flex:1; padding:10px;
  background:rgba(15,26,48,0.85);
  border:1px solid rgba(34,211,238,0.30);
  color:#e2e8f0;
  font-family:'Audiowide',sans-serif; letter-spacing:0.12em;
  font-size:0.74rem; border-radius:6px; cursor:pointer;
  transition:filter 0.15s, transform 0.15s;
}
#ss-run-bot button:hover{filter:brightness(1.2); transform:translateY(-1px);}
#ss-run-bot button.abandon{
  background:linear-gradient(135deg,rgba(244,63,94,0.30),rgba(7,10,23,0.85));
  border-color:rgba(244,63,94,0.45); color:#fda4af;
}
#ss-run-bot button.scan{
  background:linear-gradient(135deg,rgba(34,211,238,0.30),rgba(7,10,23,0.85));
  border-color:rgba(34,211,238,0.55); color:#67e8f9;
}
#ss-run-bot button.scan.cooling{opacity:0.55; cursor:wait;}
#ss-run-bot button.scan .cd{
  font-family:'JetBrains Mono',monospace; font-size:0.66rem; color:#bae6fd;
  margin-left:6px;
}

/* loot drawer that slides up after run completes */
#ss-loot{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,rgba(15,26,48,0.96),rgba(3,6,15,0.98));
  border-top:2px solid #a78bfa;
  padding:16px; transform:translateY(100%); transition:transform 0.4s;
  box-shadow:0 -16px 60px rgba(167,139,250,0.40);
  z-index:5;
}
#ss-loot.open{transform:translateY(0);}
#ss-loot h3{
  font-family:'Audiowide',sans-serif; font-size:1.05rem;
  letter-spacing:0.18em; color:#a78bfa; text-align:center;
  text-shadow:0 0 12px #a78bfa; margin-bottom:10px;
}
#ss-loot .grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px; margin-bottom:12px;
}
#ss-loot .tile{
  background:rgba(7,10,23,0.85); border:1px solid rgba(34,211,238,0.20);
  border-radius:6px; padding:8px; text-align:center;
}
#ss-loot .tile .lb{font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:#64748b; letter-spacing:0.14em;}
#ss-loot .tile .vl{font-family:'Audiowide',sans-serif; font-size:1.1rem; color:#e2e8f0;}
#ss-loot .tile.bonus .vl{color:#a78bfa;}
#ss-loot .actions{display:flex; gap:10px; justify-content:center;}
#ss-loot button{
  padding:10px 22px; border:none; border-radius:6px;
  background:linear-gradient(135deg,#22d3ee,#7c3aed); color:#fff;
  font-family:'Audiowide',sans-serif; letter-spacing:0.16em;
  font-size:0.78rem; cursor:pointer;
  box-shadow:0 6px 18px rgba(124,58,237,0.40);
}
#ss-loot button:hover{filter:brightness(1.15);}

/* run-start dialog (wreck/contract picker) */
#ss-start{
  position:fixed; inset:0; z-index:75;
  display:none; align-items:center; justify-content:center;
  background:rgba(2,5,12,0.86); backdrop-filter:blur(8px);
  padding:14px;
}
#ss-start.open{display:flex;}
#ss-start .panel{
  background:linear-gradient(160deg,rgba(15,26,48,0.97),rgba(10,20,36,0.97));
  border:1px solid rgba(34,211,238,0.30); border-top:2px solid #22d3ee;
  border-radius:10px; padding:20px;
  max-width:640px; width:100%;
  box-shadow:0 24px 80px rgba(34,211,238,0.20);
}
#ss-start h2{
  font-family:'Audiowide',sans-serif; font-size:1.4rem; letter-spacing:0.16em;
  color:#fff; margin-bottom:4px; text-align:center;
}
#ss-start .sub{
  color:#94a3b8; font-family:'JetBrains Mono',monospace;
  font-size:0.68rem; letter-spacing:0.14em; text-align:center;
  margin-bottom:14px;
}
#ss-start .list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
#ss-start .pick{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:rgba(7,10,23,0.65); border:1px solid rgba(34,211,238,0.18);
  border-radius:8px; cursor:pointer; transition:transform 0.15s, border-color 0.15s;
}
#ss-start .pick:hover{transform:translateY(-1px); border-color:#22d3ee;}
#ss-start .pick.daily{border-color:#a78bfa;}
#ss-start .pick.locked{opacity:0.45; cursor:not-allowed;}
#ss-start .pick .glyph{
  width:42px; height:42px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Audiowide',sans-serif; font-size:1.3rem; font-weight:800;
  border-radius:8px; color:#fff;
}
#ss-start .pick .body{flex:1; min-width:0;}
#ss-start .pick .nm{
  font-family:'Audiowide',sans-serif; font-size:0.88rem;
  letter-spacing:0.10em; color:#fff;
}
#ss-start .pick .ds{
  font-family:'JetBrains Mono',monospace; font-size:0.62rem;
  color:#94a3b8; margin-top:3px; line-height:1.4;
}
#ss-start .pick .rwd{
  font-family:'JetBrains Mono',monospace; font-size:0.66rem;
  color:#22d3ee; text-align:right; flex-shrink:0;
}
#ss-start .pick .rwd.bonus{color:#a78bfa;}
#ss-start .actions{display:flex; gap:10px; justify-content:flex-end;}
#ss-start button.x{
  background:transparent; border:1px solid rgba(148,163,184,0.30);
  color:#cbd5e1; padding:8px 18px; border-radius:6px;
  font-family:'Audiowide',sans-serif; letter-spacing:0.14em; font-size:0.72rem;
  cursor:pointer;
}
#ss-start button.x:hover{background:rgba(148,163,184,0.10);}

/* wreck glyph rarity tints (mirrors loot table tiers) */
.ss-r-common    {background:linear-gradient(135deg,#94a3b8,#475569);}
.ss-r-uncommon  {background:linear-gradient(135deg,#22d3ee,#0e7490); box-shadow:0 0 10px rgba(34,211,238,0.4);}
.ss-r-rare      {background:linear-gradient(135deg,#a78bfa,#5b21b6); box-shadow:0 0 12px rgba(167,139,250,0.5);}
.ss-r-epic      {background:linear-gradient(135deg,#f472b6,#9d174d); box-shadow:0 0 14px rgba(244,114,182,0.5);}
.ss-r-legendary {background:linear-gradient(135deg,#fde047,#f59e0b); box-shadow:0 0 18px rgba(253,224,71,0.6);}
.ss-r-relic     {
  background:linear-gradient(135deg,#22d3ee,#a78bfa,#fde047);
  background-size:300% 100%; animation:relicShift 4s linear infinite;
  box-shadow:0 0 20px rgba(167,139,250,0.7), 0 0 30px rgba(34,211,238,0.4);
}
@keyframes relicShift{0%{background-position:0% 0;}100%{background-position:300% 0;}}

/* in-run text floats */
.ss-float{
  position:absolute; pointer-events:none;
  font-family:'Audiowide',sans-serif; font-weight:800;
  letter-spacing:0.06em; text-shadow:0 0 8px rgba(0,0,0,0.9);
  animation:ssFloat 0.9s ease-out forwards;
  transform:translateX(-50%);
}
@keyframes ssFloat{
  0%{transform:translate(-50%,4px) scale(0.7); opacity:0;}
  15%{transform:translate(-50%,-4px) scale(1.15); opacity:1;}
  100%{transform:translate(-50%,-60px) scale(0.95); opacity:0;}
}
.ss-float.ok   {color:#22d3ee; font-size:1rem;}
.ss-float.warn {color:#f87171; font-size:0.9rem;}
.ss-float.big  {color:#fde047; font-size:1.5rem;}
.ss-float.epic {color:#a78bfa; font-size:1.4rem;}
.ss-float.legendary{
  color:#fde047; font-size:1.7rem;
  text-shadow:0 0 18px #fde047, 0 0 30px #fff;
}

/* discovery flash */
#ss-flash{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at center, rgba(167,139,250,0.45), transparent 60%);
  opacity:0; transition:opacity 0.5s;
}
#ss-flash.go{opacity:1;}

/* tree panel (separate rail tab content) */
.ss-tree{
  display:flex; flex-direction:column; gap:8px;
  padding:8px 0;
}
.ss-tree .node{
  background:linear-gradient(160deg,rgba(15,26,48,0.85),rgba(10,20,36,0.95));
  border:1px solid rgba(34,211,238,0.20); border-radius:6px;
  padding:10px 12px; display:flex; align-items:center; gap:10px;
  cursor:pointer; transition:transform 0.15s, border-color 0.15s;
}
.ss-tree .node:hover{transform:translateY(-1px); border-color:#22d3ee;}
.ss-tree .node.locked{opacity:0.4; cursor:not-allowed;}
.ss-tree .node.locked:hover{transform:none; border-color:rgba(34,211,238,0.20);}
.ss-tree .node.maxed{border-color:rgba(34,197,94,0.55);}
.ss-tree .node .glyph{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Audiowide',sans-serif; font-size:1.05rem; color:#fff; font-weight:800;
  border-radius:8px;
}
.ss-tree .node .body{flex:1; min-width:0;}
.ss-tree .node .nm{
  font-family:'Audiowide',sans-serif; font-size:0.78rem;
  letter-spacing:0.06em; color:#e2e8f0;
}
.ss-tree .node .ds{
  font-family:'JetBrains Mono',monospace; font-size:0.62rem;
  color:#94a3b8; margin-top:3px; line-height:1.4;
}
.ss-tree .node .meta{
  text-align:right; flex-shrink:0;
  font-family:'JetBrains Mono',monospace; font-size:0.7rem;
}
.ss-tree .node .meta .lv{color:#fbbf24; font-weight:700;}
.ss-tree .node .meta .cost{color:#94a3b8; font-size:0.66rem;}

.ss-tree .req{
  font-family:'JetBrains Mono',monospace; font-size:0.58rem;
  color:#f87171; letter-spacing:0.10em; margin-top:2px;
}

/* ── SECTOR BADGE (top-right of run overlay) ─────────────────────── */
#ss-run{ --ss-sector-accent:#22d3ee; --ss-sector-tint:rgba(34,211,238,0.10); }
#ss-run-field{
  background:
    var(--ss-sector-tint),
    radial-gradient(ellipse at 50% 35%, rgba(34,211,238,0.05), transparent 70%),
    url('/assets/img/bg/bg-onyx-prismatic.svg') center/cover no-repeat,
    #02050c;
  background-blend-mode: screen, normal, multiply, normal;
}
#ss-sector-badge{
  position:absolute; top:60px; right:14px; z-index:6;
  padding:6px 12px; border-radius:18px;
  background:rgba(7,10,23,0.78);
  border:1px solid var(--ss-sector-accent, #22d3ee);
  font-family:'JetBrains Mono',monospace; font-size:0.62rem;
  display:flex; flex-direction:column; gap:2px;
  letter-spacing:0.10em; pointer-events:none;
  text-shadow:0 0 8px var(--ss-sector-accent, #22d3ee);
}
#ss-sector-badge .lbl{font-family:'Audiowide',sans-serif; font-size:0.55rem; letter-spacing:0.18em; opacity:0.85;}
#ss-sector-badge .nm{font-family:'Audiowide',sans-serif; font-size:0.72rem; letter-spacing:0.10em;}

/* ── DECOY BUTTON ─────────────────────────────────────────────────── */
#ss-run-bot button.decoy{
  background:linear-gradient(135deg,rgba(167,139,250,0.32),rgba(7,10,23,0.85));
  border-color:rgba(167,139,250,0.55); color:#c4b5fd;
}
#ss-run-bot button.decoy.active{
  background:linear-gradient(135deg,rgba(167,139,250,0.65),rgba(124,58,237,0.45));
  color:#fff; box-shadow:0 0 18px rgba(167,139,250,0.5);
}
#ss-run-bot button.decoy.cooling{opacity:0.55; cursor:wait;}
#ss-run-bot button.decoy .cd{
  font-family:'JetBrains Mono',monospace; font-size:0.66rem; color:#ddd6fe;
  margin-left:6px;
}

/* ── SECTOR STRIP (start dialog header) ───────────────────────────── */
.ss-sector-strip{
  padding:10px 12px; border-radius:8px; margin-bottom:6px;
  background:rgba(7,10,23,0.85);
  border:1px solid #22d3ee; border-left-width:3px;
  background-image: url('/assets/img/bg/bg-onyx-aurora.svg');
  background-size:cover; background-position:center; background-blend-mode:soft-light;
}
.ss-sector-strip .lbl{
  font-family:'Audiowide',sans-serif; font-size:0.62rem;
  letter-spacing:0.18em; margin-bottom:3px;
}
.ss-sector-strip .nm{
  font-family:'Audiowide',sans-serif; font-size:1.0rem;
  letter-spacing:0.12em; color:#fff;
}
.ss-sector-strip .ds{
  font-family:'JetBrains Mono',monospace; font-size:0.62rem;
  color:#cbd5e1; margin-top:3px;
}

/* ── BOUNTY BOARD (rare-part hunts) ───────────────────────────────── */
.ss-bounty-board{
  padding:10px 12px; border-radius:8px; margin-bottom:6px;
  background:linear-gradient(135deg,rgba(15,26,48,0.95),rgba(10,20,36,0.95));
  border:1px solid rgba(251,191,36,0.30);
}
.ss-bounty-board .bb-h{
  font-family:'Audiowide',sans-serif; font-size:0.7rem;
  letter-spacing:0.18em; color:#fbbf24; margin-bottom:8px;
  text-shadow:0 0 8px rgba(251,191,36,0.45);
}
.ss-bounty-board .bb-row{
  display:flex; align-items:center; gap:10px;
  padding:6px 0; border-top:1px dashed rgba(251,191,36,0.15);
}
.ss-bounty-board .bb-row:first-of-type{border-top:none;}
.ss-bounty-board .bb-row.done{opacity:0.55;}
.ss-bounty-board .bb-text{flex:1; min-width:0;}
.ss-bounty-board .bb-task{
  font-family:'JetBrains Mono',monospace; font-size:0.66rem;
  color:#e2e8f0; letter-spacing:0.04em;
}
.ss-bounty-board .bb-prog{
  font-family:'JetBrains Mono',monospace; font-size:0.58rem;
  color:#94a3b8; margin-top:2px;
}
.ss-bounty-board .bb-bar{
  margin-top:4px; height:4px; background:rgba(251,191,36,0.12);
  border-radius:2px; overflow:hidden;
}
.ss-bounty-board .bb-bar > i{
  display:block; height:100%;
  background:linear-gradient(90deg,#fbbf24,#a78bfa);
  transition:width 0.3s;
}
.ss-bounty-board .bb-rew{
  font-family:'Audiowide',sans-serif; font-size:0.78rem;
  color:#fbbf24; letter-spacing:0.06em; flex-shrink:0;
  text-shadow:0 0 6px rgba(251,191,36,0.45);
}
.ss-bounty-board .bb-row.done .bb-rew{color:#22c55e; text-shadow:none;}

/* ── PARTICLE EMBELLISHMENT (consume /assets/img/fx/ where it lands) ── */
.salv-earn-pop::before{
  content:''; position:absolute; left:-22px; top:50%;
  width:22px; height:22px; transform:translateY(-50%);
  background:url('/assets/img/fx/glow-orb.svg') center/contain no-repeat;
  opacity:0.85; pointer-events:none;
}
.salv-earn-pop::after{
  content:''; position:absolute; right:-22px; top:50%;
  width:22px; height:22px; transform:translateY(-50%);
  background:url('/assets/img/fx/particle-spark.svg') center/contain no-repeat;
  opacity:0.85; pointer-events:none;
}
#ss-loot::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('/assets/img/fx/burst-rays.svg') center 18px/180px no-repeat;
  opacity:0.18;
}
#ss-loot .tile.bonus{
  background:
    url('/assets/img/fx/particle-onyx.svg') right -10px bottom -10px/64px no-repeat,
    rgba(7,10,23,0.85);
  border-color:rgba(167,139,250,0.45);
}

@media (max-width:760px){
  #ss-run-top{grid-template-columns:1fr 1fr;}
  #ss-run-top .cell.timer{grid-column:1/-1;}
  #ss-daily{font-size:0.62rem; padding:6px 10px;}
  #ss-run-btn{bottom:58px; font-size:0.7rem; padding:8px 12px;}
  #ss-sector-badge{top:50px; right:8px; padding:4px 8px;}
  #ss-run-bot{flex-wrap:wrap;}
  #ss-run-bot button{flex-basis:calc(50% - 5px);}
}