/* THE GAME CARD, IN A REAL STYLESHEET (10 Sep 2026). * * This lived inside js/game-card.js as a string that ensureGameCardStyles() appended to . * That meant the CSS could not arrive until the module had loaded AND the caller had run — on home, * measured 9 Sep, the cached cards painted at ~370ms and this landed at ~4200ms. In between, * .gc__link was an unstyled , i.e. display:inline, so every card's contents sat flat against the * left margin and then snapped into place. Amish, 9 Sep: "home page cards first go left margin and * then proper after flashing." * * It is a in the head now, so it is parsed before the body paints and the cards are right on * the first frame. ensureGameCardStyles() still exists and still works — it injects THIS file as a * link if a page has not already done so — but it is a fallback, not the delivery mechanism. * * ONE COPY. index.html used to carry a 12-rule partial duplicate of these styles inline, which is * why the card BOX looked right early while its insides did not; that copy is deleted. If you are * about to paste .gc rules into a page, don't — put them here. */ .gc { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; margin: 0 0 10px; overflow: hidden; box-shadow: var(--shadow-card-rest, 0 1px 3px rgba(0,0,0,.05)); } .gc__link { display: flex; align-items: center; gap: 13px; padding: 12px 14px; text-decoration: none; color: var(--color-text); } .gc__link:active { background: var(--color-bg, #F2F2EE); } .gc__date { flex: 0 0 auto; width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-primary-wash, #FCFEE9); border: 1px solid var(--color-border); border-radius: 11px; padding: 7px 0; line-height: 1.05; } .gc__date--past { background: #F3F4F6; } .gc__dow { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); } .gc__day { font-family: var(--font-display, inherit); font-size: 20px; font-weight: 800; } .gc__mon { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--color-muted); } .gc__body { flex: 1; min-width: 0; } .gc__league { display: inline-block; font-size: 11px; font-weight: 800; color: var(--color-text); background: var(--color-primary); border-radius: 999px; padding: 1px 8px; margin-bottom: 4px; } .gc__kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The section heading, living inside the card instead of above it. Sits on its own line above everything else in the body, quiet enough that the date below it is still the headline. */ /* BOLD, and in the card's own ink (Amish, 20 Aug: "put last game and next game in bold"). Muted grey at 10.5px read as a caption on the card rather than as the heading it replaced. */ .gc__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text); margin-bottom: 4px; } /* .gc__won is UNUSED as of 20 Aug — the winner moved onto the eyebrow line so the Last game card stays the same height as Next game. Left in place, not deleted: restoring the row is one line. */ .gc__won { font-size: 13px; font-weight: 800; color: var(--color-text); margin-top: 4px; overflow-wrap: anywhere; } .gc__won span { font-weight: 600; color: var(--color-muted); } /* Money state on the row. The three tones are lifted from .hero-plan__pay (g/index.html) rather than re-picked, so a player learns the amber chip once and it means the same on every surface. */ .gc__pay { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; } .gc__pay--due { background: #FFFAEB; color: #B54708; border-color: #FEDF89; } .gc__pay--wait { background: #FFF5F5; color: #B91C1C; border-color: #FCA5A5; } .gc__pay--ok { background: #ECFDF3; color: #067647; } /* ── THE TITLE CANNOT WRAP ───────────────────────────────────────────────────────────────── Name shrinks and truncates; the game number never moves. Enforced structurally, not by hoping the text is short — "Game 1 of 8" wrapped under "GCH Pickle League" at 390px, and "Rallitime Wednesday Pickleball League" would wrap anything at all. min-width:0 is what lets the name shrink below its intrinsic width inside a flex row. */ .gc__title { display: flex; align-items: baseline; gap: 7px; flex-wrap: nowrap; font-family: var(--font-display, inherit); font-weight: 800; font-size: 16px; line-height: 1.15; margin-top: 2px; } .gc__name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gc__no { flex: 0 0 auto; white-space: nowrap; font-size: 13px; font-weight: 800; color: #5C7A00; } .gc__sub { font-size: 13px; color: var(--color-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gc__arrow { flex: 0 0 auto; color: var(--color-muted); font-weight: 700; font-size: 18px; } /* Your W–L on a past row, in the arrow's place — the row is still tappable, it just leads with the answer instead of an invitation. */ .gc__score { flex: 0 0 auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 5px 10px; } .gc__score--w { color: #0E7C4A; background: #ECFDF3; } .gc__score--l { color: #B42318; background: #FEF0EF; } @media (prefers-color-scheme: dark) { .gc__score--w { color: #7BD6A6; background: rgba(123,214,166,.13); } .gc__score--l { color: #F2A29B; background: rgba(242,162,155,.13); } } .gc--live { border-color: var(--color-secondary, #10B981); } .gc--teams, .gc--wrap { border-color: var(--color-text); } /* The HERO card — the next game is the whole point of the page once you're in, so it gets the hero-plan treatment (dark border on a lime wash + a real shadow), not just a thicker hairline (Amish 2026-07-27: "we should highlight the upcoming game"). */ /* ── THE STANDARD MODE (approved 8 Sep) ──────────────────────────────────────────────────── No date box: in this layout the WHEN is the first line, in words. Every slot is its own line so nothing can ride the venue line and truncate. Only .gc--std is affected — every other caller keeps the layout it was signed off with. */ .gc--std .gc__link--std { display: block; padding: 11px 12px; text-decoration: none; color: inherit; } .gc--std .gc__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: #3a3a34; } .gc--std .gc__kind { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--color-text); border-radius: 999px; padding: 2.5px 7px; background: #fff; white-space: nowrap; } .gc--std .gc__kind--fill { background: var(--color-text); color: #fff; } .gc--std .gc__title { margin: 4px 0 1px; } .gc--std .gc__name { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.22; white-space: normal; overflow: visible; } /* names wrap, never truncate mid-word */ .gc--std .gc__line { font-size: 12px; font-weight: 600; color: var(--color-muted); line-height: 1.45; } .gc--std .gc__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; } .gc--std .gc__chip { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3.5px 7px; background: #F1F1EA; color: var(--color-text); } .gc--std .gc__chip--in { background: #E7F5E4; } .gc--std .gc__chip--crown { background: var(--color-text); color: #fff; } .gc--std .gc__chip--warn { background: #FEF3D8; } .gc--std .gc__rows { border-top: 1px solid #EFEFE9; margin: 0 12px; padding: 4px 0 8px; } .gc--std .gc__row { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 3.5px 0; } .gc--std .gc__row b { flex: 1; min-width: 0; font-weight: 700; } .gc--std .gc__rk { width: 18px; flex: none; font-weight: 700; color: var(--color-muted); } .gc--std .gc__rw { font-weight: 800; font-variant-numeric: tabular-nums; } .gc--std .gc__row.is-you { font-weight: 800; background: var(--color-primary-wash, #FCFEE9); margin: 0 -6px; padding: 3.5px 6px; border-radius: 8px; } .gc--std .gc__cta { display: block; margin: 0 12px 11px; text-align: center; background: var(--color-primary); border: 1.5px solid var(--color-text); border-radius: 999px; padding: 9px 0; font-size: 13px; font-weight: 800; color: var(--color-text); text-decoration: none; } .gc--std .gc__more { display: block; margin: 0 12px 10px; font-size: 12px; font-weight: 700; color: var(--color-muted); text-decoration: none; } .gc--prominent { border: 2px solid var(--color-text); background: var(--color-primary-wash, #FCFEE9); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.09); } .gc--prominent .gc__title { font-size: 18px; } .gc--prominent .gc__rb { background: #fff; } /* On-card RSVP quick buttons */ .gc__rsvp { display: flex; gap: 7px; padding: 0 14px 12px; } .gc__rb { flex: 1; min-height: 38px; border: 1.5px solid var(--color-border); border-radius: 10px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--color-text); cursor: pointer; } .gc__rb.is-on { border-color: var(--color-text); } .gc__rb--in.is-on { background: var(--color-primary); } .gc__rb--maybe.is-on { background: #FEF3C7; } .gc__rb--out.is-on { background: #FEE2E2; }