/* A terminal, not a dashboard: no rounded corners, no gradients, no shadows.
   Rules are drawn with box characters, selection is reverse video. */

:root {
  --bg: #000000;
  --panel: #000000;
  --rule: #2c2c2c;
  --ink: #ffffff;
  --ink-dim: #a9a9a9;
  --ink-faint: #6b6b6b;
  --blue: #5b8cff;
  --blue-deep: #10285e;
  --red: #ff4d5e;
  --green: #38d47a;
  --gold: #e0a92c;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
          "DejaVu Sans Mono", monospace;
  /* The alternating band in the feed, and the row under the pointer. A wash
     of white on black reads far fainter than the same wash of black on white,
     so the dark theme takes roughly twice as much of it. */
  --band: color-mix(in srgb, var(--ink) 9%, transparent);
  --band-hover: color-mix(in srgb, var(--ink) 17%, transparent);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --rule: #d4d4d4;
  --ink: #000000;
  --ink-dim: #4a4a4a;
  --ink-faint: #8a8a8a;
  --blue: #1a49c4;
  --blue-deep: #cfdbfb;
  --red: #c1121f;
  --green: #127a3d;
  --gold: #8a6100;
  --band: color-mix(in srgb, var(--ink) 5%, transparent);
  --band-hover: color-mix(in srgb, var(--ink) 12%, transparent);
}

/* Square corners everywhere: browsers round buttons and inputs by default
   and this page wants none of it. The chart's rings are the one thing
   that overrides this, being circles rather than boxes. */
* { box-sizing: border-box; border-radius: 0 !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  /* Safari inflates text in a block when it thinks the block is too narrow to
     read, which it does again on every turn of the phone. The bar is measured
     in characters, so text that quietly changes size under it is text that
     puts the wrong number of them in the row. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.25;
  /* Terminal renders greyscale-antialiased; match it rather than letting the
     browser thicken the strokes. */
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
}

#shell {
  max-width: 1100px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

/* ---- top line ---- */
#titlebar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
}
#titletext { color: var(--ink-dim); white-space: nowrap; }

/* The pickers travel as one unit, the way the status and the theme toggle
   do, so a narrow screen breaks the line between the title and them rather
   than between the two of them. */
#pickers {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

/* A season and a game on the game page, a season on the season page. One
   rule for all of them, since they are the same control asking about
   different things. */
#gamepick,
#seasonpick {
  appearance: none;
  font: inherit;
  font-size: 11px;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0 16px 0 5px;
  min-width: 0;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: right 7px center, right 3px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
/* The game names both teams and its date, so it is the one that needs room
   and the one that gives it up first when there is none. */
#gamepick { max-width: 34ch; }
#gamepick:hover,
#seasonpick:hover { color: var(--ink); border-color: var(--ink-faint); }
#gamepick:focus-visible,
#seasonpick:focus-visible { outline: 1px solid var(--blue); }
#theme {
  font: inherit;
  font-size: 11px;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .1em;
}
/* no brackets: those mean "status" on this bar, and this is a control */
#theme { text-decoration: underline; text-underline-offset: 3px; }
#theme:hover { color: var(--ink); }
#titletext b { color: var(--ink); font-weight: 600; }
/* The status and the theme toggle travel as one unit, so a long status like
   a kickoff date cannot strand the button on the row below it. */
#statusgroup {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.conn { text-transform: uppercase; letter-spacing: .1em; }
.conn.live { color: var(--green); }
.conn.stale { color: var(--gold); }
.conn::before { content: "["; }
.conn::after { content: "]"; }

/* ---- layout ---- */
#screen {
  padding: 10px 12px 4px;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: 16px;
}
#main { display: flex; flex-direction: column; min-height: 0; }
/* The feed is the only thing in the column that gives.
   
   A flex column shares a squeeze out across everything that can shrink, in
   proportion to how big each one is, so a window an inch too short took a
   few pixels off the score, the play tile and the feed alike. The tile has a
   reserved height precisely so the chart below it does not move when a play
   is longer than the last one, and a reserve that shrinks is not one. These
   hold their size and the feed absorbs the difference; it is a scroller, so
   losing height costs it nothing but a row. */
#head, #readout, #nowline { flex: none; }
/* The whole column scrolls, not just the player table at the bottom of it.
   Only that one did, so on a short desktop window the panels above it, the
   turning points and the swing table and the team stats, were simply cut off
   at the foot of the screen with no way to reach them. */
#side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  border-left: 1px solid var(--rule);
  padding-left: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
  /* macOS overlay scrollbars float above content, so the gutter is reserved
     by hand or the right-aligned stat values end up underneath the bar. */
  scrollbar-gutter: stable;
}
/* Nothing in the column shrinks. It is a scroller now, so its contents are
   taller than it is, and a flex child left to its default would be squeezed
   to fit: the turning points panel, which has a height of its own, was being
   squashed to nothing at all. */
#side > * { flex: 0 0 auto; }
#turns, #leaders, #teamstats { margin-bottom: 14px; font-size: 12px; }
/* Ten plays is a list rather than a glance, so it gets a bound and a bar of
   its own instead of pushing the swing table and the stats off the bottom of
   the column. Five rows deep, and the other five are a scroll away.

   260, because a row is 52 when its play text takes the two lines it is
   clamped to: 232 was a guess and it cut the fifth row in half. */
#turns {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

/* A turning point: when, whose, how far it moved it, and what happened. The
   whole row is a place in the game you can go to, so it lights under the
   pointer the way the feed's rows do. */
#turns .turn {
  padding: 3px 4px;
  margin: 0 -4px;
  cursor: pointer;
}
/* Banded the way the feed is, so a row reads as one row: these carry two
   lines of play text apiece and ran together without it. Counted in CSS
   rather than set in script, because unlike the feed's rows nothing here is
   ever filtered out from under the banding. */
#turns .turn:nth-child(even) { background: var(--band); }
#turns .turn:hover { background: var(--band-hover); }
/* The same ring the chips and the drive bands use. These rows are reached by
   keyboard now, and a focus stop with no ring is a cursor you cannot see. */
#turns .turn:focus-visible { outline: 1px solid var(--blue); outline-offset: -1px; }
/* The one the game is wound back to. The list holds still now, so this
   is what says which row you landed on, and it has to beat the banding. */
#turns .turn.on,
#turns .turn.on:nth-child(even) { background: var(--band-hover); }
#turns .turn.on .ttext { color: var(--ink); }
#turns .tstamp {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}
#turns .tstamp .clk { color: var(--ink-dim); }
#turns .tstamp .ab { font-weight: 600; letter-spacing: .04em; }
#turns .tstamp .tsw { margin-left: auto; font-size: 11px; }
#turns .ttext {
  color: var(--ink-dim);
  line-height: 1.3;
  overflow-wrap: anywhere;
  /* Two lines is the play; the rest is the penalty wording after it, which
     the feed below carries in full. Opening the row lifts the clamp, which
     is the whole of what opening it means. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#turns .turn.open .ttext {
  -webkit-line-clamp: unset;
  color: var(--ink);
}
/* Where the game stood once the play was over. */
#turns .turn.open .tdetail {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 11px;
}

/* The team an entry belongs to, ahead of the name, because a swing table
   mixes both sides: a Houston back gaining on Buffalo sits in it next to the
   quarterback who answered him. */
#leaders .pn b { font-weight: 600; letter-spacing: .04em; margin-right: 2px; }
/* Twelve names and a number each, which is exactly the kind of list an eye
   loses its place in. Banded like the feed and the turning points. The
   padding widens with it: a band needs a little room or it reads as a rule
   rather than a row. */
#leaders .prow { padding: 2px 4px; margin: 0 -4px; }
#leaders .prow:nth-child(even) { background: var(--band); }
/* Plain ink, on purpose. The feed's swing column is signed to Buffalo and
   coloured to match; this table is signed to each player's own team, so the
   same green on a Texan meant the opposite thing one panel apart. The team
   abbreviation already carries the colour, and the sign says whether the
   player helped or hurt his own side. */
/* No scroller of its own any more: the column it sits in is the scroller,
   and a panel inside a scroller that also scrolls is two bars to find and a
   wheel that stops at the wrong one. */
#playerstats {
  flex: 0 0 auto;
  font-size: 12px;
  padding-right: 4px;
}
#side::-webkit-scrollbar,
#turns::-webkit-scrollbar { width: 8px; }
#side::-webkit-scrollbar-thumb,
#turns::-webkit-scrollbar-thumb { background: var(--ink-faint); }

.srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5ch 5.5ch;
  gap: 6px;
  padding: 1px 0;
}
.srow span:nth-child(2), .srow span:nth-child(3) { text-align: right; }
.srow.head { color: var(--ink-faint); border-bottom: 1px solid var(--rule);
  margin-bottom: 3px; padding-bottom: 3px;
  font-weight: 600;
}
.srow .lbl { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; }
.srow .me { color: var(--ink); }

.pteam {
  color: var(--ink); margin: 8px 0 2px;
  letter-spacing: .06em; font-weight: 600;
}
.pgroup { color: var(--ink-faint); font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; margin-top: 6px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.prow[data-player] { cursor: pointer; }
.prow[data-player]:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.prow[data-player]:focus-visible { outline: 1px solid var(--blue); outline-offset: -1px; }
/* The name the feed is filtered to. Both panels can set it and both show
   it, so clicking a name in one is visible in the other. */
.prow.on,
#leaders .prow.on:nth-child(even) { background: var(--band-hover); }
.prow.on .pn { color: var(--ink); }
.prow .pn { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.prow .pv { font-size: 11px; }
.prow .pv { color: var(--ink); white-space: nowrap; }

#playerpick {
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  font: inherit;
  font-size: 11px;
  padding: 1px 4px;
  max-width: 22ch;
}
#head, #readout { margin-bottom: 10px; }
/* The score on the left, the quarters on the right of the same band, because
   that is what a scoreboard looks like and the total is already the number
   beside it. They wrap onto separate lines when the page is too narrow for
   both. */
#head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 20px;
  /* The box holds this line. Left to wrap, it dropped to a line of its own
     the moment a replay started, because the detail beside the score grows
     from "Final" to "replay, Q1 15:00" and that was enough to push it over.
     The score line takes the slack and wraps inside itself instead. */
  flex-wrap: nowrap;
}
#headline { flex: 1 1 auto; min-width: 0; }
#qtrbox { flex: none; }

/* The quarter box sizes to its own numbers rather than to the room it is
   given: a table stretched to a panel's width puts a hand's width of nothing
   between the team and its first quarter. */
#qtrbox { border-collapse: collapse; font-size: 11px; }
#qtrbox th, #qtrbox td {
  /* Two digits is as much as a period ever scores. Monospace, so a column
     that wide holds every value it will ever be asked for. */
  min-width: 2ch;
  padding: 0 0 0 9px;
  text-align: right;
  font-weight: 400;
}
#qtrbox th[scope="row"] {
  padding-left: 0; text-align: left;
  font-weight: 600; letter-spacing: .04em;
}
#qtrbox thead th {
  color: var(--ink-faint); font-weight: 600;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
}
#qtrbox tbody tr:first-child th, #qtrbox tbody tr:first-child td { padding-top: 3px; }
#qtrbox td { color: var(--ink-dim); }
/* The total is what the scoreline beside it already says, so it is set apart
   from the periods rather than reading as one more of them. */
#qtrbox .tot {
  color: var(--ink); font-weight: 600;
  border-left: 1px solid var(--rule); padding-left: 9px;
}
/* The last period, whichever it is, needs room on its right or it sits
   against that rule. Counted from the end, since the total is always last and
   the number of periods is not fixed. */
#qtrbox th:nth-last-child(2), #qtrbox td:nth-last-child(2) { padding-right: 8px; }

.line { white-space: pre-wrap; }
.faint { color: var(--ink-faint); }
#matchup { color: var(--ink); }
#matchup::before { content: "$ "; color: var(--ink-faint); }
/* The market's two numbers, under the spread they belong to.
   
   A flex row of whole phrases rather than a sentence: each item holds
   together and the row moves them down as units, so a phone never splits
   "over by 22.5" across a line break. The row gap only ever costs anything
   on a screen too narrow to hold the lot, which at three short items is a
   phone held upright. */
#oddsline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 1px;
  font-size: 11px;
  color: var(--ink-faint);
  margin: 1px 0 0;
}
#oddsline > span { white-space: nowrap; }
/* The verdict is the one part worth reading twice, so it takes the ink the
   rest of the line gives up. Not a colour: over and under are not good and
   bad, and neither is covering. */
#oddsline .verdict { color: var(--ink-dim); }
@media (max-width: 640px) { #oddsline { column-gap: 10px; } }

#scoreline {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 2px 0 1px;
}
#scoreline .side { display: flex; align-items: baseline; gap: 7px; }
/* A team's name, on the score line and on a season card alike: its own
   colour, set inline, with the weight and the tracking that make three
   capitals read as a name rather than as an acronym. */
#scoreline .ab,
.ghead .ab { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
#scoreline .pts {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-dim);
}
/* whoever is ahead reads at full strength */
#scoreline .pts.up { color: var(--ink); }
#scoreline .when { color: var(--ink-faint); font-size: 11px; }
/* before kickoff the team names take the space the score would hold */
#scoreline .ab.big { font-size: 19px; letter-spacing: .01em; }
#scoreline .vs { color: var(--ink-faint); font-size: 12px; }

/* section rules: ── label ──────────────── */
.hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 6px;
  color: var(--ink-faint);
  font-size: 11px;
  /* .12em, the one tracking every small uppercase label on the page
     carries: the section rules, the feed's dividers, its column header and
     controls, the filter labels, the stat groups and the words riding the
     two boxes. They ran .12, .14 and .16 on the same role and read as three
     weights of the same thing. The title bar's status and links keep .1em;
     they are a different role and the 375px bar is fitted to the pixel. */
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hdr::before { content: "──"; letter-spacing: 0; }
.hdr::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}
.hdr > span { white-space: nowrap; }
/* The saving controls ride the section rule above the chart, not the row of
   transport chips below it. That row is right-aligned, so a replay putting a
   pause button into the middle of it slides everything else sideways; up here
   nothing moves. They keep their own case against the rule's small caps. */
.hdr .chip {
  text-transform: none;
  letter-spacing: 0;
  flex: none;
}
/* Shown only while a replay runs. The chart, the score, the feed and the
   quarter box all wind back to the play being replayed; these two cannot,
   because the feed carries one boxscore and it is the finished game's. Saying
   so beats quietly showing Q2 a set of final totals.

   It sits between the label and the rule, and the rule is what flexes, so
   nothing moves when it appears. */
.hdr .note { color: var(--gold); flex: none; }
/* A standing note, not a warning: the swing table's "for their own team"
   says which way its signs point and is there on every game, so it takes
   the rule's own faint ink rather than the gold that flags a replay. */
.hdr .note.hint { color: var(--ink-faint); }

