/* ============================================================
   Upgrades tab — steel tool cabinet with drawer-style upgrades.
   ============================================================ */

/* ===== outer stage ===== */
.upgrades-stage {
  background: linear-gradient(180deg, #475360 0%, #353e48 100%);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  min-height: 60vh;
}

/* ===== cabinet ===== */
.upgrades-stage .cabinet {
  background: linear-gradient(180deg, #d8dde4 0%, #b8c0cc 100%);
  border: 4px solid var(--bg-inset);
  border-radius: var(--r-md);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.55),
    inset 0 1px 2px rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden;
}

/* corner rivets */
.upgrades-stage .cabinet::before,
.upgrades-stage .cabinet::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #76808e 60%, var(--bg-inset) 100%);
  box-shadow: 0 0 0 1px var(--bg-inset);
  z-index: 2;
}
.upgrades-stage .cabinet::before { top: 5px; left: 5px; }
.upgrades-stage .cabinet::after  { top: 5px; right: 5px; }
.upgrades-stage .cabinet .rivet-bl,
.upgrades-stage .cabinet .rivet-br {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #76808e 60%, var(--bg-inset) 100%);
  box-shadow: 0 0 0 1px var(--bg-inset);
  z-index: 2;
}
.upgrades-stage .cabinet .rivet-bl { bottom: 5px; left: 5px; }
.upgrades-stage .cabinet .rivet-br { bottom: 5px; right: 5px; }

