/*
 * Rakion Evolution badge system
 * A single safe geometry for compact symbols and status labels. Shield and
 * clan emblems stay heraldic; utility badges use an octagonal forged plate so
 * neither their rim nor their glyph is cropped at the vertical extremes.
 */

:where(body.rakion-eternal, body.rakion-admin) {
  --re-badge-edge: #445055;
  --re-badge-face: linear-gradient(155deg, #20282c, #0a0e10 72%);
  --re-badge-cut: 6px;
}

/* Compact icon plates shared by the portal and AdminCP. */
:where(body.rakion-eternal, body.rakion-admin) :is(
  .as-ico,
  .auth-badge,
  .shop-badge,
  .dl-badge,
  .rk-rank,
  .ti-pos,
  .ev-day-icon,
  .ref-req-icon,
  .warrior-rank,
  .user-hub-label i
) {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 6px;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(
    var(--re-badge-cut) 0,
    calc(100% - var(--re-badge-cut)) 0,
    100% var(--re-badge-cut),
    100% calc(100% - var(--re-badge-cut)),
    calc(100% - var(--re-badge-cut)) 100%,
    var(--re-badge-cut) 100%,
    0 calc(100% - var(--re-badge-cut)),
    0 var(--re-badge-cut)
  ) !important;
  background: var(--re-badge-face);
  box-shadow: inset 0 0 0 1px var(--re-badge-edge), inset 0 0 14px rgba(0,0,0,.68) !important;
  line-height: 1;
}

:where(body.rakion-eternal, body.rakion-admin) :is(
  .as-ico,
  .auth-badge,
  .shop-badge,
  .dl-badge,
  .rk-rank,
  .ti-pos,
  .ev-day-icon,
  .ref-req-icon,
  .warrior-rank,
  .user-hub-label i
) > i {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  transform: none;
  line-height: 1;
}

/* The dashboard plates were the visible source of the top/bottom crop. */
body.rakion-admin .as-ico {
  --re-badge-cut: 7px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  color: #b8c4c7;
  background: var(--re-badge-face);
  box-shadow: inset 0 0 0 1px var(--re-badge-edge), inset 0 0 14px #000;
}
body.rakion-admin .adm-stat:hover .as-ico { transform: translateY(-2px); }
body.rakion-admin .adm-stat--gold .as-ico { --re-badge-edge:#715b31; background:linear-gradient(155deg,#45371e,#151109); }
body.rakion-admin .adm-stat--ember .as-ico { --re-badge-edge:#7a4724; background:linear-gradient(155deg,#472513,#170b06); }
body.rakion-admin .adm-stat--live .as-ico,
body.rakion-admin .adm-stat--good .as-ico { --re-badge-edge:#37694b; background:linear-gradient(155deg,#183324,#09130d); }
body.rakion-admin .adm-stat--bad .as-ico { --re-badge-edge:#72403e; background:linear-gradient(155deg,#3f1e1e,#150909); }

/* Ranking positions: readable number first, decorative shape second. */
body.rakion-eternal :is(.rk-rank, .ti-pos) {
  --re-badge-cut: 5px;
  color: #b9c0c2;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  background: linear-gradient(155deg,#1d2529,#090d0f);
  box-shadow: inset 0 0 0 1px #3d494e, inset 0 0 10px #000;
}

/* Diamond rotations were also visually clipping their own rims. */
body.rakion-eternal :is(.auth-badge, .ev-day-icon) { transform: none !important; }
body.rakion-eternal :is(.auth-badge, .ev-day-icon) > i { transform: none !important; }

/* Text/status badges keep a predictable line box and never touch a clipped edge. */
:where(body.rakion-eternal, body.rakion-admin) :is(
  .badge,
  .badge-success,
  .badge-danger,
  .badge-warning,
  .badge-info,
  .adm-pill,
  .adm-link-badge,
  .adm-master-badge,
  .clan-desync,
  .char-evo-badge,
  .as-badge,
  .dbot-kind,
  .ops-state
) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  padding: 4px 8px;
  overflow: visible !important;
  border-radius: 1px;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  line-height: 1.15 !important;
  vertical-align: middle;
}

body.rakion-admin .adm-link-badge {
  min-width: 22px;
  min-height: 19px;
  margin-left: auto;
  padding: 3px 6px;
}

body.rakion-eternal .cash-package-badge {
  position: absolute !important;
  top: 8px;
  right: 8px;
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid #d8aa62;
  line-height: 1.1;
  box-shadow: 0 4px 11px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.28);
}