.eleven-product-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  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 > div { position: relative; z-index: 1; min-width: 0; }

.eleven-hero-mark {
  width: clamp(112px, 16vw, 190px);
  height: clamp(112px, 16vw, 190px);
  flex: 0 0 auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 34px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 28px 70px rgba(15, 4, 46, 0.5);
  transform: rotate(3deg);
}

.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;
}

.archive-entrances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.archive-entrances a {
  display: grid;
  min-width: 0;
  min-height: 142px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text);
  background: linear-gradient(145deg, rgba(47, 62, 119, 0.18), rgba(11, 16, 38, 0.96));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.archive-entrances a:hover { border-color: rgba(132, 157, 255, 0.46); transform: translateY(-2px); }
.archive-entrances span { color: #8098ef; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
.archive-entrances strong { align-self: end; margin-top: 22px; font-size: 18px; }
.archive-entrances small { margin-top: 5px; color: var(--text-muted); }

.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 > .identity { display: inline-flex; grid-column: 2; gap: 10px; }
.game-archive-list-row.player .identity-copy { gap: 3px; }
.archive-rank { grid-row: 1 / 3; color: #829fff !important; }

.archive-hall-section { margin-bottom: 16px; }
.archive-record-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.archive-record-card {
  display: grid;
  min-width: 0;
  min-height: 180px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text);
  background: radial-gradient(circle at 88% 7%, rgba(128, 90, 255, 0.22), transparent 42%), var(--surface-gradient);
}
.archive-record-card:hover { border-color: rgba(158, 128, 255, 0.5); transform: translateY(-2px); }
.archive-record-card > span { color: #9cb0ff; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.archive-record-card strong { align-self: end; margin-top: 22px; overflow-wrap: anywhere; font-size: 19px; }
.archive-record-card b { margin-top: 5px; color: white; font-size: 25px; letter-spacing: -0.035em; }
.archive-record-card small { margin-top: 3px; color: var(--text-muted); line-height: 1.4; }

.archive-year-panel { margin-bottom: 16px; }
.archive-year-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 8px; min-height: 230px; padding: 24px 20px 20px; }
.archive-year-grid span { display: grid; grid-template-rows: auto 128px auto; gap: 8px; min-width: 0; text-align: center; }
.archive-year-grid b { font-size: 17px; }
.archive-year-grid i { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,0.035); }
.archive-year-grid i::after { position: absolute; right: 0; bottom: 0; left: 0; height: var(--archive-year-share); min-height: 7px; border-radius: 10px; background: linear-gradient(180deg, #a47cff, #486fff); box-shadow: 0 0 22px rgba(90, 103, 255, 0.28); content: ""; }
.archive-year-grid small { color: var(--text-muted); }

.archive-role-panel { margin-bottom: 16px; }
.archive-role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 20px 20px; }
.archive-role-grid span { display: grid; gap: 7px; min-width: 0; }
.archive-role-grid small { color: var(--text-muted); }
.archive-role-grid b { font-size: 22px; }
.archive-role-grid i { position: relative; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.06); }
.archive-role-grid i::after { position: absolute; inset: 0 auto 0 0; width: var(--archive-role-share); border-radius: inherit; background: linear-gradient(90deg, #526fff, #a77bff); content: ""; }

.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; }
.archive-tournament-search { display: grid; grid-template-columns: auto minmax(220px, 360px); align-items: center; justify-content: end; gap: 12px; margin-bottom: 16px; color: var(--text-muted); font-size: 12px; }
.archive-tournament-search input { min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; color: white; background: rgba(6, 10, 28, 0.72); font: inherit; font-size: 16px; }
.archive-tournament-empty { padding: 24px; border: 1px solid var(--line); border-radius: 18px; color: var(--text-muted); text-align: center; }
.status-badge.review { color: #ffe293; background: rgba(255, 202, 56, 0.1); }

.archive-tournament-hero { margin-top: 12px; }
.archive-side-balance { margin: 16px 0 0; padding: 18px 20px; }
.archive-side-balance > div { display: flex; justify-content: space-between; gap: 18px; color: var(--text-secondary); font-size: 13px; }
.archive-side-balance > div span { display: inline-flex; align-items: center; gap: 6px; }
.archive-side-balance > div i { width: 9px; height: 9px; border-radius: 50%; }
.archive-side-balance .is-red i { background: #ef4657; box-shadow: 0 0 12px rgba(239, 70, 87, 0.45); }
.archive-side-balance .is-black i { border: 1px solid rgba(255,255,255,0.44); background: #111522; box-shadow: 0 0 12px rgba(255,255,255,0.12); }
.archive-side-balance b { color: white; }
.archive-side-track { display: block; height: 10px; margin-top: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; background: linear-gradient(90deg, #252b3a, #080a10); box-shadow: inset 0 1px 3px rgba(255,255,255,0.08); }
.archive-side-track > i { display: block; height: 100%; border-right: 2px solid rgba(255,255,255,0.7); background: linear-gradient(90deg, #ff6673, #bd263c); box-shadow: 3px 0 12px rgba(239,70,87,0.3); }
.archive-podium-section { background: radial-gradient(circle at 50% 0, rgba(108, 69, 255, 0.16), transparent 44%), var(--surface-gradient); }
.archive-podium-card .history-podium-score-label { font-size: 11px; }
.archive-tournament-table { margin-bottom: 16px; }
.archive-tournament-table .panel-heading { align-items: flex-start; }
.archive-tournament-table .archive-score strong { color: white; font-size: 16px; }
.archive-tournament-table .archive-score small { display: none; color: var(--text-muted); font-size: 9px; font-weight: 700; }
.archive-rank-row { --archive-medal: #d89669; background: linear-gradient(90deg, rgba(216,150,105,0.18), transparent 58%); box-shadow: inset 4px 0 var(--archive-medal); }
.archive-rank-row.is-rank-1 { --archive-medal: #ffc832; background: linear-gradient(90deg, rgba(255,200,50,0.22), transparent 64%); }
.archive-rank-row.is-rank-2 { --archive-medal: #aebcff; background: linear-gradient(90deg, rgba(174,188,255,0.19), transparent 58%); }
.archive-rank-row .rank,
.archive-rank-row .archive-score strong { color: var(--archive-medal); }
.archive-rank-row td:nth-child(2) a { color: white; font-weight: 800; }
.archive-rank-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--archive-medal) 20%, transparent), transparent 52%); }
.archive-tournament-games { margin-bottom: 16px; }

@media (max-width: 850px) {
  .game-archive-overview { grid-template-columns: minmax(0, 1fr); }
  .archive-record-grid { grid-template-columns: repeat(2, 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) {
  .eleven-product-hero { align-items: flex-start; }
  .eleven-hero-mark { width: 82px; height: 82px; padding: 7px; border-radius: 22px; }
  .archive-entrances { grid-template-columns: minmax(0, 1fr); }
  .archive-entrances a { min-height: 112px; }
  .archive-record-grid { grid-template-columns: minmax(0, 1fr); }
  .archive-record-card { min-height: 150px; }
  .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(4, minmax(0, 1fr)); min-height: 0; padding: 18px 12px; }
  .archive-year-grid span { grid-template-rows: auto 92px auto; }
  .archive-year-grid b { font-size: 13px; }
  .archive-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 14px; }
  .archive-tournament-grid { grid-template-columns: minmax(0, 1fr); }
  .archive-tournament-search { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .archive-game-list > a { grid-template-columns: minmax(0, 1fr) 12px; }
  .archive-game-list > a > strong { grid-column: 1; }
  .archive-tournament-table .table-scroll { overflow-x: hidden; }
  .archive-tournament-table .ranking-table { min-width: 0; }
  .archive-tournament-table .ranking-table th:nth-child(n+4),
  .archive-tournament-table .ranking-table td:nth-child(n+4) { display: none; }
  .archive-tournament-table .ranking-table th:nth-child(2),
  .archive-tournament-table .ranking-table td:nth-child(2) { width: 100%; }
  .archive-tournament-table .archive-score { min-width: 70px; }
  .archive-tournament-table .archive-score small { display: block; margin-top: 3px; }
  .game-archive-notice { min-width: 0; }
}