/* ---- readout ---- */
#probrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  /* Room for the bison at its largest, reserved so the row does not grow and
     shrink underneath the score as the game moves. */
  min-height: 2.5em;
  flex-wrap: wrap;
  white-space: nowrap;
}
/* The bar takes whatever the row has left: out to the stats rule on desktop,
   out to the page edge on mobile. The cell count is measured from it. */
#barwrap { position: relative; flex: 1 1 0; min-width: 0; }
/* The cells are cut to the space the row gives the bar, so any rounding
   remainder is clipped rather than pushing the percentage onto its own line. */
#bar { display: block; overflow: hidden; white-space: nowrap; }
#bar { color: var(--blue); letter-spacing: -0.5px; }
/* Zubaz. The filled run of the bar is painted with the pattern rather than a
   flat colour, clipped to the shape of the block characters so the bar is
   still nothing but text.

   It is one long strip, not a tile, and it does not repeat: the band
   positions come from a random walk across the whole width, so nothing
   recurs. As the bar fills it reveals more of the strip rather than
   stretching it.

   The sequence is always wide blue, thin red, wide white, thin red. Each blue
   band is a shape outlined in red, and no band may pinch thin enough for its
   two seams to meet, which is what would leave blue touching blue. Bands run
   off the top and bottom so their closing edges fall outside the viewBox and
   no red is drawn along the bar's edges; a few instead taper to a point
   inside it, where the white either side simply joins up.

   The colours are the club's rather than the theme's. The pattern is a piece
   of the team, not part of the palette, so it looks the same either way.

   Guarded, because the trick works by making the text transparent and letting
   the background show through. Without background-clip that would leave no
   bar at all, so those browsers keep the flat royal. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #bar .fill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 24' preserveAspectRatio='none'%3E%3Crect width='1400' height='24' fill='%23ffffff'/%3E%3Cpolygon points='-16.1,-5.0 -16.0,-2.6 -16.0,-0.1 -16.1,2.3 -16.4,4.7 -16.9,7.1 -17.7,9.6 -18.4,12.0 -19.0,14.4 -19.3,16.9 -18.6,19.3 -17.5,21.7 -16.5,24.1 -15.6,26.6 -15.1,29.0 -15.1,29.0 -13.7,26.6 -12.7,24.1 -12.1,21.7 -11.7,19.3 -11.4,16.9 -11.4,14.4 -11.0,12.0 -10.1,9.6 -9.0,7.1 -8.0,4.7 -7.4,2.3 -7.4,-0.1 -7.8,-2.6 -8.4,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='-0.4,-5.0 0.1,-2.6 0.3,-0.1 0.2,2.3 -0.3,4.7 -1.0,7.1 -1.7,9.6 -2.1,12.0 -2.1,14.4 -1.8,16.9 -0.9,19.3 0.5,21.7 1.5,24.1 2.1,26.6 2.3,29.0 2.3,29.0 3.8,26.6 5.0,24.1 5.7,21.7 6.0,19.3 5.7,16.9 5.1,14.4 5.0,12.0 5.4,9.6 6.2,7.1 7.1,4.7 7.9,2.3 8.2,-0.1 8.0,-2.6 7.4,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='13.4,-5.0 14.3,-2.6 14.8,-0.1 14.7,2.3 14.1,4.7 13.3,7.1 12.6,9.6 12.3,12.0 12.6,14.4 13.4,16.9 14.5,19.3 15.4,21.7 15.8,24.1 15.6,26.6 15.0,29.0 21.0,29.0 22.2,26.6 22.6,24.1 22.1,21.7 20.9,19.3 19.6,16.9 18.6,14.4 18.5,12.0 19.2,9.6 20.5,7.1 22.0,4.7 23.1,2.3 23.4,-0.1 22.8,-2.6 21.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='31.8,-5.0 32.9,-2.6 33.0,-0.1 32.2,2.3 30.6,4.7 29.0,7.1 27.9,9.6 27.8,12.0 28.7,14.4 30.5,16.9 32.6,19.3 34.2,21.7 34.9,24.1 34.8,26.6 34.3,29.0 34.3,29.0 36.2,26.6 37.4,24.1 37.7,21.7 37.2,19.3 36.4,16.9 35.5,14.4 34.9,12.0 35.0,9.6 35.8,7.1 36.8,4.7 37.6,2.3 37.8,-0.1 37.7,-2.6 36.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='44.2,-5.0 45.0,-2.6 44.9,-0.1 44.0,2.3 42.5,4.7 41.1,7.1 40.3,9.6 40.4,12.0 41.4,14.4 42.9,16.9 44.2,19.3 45.0,21.7 44.8,24.1 44.1,26.6 43.3,29.0 48.1,29.0 48.9,26.6 50.2,24.1 50.8,21.7 50.4,19.3 49.2,16.9 47.8,14.4 46.7,12.0 46.6,9.6 47.4,7.1 49.0,4.7 50.8,2.3 52.2,-0.1 52.7,-2.6 52.2,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='60.5,-5.0 60.9,-2.6 60.4,-0.1 59.2,2.3 57.5,4.7 55.7,7.1 54.3,9.6 53.6,12.0 53.8,14.4 54.7,16.9 55.7,19.3 56.3,21.7 56.2,24.1 55.5,26.6 54.2,29.0 61.5,29.0 63.1,26.6 64.2,24.1 64.3,21.7 63.4,19.3 62.0,16.9 60.4,14.4 59.4,12.0 59.0,9.6 59.6,7.1 60.7,4.7 61.8,2.3 62.2,-0.1 61.8,-2.6 60.5,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='68.5,-5.0 69.5,-2.6 70.0,-0.1 69.5,2.3 68.2,4.7 66.8,7.1 65.8,9.6 65.7,12.0 66.7,14.4 68.3,16.9 70.1,19.3 71.4,21.7 71.7,24.1 71.1,26.6 69.8,29.0 77.8,29.0 78.6,26.6 78.5,24.1 77.3,21.7 75.5,19.3 73.5,16.9 72.0,14.4 71.4,12.0 71.8,9.6 72.9,7.1 74.1,4.7 74.8,2.3 74.8,-0.1 74.3,-2.6 73.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='79.4,-5.0 81.0,-2.6 82.0,-0.1 81.9,2.3 80.9,4.7 79.5,7.1 78.4,9.6 78.0,12.0 78.6,14.4 80.1,16.9 82.0,19.3 83.6,21.7 84.4,24.1 84.2,26.6 83.2,29.0 88.7,29.0 89.9,26.6 90.4,24.1 89.9,21.7 88.5,19.3 86.7,16.9 85.2,14.4 84.6,12.0 84.9,9.6 86.1,7.1 87.6,4.7 88.7,2.3 89.1,-0.1 88.4,-2.6 87.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='93.7,-5.0 95.1,-2.6 95.7,-0.1 95.2,2.3 94.0,4.7 92.8,7.1 92.1,9.6 92.3,12.0 93.6,14.4 95.4,16.9 97.3,19.3 98.7,21.7 99.1,24.1 98.5,26.6 97.3,29.0 104.2,29.0 105.2,26.6 105.5,24.1 104.7,21.7 103.1,19.3 101.1,16.9 99.3,14.4 98.3,12.0 98.4,9.6 99.2,7.1 100.5,4.7 101.4,2.3 101.6,-0.1 100.7,-2.6 99.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='104.5,-5.0 106.2,-2.6 107.3,-0.1 107.5,2.3 106.7,4.7 105.5,7.1 104.4,9.6 104.0,12.0 104.5,14.4 105.9,16.9 107.9,19.3 109.5,21.7 110.4,24.1 110.4,26.6 109.6,29.0 114.4,29.0 115.2,26.6 115.5,24.1 115.3,21.7 114.2,19.3 112.6,16.9 111.0,14.4 110.1,12.0 110.1,9.6 111.0,7.1 112.4,4.7 113.7,2.3 114.4,-0.1 114.1,-2.6 112.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='121.2,-5.0 122.0,-2.6 122.1,-0.1 121.4,2.3 120.2,4.7 118.9,7.1 118.2,9.6 118.2,12.0 118.9,14.4 120.1,16.9 121.3,19.3 122.0,21.7 122.0,24.1 121.2,26.6 120.0,29.0 126.1,29.0 127.7,26.6 128.7,24.1 128.8,21.7 127.9,19.3 126.5,16.9 125.2,14.4 124.5,12.0 124.8,9.6 126.1,7.1 127.8,4.7 129.4,2.3 130.3,-0.1 130.2,-2.6 129.2,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='139.5,-5.0 139.7,-2.6 139.1,-0.1 137.7,2.3 136.0,4.7 134.5,7.1 133.6,9.6 133.6,12.0 134.3,14.4 135.3,16.9 136.1,19.3 136.3,21.7 135.5,24.1 134.1,26.6 132.4,29.0 140.0,29.0 142.1,26.6 143.9,24.1 144.8,21.7 144.7,19.3 143.8,16.9 142.7,14.4 142.0,12.0 142.1,9.6 143.2,7.1 145.1,4.7 147.2,2.3 148.9,-0.1 149.7,-2.6 149.5,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='158.8,-5.0 158.4,-2.6 157.3,-0.1 155.6,2.3 153.6,4.7 151.7,7.1 150.3,9.6 149.6,12.0 150.0,14.4 150.7,16.9 151.2,19.3 151.0,21.7 150.1,24.1 148.6,26.6 146.9,29.0 153.0,29.0 154.2,26.6 155.3,24.1 155.9,21.7 156.1,19.3 156.0,16.9 155.8,14.4 155.7,12.0 155.7,9.6 156.1,7.1 157.0,4.7 157.9,2.3 158.7,-0.1 159.1,-2.6 158.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='170.0,-5.0 170.0,-2.6 169.2,-0.1 167.9,2.3 166.4,4.7 165.0,7.1 164.2,9.6 164.4,12.0 165.2,14.4 166.1,16.9 167.0,19.3 167.3,21.7 167.1,24.1 166.3,26.6 165.3,29.0 165.3,29.0 167.3,26.6 169.0,24.1 170.1,21.7 170.6,19.3 170.8,16.9 171.0,14.4 171.7,12.0 172.9,9.6 174.4,7.1 176.0,4.7 177.4,2.3 178.5,-0.1 179.0,-2.6 178.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='189.1,-5.0 187.7,-2.6 186.1,-0.1 184.3,2.3 182.3,4.7 181.3,7.1 180.5,9.6 180.0,12.0 179.8,14.4 179.7,16.9 179.6,19.3 179.2,21.7 178.6,24.1 177.7,26.6 176.6,29.0 184.7,29.0 185.4,26.6 186.1,24.1 186.6,21.7 187.1,19.3 187.6,16.9 188.1,14.4 188.6,12.0 189.2,9.6 189.9,7.1 190.6,4.7 190.4,2.3 190.1,-0.1 189.7,-2.6 189.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='202.9,-5.0 201.2,-2.6 199.7,-0.1 198.4,2.3 197.3,4.7 196.3,7.1 196.1,9.6 195.8,12.0 195.4,14.4 194.7,16.9 194.0,19.3 193.3,21.7 192.7,24.1 192.4,26.6 192.2,29.0 201.1,29.0 201.3,26.6 201.8,24.1 202.6,21.7 203.4,19.3 204.3,16.9 204.9,14.4 205.2,12.0 205.3,9.6 205.2,7.1 204.3,4.7 203.7,2.3 203.3,-0.1 203.1,-2.6 202.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='219.8,-5.0 218.6,-2.6 217.4,-0.1 216.4,2.3 215.6,4.7 215.1,7.1 214.6,9.6 214.1,12.0 213.9,14.4 213.4,16.9 212.6,19.3 211.7,21.7 211.0,24.1 210.5,26.6 210.4,29.0 220.6,29.0 220.6,26.6 220.8,24.1 221.2,21.7 221.6,19.3 222.1,16.9 222.4,14.4 222.5,12.0 222.0,9.6 221.3,7.1 220.6,4.7 220.1,2.3 219.8,-0.1 219.7,-2.6 219.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='231.9,-5.0 231.8,-2.6 231.8,-0.1 231.7,2.3 231.7,4.7 231.7,7.1 231.7,9.6 231.6,12.0 231.7,14.4 232.1,16.9 232.5,19.3 233.0,21.7 233.4,24.1 233.9,26.6 234.4,29.0 234.4,29.0 235.0,26.6 235.5,24.1 236.1,21.7 236.6,19.3 237.0,16.9 237.5,14.4 237.7,12.0 237.7,9.6 237.8,7.1 237.9,4.7 238.0,2.3 238.0,-0.1 238.0,-2.6 237.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='244.6,-5.0 245.1,-2.6 245.4,-0.1 245.4,2.3 245.2,4.7 244.9,7.1 244.7,9.6 244.7,12.0 244.9,14.4 245.4,16.9 246.0,19.3 246.4,21.7 246.7,24.1 246.7,26.6 246.5,29.0 253.6,29.0 253.7,26.6 253.7,24.1 253.7,21.7 253.7,19.3 253.8,16.9 253.8,14.4 253.8,12.0 253.8,9.6 253.8,7.1 253.9,4.7 253.9,2.3 253.9,-0.1 253.9,-2.6 254.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='263.7,-5.0 263.6,-2.6 263.4,-0.1 263.2,2.3 263.0,4.7 262.7,7.1 262.5,9.6 262.5,12.0 262.9,14.4 263.3,16.9 263.7,19.3 264.1,21.7 264.3,24.1 264.4,26.6 264.3,29.0 264.3,29.0 265.2,26.6 266.1,24.1 266.9,21.7 267.4,19.3 267.8,16.9 268.1,14.4 268.6,12.0 269.0,9.6 269.7,7.1 270.5,4.7 271.3,2.3 271.9,-0.1 272.2,-2.6 272.2,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='278.8,-5.0 278.9,-2.6 278.5,-0.1 277.5,2.3 276.3,4.7 275.1,7.1 274.3,9.6 274.0,12.0 274.2,14.4 274.7,16.9 275.9,19.3 276.9,21.7 277.3,24.1 277.3,26.6 277.0,29.0 277.0,29.0 279.1,26.6 280.8,24.1 282.0,21.7 282.6,19.3 282.8,16.9 282.3,14.4 281.9,12.0 282.1,9.6 282.7,7.1 283.7,4.7 284.7,2.3 285.5,-0.1 285.7,-2.6 285.4,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='295.2,-5.0 295.0,-2.6 294.3,-0.1 292.8,2.3 290.8,4.7 288.6,7.1 287.5,9.6 286.9,12.0 287.1,14.4 287.9,16.9 289.0,19.3 289.7,21.7 289.9,24.1 289.3,26.6 288.1,29.0 295.3,29.0 296.5,26.6 297.2,24.1 297.2,21.7 296.7,19.3 296.0,16.9 295.5,14.4 295.5,12.0 296.2,9.6 297.3,7.1 297.9,4.7 298.1,2.3 297.8,-0.1 296.8,-2.6 295.2,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='304.7,-5.0 305.2,-2.6 305.3,-0.1 304.7,2.3 303.8,4.7 302.7,7.1 301.5,9.6 300.7,12.0 300.6,14.4 301.1,16.9 302.0,19.3 302.9,21.7 303.4,24.1 303.2,26.6 302.4,29.0 309.2,29.0 310.3,26.6 310.6,24.1 310.1,21.7 309.0,19.3 308.0,16.9 307.4,14.4 307.5,12.0 308.5,9.6 310.0,7.1 311.5,4.7 312.4,2.3 312.6,-0.1 312.0,-2.6 311.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='320.2,-5.0 320.9,-2.6 321.1,-0.1 320.4,2.3 319.0,4.7 317.5,7.1 316.2,9.6 315.6,12.0 315.8,14.4 316.6,16.9 317.8,19.3 318.9,21.7 319.2,24.1 318.6,26.6 317.4,29.0 323.1,29.0 324.0,26.6 324.5,24.1 324.4,21.7 323.8,19.3 322.4,16.9 321.1,14.4 320.1,12.0 319.8,9.6 320.2,7.1 321.0,4.7 321.8,2.3 322.0,-0.1 321.4,-2.6 320.2,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='330.7,-5.0 331.4,-2.6 331.7,-0.1 331.3,2.3 330.5,4.7 329.5,7.1 328.7,9.6 328.5,12.0 329.3,14.4 330.6,16.9 332.1,19.3 333.4,21.7 334.2,24.1 334.3,26.6 333.9,29.0 333.9,29.0 335.5,26.6 336.5,24.1 336.9,21.7 336.6,19.3 336.0,16.9 335.3,14.4 335.2,12.0 335.5,9.6 336.3,7.1 337.5,4.7 338.5,2.3 339.0,-0.1 338.6,-2.6 337.7,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='344.5,-5.0 346.0,-2.6 346.8,-0.1 346.6,2.3 345.5,4.7 343.9,7.1 342.4,9.6 341.8,12.0 342.6,14.4 344.3,16.9 346.4,19.3 348.5,21.7 349.7,24.1 350.0,26.6 349.4,29.0 349.4,29.0 351.2,26.6 352.1,24.1 352.1,21.7 351.3,19.3 350.4,16.9 350.0,14.4 350.6,12.0 351.7,9.6 353.2,7.1 354.9,4.7 356.0,2.3 356.3,-0.1 355.5,-2.6 354.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='363.4,-5.0 364.7,-2.6 365.5,-0.1 365.3,2.3 364.1,4.7 362.4,7.1 360.8,9.6 359.8,12.0 359.8,14.4 360.7,16.9 362.1,19.3 363.5,21.7 364.2,24.1 363.8,26.6 362.6,29.0 369.7,29.0 371.2,26.6 371.9,24.1 371.8,21.7 371.1,19.3 370.1,16.9 369.3,14.4 369.3,12.0 370.1,9.6 371.5,7.1 373.2,4.7 374.6,2.3 375.2,-0.1 375.1,-2.6 374.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='381.5,-5.0 382.2,-2.6 382.4,-0.1 382.0,2.3 380.7,4.7 379.1,7.1 377.4,9.6 376.1,12.0 375.7,14.4 376.2,16.9 377.2,19.3 378.1,21.7 378.6,24.1 378.4,26.6 377.4,29.0 383.3,29.0 384.6,26.6 385.2,24.1 384.9,21.7 383.8,19.3 382.4,16.9 381.1,14.4 380.3,12.0 380.9,9.6 382.0,7.1 383.1,4.7 383.7,2.3 383.6,-0.1 382.9,-2.6 381.5,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='390.9,-5.0 392.2,-2.6 392.8,-0.1 392.4,2.3 391.1,4.7 389.4,7.1 388.0,9.6 387.3,12.0 387.6,14.4 388.8,16.9 390.3,19.3 391.6,21.7 392.1,24.1 391.5,26.6 390.2,29.0 397.3,29.0 398.4,26.6 398.8,24.1 398.1,21.7 396.6,19.3 394.9,16.9 393.5,14.4 393.0,12.0 393.4,9.6 394.7,7.1 396.2,4.7 397.3,2.3 397.6,-0.1 397.0,-2.6 395.7,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='402.5,-5.0 404.1,-2.6 404.9,-0.1 404.7,2.3 403.7,4.7 402.4,7.1 401.4,9.6 401.3,12.0 402.1,14.4 403.8,16.9 405.7,19.3 407.3,21.7 408.0,24.1 407.6,26.6 406.6,29.0 413.3,29.0 413.9,26.6 413.9,24.1 413.2,21.7 411.9,19.3 410.4,16.9 409.0,14.4 408.3,12.0 408.3,9.6 408.9,7.1 409.7,4.7 410.3,2.3 410.3,-0.1 409.5,-2.6 408.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='414.1,-5.0 415.8,-2.6 416.7,-0.1 416.6,2.3 415.7,4.7 414.4,7.1 413.6,9.6 413.9,12.0 415.2,14.4 417.2,16.9 419.6,19.3 421.7,21.7 423.0,24.1 423.4,26.6 423.0,29.0 423.0,29.0 424.3,26.6 424.7,24.1 424.2,21.7 422.8,19.3 421.2,16.9 420.0,14.4 419.5,12.0 420.0,9.6 420.9,7.1 421.8,4.7 422.4,2.3 422.1,-0.1 421.0,-2.6 419.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='425.8,-5.0 427.5,-2.6 428.3,-0.1 428.2,2.3 427.5,4.7 426.8,7.1 426.5,9.6 427.1,12.0 429.2,14.4 431.8,16.9 434.4,19.3 436.4,21.7 437.5,24.1 437.8,26.6 437.7,29.0 437.7,29.0 438.8,26.6 439.6,24.1 439.7,21.7 439.1,19.3 438.1,16.9 437.0,14.4 436.3,12.0 435.5,9.6 435.4,7.1 435.8,4.7 436.3,2.3 436.6,-0.1 436.2,-2.6 435.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='442.8,-5.0 443.7,-2.6 443.9,-0.1 443.7,2.3 443.3,4.7 442.9,7.1 443.0,9.6 443.8,12.0 445.0,14.4 446.4,16.9 447.7,19.3 448.5,21.7 448.7,24.1 448.4,26.6 447.9,29.0 455.8,29.0 455.8,26.6 455.6,24.1 455.0,21.7 454.1,19.3 452.8,16.9 451.6,14.4 450.6,12.0 449.9,9.6 449.7,7.1 449.7,4.7 449.7,2.3 449.5,-0.1 448.8,-2.6 447.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='455.3,-5.0 456.5,-2.6 457.4,-0.1 457.8,2.3 457.9,4.7 458.0,7.1 458.1,9.6 458.7,12.0 459.6,14.4 460.9,16.9 462.4,19.3 464.2,21.7 465.6,24.1 466.6,26.6 467.4,29.0 467.4,29.0 467.8,26.6 467.9,24.1 467.8,21.7 467.4,19.3 466.5,16.9 465.4,14.4 464.5,12.0 463.8,9.6 463.4,7.1 463.1,4.7 462.7,2.3 462.2,-0.1 461.4,-2.6 460.4,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='466.8,-5.0 467.4,-2.6 468.0,-0.1 468.6,2.3 469.3,4.7 470.0,7.1 470.7,9.6 471.3,12.0 471.9,14.4 472.5,16.9 473.7,19.3 475.1,21.7 476.5,24.1 478.0,26.6 479.6,29.0 479.6,29.0 479.7,26.6 479.8,24.1 480.3,21.7 481.0,19.3 481.4,16.9 481.0,14.4 480.2,12.0 479.2,9.6 478.0,7.1 476.9,4.7 475.9,2.3 475.3,-0.1 475.0,-2.6 474.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='483.7,-5.0 483.9,-2.6 484.3,-0.1 484.9,2.3 485.8,4.7 486.9,7.1 487.9,9.6 488.7,12.0 489.2,14.4 489.5,16.9 489.6,19.3 489.8,21.7 490.2,24.1 490.9,26.6 491.9,29.0 496.7,29.0 495.7,26.6 495.0,24.1 494.6,21.7 494.4,19.3 494.9,16.9 495.3,14.4 495.1,12.0 494.4,9.6 493.2,7.1 491.8,4.7 490.6,2.3 489.9,-0.1 489.8,-2.6 490.2,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='496.8,-5.0 496.0,-2.6 495.7,-0.1 496.3,2.3 497.5,4.7 499.1,7.1 500.4,9.6 501.1,12.0 501.4,14.4 501.2,16.9 500.8,19.3 501.3,21.7 502.0,24.1 503.1,26.6 504.5,29.0 504.5,29.0 504.1,26.6 504.0,24.1 504.4,21.7 505.2,19.3 506.4,16.9 507.4,14.4 507.8,12.0 507.4,9.6 506.5,7.1 505.5,4.7 504.6,2.3 504.2,-0.1 504.3,-2.6 504.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='516.1,-5.0 514.8,-2.6 514.1,-0.1 514.1,2.3 514.6,4.7 515.2,7.1 516.0,9.6 516.2,12.0 515.9,14.4 515.1,16.9 514.1,19.3 513.5,21.7 513.5,24.1 514.1,26.6 515.1,29.0 519.9,29.0 518.9,26.6 518.3,24.1 518.4,21.7 519.2,19.3 520.2,16.9 521.1,14.4 521.6,12.0 521.4,9.6 520.5,7.1 518.8,4.7 517.3,2.3 516.3,-0.1 515.9,-2.6 516.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='528.3,-5.0 527.0,-2.6 526.4,-0.1 526.8,2.3 527.8,4.7 529.1,7.1 530.1,9.6 530.2,12.0 529.5,14.4 528.1,16.9 526.6,19.3 525.7,21.7 525.6,24.1 526.4,26.6 527.7,29.0 533.8,29.0 532.3,26.6 531.5,24.1 531.7,21.7 532.8,19.3 533.9,16.9 534.8,14.4 534.9,12.0 534.1,9.6 532.4,7.1 530.3,4.7 528.6,2.3 527.6,-0.1 527.6,-2.6 528.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='538.0,-5.0 536.9,-2.6 536.2,-0.1 536.3,2.3 537.2,4.7 538.8,7.1 540.2,9.6 541.0,12.0 541.2,14.4 541.0,16.9 540.3,19.3 539.6,21.7 539.3,24.1 539.9,26.6 541.3,29.0 541.3,29.0 540.7,26.6 541.1,24.1 542.3,21.7 544.2,19.3 546.1,16.9 547.4,14.4 547.3,12.0 546.1,9.6 544.4,7.1 542.9,4.7 542.0,2.3 542.1,-0.1 543.2,-2.6 544.7,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='550.6,-5.0 549.2,-2.6 548.2,-0.1 548.1,2.3 549.0,4.7 550.6,7.1 552.4,9.6 553.7,12.0 554.0,14.4 553.8,16.9 553.1,19.3 552.3,21.7 552.1,24.1 553.0,26.6 554.9,29.0 554.9,29.0 554.3,26.6 554.7,24.1 555.9,21.7 557.7,19.3 559.7,16.9 561.1,14.4 561.1,12.0 560.2,9.6 558.5,7.1 556.7,4.7 555.4,2.3 555.0,-0.1 555.6,-2.6 556.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='561.7,-5.0 560.4,-2.6 560.4,-0.1 561.4,2.3 563.0,4.7 565.0,7.1 566.7,9.6 567.5,12.0 567.5,14.4 567.0,16.9 566.4,19.3 566.5,21.7 567.4,24.1 569.1,26.6 571.2,29.0 571.2,29.0 570.0,26.6 569.2,24.1 569.0,21.7 569.6,19.3 570.7,16.9 571.9,14.4 572.8,12.0 573.1,9.6 572.5,7.1 571.3,4.7 569.6,2.3 568.2,-0.1 567.4,-2.6 567.5,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='576.2,-5.0 575.9,-2.6 576.3,-0.1 577.6,2.3 579.4,4.7 581.3,7.1 582.8,9.6 583.7,12.0 584.0,14.4 583.8,16.9 583.8,19.3 584.2,21.7 585.5,24.1 587.6,26.6 590.0,29.0 590.0,29.0 588.9,26.6 588.1,24.1 587.9,21.7 588.4,19.3 589.2,16.9 590.1,14.4 590.6,12.0 590.4,9.6 589.2,7.1 587.6,4.7 585.9,2.3 584.5,-0.1 583.7,-2.6 583.4,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='589.5,-5.0 589.8,-2.6 590.4,-0.1 591.4,2.3 592.7,4.7 594.1,7.1 595.2,9.6 596.0,12.0 596.4,14.4 596.5,16.9 596.6,19.3 596.8,21.7 597.5,24.1 598.6,26.6 599.9,29.0 607.9,29.0 606.3,26.6 605.0,24.1 604.4,21.7 604.3,19.3 604.6,16.9 604.8,14.4 604.6,12.0 603.8,9.6 602.4,7.1 600.7,4.7 599.1,2.3 597.9,-0.1 597.3,-2.6 597.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='608.0,-5.0 607.8,-2.6 608.1,-0.1 608.8,2.3 609.7,4.7 610.6,7.1 611.6,9.6 612.1,12.0 612.2,14.4 612.2,16.9 612.2,19.3 612.6,21.7 613.5,24.1 614.8,26.6 616.3,29.0 621.4,29.0 620.2,26.6 619.2,24.1 618.3,21.7 617.7,19.3 617.4,16.9 617.2,14.4 616.9,12.0 616.4,9.6 615.4,7.1 613.8,4.7 612.1,2.3 610.4,-0.1 609.0,-2.6 608.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='618.7,-5.0 619.1,-2.6 620.0,-0.1 621.1,2.3 622.3,4.7 623.2,7.1 624.2,9.6 624.8,12.0 625.1,14.4 625.4,16.9 625.8,19.3 626.7,21.7 628.1,24.1 629.8,26.6 631.6,29.0 631.6,29.0 630.7,26.6 630.0,24.1 629.6,21.7 629.7,19.3 630.2,16.9 630.9,14.4 631.4,12.0 631.5,9.6 631.0,7.1 629.7,4.7 628.2,2.3 626.9,-0.1 626.1,-2.6 625.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='634.7,-5.0 635.4,-2.6 636.4,-0.1 637.8,2.3 639.2,4.7 640.4,7.1 641.1,9.6 641.4,12.0 641.3,14.4 641.3,16.9 641.5,19.3 642.2,21.7 643.3,24.1 644.7,26.6 646.1,29.0 655.5,29.0 654.2,26.6 652.8,24.1 651.7,21.7 651.0,19.3 650.7,16.9 650.6,14.4 650.6,12.0 650.2,9.6 649.5,7.1 648.4,4.7 647.0,2.3 645.7,-0.1 644.6,-2.6 644.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='651.4,-5.0 651.6,-2.6 652.6,-0.1 654.1,2.3 655.9,4.7 657.6,7.1 658.9,9.6 659.8,12.0 660.1,14.4 660.2,16.9 660.5,19.3 661.3,21.7 662.8,24.1 664.7,26.6 666.7,29.0 666.7,29.0 665.5,26.6 664.6,24.1 664.1,21.7 664.1,19.3 664.6,16.9 665.3,14.4 665.7,12.0 665.8,9.6 665.2,7.1 663.9,4.7 662.5,2.3 661.2,-0.1 660.4,-2.6 660.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='669.1,-5.0 669.3,-2.6 670.1,-0.1 671.4,2.3 673.1,4.7 674.7,7.1 676.0,9.6 676.8,12.0 677.0,14.4 677.1,16.9 677.3,19.3 678.1,21.7 679.4,24.1 681.1,26.6 683.0,29.0 683.0,29.0 681.9,26.6 680.9,24.1 680.3,21.7 680.2,19.3 680.4,16.9 680.8,14.4 681.2,12.0 681.2,9.6 680.7,7.1 679.6,4.7 678.3,2.3 677.1,-0.1 676.1,-2.6 675.5,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='686.9,-5.0 687.0,-2.6 687.2,-0.1 687.6,2.3 688.0,4.7 688.3,7.1 688.5,9.6 688.8,12.0 688.9,14.4 689.1,16.9 689.3,19.3 689.8,21.7 690.5,24.1 691.4,26.6 692.2,29.0 698.3,29.0 697.6,26.6 696.9,24.1 696.3,21.7 695.7,19.3 695.1,16.9 694.5,14.4 693.9,12.0 693.3,9.6 692.5,7.1 691.3,4.7 690.2,2.3 689.0,-0.1 687.9,-2.6 686.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='698.8,-5.0 699.3,-2.6 699.7,-0.1 700.0,2.3 700.2,4.7 700.7,7.1 701.5,9.6 702.9,12.0 704.3,14.4 705.7,16.9 706.9,19.3 707.8,21.7 708.6,24.1 709.2,26.6 710.0,29.0 710.0,29.0 710.1,26.6 710.3,24.1 710.5,21.7 710.5,19.3 710.4,16.9 710.1,14.4 709.8,12.0 709.5,9.6 709.1,7.1 708.7,4.7 708.4,2.3 708.2,-0.1 708.0,-2.6 707.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='715.8,-5.0 715.9,-2.6 715.7,-0.1 715.3,2.3 715.0,4.7 715.0,7.1 715.5,9.6 716.3,12.0 717.3,14.4 718.1,16.9 718.6,19.3 718.7,21.7 718.4,24.1 718.1,26.6 718.4,29.0 724.4,29.0 724.3,26.6 724.3,24.1 724.3,21.7 724.1,19.3 723.7,16.9 723.2,14.4 722.6,12.0 722.1,9.6 721.7,7.1 721.5,4.7 721.4,2.3 721.4,-0.1 721.4,-2.6 721.2,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='729.3,-5.0 729.4,-2.6 729.3,-0.1 729.1,2.3 729.0,4.7 729.1,7.1 729.5,9.6 730.6,12.0 731.8,14.4 733.0,16.9 733.9,19.3 734.6,21.7 735.0,24.1 735.2,26.6 735.5,29.0 735.5,29.0 736.3,26.6 737.2,24.1 738.0,21.7 738.4,19.3 738.5,16.9 738.1,14.4 737.7,12.0 737.4,9.6 737.0,7.1 737.1,4.7 737.5,2.3 737.9,-0.1 738.2,-2.6 738.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='742.8,-5.0 743.0,-2.6 742.9,-0.1 743.0,2.3 743.1,4.7 743.3,7.1 743.7,9.6 744.2,12.0 744.9,14.4 745.6,16.9 746.2,19.3 746.6,21.7 746.8,24.1 746.9,26.6 747.0,29.0 752.9,29.0 752.6,26.6 752.2,24.1 751.9,21.7 751.6,19.3 751.4,16.9 751.3,14.4 751.2,12.0 751.1,9.6 750.9,7.1 750.6,4.7 750.3,2.3 749.9,-0.1 749.6,-2.6 749.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='759.3,-5.0 758.9,-2.6 758.6,-0.1 758.3,2.3 758.0,4.7 758.0,7.1 758.4,9.6 758.7,12.0 758.9,14.4 759.2,16.9 759.6,19.3 760.0,21.7 760.4,24.1 760.9,26.6 761.4,29.0 767.2,29.0 766.8,26.6 766.5,24.1 766.2,21.7 765.9,19.3 765.6,16.9 765.3,14.4 765.0,12.0 764.7,9.6 764.4,7.1 763.6,4.7 762.5,2.3 761.5,-0.1 760.4,-2.6 759.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='773.0,-5.0 773.1,-2.6 773.3,-0.1 773.5,2.3 773.7,4.7 773.8,7.1 774.0,9.6 774.1,12.0 774.2,14.4 774.3,16.9 774.4,19.3 774.6,21.7 774.8,24.1 775.0,26.6 775.1,29.0 784.6,29.0 784.2,26.6 783.9,24.1 783.6,21.7 783.3,19.3 783.0,16.9 782.7,14.4 782.5,12.0 782.2,9.6 781.9,7.1 781.6,4.7 781.3,2.3 781.0,-0.1 780.6,-2.6 780.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='791.5,-5.0 791.6,-2.6 791.6,-0.1 791.5,2.3 791.3,4.7 791.2,7.1 791.3,9.6 791.6,12.0 792.0,14.4 792.4,16.9 792.6,19.3 792.7,21.7 792.7,24.1 792.5,26.6 792.4,29.0 800.1,29.0 800.4,26.6 800.6,24.1 800.7,21.7 800.5,19.3 800.2,16.9 799.8,14.4 799.4,12.0 799.3,9.6 799.4,7.1 799.6,4.7 799.9,2.3 800.2,-0.1 800.2,-2.6 800.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='809.1,-5.0 808.9,-2.6 808.8,-0.1 808.7,2.3 808.6,4.7 808.5,7.1 808.4,9.6 808.2,12.0 808.0,14.4 807.8,16.9 807.6,19.3 807.4,21.7 807.3,24.1 807.2,26.6 807.1,29.0 813.3,29.0 813.7,26.6 814.0,24.1 814.3,21.7 814.4,19.3 814.4,16.9 814.3,14.4 814.3,12.0 814.4,9.6 814.6,7.1 814.9,4.7 815.3,2.3 815.6,-0.1 815.8,-2.6 815.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='824.5,-5.0 824.3,-2.6 824.0,-0.1 823.5,2.3 822.9,4.7 822.4,7.1 822.0,9.6 821.7,12.0 821.5,14.4 821.6,16.9 822.2,19.3 822.7,21.7 823.2,24.1 823.5,26.6 823.6,29.0 823.6,29.0 825.0,26.6 826.3,24.1 827.2,21.7 827.8,19.3 828.1,16.9 828.1,14.4 828.1,12.0 828.5,9.6 829.2,7.1 830.1,4.7 830.8,2.3 831.3,-0.1 831.3,-2.6 831.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='838.8,-5.0 838.9,-2.6 838.8,-0.1 838.4,2.3 837.8,4.7 837.0,7.1 836.3,9.6 835.7,12.0 835.4,14.4 835.3,16.9 835.4,19.3 835.5,21.7 835.3,24.1 835.0,26.6 834.3,29.0 840.3,29.0 840.6,26.6 840.8,24.1 841.0,21.7 841.1,19.3 841.2,16.9 841.4,14.4 841.7,12.0 842.0,9.6 842.3,7.1 842.7,4.7 843.2,2.3 843.6,-0.1 843.7,-2.6 843.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='851.4,-5.0 851.6,-2.6 851.8,-0.1 851.8,2.3 851.6,4.7 851.3,7.1 850.8,9.6 850.3,12.0 850.1,14.4 850.0,16.9 850.7,19.3 851.5,21.7 852.2,24.1 852.8,26.6 853.2,29.0 853.2,29.0 854.0,26.6 854.7,24.1 855.2,21.7 855.8,19.3 856.3,16.9 856.4,14.4 856.5,12.0 856.7,9.6 856.9,7.1 857.1,4.7 857.2,2.3 857.3,-0.1 857.3,-2.6 857.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='869.0,-5.0 868.4,-2.6 867.5,-0.1 866.3,2.3 864.9,4.7 864.1,7.1 863.7,9.6 863.4,12.0 863.3,14.4 863.4,16.9 863.6,19.3 863.8,21.7 863.9,24.1 863.8,26.6 863.6,29.0 873.2,29.0 873.7,26.6 873.8,24.1 873.5,21.7 872.9,19.3 872.3,16.9 871.9,14.4 872.1,12.0 872.6,9.6 873.4,7.1 873.7,4.7 873.1,2.3 872.0,-0.1 870.6,-2.6 869.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='885.7,-5.0 886.1,-2.6 886.3,-0.1 885.9,2.3 884.8,4.7 883.1,7.1 881.2,9.6 879.5,12.0 878.5,14.4 878.7,16.9 879.5,19.3 880.6,21.7 881.3,24.1 881.4,26.6 880.8,29.0 890.1,29.0 890.7,26.6 890.6,24.1 890.0,21.7 889.1,19.3 888.2,16.9 887.9,14.4 887.7,12.0 888.0,9.6 888.7,7.1 889.2,4.7 889.2,2.3 888.5,-0.1 887.2,-2.6 885.7,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='895.9,-5.0 897.0,-2.6 897.6,-0.1 897.6,2.3 896.9,4.7 895.8,7.1 894.8,9.6 894.2,12.0 894.3,14.4 895.1,16.9 896.3,19.3 897.3,21.7 897.9,24.1 897.8,26.6 897.1,29.0 903.1,29.0 903.7,26.6 903.7,24.1 903.3,21.7 902.5,19.3 901.8,16.9 901.6,14.4 901.9,12.0 902.8,9.6 903.9,7.1 904.9,4.7 905.4,2.3 905.4,-0.1 904.9,-2.6 904.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='912.1,-5.0 912.4,-2.6 912.5,-0.1 912.3,2.3 911.7,4.7 910.8,7.1 909.9,9.6 909.2,12.0 908.9,14.4 908.9,16.9 909.1,19.3 909.4,21.7 909.5,24.1 909.2,26.6 908.6,29.0 914.2,29.0 914.7,26.6 915.1,24.1 915.3,21.7 915.5,19.3 915.7,16.9 916.0,14.4 916.5,12.0 917.0,9.6 917.6,7.1 918.1,4.7 918.6,2.3 919.0,-0.1 919.2,-2.6 919.4,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='926.0,-5.0 925.9,-2.6 925.8,-0.1 925.5,2.3 925.1,4.7 924.4,7.1 923.7,9.6 923.1,12.0 922.7,14.4 922.4,16.9 922.4,19.3 923.4,21.7 924.3,24.1 925.2,26.6 925.9,29.0 925.9,29.0 927.4,26.6 928.5,24.1 929.3,21.7 929.8,19.3 929.6,16.9 929.6,14.4 929.9,12.0 930.6,9.6 931.4,7.1 932.0,4.7 932.4,2.3 932.3,-0.1 931.9,-2.6 931.5,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='940.8,-5.0 940.8,-2.6 940.8,-0.1 940.7,2.3 940.5,4.7 940.2,7.1 939.8,9.6 939.5,12.0 939.2,14.4 939.0,16.9 938.9,19.3 938.8,21.7 938.8,24.1 938.7,26.6 938.5,29.0 948.0,29.0 948.4,26.6 948.6,24.1 948.5,21.7 948.2,19.3 948.1,16.9 948.2,14.4 948.5,12.0 949.1,9.6 949.8,7.1 950.4,4.7 950.8,2.3 950.9,-0.1 950.8,-2.6 950.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='957.2,-5.0 957.4,-2.6 957.4,-0.1 957.2,2.3 956.6,4.7 955.9,7.1 955.4,9.6 955.0,12.0 954.9,14.4 955.0,16.9 955.5,19.3 956.0,21.7 956.6,24.1 956.9,26.6 957.0,29.0 957.0,29.0 957.9,26.6 958.4,24.1 958.7,21.7 958.9,19.3 959.4,16.9 960.2,14.4 961.3,12.0 962.7,9.6 964.1,7.1 964.9,4.7 965.3,2.3 965.3,-0.1 965.0,-2.6 964.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='973.2,-5.0 973.4,-2.6 973.7,-0.1 973.7,2.3 973.3,4.7 972.4,7.1 971.1,9.6 969.8,12.0 968.7,14.4 968.0,16.9 967.9,19.3 968.1,21.7 968.3,24.1 968.3,26.6 967.9,29.0 975.8,29.0 975.9,26.6 975.6,24.1 975.2,21.7 975.0,19.3 975.3,16.9 976.1,14.4 977.2,12.0 978.4,9.6 979.4,7.1 979.9,4.7 980.0,2.3 979.7,-0.1 979.3,-2.6 979.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='985.0,-5.0 985.2,-2.6 985.8,-0.1 986.3,2.3 986.3,4.7 985.7,7.1 984.3,9.6 982.6,12.0 980.9,14.4 980.1,16.9 980.0,19.3 981.1,21.7 982.4,24.1 983.6,26.6 984.4,29.0 984.4,29.0 985.4,26.6 985.9,24.1 986.4,21.7 987.2,19.3 987.6,16.9 988.4,14.4 989.5,12.0 990.6,9.6 991.4,7.1 991.8,4.7 991.8,2.3 991.4,-0.1 991.0,-2.6 990.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='998.7,-5.0 998.4,-2.6 998.3,-0.1 998.2,2.3 998.0,4.7 997.6,7.1 997.0,9.6 996.2,12.0 995.4,14.4 995.1,16.9 995.2,19.3 995.5,21.7 996.1,24.1 996.7,26.6 997.2,29.0 997.2,29.0 997.9,26.6 998.4,24.1 998.9,21.7 999.7,19.3 1000.8,16.9 1002.1,14.4 1003.2,12.0 1004.2,9.6 1004.8,7.1 1005.1,4.7 1005.0,2.3 1004.8,-0.1 1004.8,-2.6 1005.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1016.3,-5.0 1015.5,-2.6 1014.8,-0.1 1014.2,2.3 1013.5,4.7 1012.7,7.1 1011.8,9.6 1010.8,12.0 1010.2,14.4 1009.7,16.9 1009.4,19.3 1009.2,21.7 1009.2,24.1 1009.1,26.6 1009.0,29.0 1015.1,29.0 1015.4,26.6 1015.6,24.1 1015.9,21.7 1016.2,19.3 1016.6,16.9 1017.1,14.4 1017.6,12.0 1017.7,9.6 1017.7,7.1 1017.5,4.7 1017.2,2.3 1016.9,-0.1 1016.6,-2.6 1016.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1027.2,-5.0 1026.7,-2.6 1026.3,-0.1 1025.8,2.3 1025.4,4.7 1025.0,7.1 1024.5,9.6 1024.1,12.0 1023.6,14.4 1023.2,16.9 1022.7,19.3 1022.3,21.7 1021.8,24.1 1021.4,26.6 1021.0,29.0 1028.1,29.0 1028.4,26.6 1028.5,24.1 1028.6,21.7 1028.8,19.3 1029.2,16.9 1029.7,14.4 1030.4,12.0 1031.1,9.6 1031.7,7.1 1032.2,4.7 1032.4,2.3 1032.5,-0.1 1032.6,-2.6 1032.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1046.8,-5.0 1045.9,-2.6 1045.1,-0.1 1044.3,2.3 1043.3,4.7 1042.3,7.1 1041.2,9.6 1040.0,12.0 1039.3,14.4 1038.8,16.9 1038.3,19.3 1037.8,21.7 1037.5,24.1 1037.2,26.6 1036.8,29.0 1043.5,29.0 1043.9,26.6 1044.2,24.1 1044.4,21.7 1044.7,19.3 1045.2,16.9 1045.9,14.4 1046.7,12.0 1047.2,9.6 1047.4,7.1 1047.5,4.7 1047.4,2.3 1047.2,-0.1 1047.0,-2.6 1046.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1061.6,-5.0 1061.1,-2.6 1061.0,-0.1 1060.8,2.3 1060.5,4.7 1059.6,7.1 1058.4,9.6 1056.8,12.0 1055.2,14.4 1054.2,16.9 1053.7,19.3 1053.6,21.7 1053.8,24.1 1054.0,26.6 1053.9,29.0 1060.4,29.0 1060.4,26.6 1060.2,24.1 1059.9,21.7 1060.0,19.3 1060.4,16.9 1061.3,14.4 1062.1,12.0 1062.8,9.6 1063.2,7.1 1063.3,4.7 1062.9,2.3 1062.3,-0.1 1061.8,-2.6 1061.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1071.5,-5.0 1071.5,-2.6 1072.0,-0.1 1072.6,2.3 1073.0,4.7 1072.8,7.1 1072.0,9.6 1070.8,12.0 1069.4,14.4 1068.3,16.9 1067.7,19.3 1067.8,21.7 1068.2,24.1 1068.9,26.6 1069.2,29.0 1077.3,29.0 1076.9,26.6 1076.2,24.1 1075.7,21.7 1075.7,19.3 1076.3,16.9 1077.4,14.4 1078.6,12.0 1079.6,9.6 1080.2,7.1 1080.1,4.7 1079.6,2.3 1078.9,-0.1 1078.5,-2.6 1078.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1090.7,-5.0 1090.0,-2.6 1089.8,-0.1 1089.6,2.3 1089.3,4.7 1088.6,7.1 1087.9,9.6 1086.9,12.0 1085.8,14.4 1084.8,16.9 1084.2,19.3 1084.3,21.7 1084.8,24.1 1085.4,26.6 1085.9,29.0 1092.9,29.0 1092.7,26.6 1092.0,24.1 1091.3,21.7 1091.1,19.3 1091.5,16.9 1092.6,14.4 1094.0,12.0 1095.4,9.6 1096.1,7.1 1095.6,4.7 1094.4,2.3 1093.0,-0.1 1091.6,-2.6 1090.7,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1109.1,-5.0 1107.8,-2.6 1107.3,-0.1 1107.2,2.3 1107.1,4.7 1106.4,7.1 1105.5,9.6 1104.0,12.0 1102.0,14.4 1100.2,16.9 1099.1,19.3 1098.8,21.7 1099.3,24.1 1100.2,26.6 1100.9,29.0 1107.5,29.0 1107.4,26.6 1107.1,24.1 1106.9,21.7 1107.2,19.3 1108.1,16.9 1109.6,14.4 1111.2,12.0 1112.7,9.6 1113.5,7.1 1113.1,4.7 1112.0,2.3 1110.7,-0.1 1109.6,-2.6 1109.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1118.5,-5.0 1118.2,-2.6 1118.6,-0.1 1119.2,2.3 1119.5,4.7 1119.4,7.1 1118.8,9.6 1117.6,12.0 1116.2,14.4 1115.1,16.9 1114.8,19.3 1115.2,21.7 1116.2,24.1 1117.2,26.6 1117.8,29.0 1117.8,29.0 1118.1,26.6 1118.0,24.1 1117.8,21.7 1118.1,19.3 1119.1,16.9 1120.9,14.4 1123.1,12.0 1125.5,9.6 1127.4,7.1 1128.4,4.7 1128.3,2.3 1127.7,-0.1 1127.0,-2.6 1126.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1135.6,-5.0 1135.9,-2.6 1136.4,-0.1 1136.6,2.3 1136.3,4.7 1135.2,7.1 1133.5,9.6 1131.6,12.0 1129.9,14.4 1128.9,16.9 1128.6,19.3 1128.9,21.7 1129.4,24.1 1129.6,26.6 1129.2,29.0 1135.6,29.0 1136.1,26.6 1135.8,24.1 1135.2,21.7 1134.8,19.3 1135.0,16.9 1136.0,14.4 1137.7,12.0 1139.7,9.6 1141.5,7.1 1142.7,4.7 1143.1,2.3 1142.8,-0.1 1142.2,-2.6 1141.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1150.2,-5.0 1150.2,-2.6 1150.5,-0.1 1150.7,2.3 1150.4,4.7 1149.6,7.1 1148.2,9.6 1146.6,12.0 1145.1,14.4 1144.1,16.9 1143.6,19.3 1143.7,21.7 1144.0,24.1 1144.1,26.6 1143.8,29.0 1152.2,29.0 1152.3,26.6 1152.2,24.1 1152.0,21.7 1152.3,19.3 1153.1,16.9 1154.4,14.4 1156.0,12.0 1157.5,9.6 1158.6,7.1 1159.2,4.7 1159.3,2.3 1159.1,-0.1 1159.1,-2.6 1159.4,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1167.6,-5.0 1167.0,-2.6 1167.1,-0.1 1167.4,2.3 1167.2,4.7 1166.3,7.1 1164.5,9.6 1162.4,12.0 1160.4,14.4 1158.9,16.9 1158.1,19.3 1158.1,21.7 1158.7,24.1 1159.3,26.6 1159.4,29.0 1165.5,29.0 1165.0,26.6 1164.3,24.1 1163.7,21.7 1163.9,19.3 1165.0,16.9 1166.7,14.4 1168.8,12.0 1170.5,9.6 1171.0,7.1 1170.8,4.7 1169.9,2.3 1168.7,-0.1 1167.8,-2.6 1167.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1178.0,-5.0 1177.5,-2.6 1177.5,-0.1 1177.7,2.3 1177.8,4.7 1177.4,7.1 1176.5,9.6 1175.1,12.0 1173.5,14.4 1172.0,16.9 1170.9,19.3 1171.5,21.7 1172.5,24.1 1173.8,26.6 1174.7,29.0 1174.7,29.0 1175.8,26.6 1176.8,24.1 1177.8,21.7 1179.0,19.3 1179.7,16.9 1180.9,14.4 1182.3,12.0 1183.8,9.6 1185.0,7.1 1185.7,4.7 1185.9,2.3 1185.8,-0.1 1185.8,-2.6 1186.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1191.8,-5.0 1191.4,-2.6 1191.8,-0.1 1192.4,2.3 1192.8,4.7 1192.7,7.1 1191.7,9.6 1190.2,12.0 1188.5,14.4 1187.3,16.9 1186.8,19.3 1187.1,21.7 1188.1,24.1 1189.3,26.6 1190.3,29.0 1190.3,29.0 1190.4,26.6 1190.2,24.1 1190.1,21.7 1190.6,19.3 1191.8,16.9 1193.7,14.4 1195.5,12.0 1197.0,9.6 1197.8,7.1 1197.9,4.7 1197.4,2.3 1196.6,-0.1 1196.2,-2.6 1196.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1201.5,-5.0 1201.3,-2.6 1202.1,-0.1 1203.3,2.3 1204.5,4.7 1205.0,7.1 1204.6,9.6 1203.4,12.0 1201.7,14.4 1200.7,16.9 1200.3,19.3 1201.0,21.7 1202.5,24.1 1204.4,26.6 1206.2,29.0 1206.2,29.0 1205.7,26.6 1205.0,24.1 1204.7,21.7 1205.2,19.3 1206.6,16.9 1208.8,14.4 1210.8,12.0 1212.2,9.6 1212.8,7.1 1212.4,4.7 1211.2,2.3 1209.9,-0.1 1208.9,-2.6 1208.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1216.5,-5.0 1216.6,-2.6 1217.6,-0.1 1219.0,2.3 1220.2,4.7 1220.6,7.1 1219.9,9.6 1218.5,12.0 1216.9,14.4 1215.9,16.9 1215.6,19.3 1216.2,21.7 1217.7,24.1 1219.5,26.6 1221.2,29.0 1221.2,29.0 1220.5,26.6 1219.6,24.1 1219.2,21.7 1219.7,19.3 1221.3,16.9 1223.6,14.4 1225.7,12.0 1227.0,9.6 1227.3,7.1 1226.6,4.7 1225.3,2.3 1224.0,-0.1 1223.3,-2.6 1223.5,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1232.6,-5.0 1232.1,-2.6 1232.3,-0.1 1233.1,2.3 1234.1,4.7 1234.9,7.1 1235.1,9.6 1234.4,12.0 1233.2,14.4 1231.8,16.9 1230.7,19.3 1230.3,21.7 1230.6,24.1 1231.4,26.6 1232.5,29.0 1240.3,29.0 1239.3,26.6 1238.4,24.1 1238.0,21.7 1238.4,19.3 1239.5,16.9 1241.0,14.4 1242.5,12.0 1243.4,9.6 1243.5,7.1 1243.0,4.7 1242.0,2.3 1241.1,-0.1 1240.8,-2.6 1241.3,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1248.9,-5.0 1248.5,-2.6 1248.6,-0.1 1249.0,2.3 1249.3,4.7 1249.4,7.1 1249.0,9.6 1248.1,12.0 1247.0,14.4 1245.9,16.9 1245.1,19.3 1244.8,21.7 1244.9,24.1 1245.3,26.6 1245.6,29.0 1252.3,29.0 1251.8,26.6 1251.3,24.1 1251.1,21.7 1251.4,19.3 1252.4,16.9 1253.7,14.4 1255.0,12.0 1256.1,9.6 1256.5,7.1 1256.3,4.7 1255.8,2.3 1255.3,-0.1 1255.1,-2.6 1255.5,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1264.7,-5.0 1264.4,-2.6 1264.6,-0.1 1265.1,2.3 1265.7,4.7 1265.8,7.1 1265.6,9.6 1264.8,12.0 1263.8,14.4 1262.9,16.9 1262.5,19.3 1262.7,21.7 1263.5,24.1 1264.6,26.6 1265.5,29.0 1265.5,29.0 1265.4,26.6 1265.2,24.1 1265.2,21.7 1265.6,19.3 1266.5,16.9 1267.9,14.4 1269.4,12.0 1270.8,9.6 1271.6,7.1 1271.6,4.7 1271.2,2.3 1270.5,-0.1 1269.9,-2.6 1269.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1276.6,-5.0 1277.0,-2.6 1277.9,-0.1 1278.9,2.3 1279.4,4.7 1279.1,7.1 1278.2,9.6 1277.1,12.0 1276.2,14.4 1275.8,16.9 1276.0,19.3 1276.8,21.7 1277.9,24.1 1279.0,26.6 1279.7,29.0 1279.7,29.0 1279.7,26.6 1279.5,24.1 1279.3,21.7 1279.5,19.3 1280.3,16.9 1281.6,14.4 1283.2,12.0 1284.5,9.6 1285.1,7.1 1285.3,4.7 1285.0,2.3 1284.5,-0.1 1284.1,-2.6 1284.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1294.8,-5.0 1294.3,-2.6 1294.2,-0.1 1294.3,2.3 1294.4,4.7 1294.2,7.1 1293.6,9.6 1292.6,12.0 1291.4,14.4 1290.3,16.9 1289.9,19.3 1289.9,21.7 1290.2,24.1 1290.7,26.6 1291.1,29.0 1300.4,29.0 1299.6,26.6 1298.9,24.1 1298.5,21.7 1298.6,19.3 1299.0,16.9 1299.3,14.4 1299.5,12.0 1299.4,9.6 1298.9,7.1 1298.0,4.7 1296.9,2.3 1295.9,-0.1 1295.2,-2.6 1294.8,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1308.0,-5.0 1307.2,-2.6 1306.9,-0.1 1307.3,2.3 1307.9,4.7 1308.3,7.1 1308.3,9.6 1307.6,12.0 1306.3,14.4 1304.9,16.9 1303.9,19.3 1303.6,21.7 1303.9,24.1 1304.7,26.6 1305.6,29.0 1311.1,29.0 1310.2,26.6 1309.6,24.1 1309.6,21.7 1310.2,19.3 1311.1,16.9 1311.8,14.4 1312.2,12.0 1312.1,9.6 1311.4,7.1 1310.3,4.7 1309.2,2.3 1308.2,-0.1 1307.8,-2.6 1308.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1319.1,-5.0 1318.3,-2.6 1317.9,-0.1 1318.0,2.3 1318.2,4.7 1318.2,7.1 1318.3,9.6 1318.0,12.0 1317.3,14.4 1316.4,16.9 1315.7,19.3 1315.4,21.7 1315.6,24.1 1316.1,26.6 1316.8,29.0 1324.0,29.0 1322.7,26.6 1321.7,24.1 1321.2,21.7 1321.5,19.3 1322.4,16.9 1323.5,14.4 1324.3,12.0 1324.5,9.6 1323.9,7.1 1322.3,4.7 1320.8,2.3 1319.8,-0.1 1319.2,-2.6 1319.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1328.0,-5.0 1328.1,-2.6 1328.7,-0.1 1329.8,2.3 1330.8,4.7 1331.5,7.1 1331.6,9.6 1331.2,12.0 1330.3,14.4 1329.8,16.9 1330.1,19.3 1331.0,21.7 1332.4,24.1 1334.0,26.6 1335.5,29.0 1335.5,29.0 1335.3,26.6 1335.3,24.1 1335.5,21.7 1336.1,19.3 1337.1,16.9 1337.8,14.4 1338.1,12.0 1338.3,9.6 1338.1,7.1 1337.6,4.7 1337.0,2.3 1336.4,-0.1 1336.0,-2.6 1336.0,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1346.1,-5.0 1345.7,-2.6 1345.9,-0.1 1346.6,2.3 1347.6,4.7 1348.4,7.1 1348.6,9.6 1348.3,12.0 1347.9,14.4 1347.4,16.9 1347.0,19.3 1347.2,21.7 1347.8,24.1 1348.9,26.6 1350.2,29.0 1350.2,29.0 1349.9,26.6 1349.9,24.1 1350.4,21.7 1351.5,19.3 1352.9,16.9 1354.3,14.4 1355.3,12.0 1355.4,9.6 1355.1,7.1 1354.6,4.7 1354.0,2.3 1353.8,-0.1 1354.0,-2.6 1354.6,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1363.7,-5.0 1362.9,-2.6 1362.4,-0.1 1362.2,2.3 1362.4,4.7 1362.6,7.1 1362.7,9.6 1362.6,12.0 1362.3,14.4 1362.0,16.9 1361.6,19.3 1361.3,21.7 1361.3,24.1 1361.8,26.6 1362.5,29.0 1362.5,29.0 1362.7,26.6 1363.2,24.1 1364.1,21.7 1365.2,19.3 1366.4,16.9 1367.5,14.4 1368.0,12.0 1367.8,9.6 1367.4,7.1 1367.2,4.7 1367.0,2.3 1367.2,-0.1 1367.7,-2.6 1368.5,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1374.1,-5.0 1373.4,-2.6 1372.8,-0.1 1372.6,2.3 1372.7,4.7 1373.2,7.1 1373.7,9.6 1374.0,12.0 1374.0,14.4 1373.6,16.9 1373.0,19.3 1372.3,21.7 1371.8,24.1 1371.6,26.6 1371.8,29.0 1376.8,29.0 1376.8,26.6 1377.4,24.1 1378.3,21.7 1379.4,19.3 1380.3,16.9 1380.8,14.4 1380.7,12.0 1380.3,9.6 1379.7,7.1 1379.3,4.7 1379.4,2.3 1380.0,-0.1 1381.0,-2.6 1382.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1388.8,-5.0 1387.5,-2.6 1386.3,-0.1 1385.5,2.3 1385.4,4.7 1385.9,7.1 1386.6,9.6 1387.2,12.0 1387.3,14.4 1386.8,16.9 1385.7,19.3 1384.4,21.7 1383.2,24.1 1382.6,26.6 1382.5,29.0 1389.9,29.0 1390.4,26.6 1391.5,24.1 1392.9,21.7 1394.4,19.3 1395.4,16.9 1395.8,14.4 1395.6,12.0 1395.0,9.6 1394.4,7.1 1394.3,4.7 1394.9,2.3 1396.0,-0.1 1397.5,-2.6 1398.9,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpolygon points='1405.4,-5.0 1403.7,-2.6 1401.9,-0.1 1400.6,2.3 1400.2,4.7 1400.7,7.1 1401.8,9.6 1403.0,12.0 1403.7,14.4 1404.0,16.9 1403.4,19.3 1402.2,21.7 1400.9,24.1 1400.0,26.6 1399.9,29.0 1399.9,29.0 1401.0,26.6 1403.1,24.1 1405.5,21.7 1407.6,19.3 1408.9,16.9 1409.0,14.4 1408.0,12.0 1406.7,9.6 1405.8,7.1 1405.9,4.7 1406.9,2.3 1408.7,-0.1 1410.6,-2.6 1412.1,-5.0' fill='%2300338d' stroke='%23c60c30' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 1400px 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Once zubaz.js has built the chart's wide cut, the bar wears that
     instead, at the chart's own scale (1400 across 85px of height) and
     not resized to the bar: the bar is a slice through the middle of the
     pattern, the same stripes the plot shows. The rule above paints at
     once from the stylesheet; this one takes over when the cut lands. */
  :root[data-zubaz-wide] #bar .fill {
    background-image: var(--zubaz-wide);
    background-size: 1400px 85px;
    /* Which slice: 80% of the way down, where the bands pinch and some
       taper to their tips. The middle was solid blue with slivers of
       white; the bottom edge, where bands run off, was ragged. */
    background-position: 0 80%;
  }
}
/* Rides the end of the filled portion, sized and placed from JS. Never
   smaller than the bar it sits on, and kept inside the bar's own width so it
   cannot reach the team on the left or the number on the right. */
