
/* ===== v4.4.3 · instant/prewarmed final badge system ===== */
:root{--fc27-ps-silver:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23F1F4F7%22%2F%3E%3Cstop%20offset%3D%220.56%22%20stop-color%3D%22%23DDE2E7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C0C7D0%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2250%2C1%2099%2C50%2050%2C99%201%2C50%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");--fc27-ps-gold:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFE9A0%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23FBDD81%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F5C84B%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2230%2C0%2090%2C0%20120%2C33.333%2060%2C100%200%2C33.333%22%20fill%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E")}

/* ---------- shared shell ---------- */
#playstylesPanel .ps-icon-shell,
.overview-badge-shell,
body.build-overview-active .fc-build-card-plus{
  position:relative!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  clip-path:none!important;
}
#playstylesPanel .ps-icon-shell::before,
.overview-badge-shell::before,
body.build-overview-active .fc-build-card-plus::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--badge-w)!important;
  height:var(--badge-h)!important;
  transform:translate(-50%,-50%)!important;
  background:var(--fc27-ps-silver) center/100% 100% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.18));
  pointer-events:none!important;
  z-index:1!important;
}
#playstylesPanel .ps-icon-shell.plus::before,
.overview-badge-shell.plus::before,
body.build-overview-active .fc-build-card-plus:not(.is-silver)::before{
  background-image:var(--fc27-ps-gold)!important;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.20));
}
#playstylesPanel .ps-icon-shell::after,
.overview-badge-shell::after,
body.build-overview-active .fc-build-card-plus::after{display:none!important;content:none!important}

#playstylesPanel .ps-icon-shell img,
.overview-badge-shell img,
body.build-overview-active .fc-build-card-plus img{
  position:absolute!important;
  z-index:2!important;
  display:block!important;
  left:50%!important;
  top:calc(50% - var(--gold-lift,0px))!important;
  width:var(--icon-box,22px)!important;
  height:var(--icon-box,22px)!important;
  object-fit:contain!important;
  max-width:none!important;
  max-height:none!important;
  filter:none!important;
  opacity:1!important;
  transition:none!important;
  transform:translate(-50%,-50%)!important;
}
#playstylesPanel .ps-icon-shell[data-badge-ready="1"] img,
.overview-badge-shell[data-badge-ready="1"] img,
body.build-overview-active .fc-build-card-plus[data-badge-ready="1"] img{opacity:1!important}

#playstylesPanel .ps-icon-fallback,
.overview-badge-shell .overview-ps-glyph,
body.build-overview-active .fc-build-card-plus span{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#111820!important;
}
#playstylesPanel .ps-icon-shell img + .ps-icon-fallback{display:none!important}
#playstylesPanel .ps-icon-shell[data-badge-ready="1"] .ps-icon-fallback,
.overview-badge-shell[data-badge-ready="1"] .overview-ps-glyph,
body.build-overview-active .fc-build-card-plus[data-badge-ready="1"] span{display:none!important}

/* ---------- PlayStyle page selector ---------- */
#playstylesPanel .ps-page-k6 .ps-badge-tile .ps-icon-shell{
  --badge-h:38px;--badge-w:38px;--icon-box:22px;--gold-lift:0px;
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
}
#playstylesPanel .ps-page-k6 .ps-badge-tile .ps-icon-shell.plus{--badge-w:45.6px;--icon-box:23px;--gold-lift:2.26px}
#playstylesPanel .ps-page-k6 .ps-badge-tile.locked .ps-icon-shell img{opacity:.40!important}
#playstylesPanel .ps-page-k6 .ps-badge-tile.insufficient .ps-icon-shell img{opacity:.34!important}
#playstylesPanel .ps-page-k6 .ps-badge-tile.locked .ps-icon-shell[data-badge-ready="1"] img{opacity:.40!important}
#playstylesPanel .ps-page-k6 .ps-badge-tile.insufficient .ps-icon-shell[data-badge-ready="1"] img{opacity:.34!important}
#playstylesPanel .ps-page-k6 .ps-badge-tile.unreachable .ps-icon-shell[data-badge-ready="1"] img{opacity:.30!important}
#playstylesPanel .ps-page-k6 .ps-badge-tile.unlocked .ps-icon-shell[data-badge-ready="1"] img,
#playstylesPanel .ps-page-k6 .ps-badge-tile.equipped .ps-icon-shell[data-badge-ready="1"] img,
#playstylesPanel .ps-page-k6 .ps-badge-tile.selected .ps-icon-shell[data-badge-ready="1"] img{opacity:1!important}

