/* scenes/armory.css -- the armor guide's forge: the player on the left, the set's numbers on the right (below him on a phone). */
.gscene-armory .gscene-stage { --arm: #c9ced6; height: clamp(460px, 70vh, 640px); cursor: grab;
  background: radial-gradient(ellipse 60% 55% at 72% 70%, #4a2516, #1c1220 55%, #0a0d18); }
.gscene-armory .gscene-stage:active { cursor: grabbing; }
.arm-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.arm-ui > * { pointer-events: auto; }
.arm-chips { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.arm-chips::-webkit-scrollbar { display: none; }
.arm-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 99px; cursor: pointer;
  font: 800 0.82rem var(--display); color: #e6ebf5; background: rgba(8, 12, 24, 0.62); border: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.2s, transform 0.2s; }
.arm-chip i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.25); }
.arm-chip:hover { transform: translateY(-1px); }
.arm-chip[aria-pressed="true"] { background: var(--c); color: #10131c; border-color: transparent; }
.arm-chip[aria-pressed="true"] i { background: #10131c; }
.arm-card { position: absolute; right: 16px; top: 58px; bottom: 16px; width: min(330px, 44%); display: flex; flex-direction: column; gap: 10px; overflow: auto;
  padding: 16px 18px; border-radius: 22px; background: rgba(8, 12, 24, 0.74); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; cursor: default;
  box-shadow: inset 0 3px 0 var(--arm); }
.arm-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.arm-name { display: flex; flex-direction: column; text-align: center; line-height: 1.15; margin: 0; }
.arm-name b { font: 900 1.45rem var(--display); color: var(--arm); }
.arm-name small { font: 700 0.8rem var(--display); color: #c3cbe0; }
.arm-stats { display: grid; gap: 8px; margin: 0; }
.arm-row { display: grid; gap: 3px; }
.arm-row dt { font: 800 0.76rem var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: #aab4cc; }
.arm-row dd { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 0; }
.arm-row b { font: 900 0.95rem var(--display); min-width: 4.5em; text-align: right; }
.arm-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.arm-bar i { display: block; height: 100%; width: 3%; border-radius: inherit; background: var(--arm); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s; }
.arm-row[data-row="weight"] .arm-bar i { background: linear-gradient(90deg, #7ed957, #ffcc4d 60%, #ff6b6b); }
.arm-burden { margin: 0; font: 800 0.86rem var(--display); color: #ffcf8a; }
.arm-where { margin: 0; font: 600 0.84rem/1.45 var(--body, inherit); color: #d6def0; }
.arm-toggle { align-self: flex-start; margin-top: auto; }
.arm-card.is-bare .arm-stats, .arm-card.is-bare .arm-burden { opacity: 0.35; }
@media (max-width: 719px) {
  .gscene-armory .gscene-stage { height: clamp(620px, 96vh, 760px); }
  .arm-card { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; max-height: 56%; padding: 12px 14px; gap: 8px; }
  .arm-name b { font-size: 1.2rem; }
  .arm-where { display: none; }
}
@media (prefers-reduced-motion: reduce) { .arm-bar i, .arm-chip { transition: none; } }