.heroes-view {
  grid-column: 2;
  min-width: 0;
  color: #49311f;
}
.heroes-view[hidden] { display: none; }
.heroes-heading {
  margin: 0 0 12px;
  padding: 12px 15px;
  border: 1px solid #89653d;
  background: #ead7abf5;
  box-shadow: inset 0 0 0 2px #f8e8bf8c, var(--panel-shadow);
}
.heroes-heading p { margin: 0 0 2px; color: #7b4a2c; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.heroes-heading h1 { margin: 0; color: #42291a; font-size: 1.7rem; }
.heroes-heading span { color: #66513a; font-size: .82rem; }
.heroes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.heroes-ranking {
  min-width: 0;
  border: 1px solid #89653d;
  background: #ead7abf2;
  box-shadow: inset 0 0 0 2px #f8e8bf75, var(--panel-shadow);
}
.heroes-ranking > header { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-bottom: 2px solid #7c5332; background: linear-gradient(#70442c, #4f2e1f); }
.heroes-ranking > header span { color: #e4c476; font-size: 1.05rem; }
.heroes-ranking h2 { margin: 0; color: #f4dfb1; font-size: .94rem; }
.heroes-ranking ol { list-style: none; margin: 0; padding: 5px 9px 9px; counter-reset: none; }
.heroes-ranking li { min-height: 34px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 7px; border-bottom: 1px solid #aa895b66; }
.heroes-ranking li:last-child { border-bottom: 0; }
.heroes-ranking li:nth-child(even) { background: #d8bd8966; }
.heroes-ranking li[data-podium="1"] { background: #d9ba6f80; }
.heroes-ranking li[data-podium="2"] { background: #c7bfa580; }
.heroes-ranking li[data-podium="3"] { background: #bd8a5a66; }
.heroes-rank { color: #79462a; font-weight: 700; text-align: right; }
.heroes-ranking a { min-width: 0; overflow: hidden; color: #4d2e1c; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.heroes-ranking a:hover { color: #873b28; text-decoration: underline; }
.heroes-ranking strong { color: #376d63; font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.heroes-empty { display: block !important; color: #6b5840; text-align: center; }
@media (max-width: 1050px) { .heroes-view { grid-column: 2; } }
@media (max-width: 720px) {
  .heroes-view { grid-column: 1; width: 100%; }
  .heroes-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .heroes-ranking li { grid-template-columns: 24px minmax(0, 1fr); }
  .heroes-ranking strong { grid-column: 2; }
}