/* signature / regular slots */
#playstylesPanel .ps-signature-card>.ps-icon-shell{--badge-h:31px;--badge-w:31px;--icon-box:18px;--gold-lift:0px;width:42px!important;height:42px!important}
#playstylesPanel .ps-signature-card>.ps-icon-shell.plus{--badge-w:37.2px;--icon-box:18.6px;--gold-lift:1.85px}
#playstylesPanel .ps-slot .ps-icon-shell{--badge-h:24px;--badge-w:24px;--icon-box:14px;--gold-lift:0px;width:30px!important;height:30px!important}
#playstylesPanel .ps-slot .ps-icon-shell.plus{--badge-w:28.8px;--icon-box:14.4px;--gold-lift:1.43px}

/* hover detail */
#playstylesPanel .ps-page-k6 .ps-hover-detail-head>.ps-icon-shell{--badge-h:43px;--badge-w:43px;--icon-box:25px;--gold-lift:0px;width:58px!important;height:58px!important}
#playstylesPanel .ps-page-k6 .ps-hover-detail-head>.ps-icon-shell.plus{--badge-w:51.6px;--icon-box:25.8px;--gold-lift:2.56px}

/* ---------- Build overview lower-left PlayStyle block ---------- */
.overview-playstyle-token{
  width:58px!important;min-width:58px!important;
  display:grid!important;grid-template-rows:42px auto!important;justify-items:center!important;gap:4px!important;
  padding-top:0!important;
}
.overview-playstyle-token::before,.overview-playstyle-token::after{display:none!important;content:none!important}
.overview-badge-shell{--badge-h:34px;--badge-w:34px;--icon-box:20px;--gold-lift:0px;width:48px;height:42px}
.overview-badge-shell.plus{--badge-w:40.8px;--icon-box:20.4px;--gold-lift:2.02px}
.overview-playstyle-token small{position:relative!important;z-index:4!important}

/* ---------- Build card badge: one layer only ---------- */
body.build-overview-active .fc-build-card-plus{
  --badge-h:72px;--badge-w:86.4px;--icon-box:43px;--gold-lift:4.29px;
  left:0!important;top:52.4%!important;
  width:96px!important;height:84px!important;
  transform:translate(-50%,-50%)!important;
  z-index:7!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
body.build-overview-active .fc-build-card-plus.is-silver{--badge-w:72px;--icon-box:42px;--gold-lift:0px}
body.build-overview-active .fc-build-card-plus-inner{position:absolute!important;inset:0!important;display:block!important;transform:none!important;background:none!important}
body.build-overview-active .fc-build-card-plus.is-hidden{display:none!important}

@media(max-width:1180px){
  #playstylesPanel .ps-page-k6 .ps-badge-tile .ps-icon-shell{--badge-h:33px;--badge-w:33px;--icon-box:19px}
  #playstylesPanel .ps-page-k6 .ps-badge-tile .ps-icon-shell.plus{--badge-w:39.6px;--icon-box:19.8px;--gold-lift:1.96px}
}
@media(max-width:900px){
  #playstylesPanel .ps-page-k6 .ps-badge-tile .ps-icon-shell{--badge-h:29px;--badge-w:29px;--icon-box:16.8px}
  #playstylesPanel .ps-page-k6 .ps-badge-tile .ps-icon-shell.plus{--badge-w:34.8px;--icon-box:17.4px;--gold-lift:1.73px}
  #playstylesPanel .ps-page-k6 .ps-hover-detail-head>.ps-icon-shell{--badge-h:38px;--badge-w:38px;--icon-box:22px;width:52px!important;height:52px!important}
  #playstylesPanel .ps-page-k6 .ps-hover-detail-head>.ps-icon-shell.plus{--badge-w:45.6px;--icon-box:22.8px;--gold-lift:2.26px}
}
