/* Page wrapper consistent with your base palette */
.page{
  width: min(1100px, calc(100% - 28px));
  margin: 16px auto 18px;
}

.hero{
  display:grid;
  gap: 12px;
  grid-template-columns: 1.2fr .8fr;
  align-items: start;
  margin-top: 12px;
}

.heroTitle h1{
  margin: 0;
  font-size: 18px;
  letter-spacing: .2px;
}
.heroSub{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.heroTitleTop{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.heroTitleText{
  min-width: 0;
}
.heroActions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.heroActionBtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  font-weight: 900;
  letter-spacing: .15px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.heroActionBtn:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.heroActionBtn:active{
  transform: translateY(1px);
}
.heroActionBtn[disabled],
.heroActionBtn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
}
.heroActionIcon{
  font-size: 14px;
  line-height: 1;
}
.heroActionText{
  display:none; /* keep Search as the main focus on mobile */
}
@media (min-width: 920px){
  .heroActionText{ display:inline; }
}
@media (max-width: 520px){
  .heroTitleTop{
    flex-direction: column;
    align-items: stretch;
  }
  .heroActions{
    justify-content: flex-start;
  }
}

.noteBox{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(34,36,58,.35);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}
.noteTitle{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .25px;
}
.noteText{
  margin-top: 6px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.35;
}

.controls{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(34,36,58,.35);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.controlRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.field{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
  flex: 1 1 170px;
}

.label{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  font-weight: 900;
  letter-spacing: .2px;
}

.input{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}
.input:focus{
  border-color: rgba(255,211,105,.35);
  box-shadow: 0 0 0 4px rgba(255,211,105,.12);
}

.bottomRow{
  margin-top: 10px;
  justify-content: space-between;
}

.chips{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 34px;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 0, 0.1);
  background: rgba(255,255,255,.06);
  font-weight: 950;
  font-size: 12px;
  color: rgba(255,255,255,.92);
}

.chipBtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(51, 0, 255, 0.12);
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;
  color: rgba(255,255,255,.92);

}

.meta{
  display:flex;
  gap: 10px;
  align-items:center;
}

/* List */
.listShell{
  margin-top: 12px;
}

.listHeader{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 10px 2px;
}
.listTitle{
  font-weight: 950;
  letter-spacing: .2px;
}
.listHint{
  color: rgba(255,255,255,.60);
  font-size: 12px;
}

/* Compact grid; cards stay lightweight */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(34,36,58,.35);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform .08s ease, border-color .2s ease, background .2s ease;
  display:flex;
  gap: 10px;
  align-items:center;
  min-width: 0;
  content-visibility: auto; /* performance */
  contain-intrinsic-size: 92px;
}
.card:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.card:active{ transform: translateY(1px); }

.icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);

  object-fit: contain;       /* ✅ não corta */
  object-position: center;   /* ✅ centraliza */
  padding: 3px;              /* ✅ dá respiro pra sprites “tortos” */

  flex: 0 0 auto;
}


