/* Euro Mode — the league picker, the club picker, the year picker, the match.

   THE PREFIX IS `em-` AND THE SERVER'S IS `eu`. The API is /api/eu/*, the
   table is eu_season_game and the admin kind is `eus`; the CLIENT is `em-` in
   this sheet and `em` in web/src/euromode.js.

   GREP IT AS `.em-`, NEVER AS A BARE `em`. It is a CSS unit and an HTML tag,
   so a plain search lands on `system-ui`, on every `1.2em` in base.css and on
   `--m-prem-sh`. That is the one cost of the prefix and it is worth stating
   once rather than leaving to be discovered.

   IT IS web/src/premmode.css WITH ONE SCREEN ADDED. The screens are the same
   screens — a club picker, a year picker, a fixture, a record along the top,
   an end card — so the measurements here are that file's, arrived at over a
   mode that has been played. What is new is .em-leagues, which is the picker
   above the club picker and the only screen this mode has that Premier League
   Mode does not.

   AFTER gauntlet.css AND AFTER nflmode.css in web/index.html, for the reason
   both of those carry: the play screen is a .gg-* board and this overrides
   pieces of it. */

/* ---- the league picker ----------------------------------------------------
   FOUR CARDS, AND EACH ONE WEARS SIX OF ITS CLUBS. A league is recognised by
   its badges long before it is recognised by its name in a list, which is the
   argument .sp-deck's racks already make one level up on the Sports chooser;
   this borrows the shape and not the sheet, because the discs here sit on the
   mode's own card rather than on a chooser tile.

   THE SAME CARD AS EVERY TILE BELOW — teal (--m-euro), the hard 0 5px 0 lip
   that rises on hover and presses flat on :active, the name in the display
   face in --on-accent — so the three pickers read as one screen three levels
   apart.

   240px MINIMUM AND NOT THE CLUB TILE'S 248: the longest name here is
   "Bundesliga" at ten characters, where a club tile has to hold
   "Mönchengladbach". */