#barbison {
  position: absolute;
  top: 50%;
  /* scaleX turns it to face the way the bar is heading. The emoji is drawn
     facing left, which reads as walking back down the bar. */
  transform: translate(-50%, -50%) scaleX(-1);
  line-height: 1;
  pointer-events: none;
  /* The bar runs behind the animal and shows through the gaps between its
     legs and under its belly. Painting the page colour behind it makes the
     bar stop at the bison instead of passing through it. */
  background: var(--bg);
  /* A little wider than the glyph, so the mask covers the bar's last pixels
     rather than leaving a sliver past the animal's nose at the far end. */
  padding: 0 3px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               system-ui, sans-serif;
}
#bar .empty { color: var(--rule); }
/* Both of these sit in the same row as the bar, which takes what they leave.
   Their content changes width constantly: the percentage runs 4 to 6
   characters ("7.4%" to "100.0%" and ">99.9%"), and the swing disappears
   entirely on a play that moves things less than half a point. Unreserved,
   the bar was resized by almost every play. Each holds room for its widest
   value and sits right-aligned inside it. */
#prob {
  font-size: 20px; font-weight: 600;
  min-width: 6ch; text-align: right;
}
/* a score by the team being followed: the number flares, briefly */
@keyframes hit {
  0%   { color: var(--gold); transform: scale(1.18); }
  100% { color: inherit; transform: none; }
}
#prob.hit { display: inline-block; animation: hit .9s ease-out; }
@media (prefers-reduced-motion: reduce) { #prob.hit { animation: none; } }
#swing { font-size: 12px; min-width: 6ch; text-align: right; }
.up { color: var(--green); }
.down { color: var(--red); }
#pregame { margin-top: 3px; }

/* ---- chart ---- */
/* The line above the chart: where the game stands right now, or where the
   replay has got to. It is the one place the newest play is readable without
   hunting for it in the feed. */
#nowline {
  display: flex;
  /* Top, not baseline: with a fixed height, baseline alignment pushes a
     wrapped second line past the bottom edge and clips it. */
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 5px 8px;
  border: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.35;
  /* Fixed, so the chart above never shifts when a play is longer than the
     last one. Three text lines plus the padding, with box-sizing: border-box
     already set globally: two clipped the tail of a long penalty on a
     desktop, and three is what the tile above the chart holds. */
  height: calc(3 * 1.35em + 16px);
  /* And the height is the last word on it. Whatever the text does, it is cut
     rather than allowed to push the box open and shift the chart. */
  overflow: hidden;
}
#nowstamp {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  flex: none;
}
#nowstamp .clk { color: var(--ink-dim); }
#nowstamp .ab { font-weight: 600; }
#nowstamp .dd { color: var(--ink-faint); }
#nowtext {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#nowline.state #nowtext { letter-spacing: .04em; }
/* A clock event has no swing, and an empty swing span still claims the auto
   margin that pushes the swing right, which shoved "final" into mid-line. */