.cardMain{ min-width: 0; flex: 1 1 auto; }
.name{
  font-weight: 950;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub{
  margin-top: 3px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge{
  font-size: 11px;
  font-weight: 950;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

.rightMeta{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.price{
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}
.smallMut{
  font-size: 11px;
  color: rgba(255,255,255,.55);
}

/* Sentinel */
.sentinel{
  height: 14px;
}

/* Empty state */
.empty{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(34,36,58,.25);
  border-radius: 16px;
  padding: 16px;
  margin-top: 12px;
  text-align:center;
}
.emptyTitle{ font-weight: 950; }
.emptyText{ margin-top: 6px; color: rgba(255,255,255,.65); font-size: 12px; }

/* Modal / drawer */
.modalOverlay{
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,.50);
  backdrop-filter: blur(2px);
}
.modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 130;
  width: min(92vw, 720px);
  max-height: min(86vh, 820px);
  overflow: auto;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20,21,38,.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.modalHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);

  position: sticky;
  top: 0;
  z-index: 5;

  /* keep it readable while scrolling */
  background: rgba(20,21,38,.96);
  backdrop-filter: blur(10px);
}
.modalHeadLeft{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.mIcon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  object-fit: contain;
  padding: 4px;
  flex: 0 0 auto;
}
.mTitleWrap{ min-width:0; }
.mName{
  font-weight: 950;
  font-size: 15px;

  /* ✅ allow 2 lines in modal header */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.15;
  max-height: calc(1.15em * 2);
}

.mSub{
  margin-top: 3px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.modalBody{
  padding: 12px;
}

.section{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
}
.sectionTitle{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .25px;
  opacity: .95;
  margin-bottom: 8px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
}
.sectionTitleLeft{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.secIcon{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  object-fit: contain;
  padding: 2px;
  flex: 0 0 auto;
}



/* =========================
   Stats list (zebra rows)
   ========================= */

.kv{
  display:flex;
  flex-direction: column;
  gap: 6px; /* space between rows */
}

.statRow{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);

  /* base bg (odd) */
  background: rgba(255,255,255,.035);
}

.statRow:nth-child(even){
  /* even bg */
  background: rgba(255,255,255,.06);
}

.statK{
  color: rgba(255,255,255,.72);
  font-weight: 850;
  flex: 0 0 auto;
  max-width: 48%;
}

.statV{
  font-weight: 950;
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;

  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

/* If you want Special/long text easier to read */
.statRow.isWide{
  flex-direction: column;
  align-items: stretch;
}

.statRow.isWide .statK{
  max-width: 100%;
}

.statRow.isWide .statV{
  text-align: left;
  opacity: .95;
}

.k{
  color: rgba(255,255,255,.70);
  font-weight: 800;
}
.v{
  font-weight: 950;
  text-align:right;
}

.warnBox{
  border: 1px solid rgba(255,204,102,.22);
  background: rgba(255,204,102,.08);
  border-radius: 14px;
  padding: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.modalFoot{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mFootHint{
  font-size: 11px;
  color: rgba(255,255,255,.60);
}

/* =========================================================
   Info modal (How it works / Hall of Fame)
   ========================================================= */
.infoOverlay{
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(0,0,0,.50);
  backdrop-filter: blur(2px);
}
.infoModal{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 150;
  width: min(96vw, 760px);
  max-height: min(88vh, 860px);
  overflow: auto;

  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20,21,38,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
@media (min-width: 760px){
  .infoModal{
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    border-radius: 18px;
    width: min(92vw, 760px);
    max-height: min(86vh, 900px);
  }
}
.infoHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);

  position: sticky;
  top: 0;
  z-index: 5;

  background: rgba(20,21,38,.97);
  backdrop-filter: blur(10px);
}
.infoTabs{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.infoTab{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .15px;
  cursor: pointer;
  user-select: none;
}
.infoTab:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.infoTab[aria-selected="true"]{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
}
.infoTab[disabled],
.infoTab[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
}
.infoBody{
  padding: 12px;
}
.infoPanel{
  display:none;
}
.infoPanel.isActive{
  display:block;
}
.infoCard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(34,36,58,.35);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 10px;
}
.infoCardTitle{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .25px;
}
.infoCardText{
  margin-top: 6px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height: 1.45;
}
.infoList{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.45;
}
.infoList li + li{ margin-top: 6px; }
.infoFootNote{
  margin-top: 8px;
  color: rgba(255,255,255,.60);
  font-size: 11px;
  line-height: 1.4;
}
.ovrScale{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ovrPill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
}
.ovrPill.isMythic{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 2px rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.25);
}
.hofGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 640px){
  .hofGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.hofCard{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}
.hofRank{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(255,255,255,.70);
}
.hofName{
  margin-top: 8px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .15px;
}
.hofCount{
  margin-top: 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 950;
  font-size: 12px;
}
.hofCard.rank1{ border-color: rgba(255,215,0,.30); }
.hofCard.rank2{ border-color: rgba(192,192,192,.28); }
.hofCard.rank3{ border-color: rgba(205,127,50,.28); }
.hofListWrap{
  margin-top: 10px;
}
.hofListTitle{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .25px;
  color: rgba(255,255,255,.85);
  margin: 6px 0 8px;
}
.hofList{
  list-style: none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 8px;
}
.hofList li{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(34,36,58,.22);
}
.hofListName{
  font-weight: 900;
  color: rgba(255,255,255,.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hofListCount{
  font-weight: 950;
  font-size: 12px;
  opacity: .9;
}

/* Responsive */
@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; }
}
@media (min-width: 740px){
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px){
  .grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mini stats row inside card (clear labels) */
.miniStats{
  margin-top: 8px;
  display:flex;
  flex-wrap: nowrap;      /* ✅ do NOT wrap into a column */
  gap: 6px;
  align-items:center;
  overflow: hidden;       /* ✅ clip extra pills */
  mask-image: linear-gradient(90deg, #000 70%, transparent); /* nice fade */
}


.ms{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.88);
  line-height: 1;
  white-space: nowrap; /* ✅ prevent breaking */
  flex: 0 0 auto;
}

.ms b{
  font-weight: 950;
  color: rgba(255,255,255,.68);
}

.ms.flag{
  background: rgba(124,92,255,.16);
  border-color: rgba(124,92,255,.22);
}

.ms.dim{
  opacity: .65;
}

/* Right meta top pill (OVR / DMG summary / price if exists) */
.rightTop{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.rightPill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
}

.rightPill.dim{
  opacity: .6;
}

/* Improve card layout on small screens: keep right side compact */
@media (max-width: 420px){
  .rightMeta{
    gap: 4px;
    min-width: 72px;
  }

  .rightPill{
    padding: 6px 8px;
    font-size: 11px;
  }

  .miniStats{
    gap: 5px;
  }

  .ms{
    font-size: 10.5px;
    padding: 4px 7px;
  }
  .card{
    padding: 10px;
    gap: 10px;
    align-items: flex-start;
  }

  .icon{
    width: 40px;
    height: 40px;
  }

  .sub{
    gap: 6px;
  }

  .badge{
    font-size: 10px;
    padding: 3px 7px;
  }
}
@media (max-width: 480px){
  .grid{
    grid-template-columns: 1fr; /* ✅ 1 card por linha */
  }
}

/* =========================
   Obtain tag colors (HS / GP / Gralats)
   ========================= */

.badgeObtain{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

/* Gralats (green gem) — more solid / closer to icon */
.badgeObtain.obtain-gralats{
  border-color: rgba(160, 200, 60, .78);
  background: rgba(160, 200, 60, .52); /* ✅ less transparent */
  color: rgba(216, 255, 190, 0.98);        /* dark text fits bright green */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
/* GP (blue/steel coin) — more solid / closer to icon */
.badgeObtain.obtain-gp{
  border-color: rgba(170, 200, 230, .72);
  background: rgba(165, 195, 225, .44); /* ✅ less transparent */
  color: rgb(163, 207, 255);         /* darker text fits light blue */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
/* HS (gold horseshoe) — more solid / closer to icon */
.badgeObtain.obtain-hs{
  border-color: rgba(185, 120, 40, .80);
  background: rgba(185, 120, 40, .48); /* ✅ less transparent */
  color: rgb(255, 173, 114);         /* dark text fits gold */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
/* Craft — wood/fire (forge) strong, distinct from HS (gold) and KILL (red) */
.badgeObtain.obtain-craft{
  border-color: rgba(155, 70, 10, .90);
  background: rgba(255, 120, 25, .58);   /* 🔥 more solid */
  color: rgba(255, 245, 230, .98);       /* light “ember” text */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 18px rgba(255,120,25,.10);
}
/* Kills - red like death */
.badgeObtain.obtain-kill{
  border-color: rgba(255, 90, 90, .80);
  background: rgba(255, 90, 90, .45);
  color: rgba(255, 83, 83, 0.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
/* Auction — strong purple badge */
.badgeObtain.obtain-auction{
  border-color: rgba(170, 95, 255, .85);
  background: rgba(170, 95, 255, .48); /* less transparent, stands out */
  color: rgba(207, 171, 255, 0.98);         /* dark text for bright purple */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}


/* =========================
   Cost pill colors (matches obtain colors)
   ========================= */
.rightPill.obtain-gralats{
  border-color: rgba(168,200,72,.35);
  background: rgba(168,200,72,.14);
  color: rgba(235,255,205,.95);
}
.rightPill.obtain-gp{
  border-color: rgba(184,200,216,.30);
  background: rgba(184,200,216,.12);
  color: rgba(235,245,255,.95);
}
.rightPill.obtain-hs{
  border-color: rgba(184, 105, 27, 0.521);
  background: rgba(160,110,40,.16);
  color: rgba(255,232,200,.95);
}
.rightPill.obtain-event{
  border-color: rgba(255,211,105,.30);
  background: rgba(255,211,105,.12);
  color: rgba(255,244,220,.95);
}
/* Optional: event (if you use it later) */
.badgeObtain.obtain-event{
  border-color: rgba(255,211,105,.30);
  background: rgba(255,211,105,.12);
  color: rgba(255,244,220,.95);
}

.rightPill{
  min-width: 86px;
  justify-content: center;
}

/* Native select dropdown options (desktop) */
select.input,
select.input option,
select.input optgroup {
  color: #111;          /* texto escuro na lista aberta */
  background: #fff;     /* fundo claro padrão */
}

/* mantém o campo fechado no tema escuro */
select.input {
  color: var(--text);
  background: rgba(255,255,255,.06);
}

/* ===== Legendary / Mythic grades (mais "mítico", ainda elegante) ===== */
.statV .statGrade{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  min-width: 1.7em;
  padding: 1px 8px;
  margin-left: 2px;

  border-radius: 999px;
  border: 1px solid rgba(255, 215, 120, .42);

  /* base dourada mais rica */
  background:
    radial-gradient(120% 140% at 15% 10%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(120% 140% at 85% 100%, rgba(255, 190, 80, .14) 0%, rgba(255,190,80,0) 48%),
    linear-gradient(180deg, rgba(255,224,145,.18) 0%, rgba(255,214,120,.10) 45%, rgba(255,214,120,.06) 100%);

  color: #ffeab4;
  font-weight: 950;
  letter-spacing: .25px;
  line-height: 1.1;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,180,70,.08),
    0 0 0 1px rgba(255,214,120,.05),
    0 0 10px rgba(255,214,120,.08);
}

/* reflexo diagonal sutil */
.statV .statGrade::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 18%,
    rgba(255,255,255,.18) 42%,
    rgba(255,255,255,0) 62%
  );
  transform: translateX(-18%);
  pointer-events: none;
  opacity: .75;
}

/* borda interna suave */
.statV .statGrade::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}

/* ===== S+ = mais mítico (dourado + violeta) ===== */
.statV .statGrade.statGradePlus{
  border-color: rgba(205, 168, 255, .52);

  background:
    radial-gradient(120% 140% at 12% 8%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(120% 140% at 88% 96%, rgba(168, 110, 255, .16) 0%, rgba(168,110,255,0) 50%),
    radial-gradient(90% 110% at 50% 0%, rgba(255, 225, 140, .12) 0%, rgba(255,225,140,0) 60%),
    linear-gradient(180deg, rgba(255,224,145,.16) 0%, rgba(196,160,255,.11) 52%, rgba(130,95,220,.08) 100%);

  color: #f7ecff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(140,90,220,.10),
    0 0 0 1px rgba(205,168,255,.08),
    0 0 14px rgba(205,168,255,.14),
    0 0 24px rgba(120,85,220,.08);
}

/* reflexo e brilho do S+ um tiquinho mais forte */
.statV .statGrade.statGradePlus::before{
  opacity: .9;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 14%,
    rgba(255,255,255,.24) 40%,
    rgba(228,208,255,.14) 50%,
    rgba(255,255,255,0) 68%
  );
}

/* wide rows continuam naturais */
.statRow.isWide .statV .statGrade{
  margin-left: 0;
}