.results-history {
  min-width: 0;
  color: #e9eef6;
}

[data-results-history][hidden] { display: none !important; }

.results-history__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.results-history__eyebrow,
.results-history__best-label {
  color: #d8bc72;
  font: 700 11px "Cinzel", Georgia, serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.results-history__heading h2 {
  margin: 4px 0 0;
  color: #fff4d9;
  font: 700 clamp(18px, 2vw, 24px) "Cinzel", Georgia, serif;
}

.results-history__heading p {
  margin: 0;
  color: #b9c7da;
  font-size: 12px;
  text-align: right;
}

.results-history__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(212, 177, 97, .25);
}

.difficulty-dialog__tabs[hidden],
.difficulty-dialog__views[hidden] { display: none !important; }

.results-history__tabs button {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #bdcce0;
  font: 700 12px "Cinzel", Georgia, serif;
  cursor: pointer;
}

.results-history__tabs button[aria-selected="true"] {
  border-bottom-color: #e2bd68;
  color: #ffe6a8;
}

.results-history__tabs button:focus-visible,
[data-results-retry]:focus-visible {
  outline: 2px solid #ffe6a8;
  outline-offset: 2px;
}

.results-history__plot {
  padding: 4px 8px 0;
  border: 1px solid rgba(178, 205, 236, .12);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(21, 42, 68, .88), rgba(9, 22, 42, .5));
}

.results-history__svg {
  display: block;
  width: 100%;
  height: 164px;
  overflow: visible;
}

.results-history__scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #a58b56 rgba(9, 22, 42, .5);
}

.results-history__scroll:focus-visible,
.results-history__point:focus-visible { outline: 2px solid #ffe6a8; outline-offset: 3px; }

.results-history__point-topic {
  fill: #e3ecf8;
  font: 700 11px system-ui, sans-serif;
  pointer-events: none;
  paint-order: stroke;
  stroke: #11263e;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.results-history__hint {
  margin: 5px 6px 8px;
  color: #b5c4d6;
  font-size: 11px;
  line-height: 1.4;
}

.results-history__axis-label {
  fill: #b8c9dd;
  font: 10px system-ui, sans-serif;
}

.results-history__value {
  fill: #f6e4b5;
  font: 700 11px system-ui, sans-serif;
  pointer-events: none;
}

.results-history__baseline {
  stroke: rgba(184, 206, 226, .34);
  stroke-width: 1;
}

.results-history__line {
  fill: none;
  stroke: #9bb9d9;
  stroke-width: 2;
  stroke-linejoin: round;
}

.results-history__point {
  fill: #a4c4e5;
  stroke: #122b48;
  stroke-width: 2;
}

.results-history__point.is-top {
  fill: #f1cd75;
  stroke: #6e521b;
  stroke-width: 2;
}

.results-history__point.is-top-1 { stroke: #fff0bc; }
.results-history__point.is-top-2 { fill: #f2c452; stroke: #fff2b2; }
.results-history__point.is-top-3 { fill: #ced9e4; stroke: #f7fbff; }

.results-history__timeline {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 8px;
  color: #b5c4d6;
  font-size: 11px;
}

.results-history__scores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
}

.results-history__scores li {
  min-width: 0;
  padding: 5px;
  border-radius: 5px;
  background: rgba(149, 180, 211, .09);
  color: #cfdae7;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.results-history__best-label { margin: 16px 0 9px; }

.results-history__tops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.results-history__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(232, 190, 98, .28);
  border-radius: 8px;
  background: rgba(217, 170, 74, .07);
}

.results-history__top.is-top-1 {
  border-color: #c6a6ed;
  background: linear-gradient(130deg, rgba(255, 108, 138, .15), rgba(255, 211, 103, .12), rgba(109, 226, 195, .13), rgba(154, 140, 255, .16));
}
.results-history__top.is-top-2 { border-color: #f2c452; background: rgba(242, 196, 82, .14); }
.results-history__top.is-top-3 { border-color: #ced9e4; background: rgba(206, 217, 228, .12); }
.results-history__top.is-top-1 .results-history__rank {
  background: linear-gradient(90deg, #ff8da3, #ffe07a, #79e6ca, #b7a6ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.results-history__top.is-top-2 .results-history__rank { color: #f2c452; }
.results-history__top.is-top-3 .results-history__rank { color: #ced9e4; }

.results-history__rank { color: #e2bb69; font-size: 11px; font-weight: 800; }
.results-history__top strong { color: #fff0c2; font: 800 20px "Cinzel", Georgia, serif; text-align: right; }
.results-history__date { grid-column: 1 / -1; color: #cdd8e5; font-size: 11px; }
.results-history__topic { grid-column: 1 / -1; overflow-wrap: anywhere; color: #adbed3; font-size: 11px; }
.results-history__empty,
.results-history__state { margin: 12px 0; padding: 22px 8px; color: #c6d2df; text-align: center; }

.results-history--profile { margin: 8px 0 18px; }
.results-history--profile .results-history__plot { padding-top: 0; }
.results-history--profile .results-history__svg { height: 164px; }
.results-history--profile .results-history__tops { gap: 5px; }
.results-history--profile .results-history__top { padding: 7px; }
.results-history--profile .results-history__top strong { font-size: 16px; }

.results-history__matches {
  margin-top: 10px;
  color: #d1deeb;
}

.results-history__matches[hidden] { display: none; }
.results-history__matches h3 { margin: 6px 0; color: #ffe7aa; font-size: 13px; }
.results-history__matches ol { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; }
.results-history__matches li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 9px; border: 1px solid rgba(232, 190, 98, .18); border-radius: 6px; }
.results-history__matches li strong { color: #fff2cb; }
.results-history__matches li small { color: #b8c9dc; }

@media (max-width: 600px) {
  .results-history__heading { align-items: start; flex-direction: column; }
  .results-history__heading p { text-align: left; }
  .results-history__tops { gap: 5px; }
  .results-history__top { padding: 7px; }
  .results-history__top strong { font-size: 16px; }
  .results-history__date,
  .results-history__topic { font-size: 10px; }
  .results-history__scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}