/* the in-game screen: you against players one tier up, your lane, your build and the scoreboard */
/* one snap screen tall; the panels take their content height in an 8 + 4 layout, centred at the app width */
.game-page {
  --cp-gap: 12px;
  height: 100vh;
  padding: var(--space-8) var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.game-page > * { width: 100%; max-width: var(--page-max-app); margin-inline: auto; }
.gm-head { flex: none; position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--space-8); min-width: 0; padding: var(--space-6) var(--space-8); overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--edge-light); }
.gm-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gm-art) 50% 22% / cover no-repeat; opacity: .3; -webkit-mask-image: linear-gradient(90deg, #000 10%, transparent 60%); mask-image: linear-gradient(90deg, #000 10%, transparent 60%); }
.gm-portrait { flex: none; width: 64px; height: 64px; border-radius: var(--radius-lg); border: 1px solid color-mix(in oklch, var(--amber) 55%, transparent); box-shadow: 0 6px 16px -6px rgb(0 0 0 / .8); }
.gm-title { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.gm-name { font: 700 var(--fs-2xl)/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; text-shadow: 0 2px 12px rgb(0 0 0 / .8); }
.gm-role { width: 16px; height: 16px; color: var(--amber); }
.gm-clock { flex: none; padding-left: var(--space-8); border-left: 1px solid var(--hairline-strong); font: 600 44px/1 var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-1); }
.gm-clock.over { font-size: var(--fs-lg); color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.gm-versus { min-width: 0; max-width: 300px; padding-left: var(--space-8); border-left: 1px solid var(--hairline-strong); font: 500 13px/1.4 var(--font-ui); color: var(--text-2); }
.gm-versus b { color: var(--text-1); font-weight: 600; }
.gm-body {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "board build" "board timers" "stats tips";
  gap: var(--space-7);
}
.gm-body > .gm-board { grid-row: 1 / span 2; }
.gm-stats { grid-area: stats; }
.gm-board { grid-area: board; }
.gm-timers { grid-area: timers; }
.gm-build { grid-area: build; }
.gm-tips { grid-area: tips; }
.gm-empty { flex: 1; display: grid; place-items: center; max-width: 46ch; text-align: center; color: var(--text-2); font: 500 var(--fs-lg)/1.5 var(--font-ui); }
.gm-icon { display: block; width: 18px; height: 18px; fill: currentColor; color: var(--text-3); }
.gm-rows { display: flex; flex-direction: column; gap: var(--space-6); }
.gm-stat { display: grid; grid-template-columns: 20px 92px minmax(0, 1fr) 104px 76px; align-items: center; gap: var(--space-6); cursor: default; }
/* how far ahead or behind you have been over the game, against the same players */
.gm-trend svg { display: block; width: 76px; height: 24px; overflow: visible; }
/* CS has no exact number, so it is a line only: yours through the moments the count ticked up, the tier's dashed */
.gm-cs-row { grid-template-columns: 20px minmax(0, 1fr); }
.gm-cs-body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.gm-cs-legend { display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--font-ui); color: var(--text-3); white-space: nowrap; }
.gm-cs-legend span::before { content: ""; display: inline-block; width: 16px; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--amber); }
.gm-cs-legend .gm-cs-tier::before { border-top: 2px dashed var(--text-3); }
.gm-cs-legend .gm-cs-now { margin-left: auto; overflow: hidden; text-overflow: ellipsis; font: 500 12px/1 var(--font-mono); color: var(--text-2); }
.gm-cs-legend .gm-cs-now::before { display: none; }
.gm-cs-graph { display: block; width: 100%; height: 64px; border-bottom: 1px solid var(--line-2); }
.gm-cs-graph .tick { stroke: var(--line-slot); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gm-cs-graph .bench { fill: none; stroke: var(--text-3); stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.gm-cs-graph .mine { fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* your last exact point, so a line that only just started still shows where you are */
.gm-cs-graph .now { stroke: var(--amber); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gm-cs-graph .tail { stroke: var(--amber); stroke-width: 2.2; stroke-dasharray: 3 3; opacity: .6; vector-effect: non-scaling-stroke; }
.gm-trend .zero { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 2; }
.gm-trend .line { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.gm-trend .end.pos { fill: var(--pos); }
.gm-trend .end.neg { fill: var(--neg); }
.kda { white-space: nowrap; }
.kda i { margin: 0 .15em; font-style: normal; color: var(--text-3); }
.gm-value { font: 600 20px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-value small { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--text-3); }
/* the band is the middle two thirds of players one tier up, the line their average, the dot you */
.gm-track { position: relative; height: 10px; border-radius: var(--radius-sm); background: var(--bg-raised-2); }
.gm-band { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-sm); background: color-mix(in oklch, var(--text-3) 26%, transparent); }
.gm-mean { position: absolute; top: -3px; bottom: -3px; width: 2px; translate: -1px 0; background: var(--text-2); }
.gm-you { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; translate: -6px -50%; background: var(--amber); box-shadow: 0 0 0 2px var(--bg-panel); }
.gm-avg { font: 500 12px/1.2 var(--font-mono); color: var(--text-3); text-align: right; white-space: nowrap; }
.gm-avg b { font-weight: 600; }
.gm-note { font: 500 12px/1.35 var(--font-ui); color: var(--text-3); }
.gm-items { display: flex; gap: 3px; flex-wrap: wrap; }
.gm-items .pic { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1px solid var(--line-slot); }
.gm-path { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.gm-start { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line-slot); cursor: default; }
.gm-start .sublabel { margin-right: var(--space-2); }
.gm-start .num { margin-left: auto; }
.gm-next { display: flex; flex-direction: column; gap: 7px; padding-top: var(--space-5); border-top: 1px solid var(--line-slot); }
.gm-next-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); cursor: default; }
.gm-next-item .pic { width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--line-slot); }
.gm-next-head { display: flex; justify-content: space-between; }
.gm-next-name { min-width: 0; font: 500 13px/1.2 var(--font-ui); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-path-item { position: relative; }
.gm-path-item .pic { width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--line-slot); }
.gm-path-item.owned .pic { opacity: .45; filter: grayscale(.6); }
.gm-path-item.quest .pic { opacity: .7; border-style: dashed; border-color: var(--line-3); }
.gm-path-item.owned::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--pos) center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0e12' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5 9-10'/%3E%3C/svg%3E"); box-shadow: 0 0 0 2px var(--bg-panel); }
.gm-path-item.next .pic { border-color: var(--amber); box-shadow: var(--glow-amber); }
.gm-tip-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.gm-tip-cards .cp-style-text { -webkit-line-clamp: 2; font-size: 13px; }
.gm-tip-cards .cp-style { padding: 9px var(--space-5); gap: 9px; }
.gm-tip-cards .cp-glyph { width: 34px; height: 34px; border-radius: var(--radius-lg); }
.gm-tip-cards .cp-glyph svg { width: 20px; height: 20px; }
.gm-tip-cards .cp-card-side { font-size: 18px; }
/* the scoreboard by lane: each row puts a player beside the enemy in the same role, with their item gold difference between */
.gm-teams { display: grid; grid-auto-rows: 56px; margin: calc(-1 * var(--space-4)) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); }
.gm-lane-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; border-top: 1px solid var(--hairline); }
.gm-lane-row:first-child { border-top: none; }
/* your lane is one amber row across both teams, not half a row */
.gm-lane-row:has(.gm-player.you) { background: linear-gradient(90deg, color-mix(in oklch, var(--amber) 14%, transparent), color-mix(in oklch, var(--amber) 5%, transparent)); box-shadow: inset 0 1px 0 color-mix(in oklch, var(--amber) 35%, transparent), inset 0 -1px 0 color-mix(in oklch, var(--amber) 35%, transparent); }
.gm-lane-diff { align-self: center; font: 600 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: center; cursor: default; }
.gm-player {
  --portrait: 40px;
  --item-size: 24px;
  display: grid;
  grid-template-columns: var(--portrait) 96px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  min-height: 0;
  padding: 0 var(--space-5) 0 var(--card-pad);
  color: var(--text-2);
  cursor: default;
  box-shadow: inset 3px 0 0 var(--ally);
}
.gm-player.enemy { grid-template-columns: minmax(0, 1fr) 96px var(--portrait); padding: 0 var(--card-pad) 0 var(--space-5); box-shadow: inset -3px 0 0 var(--enemy); }
.gm-player.you { color: var(--text-1); box-shadow: inset 3px 0 0 var(--amber); }
.gm-player.you .champ .pic { box-shadow: 0 0 0 1.5px var(--amber); }
.gm-player .champ { position: relative; width: var(--portrait); height: var(--portrait); }
.gm-player .champ .pic { width: 100%; height: 100%; border-radius: var(--radius-lg); }
.gm-player.dead .champ img { filter: grayscale(1) brightness(.45); }
/* a player opens their profile: the row says so with the pointer and a hover */
.gm-player[data-riot-id] { cursor: pointer; }
.gm-player[data-riot-id]:hover { background: var(--bg-slot); }
.gm-player.you[data-riot-id]:hover { background: color-mix(in oklch, var(--amber) 8%, transparent); }
.gm-player-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; font: 500 12px/1 var(--font-ui); color: var(--text-2); }
.gm-player.you .gm-player-name { color: var(--text-1); }
/* the respawn sits in the portrait's upper part, sized with it, so the level badge never covers it */
.gm-player .respawn { position: absolute; inset: 0 0 34% 0; z-index: 1; display: grid; place-items: center; font: 700 calc(var(--portrait) * .34)/1 var(--font-mono); color: var(--neg); }
.gm-player .first-game { position: absolute; left: -6px; top: -6px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-app); color: var(--amber); }
.gm-player .first-game .ui-svg { width: 13px; height: 13px; }
.gm-player .lvl { position: absolute; right: -6px; bottom: -6px; z-index: 2; min-width: 20px; height: 18px; padding: 0 3px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--bg-app); font: 600 11px/1 var(--font-mono); color: var(--text-1); }
.gm-player-score { display: flex; flex-direction: column; gap: 3px; font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-player.enemy .gm-player-score { align-items: flex-end; }
.gm-player .gold { font-size: 12px; color: var(--text-3); }
/* champion.css drops card sentences on short screens; the game's power line is the panel's point, so it stays */
.gm-tips .cp-card-text.gm-power { display: block; }
.gm-player .gm-items { flex-wrap: nowrap; gap: 3px; }
.gm-player.enemy .gm-items { justify-content: flex-end; }
.gm-player .gm-items .pic, .gm-player .gm-items .empty { flex: none; width: var(--item-size); height: var(--item-size); }
.gm-player .gm-items .empty { border-radius: var(--radius-sm); border: 1px solid var(--line-2); }
.gm-trinket-gap { flex: none; width: 3px; }
/* objective timers in the header: a countdown until it spawns, "Up" once it is there, buffs in the taking team's colour */
.gm-objectives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.gm-obj { display: flex; align-items: center; gap: 14px; min-width: 0; height: 64px; padding: 0 14px 0 var(--space-5); border-radius: var(--radius-lg); background: var(--surface-0); border: 1px solid var(--hairline-strong); cursor: default; }
.gm-obj img { flex: none; width: 40px; height: 40px; }
.gm-obj-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gm-obj-name { font: 600 13px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.gm-obj-time { font: 600 24px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); }
.gm-obj.up { border-color: color-mix(in oklch, var(--pos) 60%, transparent); background: color-mix(in oklch, var(--pos) 10%, var(--surface-0)); }
.gm-obj.up .gm-obj-time { color: var(--pos); }
.gm-obj.soon { border-color: color-mix(in oklch, var(--amber) 60%, transparent); }
.gm-obj.soon .gm-obj-time { color: var(--amber); }
.gm-obj.buff.ally { border-color: var(--ally); }
.gm-obj.buff.enemy { border-color: var(--enemy); }
.gm-obj.buff .gm-obj-time { color: var(--text-1); }
/* after the game: the result and the way to its breakdown on the profile */
.gm-result-body { display: flex; align-items: center; gap: var(--space-7); min-height: 60px; }
.gm-result { font: 700 28px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--text-1); }
.gm-breakdown { margin-left: auto; display: flex; align-items: center; height: 34px; padding: 0 var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--amber); color: var(--amber); font: 600 13px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; }
.gm-breakdown:hover { background: color-mix(in oklch, var(--amber) 12%, transparent); }
/* team summary above the scoreboard: allies left, enemies right, the gold lead between */
.gm-summary { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 200px) minmax(0, 1fr); align-items: center; gap: 14px; padding-bottom: var(--space-6); border-bottom: 1px solid var(--hairline); }
.gm-side { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; min-width: 0; }
.gm-side.enemy { justify-content: flex-end; }
.gm-count { display: flex; align-items: center; gap: 5px; font: 600 16px/1 var(--font-mono); font-variant-numeric: tabular-nums; cursor: default; }
.gm-count img { width: 22px; height: 22px; }
.gm-count .gm-icon { width: 16px; height: 16px; }
.gm-dragons { display: flex; gap: 1px; }
.gm-dragons img { width: 22px; height: 22px; }
.gm-lead { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); cursor: default; }
.gm-lead-text { display: flex; align-items: center; gap: var(--space-3); font: 600 16px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.gm-lead-text .gm-icon { width: 16px; height: 16px; }
.gm-lead-bar { position: relative; width: 100%; height: 6px; border-radius: var(--radius-sm); background: var(--enemy); overflow: hidden; }
.gm-lead-bar span { position: absolute; inset: 0 auto 0 0; background: var(--ally); }
.gm-lead-bar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; translate: -1px 0; background: var(--bg-panel); }
.gm-ranks { display: inline-flex; align-items: center; gap: var(--space-3); cursor: default; }
.gm-ranks .emblem { --emblem: 34px; }
.gm-unranked { font: 600 12px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }