/* ===== V4.02 Bild-1 Attribute & Klassen-Skills ===== */

/* Stats area becomes a proper RPG panel */
#character .char-bottom{
  padding:14px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(91,205,77,.08),transparent 35%),
    linear-gradient(180deg,#0b140e,#07100a)!important;
  border-top:1px solid #2c4933!important;
}
#character .combat-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
  margin-bottom:13px!important;
}
#character .combat-box{
  min-height:82px!important;
  position:relative;
  overflow:hidden;
  padding:12px 12px 11px 56px!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#132019,#09110d)!important;
  border:1px solid #36513d!important;
  box-shadow:inset 0 0 24px #0006,0 6px 16px #0004!important;
}
#character .combat-box:before{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#0a120e;border:1px solid #49664e;
  font-size:21px;
}
#character .combat-box:first-child:before{content:"❤️";box-shadow:0 0 14px rgba(255,82,104,.18)}
#character .combat-box:nth-child(2):before{content:"⚔️";box-shadow:0 0 14px rgba(235,190,73,.17)}
#character .combat-box span{
  font-size:8px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
  color:#899c91!important;
}
#character .combat-box b{
  display:block;
  margin-top:3px;
  font-size:22px!important;
  color:#e8bd58!important;
  line-height:1;
}

/* ATTRIBUTES: compact 2-column grid */
#character #attrs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
#character .v125-attr{
  min-width:0;
  min-height:92px;
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 38px;
  gap:8px;
  align-items:center;
  padding:10px;
  border:1px solid #334d3a;
  border-radius:14px;
  background:
    radial-gradient(circle at 8% 50%,rgba(107,211,92,.08),transparent 27%),
    linear-gradient(145deg,#142019,#0a120d);
  box-shadow:inset 0 0 22px #0005,0 5px 12px #0003;
}
#character .v125-attr-icon{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  font-size:24px;
  border:1px solid #49664e;
  background:#09110d;
  box-shadow:inset 0 0 12px #0008;
}
#character .v125-attr-name{
  font-size:9px;
  color:#9cad9f;
  font-weight:900;
}
#character .v125-attr-value{
  margin-top:1px;
  font-size:19px;
  line-height:1;
  color:#f1f5ef;
  font-weight:1000;
}
#character .v125-attr-desc{
  margin-top:5px;
  font-size:6.7px;
  line-height:1.25;
  color:#7f9386;
}
#character .v125-attr button{
  width:38px!important;
  height:38px!important;
  border:0!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#94e967,#58b940)!important;
  color:#071008!important;
  font-size:20px!important;
  font-weight:1000!important;
  box-shadow:0 4px 10px #0005,inset 0 1px rgba(255,255,255,.25)!important;
}
#character .v125-attr button:disabled{
  filter:grayscale(.7)!important;
  opacity:.35!important;
}

/* Main attribute gets the Bild-1 gold/orange hero treatment */
#character .v125-attr.primary{
  grid-column:1/-1;
  min-height:100px;
  grid-template-columns:48px minmax(0,1fr) 42px;
  border-color:#cf8238!important;
  background:
    radial-gradient(circle at 12% 50%,rgba(255,163,63,.15),transparent 26%),
    linear-gradient(145deg,#24170e,#12100b)!important;
  box-shadow:
    inset 0 0 28px rgba(198,96,40,.11),
    0 0 16px rgba(235,108,39,.12)!important;
}
#character .v125-attr.primary:before{
  content:"HAUPTATTRIBUT";
  position:absolute;top:7px;right:58px;
  padding:2px 7px;border-radius:999px;
  border:1px solid #b25e35;
  background:#1b100b;
  color:#f5ad64;
  font-size:5.8px;font-weight:1000;letter-spacing:.09em;
}
#character .v125-attr.primary .v125-attr-icon{
  width:48px;height:48px;
  border-color:#c17037;
  box-shadow:0 0 13px rgba(239,125,53,.15),inset 0 0 12px #0008;
}
#character .v125-attr.primary .v125-attr-name{color:#e7a161}
#character .v125-attr.primary .v125-attr-value{
  color:#f2bd65;
  font-size:22px;
}
#character .v125-attr.primary .v125-attr-desc{color:#bd9273}

/* Skill section shell */
#character .card:has(#skillTree){
  padding:14px!important;
  border-color:#304e38!important;
  background:
    radial-gradient(circle at 85% 0%,rgba(110,210,84,.07),transparent 31%),
    linear-gradient(155deg,#122018,#09120d)!important;
}
#character .card:has(#skillTree) .section-title{
  align-items:flex-start!important;
  padding-bottom:10px;
  border-bottom:1px solid #253c2b;
}
#character .card:has(#skillTree) .section-title h2{
  font-size:18px!important;
  text-shadow:0 0 12px rgba(128,222,95,.12);
}
#character .skill-point-pill{
  border-color:#5b6f3f!important;
  background:linear-gradient(180deg,#172319,#0e1710)!important;
  color:#d6ead0!important;
}
#character .skill-point-pill b{
  color:#b9f67b!important;
  font-size:15px;
}

