/* ---------- Football Mode ---------- The board of balls, the three pickers in front of it, and nothing else. LOADED AFTER qbmode.css, which is the cascade and is deliberate: this screen IS a GeoGauntlet board — .gg-wrap, .gg-bar, .gg-main, .gg-form, .gg-input, .gg-sugg, .gg-go — and what follows either adds furniture no other mode has (a grid of up to 236 balls) or overrides one rule of it. NOTHING HERE HARD-CODES A COLOUR, with ONE deliberate exception: the balls are painted from an inline hsl() computed per player in footmode.js, because eighty-three distinct colours cannot be written down as tokens. It arrives as the custom property --fb-c rather than as `background` directly, which is what lets one inline value drive the fill AND the pentagon's contrast without the JavaScript knowing either rule. Everything else is a token out of theme.css, so light mode is free. NO CLASS HERE MAY BE A PREFIX OF ANOTHER FOLLOWED BY A HYPHEN — the rule nflmode.css and qbmode.css both record, enforced by tests/test_a11y.py with a \b word-boundary match that a hyphen does not stop. So .fb-cn/.fb-cb/.fb-cm rather than .fb-cat-name and friends. A trailing plural is safe: \bfb-pick\b does not match inside "fb-picks", because s is a word character. */ .fb-wrap{max-width:900px} /* ROOM FOR THE BAR. It is fixed, so it is out of flow and would otherwise sit on top of the last tournament and the player chips. */ .fb-wrap{padding-bottom:132px} @media(max-width:700px){ .fb-wrap{padding-bottom:150px} } /* ---- the home tile's row ------------------------------------------------- FOUR ACROSS ONCE THIS MODE IS OPEN, and the reason is written on the rule it is overriding: responsive.css's own note says a card left on "a row of its own with a hole beside it" reads as a layout that had broken rather than one that meant it. The rest-row ships with three cards in three columns; the fourth is drawn only for somebody the mode is open to, and without this it lands alone on a second row. THE SELECTOR ASKS WHETHER THE CARD IS ACTUALLY SHOWN, not whether it exists. #modeFootWrap is always in the markup — it ships `style="display:none"` so that the default for anybody whose browser never gets an answer is the card not existing — and the head's reveal() clears that to `""`. So the wrapper still holding `none` in its style attribute is exactly "the mode is shut", and the row keeps its shipped three columns. :has() CARRIES #modeFootWrap'S OWN SPECIFICITY, which is what lets this outrank responsive.css's `.modes` rules from a sheet that loads before it. A browser without :has() falls back to the three-column layout and the lone fourth card — the state this is improving on, not a broken one. */ /* SCOPED TO THE WIDTHS THAT ACTUALLY SHIP THREE COLUMNS, which is the part the first cut got wrong. This selector carries #modeFootWrap's specificity, so an unscoped rule outranks responsive.css at EVERY width — including 701-1100px, where that sheet deliberately drops the row to two columns. Four ~190px cards landed there instead, and "Play with friends" (146px, white-space:nowrap) spilled out of a 117px pill while "Higher or Lower" wrapped to two lines, because responsive.css only shrinks the type below 700px. So: four across only above 1100px, where the row is three columns and the fourth card is the one left over. 701-1100px is already two columns and four cards are 2 + 2 there — nothing to fix. At 700px and below the row goes back to three, which strands the fourth again, so it drops to two rather than up to four: four cards across a phone would be 88px each. */ @media(min-width:1101px){ .modes-rest:has(> #modeFootWrap:not([style*="none"])){ grid-template-columns:repeat(4,1fr) } } @media(max-width:700px){ .modes-rest:has(> #modeFootWrap:not([style*="none"])){ grid-template-columns:repeat(2,minmax(0,1fr)) } } /* ---- screen 1: the two categories ---------------------------------------- */ .fb-cats{display:grid;gap:10px;margin-top:12px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .fb-cat{display:flex;flex-direction:column;gap:5px;text-align:left; padding:16px 18px;border-radius:var(--radius);cursor:pointer; background:var(--sheet);border:1px solid var(--border);color:var(--text)} .fb-cat:hover{background:var(--sheet-2);border-color:var(--gold)} .fb-cn{font:900 19px/1.15 var(--display);letter-spacing:-.01em} .fb-cb{font-size:13px;color:var(--text-soft);line-height:1.45} .fb-cm{font:700 10px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase; color:var(--gold)} /* ---- screen 2: the two eras ---------------------------------------------- */ /* WIDER CELLS THAN THE COUNTRY PICKER, because there are exactly two of them and a two-column grid of narrow cards on a wide screen leaves the choice floating in the corner. */ .fb-eras{display:grid;gap:10px;margin-top:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .fb-era{display:flex;flex-direction:column;gap:4px;text-align:left; padding:16px 18px;border-radius:var(--radius);cursor:pointer; background:var(--sheet);border:1px solid var(--border);color:var(--text)} .fb-era:hover{background:var(--sheet-2);border-color:var(--gold)} .fb-en{font:900 18px/1.15 var(--display);letter-spacing:-.01em} /* THE YEARS ARE THE LOUD HALF, deliberately. "Last 25 years" is a label on a frozen set of tournaments, so the span under it is the part that is actually true — see the note on RECENT_FROM in scripts/build_wc_goalscorers.py. */ .fb-ey{font:700 13px/1.3 var(--mono);letter-spacing:.06em;color:var(--gold)} .fb-em{font-size:12.5px;color:var(--text-soft)} /* ---- screen 3: the country picker ---------------------------------------- */ /* THE COUNTRY GRID IS NFL MODE'S TEAM GRID WITH FLAGS IN IT, and deliberately so: .nm-teams and .nb-teams are a crest, a name and nothing else at minmax(118px), and a visitor coming from the Sports chooser has just been told all three leagues are the same kind of choice. This was four wide left-aligned cards — sixteen rows to show 61 countries, each with a third of its width empty — which read as a different site. 144 RATHER THAN THEIR 118, because a country name is longer than a club nickname: "Serbia and Montenegro" and "Bosnia and Herzegovina" are three words where "Packers" is one. 144 holds the longest of them on two lines at the tile's own font size, and still fits seven across the 1040px wrap where the old grid fit four. */ .fb-picks{display:grid;gap:8px;margin:4px 0 18px; grid-template-columns:repeat(auto-fill,minmax(144px,1fr))} .fb-pick{display:flex;flex-direction:column;align-items:center;gap:6px; padding:12px 8px;border-radius:12px;border:1px solid var(--border-strong); background:var(--panel);color:var(--text);cursor:pointer;min-height:118px; justify-content:center;font-family:inherit;text-align:center; transition:border-color .12s,background .12s,transform .12s} .fb-pick:hover{border-color:var(--accent);background:var(--panel-2)} .fb-pick:active{transform:translateY(2px)} /* THE FLAG BOX IS A FIXED RECTANGLE AND THE FLAG IS FITTED INSIDE IT. Flags are not one shape — Switzerland is square, Qatar is 11:28 — so a width alone would give a row of tiles whose pictures ended at different heights. The box is 3:2, which is what most of them are, and object-fit:contain letterboxes the rest rather than stretching them. Same reasoning as .nm-crest one mode over, which fits its logos into a square for the same reason. THE HAIRLINE MATTERS MORE HERE THAN ON A CREST. A crest is a shape on transparency; a flag is a filled rectangle, and Japan's is a red disc on white — without a border it has no edge at all against a light panel. */ .fb-flag{width:46px;height:31px;flex:none;display:flex;align-items:center; justify-content:center;overflow:hidden;border-radius:3px; box-shadow:0 0 0 1px var(--border-strong)} .fb-flag img{width:100%;height:100%;object-fit:contain} /* NO FLAG TO DRAW — a state that no longer exists. Its initials in the same box, so the row stays straight. See fbFlag() in web/src/footmode.js. */ .fb-noflag{font:900 12px/1 var(--mono);letter-spacing:.06em; color:var(--text-soft);background:var(--sheet-2)} .fb-pn{font:900 12.5px/1.2 var(--display);text-align:center; overflow-wrap:anywhere} /* THE TWO NUMBERS THAT DECIDE THE CHOICE: how big the board is, and how many guesses it allows. Brazil is 236 balls and 83 names and Angola is one of each, which is the difference between an evening and a moment — and it is the whole reason this tile carries a line the NFL and NBA ones do not. */ .fb-pm{font:700 9.5px/1.35 var(--mono);letter-spacing:.02em; color:var(--text-soft);text-transform:uppercase} .fb-pm b{color:var(--gold);font-weight:900} /* "their whole World Cup history" — only ever on the last-25 picker, and only on a country that never played before the cutoff. Quiet: it is a footnote on the row, not a second heading. */ /* Sized to the tile it now sits in rather than to the wide card it used to, and set on two lines rather than one — "their whole history" at 11px was wider than the tile. */ .fb-pw{font:700 9px/1.25 var(--mono);letter-spacing:.02em;text-transform:uppercase; color:var(--gold);opacity:.85;max-width:100%} /* ---- the head and the score --------------------------------------------- */ .fb-head{display:flex;justify-content:space-between;align-items:flex-start; gap:14px;flex-wrap:wrap;margin-top:6px} .fb-name{font:900 clamp(22px,3vw,32px)/1.05 var(--display);letter-spacing:-.02em; margin:0;color:var(--text)} .fb-line{font-size:13px;color:var(--text-soft);margin-top:3px} .fb-score{text-align:right} .fb-pts{font:900 30px/1 var(--display);color:var(--gold); font-variant-numeric:tabular-nums} .fb-of{font:700 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase; color:var(--text-soft)} /* The bar is the score made visible, so it is the same ratio and not a second idea of progress: width is found / total, which is score / 1000. */ .fb-prog{height:6px;border-radius:999px;background:var(--sheet-2);overflow:hidden; margin:12px 0 6px} .fb-prog span{display:block;height:100%;background:var(--gold); transition:width .45s ease} .fb-count{font-size:12.5px;color:var(--text-soft)} .fb-count b{color:var(--text)} /* ---- the ask ------------------------------------------------------------- */ /* The ask is the kit's gg-form + gg-row, so there is nothing to style here beyond the space above it. Give up borrows .gg-stand, which is already the quiet button beside a loud one everywhere else on the site. */ .fb-ask{margin:14px 0 4px} /* ---- the board ----------------------------------------------------------- */ .fb-grid{margin-top:16px;display:flex;flex-direction:column;gap:9px} .fb-tn{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start} .fb-tl{font:700 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--text-soft); text-align:right;padding-top:2px} /* The count under the year is that tournament's own total. Quieter than the year: it is context for the block beside it, not a second label. */ .fb-tl span{display:block;font-size:9.5px;opacity:.6} /* THE BALLS. `auto-fill` with a fixed cell rather than a fixed column count: a tournament is anywhere from 1 goal to 27, and the row has to be as wide as it needs on a laptop and wrap on a phone without either being told a number. 15px RATHER THAN QB MODE'S 14. A circle with a shape cut out of it needs one more pixel than a flat square to still read as a football rather than as a dot with a smudge — checked against the 83-colour palette, which is the hardest case. There are also a third as many of them at most, so the row can afford it. */ .fb-balls{display:grid;gap:3px; grid-template-columns:repeat(auto-fill,minmax(15px,1fr)); max-width:100%} /* ONE BALL. A circle, and a pentagon in the middle of it. This is the whole illustration and it is deliberately not more: at 15px the five white hexagon patches of a real ball are sub-pixel, so a faithful drawing arrives as grey mush while a single dark pentagon on a coloured circle reads as a football instantly. Drawn in CSS rather than as an SVG because there are up to 236 of them and every one is repainted on every guess — a pseudo-element costs no node. --fb-c IS THE PLAYER'S COLOUR, set inline by footmode.js. An empty ball never sets it, so the fallback in the var() is what the theme paints. */ .fb-ball{display:block;aspect-ratio:1;border-radius:50%;position:relative; background:var(--sheet-2);border:1px solid var(--border)} .fb-ball.on,.fb-ball.lost{background:var(--fb-c,var(--sheet-2)); border-color:transparent} /* The pentagon. inset:27% leaves a rim of the player's colour all the way round, which is what keeps the hue readable at this size — a bigger patch would leave a ring too thin to carry it. */ .fb-ball::after{content:"";position:absolute;inset:27%; clip-path:polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%); background:rgba(0,0,0,.58)} /* AN EMPTY BALL KEEPS ITS PENTAGON AND ALMOST LOSES IT. Enough to say what the shape is, faint enough that a grid of unguessed balls reads as empty rather than as a pattern. */ .fb-ball:not(.on):not(.lost)::after{background:var(--border);opacity:.55} /* A BALL THAT WAS REVEALED RATHER THAN EARNED. Same colour, so the player reads as one person across the board, but knocked back and scaled down — the same treatment qbmode.css gives a lost square, and for the same reason: the difference has to be visible at 15px without relying on hue, because the palette has already spent every hue there is. */ .fb-ball.lost{opacity:.4;transform:scale(.66)} /* ---- who has been named -------------------------------------------------- */ .fb-found{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px} .fb-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px; padding:3px 9px;border-radius:999px;background:var(--sheet); border:1px solid var(--border);font-size:12.5px;color:var(--text)} /* The chip's dot is the same ball, at 11px and without the pentagon: the pentagon at that size is two pixels and reads as dirt. The circle and the colour are what tie the chip to the board. */ .fb-chip i{width:11px;height:11px;border-radius:50%;flex:none; background:var(--fb-c,var(--border))} .fb-chip b{color:var(--gold);font-variant-numeric:tabular-nums} /* A miss is struck through rather than red: it is a name that was not on this board, which is not an error — it is the game. The same treatment GeoGauntlet gives a country that was not in the round. */ .fb-chip.miss{color:var(--text-soft);text-decoration:line-through;opacity:.7} /* ---- the end ------------------------------------------------------------- */ .fb-done{margin-top:18px;padding:16px;border-radius:var(--radius); background:var(--panel);border:1px solid var(--border)} .fb-dt{font:900 19px/1.2 var(--display);color:var(--text)} .fb-missed{margin-top:12px} .fb-ml{font:700 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--text-soft);margin-bottom:6px} .fb-mr{display:flex;flex-wrap:wrap;gap:6px} /* THE THREE WAYS ON, as one row, and NOT flex:1 — the labels are "Another country", "Share result" and "Home", and stretching three buttons of such different lengths to one width makes Home enormous and the row read as a segmented control rather than as three choices. THE LABEL FLIPS WITH THE THEME, which --on-accent deliberately does not do. That token is #fff in both, and its own note says why: it is for text on a surface that keeps its colour across themes. The accent is not such a surface — it is --gold, a bright lime in the dark theme and a deep olive in the light one — so one label colour cannot serve both. Black on the lime, white on the olive. Dark is the bare :root here because that is how theme.css is built. */ .fb-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .fb-nav .gg-go{margin-top:0;color:#000} html[data-theme="light"] .fb-nav .gg-go{color:var(--on-accent)} /* ---- the leaderboard on the result card ---------------------------------- */ .fb-lbwrap{margin-top:18px} .fb-lb{width:100%;border-collapse:collapse;margin-top:8px} .fb-lb td{padding:7px 8px;border-bottom:1px solid var(--hair);font-size:13.5px} .fb-lb tr:last-child td{border-bottom:0} .fb-lb tr.me td{background:var(--sheet-2)} .fb-lbr{width:34px;color:var(--text-soft);font:700 12px/1 var(--mono)} .fb-lbn{font-weight:700} .fb-lbf{color:var(--text-soft);text-align:right;white-space:nowrap} .fb-lbs{width:74px;text-align:right;color:var(--gold);font-weight:900; font-variant-numeric:tabular-nums} /* THE ANSWER BAR STICKS TO THE BOTTOM OF THE WINDOW. A board is up to 236 balls and twenty-two tournaments tall — well past a screen — so an input that simply sat under it would mean scrolling the whole board to type and scrolling back to see what filled in. Fixed keeps both: the board scrolls behind it, the answer is always where your hands are, and the balls that just changed are the ones on screen. FIXED, NOT STICKY, and that is forced rather than preferred — `.wrap`, the app's own container that every screen on the site sits inside, carries `overflow:hidden`, and an ancestor with any overflow but visible switches position:sticky off entirely. qbmode.css found this the hard way. */ .fb-ask{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px; background:var(--page);border-top:1px solid var(--border); box-shadow:0 -8px 24px rgba(0,0,0,.28)} /* The bar spans the window; what is IN it lines up with the board above. */ .fb-askin{max-width:900px;margin:0 auto} /* The dropdown opens UPWARD out of a bar at the bottom of the screen — the same decision the Gauntlet boards made for the same reason. Downward, it would open off the bottom of the window. */ .fb-ask .gg-sugg{top:auto;bottom:100%;margin-bottom:6px} .fb-ask .gg-row{margin-top:8px} /* ---- the phone ----------------------------------------------------------- */ @media(max-width:700px){ .fb-tn{grid-template-columns:40px 1fr;gap:7px} .fb-balls{grid-template-columns:repeat(auto-fill,minmax(13px,1fr));gap:2px} /* THE COUNTRY GRID DOES NOT GO TO ONE COLUMN. It is a grid of flags now, the way .nm-teams is a grid of crests, and both stay multi-column on a phone — 61 countries one per row is a screen nobody reaches the bottom of. The other two lists here are two and four cards, so one column is right for them. */ .fb-cats,.fb-eras{grid-template-columns:1fr} .fb-picks{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px} .fb-pick{min-height:100px;padding:10px 6px} .fb-flag{width:38px;height:26px} .fb-pn{font-size:11.5px} .fb-pm{font-size:9px} .fb-pts{font-size:25px} /* THREE LINKS, NOT THREE BUTTONS — the trade qbmode.css spells out. Stacked on a phone the filled version is three slabs 43px tall, which is 149px of card spent on three words; as text they stack tight and still read as the three ways on, at 22px a row. The arrow does the work the box used to. THE COLOUR RULE ABOVE HAS TO BE UNDONE HERE, both halves of it: black and white are label colours for text sitting ON the accent, and once the fill is gone they are a black word on a dark panel and a white word on a cream one. The selector repeats the [data-theme] half so it can outrank it. NO font-family, so the link inherits the body face rather than --display, which is Archivo Black and heavy at every size — three lines of it under the player list read as three headings rather than three things to tap. */ .fb-nav{flex-direction:column;align-items:flex-start;gap:0;margin-top:8px} .fb-nav .gg-go, html[data-theme="light"] .fb-nav .gg-go{ background:none;border:0;border-radius:0;padding:4px 0; color:var(--accent);font-family:inherit;font-size:13px;font-weight:700; line-height:1.25;text-align:left} .fb-nav .gg-go::after{content:" →"} /* THE NAME BOX ON A PHONE. Same floor as QB Mode's: 52px is a thumb target, and 16px text is what stops Safari zooming the page on focus and never zooming back. The fixed bar is what a whole round is played through, so this is the single most important hit target in the mode. */ .fb-ask .gg-input{min-height:52px;font-size:16px} .fb-ask .gg-go, .fb-ask .gg-stand{min-height:48px} .fb-ask .gg-sugg > div{min-height:46px;display:flex;align-items:center} } /* Asked not to animate: the bar arrives at its width instead of growing to it. Nothing here is invisible until it moves, so there are no exceptions. */ @media (prefers-reduced-motion: reduce){ .fb-prog span{transition:none} }