#nowline.state #nowswing { display: none; }
#nowswing { flex: none; white-space: nowrap; }

@media (max-width: 700px) {
  /* Two rows, not three: the stamp and the swing share the top one and the
     play text gets the width below. Stacking is what keeps a long play from
     squeezing the stamp down to one word a line. */
  /* The stamp takes its own row here, so the reserved height is that row
     plus three of text: narrow lines need the extra one. */
  #nowline { flex-wrap: wrap; gap: 2px 8px; font-size: 12px;
             height: calc(4 * 1.35em + 18px); }
  #nowtext { -webkit-line-clamp: 3; }
  #nowstamp { flex: 1 1 auto; flex-wrap: wrap; white-space: normal; }
  #nowswing { order: 1; margin-left: auto; }
  #nowtext { order: 2; flex-basis: 100%; }
  /* "halftime" and "final" are short enough to sit beside the clock. */
  #nowline.state #nowstamp { flex: 0 0 auto; }
  #nowline.state #nowtext { flex-basis: auto; }
}

/* ---------------- the next snap ---------------- */
/* Three lines, one height, whatever is in it. The tile sits directly above
   the plot, and when it was free to collapse and reopen it moved the chart
   every time the ball changed hands -- four distinct positions over one
   game, a 151px swing on a phone. A projection that makes the graph jump is
   worse than no projection. So the box is fixed and only its contents
   change, and it is there from before the kickoff to after the final, blank
   when no snap is coming. */
