/* scenes/armorchart.css -- the eight sets as bars that re-sort themselves, and the hit you dial. */
.gscene-armorchart .gscene-stage { height: auto; min-height: 0; padding: 18px clamp(14px, 3vw, 28px) 22px; cursor: default;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, #22305a, #12193a 62%, #0a0f1c); }
.ac { position: relative; z-index: 2; color: #fff; }
.ac-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-tabs button { padding: 7px 13px; border-radius: 99px; cursor: pointer; font: 800 0.84rem var(--display); color: #dfe6f5;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.2s; }
.ac-tabs button[aria-selected="true"] { background: var(--gold); color: #1a1408; border-color: transparent; }
.ac-note { min-height: 2.9em; margin: 12px 0 6px; font: 700 0.92rem/1.45 var(--display); color: #c9d2e6; }
.ac-hit { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin: 0 0 10px; font: 800 0.9rem var(--display); color: #ffcf8a; }
.ac-hit[hidden] { display: none; }
.ac-hit input { width: 100%; accent-color: var(--red); }
.ac-rows { --h: 44px; position: relative; height: calc(var(--n, 8) * var(--h)); margin: 0; padding: 0; list-style: none; transition: height 0.4s; }
.ac-row { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--h) - 8px); display: grid; grid-template-columns: minmax(6.5em, 9em) 1fr minmax(5.5em, auto);
  align-items: center; gap: 12px; transform: translateY(calc(var(--at, 0) * var(--h))); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ac-row[hidden] { display: none; }
.ac-name { display: flex; align-items: center; gap: 8px; font: 800 0.92rem var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-name i { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--c); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.25); }
.ac-bar { height: 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ac-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ac-row b { font: 900 0.92rem var(--display); text-align: right; white-space: nowrap; }
.ac-row.is-best b { color: var(--gold); }
.ac-row.is-best .ac-name::after { content: "★"; color: var(--gold); margin-left: 2px; }
.ac-row.is-none .ac-name { color: #aab4cc; font-style: italic; }
@media (max-width: 560px) { .ac-rows { --h: 40px; } .ac-row { grid-template-columns: 6.2em 1fr auto; gap: 8px; } .ac-name { font-size: 0.82rem; } .ac-row b { font-size: 0.82rem; } }
.ac-still .ac-row, .ac-still .ac-bar i, .ac-still { transition: none; }
@media (prefers-reduced-motion: reduce) { .ac-row, .ac-bar i, .ac-rows { transition: none; } }