/* ===== UPGRADE CARD UI ===== */
#upgrade-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.92);
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:60;
  backdrop-filter:blur(4px);
}
#upgrade-level-text {
  font-size:clamp(9px,1.8vw,14px);
  color:var(--white);
  text-shadow:2px 2px 0 #000;
  margin-bottom:32px;
  letter-spacing:2px;
  text-align:center;
}
#upgrade-cards { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }

.upgrade-card {
  width:192px;
  border:2px solid var(--g1);
  background:var(--bg1);
  padding:22px 16px 18px;
  cursor:pointer;
  transition:all 0.16s ease;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  --card-color:#ffffff;
  text-align:center;
  position:relative;
}
.upgrade-card::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--card-color) 8%,transparent) 0%,transparent 70%);
  pointer-events:none;
}
.upgrade-card:hover {
  border-color:var(--card-color);
  background:var(--bg2);
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 12px 40px color-mix(in srgb,var(--card-color) 35%,transparent),
             0 0 0 1px color-mix(in srgb,var(--card-color) 20%,transparent);
}
.upgrade-card:active { transform:translateY(-4px) scale(1.01); }

.upg-title {
  font-size:clamp(8px,1.4vw,11px);
  margin:10px 0 4px;
  letter-spacing:1px;
  text-shadow:0 0 8px var(--card-color);
}
.upg-skill-tag {
  font-size:6px;
  margin-bottom:10px;
  letter-spacing:2px;
  opacity:0.8;
}
.upg-desc {
  font-family:'Rajdhani',sans-serif;
  font-size:13px; color:var(--g3);
  line-height:1.7; font-weight:600;
}

/* Skill level badge */
.sk-lv {
  font-size:5px;
  color:var(--sc);
  letter-spacing:1px;
  opacity:0.8;
}