/* docs/features/game-engine/armory/ */

.armory-equip {
  --ae-border: rgba(154, 130, 99, 0.55);
  --ae-border-strong: rgba(46, 36, 25, 0.95);
  --ae-panel-gap: calc(var(--gs-u-w) * 0.55);
  --ae-icon-size: calc(var(--gs-u-h) * 8.2);
  /* Inventory tile is the authoritative gear size across contexts. */
  --armory-gear-tile-size: var(--ae-icon-size);
  position: relative;
  /* Above player-meta-dock (8): mode bar + hub exit tooltip vs HUD siblings in main. */
  z-index: 12;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.45);
  /* Symmetric insets from game-stage edges */
  padding: calc(var(--gs-u-h) * 0.62) calc(var(--gs-u-w) * 1.05) calc(var(--gs-u-h) * 0.72);
  box-sizing: border-box;
  /* Let gear tooltips extend past column edges (paired with layout-inner / grid padding). */
  overflow-x: visible;
  overflow-y: visible;
}

.armory-equip__banner {
  margin: 0;
  padding: calc(var(--gs-u-h) * 0.32) calc(var(--gs-u-h) * 0.48);
  border-radius: var(--gs-radius-sm);
  background: rgba(120, 40, 40, 0.35);
  border: var(--gs-hairline) solid rgba(220, 120, 120, 0.45);
  font-size: var(--gs-text-md);
}

.armory-equip__layout {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  overflow-x: visible;
  overflow-y: visible;
}

.armory-equip__layout-inner {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--ae-panel-gap);
  container-type: inline-size;
  container-name: armory-layout;
  overflow-x: visible;
  overflow-y: visible;
}

.armory-equip__effects-col {
  /* Three-column layout: inventory 40% | mannequin 30% | effects 30% */
  position: relative;
  z-index: 1;
  flex: 3 1 0%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--gs-radius-md);
  padding: calc(var(--gs-u-h) * 0.38) calc(var(--gs-u-h) * 0.45);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.3);
}

.armory-equip__effects-heading {
  margin: 0;
  font-size: calc(var(--gs-u-h) * 2.25);
  font-weight: 700;
  color: #e8d6bc;
  letter-spacing: 0.02em;
}

.armory-equip__effects-panel {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.38);
}

.armory-equip__effect-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: calc(var(--gs-u-h) * 0.4);
  min-width: 0;
  margin: 0;
  padding: calc(var(--gs-u-h) * 0.32) calc(var(--gs-u-h) * 0.4);
  border-radius: var(--gs-radius-sm);
}

.armory-equip__effect-card-icon {
  flex: 0 0 auto;
  width: calc(var(--gs-u-w) * 6.2);
  height: calc(var(--gs-u-h) * 6.2);
  border-radius: var(--gs-radius-xs);
  border: var(--gs-hairline) solid rgba(154, 130, 99, 0.4);
  background: rgba(6, 4, 12, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.armory-equip__effect-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.armory-equip__effect-card-icon:empty {
  background:
    radial-gradient(ellipse 80% 80% at 50% 40%, rgba(90, 70, 120, 0.25), transparent 65%),
    rgba(6, 4, 12, 0.65);
}

.armory-equip__effect-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.22);
}

.armory-equip__effect-card-title {
  font-size: calc(var(--gs-u-h) * 2);
  font-weight: 700;
  color: #e8d8c4;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.armory-equip__effect-card-fx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.18);
}

.armory-equip__effect-line {
  font-size: calc(var(--gs-u-h) * 1.62);
  line-height: 1.35;
  color: #c4b89a;
}

/* Match ``game-card`` skill preview: cyan numerics, lilac emphasis (see ``game-card.css``). */
.armory-equip__fx-val {
  font-weight: 800;
  color: #9fd9ff;
  text-shadow: 0 0 6px rgba(120, 200, 255, 0.28);
}

.armory-equip__fx-tag {
  font-weight: 800;
  color: #c8b8ff;
  text-shadow: 0 0 10px rgba(180, 160, 255, 0.22);
}

.armory-equip__tile-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: var(--gs-radius-sm);
  outline: none;
  overflow: visible;
  transition:
    box-shadow 0.14s ease,
    background-color 0.14s ease;
}

/* Star rank overlaid on gear icon (inventory, forge, equip mannequin). */
.armory-equip__tile-stars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--gs-u-h) * 0.12);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

.armory-equip__tile-stars .game-card__stars-row {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.06em;
  font-size: calc(var(--gs-u-h) * 1.1);
}

/* Equipped-on-character (inventory / forge). */
.armory-equip__tile-wrap--worn {
  box-shadow:
    0 0 0 calc(var(--gs-stroke) * 1.25) rgba(72, 152, 220, 0.92),
    0 0 calc(var(--gs-u-h) * 0.55) rgba(60, 140, 210, 0.35);
}

.armory-equip__inventory .armory-equip__tile-wrap--worn .armory-equip__gear-drag {
  border-color: rgba(100, 180, 245, 0.72);
  background: rgba(16, 28, 48, 0.88);
}

