/* Event history (event-history.js): totals as big numbers, then one row per finished event, coloured by its placing
   like the results' podium. Colours are precomputed for Chromium 108. */
.as-events-panel[data-view="history"] #as-events-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; line-height: 1.2; }
.as-events-panel[data-view="history"] #as-events-title b { font-size: 19px; font-weight: 700; color: var(--text-color); }
.as-events-panel[data-view="history"] #as-events-title > span { font-size: 14px; font-weight: 600; color: var(--primary-color); overflow-wrap: anywhere; }
.as-events-panel[data-view="history"] #as-events-title small { display: inline; color: #aaa; font-size: 12px; font-weight: 400; }
.as-events-history-open > svg { flex: 0 0 auto; width: 13px; height: 13px; }
.as-events-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 3px 10px 3px 6px; border: 1px solid #555; border-radius: 3px; background: #2c2c2c; color: var(--text-color); font: 500 12px/18px "Montserrat", sans-serif; cursor: pointer; }
.as-events-back > span { font-size: 16px; line-height: 1; }
.as-events-back:hover { background: #383838; border-color: #777; }
/* A results name that opens the player's history: the name as it was, underlined on hover. */
.as-events-panel .as-events-history-name { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.as-events-panel .as-events-history-name:hover, .as-events-panel .as-events-history-name:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* My events and All events: plain tabs, underlined like the profile's. */
.as-history-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--border-color); }
.as-history-tab { position: relative; padding: 6px 12px 8px; border: 0; background: none; color: var(--text-color); font: 600 13px/18px "Montserrat", sans-serif; opacity: .7; cursor: pointer; }
.as-history-tab::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: transparent; }
.as-history-tab:hover { opacity: 1; }
.as-history-tab:hover::after { background: rgba(255,255,255,.5); }
.as-history-tab[aria-selected="true"] { opacity: 1; }
.as-history-tab[aria-selected="true"]::after { background: var(--primary-color); }
.as-history-tab:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }

