#history { container-type: inline-size; }
.match-card {
  position: relative;
  display: grid;
  grid-template-columns: 130px 270px minmax(210px,1fr) 280px;
  gap: 14px;
  padding: 6px 14px 20px;
  margin: 8px 0;
  border-radius: 5px;
  border-top: 0;
  border-left-width: 4px;
  align-items: center;
}
.match-card.win, .match-card.win:hover { background: #18362f; border-left-color: #4bb59b; }
.match-card.loss, .match-card.loss:hover { background: #3c2632; border-left-color: #d76882; }
.match-card.remake, .match-card.remake:hover { background: #282b35; border-left-color: #8c94a6; }
.match-card a { text-decoration: none; }
.match-card a:hover { filter: brightness(1.18); }
.match-card a:focus-visible { outline: 2px solid #bdb5ef; outline-offset: 3px; }
.match-result { display: flex; flex-direction: column; gap: 5px; font-size: 14px; min-width: 0; }
.match-result .queue-label { font-size: 12px; margin-bottom: 2px; }
.match-result small { color: #b4bfd1; font-size: 12px; }
.match-result>strong:nth-of-type(2) { margin-top: 7px; }
.match-open { position: absolute; bottom: 3px; right: 14px; color: #c7d8f2; font-size: 10px; }
.match-build { min-width: 0; }
.match-combat { display: flex; align-items: center; gap: 5px; }
.history-champion { position: relative; flex-shrink: 0; margin-right: 2px; }
.match-card .history-champion .portrait { width: 56px; height: 56px; border-radius: 50%; }
.champ-level { position: absolute; bottom: -3px; right: -1px; background: #0a1420; border-radius: 8px; padding: 1px 4px; font-size: 12px; }
.history-spells, .history-runes { display: grid; gap: 3px; }
.history-spells>span, .history-runes>span { width: 23px; height: 23px; display: inline-flex; background: #111e2b; border-radius: 3px; }
.history-spells img, .history-runes img { width: 100%; height: 100%; border-radius: 3px; object-fit: contain; }
.history-runes>span { background: transparent; }
.history-kda { display: flex; flex-direction: column; gap: 5px; margin-left: 6px; white-space: nowrap; }
.history-kda strong { font-size: 18px; }
.history-kda small { color: #b9c4d8; font-size: 13px; }
.history-items { display: flex; gap: 3px; margin-top: 8px; align-items: center; }
.history-item { width: 29px; height: 29px; background: #11203180; border-radius: 4px; display: inline-flex; flex-shrink: 0; border: 1px solid #ffffff14; }
.history-item img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.history-item.quest { margin-left: 3px; border-color: #879295; border-radius: 50%; }
.history-item.quest img { border-radius: 50%; }
.history-item.trinket { margin-left: 3px; border-color: #bbad68; border-radius: 50%; }
.history-item.trinket img { border-radius: 50%; }
.history-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; gap: 12px 18px; font-size: 14px; line-height: 1.4; color: #b9c4d8; border-left: 1px solid #ffffff18; padding-left: 16px; font-variant-numeric: tabular-nums; }
.history-stats strong { color: #eef3fc; font-size: 18px; font-weight: 700; }
.history-stats small { font-size: 12px; white-space: nowrap; }
.history-teams { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; min-width: 0; }
.history-team { min-width: 0; }
.history-team:only-child { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 10px; }
.history-team:only-child .team-label { grid-column: 1/-1; }
.team-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #adb9cd; display: block; margin-bottom: 3px; }
.history-player { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 1px 0; color: #b9c4d8; }
.match-card .history-player .portrait { width: 18px; height: 18px; border-radius: 3px; font-size: 10px; }
.history-player>span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.history-player.is-self { color: white; font-weight: 700; }
@container (max-width: 1000px) {
  .match-card { grid-template-columns: 130px minmax(260px,1fr) 210px; }
  .history-teams { grid-column: 2/-1; }
}
@container (max-width: 720px) {
  .match-card { grid-template-columns: 100px minmax(0,1fr); gap: 14px; }
  .history-stats { grid-column: 2; flex-direction: row; flex-wrap: wrap; border: 0; padding: 0; gap: 10px 16px; }
  .history-teams { grid-column: 1/-1; }
}
@container (max-width: 440px) {
  .match-card { padding: 8px 12px 20px; grid-template-columns: minmax(0,1fr); gap: 14px; }
  .match-result { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
  .match-result>strong:nth-of-type(2) { margin-top: 0; }
  .history-stats,.history-teams { grid-column: 1; }
  .history-item { width: 28px; height: 28px; }
}

.match-outcome{display:flex;align-items:baseline;gap:6px;flex-wrap:nowrap}.match-outcome .match-lp{font-size:12px;white-space:nowrap}.history-player{line-height:18px}.history-stats>span{min-width:0}

.arena-more{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px;border:1px dashed #ffffff30;border-radius:5px;font-size:12px}.arena-more small,.arena-team-missing{font-size:11px;color:#b9c4d8}.arena-team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}.arena-team-card{margin:0}.arena-participant{padding:14px 16px;border-top:1px solid var(--line)}.arena-player-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.arena-player-heading>.who{min-width:0}.arena-player-heading>.who>div{min-width:0}.arena-player-heading .identity{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arena-player-heading>strong{white-space:nowrap;font-size:13px}.arena-player-stats{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--muted)}.arena-player-stats strong{color:var(--text)}.arena-participant .history-items{flex-wrap:wrap}
@media(max-width:800px){.arena-team-grid{grid-template-columns:minmax(0,1fr)}}

.arena-player-heading .who{display:flex;align-items:center;gap:8px}.arena-player-heading .who small{display:block}

.match-card .match-lp{font-size:18px;font-weight:800;line-height:1.2;border:1px solid currentColor;border-radius:4px;padding:3px 6px}

.match-outcome>strong:first-child{flex-shrink:0;white-space:nowrap}.match-card .match-lp{min-width:0;flex:0 1 auto}
.match-timeline-panel{margin-top:20px;padding-bottom:14px}.match-timeline-panel>p,.match-skills>p{padding:0 20px;font-size:12px;line-height:1.6}.match-timeline-panel>.load{margin:0 20px}.match-gold-chart{display:block;width:100%;height:auto;max-height:340px}.match-gold-chart text{fill:#93a3bc;font-size:12px}.gold-grid{stroke:#303b4d;stroke-width:1}.gold-blue{color:#29a6c9}.gold-red{color:#f45c64}.gold-area{fill:currentColor;opacity:.36}.gold-line{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round}.gold-point{fill:transparent;stroke:transparent}.gold-point:hover,.gold-point:focus{fill:#e8edf6;stroke:#719bff;outline:none}.gold-caption{text-align:center}.match-skills{grid-column:1/-1;padding-bottom:18px;min-width:0}.skill-order-scroll{overflow-x:auto;padding:0 16px}.skill-order-table{width:100%;border-spacing:3px;min-width:590px;table-layout:fixed}.skill-order-table th{padding:3px 0;color:#93a3bc;font-size:12px;text-align:center}.skill-order-table td{height:29px;border-radius:3px;background:#222c3e;text-align:center;font-size:13px;font-weight:bold}.skill-order-table td.skill-upgrade{background:#29a6c9;color:white}.skill-order-table td:focus{outline:2px solid white}.skill-order-table th:first-child{width:34px}.skill-order-table img{width:30px;height:30px;border-radius:4px;object-fit:cover}.timeline-warning{color:#edbd70}

.skill-order-table{border-collapse:separate}

.gold-tooltip{position:fixed;z-index:1000;padding:12px 14px;border:1px solid #303b4d;border-radius:5px;background:#1c2637;box-shadow:0 5px 16px #0004;pointer-events:none;color:#a6afbf;font-size:14px;white-space:nowrap}.gold-tooltip[hidden]{display:none}.gold-tooltip strong{color:#e4eaf5}.gold-hover-marker line{stroke:#93a3bc;stroke-dasharray:3 3;opacity:.7}.gold-hover-marker circle{fill:#e8edf6;stroke:#719bff;stroke-width:2}