#nextplay {
  flex: none;
  /* The 10px on top is for the label riding the border, which otherwise
     touched the section rule above it on a phone; it collapses with the
     rule's own 6px, so the gap grows by four. A wide screen puts the tile
     under the bar instead and zeroes it below. */
  margin: 10px 0 10px;
  padding: 5px 9px;
  border: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.35;
  /* The last word on it. Three text lines and the padding, so nothing
     inside can push it open. */
  height: calc(3 * 1.35em + 12px);
}

/* A word on each box saying what it is: the one above the chart is a
   projection, the one below it is the record. It rides the top border the
   way the section labels ride their rules, so it costs the lines inside
   nothing, and at 375 there is no room on the first line for it anyway.
   The boxes clip with clip-path rather than overflow so the word can sit
   above the edge while the height stays the last word on what is inside. */
#nextplay, #nowline {
  position: relative;
  overflow: visible;
  clip-path: inset(-9px 0 0 0);
}
#nextplay::before, #nowline::before {
  position: absolute;
  top: -7px;
  left: 7px;
  padding: 0 3px;
  background: var(--bg);
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
#nextplay::before { content: "next play, projected"; }
#nowline::before { content: "last play"; }
#nextsit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
#nextteam { font-weight: 600; flex: none; }
#nextdd, #nextat { color: var(--ink); flex: none; }
/* What is coming, "run 62% / pass 38%" or "go 61% / FG 36%", on a line of
   its own. It shared the first line with the snap for a day: pushed to the
   far end it was half a line from the down it belonged to, and beside the
   down it did not fit a phone. */