.as-history-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; margin: 0 0 14px; }
.as-history-totals > div { padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: #262626; }
.as-history-totals dt { color: #aaa; font: 600 10px/1.4 "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.as-history-totals dd { margin: 2px 0 0; color: var(--text-color); font: 700 18px/1.2 "Montserrat", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-history-totals dd[data-sign="1"], .as-history-power[data-sign="1"] { color: #7fc77a; }
.as-history-totals dd[data-sign="-1"], .as-history-power[data-sign="-1"] { color: #e06a5f; }

.as-history-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.as-history-row { --place: #6b6b6b; --place-glow: rgba(255,255,255,.02); position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 8px 12px 8px 10px;
  border: 1px solid var(--border-color); border-left: 3px solid var(--place); border-radius: 6px; background: linear-gradient(90deg, var(--place-glow), rgba(255,255,255,.015) 55%) #242424;
  color: var(--text-color); font: 400 12px/1.4 "Montserrat", sans-serif; text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s; }
.as-history-row:hover { background-color: #2e2e2e; border-top-color: #555; border-right-color: #555; border-bottom-color: #555; }
.as-history-row:focus-visible, .as-history-row:has(> .as-history-open:focus-visible) { outline: 2px solid var(--primary-color); outline-offset: 2px; }
/* A history row's results button covers the whole row; the row's own buttons (See in match history) sit above it. */
.as-history-open { position: absolute; inset: 0; z-index: 0; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.as-history-open:focus-visible { outline: none; }
.as-history-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.as-history-match { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid #555; border-radius: 3px; background: #2c2c2c;
  color: var(--text-color); font: 600 10px/16px "Montserrat", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.as-history-match > svg { flex: 0 0 auto; width: 11px; height: 11px; }
.as-history-match:hover { background: #383838; border-color: var(--primary-color); color: var(--primary-color); }
.as-history-match:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.as-history-match.loading { opacity: .6; pointer-events: none; }
/* A grand prize stands out: the row gets a gold edge and glow, the prize a gold frame with its art and name. */
.as-history-row[data-grand] { border-color: rgba(215,168,78,.55); box-shadow: 0 0 0 1px rgba(215,168,78,.12), 0 0 14px rgba(215,168,78,.14); background: linear-gradient(90deg, var(--place-glow), rgba(215,168,78,.07) 70%, rgba(215,168,78,.13)) #242424; }
.as-history-row[data-grand]:hover { border-top-color: #d7a84e; border-right-color: #d7a84e; border-bottom-color: #d7a84e; }
.as-history-grand { --art-h: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border: 1px solid #d7a84e; border-radius: 4px;
  background: linear-gradient(135deg, rgba(215,168,78,.28), rgba(120,84,30,.22)); box-shadow: 0 0 10px rgba(215,168,78,.25), inset 0 0 0 1px rgba(255,230,170,.08); white-space: nowrap; }
.as-history-grand-art { display: flex; align-items: center; justify-content: center; min-width: 30px; color: #f0c86e; }
.as-history-grand-art > svg { width: 24px; height: 24px; }
.as-history-grand-text { display: flex; flex-direction: column; line-height: 1.1; }
.as-history-grand-text > small { color: #e2b75c; font: 700 9px/1.3 "Montserrat", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
.as-history-grand-text > b { color: #fff3d6; font: 800 16px/1.15 "Montserrat", sans-serif; text-shadow: 0 1px 2px #000; }
.as-history-row[data-place="1"] { --place: #d7a84e; --place-glow: rgba(215,168,78,.16); }
.as-history-row[data-place="2"] { --place: #c3c7cf; --place-glow: rgba(195,199,207,.09); }
.as-history-row[data-place="3"] { --place: #b8835a; --place-glow: rgba(184,131,90,.10); }
.as-history-place { display: flex; flex-direction: column; align-items: flex-start; }
.as-history-place b { color: var(--place); font: 600 24px/1 BeauMed, sans-serif; }
.as-history-row[data-place=""] .as-history-place b { color: #e06a5f; }
.as-history-place small { margin-top: 3px; color: #aaa; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.as-history-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.as-history-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.as-history-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.as-history-tag { flex-shrink: 0; padding: 0 5px; border-radius: 3px; background: rgba(215,168,78,.18); color: var(--primary-color); font: 700 10px/16px "Montserrat", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.as-history-tag.is-official { background: rgba(166,75,68,.25); color: #e3a59f; }
.as-history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; }
.as-history-when { margin-right: 4px; color: #bab1a4; font-weight: 600; white-space: nowrap; }
.as-history-meta > span:not(.as-history-when) { padding: 0 5px; border: 1px solid #4c4c4c; border-radius: 9px; background: #333; font-size: 11px; line-height: 15px; white-space: nowrap; }
.as-history-rewards { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 12px; }
.as-history-power { font: italic 800 24px/1 PowerBarlow, sans-serif; font-variant-numeric: tabular-nums; color: #cfcfcf; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.as-history-reward { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.as-history-reward > b { font: 700 13px "Montserrat", sans-serif; }
.as-history-reward .as-events-max-logo { font-size: 11px; }
.as-history-reward .as-events-max-logo img { width: 22px; height: 22px; }
/* All events: no place column; the winners on the right. */
.as-history-row.as-history-row-all { grid-template-columns: minmax(0, 1fr) minmax(0, max-content); }
.as-history-row.as-history-row-all[data-grand] { container: history-row / inline-size; grid-template-columns: minmax(0, 1fr) auto minmax(0, max-content); }
.as-history-prizes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* Too narrow for the event, its prizes and its winners side by side: the winners go under them, on one line from the
   left. The width each needs: about 300px for the event, 230px a prize and 280px the winners. */
@container history-row (max-width: 840px) {
  .as-history-row-all[data-grand="1"] .as-history-winners { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .as-history-row-all[data-grand="1"] .as-history-winners > small { flex-basis: auto; justify-content: flex-start; margin-bottom: 0; }
}
@container history-row (max-width: 1080px) {
  .as-history-row-all[data-grand="2"] .as-history-winners { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .as-history-row-all[data-grand="2"] .as-history-winners > small { flex-basis: auto; justify-content: flex-start; margin-bottom: 0; }
}
.as-history-winners { display: flex; flex-flow: row wrap; align-items: baseline; justify-content: flex-end; gap: 1px 10px; min-width: 0; max-width: 280px; }
.as-history-row .as-history-winners > small { display: flex; flex-basis: 100%; justify-content: flex-end; align-items: center; gap: 6px; margin-bottom: 1px; color: #d7a84e; font: 600 10px/1.4 "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.as-history-winner { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.as-history-row .as-history-winner small { display: inline; color: #aaa; font-size: 11px; font-weight: 400; }
.as-history-winner.is-you { color: var(--primary-color); }
.as-history-more { display: block; margin: 10px auto 0; }
.as-history-none { color: #8d8d8d; font-size: 11px; white-space: nowrap; }
.as-history-empty, .as-history-note { color: #aaa; font-size: 12px; text-align: center; }
.as-history-empty { margin: 26px 0; }
.as-history-note { margin: 12px 0 0; font-size: 11px; }

/* Narrow: the winnings move under the event's name. */
@media (max-width: 560px) {
  .as-history-row { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 10px; padding: 8px 10px 8px 8px; }
  .as-history-place b { font-size: 21px; }
  .as-history-side { grid-column: 2; flex-flow: row wrap; align-items: center; }
  .as-history-rewards { justify-content: flex-start; }
  .as-history-power { font-size: 21px; }
  .as-history-row.as-history-row-all, .as-history-row.as-history-row-all[data-grand] { grid-template-columns: minmax(0, 1fr); }
  .as-history-prizes { justify-content: flex-start; }
  .as-history-winners { justify-content: flex-start; max-width: none; }
  .as-history-row .as-history-winners > small { flex-basis: auto; justify-content: flex-start; }
  .as-history-totals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .as-history-totals > div { padding: 6px 8px; }
  .as-history-totals dd { font-size: 16px; }
}
/* The wide-screen sidebar panel is narrow too. */
.as-events-inline .as-history-row { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 10px; }
.as-events-inline .as-history-side { grid-column: 2; flex-flow: row wrap; align-items: center; }
.as-events-inline .as-history-rewards { justify-content: flex-start; }
.as-events-inline .as-history-row.as-history-row-all, .as-events-inline .as-history-row.as-history-row-all[data-grand] { grid-template-columns: minmax(0, 1fr); }
.as-events-inline .as-history-prizes { justify-content: flex-start; }
.as-events-inline .as-history-winners { justify-content: flex-start; max-width: none; }
.as-events-inline .as-history-row .as-history-winners > small { flex-basis: auto; justify-content: flex-start; }

/* An event's results: History on the right, Back (when there is one) on the left. */
.as-events-results-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.as-events-results-nav .as-events-back { margin: 0; }
.as-events-panel .as-events-results-history { gap: 5px; margin-left: auto; padding-left: 8px; }
.as-events-results-history > svg { flex: 0 0 auto; width: 13px; height: 13px; }