.em-leagues{display:grid;gap:12px;margin-top:6px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.em-league{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  text-align:left;padding:16px 18px;border:0;border-radius:16px;cursor:pointer;
  color:var(--on-accent);background:var(--m-euro);
  box-shadow:0 5px 0 var(--m-euro-sh);font-family:inherit;
  transition:transform .12s,box-shadow .12s}
/* `background` AND `transform` RESTATED ON HOVER, and neither is redundant:
   base.css still carries a generic `button:hover{background:#2c3c68;
   transform:translateY(-1px)}` that outranks a bare class. The same note
   .em-club and .em-pick carry further down. */
.em-league:hover{background:var(--m-euro);transform:translateY(-2px);
  box-shadow:0 7px 0 var(--m-euro-sh)}
.em-league:active{transform:translateY(3px);box-shadow:0 2px 0 var(--m-euro-sh)}
/* NOT `.em-league-name`. A hyphen is a word boundary, so a class named
   `em-league-name` would also be matched by anything looking for `em-league`
   — and the a11y suite that checks every clickable class would read the span
   as the button. Every child class here ends in a letter for that reason. */
.em-leaguen{font:900 22px/1.1 var(--display);letter-spacing:-.02em}
/* rgba RATHER THAN --text-muted, because the card's ground is the mode colour
   in both themes and the type on it never flips — .mode-no on the home cards
   is written the same way for the same reason. */
.em-leaguem{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
/* THE ROW OF BADGES, and it may WRAP TO NOTHING. Six crests is the intent and
   any one of them can hide itself on a 404, so the row is sized by its
   contents rather than given a height — a league whose files never shipped
   loses the row and keeps the card. */
/* 30px AND A 5px GAP IS SIX BADGES ON ONE LINE, measured rather than guessed.
   At the wrap's full 1076 the grid gives four cards of 252, which is 216 of
   row inside the card's padding; six 34px discs and five 6px gaps came to 234
   and wrapped the last one onto a second line, which read as a ragged card
   rather than as a rack. 6x30 + 5x5 is 205 and clears it by 11. */
.em-faces{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
/* AND EACH ONE SITS ON A WHITE DISC, which is not decoration: without it this
   row is INVISIBLE and looks like a layout bug. The badges are transparent
   PNGs drawn for a white ground, and on the teal card Bremen's green, Union
   Berlin's red-on-nothing and half of Serie A simply disappear — the images
   load, the elements are in the DOM at their full size, and the card shows an
   empty band. Measured before the rule went in: naturalWidth 500, display
   block, nothing on screen.

   THE DISC IS THE IMAGE ITSELF — a white background under a padded, rounded
   img — rather than a span around it, so a crest that hides itself (the
   onerror) takes the disc with it and leaves no empty white circle behind.
   The same rule .em-club and .em-pick take below. */
.em-league .em-face{flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  box-sizing:border-box;background:var(--on-accent);padding:4px}


/* ---- the club picker ------------------------------------------------------
   THIRTY-TWO TO FORTY CLUBS A LEAGUE, which is where this screen parts
   company with NFL Mode's thirty-two and NBA Mode's thirty. Those two draw a
   crest grid; this draws a name list WITH THE CREST BESIDE THE NAME, because
   forty of anything is a scroll on a phone whatever it is made of, and a badge
   to the left of a row costs no height where a badge above a name costs a
   whole line. The files are images/teams/euro-{slug}.png, and the path comes
   off the payload rather than being built here — see emCrest in
   web/src/euromode.js for the accent that made that necessary.

   SORTED BY NAME AND NOT BY SEASONS, deliberately. Ranking them by how many
   years they have on file would put the giants at the top and bury
   Kaiserslautern at the bottom, which is a leaderboard nobody asked for; a
   person looking for their club looks for its NAME. The season count is on the
   tile because it is the honest thing to say about a club with one.

   THE TILE IS THE HOME SCREEN'S CARD, ONE SIZE DOWN. Teal — --m-euro, the
   colour the home screen gives this mode's door — with the cabinet lip every
   pressable thing on that screen carries: a hard 0 5px 0 shadow in the mode's
   own shade, rising to 7 on hover and pressed to 2 on :active with the tile
   moving to meet it, the name in the display face in --on-accent, no border,
   and the radius two down from .mode-card's 18 because the tile is a fifth
   the height. The year tiles below take the same treatment, so the two
   pickers read as one screen a level apart.

   `background` AND `transform` RESTATED ON HOVER, and neither is redundant:
   base.css still carries a generic `button:hover{background:#2c3c68;
   transform:translateY(-1px)}` that outranks a bare class. The same note
   .em-pick carries further down. */
/* 248px IS THE LONGEST WORD PLUS THE BADGE, AND IT IS NOT THE PREMIER
   LEAGUE'S 224. That number was cut for "Wolverhampton", which measures 141px
   in the display face at 17px. The longest unbreakable word here is
   "Mönchengladbach" at fifteen characters — "Kaiserslautern" and
   "Saint-Étienne" behind it — which measures 166. The text column is the tile
   less 28px of padding, the 42px disc and the 12px gap, so 248 gives it 166 at
   the narrowest: exactly the widest word and no more, which is what stops
   overflow-wrap:anywhere breaking a club's name in the middle. */
.em-clubs{display:grid;gap:12px;margin-top:6px;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.em-club{display:flex;align-items:center;gap:12px;text-align:left;
  padding:12px 14px;border:0;border-radius:16px;cursor:pointer;
  color:var(--on-accent);background:var(--m-euro);
  box-shadow:0 5px 0 var(--m-euro-sh);font-family:inherit;
  transition:transform .12s,box-shadow .12s}
.em-club:hover{background:var(--m-euro);transform:translateY(-2px);
  box-shadow:0 7px 0 var(--m-euro-sh)}
.em-club:active{transform:translateY(3px);box-shadow:0 2px 0 var(--m-euro-sh)}
/* THE CREST SITS ON A WHITE DISC, the way the Sports chooser's racks draw
   theirs (.sp-chip in theme.css): the badges are transparent PNGs drawn for a
   white ground, and on a claret card Burnley's claret and Villa's would
   simply vanish. THE DISC IS THE IMAGE ITSELF — a white background under a
   padded, rounded img — rather than a span around it, so a crest that hides
   itself (the onerror) takes the disc with it and leaves no empty white
   circle behind. object-fit:contain fits the badge inside the padding box,
   which is what keeps a wide crest and a tall one the same visual size.
   42px, between the 44 of NFL Mode's grid and the 40 this sheet gives the
   stage on a phone; flex:0 0 as well as a width, so a long name shrinks its
   own column and never the badge. */
.em-club .em-crest{flex:0 0 42px;width:42px;height:42px}
.em-club .em-crest,.em-pick .em-crest{border-radius:50%;box-sizing:border-box;
  background:var(--on-accent);padding:6px}
/* The text beside it is a column of its own with min-width:0, which is what
   lets "Wolverhampton Wanderers" wrap inside the tile instead of pushing the
   tile wider than its grid track. */
.em-clubt{display:flex;flex-direction:column;gap:4px;min-width:0}
.em-clubn{font:900 17px/1.15 var(--display);letter-spacing:-.01em;
  overflow-wrap:anywhere}
/* rgba RATHER THAN --text-muted, because the card's ground is the mode colour
   in both themes and the type on it never flips — .mode-no on the home cards
   is written the same way for the same reason. */
.em-clubm{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ---- the year picker ------------------------------------------------------
   THE TILE IS WIDER THAN NFL MODE'S 170px because the number on it is wider:
   "2003-04" is seven characters where "2025" is four, and at the 36px display
   face the football tile's width would wrap it. */
.em-years{display:grid;gap:12px;margin-top:6px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
/* THE SAME CARD AS THE CLUB TILE ABOVE — claret, the lip, white type — so a
   player who came through one picker recognises the next. The number was
   gold on the sheet; on the mode's own colour it is white, the way the home
   cards set their names. */
.em-year{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  text-align:left;padding:18px 20px;border:0;border-radius:16px;cursor:pointer;
  color:var(--on-accent);background:var(--m-euro);
  box-shadow:0 5px 0 var(--m-euro-sh);font-family:inherit;
  transition:transform .12s,box-shadow .12s}
.em-year:hover{background:var(--m-euro);transform:translateY(-2px);
  box-shadow:0 7px 0 var(--m-euro-sh)}
.em-year:active{transform:translateY(3px);box-shadow:0 2px 0 var(--m-euro-sh)}
.em-yn{font:900 30px/1 var(--display);letter-spacing:-.03em;color:var(--on-accent);
  font-variant-numeric:tabular-nums}
.em-ym{font:700 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
/* THE TICK, and it needs a rule of its own — .nm-tick is nflmode.css's and a
   class this sheet does not define renders as bare text. 17px, smaller than
   the number beside it, because it is a state and not a control. */
.em-tick{flex:0 0 17px;width:17px;height:17px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:900 10px/1 var(--display);background:var(--on-accent);color:var(--m-euro)}
.em-ybest{display:flex;align-items:center;gap:7px;
  font:900 13px/1 var(--display);color:var(--on-accent);
  font-variant-numeric:tabular-nums}
.em-yfresh{font:700 9.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}

/* 1076, WHICH IS FOUR CLUB TILES AND THE GAPS BETWEEN THEM. Four 248px tiles
   plus three 12px gaps is 1028 of grid, and the wrap carries 24px of padding a
   side: 1076. The Premier League's sheet says 1040 for the same arithmetic
   over its narrower 224px tile, so this is that number re-derived rather than
   a new one. The year picker shares the width and gets five columns out of
   it. */
.em-wrap{max-width:1076px}
/* ROOM AT THE FOOT OF THE PANEL, for the same bug theme.css fixes on the two
   choosers and nflmode.css on its own screens. .gg-wrap has no bottom padding
   and .wrap above it is overflow:hidden, so the last row of tiles ended one
   pixel above the panel's edge — and the 5px lip under it was shaved off,
   measured at 1280: tile bottom plus lip at 840, panel bottom at 836. The
   tiles had no lip before they took the home screen's card, which is why
   this sheet never needed the rule until now. 34px is the number the other
   three sheets use for this. */
#emScreen > .gg-wrap{padding-bottom:34px}
.em-head{display:flex;align-items:center;gap:14px;margin:6px 0 2px}
.em-title{font:900 clamp(22px,4.5vw,30px)/1.1 var(--display);
  letter-spacing:-.02em;margin:0}
/* `pm-subtag` AND NOT `pm-club-tag`, which is a naming rule rather than a
   taste. tests/test_a11y.py finds every class the JS binds a click to and
   checks what the markup builds under it, matching the class name with a WORD
   BOUNDARY — and pm-club followed by a hyphen still satisfies that boundary,
   because a hyphen is not a word character. So a span classed pm-club-tag was
   read as the pm-club BUTTON rendered as a span, and the suite failed on a
   control that was never broken.

   Nothing under this sheet may extend a clickable class's name with a hyphen.
   Suffix it with a letter (pm-clubn, pm-clubm) or give it its own stem.

   AND NO COMMENT HERE MAY SPELL A TAG OUT, which is the second half of the
   same lesson: tests/pagesrc.py pastes this sheet into the page before that
   suite reads it, so an angle-bracketed example in prose is markup as far as
   the scanner is concerned. Writing this note the obvious way failed the suite
   a second time. */
.em-subtag{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}

/* ---- the match ------------------------------------------------------------
   WIDER THAN NFL MODE'S 720px, because there are three buttons on the stage
   rather than two. At 720 the draw column squeezed the two club buttons to the
   point where "Wolverhampton Wanderers" wrapped to four lines. */
.em-scwrap{max-width:780px}
.em-schud{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:2px 0 8px}
.em-screc{display:flex;align-items:baseline;gap:10px}
.em-scn{font:900 30px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.em-sccap{font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}
.em-scgame{margin-left:auto;font:700 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-soft);font-variant-numeric:tabular-nums}

/* ONE TICK A MATCH along the top: what is done, what is next, what is left.
   THIRTY-EIGHT OF THEM, which is more than either twin's strip carries and is
   why `max-width` comes down from NFL Mode's 22px to 14px — at 22 a 38-match
   season wrapped to two rows on a 390px phone, and a progress strip that
   reflows as you play reads as a layout bug. */
.em-scdots{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:20px}
.em-scdots span{flex:1 1 6px;max-width:14px;height:6px;border-radius:3px;
  background:var(--sheet-3)}
.em-scdots span.now{background:var(--gold)}
.em-scdots span.ok{background:var(--mint)}
.em-scdots span.bad{background:var(--rust)}

.em-scweek{font:700 11px/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);text-align:center}
/* THE FIXTURE IS THE QUESTION and it is set like one — the same face and about
   the same size as .gg-prompt. A shade smaller than NFL Mode's because English
   club names are longer: "Wolverhampton Wanderers v Nottingham Forest" at 36px
   is three lines on a phone. */
.em-scmatch{font:900 clamp(23px,4.8vw,32px)/1.12 var(--display);
  letter-spacing:-.02em;text-align:center;margin:8px 0 4px;color:var(--text)}
.em-scask{text-align:center;font-size:15px;color:var(--text-soft);margin-bottom:16px}

/* ---- THE STAGE, and the one thing in this file that is not a borrowed
   measurement.

   THREE COLUMNS, NOT TWO, and the middle one is a BUTTON rather than the word
   "vs". That is the whole mode: a quarter of Premier League matches end level,
   so the draw is an answer somebody gives and it has to be as pressable as the
   two clubs are.

   IT IS NARROWER THAN THEY ARE — 0.62fr against 1fr — and that is a statement
   about the game rather than about the space. A draw is one outcome of three
   and the two clubs are the other two; three equal columns would read as three
   equally likely answers, which they are not (45.7% home, 29.5% away, 24.8%
   draw across the 9,880 matches on file). It is also the button with the least
   in it: no crest, no home-or-away line, one word.

   IT KEEPS ITS FULL HEIGHT. `align-items:stretch` on the grid and no min-height
   of its own, so the draw button is exactly as tall as the club buttons beside
   it and the row reads as one control with three parts rather than a pair with
   something wedged between them. */
.em-scstage{display:grid;grid-template-columns:1fr .62fr 1fr;gap:10px;
  align-items:stretch;padding:14px;border-radius:16px;background:var(--sheet);
  transition:background .15s}
.em-scstage.ok{background:color-mix(in srgb,var(--mint) 16%,transparent)}
.em-scstage.bad{background:color-mix(in srgb,var(--rust) 18%,transparent)}

/* The two clubs and the draw share every rule but their colour, so they share
   the class and the draw takes a modifier. */
.em-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:146px;padding:18px 12px;border-radius:14px;border:0;
  cursor:pointer;font-family:inherit;color:var(--on-accent);
  background:var(--m-euro);box-shadow:0 5px 0 var(--m-euro-sh);
  transition:transform .1s,box-shadow .1s,opacity .15s}
/* `background` AND `transform` RESTATED ON HOVER, and neither is redundant:
   base.css still carries a generic `button:hover{background:#2c3c68;
   transform:translateY(-1px)}` that outranks a bare class, so without this the
   pressed club went navy under the cursor and floated a pixel off its lip. The
   same note .nm-pick carries in nflmode.css and .theme-btn in theme.css. */
.em-pick:hover{background:var(--m-euro);transform:none}
.em-pick:hover:not(:disabled){box-shadow:0 7px 0 var(--m-euro-sh)}
.em-pick:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--m-euro-sh)}
.em-pick:disabled{cursor:default;opacity:.55}
/* The one that was pressed keeps its full strength and a gold ring through the
   hold, so the verdict line reads against a visible choice. */
.em-pick.chosen{opacity:1;outline:3px solid var(--gold);outline-offset:2px}
.em-pickn{font:900 19px/1.1 var(--display);letter-spacing:-.01em;text-align:center;
  overflow-wrap:anywhere}
.em-pickw{font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  opacity:.8}
.em-crest{width:48px;height:48px;object-fit:contain}
/* 54 RATHER THAN 48 ON THE STAGE, because the disc rule above pads it by 6 a
   side and the badge inside should be the size the bare 48 was drawn for. */
.em-pick .em-crest{width:54px;height:54px}

/* THE DRAW IS THE SAME BUTTON IN A DIFFERENT COLOUR, and the colour is the
   sheet rather than a third accent. Two clarets and a third bright hue would
   make the draw the loudest thing on a screen where it is the least likely
   answer; the muted middle says "the outcome between these two" without
   arguing for itself. It keeps the lip, so it is visibly pressable. */
.em-pick.em-draw{background:var(--sheet-3);color:var(--text);
  box-shadow:0 5px 0 var(--border)}
.em-pick.em-draw:hover{background:var(--sheet-3)}
.em-pick.em-draw:hover:not(:disabled){box-shadow:0 7px 0 var(--border)}
.em-pick.em-draw:active:not(:disabled){transform:translateY(3px);
  box-shadow:0 2px 0 var(--border)}
.em-drawn{font:900 17px/1.1 var(--display);letter-spacing:-.01em}
/* The score a draw would be — "X-X" — under the word, in the mono face the
   rest of the strip uses. It is not a hint: every draw is X-X and the number
   is not named. It is there because the button is otherwise one short word in
   a row of two tall ones. */
.em-drawh{font:700 9.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}

/* The verdict — the score, in the colour of how it went. Space is held for it
   so the buttons do not jump when it lands. Two lines' worth rather than NFL
   Mode's one: a Premier League verdict names a scoreline and both clubs. */
.em-scverdict{min-height:44px;text-align:center;margin-top:14px;
  font:900 16px/1.35 var(--display)}
.em-scverdict.ok{color:var(--mint)}
.em-scverdict.bad{color:var(--rust-text)}

/* ---- the end of the season ----------------------------------------------- */
.em-scword{text-align:center;font:900 clamp(20px,4vw,26px)/1.2 var(--display);
  color:var(--gold);margin:-6px 0 18px;letter-spacing:-.01em}
.em-scxp{text-align:center;font-size:13px;color:var(--text-soft);margin:-8px 0 16px}
.em-scxp b{color:var(--gold)}
/* The recap borrows the answer table. Its first column holds the club's own
   game number and nothing longer — 1 to 38 — so 34px does it, narrower than
   NFL Mode's 40, which has to fit "Conf". */
.em-screcap{margin-top:20px}
.em-screcap .gg-brow{grid-template-columns:34px minmax(0,1fr) auto auto}
.em-screcap .gg-brow.ok .pts{color:var(--mint)}
.em-screcap .gg-brow.bad .pts{color:var(--rust-text)}
.em-screcap .gg-brow .val{white-space:nowrap;font-variant-numeric:tabular-nums}
.em-det{color:var(--text-muted);font-size:11px}

.em-next{margin-top:18px}
.em-nexthead{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.em-nexthead b{font:900 15px/1 var(--display)}
.em-nexthead span{font-size:13px;color:var(--text-soft)}
.em-share .em-sq{font-size:15px;line-height:1.5;word-break:break-all;
  margin-bottom:10px}
.em-signup .em-su-t{font-weight:700;margin-bottom:8px}
.em-signup .em-su-b{display:flex;gap:8px;flex-wrap:wrap}

/* ---- the phone ------------------------------------------------------------
   THE STAGE STAYS THREE ACROSS. Stacking it would put the draw under the two
   clubs, which is both a scroll and a lie about the shape of the choice — the
   three answers are one row of three whatever the screen is. What comes down
   instead is everything inside the buttons: the crest, the two type sizes and
   the padding. Measured at 390px, where the row is 358px wide and the draw
   column takes 96px of it. */
@media(max-width:700px){
  #emScreen > .gg-wrap{padding-bottom:26px}
  .em-years{grid-template-columns:repeat(2,1fr);gap:10px}
  .em-year{padding:12px 14px;gap:4px;border-radius:14px}
  .em-yn{font-size:24px}
  .em-clubs{grid-template-columns:repeat(2,1fr);gap:10px}
  .em-leagues{grid-template-columns:1fr;gap:10px}
  .em-league{padding:13px 15px;gap:6px;border-radius:14px}
  .em-leaguen{font-size:19px}
  .em-club{padding:10px;gap:9px;border-radius:14px}
  .em-club .em-crest{flex-basis:34px;width:34px;height:34px;padding:5px}
  .em-clubn{font-size:15px}
  .em-scstage{grid-template-columns:1fr .58fr 1fr;gap:7px;padding:10px}
  .em-pick{min-height:120px;padding:13px 7px;gap:6px}
  .em-pick .em-crest{width:40px;height:40px;padding:5px}
  .em-pickn{font-size:15px}
  .em-drawn{font-size:14px}
  .em-pickw,.em-drawh{font-size:8.5px;letter-spacing:.1em}
  .em-scdots{gap:2px;margin-bottom:16px}
  .em-scdots span{max-width:10px;height:5px}
}

/* ONE COLUMN ON A PHONE, NOT TWO, and the crest is why. Two tiles across a
   390px screen leave the text beside a badge 94px wide, and at that width
   the display face breaks "Mönchengladbach", "Kaiserslautern", "Braunschweig"
   and "Saint-Étienne" in the middle of the word — overflow-wrap:anywhere is
   doing its job, and the job reads as a typo. A row per club puts every
   name on one line and the whole season span on the next, and reads as the
   list it is. It scrolls about a fifth further than the two-column version
   did, because those tiles were four lines tall with a broken word in them;
   this is the picker, not the match, and readable type wins on a menu. 480
   rather than 700: at 600px two columns still give the name 200px. */
@media(max-width:480px){
  .em-clubs{grid-template-columns:1fr;gap:9px}
  .em-club{padding:9px 12px;gap:11px}
  .em-club .em-crest{flex-basis:38px;width:38px;height:38px;padding:5px}
  .em-clubt{gap:2px}
  .em-clubn{font-size:16px}
}