/* The game page (views/pages/gameDetail.jte and its _game*.jte partials); shared table rules in dense.css.
   The teams' colors in the deserve-to-win bars and the shot map are --team-away and --team-home, set on .game-page
   from app.web.TeamColors (two of the clubs' colors that are easy to tell apart); without them, blue and orange. */
.game-page { --away-c: var(--team-away, var(--link)); --home-c: var(--team-home, var(--orange)); }

.game-page col.c-n { width: 48px; }
.game-page col.c-s { width: 30px; }
.game-page col.c-po { width: 64px; }
.game-page col.c-dl { width: 64px; }
.game-page col.c-no { width: 26px; }
.game-page col.c-toi { width: 50px; }
.game-page col.c-rt { width: 104px; }
.game-page .ratings col.c-n { width: 42px; }
.game-page .ratings col.c-toi { width: 44px; }
.game-page col.c-clk { width: 44px; }
.game-page col.c-tm { width: 80px; }
.game-page col.c-sc { width: 64px; }

/* The matchup header: away and home with their logos, the score or start time between them */
.game-page h1.matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    gap: 0 28px; max-width: 640px; margin: 10px auto 0; font-size: 16px; }
.matchup .side { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--fg-strong);
    text-align: center; min-width: 0; }
.matchup .side:hover { text-decoration: none; }
.matchup .side:hover .nm { text-decoration: underline; }
.matchup .mlogo { width: 84px; height: 64px; object-fit: contain; display: block; }
.matchup .mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.matchup .score { font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; display: flex; gap: 10px; }
.matchup .score .lose { color: var(--muted); }
.matchup .at { font-size: 28px; line-height: 1; color: var(--muted); font-weight: 400; }
.matchup .state { font-size: 12px; font-weight: 600; color: var(--muted); }
.game-page .matchup-meta { text-align: center; max-width: none; margin: 6px 0 14px; }

/* Scoreboard: team, line score, total, shots, record */
.scoreboard { width: auto; min-width: 360px; max-width: 100%; table-layout: auto; font-size: 13px; }
.scoreboard .tm { min-width: 220px; }
.scoreboard .per { width: 34px; }
.scoreboard td.score { font-size: 15px; font-weight: 700; width: 40px; }
.scoreboard tr:not(.won) td.score { color: var(--muted); }
.scoreboard tr.won .tm { font-weight: 700; }
.scoreboard .rec { width: 130px; }
.scoreboard .pre { width: 64px; }
.scoreboard thead th.tm, .game-page .odds thead th.lead, .game-page .chances thead th.lead { color: var(--fg); font-weight: 700; }
/* Live, with the shot data: full-width bands. The scoreboard strip (line score, shots, xG) and deserve to win under
   it, both full width; the goals a period to a column; the shot map up to 1000px wide, centred. */
