/* ===== V4.02 Premium Klassen-Skills ===== */
#character .card:has(#skillTree){
  position:relative;
  overflow:hidden;
  border:1px solid #35563b!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 85% 0%,rgba(119,233,80,.10),transparent 28%),
    radial-gradient(circle at 8% 80%,rgba(40,115,65,.09),transparent 32%),
    linear-gradient(155deg,#101d15,#07100b)!important;
  box-shadow:inset 0 0 45px #0007,0 12px 30px #0005!important;
}
#character .card:has(#skillTree):before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.32;
  background-image:
    radial-gradient(circle at 12% 18%,#8de56b 0 1px,transparent 1.5px),
    radial-gradient(circle at 79% 24%,#d5a83f 0 1px,transparent 1.5px),
    radial-gradient(circle at 65% 71%,#6ddf98 0 1px,transparent 1.5px);
  background-size:83px 79px,107px 103px,127px 119px;
}
#character .card:has(#skillTree) .section-title{
  position:relative;z-index:1;
  min-height:92px;
  padding:7px 4px 15px!important;
  border-bottom:1px solid #29432f!important;
}
#character .card:has(#skillTree) .section-title h2{
  font-size:22px!important;
  letter-spacing:.015em;
  text-shadow:0 0 18px rgba(135,236,96,.14);
}
#character .skill-point-pill{
  position:relative;
  min-width:112px;
  padding:10px 12px 10px 43px!important;
  border:1px solid #769d3e!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 22% 50%,rgba(181,83,255,.23),transparent 30%),
    linear-gradient(145deg,#142018,#09110d)!important;
  box-shadow:0 0 18px rgba(139,80,211,.11),inset 0 0 18px #0005!important;
}
#character .skill-point-pill:before{
  content:"✦";
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:#d383ff;font-size:25px;
  text-shadow:0 0 10px #ae50ff,0 0 20px #7e37c9;
}
#character .skill-point-pill b{
  color:#f2f6ed!important;
  font-size:19px!important;
}

/* One strong full-width talent card per row */
#character .skill-tree{
  position:relative;z-index:1;
  grid-template-columns:1fr!important;
  gap:12px!important;
}
#character .v125-skill{
  min-height:225px!important;
  padding:14px 15px!important;
  border-radius:18px!important;
  overflow:hidden;
}
#character .v125-skill:after{
  content:"";
  position:absolute;
  width:180px;height:180px;
  right:-42px;top:30px;
  opacity:.08;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,currentColor 0,transparent 68%);
}
#character .v125-skill.active{
  color:#d0a7ff;
  border-color:#c79838!important;
  background:
    radial-gradient(circle at 88% 45%,rgba(189,129,28,.09),transparent 31%),
    linear-gradient(145deg,#211b0d,#0d110b)!important;
  box-shadow:inset 0 0 30px rgba(208,157,44,.07),0 0 16px rgba(226,168,46,.09)!important;
}
#character .v125-skill.passive{
  color:#72e885;
  border-color:#4fc961!important;
  background:
    radial-gradient(circle at 88% 45%,rgba(60,194,81,.10),transparent 31%),
    linear-gradient(145deg,#102016,#09120d)!important;
  box-shadow:inset 0 0 30px rgba(67,199,85,.07),0 0 16px rgba(61,207,80,.08)!important;
}
#character .v125-skill.special{
  color:#ff8c37;
  border-color:#df6c25!important;
  background:
    radial-gradient(circle at 88% 45%,rgba(231,91,24,.11),transparent 31%),
    linear-gradient(145deg,#21140a,#100e09)!important;
  box-shadow:inset 0 0 30px rgba(226,92,25,.08),0 0 16px rgba(225,91,24,.08)!important;
}
#character .v125-skill.maxed{
  border-width:1px!important;
}
#character .v125-skill-head{
  margin-top:11px!important;
  gap:12px!important;
}
#character .v125-skill-icon{
  width:58px!important;height:58px!important;flex-basis:58px!important;
  font-size:32px!important;border-radius:15px!important;
  background:linear-gradient(145deg,#101912,#060b08)!important;
  box-shadow:inset 0 0 17px #0009,0 5px 14px #0005!important;
}
#character .active .v125-skill-icon{border-color:#b77d29!important}
#character .passive .v125-skill-icon{border-color:#4b9f4d!important}
#character .special .v125-skill-icon{border-color:#b45b25!important}
#character .v125-skill-name{
  color:#f5f7f3!important;
  font-size:16px!important;
}
#character .v125-skill-rank{
  font-size:9px!important;
  color:#86dc61!important;
}
#character .v125-skill-desc{
  max-width:78%;
  min-height:50px!important;
  margin-top:12px!important;
  font-size:8.5px!important;
  line-height:1.5!important;
  color:#a9b3ac!important;
}
#character .active .v125-skill-desc b{color:#d3a8ef!important}
#character .passive .v125-skill-desc b{color:#82dc70!important}
#character .special .v125-skill-desc b{color:#f28c46!important}

