/* Final visual-only pass: deeper Grow-Legends chamber, cleaner header ornament,
   more recessed empty slots and slightly denser cards. No material logic changes. */

/* Remove the loose emoji leaves from the header and replace them with integrated corner ornaments. */
#character #v546MaterialsHeader::before,
#character #v546MaterialsHeader::after{
  content:''!important;
  top:12px!important;
  width:24px!important;
  height:24px!important;
  opacity:.72!important;
  filter:none!important;
  background:
    linear-gradient(135deg,transparent 0 39%,#587344 40% 45%,transparent 46%),
    linear-gradient(45deg,transparent 0 43%,#315b35 44% 49%,transparent 50%),
    radial-gradient(ellipse at 35% 64%,#376b39 0 16%,transparent 17%),
    radial-gradient(ellipse at 62% 38%,#4b8044 0 14%,transparent 15%)!important;
  border:0!important;
}
#character #v546MaterialsHeader::before{left:12px!important;transform:rotate(-8deg)!important}
#character #v546MaterialsHeader::after{right:12px!important;transform:scaleX(-1) rotate(-8deg)!important}

/* Dark workshop / grow-chamber texture behind the collection. */
#character #v030Materials.v546-material-card{
  background:
    radial-gradient(circle at 10% 18%,rgba(211,145,63,.10),transparent 21%),
    radial-gradient(circle at 88% 23%,rgba(211,145,63,.08),transparent 24%),
    radial-gradient(ellipse at 50% 56%,rgba(126,70,27,.10),transparent 38%),
    repeating-linear-gradient(90deg,rgba(115,72,35,.045) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 28px),
    linear-gradient(180deg,#4b2a14 0%,#2b170b 68%,#211108 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(214,164,78,.09),
    inset 0 18px 34px rgba(120,67,26,.10),
    inset 0 -28px 42px rgba(0,0,0,.33),
    0 6px 16px rgba(0,0,0,.26)!important;
}
#character #v030Materials.v546-material-card::before{
  opacity:.20!important;
  background-image:
    radial-gradient(ellipse at 12% 14%,rgba(74,139,56,.50) 0 1px,transparent 2px),
    radial-gradient(ellipse at 82% 20%,rgba(78,145,58,.44) 0 1px,transparent 2px),
    radial-gradient(ellipse at 42% 72%,rgba(69,127,53,.38) 0 1px,transparent 2px),
    radial-gradient(ellipse at 67% 84%,rgba(66,124,49,.32) 0 1px,transparent 2px)!important;
  background-size:24px 34px,32px 42px,38px 52px,46px 58px!important;
}
#character #v030Materials.v546-material-card::after{
  height:64px!important;
  opacity:.46!important;
  background:
    linear-gradient(180deg,transparent 0%,rgba(52,31,16,.16) 18%,rgba(73,43,20,.42) 20%,rgba(39,23,12,.66) 100%),
    repeating-linear-gradient(90deg,rgba(144,91,43,.13) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(0deg,rgba(255,214,139,.035) 0 1px,transparent 1px 17px)!important;
  border-top:1px solid rgba(160,108,51,.30)!important;
  box-shadow:inset 0 8px 14px rgba(0,0,0,.18)!important;
}

/* Material cards: keep readable but shave off unnecessary vertical height. */
#character .v546-material-grid{
  gap:6px!important;
}
#character .v546-material-item,
#character .v547-empty-slot{
  min-height:138px!important;
}
#character .v546-material-item{
  padding:7px 7px 7px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.028),transparent 23%),
    radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--q) 14%,transparent),transparent 33%),
    linear-gradient(160deg,#432512 0%,#241208 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.36),
    inset 0 0 18px rgba(0,0,0,.44),
    0 0 11px color-mix(in srgb,var(--q) 13%,transparent),
    0 3px 8px rgba(0,0,0,.25)!important;
}
#character .v546-material-art{
  width:47px!important;
  height:47px!important;
  margin:3px auto 4px!important;
}
#character .v546-material-art img{
  width:39px!important;height:39px!important;max-width:39px!important;max-height:39px!important;
}
#character .v546-material-name{min-height:17px!important;font-size:6.3px!important}
#character .v546-rarity-badge{margin-top:2px!important;padding:3px 6px!important;font-size:5px!important}
#character .v546-material-bonus{min-height:24px!important;margin:3px 0 4px!important;padding:4px 5px!important;font-size:5.25px!important}
#character .v546-material-item .v546-use{min-height:26px!important;padding:4px 5px!important;font-size:5.25px!important}

/* Empty slots should feel carved into the panel, not like simple placeholders. */
#character .v547-empty-slot{
  padding:7px 5px!important;
  gap:5px!important;
  border:1px solid #56634f!important;
  border-radius:12px!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(150,91,42,.13),transparent 30%),
    linear-gradient(135deg,rgba(151,116,63,.035),transparent 30%),
    linear-gradient(155deg,#3f2311 0%,#211108 100%)!important;
  box-shadow:
    inset 0 0 0 2px rgba(3,8,5,.62),
    inset 0 0 24px rgba(0,0,0,.66),
    inset 0 8px 14px rgba(117,66,27,.07),
    0 2px 7px rgba(0,0,0,.24)!important;
}
#character .v547-empty-slot::before,
#character .v547-empty-slot::after{
  width:18px!important;
  height:18px!important;
  opacity:.72!important;
}
#character .v547-empty-slot::before{
  left:6px!important;top:6px!important;
  border-left:2px solid #66745e!important;
  border-top:2px solid #66745e!important;
}
#character .v547-empty-slot::after{
  right:6px!important;bottom:6px!important;
  border-right:2px solid #66745e!important;
  border-bottom:2px solid #66745e!important;
}
#character .v547-slot-watermark{
  bottom:7px!important;
  transform:translateX(-50%) scale(1.28)!important;
  opacity:.045!important;
  font-size:32px!important;
}
#character .v547-slot-plus{
  width:31px!important;
  height:31px!important;
  border:1px solid #6a7d66!important;
  background:radial-gradient(circle at 50% 38%,rgba(154,94,45,.12),transparent 52%),rgba(47,26,13,.90)!important;
  color:#9aab96!important;
  font-size:18px!important;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.34),inset 0 0 11px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.24)!important;
}
#character .v547-slot-label{
  color:#8b9a88!important;
  font-size:5.1px!important;
  letter-spacing:.015em!important;
}

/* Auto-socket stays compact and closer to the material inventory. */
#character #v480MaterialAutoBar{
  padding:6px 9px!important;
  gap:5px!important;
}
#character #v480MaterialAutoBar .v480-auto-copy b{font-size:8.9px!important}
#character #v480MaterialAutoBar .v480-auto-copy span{margin-top:2px!important;font-size:6px!important}
#character #v480MaterialAutoBar .v480-auto-btn{min-height:30px!important;padding:5px 9px!important;font-size:6.8px!important}

@media(max-width:390px){
  #character .v546-material-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  #character .v546-material-item,
  #character .v547-empty-slot{min-height:132px!important}
  #character .v546-material-art{width:44px!important;height:44px!important}
  #character .v546-material-art img{width:36px!important;height:36px!important;max-width:36px!important;max-height:36px!important}
  #character .v546-material-name{font-size:5.8px!important}
  #character .v546-material-bonus{font-size:4.9px!important;min-height:22px!important}
  #character .v546-material-item .v546-use{font-size:4.9px!important;min-height:24px!important}
  #character .v547-empty-slot::before,
  #character .v547-empty-slot::after{width:15px!important;height:15px!important}
  #character .v547-slot-plus{width:29px!important;height:29px!important;font-size:17px!important}
}