/* Modern skill cards */
#character .skill-tree{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
#character .v125-skill{
  position:relative;
  min-width:0;
  min-height:195px;
  padding:11px;
  border:1px solid #35503b;
  border-radius:15px;
  background:
    radial-gradient(circle at 100% 0%,rgba(91,204,76,.08),transparent 35%),
    linear-gradient(150deg,#142119,#0a120d);
  overflow:hidden;
  box-shadow:inset 0 0 24px #0005,0 5px 14px #0003;
}
#character .v125-skill.locked{
  opacity:.70;
  filter:saturate(.58);
  border-color:#4a4940;
}
#character .v125-skill.maxed{
  border-color:#c99a3d;
  background:
    radial-gradient(circle at 100% 0%,rgba(245,188,55,.13),transparent 38%),
    linear-gradient(150deg,#211b0e,#100f09);
  box-shadow:inset 0 0 25px rgba(198,145,44,.10),0 0 15px rgba(222,169,54,.10);
}
#character .v125-skill-type{
  display:inline-flex;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid #4e4166;
  background:#161020;
  color:#c89bed;
  font-size:5.8px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#character .v125-skill.passive .v125-skill-type{
  border-color:#356d4b;background:#0d1b13;color:#7fd99b;
}
#character .v125-skill.special .v125-skill-type{
  border-color:#865225;background:#211308;color:#eca05e;
}
#character .v125-skill-head{
  display:flex;align-items:center;gap:9px;margin-top:8px;
}
#character .v125-skill-icon{
  flex:0 0 45px;width:45px;height:45px;
  display:grid;place-items:center;
  border-radius:12px;
  border:1px solid #46614d;
  background:#0b130e;
  font-size:25px;
  box-shadow:inset 0 0 12px #0008;
}
#character .v125-skill-name{
  font-size:11px;font-weight:1000;line-height:1.1;
}
#character .v125-skill-rank{
  margin-top:3px;font-size:8px;color:#8ddd6f;font-weight:900;
}
#character .v125-skill-desc{
  margin-top:9px;
  min-height:48px;
  font-size:7.5px;
  line-height:1.4;
  color:#91a096;
}
#character .v125-skill-desc b{
  color:#c7d8cb;
}
#character .v125-skill-ranks{
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:9px 0;
}
#character .v125-rank{
  height:7px;border-radius:999px;
  border:1px solid #33443a;background:#18201a;
}
#character .v125-rank.on{
  border-color:#76c85d;
  background:linear-gradient(90deg,#73c653,#a6e573);
  box-shadow:0 0 7px rgba(123,214,88,.12);
}
#character .v125-skill.maxed .v125-rank.on{
  border-color:#d7a642;
  background:linear-gradient(90deg,#bd842f,#f0c75a);
}
#character .v125-skill-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:7px;
  margin-top:7px;
}
#character .v125-skill-state{
  font-size:7px;color:#a2b0a5;
}
#character .v125-skill.maxed .v125-skill-state{
  color:#efc95f;font-weight:1000;
}
#character .v125-skill.locked .v125-skill-state{
  color:#d0a96f;
}
#character .v125-skill .btn{
  padding:7px 9px!important;
  font-size:7px!important;
}
#character .v125-max-badge{
  position:absolute;right:9px;top:9px;
  padding:3px 7px;border:1px solid #af7f28;border-radius:999px;
  color:#f1c75b;background:#1b1509;font-size:6px;font-weight:1000;
}
#character .v125-lock-watermark{
  position:absolute;right:13px;bottom:10px;
  font-size:35px;opacity:.10;
}

/* Info footer under skills */
.v125-skill-info{
  grid-column:1/-1;
  padding:9px 10px;
  border:1px solid #31523b;
  border-radius:11px;
  background:#0c1710;
  color:#8fa092;
  font-size:7.3px;
  line-height:1.4;
}
.v125-skill-info b{color:#b7dca9}

/* Mobile fine-tuning */
@media(max-width:560px){
  #character #attrs{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #character .v125-attr{
    grid-template-columns:35px minmax(0,1fr) 34px;
    gap:6px;
    min-height:85px;
    padding:8px 7px;
  }
  #character .v125-attr-icon{
    width:35px;height:35px;font-size:20px;
  }
  #character .v125-attr-name{font-size:7.5px}
  #character .v125-attr-value{font-size:16px}
  #character .v125-attr-desc{font-size:5.7px}
  #character .v125-attr button{
    width:34px!important;height:34px!important;font-size:18px!important;
  }
  #character .v125-attr.primary{
    grid-template-columns:40px minmax(0,1fr) 36px;
    min-height:91px;
  }
  #character .v125-attr.primary .v125-attr-icon{
    width:40px;height:40px;
  }
  #character .v125-attr.primary .v125-attr-value{font-size:19px}
  #character .v125-attr.primary:before{right:48px;font-size:5px}

  #character .skill-tree{
    grid-template-columns:1fr!important;
  }
  #character .v125-skill{
    min-height:170px;
  }
  #character .v125-skill-desc{min-height:auto}
}