.armory-equip__tile-wrap--dimmed {
  opacity: 0.48;
  filter: grayscale(0.55);
}

.armory-equip__tile-wrap--dimmed-strong {
  opacity: 0.26;
  filter: grayscale(0.85);
}

.armory-equip__tile-wrap--dimmed:hover,
.armory-equip__tile-wrap--dimmed:focus-within {
  opacity: 0.62;
  filter: grayscale(0.4);
}

.armory-equip__tile-wrap--dimmed-strong:hover,
.armory-equip__tile-wrap--dimmed-strong:focus-within {
  opacity: 0.38;
  filter: grayscale(0.72);
}

/* Forge slot frame hosts the same gear tile contract as inventory. */
.armory-forge__slot-col .armory-equip__slot-frame {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
}

.armory-forge__slot-col .armory-equip__slot-frame > .armory-equip__tile-wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  display: block;
}

.armory-forge__slot-col .armory-equip__slot-frame > .armory-equip__tile-wrap .armory-equip__gear-drag {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  max-height: none;
  object-fit: contain;
  padding: calc(var(--gs-u-h) * 0.22);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 14, 28, 0.85);
  box-sizing: border-box;
}

.armory-equip__inventory .armory-equip__tile-wrap:hover {
  box-shadow:
    0 0 0 var(--gs-stroke) rgba(255, 210, 160, 0.38),
    0 calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 1.1) rgba(0, 0, 0, 0.35);
  background: rgba(var(--gs-gold-warm-rgb), 0.06);
}

.armory-equip__inventory .armory-equip__tile-wrap:focus-visible {
  box-shadow:
    0 0 0 var(--gs-stroke) rgba(180, 210, 255, 0.65),
    0 calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 1.1) rgba(0, 0, 0, 0.35);
  background: rgba(200, 220, 255, 0.07);
}

.armory-equip__tile-wrap:focus-visible {
  outline: var(--gs-stroke) solid rgba(200, 220, 255, 0.88);
  outline-offset: calc(var(--gs-u-h) * 0.2);
}

.armory-equip__tile-wrap .game-tooltip {
  width: max-content;
  max-width: calc(var(--gs-u-w) * 22);
}

.armory-equip__tile-wrap .game-tooltip__title {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.game-tooltip .armory-equip__effect-line {
  overflow-wrap: break-word;
  word-break: normal;
}

.armory-equip__star-bonus {
  margin: calc(var(--gs-u-h) * 0.35) 0 0;
  font-size: calc(var(--gs-u-h) * 1.65);
  line-height: 1.3;
  color: #9ec9e8;
  font-style: italic;
}

.armory-equip__gear-tooltip-fx {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.18);
}

.armory-equip__gear-tooltip-fx:empty {
  display: none;
}

/* Edge anchoring for inventory + mannequin tooltips (default centered; anchored at row edges so scrollport doesn't clip). */
@media (min-width: 901px) {
  .armory-equip__inventory-grid .armory-equip__tile-wrap:nth-child(4n + 1) .game-tooltip {
    left: 0;
    right: auto;
    transform: none;
  }

  .armory-equip__inventory-grid .armory-equip__tile-wrap:nth-child(4n) .game-tooltip {
    left: auto;
    right: 0;
    transform: none;
  }
}

.armory-equip__slot--back .game-tooltip,
.armory-equip__offhand-chip .game-tooltip {
  left: 0;
  right: auto;
  transform: none;
}

.armory-equip__slot--weapon .game-tooltip {
  left: auto;
  right: 0;
  transform: none;
}

.armory-equip__inventory {
  position: relative;
  z-index: 6;
  flex: 4 1 0%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  overflow: visible;
  border-radius: var(--gs-radius-md);
  padding: calc(var(--gs-u-h) * 0.38) calc(var(--gs-u-h) * 0.48);
  box-sizing: border-box;
}

.armory-equip__inventory-grid {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow-x: visible;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--gs-u-h) * 0.62);
  align-content: start;
  justify-items: stretch;
  box-sizing: border-box;
  padding: calc(var(--gs-u-h) * 0.24) calc(var(--gs-u-h) * 0.55);
  padding-bottom: calc(var(--gs-u-h) * 12);
}

