/*
  StrokePatterns.css

  Shared scorecard stroke-background patterns.

  Class naming:
    sp_<pattern>

  Pattern digits:
    0 = no stroke / clear background
    1 = one stroke highlight
    2 = two-stroke highlight

  Pattern length:
    1 digit  = full cell
      sp_1   = full cell, one stroke
      sp_2   = full cell, two strokes

    2 digits = half cell / team mode
      sp_10  = left half highlighted, right half clear
      sp_01  = left half clear, right half highlighted
      sp_20  = left half two-stroke highlight, right half clear

    4 digits = quarter cell / player mode
      sp_1010 = quarters 1 and 3 highlighted
      sp_0001 = quarter 4 highlighted
      sp_0020 = quarter 3 two-stroke highlighted

  Ordering convention:
    Team mode, two digits:
      Team 1, Team 2

    Player mode, four digits:
      Team1Player1, Team1Player2, Team2Player1, Team2Player2

  Intended use:
    Existing whole-cell game highlights can use sp_1 and sp_2.
    4 Ball team-handicap mode can use two-digit patterns.
    4 Ball player-handicap mode can use four-digit patterns.
*/

:root {
  --stroke-pattern-one: rgba(255, 243, 160, 0.50);
  --stroke-pattern-two: rgba(255, 194, 102, 0.50);
  --stroke-pattern-clear: transparent;
}

/* Full-cell patterns */
.scorecard td.sp_0 {
  background: var(--stroke-pattern-clear);
}

.scorecard td.sp_1 {
  background: var(--stroke-pattern-one);
}

.scorecard td.sp_2 {
  background: var(--stroke-pattern-two);
}

.scorecard td.sp_00 {
  background: var(--stroke-pattern-clear);
}

/* Half-cell patterns */
.scorecard td.sp_01 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 50%,
      var(--stroke-pattern-one) 50% 100%);
}

.scorecard td.sp_02 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 50%,
      var(--stroke-pattern-two) 50% 100%);
}

.scorecard td.sp_10 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 50%,
      var(--stroke-pattern-clear) 50% 100%);
}

.scorecard td.sp_20 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 50%,
      var(--stroke-pattern-clear) 50% 100%);
}


/* Quarter-cell patterns */
.scorecard td.sp_0000 {
  background: var(--stroke-pattern-clear);
}

.scorecard td.sp_0001 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_0002 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_0010 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_0011 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_0012 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_0020 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_0021 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_0022 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_0100 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_0101 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_0102 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_0110 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_0111 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_0112 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_0120 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_0121 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_0122 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_0200 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_0201 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_0202 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_0210 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_0211 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_0212 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_0220 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_0221 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_0222 {
  background: linear-gradient(to right,
      var(--stroke-pattern-clear) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_1000 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_1001 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_1002 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_1010 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_1011 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_1012 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_1020 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_1021 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_1022 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_1100 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_1101 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_1102 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_1110 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_1120 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}


.scorecard td.sp_1200 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_1201 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_1202 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_1210 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}


.scorecard td.sp_1220 {
  background: linear-gradient(to right,
      var(--stroke-pattern-one) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_2000 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_2001 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_2002 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_2010 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_2011 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_2012 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_2020 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_2021 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_2022 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-clear) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_2100 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_2101 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_2102 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_2110 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_2120 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-one) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_2200 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_2201 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-one) 75% 100%);
}

.scorecard td.sp_2202 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-clear) 50% 75%,
      var(--stroke-pattern-two) 75% 100%);
}

.scorecard td.sp_2210 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-one) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}

.scorecard td.sp_2220 {
  background: linear-gradient(to right,
      var(--stroke-pattern-two) 0% 25%,
      var(--stroke-pattern-two) 25% 50%,
      var(--stroke-pattern-two) 50% 75%,
      var(--stroke-pattern-clear) 75% 100%);
}