.score-strip .scoreboard { width: 100%; }
.scoreboard .xgc { width: 52px; }
.live-deserve { margin: 10px 0 0; }
.live-deserve .deserve-labels { font-size: 13px; }
.live-deserve .deserve-bar { height: 12px; }
.live-deserve .dense-note { margin: 5px 0 0; }
.goal-periods { display: grid; grid-template-columns: repeat(var(--periods, 3), minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.live-map { max-width: 1000px; margin: 0 auto; }
@media (max-width: 1000px) {
    .goal-periods { grid-template-columns: minmax(0, 1fr); }
    .goal-periods .goals + .goals { border-top: 0; }
}

/* The top row: the scoreboard beside the playoff odds, each half the page */
.game-top .scoreboard { width: 100%; }
.game-page .live { color: var(--goal-red); font-weight: 700; }

.game-page .goals td { vertical-align: top; }
.game-page .goals .vid { font-size: 10px; }
.game-page tr.in .tm { font-weight: 700; }

.game-page .video { position: relative; aspect-ratio: 16 / 9; background: var(--black); margin-bottom: 4px; }
.game-page .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Shot quality */
.deserve { margin: 4px 0 10px; cursor: help; }
.deserve-labels { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 3px; }
.deserve-bar { display: flex; height: 8px; background: var(--band-strong); }
.deserve-bar i { display: block; }
.deserve-bar .away { background: var(--away-c); }
.deserve-bar .home { background: var(--home-c); }
.xg-totals th.c { font-weight: 400; color: var(--muted); }
.rink-key { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); margin: 4px 0; }
.rink-key .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: -1px; margin: 0 4px; }
.rink-key .dot.away { background: var(--away-c); }
.rink-key .dot.home { background: var(--home-c); }
.rink { width: 100%; height: auto; display: block; }
.rink .rink-ice { fill: var(--band); stroke: var(--rule-strong); stroke-width: 0.5; }
.rink .rink-goal-line, .rink .rink-red-line { stroke: var(--neg); stroke-width: 0.35; opacity: 0.55; }
.rink .rink-blue-line { stroke: var(--link); stroke-width: 0.8; opacity: 0.35; }
.rink .rink-circle { fill: none; stroke: var(--neg); stroke-width: 0.3; opacity: 0.4; }
.rink .rink-crease { fill: var(--rink-crease); stroke: var(--neg); stroke-width: 0.3; opacity: 0.8; }
.rink .rink-net { fill: none; stroke: var(--fg-soft); stroke-width: 0.4; }
.rink .shot { fill-opacity: 0.12; stroke-width: 0.45; }
.rink .shot.away { fill: var(--away-c); stroke: var(--away-c); }
.rink .shot.home { fill: var(--home-c); stroke: var(--home-c); }
.rink .shot.goal { fill-opacity: 0.9; stroke: var(--fg-strong); stroke-width: 0.5; }
.xg-about { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.xg-about summary { cursor: pointer; color: var(--link); }
.xg-about p { margin-top: 4px; }

/* Player ratings: a bar centred on zero, then the number */
.game-page .positive { color: var(--pos); }
.game-page .negative { color: var(--neg); }
.game-page .ratings td.rt { white-space: nowrap; }
.rbar { position: relative; display: inline-block; width: 48px; height: 7px; margin-right: 6px; vertical-align: 0; background: var(--band-strong); }
.rbar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--muted); }
.rbar i { position: absolute; top: 0; bottom: 0; }
.rbar i.positive { left: 50%; background: var(--pos); }
.rbar i.negative { right: 50%; background: var(--neg); }

@media (max-width: 640px) {
    .scoreboard { min-width: 0; }
    .scoreboard .tm { width: auto; min-width: 0; }
    .scoreboard .rec, .scoreboard .pre { display: none; }
    .rbar { width: 40px; }
    .game-page h1.matchup { gap: 0 16px; margin-top: 6px; }
    .matchup .mlogo { width: 60px; height: 44px; }
    .matchup .score { font-size: 30px; }
}

/* Before and during the game: win chances, the teams side by side, the season series, leading scorers */
.game-page col.c-dt { width: 64px; }
.game-page col.c-lab { width: 180px; }
.game-page .chances tr.fav .tm { font-weight: 700; }
.game-page .chances + .deserve { margin-top: 8px; }
.game-page .tape thead th { font-weight: 700; color: var(--fg); }
.game-page .tape th.c { font-weight: 400; color: var(--muted); text-align: center; }
.game-page .tape .rlg { margin: 0 0 0 4px; }
.game-page .meetings tr.me td { font-weight: 700; }

@media (max-width: 640px) {
    .game-page col.c-lab { width: 112px; }
    .game-page .tape tr.l10 .mu { display: none; }
}

/* Game notes: by period, time in the period, the team with a stripe in its color, the kind, then the note (a bold
   headline, the detail under it). Below 640px the kind moves into the note. */
.game-page .game-notes col.c-nt { width: 46px; }
.game-page .game-notes col.c-kind { width: 104px; }
.game-page .game-notes td { white-space: normal; vertical-align: top; }
.game-page .game-notes td.nt { font-weight: 500; border-left: 3px solid transparent; }
.game-page .game-notes td.nt.away { border-left-color: var(--away-c); }
.game-page .game-notes td.nt.home { border-left-color: var(--home-c); }
.game-page .game-notes .kind-in { display: none; }
@media (max-width: 640px) {
    .game-page .game-notes col.c-kind { width: 0; }
    .game-page .game-notes td.kind { padding: 0; overflow: hidden; font-size: 0; }
    .game-page .game-notes .kind-in { display: inline; }
}