/* =====================================================================
   cssField26.css - the floodlit field behind the night pages (KG/Claude 10/3/2026)
   Used by the two night shells (MasterPages/AuthMaster.master and HomeMaster.master) through 2K26/Field26.ascx. It replaces the plain repeating stripe they each drew:
   a fixed backdrop of yard lines every 5 yards, the 1-yard hash marks in two rows, and the yard numbers, all barely visible.
   The field is anchored at the LEFT edge, so it looks the same on every device (Kirk, 10/3/2026): the 1st line is --fld-x0 from the left, and the 50 is always the 3rd line (the 2nd number: a 40 stands on line 1).
   From there the numbers count down to the goal line and climb back up the other way, like a field seen end to end:  40 50 40 30 20 10 (goal) 10 20 30 40 50 40 30 ...
   EASTER EGG (Kirk): there is never a 50 on this field; every 50, the first always the 3rd line from the left, reads 69 (decided in Field26.ascx).
   Numbers stand upright in both rows, and each sits ASTRIDE its yard line like the numbers on a real field: the two digits have a gap and the line runs between them. Colors: only translucent white overlays (the one thing the palette rules allow outside cssPalette26.css).
   Tune the three --fld-* values to make it louder or quieter.
   ===================================================================== */

.fld26 {
  --fld-x0: 36px;                          /* where the 1st yard line is: the left margin of the field (wide enough for a whole number to sit on it) */
  --fld-step: 85px;                        /* five yards between yard lines; hash marks are one fifth of this (17px) */
  --fld-line: rgba(255, 255, 255, .028);   /* the yard lines (unchanged from the old stripe) */
  --fld-hash: rgba(255, 255, 255, .05);    /* the 1-yard hash marks */
  --fld-num:  rgba(255, 255, 255, .035);   /* the yard numbers: barely there */
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the lines and the hash marks start at the 1st line and repeat to the right edge */
.fld26-lines, .fld26-hash {
  position: absolute;
  left: var(--fld-x0);
  right: 0;
  background-repeat: repeat-x;
}
.fld26-lines {
  top: 0;
  bottom: 0;
  background-image: linear-gradient(90deg, var(--fld-line) 0, var(--fld-line) 2px, transparent 2px);
  background-size: var(--fld-step) 100%;
}
.fld26-hash {
  height: 10px;
  background-image: linear-gradient(90deg, var(--fld-hash) 0, var(--fld-hash) 1px, transparent 1px);
  background-size: 17px 100%;              /* one yard */
}
.fld26-hash-a { top: 38%; }
.fld26-hash-b { top: 62%; }

/* the numbers sit on every second line (every ten yards): a number on line 1, then every 170px. --i (set in the markup) counts the numbered lines from the left edge. */
.fld26-row { position: absolute; left: 0; right: 0; height: 0; }
.fld26-top { top: 12vh; }
.fld26-bot { bottom: 5vh; }
.fld26 .n {
  display: flex;
  gap: .16em;                              /* the gap the yard line runs through, between the two digits */
  position: absolute;
  left: calc(var(--fld-x0) + var(--i) * 2 * var(--fld-step));
  white-space: nowrap;
  font: 700 clamp(40px, 4vw, 60px)/1 var(--sw-font-cond);   /* a numeral about a fifth as tall as the 170px between numbered lines, like a real field */
  color: var(--fld-num);
  transform: translateX(-50%);
}
/* every digit the same width, so the middle of the number (the middle of the gap) is exactly on the line whatever the digits are (a 1 is narrower than a 0) */
.fld26 .n b { display: block; width: .5em; font-weight: inherit; text-align: center; }

@media print { .fld26 { display: none; } }