/* Round 6A arsenal: official weapon images, drawing fallback and camo preview. Loaded after v8.css. */
.ars-shot {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:2/1;
  isolation:isolate;
  background:radial-gradient(ellipse 58% 52% at 50% 56%,#cadb9817,transparent 72%);
  border-radius:12px;
  overflow:hidden
}
.ars-shot>.v8-class-icon {
  position:absolute;
  inset:8% 12%;
  width:76%;
  height:84%;
  display:none
}
.ars-shot.is-failed>.v8-class-icon {display:block}
.ars-shot.is-failed>img,.ars-shot.is-failed>.ars-detail {display:none}
.ars-img,.ars-official {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 10px 12px #000b);
  transition:opacity 200ms ease
}
.ars-shot.is-loading>.ars-img {opacity:0}
.ars-shot.is-loading:before {
  content:'';
  position:absolute;
  inset:18% 10%;
  border-radius:10px;
  background:linear-gradient(100deg,#cadb9808 20%,#cadb981c 45%,#cadb9808 70%) 0 0/300% 100%;
  animation:ars-shimmer 1.2s linear infinite
}
@keyframes ars-shimmer {to {background-position:-300% 0}}
/* Floor glow so cut-out weapons sit on the dark v8 surface instead of floating. */
.ars-shot:after {
  content:'';
  position:absolute;
  inset-inline:18%;
  bottom:7%;
  height:10%;
  border-radius:50%;
  background:radial-gradient(closest-side,#000a,transparent);
  z-index:-1
}
.v8-weapon-visual.has-shot {
  height:auto;
  aspect-ratio:auto;
  padding:22px 10px 8px
}
.v8-weapon-visual.has-shot .ars-shot {background:none}
.v8-weapon-frame.has-shot {padding:4px 10px}
/* The frame already has a fixed height; the shot fills it and the image is contained, so nothing crops or shifts. */
.v8-weapon-frame.has-shot .ars-shot {position:absolute;inset:6px 8px;width:auto;aspect-ratio:auto;background:none}
.v8-weapon-frame.has-shot .ars-shot>.v8-class-icon {inset:6%;width:88%;height:88%}
.ars-compare-shot {margin:0 0 8px}
.ars-compare-shot .ars-shot {max-width:360px;margin-inline:auto}

/* Camo preview */
.ars-preview {
  margin:0 0 20px;
  padding:16px;
  border:1px solid #cadb9826;
  border-radius:22px;
  background:radial-gradient(ellipse at 50% 0,#cadb9810,transparent 70%),#121710;
  box-shadow:var(--v8-shadow)
}
.ars-head {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 16px;
  margin-bottom:10px
}
.ars-head h2 {font-size:18px;margin:0}
.ars-pick {display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.ars-pick select {max-width:220px;min-height:44px;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:#0d110b}
.ars-stage {
  position:relative;
  padding:6px 6px 10px;
  border-radius:16px;
  background:linear-gradient(#cadb9806 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,#cadb9806 1px,transparent 1px) 0 0/26px 26px,#0b0e09;
  border:1px solid #cadb981a;
  touch-action:pan-y
}
.ars-stage .ars-shot {max-width:640px;margin-inline:auto}
.ars-camo,.ars-detail {
  position:absolute;
  inset:0;
  -webkit-mask:var(--ars-mask) center/contain no-repeat;
  mask:var(--ars-mask) center/contain no-repeat;
  pointer-events:none;
  animation:ars-fade 220ms ease both
}
.ars-shot.is-failed .ars-camo {-webkit-mask-image:var(--ars-svg);mask-image:var(--ars-svg);inset:8% 12%}
.ars-camo {opacity:.92;filter:saturate(1.2) contrast(1.08)}
.ars-camo.is-neutral {opacity:.8;filter:none}
/* The weapon itself again on top (hard-light), so edges, rails and shading read through the pattern. */
.ars-detail {background:var(--ars-mask) center/contain no-repeat;mix-blend-mode:hard-light;opacity:.6;-webkit-mask:none;mask:none}
@keyframes ars-fade {from {opacity:0}}
.ars-shot.has-official>.ars-img {opacity:0}
.ars-official {filter:none;border-radius:10px;animation:ars-fade 220ms ease both}
.ars-pat-blot {background:radial-gradient(circle at 22% 32%,var(--c2) 0 17%,transparent 18%) 0 0/88px 58px,radial-gradient(ellipse at 72% 64%,var(--c3) 0 21%,transparent 22%) 0 0/70px 52px,radial-gradient(ellipse at 40% 80%,var(--c4) 0 14%,transparent 15%) 0 0/54px 44px,var(--c1)}
.ars-pat-digital {background:conic-gradient(var(--c2) 25%,var(--c1) 0 50%,var(--c3) 0 75%,var(--c1) 0) 0 0/16px 16px,var(--c1);background-blend-mode:normal}
.ars-pat-digital:before {content:'';position:absolute;inset:0;background:conic-gradient(var(--c4) 25%,transparent 0 75%,var(--c3) 0) 4px 6px/26px 22px;opacity:.85}
.ars-pat-stripe {background:repeating-linear-gradient(118deg,var(--c1) 0 11px,var(--c2) 11px 17px,var(--c3) 17px 25px,var(--c1) 25px 33px,var(--c4) 33px 37px)}
.ars-pat-topo {background:repeating-radial-gradient(circle at 28% 40%,var(--c1) 0 7px,var(--c3) 7px 9px),var(--c1)}
.ars-pat-topo:before {content:'';position:absolute;inset:0;background:repeating-radial-gradient(circle at 78% 70%,transparent 0 9px,var(--c2) 9px 11px);opacity:.8}
.ars-pat-metal {background:linear-gradient(100deg,var(--c2) 0%,var(--c1) 22%,var(--c4) 38%,var(--c3) 46%,var(--c1) 60%,var(--c2) 100%) 0 0/220% 100%;animation:ars-fade 220ms ease both,ars-sheen 6s ease-in-out 220ms infinite alternate}
.ars-pat-flow {background:repeating-linear-gradient(160deg,var(--c1) 0 14px,var(--c4) 14px 20px,var(--c3) 20px 30px,var(--c2) 30px 38px) 0 0/100% 100%}
.ars-pat-shard {background:conic-gradient(from 30deg at 30% 40%,var(--c1),var(--c4),var(--c2),var(--c3),var(--c1)) 0 0/70px 46px}
.ars-pat-cosmos {background:radial-gradient(circle at 30% 40%,var(--c4) 0 2px,transparent 3px) 0 0/23px 19px,radial-gradient(ellipse at 60% 50%,var(--c3),var(--c2) 45%,var(--c1) 80%)}
@keyframes ars-sheen {to {background-position:100% 0}}
.ars-caption {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin:10px 4px 0;
  font-size:13px;
  line-height:1.6;
  min-height:46px
}
.ars-caption b {font-size:15px;color:var(--text)}
.ars-badge {
  display:inline-flex;
  padding:2px 9px;
  border-radius:999px;
  font-size:12px;
  border:1px solid
}
.ars-badge.is-official {color:var(--accent);border-color:#cadb9866;background:#cadb9812}
.ars-badge.is-approx {color:var(--orange);border-color:#e4ad7666;background:#e4ad7612}
.ars-stage-tag {
  position:absolute;
  top:8px;
  inset-inline-start:8px;
  z-index:2;
  padding:1px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1.7;
  background:#0b0e09cc;
  border:1px solid;
  pointer-events:none
}
.ars-stage-tag.is-approx {color:var(--orange);border-color:#e4ad7666}
.ars-stage-tag.is-official {color:var(--accent);border-color:#cadb9866}
.ars-note {color:var(--muted);font-size:12px;flex-basis:100%}
.ars-ref {display:flex;align-items:center;gap:8px;flex-basis:100%;color:var(--muted)}
.ars-ref img {width:72px;height:auto;max-height:46px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.ars-ref small {font-size:12px}
.ars-strip {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  align-items:center
}
.ars-group {
  flex-basis:100%;
  font:500 11px/1.4 'Maydan Mono',monospace;
  letter-spacing:1.2px;
  color:var(--muted);
  text-transform:uppercase;
  margin-top:4px;
  direction:ltr;
  text-align:start
}
.ars-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:6px 12px 6px 8px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#171d13;
  color:var(--text);
  font-size:14px;
  cursor:pointer;
  transition:border-color 160ms,background 160ms,transform 120ms
}
.ars-chip:hover {border-color:#cadb9866}
.ars-chip[aria-checked="true"] {border-color:var(--accent);background:#cadb981a;box-shadow:inset 0 0 0 1px #cadb9855}
.ars-chip:focus-visible,.ars-try:focus-visible,.ars-pick select:focus-visible {outline:2px solid var(--orange);outline-offset:2px}
.ars-chip small {font:500 10px 'Maydan Mono',monospace;color:var(--muted)}
.ars-swatch {
  width:22px;
  height:22px;
  border-radius:7px;
  flex:none;
  background:conic-gradient(var(--c1) 0 25%,var(--c2) 0 50%,var(--c3) 0 75%,var(--c4) 0);
  box-shadow:inset 0 0 0 1px #fff2
}
.ars-swatch.is-neutral {background:repeating-linear-gradient(135deg,#4f5447 0 4px,#2c3027 4px 8px);box-shadow:inset 0 0 0 1px #e4ad7655}
.ars-swatch-base {background:linear-gradient(135deg,#3a4034,#15190f);box-shadow:inset 0 0 0 1px var(--line)}
.ars-try {
  min-height:40px;
  margin:4px 0 6px;
  padding:4px 12px;
  border-radius:10px;
  border:1px solid #cadb9855;
  background:#cadb9810;
  color:var(--accent);
  font-size:13px;
  cursor:pointer
}
@media (max-width:900px) {
  .ars-preview {padding:12px;border-radius:18px}
  .ars-strip {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ars-group {grid-column:1/-1}
  .ars-chip {min-width:0;font-size:13px;line-height:1.3;text-align:start}
  .ars-chip span {overflow-wrap:anywhere}
  .ars-caption {min-height:40px}
  .v8-weapon-visual.has-shot {padding:18px 6px 4px}
}
@media (min-width:901px) {
  .v8-dossier-head:has(.has-shot) {grid-template-columns:260px minmax(0,1fr) 110px}
  .v8-dossier-head .v8-weapon-frame.has-shot {height:140px}
}
/* Desktop: stage and caption on one side, the camo strip beside it, so picking never scrolls the stage away. */
@media (min-width:901px) {
  .ars-preview {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:'head head' 'stage strip' 'caption strip';column-gap:20px;align-items:start}
  .ars-head {grid-area:head}
  .ars-stage {grid-area:stage}
  .ars-caption {grid-area:caption}
  .ars-strip {grid-area:strip;margin-top:0;max-height:520px;overflow:auto;padding:2px}
}
/* Sticky stage only where the screen is tall enough to still show the strip; chips scroll clear of it. */
@media (max-width:900px) and (min-height:640px) {
  .ars-stage {position:sticky;top:64px;z-index:4;box-shadow:0 10px 24px #000a}
  .ars-chip {scroll-margin-top:calc(64px + 50vw + 40px)}
}
@media (prefers-reduced-motion:reduce) {
  .ars-camo,.ars-detail,.ars-official,.ars-pat-metal {animation:none}
  .ars-shot.is-loading:before {animation:none}
  .ars-img,.ars-chip {transition:none}
}