/* MAX badge */
#character .v125-max-badge{
  top:13px!important;right:14px!important;
  padding:5px 10px!important;
  border-color:#d7a72e!important;
  background:linear-gradient(180deg,#211909,#0f0d07)!important;
  color:#ffd85a!important;
  font-size:7px!important;
  box-shadow:0 0 11px rgba(245,192,50,.12)!important;
}

/* Five illuminated talent segments */
#character .v125-skill-ranks{
  gap:7px!important;
  margin:13px 0 11px!important;
}
#character .v125-rank{
  height:9px!important;
  border-radius:999px!important;
}
#character .v125-rank.on{
  border-color:#e0b140!important;
  background:linear-gradient(90deg,#c88a2c,#ffd65c)!important;
  box-shadow:0 0 8px rgba(236,181,52,.15)!important;
}
#character .v125-skill-state{
  font-size:8px!important;
  font-weight:1000!important;
}
#character .v125-skill.maxed .v125-skill-state{
  color:#f0c64e!important;
}
#character .v125-skill .btn{
  min-width:92px;
  border-radius:999px!important;
  padding:8px 12px!important;
}
#character .v125-skill .btn:disabled{
  background:linear-gradient(180deg,#20241f,#111411)!important;
  border-color:#343a34!important;
  color:#6e756f!important;
  opacity:1!important;
}

/* Future locked talents should look deliberately mysterious */
#character .v125-skill.locked{
  border-style:dashed!important;
  opacity:.62!important;
  background:linear-gradient(145deg,#121713,#090d0a)!important;
}
#character .v125-lock-watermark{
  opacity:.14!important;
  font-size:54px!important;
  right:22px!important;
  bottom:22px!important;
}

/* Footer becomes a clean information bar */
#character .v125-skill-info{
  position:relative;
  padding:12px 14px 12px 40px!important;
  border-color:#315c39!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#0d1b11,#08110b)!important;
  font-size:8px!important;
}
#character .v125-skill-info:before{
  content:"ⓘ";
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:#7bdc58;font-size:19px;
}

/* Decorative class mark on maxed skills */
#character .v125-skill.maxed .v125-skill-bottom:before{
  content:"★ MAXIMAL";
  color:#e9bd46;
  font-size:8px;
  font-weight:1000;
  margin-right:auto;
}
#character .v125-skill.maxed .v125-skill-state{display:none}

@media(max-width:560px){
  #character .card:has(#skillTree){padding:12px!important}
  #character .card:has(#skillTree) .section-title{min-height:86px}
  #character .card:has(#skillTree) .section-title h2{font-size:19px!important}
  #character .skill-point-pill{min-width:105px;padding-left:39px!important}
  #character .v125-skill{min-height:210px!important;padding:12px!important}
  #character .v125-skill-icon{
    width:52px!important;height:52px!important;flex-basis:52px!important;font-size:29px!important;
  }
  #character .v125-skill-name{font-size:14px!important}
  #character .v125-skill-desc{max-width:82%;font-size:7.8px!important}
}