/* Yardage-book textures for the navy and stone-blue panels.
   .tex adds contour lines (like a green-reading map) and a stippled grain that fades across the
   panel. Both are masks, so their colour comes from CSS: set --tex-line / --tex-dot per panel.
   .pin is the scarlet hole-and-rings accent. Contours are drawn by build_contours.py. */
.tex { position: relative; isolation: isolate; overflow: hidden; }
.tex::before, .tex::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tex::before {
  background: var(--tex-line, #639CC5); opacity: var(--tex-line-o, .26);
  -webkit-mask: url(/contours.svg) var(--tex-pos, center) / var(--tex-size, cover) no-repeat;
          mask: url(/contours.svg) var(--tex-pos, center) / var(--tex-size, cover) no-repeat;
}
.tex::after {
  background: var(--tex-dot, #9FC3DF); opacity: var(--tex-dot-o, .4);
  -webkit-mask-image: url(/stipple.svg), linear-gradient(var(--tex-dir, 160deg), transparent 30%, #000 100%);
          mask-image: url(/stipple.svg), linear-gradient(var(--tex-dir, 160deg), transparent 30%, #000 100%);
  -webkit-mask-size: 150px 150px, 100% 100%; mask-size: 150px 150px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.pin { position: absolute; width: var(--pin-size, 8rem); aspect-ratio: 1; background: #EB2F33; pointer-events: none;
  -webkit-mask: url(/pin.svg) center / contain no-repeat; mask: url(/pin.svg) center / contain no-repeat; }
@media print { .tex::before, .tex::after, .pin { display: none; } }
/* Contours that fade out towards the edges of a section instead of stopping at a hard line. */
.tex-fade::before {
  -webkit-mask-image: url(/contours.svg), radial-gradient(ellipse at var(--tex-pos, center), #000 20%, transparent 70%);
          mask-image: url(/contours.svg), radial-gradient(ellipse at var(--tex-pos, center), #000 20%, transparent 70%);
  -webkit-mask-size: cover, 100% 100%; mask-size: cover, 100% 100%;
  -webkit-mask-position: var(--tex-pos, center), center; mask-position: var(--tex-pos, center), center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}