/* roflstats.com player pages (/players): loaded on those pages only, after site.css, whose
   tokens (--followed, --map-bg, the rank ramp) it uses. No inline styles (CSP style-src 'self'). */

/* Player pages (/players): the followed players' games on the map and their figures beside every rank */
.crumbs { font-size: 14px; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.section-lead { color: var(--muted); max-width: 80ch; }
.player-section { display: grid; gap: 12px; }
.player-section > *, .player-hero > *, .game-stage > * { min-width: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.section-head h2 { max-width: 60ch; }
.section-head p { margin: 0; }
.followed-col { color: var(--followed); font-weight: 650; }

.player-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.player-intro { display: grid; gap: 14px; align-content: start; }
.player-name { font-size: clamp(40px, 7vw, 68px); line-height: .95; font-weight: 800; letter-spacing: -0.025em; max-width: none; }
.player-rank { font-size: 17px; font-weight: 600; margin: -4px 0 0; }
.player-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px 18px; margin: 0; }
.player-facts > div { border-top: 2px solid var(--line); padding-top: 6px; }
.player-facts dt { font-size: 12px; color: var(--muted); }
.player-facts dd { margin: 0; font-size: 17px; font-weight: 650; }
.player-champs { display: flex; gap: 4px; }
.player-accounts { font-size: 13px; margin: 0; }
.champ-icon { border-radius: 50%; vertical-align: middle; background: var(--track); flex: none; }
.champ-icon-missing { display: inline-block; width: 24px; height: 24px; }
.champ-icon.team-blue { box-shadow: 0 0 0 2px #4cc2ff; }
.champ-icon.team-red { box-shadow: 0 0 0 2px #ff685c; }

.standouts { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--followed); border-radius: 0 8px 8px 0; padding: 10px 14px 6px; }
.standouts-head { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.standouts-table th, .standouts-table td { padding: 6px 8px 6px 0; }
.standouts-table tbody tr:last-child > * { border-bottom: 0; }
.standouts-table td.num { font-size: 16px; }

.recent-head { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.recent-list { list-style: none; margin: 0; padding: 0; display: grid; }
.recent-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon champ result kda" "icon when result kda"; align-items: center; column-gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.recent-list li:last-child a { border-bottom: 0; }
.recent-list a:hover .recent-champ { text-decoration: underline; }
.recent-list .champ-icon { grid-area: icon; }
.recent-champ { grid-area: champ; font-weight: 600; }
.recent-when { grid-area: when; font-size: 12px; }
.recent-result { grid-area: result; font-weight: 650; font-size: 14px; }
.recent-kda { grid-area: kda; font-size: 14px; min-width: 6.5em; text-align: right; }
.recent-result.is-win { color: #1a7f4b; }
.recent-result.is-loss { color: #b3261e; }
:root[data-theme="dark"] .recent-result.is-win { color: #4ccf8a; }
:root[data-theme="dark"] .recent-result.is-loss { color: #ff8a80; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .recent-result.is-win { color: #4ccf8a; }
  :root:not([data-theme="light"]) .recent-result.is-loss { color: #ff8a80; }
}

/* The game map: always on the dark map colours, whatever the theme */
.gamemap { background: var(--map-bg); color: #e6e8ee; border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 12px; }
.gm-main { display: grid; gap: 10px; min-width: 0; }
.gm-stage { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #05070a; }
.gm-stage:focus-visible { outline: 2px solid #f2c14e; outline-offset: 2px; }
.gm-stage .minimap { filter: saturate(.55) brightness(.6); }
.gm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-noscript { position: absolute; inset: auto 0 0; margin: 0; padding: 10px; background: rgba(0, 0, 0, .7); }
.gm-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.gm-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #f2c14e; color: #14171f; cursor: pointer; display: grid; place-items: center; }
.gm-play svg { width: 18px; height: 18px; fill: currentColor; }
.gm-play[data-state="paused"] .gm-icon-pause, .gm-play[data-state="playing"] .gm-icon-play { display: none; }
.gm-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gm-scrubber { display: grid; gap: 2px; min-width: 0; }
.gm-strip { display: block; width: 100%; height: 10px; }
.gm-mark { stroke-width: 2; }
.gm-mark-blue { stroke: #4cc2ff; }
.gm-mark-red { stroke: #ff685c; }
.gm-mark-followed { stroke: #f2c14e; stroke-width: 3; }
.gm-scrub { width: 100%; margin: 0; accent-color: #f2c14e; min-height: 24px; }
.gm-time { margin: 0; font-size: 15px; white-space: nowrap; }
.gm-time .muted, .gamemap .muted { color: #9aa3b2; }
.gm-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
.gm-speeds { display: inline-flex; border: 1px solid #2a2f3a; border-radius: 6px; overflow: hidden; }
.gm-speeds button { min-width: 40px; min-height: 36px; border: 0; border-right: 1px solid #2a2f3a; background: transparent; color: #e6e8ee; font: inherit; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.gm-speeds button:last-child { border-right: 0; }
.gm-speeds button[aria-pressed="true"] { background: #e6e8ee; color: #14171f; font-weight: 650; }
.gm-view { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; border: 0; margin: 0; padding: 0; }
.gm-view label, .gm-check { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; cursor: pointer; }
.gm-view input, .gm-check input { accent-color: #f2c14e; width: 16px; height: 16px; }
.gm-caption { margin: 0; font-size: 14px; color: #c3c9d4; }
.gm-caption a { color: #f2c14e; }

.gm-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.gm-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gm-team-head { font-size: 13px; font-weight: 650; margin-bottom: 4px; }
.gm-team-blue .gm-team-head { color: #4cc2ff; }
.gm-team-red .gm-team-head { color: #ff685c; }
.gm-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.gm-roster li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 13px; padding: 2px 4px; border-radius: 4px; }
.gm-roster li.is-followed { background: rgba(242, 193, 78, .14); box-shadow: inset 2px 0 0 #f2c14e; }
.gm-roster-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-you { color: #f2c14e; font-weight: 650; }
.gm-roster-kda { color: #c3c9d4; font-size: 12px; }
.gm-feed-head { font-size: 13px; font-weight: 650; }
.gm-feed { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: grid; gap: 2px; align-content: start; scrollbar-color: #2a2f3a transparent; }
.gm-feed li { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 4px; opacity: .42; }
.gm-feed li.is-past { opacity: 1; }
.gm-feed li.is-now { background: rgba(230, 232, 238, .1); }
.gm-feed li.is-mine .gm-feed-who { box-shadow: inset 0 -2px 0 #f2c14e; }
.gm-feed button { border: 0; background: transparent; color: #c3c9d4; font: inherit; font-size: 13px; min-width: 44px; min-height: 30px; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.gm-feed button:hover { color: #fff; text-decoration: underline; }
.gm-feed-who { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px; }
.gm-feed-arrow { color: #9aa3b2; }
.gm-feed-kind { font-size: 12px; color: #c3c9d4; }
.gm-feed-unseen { font-size: 11px; color: #14171f; background: #e6e8ee; border-radius: 3px; padding: 0 4px; }
/* the followed player's buffs and the chat and ping log beside the map */
.gm-buffs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; align-content: start; }
.gm-buff { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 6px; border-radius: 4px; background: rgba(230, 232, 238, .08); border-left: 3px solid #9aa3b2; font-size: 12.5px; line-height: 18px; }
.gm-buff .champ-icon { width: 16px; height: 16px; border-radius: 50%; }
.gm-buff-left, .gm-buff-none { color: #9aa3b2; }
.gm-buff-none { font-size: 13px; line-height: 22px; }
.gm-bg-objective { border-left-color: #b48cff; }
.gm-bg-jungle { border-left-color: #4ccf8a; }
.gm-bg-consumable, .gm-bg-item { border-left-color: #e6e8ee; }
.gm-bg-summoner { border-left-color: #ffd27a; }
.gm-bg-rune { border-left-color: #7fe0d0; }
.gm-bg-debuff, .gm-bg-cc { border-left-color: #ff8a80; }
.gm-log { list-style: none; margin: 4px 0 0; padding: 0 4px 0 0; height: 168px; overflow-y: auto; font-size: 13px; line-height: 1.35; scrollbar-color: #2a2f3a transparent; overflow-wrap: anywhere; }
.gm-log-line { padding: 2px 4px; border-radius: 4px; }
.gm-log-line.is-mine { box-shadow: inset 2px 0 0 #f2c14e; }
.gm-log-t { color: #9aa3b2; font-size: 12px; margin-right: 6px; }
.gm-log-line .champ-icon { width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: 4px; }
.gm-log-who { font-weight: 650; }
.team-blue > .gm-log-who { color: #4cc2ff; }
.team-red > .gm-log-who { color: #ff685c; }
.is-mine > .gm-log-who { color: #f2c14e; }
.is-ping .gm-log-text { color: #b4bccb; }
.gm-log-empty { color: #9aa3b2; padding: 2px 4px; }

.gm-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.gm-key li { display: inline-flex; align-items: center; gap: 6px; }
.gm-key i { display: inline-block; flex: none; }
.gm-key-ring { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid; background: var(--map-bg); }
.gm-key-followed { border-color: #f2c14e; }
.gm-key-blue { border-color: #4cc2ff; }
.gm-key-red { border-color: #ff685c; }
.gm-key-seen { border: 2px dashed var(--muted); background: transparent; }
.gm-key-cross { width: 12px; height: 12px; background: linear-gradient(45deg, transparent 42%, var(--muted) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--muted) 42% 58%, transparent 58%); }
.gm-key-ward { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.gm-key-control { width: 10px; height: 10px; background: var(--muted); transform: rotate(45deg); margin-left: 8px; }
.gm-key-minion { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.gm-key-attack { width: 16px; height: 2px; background: var(--muted); }
.gm-key-hit { width: 12px; height: 12px; border-width: 2px; border-color: var(--muted); margin-left: 8px; }
.gm-key-turret { width: 9px; height: 9px; background: var(--muted); }
.gm-key-inhib, .gm-key-nexus { width: 11px; height: 11px; margin-left: 8px; background: var(--muted); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.gm-key-nexus { width: 15px; height: 15px; }
.gm-key-camp { width: 9px; height: 9px; border-radius: 50%; background: rgb(126, 214, 138); }
.gm-key-ping { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); font: 800 10px/12px system-ui, sans-serif; font-style: normal; text-align: center; }

/* Rank charts */
.player-ranks { margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.chart-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.chart-filter { display: flex; align-items: center; gap: 8px; }
.chart-filter-label { font-size: 13px; font-weight: 650; color: var(--muted); }
.pills { list-style: none; margin: 0; padding: 0; display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); }
.pills a { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: var(--text); text-decoration: none; border-right: 1px solid var(--line); white-space: nowrap; font-size: 14px; }
.pills li:last-child a { border-right: 0; }
.pills a[aria-current="page"] { background: var(--text); color: var(--surface); font-weight: 650; }
.pills a[aria-current="page"] .muted { color: inherit; opacity: .75; }
.rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rank-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px 8px; display: grid; gap: 2px; align-content: start; }
.rank-card figcaption { display: grid; }
.rank-card-name { font-weight: 650; }
.rank-card-of { font-size: 12px; color: var(--muted); }
.rank-card-figure { margin: 6px 0 0; }
.rank-card-value { font-size: 26px; font-weight: 750; color: var(--followed); letter-spacing: -0.01em; }
.rank-card-interval { font-size: 13px; }
.rank-card-closest { font-size: 13px; margin: 0; min-height: 20px; }
.rank-svg { display: block; width: 100%; height: auto; overflow: visible; margin-top: 4px; }
.rank-band { fill: var(--followed-band); }
.rank-line { stroke: var(--followed); stroke-width: 2.5; }
.rank-dot { stroke: var(--surface); stroke-width: 2; }
.rank-whisker { stroke-width: 2; stroke-linecap: round; }
.g-stroke-iron-iv, .g-stroke-iron-i-iii { stroke: var(--g-r1); }
.g-stroke-bronze, .g-stroke-silver { stroke: var(--g-r2); }
.g-stroke-gold, .g-stroke-platinum { stroke: var(--g-r3); }
.g-stroke-emerald, .g-stroke-diamond { stroke: var(--g-r4); }
.g-stroke-master, .g-stroke-grandmaster { stroke: var(--g-r5); }
.g-stroke-challenger { stroke: var(--g-r6); }
.rank-legend { font-size: 13px; max-width: 100ch; }
.rank-card-none { font-size: 13px; }

/* Heat maps: the person beside a rank group */
.vs-form { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.vs-form select { min-height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.vs-submit { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.heat-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.heat-block { display: grid; gap: 6px; }
.heat-block:first-child h3 { color: var(--followed); }
.map-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Deaths map: real places, one side's games at a time (the radios switch without script) */
.deaths-figures-all { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.deaths-figures-all p { margin: 0; }
.deaths-big { font-size: 15px; font-weight: 600; }
.deaths-big .num { font-size: 30px; font-weight: 750; color: var(--followed); margin-right: 4px; }
.side-switch { display: grid; gap: 10px; }
.side-pills { margin: 0; padding: 0; justify-self: start; }
.side-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.side-label { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-right: 1px solid var(--line); cursor: pointer; font-size: 14px; white-space: nowrap; }
.side-pills .side-label:last-of-type { border-right: 0; }
.side-radio:checked + .side-label { background: var(--text); color: var(--surface); font-weight: 650; }
.side-radio:checked + .side-label .muted { color: inherit; opacity: .75; }
.side-radio:focus-visible + .side-label { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-switch:has([value=blue]:checked) .side-red, .side-switch:has([value=red]:checked) .side-blue { display: none; }
.deaths-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.deaths-map { max-width: 520px; }
.death-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.death-dot { fill: rgba(230, 232, 238, .55); stroke: #0b0d12; stroke-width: 40; }
.death-dot.is-unseen { fill: #f2c14e; }
.deaths-figures { display: grid; gap: 8px; align-content: start; max-width: 46ch; }
.deaths-figures p { margin: 0; }
.death-key { width: 10px; height: 10px; border-radius: 50%; background: #9aa3b2; border: 1px solid #0b0d12; }
.death-key.is-unseen { background: #f2c14e; }
@media (min-width: 900px) { .deaths-pair { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); } }

/* Games list */
.player-games td { padding-top: 4px; padding-bottom: 4px; }
.player-games .nowrap { white-space: nowrap; }
.games-champ { white-space: nowrap; }
.games-champ > span:first-of-type { margin-left: 6px; }
.games-result { font-weight: 650; }
.is-win .games-result { color: #1a7f4b; }
.is-loss .games-result { color: #b3261e; }
.is-remake .games-result { color: var(--muted); }
.opening { display: block; border-radius: 4px; background: var(--map-bg); }
.opening image { filter: grayscale(1) brightness(.55); }
.opening polyline { fill: none; stroke: #f2c14e; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.games-open { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }

/* Game page */
.game-head { display: grid; gap: 14px; }
.game-title { display: flex; align-items: center; gap: 14px; }
.game-champ { box-shadow: 0 0 0 3px var(--followed); }
.game-result { margin: 2px 0 0; font-size: 16px; font-weight: 650; }
.game-result.is-win { color: #1a7f4b; }
.game-result.is-loss { color: #b3261e; }
.game-steps { display: flex; gap: 16px; font-size: 14px; }
.game-steps a { display: inline-flex; align-items: center; min-height: 40px; }
.game-stage { display: grid; gap: 10px; }
.game-figures th .muted { display: block; font-weight: 400; font-size: 12px; }

/* Players index */
.players-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.players-item { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--followed); border-radius: 0 0 8px 8px; padding: 14px 16px; display: grid; gap: 10px; }
.players-link { display: grid; gap: 2px; text-decoration: none; color: var(--text); }
.players-name { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.players-link:hover .players-name { text-decoration: underline; text-decoration-thickness: 2px; }
.players-rank { color: var(--muted); font-weight: 600; }
.players-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.players-facts dt { font-size: 12px; color: var(--muted); }
.players-facts dd { margin: 0; font-weight: 650; }
.players-champs { display: flex; gap: 6px; margin: 0; }

/* Players search */
.players-find-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0; }
.players-find-field { display: grid; gap: 4px; }
.players-find-field label { font-weight: 600; }
.players-find-form input, .players-find-form button { min-height: 44px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.players-find-form input { width: 16rem; max-width: 100%; padding: 0 10px; }
.players-find-form button { padding: 0 16px; font-weight: 600; cursor: pointer; }
.players-find-form button:hover { background: var(--track); }

@media (min-width: 900px) {
  .player-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; }
  .heat-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the map, its controls and the clock fit in one screen */
  .gamemap:not(.gamemap-compact) { grid-template-columns: minmax(0, min(720px, calc(100vh - 150px))) minmax(280px, 1fr); align-items: start; }
  .gamemap:not(.gamemap-compact) .gm-feed { max-height: min(420px, calc(100vh - 470px)); min-height: 160px; }
  .gamemap:not(.gamemap-compact) .gm-side:has(.gm-log-box:not([hidden])) .gm-feed { max-height: min(300px, calc(100vh - 740px)); min-height: 120px; }
  .player-latest .gm-stage { max-width: calc(100vh - 170px); margin: 0 auto; width: 100%; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .is-win .games-result, :root:not([data-theme="light"]) .game-result.is-win { color: #4ccf8a; }
  :root:not([data-theme="light"]) .is-loss .games-result, :root:not([data-theme="light"]) .game-result.is-loss { color: #ff8a80; }
}
:root[data-theme="dark"] .is-win .games-result, :root[data-theme="dark"] .game-result.is-win { color: #4ccf8a; }
:root[data-theme="dark"] .is-loss .games-result, :root[data-theme="dark"] .game-result.is-loss { color: #ff8a80; }

/* Whole-game figures */
.player-stats .rank-grid { margin-bottom: 8px; }
.stats-head { margin: 26px 0 10px; font-size: 17px; }
.stats-sub { margin: 14px 0 6px; font-weight: 600; }
.stats-note { font-size: 13px; }
.stat-facts { margin: 6px 0 4px; }
.stat-table td .muted { display: block; font-size: 12px; }
.ward-places { margin-top: 6px; }
.ward-dot { fill: rgba(242, 193, 78, .7); stroke: #0b0d12; stroke-width: 25; }
.minute-chart { margin: 0; max-width: 640px; }
.minute-svg { width: 100%; height: auto; display: block; }
.bar-kills { fill: #4cc2ff; }
.bar-deaths { fill: #ff685c; }
.bar-group { stroke: var(--text); stroke-width: 2.5; }
.key-kills, .key-deaths { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.key-kills { background: #4cc2ff; }
.key-deaths { background: #ff685c; }
.key-group { display: inline-block; width: 14px; height: 2.5px; background: var(--text); margin-right: 6px; vertical-align: 3px; }
.minute-chart .gm-key { margin-top: 6px; gap: 4px 14px; }

/* Game review: the team's win chance, its biggest swings, the late-game objectives */
.review-chart { margin: 0; max-width: 540px; }
.review-chart .gm-key { margin-top: 6px; }
.review-svg { width: 100%; height: auto; display: block; overflow: visible; }
.review-even { stroke: var(--muted); stroke-dasharray: 4 3; }
.review-line { fill: none; stroke: var(--followed); stroke-width: 2; stroke-linejoin: round; }
.review-mark { stroke: var(--surface); stroke-width: 1.5; }
.review-mark.team-blue { fill: #4cc2ff; }
.review-mark.team-red { fill: #ff685c; }
.key-review-line { width: 14px; height: 2.5px; background: var(--followed); margin-right: 6px; vertical-align: 3px; }
.key-review-objective, .key-review-swing { width: 9px; height: 9px; margin-right: 6px; background: var(--muted); }
.key-review-objective { transform: rotate(45deg); }
.key-review-swing { border-radius: 50%; }
.review-swings { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.review-change.is-up { color: var(--up); }
.review-change.is-down { color: var(--down); }
.review-objectives td { vertical-align: top; }
.review-odds summary { cursor: pointer; }
.review-cases { margin: 6px 0 0; display: grid; gap: 2px; font-size: 13px; }
.review-cases div { display: flex; justify-content: space-between; gap: 10px; }
.review-cases dd { margin: 0; }
.review-note { font-size: 13px; max-width: 80ch; }
/* phone: one block per objective instead of five columns */
@media (max-width: 600px) {
  .review-objectives, .review-objectives tbody { display: block; }
  .review-objectives thead { display: none; }
  .review-objectives tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .review-objectives td { padding: 0; border: 0; text-align: left; }
  .review-objectives td:nth-child(n+3) { grid-column: 1 / -1; }
  .review-objectives td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
}