#nexttend { color: var(--ink-dim); white-space: nowrap; overflow: hidden; }
/* Each line holds its height empty, so the third row does not ride up into
   the middle on the snaps where the tendency model says nothing. The
   tendency line is the one that is empty most, but all three keep their
   place for the same reason. */
#nextsit, #nexttend, #nextopts { height: 1.35em; }
/* The third line runs a size down on a phone; its slot stays the tile's. */
@media (max-width: 560px) {
  #nextopts { height: calc(1.35 * 12px); }
}

/* Each line opens with a word for what it holds: "tendency:" before the
   split, "BUF win chance:" before the priced options, "this drive:" before
   the endings. Faint, so the numbers stay the thing read. The long and
   short forms are both in the DOM and a phone picks the short one (below). */
#nextplay .lbl { color: var(--ink-faint); flex: none; }
#nextplay .short { display: none; }

/* The options on one row, a hairline between them. Each keeps its pieces
   together so the row breaks between options and never inside one. The
   name is in full ink and its numbers a step down, so "FG 60.2% −0.1"
   reads as a name and two figures rather than one run of them; without
   the rules and the contrast the row read as a single string. */
#nextopts { display: flex; gap: 10px; white-space: nowrap; overflow: hidden; }
#nextopts .opt { display: inline-flex; align-items: baseline; gap: 5px;
                 color: var(--ink-dim); min-width: 0; }
#nextopts .opt + .opt { border-left: 1px solid var(--rule); padding-left: 10px; }
#nextopts .name { color: var(--ink); }
/* The mark takes the colour of the team whose best it is, set inline. */
#nextopts .mark { font-weight: 600; }
#nextopts .opt.best .name, #nextopts .opt.best .wp { font-weight: 600; }
#nextopts .opt.best .wp { color: var(--ink); }
#nextopts .mv { font-size: 12px; }

@media (max-width: 700px) {
  #nextplay { font-size: 12px; padding: 5px 8px; }
  /* Tighter, because a phone has to fit the team, three options and their
     moves across about fifty characters. */
  #nextopts { gap: 7px; }
  #nextopts .opt { gap: 4px; }
  #nextopts .opt + .opt { padding-left: 7px; }
}

/* A phone. The third line is the tile at its widest: four endings with
   two-digit moves, "if TD -14.2 | FG -10.3 | punt -10.9 | TO -18.0", is 47
   characters, and at 12px on a 393px phone the last figure ran a few pixels
   past the edge, which the row hides rather than wraps, so it went quietly.
   A size down and tighter joints bring that worst case inside 375. The short
   labels take over here too: "BUF win%:" for "BUF win chance:", "if" for
   "this drive:", "TO" for "turnover". Up to 560, not 420: with the long
   labels the same row is 61 characters, which a 430px phone showed with its
   last figure cut off, and 560 is where 61 characters at 12px first fit. */
@media (max-width: 560px) {
  #nextplay { padding-left: 6px; padding-right: 6px; }
  #nextopts { font-size: 11px; gap: 4px; }
  #nextopts .opt { gap: 3px; }
  #nextopts .opt + .opt { padding-left: 4px; }
  #nextopts .mv { font-size: 11px; }
  #nextplay .long { display: none; }
  #nextplay .short { display: inline; }
}

/* Three options and their moves do not fit a phone even so, and below 370
   (a 360px Android, an SE) nothing with moves does. The moves come off and
   the probabilities stay, because a move can be read against the bar and a
   probability cannot. */
@media (max-width: 420px) {
  #nextplay.three #nextopts .mv { display: none; }
}
@media (max-width: 369px) {
  #nextopts .mv { display: none; }
}

/* The chart takes the room the feed used to. Something has to: with the feed
   at a fixed height the slack on a tall screen would otherwise sit as a band
   of nothing between the feed and the status bar. A taller graph is the one
   thing on the page that is better for being given the space. */
#chartwrap {
  position: relative;
  /* Holds the size it asks for, and never shrinks below what is in it. No
     min-height of zero here: the plot has a floor of its own, so a wrap
     allowed past its contents pushed the replay controls out through the
     bottom border and across the section rule under it.
     
     It used to grow into spare room, which on any window with room to spare
     handed the extra to the chart while the feed stayed pinned at its basis.
     A taller plot of the same line says very little; the same pixels are
     several more plays. So the feed grows now and the chart keeps its size.
     The floor is unchanged, so a short window still squeezes the feed and
     not the plot. */
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  padding: 6px 8px 4px;
  margin-bottom: 12px;
}
#chart { cursor: crosshair; touch-action: pan-y; }
/* The rings a score, a big play or a win sets off.
 
   Over the canvas rather than in it, like the bison below, and for a sharper
   version of the same reason. A canvas paints only within itself, and these
   land where there is no room: a score is drawn at the probability it put the
   game at, which for the ones worth celebrating is near the top, and a win is
   at the top right corner with ten pixels above it and twelve to its right.
   They were being cut into arcs by the edge of the tile.
 
   Out here they overflow it instead, which is what a ring expanding off the
   side of a chart should do. Nothing here takes the pointer.
 
   The size is animated rather than a transform, so the stroke stays the width
   it was drawn at instead of thickening as the ring grows. There are never
   more than three at once. */
