@import url('./rogue-reward.css');

.rogue-modal:not([hidden]):has(.rogue-salvage-desk){padding:24px;background:#101519eb;backdrop-filter:blur(3px)}
.rogue-salvage-desk{
  --salvage-ink:#f3f1e8;--salvage-muted:#b9c1c8;--salvage-line:#52606a;--salvage-accent:#f3a343;
  box-sizing:border-box;width:min(1100px,100%);max-height:calc(100dvh - 48px);overflow:auto;
  padding:0;background:#191f24;border:1px solid var(--salvage-line);border-top:4px solid var(--salvage-accent);
  color:var(--salvage-ink);font:400 16px/1.4 Pretendard,sans-serif;box-shadow:0 24px 80px #0008;
}
.rogue-salvage-desk *{box-sizing:border-box}
.rogue-salvage-desk p,.rogue-salvage-desk h2,.rogue-salvage-desk h3,.rogue-salvage-desk dl{margin:0}
.rogue-salvage-desk p{font:inherit;color:inherit}
.rogue-salvage-header{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:26px 28px 22px}
.rogue-salvage-header .rogue-salvage-kicker{font-size:13px;letter-spacing:.1em;color:var(--salvage-accent);margin-bottom:8px}
.rogue-salvage-header h2{font:750 36px/1.15 Pretendard,sans-serif;letter-spacing:-.04em}
.rogue-salvage-header h2+p{color:var(--salvage-muted);font-size:14px;margin-top:10px}
.rogue-salvage-current{flex-shrink:0;border-left:1px solid var(--salvage-line);padding-left:24px;min-width:220px}
.rogue-salvage-current>span,.rogue-salvage-preview>span{display:block;color:var(--salvage-muted);font-size:12px;letter-spacing:.07em;margin-bottom:8px}
.rogue-salvage-stats>div{display:flex;justify-content:space-between;gap:16px;font-size:14px;line-height:1.7}
.rogue-salvage-stats dt{color:var(--salvage-muted)}
.rogue-salvage-stats dd{margin:0;font-variant-numeric:tabular-nums;font-weight:650}
.rogue-salvage-stats small{font-size:13px;color:var(--salvage-muted);font-weight:400}
.rogue-salvage-common{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 18px;padding:12px 28px;background:#282e32;border-block:1px solid var(--salvage-line);font-size:14px}
.rogue-salvage-common strong{grid-row:span 2;font-size:16px}
.rogue-salvage-common small{font-size:13px;color:var(--salvage-muted);line-height:1.4}
.rogue-salvage-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:22px 8px}
.rogue-salvage-option{display:flex;flex-direction:column;padding:0 20px;min-width:0;border-left:1px solid var(--salvage-line)}
.rogue-salvage-option:first-child{border-left:0}
.rogue-salvage-option-heading{display:flex;align-items:center;gap:10px}
.rogue-salvage-option-heading>span{font:500 14px/1.2 Pretendard,sans-serif;color:var(--salvage-muted)}
.rogue-salvage-option-heading h3{font:700 20px/1.3 Pretendard,sans-serif;letter-spacing:-.02em}
.rogue-salvage-gain{display:flex;gap:12px;align-items:baseline;padding:16px 0 10px}
.rogue-salvage-gain b{font-size:46px;line-height:1;font-weight:750;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--salvage-accent)}
.rogue-salvage-gain span{font-size:15px;font-weight:600}
.rogue-salvage-option .rogue-salvage-effect{font-size:15px;line-height:1.4;min-height:42px}
.rogue-salvage-mechanic{display:block;font-size:14px;line-height:1.4;color:var(--salvage-muted)}
.rogue-salvage-option .rogue-salvage-note{font-size:13px;line-height:1.4;color:var(--salvage-muted);margin-top:6px}
.rogue-salvage-preview{border-top:1px solid #52606a80;margin-top:16px;padding-top:12px}
.rogue-salvage-preview .rogue-salvage-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rogue-salvage-preview .rogue-salvage-stats>div{display:block}
.rogue-salvage-preview dd{white-space:nowrap}
.rogue-salvage-desk button{font:650 16px/1.35 Pretendard,sans-serif;min-height:46px;border:1px solid #83909a;border-radius:2px;box-shadow:none;color:var(--salvage-ink);background:#30383e;padding:11px 14px}
.rogue-salvage-option button{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;width:100%;text-align:left}
.rogue-salvage-desk button:hover{background:#414b52;border-color:var(--salvage-ink)}
.rogue-salvage-desk button:focus-visible{outline:3px solid var(--salvage-accent);outline-offset:3px;background:#414b52}
.rogue-salvage-option:focus-within .rogue-salvage-option-heading h3{color:var(--salvage-accent)}
.rogue-salvage-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--salvage-line);padding:16px 28px}
.rogue-salvage-footer button{background:transparent;flex-shrink:0}
.rogue-salvage-footer p{font-size:14px;line-height:1.5;color:var(--salvage-muted);max-width:630px;text-align:right}
.rogue-salvage-details{border-top:1px solid #52606a;padding-top:12px;margin-top:16px}
.rogue-salvage-details h3 span{font:500 14px/1.4 Pretendard,sans-serif;color:#f3a343;margin-left:8px}
.rogue-salvage-details small{font-size:13px;color:#b9c1c8}
.rogue-cache-capacity{display:grid;gap:6px;border-left:1px solid var(--salvage-line);padding-left:28px;min-width:170px;color:var(--salvage-muted);font-size:14px}
.rogue-cache-capacity b{font-size:32px;color:var(--salvage-ink)}
.rogue-cache-capacity small{font-size:18px;color:var(--salvage-muted)}
.rogue-cache-desk .rogue-salvage-options{padding-block:30px}
.rogue-cache-desk .rogue-cache-label{font-size:14px;color:var(--salvage-muted);margin-top:24px}
.rogue-cache-desk .rogue-cache-effect{display:flex;align-items:baseline;gap:10px;margin-block:10px 18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rogue-cache-effect>span{font-size:20px;color:var(--salvage-muted)}
.rogue-cache-effect>i{font-style:normal;font-size:20px;color:var(--salvage-muted)}
.rogue-cache-effect>b{font-size:36px;line-height:1.15;color:var(--salvage-accent);letter-spacing:-.03em}
.rogue-cache-desk .rogue-cache-description{font-size:15px;line-height:1.5;min-height:46px}
.rogue-cache-desk .rogue-cache-note{font-size:13px;color:var(--salvage-muted);margin-top:14px;min-height:36px}
.rogue-cache-common{display:flex;align-items:center;gap:18px;border-top:1px solid var(--salvage-line);padding:16px 28px;background:#282e32;font-size:14px;line-height:1.5}
.rogue-cache-common strong{white-space:nowrap}
.rogue-cache-common span{color:var(--salvage-muted)}
.rogue-cache-replacements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:12px 28px 28px}
.rogue-cache-replacements button{text-align:left;padding:18px;display:grid;gap:12px;min-width:0}
.rogue-cache-replacements button>small{font-size:13px;color:var(--salvage-muted);font-weight:400}
.rogue-cache-replacements span>small{font-weight:400;color:var(--salvage-muted);margin-right:6px}
.rogue-cache-desk .rogue-cache-save-error{color:var(--salvage-accent);font-size:14px;padding:12px 28px;border-top:1px solid var(--salvage-line)}
@media(max-height:740px){
 .rogue-salvage-header{padding:14px 24px 12px;gap:20px}
 .rogue-salvage-header h2{font-size:30px}
 .rogue-salvage-header .rogue-salvage-kicker{margin-bottom:5px}
 .rogue-salvage-header h2+p{margin-top:6px}
 .rogue-salvage-current{padding-left:18px;min-width:250px}
 .rogue-salvage-current .rogue-salvage-stats{display:flex;gap:20px}
 .rogue-salvage-current .rogue-salvage-stats>div{display:block}
 .rogue-salvage-common{padding-block:10px}
 .rogue-salvage-options{padding:12px 6px}
 .rogue-salvage-option{padding:0 18px}
 .rogue-salvage-gain{padding:12px 0 8px}
 .rogue-salvage-gain b{font-size:40px}
 .rogue-salvage-preview{margin-top:12px;padding-top:8px}
 .rogue-salvage-option button{margin-top:12px}
 .rogue-salvage-footer{padding:10px 24px}
 .rogue-cache-desk .rogue-salvage-options{padding-block:18px}
 .rogue-cache-desk .rogue-cache-label{margin-top:18px}
 .rogue-cache-effect>b{font-size:30px}
 .rogue-cache-effect>span{font-size:18px}
 .rogue-cache-common{padding:12px 24px}
}
@media(max-width:700px){
 .rogue-modal:not([hidden]):has(.rogue-salvage-desk){padding:12px}
 .rogue-salvage-desk{max-height:calc(100dvh - 24px)}
 .rogue-salvage-header{align-items:flex-start;flex-direction:column;padding:20px}
 .rogue-salvage-current{border-left:0;padding-left:0;width:100%}
 .rogue-salvage-current .rogue-salvage-stats{display:flex;gap:20px;flex-wrap:wrap}
 .rogue-salvage-common{display:block;padding:14px 20px}
 .rogue-salvage-common>*{display:block;margin-bottom:4px}
 .rogue-salvage-options{grid-template-columns:1fr;padding:0 20px}
 .rogue-salvage-option{border-left:0;border-bottom:1px solid var(--salvage-line);padding:20px 0}
 .rogue-salvage-option:last-child{border-bottom:0}
 .rogue-salvage-option .rogue-salvage-effect{min-height:0}
 .rogue-salvage-footer{align-items:flex-start;padding:16px 20px;gap:16px}
 .rogue-salvage-footer p{text-align:left}
 .rogue-cache-capacity{border-left:0;padding-left:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
 .rogue-cache-desk .rogue-cache-description,.rogue-cache-desk .rogue-cache-note{min-height:0}
 .rogue-cache-common{display:block;padding:14px 20px}
 .rogue-cache-common strong{display:block;margin-bottom:6px}
 .rogue-cache-replacements{grid-template-columns:1fr;padding:12px 20px 20px}
}

/* Voyage-only crew equipment has a visible object and a single rank gain. */
.rogue-reward-art{display:block;width:88px;height:88px;object-fit:contain;margin:0 auto 8px;filter:drop-shadow(0 5px 8px #05181c66)}
.rogue-crew-reward{background:#c3d3a50a}
.rogue-salvage-options[data-crew-choice="true"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.rogue-cache-desk:has(.rogue-crew-reward) .rogue-salvage-header{padding:16px 24px;gap:18px}
.rogue-cache-desk:has(.rogue-crew-reward) .rogue-salvage-header h2{font-size:28px}
.rogue-cache-desk:has(.rogue-crew-reward) .rogue-salvage-options{padding-block:16px}
.rogue-cache-desk:has(.rogue-crew-reward) .rogue-cache-note{min-height:0}
@media(max-height:700px) and (min-width:801px){
 .rogue-cache-desk:has(.rogue-crew-reward) .rogue-reward-art{width:64px;height:64px}
 .rogue-cache-desk:has(.rogue-crew-reward) .rogue-salvage-option{padding-inline:12px}
 .rogue-cache-desk:has(.rogue-crew-reward) .rogue-salvage-option-heading h3{font-size:18px}
 .rogue-cache-desk:has(.rogue-crew-reward) .rogue-cache-effect{margin-block:8px 12px}
 .rogue-cache-desk:has(.rogue-crew-reward) .rogue-cache-description{min-height:0;font-size:13px}
 .rogue-cache-desk:has(.rogue-crew-reward) .rogue-cache-note{font-size:12px}
}
@media(max-width:800px){.rogue-salvage-options[data-crew-choice="true"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rogue-salvage-options[data-crew-choice="true"]{grid-template-columns:1fr}}