.equipment-modal {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 24, 38, .74);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.equipment-modal.open { opacity: 1; pointer-events: auto; }

.equipment-card {
  width: min(100%, 470px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 21px 17px 17px;
  border: 3px solid #17253b;
  border-radius: 18px;
  background: #fff7df;
  color: #173345;
  box-shadow: 0 8px 0 #111724, 0 24px 50px rgba(0, 0, 0, .3);
  transform: translateY(12px);
  transition: transform .2s;
}

.equipment-modal.open .equipment-card { transform: translateY(0); }

.equipment-wallet {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 15px 0 10px;
  padding: 10px 12px;
  border: 2px solid #bdd4d0;
  border-radius: 10px;
  background: #e4f0eb;
  color: #69818c;
  font: 800 9px 'DM Mono', monospace;
  letter-spacing: .05em;
}

.equipment-wallet strong { margin-left: 4px; color: #173345; font-size: 12px; }
.equipment-help { margin: 0 0 14px; color: #69818c; font-size: 12px; line-height: 1.45; }
.equipment-list { display: grid; gap: 10px; }

.equipment-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 2px solid #d7c9a9;
  border-radius: 12px;
  background: #fffdf2;
}

.equipment-item.at-cap { border-color: #bdd4d0; background: #f1f6ea; }
.equipment-item-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-size: 22px; }
.equipment-item-icon.rod-icon { background: #f8d9bc; color: #b75e47; }
.equipment-item-icon.lure-icon { background: #f8e4bd; color: #b9783d; }
.equipment-item-icon.reel-icon { background: #e1d7ef; color: #7b58a8; }
.equipment-item-copy { display: grid; min-width: 0; gap: 2px; }
.equipment-item-copy strong { font-size: 13px; }
.equipment-item-copy small { color: #69818c; font-size: 10px; line-height: 1.25; }
.equipment-item-effect { color: #2c9ca4 !important; font: 800 9px 'DM Mono', monospace; }
.equipment-level { color: #ef795c; font: 800 9px 'DM Mono', monospace; letter-spacing: .04em; }
.equipment-next { color: #69818c; font-size: 9px !important; }

.equipment-upgrade {
  min-width: 78px;
  padding: 8px 6px;
  border: 2px solid #17253b;
  border-radius: 9px;
  background: linear-gradient(#ffc94f 0 48%, #f39a27 49%);
  color: #17253b;
  cursor: pointer;
  font: 800 10px 'DM Mono', monospace;
  box-shadow: 0 3px 0 #17253b;
}

.equipment-upgrade small { display: block; margin-top: 3px; color: #4f4837; font: 800 8px Manrope; letter-spacing: .04em; }
.equipment-upgrade:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #17253b; }
.equipment-upgrade:disabled { cursor: not-allowed; opacity: .58; filter: saturate(.55); }

.loadout-effect { display: block; color: #2c9ca4 !important; font-weight: 700; }
.lure-icon { background: #f8e4bd; color: #b9783d; }
.reel-icon { background: #e1d7ef; color: #7b58a8; }

body.dark-mode .equipment-card {
  border-color: #101827;
  background: #1d2636;
  color: #f3f1e7;
  box-shadow: 0 8px 0 #0d1320, 0 24px 50px rgba(0, 0, 0, .45);
}

body.dark-mode .equipment-wallet { background: #253e43; border-color: #4e7275; color: #b5c3ca; }
body.dark-mode .equipment-wallet strong { color: #f3f1e7; }
body.dark-mode .equipment-help,
body.dark-mode .equipment-item-copy small,
body.dark-mode .equipment-next { color: #adbac2 !important; }
body.dark-mode .equipment-item { background: #283447; border-color: #4a5a70; }
body.dark-mode .equipment-item.at-cap { background: #253e43; border-color: #4e7275; }
body.dark-mode .equipment-item-effect,
body.dark-mode .loadout-effect { color: #72d8d1 !important; }
body.dark-mode .equipment-upgrade { border-color: #101827; box-shadow: 0 3px 0 #0d1320; }

@media (max-width: 420px) {
  .equipment-modal { padding: 10px; }
  .equipment-card { max-height: calc(100vh - 20px); padding: 18px 13px 14px; }
  .equipment-item { grid-template-columns: 38px 1fr; }
  .equipment-item-icon { width: 36px; height: 36px; }
  .equipment-upgrade { grid-column: 2; justify-self: stretch; width: 100%; }
}