#chartrings { position: absolute; inset: 0; pointer-events: none; }
#chartrings .ring {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  border: 2px solid currentColor;
  /* The one place the page rounds anything. The blanket rule at the top is
     there to keep browsers from rounding buttons and inputs, which is a look
     this page does not want; a ring is a circle by nature rather than a
     cornered box, and without the override it went out as a square. */
  border-radius: 50% !important;
  /* Against its own size, so it stays centred on the play as it grows. */
  transform: translate(-50%, -50%);
  animation: ringout var(--life, 1400ms) ease-out forwards;
}
@keyframes ringout {
  from { width: 8px; height: 8px; opacity: .85; }
  to   { width: var(--size); height: var(--size); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { #chartrings { display: none; } }

/* Rides the head of the line, sized and placed from JS.

   Over the canvas rather than inside it. A canvas can only paint within
   itself, so a glyph this size had to be held a half-width in from the edge
   to keep from being clipped, and at the end of a game that left it standing
   clear of the line it is meant to be sitting on. Out here it can overhang
   the plot and reach the head. The bar's bison works the same way. */
#chartbison {
  position: absolute;
  z-index: 2;
  line-height: 1;
  /* Takeable. It marks where you are on the line, so it is also how you get
     somewhere else on it. */
  cursor: grab;
  touch-action: none;
  user-select: none;
  /* The emoji is drawn facing left, which reads as walking back down the
     line, so it is turned to face the way the game is going. */
  transform: translate(-50%, -50%) scaleX(-1);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               system-ui, sans-serif;
}
#chartbison.held { cursor: grabbing; }
/* A finger is wider than a bison. The glyph is around thirty pixels across,
   which is under anything you could reliably land on, so the part that takes
   the press reaches well past it. A pseudo-element rather than padding,
   because the placing code measures the box to keep the animal off the
   chart's edges and padding would move it. */
#chartbison::before {
  content: "";
  position: absolute;
  inset: -14px;
}
/* Three rows under the plot, not two columns: the legend first, because it
   is what the plot needs explaining by, then the marks, then the transport.
   Side by side, the transport ran off the right of a phone the moment a
   replay started and put a pause button in the middle of it. */
#chartfoot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* On its own row now, so it may wrap where a phone is narrow enough to need
   it; the speed chips still travel together.

   The negative margin is the chip's own left padding taken back: a bracket is
   a chip's left edge to the eye, and without it this row sat three pixels in
   from the legend above it. */
/* Pulled back by the chip's own side padding, so the bracket of [replay]
   starts where the legend's first swatch does rather than three pixels in.
   Everything under the plot lines up on one left edge. */
#chartctl {
  margin-left: -3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  white-space: nowrap;
}
#speeds, #steps { gap: 4px; flex-wrap: nowrap; }
/* These rename themselves as a replay runs, replay to restart and pause to
   resume, and the row they sit in is right-aligned, so each rename shunted
   every chip beside them. Each holds room for its longest word, and pause
   and the way out keep their places rather than collapsing when there is no
   run to pause or leave. */
#replay, #pause, #exit { min-width: 9ch; }
#pause[hidden], #exit[hidden] { display: inline-block; visibility: hidden; }
#speeds .chip { font-size: 11px; }

/* the hover readout: pinned inside the chart, never under the cursor */
#tip {
  position: absolute;
  z-index: 3;
  max-width: 320px;
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--ink-faint);
  font-size: 11px;
  line-height: 1.45;
  pointer-events: none;
  white-space: normal;
}
#tip .tw { color: var(--ink-faint); }
#tip .tp { color: var(--ink); font-weight: 600; }
#tip .tt { color: var(--ink-dim); display: block; margin-top: 2px; }
/* 200 is the floor and the starting point, not the height. The canvas is
   drawn at whatever it is given, so the plot simply gets taller. */
#chart { width: 100%; display: block; flex: 1 1 200px; min-height: 200px; }
#chartlegend {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-faint);
  display: flex;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 3px;
  flex-wrap: wrap;
}
/* Forces the break after the switch, so what the marks mean always sits on
   its own line under the teams rather than wrapping wherever the width
   happens to run out. */
.lbreak { flex-basis: 100%; height: 0; }
.lbreak-phone { display: none; }
/* A phone puts the markers switch on the line with its key rather than on a
   line of its own above it. Measured at 375: switch 66px, "score" 46px, the
   swing key 185px and two gaps, 326 of 339. Under 380 the gaps close to 12
   so a 360 screen fits too. */
@media (max-width: 640px) {
  .lbreak { display: none; }
  .lbreak-phone { display: block; flex-basis: 100%; height: 0; }
}
@media (max-width: 379px) {
  #chartlegend { column-gap: 12px; }
}
/* With the marks off there is nothing to explain, but the line stays: it is
   what keeps the feed from jumping up the page every time they are switched. */
#chartlegend .key.dim { visibility: hidden; }
/* The markers switch is a chip in a row of plain text, so it carries the same
   three pixels of padding the replay row is pulled back by. On a narrow
   screen it wraps onto a line of its own and that padding is the only thing
   between it and the left edge everything else sits on. */
#marks { margin-left: -3px; }
#chartlegend .chip { font-size: 11px; }
#chartlegend i { font-style: normal; white-space: nowrap; }
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  vertical-align: -1px;
}
/* The key for the team being followed wears the strip its own area does.
   --zubaz is set from app.js, which already reads the pattern back out of
   this file, so it is still written down in exactly one place. Squeezed to
   ZUBAZ_KEY_W so a key-sized window holds a few bands and not a slice of
   one. */
/* The pattern sits over the flat colour the key already carries, so where
   --zubaz is not set yet the key is still the team's own blue at its own
   final width. */
.swatch.zsw {
  width: 18px;
  background-image: var(--zubaz);
  /* ZUBAZ_KEY_W in app.js, which draws the same key onto a saved image. A
     band is about twenty units of a 1400-unit strip, so the whole strip in a
     key is grey hair; at this scale a key holds two bands. */
  background-size: 520px 100%;
  background-repeat: no-repeat;
}

/* ---- filters ---- */
#filters[hidden] { display: none; }
#filters {
  display: grid;
  row-gap: 5px;
  padding-bottom: 9px;
  margin: 4px 0 8px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}
/* label column fixed, so show / team / player line up down the left */
.frow {
  display: grid;
  grid-template-columns: 8ch minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
}
.flabel {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: baseline; }
.chip {
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  padding: 0 3px;
  cursor: pointer;
  white-space: nowrap;
}
.chip::before { content: "["; color: var(--ink-faint); }
.chip::after { content: "]"; color: var(--ink-faint); }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--bg); background: var(--blue); }        /* reverse video */
.chip.on::before, .chip.on::after { color: var(--bg); }
.chip:focus-visible { outline: 1px solid var(--blue); }

/* Which side's players the stats panel is showing. Bold, the way every other
   team abbreviation on the page is set. */
#statsteams { margin: 0 0 6px; }
/* .04em is the tracking every other team abbreviation on the page carries;
   this and the feed's drive band were the two at .05, which read as drift
   rather than as hierarchy against the ones beside them. */
#statsteams .chip { font-weight: 600; letter-spacing: .04em; }

/* the one native control, dressed to sit level with the chips */
#playerpick {
  appearance: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0 18px 0 5px;
  max-width: 26ch;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: right 8px center, right 4px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
#playerpick:hover { color: var(--ink); border-color: var(--ink-faint); }
#playerpick:focus-visible { outline: 1px solid var(--blue); }

/* ---- log ---- */
/* How many plays are on screen, on the section rule rather than in the row of
   controls under it. It changes width every time a filter does, and up here
   the rule is what gives, so nothing moves. In the row it needed a reserved
   width instead, wide enough for the longest count it might ever hold, which
   is a gap sitting between the count and the first button for the rest of the
   time: 139 pixels reserved against "188 events" is 57 of nothing. */
#logcount.count { color: var(--ink-faint); }
/* The button names what is on, and grows to do it, but only so far: past its
   cap the list is cut with an ellipsis rather than wrapped, so the row stays
   one line whatever is switched on. The whole list is on its title. */
#showfilters {
  max-width: min(42ch, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
#loghead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 2px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-wrap: wrap;
}
/* How tall the feed is, everywhere. A number rather than "whatever is left":
   left over meant the feed was a different size on every screen and enormous
   on a big one, so early in a game it was mostly empty and took most of the
   game to fill.

   440, not the 300 it started at. A drive collapsed is one line and a drive
   opened is a dozen, and 300 held about a dozen lines in total: opening one
   possession filled the whole panel and reading it meant scrolling a box the
   size of the thing being read. This is most of a tablet held sideways and
   still fills inside a half. On a window too short for it the feed is what
   gives, so nothing below has to move. */
:root { --feed-h: 440px; }
/* The feed's height lives on the box, not on the list inside it: the box is
   the column item, and #logbox is a row, so a flex basis on #log sizes its
   width and its height goes on stretching to whatever it is given. */
/* --feed-h is where the feed starts, not where it stops: it grows into
   whatever the column has left over. The height beside the basis is for the
   stacked layout, where these are blocks and flex does not apply. */
#logwrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
           margin-bottom: 6px; }
#logbox { position: relative; flex: 1 1 var(--feed-h); height: var(--feed-h);
          min-height: 0; display: flex; }

#colhead, .row {
  display: grid;
  /* Sized for the widest value each column can ever hold, with slack, not for
     the widest one that happened to be on screen. "Q1 15:00" needs 62.6px of
     the 64 these had, so a font whose advance runs 2% wide clipped the clock
     to "Q1 15:..." in the first and third quarters. Same for the swing and the
     percentage, both of which were inside a pixel of their cell. */
  grid-template-columns: 72px 44px 62px 52px 54px 54px minmax(0, 1fr);
  gap: 7px;
  padding: 2px 4px;
}
/* A play often wraps to two or three lines, so alternate rows are banded.
   Parity is set over VISIBLE rows in applyFilter, not by nth-child, so the
   banding still alternates once a filter hides some of them. */
.row.alt { background: var(--band); }
/* The play whose place on the chart is being shown. It has to beat the
   banding, so it is set after it and covers both. */
.row.marked, .row.marked.alt { background: var(--band-hover); }
.row[data-i] { cursor: pointer; }
.row .what { line-height: 1.3; }
#colhead {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  margin-bottom: 2px;
}
#colhead .swing, #colhead .pct { text-align: right; }
/* The play column starts five pixels in, header and rows alike. The win%
   header is right aligned and the play header left, so across the 7px grid
   gap the two read as one word at 10px uppercase: WIN%PLAY. Padding both
   keeps the header standing over its column. A phone gives the play text
   the whole row and has no header, so it takes none of this. */
#colhead > span:last-child, .row .what { padding-left: 5px; }

#log {
  /* Fills the box it is in. The box is what carries the height. */
  flex: 1;
  /* Zero, not a hundred. A floor here is a floor the layout cannot meet on a
     short window: the feed then overflowed its box and ran underneath the
     status bar. Short is better than overlapping, and a window short enough
     for that to matter switches to the scrolling layout anyway. */
  min-height: 0;
  overflow-y: auto;
  /* The feed decides for itself what stays still. Opening a possession puts
     its plays in above everything below them, and a browser left to its own
     devices picks something further down to hold in place and slides the
     line that was tapped off the top instead. */
  overflow-anchor: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
  scrollbar-gutter: stable;
  padding-right: 10px;
  width: 100%;
}
#log::-webkit-scrollbar { width: 8px; }
#log::-webkit-scrollbar-thumb { background: var(--ink-faint); }
#log::-webkit-scrollbar-track { background: transparent; }
#log:focus-visible { outline: 1px solid var(--blue); outline-offset: -1px; }
/* The row the arrow keys are standing on. Same ring as everything else that
   can be focused, inset so it does not overlap the row above. */
.row:focus-visible { outline: 1px solid var(--blue); outline-offset: -1px; }

/* The play the game is standing on: the one a replay has reached, or the
   newest one live. A bar down the edge rather than a fill, because .marked
   is already a fill and the two say different things: marked is the play
   you pointed at, the playhead is the play the game has reached. A bar also
   survives sitting on a banded row, which a background has to fight.

   The band of the possession the game is in carries the same bar, in the
   same colour, open or folded, so the drive is marked at its head and the
   play is marked inside it, and the bar walks down the plays as they come. */
.row.playhead, .row.playhead.alt, .drivehead.playhead {
  box-shadow: inset 2px 0 0 var(--playhead, var(--blue));
}
.drivehead.current { box-shadow: inset 2px 0 0 var(--current, var(--blue)); }


.row { align-items: baseline; }
.row:hover { background: var(--band-hover); }
.row .when, .row .pct, .row .swing, .row .spot, .row .sc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The quarter holds the left of its cell and the clock the right, so the
   clocks line up down the column the way the percentages do. The cell is
   sized for the longest reading with slack, so the two never meet. */
.row .when { display: flex; justify-content: space-between; gap: 4px; }
/* The down is the one column allowed to wrap: "2nd and goal" over two lines
   costs nothing and buys the play text real width. Mobile keeps it on one
   line, where the row is already stacked and the space is not contested. */
.row .dn { white-space: normal; overflow-wrap: anywhere; }
.row .spot { color: var(--ink-faint); }
.row .sc { color: var(--ink-dim); }
.row .dn { color: var(--ink-faint); }
.row .when { color: var(--ink-faint); }
.row .pct { color: var(--ink-dim); text-align: right; }
.row .swing { text-align: right; font-size: 12px; }
.row .what { color: var(--ink-dim); overflow-wrap: anywhere; }
.row.scoreplay, .row.scoreplay.alt {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.row.stoppage, .row.stoppage .what { color: var(--ink-faint); }
.row.hidden, .divider.hidden, .drivehead.hidden { display: none; }
/* folded by its drive, which is independent of the filters */
.row.folded { display: none; }

/* a possession opens a band of its own; the plays sit under it */
.drivehead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 4px 3px;
  margin-top: 4px;
  cursor: pointer;
  border-top: 1px solid var(--rule);
  user-select: none;
}
.drivehead:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.drivehead:focus-visible { outline: 1px solid var(--blue); outline-offset: -1px; }
.drivehead .fold {
  width: 1.2ch;
  color: var(--ink-faint);
  font-size: 12px;
}
.drivehead .dteam { font-weight: 600; letter-spacing: .04em; flex: 0 0 auto; }
/* The one part of the band that gives. Everything else on the line is worth
   more than the last few characters of "7 plays, 50 yards, 3:41": which
   possession it is, whether it is the one being played, and how it ended. */
.drivehead .dsum {
  color: var(--ink-dim);
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Where the game is, on a feed whose possessions are all one line each.
   In the club's own blue rather than the summary's grey, because it is
   the one thing on that line worth finding. */
.drivehead .dnow { color: var(--blue); white-space: nowrap; flex: 0 0 auto; }
.drivehead .dres {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 11px;
  text-transform: lowercase;
  /* "end of half" and "end of game" are two words that belong on one line,
     and a possession band is one line. */
  white-space: nowrap;
  flex: 0 0 auto;
}
/* the plays are a level down from the possession that contains them */
#colhead, .row { padding-left: 16px; }

.divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  padding-left: 4px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}

#empty { padding: 18px 6px; color: var(--ink-faint); }


/* a new line arrives the way it does in a terminal: it is just there,
   with a single reverse-video flash so the eye catches it */
