.eleven-product-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(116, 62, 255, 0.38), transparent 46%),
    radial-gradient(circle at 8% 100%, rgba(31, 92, 255, 0.2), transparent 42%),
    var(--surface-gradient);
}

.eleven-product-hero h1 span {
  color: transparent;
  background: linear-gradient(105deg, #fff 12%, #a9bdff 52%, #b786ff);
  background-clip: text;
  -webkit-background-clip: text;
}

.game-archive-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.game-archive-feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  padding-bottom: 22px;
}

.game-archive-feature .button { align-self: flex-start; margin-inline: 22px; }
.archive-leaders { display: grid; }

.game-archive-list-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 76px 76px 120px 12px;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
}

.game-archive-list-row:last-child { border-bottom: 0; }
.game-archive-list-row:hover { background: rgba(69, 115, 255, 0.08); }
.game-archive-list-row > span { display: grid; min-width: 0; gap: 3px; }
.game-archive-list-row > span:first-child strong { color: white; overflow-wrap: anywhere; }
.game-archive-list-row b { color: #b9c8ff; }
.game-archive-list-row small { color: var(--text-muted); font-size: 10px; }
.game-archive-list-row i { color: white; font-style: normal; }
.game-archive-list-row.player { grid-template-columns: minmax(220px, 1fr) 76px 76px 100px 12px; }
.game-archive-list-row.player > span:first-child { grid-template-columns: 28px minmax(0, 1fr); }
.game-archive-list-row.player > span:first-child small { grid-column: 2; }
.archive-rank { grid-row: 1 / 3; color: #829fff !important; }

.archive-year-panel { margin-bottom: 16px; }
.archive-year-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 20px; }
.archive-year-grid span { display: grid; gap: 4px; min-width: 0; padding: 14px 8px; text-align: center; border-radius: 14px; background: rgba(255,255,255,0.04); }
.archive-year-grid b { font-size: 20px; }
.archive-year-grid small { color: var(--text-muted); }

.archive-filter-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(130px, 0.4fr)) auto;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.archive-filter-form input,
.archive-filter-form select {
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: white;
  background: rgba(6, 10, 28, 0.7);
  font: inherit;
}

.archive-more {
  display: block;
  margin: 16px;
  padding: 13px;
  border-radius: 12px;
  color: #b9c8ff;
  background: rgba(69, 115, 255, 0.1);
  text-align: center;
  font-weight: 800;
}

.archive-game-list { display: grid; }
.archive-game-list > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
.archive-game-list > a:last-child { border-bottom: 0; }
.archive-game-list > a:hover { background: rgba(69, 115, 255, 0.08); }
.archive-game-list span { display: grid; min-width: 0; gap: 4px; }
.archive-game-list small { color: var(--text-muted); }
.archive-game-list strong { color: #b9c8ff; font-size: 12px; }
.archive-game-list i { font-style: normal; }

.game-archive-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 202, 56, 0.28);
  border-radius: 18px;
  background: rgba(255, 202, 56, 0.06);
}
.game-archive-notice > span { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 9px; color: #ffe293; background: rgba(255,202,56,0.13); }
.game-archive-notice p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.archive-review-badge { padding: 12px 16px; border-radius: 12px; color: #ffe293; background: rgba(255,202,56,0.1); }
.archive-tournament-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 850px) {
  .game-archive-overview { grid-template-columns: minmax(0, 1fr); }
  .archive-year-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .archive-tournament-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .game-archive-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-archive-nav a { justify-content: center; min-width: 0; }
  .game-archive-list-row,
  .game-archive-list-row.player { grid-template-columns: minmax(0, 1fr) 58px 12px; padding-inline: 14px; }
  .game-archive-list-row > span:nth-child(3),
  .game-archive-list-row > span:nth-child(4) { display: none; }
  .game-archive-list-row.player > span:nth-child(2) { display: grid; }
  .archive-filter-form { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .archive-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .archive-tournament-grid { grid-template-columns: minmax(0, 1fr); }
  .archive-game-list > a { grid-template-columns: minmax(0, 1fr) 12px; }
  .archive-game-list > a > strong { grid-column: 1; }
  .game-archive-notice { min-width: 0; }
}