.hall-of-fame-view {
  --hall-gold: #d8a94c;
  --hall-red: #6d1819;
}

.hall-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(90deg, rgba(91,18,20,.94), rgba(42,13,13,.88)), url("./arena-bg.png") center 42%/cover;
}

.hall-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 7px 0;
  padding: 5px;
  border: 1px solid #72502a;
  background: #160f0b;
  box-shadow: inset 0 0 0 2px #080604;
}

.hall-tabs button {
  min-height: 38px;
  border: 1px solid #6b4827;
  color: #cfb78c;
  background: linear-gradient(#3a1714, #1b0e0b);
  font: 700 13px Georgia, serif;
  cursor: pointer;
}

.hall-tabs button.active {
  color: #241207;
  border-color: #f0c767;
  background: linear-gradient(#f0c767, #ad7225);
  box-shadow: inset 0 0 0 1px #6e3b12, 0 0 12px rgba(216,169,76,.18);
}

.hall-self-card {
  display: grid;
  grid-template-columns: 48px minmax(150px, .8fr) minmax(320px, 1.7fr);
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 14px;
  border: 1px solid #8d6330;
  background: linear-gradient(90deg, rgba(111,24,24,.92), rgba(35,17,13,.98));
  box-shadow: inset 0 0 0 2px #120908;
}

.hall-self-crown { color: #f2c45e; font-size: 30px; text-align: center; }
.hall-self-card > div { display: flex; flex-direction: column; }
.hall-self-card small { color: #c89a4b; font-size: 10px; letter-spacing: .12em; }
.hall-self-card strong { color: #f2dfb4; font: 700 18px Georgia, serif; }
.hall-self-card span { color: #aa9677; }
.hall-self-card dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 0; }
.hall-self-card dl div { padding: 7px; border: 1px solid #513720; background: rgba(12,8,6,.52); text-align: center; }
.hall-self-card dt { color: #9b8768; font-size: 9px; text-transform: uppercase; }
.hall-self-card dd { margin: 2px 0 0; color: #e5c87e; font-weight: 800; }

.hall-board {
  border: 1px solid #8b6334;
  background: #17100c;
  box-shadow: inset 0 0 0 3px #090605;
}

.hall-board-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #654522;
  background: linear-gradient(#361513, #1e0f0c);
}

.hall-board-title h2 { margin: 2px 0 0; color: #ead6aa; font: 700 20px Georgia, serif; }
.hall-board-title > span { color: #9d8867; font-size: 11px; }
.hall-table-wrap { min-height: 280px; padding: 7px; }
.hall-table { width: 100%; border-collapse: collapse; color: #c8b694; }
.hall-table th { padding: 9px 10px; color: #b88c43; border: 1px solid #52381f; background: #24130f; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.hall-table td { padding: 9px 10px; border: 1px solid #3d2a1b; background: rgba(31,23,17,.84); }
.hall-table tbody tr:nth-child(even) td { background: rgba(47,30,21,.78); }
.hall-table tbody tr.current td { color: #fff0c5; border-top-color: #d5a446; border-bottom-color: #d5a446; background: rgba(105,28,27,.78); }
.hall-rank { color: #bca77f; }
.hall-rank.gold { color: #ffd66c; }
.hall-rank.silver { color: #d6dbe2; }
.hall-rank.bronze { color: #d78b51; }
.hall-hero { display: flex; flex-direction: column; min-width: 140px; }
.hall-hero b { color: #ead7ad; font: 700 14px Georgia, serif; }
.hall-hero small { margin-top: 2px; color: #927f63; font-size: 9px; }
.hall-empty { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: #a89476; text-align: center; }
.hall-empty[hidden] { display: none; }
.hall-empty strong { color: #e3c88f; font: 700 18px Georgia, serif; }
.hall-empty-symbol { color: #d8a94c; font-size: 42px; }

@media (min-width: 761px) {
  .hall-of-fame-view.active { overflow: hidden; }
  .hall-table-wrap { max-height: calc(100vh - 285px); overflow-y: auto; scrollbar-width: thin; }
}

@media (max-width: 760px) {
  .hall-heading { align-items: flex-end; }
  .hall-heading .button { min-width: 112px; }
  .hall-tabs { position: sticky; top: 0; z-index: 6; grid-template-columns: repeat(2, 1fr); }
  .hall-tabs button { min-height: 44px; font-size: 14px; }
  .hall-self-card { grid-template-columns: 42px 1fr; }
  .hall-self-card dl { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .hall-board-title { align-items: flex-end; }
  .hall-board-title h2 { font-size: 18px; }
  .hall-board-title > span { font-size: 9px; }
  .hall-table thead { display: none; }
  .hall-table, .hall-table tbody, .hall-table tr, .hall-table td { display: block; width: 100%; }
  .hall-table tr { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 7px; border: 1px solid #5c4022; }
  .hall-table td { display: flex; justify-content: space-between; gap: 10px; border: 0; border-bottom: 1px solid #352519; }
  .hall-table td::before { content: attr(data-label); color: #8f7a5c; font-size: 10px; text-transform: uppercase; }
  .hall-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .hall-table td:nth-child(1) { grid-column: 1 / -1; }
  .hall-hero { min-width: 0; text-align: right; }
}

@media (max-width: 430px) {
  .hall-heading { display: block; }
  .hall-heading .button { width: 100%; margin-top: 8px; }
  .hall-self-card dl { grid-template-columns: repeat(2, 1fr); }
}