/* ===== V4.02 Character equipment visual overhaul ===== */
#character .character-stage{
  background:
    radial-gradient(circle at 50% 30%,rgba(64,126,76,.22),transparent 28%),
    radial-gradient(circle at 50% 72%,rgba(22,77,55,.15),transparent 35%),
    linear-gradient(180deg,#0d1a12,#08100b 78%)!important;
  border:1px solid #294b36!important;
  border-radius:20px!important;
  overflow:hidden!important;
  padding:10px 7px 14px!important;
  box-shadow:inset 0 0 42px #0007,0 12px 28px #0005!important;
}
#character .equipment-grid{
  grid-template-columns:minmax(105px,.92fr) minmax(190px,1.55fr) minmax(105px,.92fr)!important;
  gap:7px!important;
  align-items:center!important;
}
#character .equip-col{gap:9px!important}

/* Equipment becomes compact RPG cards instead of text columns */
#character .slot{
  min-height:118px!important;
  padding:8px!important;
  border-radius:15px!important;
  overflow:hidden!important;
  cursor:pointer;
  background:
    radial-gradient(circle at 50% -15%,rgba(255,255,255,.045),transparent 38%),
    linear-gradient(155deg,#142119,#09110d)!important;
  border:1px solid #385244!important;
  box-shadow:inset 0 0 22px #0006,0 5px 12px #0004!important;
}
#character .slot:active{transform:scale(.985)}
#character .slot-icon{
  width:37px!important;height:37px!important;
  display:grid!important;place-items:center!important;
  margin:0 0 4px!important;
  border-radius:50%!important;
  border:1px solid #405c4a!important;
  background:#0a120e!important;
  font-size:21px!important;
  box-shadow:inset 0 0 10px #0008!important;
}
#character .slot-label{
  font-size:7px!important;
  letter-spacing:.08em!important;
  color:#81938a!important;
  margin-bottom:3px!important;
}
#character .slot-name{
  font-size:8.5px!important;
  line-height:1.14!important;
  font-weight:1000!important;
  max-height:30px;
  overflow:hidden;
}
#character .slot .tiny{
  margin-top:5px!important;
  font-size:7.5px!important;
  line-height:1.25!important;
  color:#aebbb4!important;
}
#character .slot .set-tag{
  font-size:7px!important;
  margin-top:5px!important;
  padding:3px 5px!important;
}
#character .slot-actions{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:4px!important;
  margin-top:6px!important;
}
#character .slot-actions .mini-btn{
  min-width:0!important;
  padding:5px 4px!important;
  font-size:7px!important;
  border-radius:7px!important;
}

/* Strict rarity identity */
#character .slot.v123-gray{border-color:#59635e!important}
#character .slot.v123-green{
  border-color:#4d9b58!important;
  box-shadow:inset 0 0 22px rgba(65,162,80,.09),0 0 12px rgba(65,162,80,.07)!important;
}
#character .slot.v123-blue{
  border-color:#4b88d4!important;
  box-shadow:inset 0 0 24px rgba(55,124,218,.12),0 0 13px rgba(55,124,218,.10)!important;
}
#character .slot.v123-purple{
  border-color:#9c62e5!important;
  box-shadow:inset 0 0 25px rgba(155,81,232,.14),0 0 15px rgba(155,81,232,.12)!important;
}
#character .slot.v123-orange{
  border-color:#e49c3c!important;
  box-shadow:inset 0 0 26px rgba(234,142,40,.15),0 0 16px rgba(234,142,40,.13)!important;
}
#character .slot.v123-cyan{
  border-color:#37dedb!important;
  box-shadow:inset 0 0 27px rgba(44,229,221,.16),0 0 17px rgba(44,229,221,.14)!important;
  animation:v123MysticItem 2.2s ease-in-out infinite alternate;
}
@keyframes v123MysticItem{to{box-shadow:inset 0 0 29px rgba(44,229,221,.20),0 0 22px rgba(44,229,221,.20)}}