@keyframes flash {
  from { background: var(--blue-deep); }
  to   { background: transparent; }
}
.pop { animation: flash .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }

/* ---- the season page ---- */
/* Its own screen rather than the game's grid: one column of cards that wraps
   to whatever the width allows, so a season is a page on a laptop and a
   scroll on a phone. */
#seasonscreen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
}
#seasonsum { margin-bottom: 12px; }
/* The way between the two pages, one in each title bar. */
#tolive,
#toseason {
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
#tolive:hover { color: var(--ink); }

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
}
.gcard {
  display: block;
  border: 1px solid var(--rule);
  padding: 7px 9px 8px;
  color: inherit;
  text-decoration: none;
}
a.gcard:hover { border-color: var(--ink-faint); background: var(--band); }
/* January. The round takes the place of the date in the corner, and the
   border says these are not the seventeen. */
.gpost { border-color: var(--ink-faint); }
.gpost .gwhen { color: var(--ink-dim); }
.ghead {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  font-size: 12px;
}
/* Won or lost, said once and first, because it is what you are scanning for. */
.gres { font-weight: 600; letter-spacing: .04em; }
.gres.win { color: var(--green); }
.gres.loss { color: var(--red); }
.gscore { font-weight: 600; }
.gwho { color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; }
/* "vs" and "at" are the small word between two names, not a third name. */
.gwho .at { font-size: 11px; }
.gwhen { margin-left: auto; color: var(--ink-faint); font-size: 11px; }
.gline { display: block; width: 100%; height: 66px; margin: 6px 0 4px; }
.gshape { color: var(--ink-faint); font-size: 11px; }
/* A game with no line is a card with nothing in the middle, so it does not
   pretend to have one: it keeps the height of its neighbours and says why. */
.gsoon { color: var(--ink-faint); }
.gsoon .gshape { margin-top: 24px; }

/* ---- bottom line ---- */
#statusbar {
  display: flex;
  gap: 12px;
  /* The block character is drawn from below the baseline to above the cap
     height, taller than the line box a 1.25 leading gives it, and the bar
     clips what overflows. The extra below is what keeps the bottom of the
     cursor from being shaved off against the foot of the window. */
  padding: 5px 12px 7px;
  line-height: 1.45;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
}
#clock { margin-left: auto; }
#cursor { color: var(--blue); animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #cursor { animation: none; } }

@media (max-width: 1040px) {
  #screen { grid-template-columns: minmax(0, 1fr); }
  #side { border-left: 0; padding-left: 0; margin-top: 14px; overflow: visible; }
  #playerstats { overflow: visible; max-height: none; }
  /* The list keeps its bound and its bar here too, and the same one: a turn
     row is the same 52 pixels on a phone, where the panel runs the full width
     rather than sitting in a 340 column. It used to run to full height on the
     grounds that the page scrolls anyway, which put ten plays between the
     chart and the swing table, most of a screen of reading before anything
     else on the page. */
}

/* The stacked layout has to scroll, and it has to start scrolling at the same
   width the columns stack at.

   It used to start at 700 while the columns stacked at 1040, so anything
   between, an iPad held upright above all, got the two columns stacked inside
   a shell still pinned to the viewport height with the page overflow hidden.
   The feed collapsed to its minimum, the stats ran over the top of it, and
   there was no way to scroll to any of it. */
/* 700, not 620: the chart's own controls went from one row to three, and
   between those two heights the feed was squeezed to a dozen pixels while the
   page insisted on holding itself to the window. */
@media (max-width: 1040px), (max-height: 700px) {
  html, body { overflow: auto; }
  #shell { height: auto; min-height: 100%; }
  #screen, #main, #logwrap, #logbox { display: block; }
  /* The same height here. 58vh was most of an iPad held upright, which is a
     feed longer than the game that fills it. */
  #logbox, #log { height: var(--feed-h); min-height: 0; }
  /* The column is not a flex column once it stacks, so the chart goes back to
     the height it starts at rather than stretching to the page. */
  #chartwrap { display: block; }
  #chart { height: 200px; }

  /* The footer is a sibling of the grid, not a child, so once the columns
     stack it landed after the stats and put the blinking cursor at the foot
     of a table of totals. It belongs at the end of the feed, where it reads
     as waiting for the next play, which is where it already sits on desktop.
     Flattening the grid makes main, footer and stats siblings that can be
     ordered; #screen's padding moves onto the two it used to wrap. */
  #screen { display: contents; }
  #main { order: 1; padding: 10px 12px 0; }
  #statusbar { order: 2; }
  #side { order: 3; padding: 0 12px 4px; }
}

/* Stacked but not a phone: a half-screen window on a desktop, a tablet. At
   760 by 750 the feed's box started 687px down, so 63px of it showed before
   the fold, with the tile, the chart, its legend and chips and the last play
   all standing above it. What gives way here: the plot loses 40px, the last
   play goes back to two lines (at this width the text rarely needs three),
   and the feed's box fills the window once scrolled to rather than being a
   440px window inside a scrolling page. A phone keeps its own rules. */
@media (min-width: 701px) and (max-width: 1040px),
       (min-width: 701px) and (max-height: 700px) {
  #chart { height: 160px; min-height: 160px; }
  #chartwrap { margin-bottom: 8px; }
  #nowline { height: calc(2 * 1.35em + 16px); }
  #nowtext { -webkit-line-clamp: 2; }
  #logbox, #log { height: max(var(--feed-h), calc(100vh - 120px)); }
}

/* ---- what sits above the chart, and what does not ---- */
/* The DOM is in the order every width reads: the pending call takes the slot
   above the plot and the play that just happened goes below it. Between a
   projection and a record the projection is the one worth the slot under the
   bar it is about to move -- the play just made is also the first row of the
   feed, while the options expire at the snap. A phone has room for one tile
   above the chart, not two, and a wide screen had put the last play back
   above the plot; it now matches the phone rather than being laid out twice.

   The one thing a wide screen still reorders is the pending call, which
   moves above the section rule so it sits directly under the bar. Nothing
   focusable moves, so the tab order is the DOM order at every width. */
@media (min-width: 1041px) and (min-height: 701px) {
  /* #head and #readout keep the default 0 and so stay at the top. */
  #nextplay { order: 1; margin-top: 0; }
  #main > .hdr { order: 2; }
  #chartwrap { order: 3; }
  #nowline { order: 4; }
  #logwrap { order: 5; }
}

/* Two columns, but not tall: a laptop with the browser's own chrome above
   the page. The feed is what gives in this layout, and between 701 and 900
   it gave nearly everything: measured at 1280x800 the feed's box was 74px,
   three rows, under a plot of 200 and a last-play box of three lines. The
   plot and the last play give first here, the way they do on a stacked
   page of the same height, which hands the feed 57px back. The plot's
   floor rises with the window rather than stepping, 160 at 800 and its
   full 200 from 840, so the feed does not shrink as the window grows; the
   last play's third line comes back at 901, a 16px step. Still short at
   800 (131px); the threshold under which the page stacks and scrolls is
   the other lever, and is a decision rather than a fix. */
@media (min-width: 1041px) and (min-height: 701px) and (max-height: 900px) {
  #chart {
    flex-basis: clamp(160px, calc(100vh - 640px), 200px);
    min-height: clamp(160px, calc(100vh - 640px), 200px);
  }
  #nowline { height: calc(2 * 1.35em + 16px); }
  #nowtext { -webkit-line-clamp: 2; }
}

@media (max-width: 640px) {
  body { font-size: 12px; }
  /* A phone has no room for both, so the box takes the line under the score.
     Stated rather than left to overflow, so it lands there every time. */
  #head { flex-wrap: wrap; }
  #headline { flex: 1 1 100%; }
  /* #screen is display: contents here, so its padding is inert. */
  #main { padding: 8px 8px 0; }
  #side { padding: 0 8px 4px; }
  #prob { font-size: 17px; }
  .sep { display: none; }
  #filters { column-gap: 12px; }

  /* A single fixed grid leaves the play text about sixty pixels on a phone,
     but going fully inline means a row with no swing slides everything left
     and nothing lines up. So: the details keep a grid, and the play text
     spans the whole row underneath it. */
  /* The top line does not fit a phone: the status was cut off mid-word and
     the game picker collapsed to its arrow. Let it wrap.

     Two lines, and which two is set here rather than left to whatever runs
     out of room first. The title and the status are what the line is for, so
     they share the first; the pickers are one unit and take the second,
     where the game one gets all the width the season one does not need. The
     title and the year used to sit together on the first line with the
     status stranded under them and the game picker under that, three rows
     deep, with the status right-aligned against nothing. */
  #titlebar { flex-wrap: wrap; row-gap: 5px; overflow: visible; }
  #titletext { order: 1; flex: 0 0 auto; }
  #statusgroup { order: 2; margin-left: auto; gap: 8px; }
  /* The furniture gives up the two points, not the title. At 375 the title
     wants 166 and the status 199 against 349 of room, which is what put them
     on separate lines with the pickers on a third; a size down and a tighter
     gap brings the status to about 160 and the two of them share a line. */
  #statusgroup .conn,
  #tolive,
  #toseason,
  #theme { font-size: 10px; letter-spacing: .06em; }
  #pickers { order: 3; flex: 1 1 100%; }
  #seasonpick { flex: 0 0 auto; }
  #gamepick { flex: 1 1 auto; max-width: none; min-width: 12ch; }

  #colhead { display: none; }
  /* The column header carries the feed's top rule, and it is hidden here, so
     the list had no top edge at all: a row half scrolled under the controls
     read as broken text rather than as the top of a box. The box wears the
     rule when the header is not there to hold it. */
  #logbox { border-top: 1px solid var(--rule); padding-top: 2px; }

  /* The feed is a scroller inside a page that scrolls, and contained meant a
     thumb landing in it could never reach the rest of the page: the scroll
     stopped dead at the feed's ends rather than carrying on. Let it chain
     here. Contained is right on desktop, where the page does not scroll and
     there is nothing to chain to. */
  #log { overscroll-behavior-y: auto; }

  /* A rule between plays rather than a band under every other one.
     
     Banding is for rows of a line or two, where a wash tells one from the
     next at a glance. A play on a phone is its details and then two or three
     lines of text, sixty-odd pixels of it, and nine percent of the ink over
     that much height stops reading as a stripe and starts reading as a slab:
     half the feed in grey blocks. A hairline says the same thing in one
     pixel, and it is the line the possession bands already use. */
  .row.alt { background: transparent; }
  .row + .row { border-top: 1px solid var(--rule); }
  /* The try belongs to the touchdown above it, so no rule between the two. */
  .row.conv { border-top: 0; }

  .row {
    display: grid;
    grid-template-columns: 58px 40px 82px 46px 46px minmax(0, 1fr);
    column-gap: 5px;
    padding: 5px 4px;
  }
  /* 10px on the details buys the width that "2nd and goal" needs; the play
     text itself stays at reading size. */
  .row .when, .row .sc, .row .dn, .row .spot, .row .swing, .row .pct {
    font-size: 10px;
  }
  /* The words go left; the numbers stay right, the way they are on desktop.
     This used to left align all six, which pinned every swing and every
     percentage to the same starting pixel and let them end wherever their
     digit count landed: 59.8% and 100.0% began together and finished twelve
     pixels apart, so nothing in the column stacked. A figure is read from
     its decimal point, and in a monospace column right is what stacks it. */
  .row .when, .row .sc, .row .dn, .row .spot { text-align: left; }
  .row .dn { white-space: nowrap; }
  .row .what {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-left: 0;
    line-height: 1.3;
  }
  /* a try line has only a badge and a phrase, so it keeps the marker column
     and runs the label alongside it rather than wrapping to its own line */
  .row.conv .what { grid-column: 1 / -1; margin-top: 0; }
}

/* ---- the share card ---- */
/* ?card=1 lays the page out as the 1200x630 picture a link preview wants:
   the score, the bar and the graph, and none of the furniture around them.
   scripts/og.py photographs this, so what gets posted is the real page and
   not a second drawing of it that would drift from this one.

   Last in the file on purpose: it has to beat the responsive blocks above,
   which is where the layout it overrides is set. */
:root[data-card] #side,
:root[data-card] #qtrbox,
:root[data-card] #logwrap,
:root[data-card] #statusbar,
/* Every control, wherever it lives: the saving one rides the section rule and
   the marks switch rides the legend, and the card keeps both of those. */
:root[data-card] .chip,
/* The card is a picture of a game, not a thing anyone is about to act on, and
   its height is measured to the pixel: the plot is sized so the legend lands
   inside 630 rather than across the bottom edge. Seventy more pixels of
   pending fourth down above it would put the legend back over that edge. */
:root[data-card] #nextplay,
:root[data-card] #chartctl { display: none; }
/* The marks are off on a card, so their key is a row of reserved blank space
   and the card has no room to reserve. It kept the second legend line below
   the fold and pushed the first one half off the bottom edge. The page holds
   that space so nothing moves when the marks are switched; a card is one
   picture and switches nothing. */
:root[data-card] .lbreak,
:root[data-card] .lbreak-phone,
:root[data-card] #chartlegend .key { display: none; }
/* No scroll, no centred column, no side rules: the window is the card. */
:root[data-card] html, :root[data-card] body { overflow: hidden; }
:root[data-card] #shell {
  max-width: none;
  height: 100%;
  border: 0;
  display: flex;
}
:root[data-card] #screen {
  display: block;
  padding: 20px 26px 16px;
  width: 100%;
}
:root[data-card] #main { display: block; }
/* A card is read at thumbnail size in a timeline, so everything on it runs a
   size or two up from the page's own. */
:root[data-card] body { font-size: 15px; }
:root[data-card] #scoreline .pts { font-size: 30px; }
:root[data-card] #scoreline .ab { font-size: 15px; }
:root[data-card] #nowline { font-size: 14px; }
:root[data-card] #chartlegend { font-size: 12.5px; }
/* Sized so the legend under it lands inside the card rather than across
   its bottom edge. Measured, not guessed: at 348 the plot ran seven
   pixels past 630, and at 338 the last-play box that now sits under the
   legend ran four past it (its bottom edge at 634, and the card's own 16px
   of bottom padding gone). 318 puts the box's edge at 614.

   The wrap goes back to a block here, as it does on a stacked page: the card
   is one fixed size and the plot is told what it is, and left as a flex item
   the basis the page gives it would win over that height. */
:root[data-card] #chartwrap { display: block; }
:root[data-card] #chart { height: 318px; }
:root[data-card] #chartwrap { margin-bottom: 0; }
/* The name stays, so the picture still says whose it is wherever it is
   reposted. Everything else on that line is a control. */
:root[data-card] #pickers,
:root[data-card] #statusgroup { display: none; }
:root[data-card] #titlebar { padding: 10px 26px 8px; }
:root[data-card] #titletext { font-size: 15px; }
/* The page holds two lines here so the chart below never shifts as plays
   come in. A card is one moment, so it takes the height it needs. */
:root[data-card] #nowline { height: auto; }