/* Announced heroes remain distinct from the playable build library. */
.upcoming-heroes { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.upcoming-heroes-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.upcoming-heroes-heading h2 { margin: 0; color: #d9cbb2; font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.upcoming-heroes-heading p { margin: 0; color: #9f9685; font-size: 11px; }
.upcoming-heroes-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.upcoming-hero { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 16px 6px 14px; border: 1px solid #39362e; border-radius: 9px; background: linear-gradient(145deg, #211f19, #13120f); color: #d1c7b5; font: inherit; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease; }
.upcoming-hero:hover, .upcoming-hero.is-checked { border-color: #a98b53; background-color: #2c2418; }
.upcoming-hero:focus-visible { outline: 2px solid #e0bc79; outline-offset: 4px; }
.upcoming-hero-art { display: grid; place-items: center; position: relative; width: 88px; height: 90px; margin-bottom: 4px; }
.upcoming-hero-art img { width: 88px; height: 90px; object-fit: contain; opacity: .6; filter: saturate(.4); transition: opacity 180ms ease, filter 180ms ease; }
.upcoming-hero:hover img, .upcoming-hero:focus-visible img { opacity: .85; filter: saturate(.8); }
.upcoming-hero-lock { display: grid; place-items: center; position: absolute; bottom: -4px; right: 0; width: 32px; height: 35px; border: 1px solid #9b8356; border-radius: 9px; background: #211c12; color: #e5c88e; box-shadow: 0 3px 12px #0008; transform-origin: 50% 10%; }
.upcoming-hero-lock svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.upcoming-hero.is-checked .upcoming-hero-lock { color: #fff0c6; border-color: #f2d191; box-shadow: 0 0 16px #c49d4945; }
.upcoming-hero-name { text-align: center; font-size: 12px; font-weight: 600; line-height: 1.4; }
.upcoming-hero-label { color: #a6977c; font-size: 8px; font-weight: 600; letter-spacing: .1em; }
.upcoming-heroes-status { min-height: 1.5em; margin: 14px 0 0; color: #bbae94; font-size: 11px; line-height: 1.5; }
@media (max-width: 760px) {
  .upcoming-heroes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .upcoming-heroes-heading { display: block; }
  .upcoming-heroes-heading p { margin-top: 7px; }
  .upcoming-hero { padding: 12px 4px; }
  .upcoming-hero-art, .upcoming-hero-art img { width: 70px; height: 78px; }
  .upcoming-hero-name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .upcoming-hero, .upcoming-hero-art img { transition: none; }
}