/* Material badges: instantly readable */
.v123-item-effects{display:grid;gap:3px;margin-top:5px}
.v123-effect{
  padding:3px 4px;border-radius:6px;
  font-size:6.8px;line-height:1.18;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v123-gem{border:1px solid #8b6632;background:#24190d;color:#f2c474}
.v123-enchant{border:1px solid #69528b;background:#191225;color:#d5b5ff}
.v123-set{border:1px solid #337a58;background:#0d2117;color:#80dda8}

/* Center hero: give avatar breathing room and stronger hierarchy */
#character .center-hero{
  min-height:430px!important;
  padding:6px 4px 9px!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 50% 32%,rgba(111,213,96,.13),transparent 31%),
    linear-gradient(180deg,rgba(19,42,26,.38),rgba(5,12,8,.20))!important;
}
#character .avatar-scene{
  height:270px!important;
  overflow:visible!important;
}
#character .v41-portrait{
  transform:scale(1.10);
  transform-origin:center bottom;
  filter:drop-shadow(0 17px 14px #0009);
}
#character .center-name{
  font-size:22px!important;
  font-weight:1000!important;
  text-shadow:0 3px 12px #000!important;
}
#character .center-class{
  font-size:10px!important;
  letter-spacing:.10em!important;
  color:#9ed97e!important;
}
#character .level-shield{
  margin-top:8px!important;
  padding:7px 16px!important;
  border-color:#9b7130!important;
  background:linear-gradient(180deg,#2b2111,#151007)!important;
  box-shadow:0 0 14px rgba(224,174,64,.10)!important;
}
#character .level-shield b{font-size:22px!important}
#character .center-xp{max-width:260px!important}

/* Small total equipment strip above the avatar */
.v123-gear-summary{
  display:flex;justify-content:center;gap:5px;flex-wrap:wrap;
  margin:0 auto 7px;padding:5px 6px;
  max-width:270px;
}
.v123-gear-chip{
  padding:4px 6px;border:1px solid #345142;border-radius:999px;
  background:#09130e;color:#aebdb4;font-size:7px;font-weight:900;
}
.v123-gear-chip b{color:#e4f0e8}

/* Tap item for details */
#v123ItemOverlay{
  position:fixed;inset:0;z-index:1000002;
  display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(2,6,4,.84);backdrop-filter:blur(6px);
}
#v123ItemOverlay.show{display:flex}
.v123-detail{
  width:min(92vw,390px);max-height:82vh;overflow:auto;
  padding:16px;border:1px solid #426154;border-radius:19px;
  background:radial-gradient(circle at 50% 0%,rgba(100,220,190,.08),transparent 36%),linear-gradient(180deg,#14211c,#080e0b);
  box-shadow:0 25px 75px #000e;
}
.v123-detail-head{text-align:center}
.v123-detail-icon{font-size:45px}
.v123-detail-name{font-size:16px;font-weight:1000;margin:5px 0}
.v123-detail-rarity{font-size:8px;text-transform:uppercase;letter-spacing:.1em}
.v123-detail-section{margin-top:10px;padding:9px;border:1px solid #30483d;border-radius:10px;background:#0a120e}
.v123-detail-section b{display:block;font-size:8px;color:#8da098;margin-bottom:4px;text-transform:uppercase}
.v123-detail-section div{font-size:9px;line-height:1.45}

/* Phone: preserve avatar width and prevent the current ultra-narrow text columns */
@media(max-width:560px){
  #character .equipment-grid{
    grid-template-columns:minmax(108px,.95fr) minmax(180px,1.48fr) minmax(108px,.95fr)!important;
    gap:5px!important;
  }
  #character .slot{min-height:115px!important;padding:7px!important}
  #character .slot-name{font-size:8px!important}
  #character .center-hero{min-height:420px!important}
  #character .avatar-scene{height:260px!important}
}