.armory-equip__figure-wrap {
  position: relative;
  z-index: 2;
  flex: 3 1 0%;
  min-height: 0;
  min-width: 0;
  width: auto;
  height: 100%;
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* Size from column width and stage height (~30% row). */
.armory-equip__figure {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 7 / 12;
  width: min(100%, calc(var(--gs-u-h) * 70 * 7 / 12));
  height: auto;
  max-width: 100%;
  max-height: min(100%, calc(var(--gs-u-h) * 70));
  margin-inline: auto;
  border: var(--gs-stroke) solid var(--ae-border);
  border-radius: var(--gs-radius-md);
  box-shadow:
    inset 0 0 0 var(--gs-hairline) rgba(46, 36, 25, 0.65),
    0 0 calc(var(--gs-u-h) * 2.2) rgba(0, 0, 0, 0.45);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.armory-equip__silhouette {
  position: absolute;
  z-index: 1;
  /* Large implicit equip target behind labeled slots */
  left: 18%;
  right: 18%;
  top: 22%;
  bottom: 10%;
  border-radius: var(--gs-radius-lg);
  background: transparent;
  /* Slots layer stacks above; silhouette stays visual-only so slots stay clickable/draggable */
  pointer-events: none;
}

.armory-equip__slots-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.armory-equip__slot {
  position: absolute;
  z-index: 1;
  pointer-events: auto;
  box-sizing: border-box;
}

/* Tooltip is on the tile; z-index on the tile does not beat sibling *slots* (all z-index:1, paint in DOM order). */
.armory-equip__slot:has(.armory-equip__tile-wrap:hover),
.armory-equip__slot:has(.armory-equip__tile-wrap:focus-within) {
  z-index: 60;
}

.armory-equip__slot-frame {
  width: 100%;
  height: 100%;
  border: var(--gs-stroke) solid var(--ae-border);
  border-radius: var(--gs-radius-sm);
  background: rgba(12, 10, 18, 0.12);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: max(1px, calc(var(--gs-u-h) * 0.06));
  box-sizing: border-box;
  min-height: 0;
}

/* Equipment slots (+ offhand): icons fill the frame edge-to-edge, stretched */
.armory-equip__slot-frame > img.armory-equip__tile-icon {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: fill;
}

.armory-equip__slots-layer .armory-equip__slot-frame > .armory-equip__tile-wrap {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.armory-equip__slots-layer .armory-equip__slot-frame > .armory-equip__tile-wrap .armory-equip__tile-icon {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: fill;
}

.armory-equip__offhand-chip .armory-equip__slot-frame > .armory-equip__tile-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.armory-equip__offhand-chip .armory-equip__slot-frame > .armory-equip__tile-wrap .armory-equip__tile-icon {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: fill;
}

.armory-equip__slot.dnd-drop-target--hover .armory-equip__slot-frame {
  border-color: rgba(180, 220, 255, 0.65);
  box-shadow: 0 0 calc(var(--gs-u-w) * 1.1) rgba(120, 180, 255, 0.22);
}

.armory-equip__slot--head {
  left: 37.03%;
  top: 4.47%;
  width: 25.93%;
  height: 18.89%;
}

.armory-equip__slot--weapon {
  left: 69.84%;
  top: 23.37%;
  width: 25.93%;
  height: 26.3%;
}

.armory-equip__slot--body {
  left: 34.41%;
  top: 27.33%;
  width: 32.11%;
  height: 22.32%;
}

.armory-equip__slot--back {
  left: 5.15%;
  top: 36.43%;
  width: 25.93%;
  height: 18.74%;
}

.armory-equip__slot--feet {
  left: 54.65%;
  top: 67.53%;
  width: 26%;
  height: 22.37%;
}

.armory-equip__offhand-chip {
  position: absolute;
  z-index: 3;
  left: 6%;
  bottom: 6%;
  width: 22%;
  min-height: calc(var(--gs-u-h) * 10.5);
  pointer-events: auto;
}

.armory-equip__offhand-chip:has(.armory-equip__tile-wrap:hover),
.armory-equip__offhand-chip:has(.armory-equip__tile-wrap:focus-within) {
  z-index: 70;
}

.armory-equip__offhand-chip .armory-equip__slot-frame {
  min-height: calc(var(--gs-u-h) * 9.8);
}

  width: var(--ae-icon-size);
  height: var(--ae-icon-size);
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* Draggable gear: drag the icon itself (payload on this element). */
.armory-equip__gear-drag.armory-equip__tile-icon {
  -webkit-user-drag: element;
  touch-action: none;
  max-width: 100%;
  cursor: grab;
}

.armory-equip__gear-drag:focus-visible {
  outline: var(--gs-stroke) solid rgba(200, 220, 255, 0.85);
  outline-offset: calc(var(--gs-u-h) * 0.18);
}

.armory-equip__gear-drag:active {
  cursor: grabbing;
}

.armory-equip__inventory-grid .armory-equip__tile-wrap {
  width: 100%;
  justify-self: stretch;
  aspect-ratio: 1;
  display: block;
}

.armory-equip__inventory-grid .armory-equip__tile-wrap .armory-equip__gear-drag {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  max-height: none;
  object-fit: contain;
  padding: calc(var(--gs-u-h) * 0.22);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 14, 28, 0.5);
}

/* Inventory + slot equipped: show frame on placeholder-style icons */
.armory-equip__gear-drag.armory-equip__tile-icon--placeholder {
  opacity: 1;
  border: var(--gs-stroke) solid var(--ae-border);
  border-radius: var(--gs-radius-xs);
}

.armory-equip__gear-drag--equipped {
  border: none;
  background: transparent;
  padding: 0;
}

/* Empty slot: lone placeholder img — keep subdued */
.armory-equip__slot-frame > img.armory-equip__tile-icon--placeholder {
  opacity: 0.38;
  border: none;
}

@media (prefers-reduced-motion: reduce) {
  .armory-equip__gear-drag {
    cursor: pointer;
  }
}