/* Cyber Gyn Arsenal — modern medieval items catalogue */
.items-page {
  --arsenal-ink: #29160c;
  --arsenal-gold: #d1a44f;
  --arsenal-green: #163b21;
  padding: 18px;
  background:
    linear-gradient(rgba(255,244,207,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,244,207,.035) 1px, transparent 1px),
    linear-gradient(135deg, #d9c49f, #c5a878 52%, #d9c49f);
  background-size: 24px 24px, 24px 24px, auto;
}

.arsenal-header {
  position: relative;
  margin: -4px -4px 16px;
  padding: 14px 18px 16px;
  border: 2px solid #29160d;
  outline: 1px solid #b78a3e;
  background:
    radial-gradient(circle at 50% 0, rgba(233,190,91,.2), transparent 48%),
    linear-gradient(180deg, #244c2c, #102d19);
  color: #f4dfaa;
  text-align: center;
  box-shadow: inset 0 0 0 3px rgba(227,191,111,.13), 0 4px 9px rgba(43,23,10,.32);
}

.arsenal-header::after {
  content: "◆  ⚔  ◇  ⚒  ◇  ⚔  ◆";
  display: block;
  margin-top: 9px;
  color: #e1b75b;
  font-size: 12px;
  letter-spacing: 3px;
}

.items-page .arsenal-header h2 {
  margin: 3px 0 4px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffe39a;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1;
  text-shadow: 0 2px #080f09, 0 0 13px rgba(255,207,91,.2);
}

.arsenal-header .lead {
  margin: 0;
  color: #ead9b4;
  font-size: 16px;
}

.arsenal-header .support-language-switch,
.arsenal-header .support-language-switch a {
  color: #f3d78f;
}

.arsenal-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) minmax(155px, 1fr) minmax(145px, 1fr);
  gap: 12px;
  padding: 13px;
  border: 2px solid #3b2111;
  outline: 1px solid #a47738;
  background: linear-gradient(180deg, rgba(73,43,20,.96), rgba(42,24,13,.98));
  box-shadow: inset 0 0 0 3px rgba(226,183,97,.08), 0 3px 8px rgba(36,18,8,.25);
}

.arsenal-tools label {
  display: block;
  margin-bottom: 5px;
  color: #f0d89b;
  font-size: 14px;
  font-weight: 700;
}

.arsenal-input-wrap {
  position: relative;
}

.arsenal-input-wrap > span {
  position: absolute;
  left: 11px;
  top: 50%;
  color: #795221;
  font-size: 22px;
  font-weight: 900;
  transform: translateY(-52%);
  pointer-events: none;
}

.arsenal-tools input,
.arsenal-tools select {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  border: 1px solid #110b07;
  border-radius: 2px;
  outline: 1px solid #9d763d;
  background: linear-gradient(#f1e1bd, #d7bd8d);
  color: #28150b;
  font: 600 16px Georgia, "Times New Roman", serif;
  box-shadow: inset 0 2px 5px rgba(62,35,14,.18);
}

.arsenal-tools input {
  padding: 8px 12px 8px 39px;
}

.arsenal-tools select {
  padding: 8px 32px 8px 10px;
  cursor: pointer;
}

.arsenal-tools input:focus,
.arsenal-tools select:focus {
  outline: 2px solid #e2b858;
  box-shadow: 0 0 0 3px rgba(226,184,88,.2), inset 0 2px 5px rgba(62,35,14,.18);
}

.arsenal-rarity-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 11px 0;
}

.rarity-chip {
  position: relative;
  min-height: 34px;
  padding: 6px 11px 6px 24px;
  border: 1px solid #382012;
  border-radius: 2px;
  background: linear-gradient(#ead4ab, #c7a674);
  color: #321a0d;
  font: 700 13px Georgia, "Times New Roman", serif;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.4), 0 2px 4px rgba(52,27,10,.18);
}

.rarity-chip::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #888;
  box-shadow: 0 0 5px currentColor;
  transform: translateY(-50%);
}

