/* Stats page (stats.js) — base stats, attacker roles and the screen read */
.stcontrols { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.stcontrols label { display: flex; gap: 8px; align-items: center; color: var(--ink-2); }

.stverdict-head h3 { margin: 2px 0 12px; font-size: 1.35rem; }
.stsplit { display: flex; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2);
  font-size: .8rem; font-weight: 600; min-height: 34px; }
.stsplit span { display: flex; align-items: center; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stsplit .phys { background: rgba(229, 72, 77, .28); color: #ffd6d7; }
.stsplit .spec { background: rgba(122, 162, 247, .26); color: #dbe6ff; justify-content: flex-end; }
.stsplit-cap { margin: 6px 0 10px; font-size: .8rem; }
.stfacts { margin: 0; padding-left: 18px; color: var(--ink-2); line-height: 1.55; }

table.stt td { vertical-align: middle; }
table.stt tr.stoff td { opacity: .45; }
table.stt tr.stavg td { border-top: 1px solid var(--line-2); background: var(--bg-2); }
.stmon { display: flex; align-items: center; gap: 6px; min-width: 190px; }
.stmon > span { display: flex; flex-direction: column; gap: 2px; }
.sttypes .ty { font-size: .62rem; }
.stmoves { display: block; color: var(--ink-3); font-size: .72rem; margin-top: 2px; max-width: 220px; }

.stc { position: relative; min-width: 50px; padding-bottom: 12px !important; }
.stc b { position: relative; }
.stbar { position: absolute; left: 10px; bottom: 5px; height: 4px; max-width: calc(100% - 20px); border-radius: 3px; opacity: .8; }
.stbar.lo  { background: var(--bad); }
.stbar.md  { background: var(--gold); }
.stbar.hi  { background: var(--good); opacity: .6; }
.stbar.top { background: var(--good); }

.strole { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  border: 1px solid var(--line-2); white-space: nowrap; }
.strole small { font-weight: 400; opacity: .75; }
.st-physical { color: #ffb3b5; border-color: rgba(229, 72, 77, .55); background: rgba(229, 72, 77, .12); }
.st-special  { color: #b9ccff; border-color: rgba(122, 162, 247, .55); background: rgba(122, 162, 247, .12); }
.st-mixed    { color: #f0dc9a; border-color: rgba(217, 180, 74, .5); background: rgba(217, 180, 74, .1); }
.st-support  { color: var(--ink-2); }

.stlean { font-size: .78rem; font-weight: 600; }
.stlean.weak { color: var(--red-2); }
.stlean.even { color: var(--ink-3); font-weight: 400; }

.stpick { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.stpick.phys { background: rgba(229, 72, 77, .18); color: #ffc2c4; }
.stpick.spec { background: rgba(122, 162, 247, .18); color: #c8d7ff; }
.stpick.even { background: var(--panel-2); color: var(--ink-2); }
table.stmatch tr.on td { background: var(--panel-2); }
.stnote { font-size: .8rem; line-height: 1.5; max-width: 900px; }

@media (max-width: 640px) {
  .stsplit { font-size: .7rem; }
  .stmon { min-width: 150px; }
}