/* The Armory keeps cash and wave controls in view while stock and rewards scroll. */
#shop, #combine {
  --bench-pad: clamp(14px, 2.5vw, 30px);
  --bench-rule: #3e5059;
  --bench-ink: #101a22;
  --bench-brass: #c4a36d;
  --bench-cut: clamp(17px, 3.2vw, 36px);
  --bench-gap: clamp(14px, 2.5vw, 28px);
  --bench-silhouette: polygon(0 0, calc(100% - var(--bench-cut)) 0, 100% var(--bench-cut),
    100% 100%, var(--bench-cut) 100%, 0 calc(100% - var(--bench-cut)));
  background: radial-gradient(ellipse at 50% 38%, #192935af, #080e16ed);
}
#shop {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
#shop .shop-panel, #combine .fusion-panel {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* Decorative cuts sit behind the controls and never clip keyboard focus. */
#shop .shop-panel::before, #shop .shop-panel::after,
#combine .fusion-panel::before, #combine .fusion-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  clip-path: var(--bench-silhouette);
  background: linear-gradient(124deg, var(--bench-brass), #566975 30%, #334550 77%, #997f59);
}
#shop .shop-panel::after, #combine .fusion-panel::after {
  inset: 1px;
  z-index: -1;
  background: linear-gradient(124deg, #1a2932, var(--bench-ink) 38%, #0d171e);
}
#shop .shop-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 1120px);
  height: min(100%, 840px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
#shop .shop-header {
  position: relative;
  isolation: isolate;
  align-items: center;
  margin: 1px 1px 0;
  padding: 13px max(var(--bench-pad), calc(var(--bench-cut) + 3px)) 15px var(--bench-pad);
  border-bottom: 1px solid var(--bench-rule);
}
#shop .shop-header::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - var(--bench-cut)) 0, 100% var(--bench-cut), 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, var(--bench-brass) 0 54px, #777660 54px 58px, transparent 58px) top left / 100% 2px no-repeat,
    repeating-linear-gradient(137deg, #bdd7e109 0 1px, transparent 1px 10px),
    linear-gradient(112deg, #30373b, #1a2a35 53%, #13222c);
}
#shop .shop-header .eyebrow {
  margin: 0 0 5px;
  font-size: 10px;
  letter-spacing: .09em;
}
#shop-title { font-size: clamp(32px, 5vw, 53px); letter-spacing: -.05em; }
.armory-heading { min-width: 0; }
#shop .shop-bank {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 6px 10px 7px 8px;
  border: 1px solid #6d765b;
  border-radius: 2px 8px 2px 8px;
  background: linear-gradient(115deg, #2b372b, #101c20 55%);
  text-align: right;
}
#shop .shop-bank .micro { color: #c9daa8; font-size: 9px; letter-spacing: .07em; }
#shop .shop-bank strong { display: block; margin-top: 2px; color: #e6ff91; font: 800 clamp(18px, 3vw, 31px)/1 var(--mono); }
.armory-cash-icon { display: grid; place-items: center; width: 29px; height: 29px; color: #d9ef97; }
.armory-cash-icon svg { width: 24px; }

.armory-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #687e85 #152129;
  padding: 13px var(--bench-pad) 16px;
}
.armory-scroll:focus-visible { outline: 2px solid var(--lime); outline-offset: -3px; }
#shop .shop-body { grid-template-columns: minmax(0, 1fr) minmax(230px, 30%); gap: var(--bench-gap); }
#shop .classic-threat {
  margin: 0 0 12px;
  padding: 8px 11px;
  border-color: #475d68;
  border-left-color: var(--threat-color, #9ecdd3);
  border-radius: 2px 8px 2px 8px;
  background: linear-gradient(112deg, #25323a, #17252f);
}
#shop .classic-threat > div { gap: 4px 10px; }
#shop .classic-threat .micro { color: var(--threat-color, #b6dfe2); }
#shop .classic-threat .briefing-goal {
  margin-inline-start: auto;
  padding: 2px 5px;
  border: 1px solid #597278;
  border-radius: 3px;
  color: #d8ebe7;
  font: 650 10px/1.2 var(--mono);
}
#shop #classic-threat-ahead { margin-top: 5px; color: #e3cfaa; font-size: 11px; }
#shop .classic-bank { margin: 0 0 10px; }
#shop .classic-rewards { margin-block: 0 12px; }
#shop .offer[data-signature] { --tier-color: #e3ba79; --tier-bed: #554435; }
#shop .offer[data-signature] .offer-emblem { color: #ffd69c; }
#shop .classic-rewards[data-rare] { border-color: #c49860; background: linear-gradient(110deg, #40342c, #222a30); }
.signature-shelf {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #695942;
  border-radius: 2px 9px 2px 9px;
  background: #202b31;
}
.signature-shelf > p { margin: 0 0 6px; color: #f1cc98; font-size: 9px; }
.signature-shelf ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.signature-shelf li { display: flex; align-items: flex-start; gap: 6px; color: #eee3cf; line-height: 1.25; }
.signature-shelf svg { flex: none; width: 16px; height: 16px; color: #f1cc98; }
.signature-shelf strong, .signature-shelf small { display: block; overflow-wrap: anywhere; }
.signature-shelf strong { font-size: 12px; }
.signature-shelf small { margin-top: 2px; color: #bdcbc8; font-size: 10px; }
.armory-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 9px;
  padding-bottom: 6px;
  background: linear-gradient(90deg, var(--bench-brass) 0 25px, #495e67 25px 72%, transparent) bottom / 100% 1px no-repeat;
}
.armory-section-head h3 { margin: 2px 0 0; color: #f6ebd6; font-size: 24px; line-height: 1; letter-spacing: -.035em; }
.armory-section-head .micro { display: block; color: #adbeac; font-size: 9px; letter-spacing: .10em; }
.armory-section-head .armory-quantity { padding: 4px 6px; border: 1px solid #3f564c; border-radius: 4px; color: #c6dab8; white-space: nowrap; }
#armory-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 5px 7px 5px 9px;
  border: 1px solid #657d58;
  border-inline-start: 3px solid #c5e889;
  border-radius: 2px 8px 2px 8px;
  background: linear-gradient(115deg, #2b3c34, #1a2b31);
  overflow-wrap: anywhere;
}
#armory-guide p { margin: 0; }
#armory-guide-title { color: #d4eda0; font-size: 9px; }
#armory-guide-pick { color: #f4f5dc; font-size: 12px; line-height: 1.25; }
#armory-guide .armory-guide-tip { color: #bed1c0; font-size: 11px; line-height: 1.25; }
#armory-guide-skip { min-height: 44px; padding: 4px 7px; font-size: 11px; white-space: nowrap; }
.armory-capacity { display: grid; gap: 4px; justify-items: end; }
#armory-slots { display: flex; gap: 3px; }
#armory-slots i { display: block; width: 9px; height: 3px; border-radius: 1px; background: #3e5350; }
#armory-slots i.filled { background: #cee987; }

#shop .offers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#shop .offer-stack { gap: 0; }
#shop .offer {
  width: 100%;
  min-height: 0;
  padding: 9px 9px 8px;
  border-color: #425865;
  border-radius: 2px 9px 0 0;
  border-top-color: var(--tier-color, #a9c992);
  background:
    linear-gradient(135deg, var(--tier-bed, #344638) 0 24px, transparent 24px),
    linear-gradient(155deg, #253743, #192a35 52%, #14242e);
  text-align: left;
}
#shop .offer:not(:disabled):hover, #shop .offer:focus-visible, #shop .offer[data-pad-focus] {
  position: relative;
  z-index: 1;
  border-color: #b9db8c;
  background:
    linear-gradient(135deg, var(--tier-bed, #344638) 0 24px, transparent 24px),
    linear-gradient(145deg, #304755, #203744 58%, #192d37);
}
#shop .offer-stack[data-locked] .offer { border-inline-color: #b0985e; }
#shop .offer[data-guided-pick] { border-color: #c5e889; box-shadow: inset 0 0 0 1px #c5e88945; }
#shop .offer-art { height: auto; width: 100%; gap: 4px; align-items: flex-start; }
#shop .offer-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(29px, 3.5vw, 43px);
  height: clamp(27px, 3.2vw, 39px);
  border: 1px solid var(--tier-color, #6e8669);
  border-radius: 2px 7px 2px 7px;
  color: var(--gear, #d9eea3);
  background: linear-gradient(143deg, var(--tier-bed, #2c4032), #0f1b23 70%);
}
#shop .offer-emblem svg { width: 76%; height: auto; }
#shop .offer-art .tier-chip { padding: 3px 4px; }
#shop .offer-art > small { margin-top: 3px; color: #bfdbc1; text-align: right; }
#shop .offer > strong { margin-top: 7px; color: #fff2db; font-size: clamp(13px, 1.5vw, 17px); line-height: 1.12; }
#shop .offer-class { color: #bed0c4; }
#shop .offer-class b { color: #e1f5a2; }
#shop .offer-desc { margin-top: 6px; color: #becdc4; -webkit-line-clamp: 2; }
#shop .offer-compact-cue { display: none; }
.armory-fit {
  display: grid;
  gap: 3px;
  width: 100%;
  margin-top: 7px;
  padding: 6px 8px;
  border-inline-start: 2px solid #b39061;
  background: #b3906116;
  color: #dae0d6;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.armory-fit b { color: #f0d3a9; }
.armory-fit[data-ready='true'] { border-color: #b7d68d; background: #b7d68d15; }
.armory-fit[data-ready='true'] b { color: #e0f7aa; }
#shop .offer .armory-fit { font-size: 11px; }
#classic-crate-fit { font-size: 12px; }
#purchase-fit { margin: 10px 0 14px; font-size: 14px; }
#armory-recipe-pin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 9px;
  padding: 7px 9px;
  border: 1px solid #526971;
  border-inline-start: 3px solid #ccab77;
  border-radius: 2px 8px 2px 8px;
  background: linear-gradient(112deg, #303638, #182932);
}
#armory-recipe-pin[data-ready='true'] { border-inline-start-color: #b7d68d; }
#armory-recipe-pin p { margin: 0; }
#armory-recipe-pin .micro { color: #ead0a5; font-size: 9px; }
#armory-pin-name { display: block; margin: 2px 0; color: #fff0d8; font-size: 13px; }
#armory-pin-status { color: #c6d8cf; font-size: 12px; }
#armory-pin-open { min-height: 44px; gap: 5px; padding: 6px 9px; font-size: 12px; }
#armory-pin-open svg { width: 12px; height: 12px; }
#shop .changes { width: 100%; margin: 7px 0 8px; gap: 4px; }
.offer-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 6px;
  flex-wrap: wrap;
  padding-bottom: 3px;
  border-bottom: 1px solid #3b515c;
  color: #b6cbc1;
  font: 650 10px/1.18 system-ui, sans-serif;
}
.offer-stat b { color: #e4f5cb; font: 750 10px/1.18 var(--mono); overflow-wrap: anywhere; }
#shop .offer-price { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 4px; margin-top: auto; color: #e1f995; }
#shop .offer-price b { font: 800 15px/1 var(--mono); }
#shop .offer-price small { margin: 0; color: #d6e5d3; font-size: 10px; text-align: right; }
#shop .offer-price svg { width: 10px; height: 10px; vertical-align: -1px; }
.offer-blocker { margin-top: 4px; color: #ffd3a2; font-size: 10px; overflow-wrap: anywhere; }
#shop .offer.sold {
  min-height: 125px;
  gap: 5px;
  border: 1px dashed #52655c;
  border-radius: 6px;
  color: #8da49a;
  background: repeating-linear-gradient(135deg, #152529 0 5px, #122125 5px 10px);
}
#shop .offer.sold svg { width: 24px; height: 24px; }
#shop .offer-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 39px;
  padding: 3px 4px;
  border-top: 0;
  border-color: #425865;
  border-radius: 0 0 2px 7px;
  color: #c3d4ca;
  background: linear-gradient(100deg, #142735, #111e27);
}
#shop .offer-lock svg { width: 15px; height: 15px; }
#shop .offer-lock:not(:disabled):hover { color: #f0f6d8; background: #203531; }
#shop .offer-lock[aria-pressed="true"] { border-color: #b0985e; background: #322b1e; color: #f4d58f; }

#shop #equipment { grid-template-columns: 1fr; gap: 5px; }
.loadout-output {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 9px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-inline-start: 2px solid #9ccb9e;
  background: linear-gradient(105deg, #253b3a, #162a31 80%);
  color: #c6dcd1;
}
.loadout-output .micro { font-size: 9px; letter-spacing: .045em; text-transform: uppercase; }
.loadout-output strong { color: #dcf6cb; font: 800 15px/1.15 var(--mono); white-space: nowrap; }
.loadout-output small { color: #a4c1b4; font-size: 9px; }
#shop .equipped {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  padding: 4px 6px;
  background:
    linear-gradient(105deg, var(--tier-bed, #2a3c3e) 0 38px, transparent 39px),
    linear-gradient(100deg, #223744, #14242d);
  border-block-color: #3e525e;
  border-inline-end-color: #3e525e;
  border-radius: 0 8px 2px 0;
}
#shop .equipped.empty { grid-template-columns: auto minmax(0, 1fr); min-height: 30px; gap: 9px; color: #9db0a9; background: #102025; }
#shop .equipped > span:first-child { gap: 3px; }
.gear-emblem { flex-direction: column; justify-content: center; width: 27px; }
#shop .gear-emblem svg { width: 22px; height: 16px; }
.gear-index { color: #aabeb1; font: 700 9px/1 var(--mono); }
#shop .equipped .gear-info { display: flex; gap: 2px; align-items: flex-start; min-width: 0; }
#shop .gear-info > span { font-size: 12px; font-weight: 750; line-height: 1.15; overflow-wrap: anywhere; }
#shop .gear-info small { color: #b3c8bb; overflow-wrap: anywhere; }
#shop .gear-info .gear-metrics { color: #dbebdc; font-variant-numeric: tabular-nums; }
#shop .gear-info .gear-mounts { color: #dec9a2; }
#shop .armory-field-report {
  margin-bottom: 8px;
  border: 1px solid #45666c;
  border-radius: 2px 9px 2px 9px;
  background: #14252f;
}
.field-report-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, #294349, #172b36);
  text-align: left;
}
.field-report-toggle:hover { background: #29434b; }
.field-report-toggle .micro { display: block; color: #a5ddd6; font-size: 9px; }
.field-report-toggle strong { display: block; margin-top: 2px; color: #f6ead7; font-size: 12px; overflow-wrap: anywhere; }
.field-report-toggle svg { flex: none; width: 16px; height: 16px; color: #a5ddd6; }
.field-report-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
#field-report-detail { padding: 6px 9px 8px; }
#field-report-weapons { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#field-report-weapons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 6px; }
.field-weapon { display: flex; align-items: center; gap: 4px; min-width: 0; color: #e0ece7; font-size: 11px; overflow-wrap: anywhere; }
.field-weapon svg { width: 16px; height: 16px; flex: none; color: var(--field-color); }
#field-report-weapons strong { color: #e0ece7; font: 750 10px/1 var(--mono); white-space: nowrap; }
.field-meter { grid-column: 1 / -1; height: 3px; background: linear-gradient(90deg, var(--field-color) var(--field-fill), #35474e var(--field-fill)); }
#field-report-detail p { margin: 7px 0 0; color: #bbcfc9; font-size: 10px; line-height: 1.3; }
#shop .sell { color: #d2e7d9; border-color: #435e56; background: #112025; }
#shop .gear-actions { display: grid; gap: 3px; }
#shop .gear-unfit { min-width: 44px; color: #e4d3af; border-color: #6b644f; }
#shop .classic-sets { margin: 9px 0 0; }
#shop .combine-button { min-height: 40px; margin-top: 7px; }
#shop .armory-intel { margin-top: 16px; padding-top: 5px; border-top: 1px solid #3b514e; }
#shop .armory-exits { margin-top: 10px; }

#shop .shop-footer {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 12px;
  margin: 0 1px 1px;
  padding: 9px var(--bench-pad) 9px max(var(--bench-pad), calc(var(--bench-cut) + 3px));
  border-color: #576b71;
}
#shop .shop-footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bench-cut) 100%, 0 calc(100% - var(--bench-cut)));
  background:
    linear-gradient(90deg, transparent 60%, #c4a36d70) top / 100% 1px no-repeat,
    linear-gradient(103deg, #18242c, #233742 70%, #283a42);
}
.armory-shelf-copy { min-width: 0; }
#shop-next-note { margin: 0 0 2px; color: #ffe29c; font-size: 11px; font-weight: 750; }
#shop-feedback { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#shop .shop-actions { display: grid; grid-template-columns: minmax(100px, auto) minmax(135px, auto); width: auto; gap: 6px; margin: 0; }
#shop .shop-actions .btn { min-width: 0; min-height: 44px; padding: 6px 10px; gap: 6px; border-radius: 5px; font-size: 13px; line-height: 1.18; }
#shop #next { justify-content: space-between; border-radius: 2px 9px 2px 9px; }
#shop #next:disabled { opacity: .68; }

#combine {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
#combine .fusion-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(100%, 790px);
  min-height: 0;
  padding: 0;
}
#combine .fusion-header, #combine .fusion-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px max(var(--bench-pad), var(--bench-cut));
}
#combine .fusion-header {
  margin: 1px 1px 0;
  border-bottom: 1px solid var(--bench-rule);
  clip-path: var(--bench-silhouette);
  background: linear-gradient(90deg, var(--bench-brass) 0 56px, transparent 56px) left top / 100% 2px no-repeat,
    linear-gradient(108deg, #313b3e, #182b37 74%);
}
#combine .fusion-header .eyebrow { color: var(--bench-brass); }
#combine-title { font-size: clamp(26px, 5vw, 50px); }
#fusion-count, #armory-fusion-count {
  flex: none;
  padding: 4px 6px;
  border: 1px solid #718363;
  border-radius: 2px 6px 2px 6px;
  background: #273b33;
  color: #d9f2a8;
  text-transform: uppercase;
  white-space: nowrap;
}
#combine .fusion-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #687e85 #152129;
  padding: 14px max(var(--bench-pad), var(--bench-cut)) 16px;
}
#combine .fusion-scroll:is(:focus-visible, [data-pad-focus]) { outline: 2px solid var(--lime); outline-offset: -3px; }
#combine .fusion-section-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  color: #d6e2e5;
  font: 800 11px/1.25 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
#combine .fusion-section-heading::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #657980, #334752); }
#combine .fusion-rule, #combine .fusion-footer p { margin: 0; font-size: 12px; color: #bdc9c8; }
#combine .fusion-choices { margin: 0 0 18px; gap: 8px; }
#combine .fusion-choices .fusion-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #627d85;
  border-inline-start: 3px solid #d6ee9f;
  border-radius: 2px 9px 2px 9px;
  background: linear-gradient(110deg, #263c44, #152530);
  overflow-wrap: anywhere;
}
#combine .fusion-choice:hover { border-color: var(--lime); background: #2a424a; }
#combine .fusion-choice-copy { display: grid; gap: 3px; }
#combine .fusion-choice-copy .micro { color: #b8d692; font-size: 9px; text-transform: uppercase; }
#combine .fusion-choice-copy strong { font-size: 14px; line-height: 1.2; }
#combine .fusion-choice-copy small { font-weight: 600; }
#combine .fusion-arrow { color: #d8ec9b; }
#combine .fusion-icon {
  display: grid;
  width: 34px;
  min-height: 31px;
  place-items: center;
  border-radius: 2px 7px 2px 7px;
  color: #d9dfbf;
  background: #111f28;
}
#combine .fusion-icon svg { width: 29px; height: 25px; }
#combine .fusion-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 11px;
  border-inline-start: 2px solid #8d8f72;
  background: #243035;
  color: #d8ddd6;
  font-size: 12px;
}
#combine .recipe-book { gap: 8px; margin: 8px 0 0; }
#combine .fusion-recipe {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #445b66;
  border-inline-start: 2px solid #708e98;
  border-radius: 0 7px 2px 0;
  background: linear-gradient(110deg, #202f3a, #15232e);
  overflow-wrap: anywhere;
}
#combine .fusion-recipe[data-ready='true'] { border-inline-start-color: var(--lime); }
#combine .fusion-recipe header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 5px; }
#combine .fusion-recipe header strong { font-size: 13px; line-height: 1.17; }
#combine .fusion-status { color: #e2c698; font-size: 8px; text-transform: uppercase; white-space: nowrap; }
#combine [data-ready='true'] .fusion-status, #combine [data-held='true'] small { color: #daf0ab; }
#combine .fusion-ingredients { margin: 4px 0 0; padding: 0; list-style: none; }
#combine .fusion-ingredients li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  padding: 3px 0;
  border-top: 1px solid #5b737a5e;
  color: #d3e0dd;
  font-size: 11px;
}
#combine .fusion-ingredients small { flex: none; color: #d5c4ab; font: 700 10px/1.2 var(--mono); }
#combine .fusion-footer {
  position: relative;
  isolation: isolate;
}
#combine .fusion-footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 1px 1px;
  clip-path: var(--bench-silhouette);
  border-top: 1px solid #566e77;
  background: linear-gradient(110deg, #233945, #172631);
  pointer-events: none;
}
#combine #fusion-pin-message { color: #e8d9bc; overflow-wrap: anywhere; }
#combine #fusion-pin-message:not(:empty) { margin-top: 4px; }
#combine #combine-back {
  flex: none;
  gap: 7px;
  min-height: 44px;
  padding: 7px 10px;
  border-radius: 2px 8px 2px 8px;
  font-size: 13px;
}

@media (max-width: 1000px) {
  #shop .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  #shop { --bench-pad: 11px; --bench-gap: 15px; }
  #shop .shop-body { grid-template-columns: minmax(0, 1fr); }
  #shop .shop-header { padding-block: 8px 9px; }
  #shop .shop-header .eyebrow { font-size: 8px; line-height: 1.25; }
  #shop .shop-bank { gap: 4px; padding: 6px; }
  #shop .shop-bank .micro { font-size: 8px; }
  .armory-cash-icon { width: 19px; height: 19px; }
  .armory-cash-icon svg { width: 17px; }
  .armory-scroll { padding-block: 10px 13px; }
  #shop .shop-footer { grid-template-columns: minmax(0, 1fr); padding-block: 6px 7px; gap: 4px; }
  #shop .shop-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); }
  #shop .shop-feedback { font-size: 10px; }
  #shop .offer-lock { min-height: 44px; }
  #shop .sell { min-height: 44px; }
  #combine { --bench-pad: 11px; --bench-cut: 14px; }
  #combine .fusion-header, #combine .fusion-footer { padding-block: 8px; }
  #combine .fusion-footer { gap: 7px; }
  #combine .fusion-footer p { font-size: 11px; }
}
@media (max-width: 660px) and (orientation: portrait) {
  /* Lead with the lesson and stock while onboarding. The briefing stays in
     the same scroll area below the offers without shrinking touch targets. */
  #shop .armory-scroll:has(#armory-guide:not([hidden])) { display: flex; flex-direction: column; }
  #shop .armory-scroll:has(#armory-guide:not([hidden])) .shop-body { display: contents; }
  #shop .armory-scroll:has(#armory-guide:not([hidden])) .armory-stock { order: -1; margin-bottom: var(--bench-gap); }
  #shop .classic-threat { margin-bottom: 8px; }
  #shop .armory-stock .armory-section-head { min-height: 0; margin-bottom: 5px; }
  #shop .armory-stock .armory-section-head h3 { font-size: 21px; }
  #shop .offers { gap: 6px; }
  #shop .offer { padding: 5px 7px; }
  #shop .offer-art { align-items: center; }
  #shop .offer-art .tier-chip { padding: 3px 5px; }
  #shop .offer-art > small { margin-top: 0; }
  #shop .offer-emblem { width: 26px; height: 22px; }
  #shop .offer > strong { margin-top: 5px; }
  #shop .offer-art .tier-chip > span, #shop .offer-class, #shop .offer-desc,
  #shop .offer .armory-fit, #shop .offer .changes, #shop .offer .offer-blocker { display: none; }
  #shop .offer-compact-cue {
    display: block;
    margin: 2px 0 4px;
    color: #c6dec0;
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  #shop .offer[data-unavailable] .offer-compact-cue { color: #ffd3a2; }
  #shop .offer[data-signature] .offer-compact-cue { color: #f0d3a9; }
  #shop .offer.sold { min-height: 124px; }
  #shop #armory-recipe-pin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: 5px; padding: 3px 6px; }
  #shop #armory-pin-name { margin: 1px 0; line-height: 1.2; }
  #shop #armory-pin-status { font-size: 11px; line-height: 1.2; }
}
@media (max-width: 510px) {
  #combine .fusion-choices, #combine .recipe-book { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 365px) {
  #shop { --bench-pad: 8px; }
  #shop .offer { padding-inline: 6px; }
  #shop .offer-art .tier-chip { font-size: 8px; }
  #shop .offer-stat b, #shop .offer-stat { font-size: 9px; }
}

.fusion-route { margin-top: 9px; padding-top: 8px; border-top: 1px solid #4b626d; }
#combine .fusion-route-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.fusion-route-heading > strong { color: #dce8df; font-size: 11px; }
#combine .fusion-route[data-ready="true"] .fusion-route-heading > strong { color: #e0f7a7; }
.fusion-route .fusion-ingredients { margin-top: 5px; }
#combine .recipe-pin-button {
  width: 100%;
  min-height: 44px;
  margin-top: 5px;
  padding: 5px 8px;
  border-radius: 2px 6px 2px 6px;
  font-size: 12px;
}
#combine .fusion-route[data-pinned] .recipe-pin-button { border-color: #b7d68d; color: #e0f7aa; background: #293c32; }