.rarity-chip-uncommon::before { background: #2abe5f; }
.rarity-chip-rare::before { background: #3791ff; }
.rarity-chip-epic::before { background: #a55aff; }
.rarity-chip-legendary::before { background: #ffdc41; }
.rarity-chip-mythic::before { background: #ff8723; }

.rarity-chip:hover,
.rarity-chip.is-active,
.arsenal-quick-nav button:hover,
.arsenal-quick-nav button.is-active {
  color: #ffe6a3;
  background: linear-gradient(#2e6237, #12361d);
  border-color: #b99147;
}

.arsenal-quick-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 11px;
}

.arsenal-quick-nav button {
  min-height: 39px;
  padding: 7px 8px;
  border: 1px solid #452612;
  border-radius: 2px;
  background: linear-gradient(#e4cca1, #bc9867);
  color: #3a1d0c;
  font: 700 14px Georgia, "Times New Roman", serif;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 2px 4px rgba(48,25,10,.17);
}

.arsenal-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  padding: 8px 12px;
  border: 1px solid #815b2d;
  background: rgba(239,218,177,.62);
  color: #42220f;
  font-size: 15px;
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}

.arsenal-summary-crest {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid #6e451b;
  border-radius: 50%;
  background: linear-gradient(#f3d889, #bc812b);
}

#itemCatalogReset {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid #573019;
  background: #55301b;
  color: #ffe2a0;
  font: 700 13px Georgia, "Times New Roman", serif;
  cursor: pointer;
}

.items-page .items-page-subtitle {
  scroll-margin-top: 16px;
  margin: 20px 0 12px;
  padding: 10px 13px;
  border: 2px solid #26150c;
  outline: 1px solid #af8138;
  background: linear-gradient(90deg, #173c21, #2b6235 50%, #173c21);
  color: #ffe29a;
  font-size: 25px;
  text-shadow: 1px 2px #07100a;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 3px 7px rgba(46,24,10,.24);
}

.items-page .items-section,
.items-page .shop-price-group {
  scroll-margin-top: 16px;
  border: 2px solid #2c190e;
  border-radius: 2px;
  outline: 1px solid #8f6934;
  background:
    radial-gradient(circle at 75% 15%, rgba(255,235,176,.26), transparent 30%),
    linear-gradient(145deg, #d8c198, #b99664);
  box-shadow: inset 0 0 0 3px rgba(255,241,200,.14), inset 0 0 18px rgba(48,28,12,.17), 0 4px 9px rgba(0,0,0,.22);
}

.items-page .arsenal-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -14px -14px 13px;
  padding: 10px 11px 9px 14px;
  border-bottom: 2px ridge #a17a3e;
  background: linear-gradient(90deg, #173d22, #285b32 58%, #173d22);
  color: #ffe39a;
  font-size: 21px;
  text-align: left;
  text-shadow: 1px 1px #050b07;
}

.items-page .shop-price-group > .arsenal-section-heading {
  margin: 0;
  background: linear-gradient(90deg, #15284c, #28518c 55%, #15284c);
  border-bottom-color: #c5a14f;
}

.arsenal-section-toggle {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid #0b150d;
  border-radius: 2px;
  background: linear-gradient(#e0bd67, #9d6b25);
  color: #2d1709;
  font: 900 20px/1 Georgia, serif;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}

.arsenal-section-collapsed > :not(.arsenal-section-heading) {
  display: none !important;
}

.items-page .item-slot,
.items-page .items-list-entry,
.items-page .item-variant-row {
  position: relative;
  border-color: #74522c;
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(239,219,180,.92), rgba(200,167,116,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 2px 4px rgba(47,25,10,.17);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.items-page .item-clickable:hover,
.items-page .item-clickable:focus-visible {
  z-index: 2;
  border-color: #c99c48;
  transform: translateY(-2px);
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 5px 9px rgba(48,24,9,.27);
}

.items-page .item-slot img,
.items-page .items-list-entry img,
.items-page .item-variant-row img {
  filter: drop-shadow(0 3px 2px rgba(35,17,7,.35));
}

.items-page .catalog-rarity-uncommon {
  border-color: #187a3a !important;
  background: linear-gradient(145deg, #50d77d, #20994c) !important;
}

.items-page .catalog-rarity-rare {
  border-color: #185cad !important;
  background: linear-gradient(145deg, #67b2ff, #287bdc) !important;
}

.items-page .catalog-rarity-epic {
  border-color: #6b2bb9 !important;
  background: linear-gradient(145deg, #bf83ff, #7d3bd0) !important;
}

.items-page .catalog-rarity-legendary {
  border-color: #ad7d00 !important;
  background: linear-gradient(145deg, #ffe979, #e8b827) !important;
}

.items-page .catalog-rarity-mythic {
  border-color: #b64c09 !important;
  background: linear-gradient(145deg, #ffac59, #e76518) !important;
}

/* A raridade pertence ao slot inteiro; a arte fica limpa, na frente da cor. */
.items-page .catalog-rarity-uncommon img,
.items-page .catalog-rarity-rare img,
.items-page .catalog-rarity-epic img,
.items-page .catalog-rarity-legendary img,
.items-page .catalog-rarity-mythic img {
  position: relative;
  z-index: 1;
  border-color: transparent !important;
  background: transparent !important;
  filter: drop-shadow(0 3px 2px rgba(20, 10, 4, .48));
}

.items-page .catalog-rarity-uncommon .rarity-name-uncommon,
.items-page .catalog-rarity-legendary .rarity-name-legendary {
  color: #2d1709 !important;
  text-shadow: 0 1px rgba(255, 255, 255, .35);
}

.items-page .catalog-rarity-rare .rarity-name-rare,
.items-page .catalog-rarity-epic .rarity-name-epic,
.items-page .catalog-rarity-mythic .rarity-name-mythic {
  color: #fffaf0 !important;
  text-shadow: 0 1px 2px rgba(34, 15, 5, .72);
}

.items-page .shop-price-group {
  margin-top: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(62,151,255,.14), transparent 38%),
    linear-gradient(145deg, #bfaa80, #94784d);
}

.items-page .shop-items-grid {
  padding: 13px;
}

.items-page .shop-item-card {
  border: 2px solid #283a58;
  outline: 1px solid #a68a4f;
  background: linear-gradient(155deg, #e0d0ab, #aa936b);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 4px 9px rgba(27,35,57,.24);
}

.items-page .shop-item-card::after {
  content: "♦";
  position: absolute;
  right: 8px;
  bottom: 5px;
  color: rgba(42,105,176,.28);
  font-size: 22px;
  pointer-events: none;
}

.arsenal-empty {
  margin: 18px 0 4px;
  padding: 28px 18px;
  border: 2px dashed #79562d;
  background: rgba(226,203,161,.6);
  color: #45240f;
  text-align: center;
}

.arsenal-empty[hidden],
.items-page [hidden] {
  display: none !important;
}

.arsenal-empty > span {
  display: block;
  color: #8a642e;
  font-size: 36px;
}

.arsenal-empty strong {
  display: block;
  margin-top: 4px;
  font-size: 21px;
}

.arsenal-empty p {
  margin: 5px 0 0;
}

@media (max-width: 900px) {
  .arsenal-tools {
    grid-template-columns: 1fr 1fr;
  }

  .arsenal-search-field {
    grid-column: 1 / -1;
  }

  .arsenal-quick-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .items-page {
    padding: 11px;
  }

  .arsenal-tools,
  .arsenal-quick-nav {
    grid-template-columns: 1fr;
  }

  .arsenal-search-field {
    grid-column: auto;
  }

  .arsenal-rarity-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rarity-chip {
    width: 100%;
  }

  .arsenal-summary {
    flex-wrap: wrap;
  }

  #itemCatalogReset {
    width: 100%;
    margin: 2px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .items-page .item-slot,
  .items-page .items-list-entry,
  .items-page .item-variant-row {
    transition: none;
  }
}