/* The card shapes — see card-shapes.js for the decisions. Every color is a page token, so the shapes follow light and dark mode, and the look is the tennis diamonds' (tennis-diamonds.css): faint rings with the 50 ring stronger, the player's area in the accent at .2, a dot per point. */ /* Three across where the column has room, fewer where it does not, one per row on a phone. Flex rather than a three-track grid so a narrow desktop wraps to two and one, centered, instead of squeezing three shapes into labels that collide. */ .cs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 16px; margin-top: 14px; } .cs-shape { flex: 1 1 250px; max-width: 300px; min-width: 0; display: flex; flex-direction: column; align-items: center; } @media (max-width: 900px) { .cs-row { gap: 30px; } .cs-shape { flex-basis: 100%; } } .cs-head { text-align: center; min-height: 36px; } .cs-title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--text-primary); } .cs-sub { font-size: 11px; color: var(--text-tertiary); font-style: italic; margin-top: 1px; } /* the drawing scales with its column; the labels are laid over it in HTML so they keep their size when the polygon shrinks */ .cs-box { position: relative; width: 100%; aspect-ratio: 300 / 280; } .cs-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .cs-ring { fill: none; stroke: var(--border); stroke-width: 1; opacity: .4; } .cs-ring.cs-mid { opacity: .75; } .cs-area { fill: var(--gold); fill-opacity: .2; stroke: var(--gold); stroke-width: 1.7; stroke-linejoin: round; } .cs-dot { fill: var(--gold); } /* A point's label is the control: an when it links, a