/* nameplate */
.cab-plate {
  background: linear-gradient(180deg, #4a5664, #303a48);
  color: #cbd4e1;
  padding: var(--sp-2) var(--sp-4);
  font-family: "Segoe UI", sans-serif;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 2px solid var(--bg-inset);
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}

/* ===== shelf strip ===== */
.shelf-strip {
  background: linear-gradient(180deg, #6a7384, #4a5664);
  color: #fff;
  font-family: "Segoe UI", sans-serif;
  font-size: var(--fs-micro);
  letter-spacing: 3px;
  font-weight: var(--fw-bold);
  padding: 5px var(--sp-3);
  text-transform: uppercase;
  border-top: 1px solid #76808e;
  border-bottom: 1px solid var(--bg-inset);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shelf-strip .strip-count {
  color: var(--money);
  font-weight: var(--fw-bold);
}
.shelf-strip .strip-count.unlocked {
  color: #82d984;
}

/* ===== shelf grid ===== */
.shelf {
  background: linear-gradient(180deg, #d8dde4, #b8c0cc);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}
.shelf.lv2 { grid-template-columns: repeat(4, 1fr); }
/* Lv 3 shelf gets a slightly warmer tint to feel like the "top shelf"
   and uses a 3-column grid since the master-tier set is smaller. */
.shelf.lv3 {
  grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(180deg, #e6dac4, #cfbf9c);
}

@media (max-width: 1100px) {
  .shelf { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .shelf, .shelf.lv2, .shelf.lv3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .shelf, .shelf.lv2, .shelf.lv3 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Achievements panel ===== */
.achievements-panel {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ap-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-3);
}
.ap-header h3 { margin: 0; font-size: 18px; color: var(--text); }
.ap-progress { color: var(--text-dim); font-size: var(--fs-sm); }

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 1100px) { .achievements-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px)  { .achievements-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .achievements-grid { grid-template-columns: repeat(3, 1fr); } }

.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: help;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.achievement-badge:hover { transform: translateY(-1px); }
.achievement-badge .ab-icon { font-size: 24px; line-height: 1; }
.achievement-badge .ab-name { font-size: 11px; color: var(--text); font-weight: var(--fw-semi); line-height: 1.2; }

.achievement-badge.locked {
  opacity: 0.4;
  filter: grayscale(1);
}
.achievement-badge.unlocked {
  background: rgba(255, 200, 80, 0.10);
  border-color: rgba(255, 200, 80, 0.45);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.18);
}
.achievement-badge.unlocked .ab-name { color: #ffe0a3; }

/* ===== drawer ===== */
.shelf .drawer {
  background: linear-gradient(180deg, #c0c9d4 0%, #98a3b0 100%);
  border: 1px solid #5a6470;
  border-radius: 3px;
  padding: var(--sp-2) var(--sp-2) 18px var(--sp-2);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    0 2px 3px rgba(0,0,0,0.3);
  color: var(--bg-inset);
  font-family: "Segoe UI", sans-serif;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  outline: none;
}
.shelf .drawer:hover,
.shelf .drawer:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    0 6px 10px rgba(0,0,0,0.5);
}
.shelf .drawer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Branched-tree affordances. "Next in line" — an unowned upgrade whose
   parent IS owned — gets a subtle accent ring to draw the player's eye
   to their natural next investment. */
.shelf .drawer.next-in-line {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    0 2px 3px rgba(0,0,0,0.3),
    0 0 0 2px rgba(79, 195, 247, 0.75),
    0 0 14px rgba(79, 195, 247, 0.45);
}
.shelf .drawer.next-in-line:hover,
.shelf .drawer.next-in-line:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    0 6px 10px rgba(0,0,0,0.5),
    0 0 0 2px rgba(79, 195, 247, 0.9),
    0 0 22px rgba(79, 195, 247, 0.65);
}

/* "↑ Parent Name" badge on cards with a parent upgrade. Sits between
   the upgrade name and its description as a small lineage hint. */
.shelf .drawer .parent-of {
  display: inline-block;
  margin: 2px 0 4px;
  padding: 1px 6px;
  background: rgba(60, 80, 110, 0.18);
  border: 1px solid rgba(60, 80, 110, 0.32);
  border-radius: 999px;
  font-size: 10px;
  color: var(--bg-inset);
  opacity: 0.78;
}
/* Non-actionable drawers (already owned, or locked) must not lift on
   hover — the lift reads as "clickable" and they aren't. */
.shelf .drawer.installed:hover,
.shelf .drawer.locked:hover {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    0 2px 3px rgba(0,0,0,0.3);
}

/* drawer pull-handle */
.shelf .drawer::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  background: linear-gradient(180deg, #5a6470, #303a48);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* status LED */
.shelf .drawer .led {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a2a2a;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}

/* state: installed */
.shelf .drawer.installed {
  background: linear-gradient(180deg, #c4d6c4 0%, #95ab95 100%);
  border-color: #4a6a4a;
}
.shelf .drawer.installed .led {
  background: var(--good);
  box-shadow: 0 0 6px var(--good);
  animation: drawer-led-pulse 1.6s ease-in-out infinite;
}
@keyframes drawer-led-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* state: affordable (lv1, can buy) */
.shelf .drawer.affordable .led {
  background: var(--price-tag);
  box-shadow: 0 0 5px var(--price-tag);
}

/* state: locked (lv2 still locked by workshop level) */
.shelf .drawer.locked {
  opacity: 0.55;
  filter: grayscale(0.4);
  cursor: not-allowed;
}
.shelf .drawer.locked .led {
  background: var(--bad);
  box-shadow: 0 0 4px var(--bad);
}

/* state: unaffordable (lv1, can't buy yet) — still interactive: clicking
   gives a "not enough cash" toast, so it keeps the pointer cursor. */

/* drawer text */
.shelf .drawer .name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.15;
  padding-right: 14px;
  color: var(--bg-inset);
}
.shelf .drawer .desc {
  font-size: 10px;
  color: #1c2530;
  margin-top: 5px;
  line-height: 1.35;
  flex: 1;
}
.shelf .drawer .foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dashed rgba(0,0,0,0.15);
}
.shelf .drawer .cost {
  font-size: 13px;
  font-weight: 800;
  color: var(--bg-inset);
  font-family: "Courier New", monospace;
}
.shelf .drawer .tag {
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
}
.shelf .drawer.installed   .tag { background: var(--good);                   color: #fff; }
.shelf .drawer.locked      .tag { background: rgba(232,80,58,0.75);          color: #fff; }
.shelf .drawer.affordable  .tag { background: var(--price-tag);              color: var(--bg-inset); }
.shelf .drawer.unaffordable .tag { background: rgba(0,0,0,0.15);             color: #5a6470; }

.shelf .drawer.affordable:hover .tag,
.shelf .drawer.affordable:focus-visible .tag {
  background: var(--bg-inset);
  color: var(--price-tag);
}