/* xi-landing.css — the landing every game in the family opens on.
 *
 * ONE SHELL, THREE GAMES. This was Crossword XI's alone, and the word search
 * still opened on a centred card from the generation before it: same family,
 * two different sites. The rules are unchanged from the ones the crossword
 * shipped — moved, not rewritten — so the page that has been measured at
 * sixteen viewports for months is the page that carries on, and the other two
 * inherit it rather than growing their own near-copy.
 *
 * THE SHAPE IT DEFINES, which is the same wherever you land:
 *
 *   site-head / site-bar / site-nav      the game's own bar and its sections
 *   site-wrap > site-lede                one line saying what the game is
 *   site-grid > site-main | site-side    today on the left, you on the right
 *     home-choice.hero                     TODAY — the one thing with weight
 *     side-card                            YOUR FORM, then PLAY AS
 *   site-row                             OTHER BOARDS, three across
 *
 * WHY THE CLASSES ARE NOT xic-. The chrome's namespace means "the bar and the
 * drawer, which no game may restyle". This is a layout games fill with their
 * own content, and renaming eighty rules in live markup buys a prefix and
 * risks a front page. Single ownership is enforced instead of spelled: the
 * cross-game contract refuses any game that defines a selector this file
 * already owns, which is a check rather than a convention.
 */




/* ============ THE LANDING SCREEN ============
   Three choices, each one a target rather than a line of text, so none can be
   pressed by accident when another was meant. */
.home-card{max-width:430px}
.home-choice{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:8px;padding:14px 16px;margin-bottom:10px;min-height:44px;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.home-choice:hover{border-color:var(--accent-ink);background:var(--sel-word)}
/* A CARD THAT IS A LINK STILL HAS TO LOOK LIKE A CARD.
   .home-choice was written for a <button>, which carries no underline and
   inherits no link colour. Four games use it on an <a> instead — deliberately,
   because a card that is an anchor works before the day's board has loaded, can
   be opened in a new tab, and is a real address for a crawler — and on every one
   of those the browser underlined the heading, the note and all. Wordsearch and
   HiLo each carried this line privately, so they looked right; Codeword and Who
   Am I did not, and Codeword's past-boards card has been underlined body text on
   the live site since the day it launched.
   Three copies of one fact is the drift this repository is organised against,
   and the copy a new game forgets is the one that shows. It lives here now. */
a.home-choice{text-decoration:none;color:inherit}
/* KEYBOARD. The family ring on every control on the landing; there was none,
   so a keyboard player could tab through the page and see nothing move. */
.home-choice:focus-visible,.site-nav button:focus-visible,.site-ghost:focus-visible,
.site-navlink:focus-visible,.home-club select:focus-visible{outline:none;box-shadow:var(--ring)}
.home-choice.hero:focus-visible{box-shadow:var(--ring),0 0 0 8px var(--pitch)}
.hc-title{
  display:block;font-family:var(--disp);font-weight:700;font-size:17px;
  letter-spacing:.02em;color:var(--ink);
}
.hc-note{display:block;font-size:13px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.hc-state{
  display:block;font-family:var(--disp);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-top:6px;
}
.hc-state:empty{display:none}
.home-links{margin-top:14px;font-size:13px;color:var(--ink-faint)}
.home-links button{
  background:none;border:none;color:var(--ink-faint);text-decoration:underline;
  cursor:pointer;font-size:13px;min-height:44px;padding:0 4px;
}
.home-links button:hover{color:var(--pitch)}


/* Play as, on the landing screen. Quieter than the two choices — it is a
   setting, not the decision. */
.home-club{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.home-club label{
  font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.home-club select{
  flex:1 1 auto;min-width:0;min-height:44px;font-family:var(--body);
  font-size:15px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:7px;padding:0 8px;
}

/* Board of the day. Marked out from the three tracks below it without becoming
   a fourth one: it is a way in to Clubs and themes, not a mode of its own. */
.home-choice.featured{border-color:var(--pitch);position:relative}
.home-choice.featured[hidden]{display:none}
.hc-kicker{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent-ink);margin-bottom:2px
}

/* A suspended track. Dimmed but legible, and still clickable — somebody
   part-way through a practice puzzle can finish it. */
.home-choice.soon{opacity:.62}
.home-choice.soon:hover{opacity:.78}
.hc-soon{
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  padding:2px 6px;margin-left:6px;border-radius:999px;
  border:1px solid var(--line);opacity:.85;vertical-align:middle
}

/* Route to the privacy policy from the landing screen. Quiet, but present at
   the point somebody is deciding whether to sign in. */
.home-privacy{text-align:center;margin:-4px 0 10px}
.home-privacy a{font-size:12px;color:var(--ink-faint);text-decoration:none}
.home-privacy a:hover{color:var(--pitch);text-decoration:underline}

/* ============ THE LANDING, AS A VIEW ============
   Was .overlay — a card on a dimmed backdrop over a board rendered underneath.
   Now it is the page until something is chosen.

   Keeps the fixed-height column: this fills the same space the board will,
   scrolls internally if the choices outgrow the screen, and never lets the
   document scroll. The flex layout stays intact. */
.home-view{
  display:none;position:fixed;inset:0;z-index:40;
  background:var(--paper);
  overflow-y:auto;overscroll-behavior:contain;
  padding:16px 16px calc(24px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
.home-view.show{display:block}
/* No card-on-backdrop framing: it is the page now, so it takes the page's
   background and drops the shadow that made it read as a layer. */
.home-view .kick-card{
  box-shadow:none;border:0;background:none;
  max-width:520px;margin:0 auto;padding:0;
}

.home-run{
  margin:14px 0 4px;font-size:13px;color:var(--ink-soft);
  text-align:center;min-height:18px;
}
.home-run b{color:var(--pitch);font-weight:700}
.home-settings{width:100%;margin-top:10px}

/* ============ THE LANDING AS A SITE ============
   Header, columns, a browsable clubs row and a footer. What makes something
   read as a website rather than an app screen is furniture: navigation you can
   see, content that uses the width, and a footer admitting a wider world.

   The game view is untouched — this is all inside .home-view, which is only up
   when nothing is being played. */
.home-view{padding:0}
/* THE GREEN IS GONE FROM THE FURNITURE.
   --pitch is the colour that means a correct answer. Spending it on a masthead
   is why a correct answer had to shout to be heard, and it is the reason the
   two games looked nothing alike: one wore green chrome, the other paper. The
   bar above this strip is shared/xi-chrome.css; this strip is now just the
   game's own navigation, on paper, and green appears when you get something
   right. */
.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
.site-bar{
  max-width:1080px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
/* An h1 now, not a div — so the browser's default heading margin has to go or
   it pushes the header bar apart. */
.site-mast{font-family:var(--disp);font-size:20px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin:0;line-height:1.2}
.site-xi{background:var(--tint);color:var(--xi-ink);
  padding:1px 7px;border-radius:5px;font-size:17px;line-height:.72;display:inline-block}
.site-nav{display:flex;gap:6px}
.site-nav button{
  background:none;border:0;color:var(--ink-soft);font-size:14.5px;
  padding:8px 10px;min-height:var(--tap);border-radius:6px;
  transition:color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
/* The current tab is the one place green still earns its keep in furniture:
   it marks where you are, which is a fact about state, not decoration. */
.site-nav button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent-ink)}
.site-right{margin-left:auto;display:flex;gap:8px}
.site-ghost{
  background:none;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px 14px;font-size:13.5px;min-height:var(--tap);
}
.site-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.site-wrap{max-width:1080px;margin:0 auto;padding:24px 20px 8px}
.site-lede{font-size:15px;color:var(--ink-soft);margin:0 0 20px}
.site-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
.site-main{display:flex;flex-direction:column;gap:10px}
.site-side{display:flex;flex-direction:column;gap:12px}

/* The hero. One strong block so the page has an obvious answer, rather than
   four tiles of equal weight where nothing is. */
.home-choice.hero{
  background:var(--pitch);border:0;border-radius:16px;padding:26px 26px 22px;
  text-align:left;display:block;
}
.home-choice.hero .hc-kicker{
  display:block;font-size:11.5px;letter-spacing:.11em;color:var(--on-pitch-soft);margin-bottom:8px;
}
.home-choice.hero .hc-title{
  display:block;font-family:var(--disp);font-size:34px;line-height:1.08;
  font-weight:700;color:var(--on-pitch);letter-spacing:-.02em;
}
.home-choice.hero .hc-note{display:block;font-size:14px;color:var(--on-pitch-soft);margin:9px 0 0;max-width:44ch}
.home-choice.hero .hc-state{display:block;font-size:13px;color:var(--on-pitch-soft);margin-top:6px}
.home-choice.hero .hc-cta{
  display:inline-block;background:var(--paper);color:var(--pitch-ink);
  border-radius:10px;padding:12px 28px;margin-top:18px;
  font-size:15.5px;font-weight:700;
}
.home-choice.hero.soon{opacity:.62}
.home-choice.hero.soon .hc-cta{display:none}

.side-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px 17px;text-align:left;display:block;width:100%;
}
.side-card.as-btn{cursor:pointer}
.sc-kicker{display:block;font-size:11.5px;letter-spacing:.11em;color:var(--pitch);margin-bottom:4px}
.sc-title{display:block;font-family:var(--disp);font-size:18px;font-weight:700;color:var(--ink)}
.side-card .home-club{margin:0}
.side-card .home-club label{display:none}
.side-card select{width:100%}

/* A SECTION HEADING, NOT A SHOUT. It was set in caps in the markup — "OTHER
   BOARDS" — which is a decision about type made in the content, where a
   screen reader reads it letter by letter on some voices. The words are
   sentence case now and the caps are the stylesheet's. */
.site-sec{font-family:var(--disp);font-size:17px;letter-spacing:.02em;color:var(--ink);
  margin:30px 0 12px;font-weight:700;text-transform:none}
.home-choice.wide{width:100%;text-align:left}

@media (max-width:860px){
  .site-grid{grid-template-columns:1fr}
  /* THE TABS STAY. They were display:none below 860px, so a phone got the
     game's landing with no way to reach its clubs, its themes or its archive
     except by finding them further down the page — the sections existed and
     the navigation to them did not. They scroll sideways instead of
     disappearing, which is what a row of four short words needs at 375px. */
  .site-nav{
    gap:2px;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -4px;padding:0 4px;
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav button,.site-nav .site-navlink{white-space:nowrap;flex:0 0 auto;font-size:14px;padding:8px}
  .home-choice.hero{padding:22px}
  .home-choice.hero .hc-title{font-size:27px}
}


/* Form chips. Green, amber, red at the same thresholds the season table uses. */
.home-run{display:flex;align-items:center;gap:7px;margin-top:9px}





.run-best{margin-left:auto;font-size:12.5px;color:var(--ink-faint)}
/* The chips themselves are the shared chrome's, so a win looks the same in
   both games. Only the line they sit on belongs to this page. */
.run-none{font-size:13px;color:var(--ink-soft);margin-left:auto;align-self:center}
.home-choice.hero{position:relative;overflow:hidden}
.home-choice.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* The line colour is a token because the hero inverts: it is deep green in
     light mode and pale green in dark, so a fixed white line is depth on one
     and a wash that eats the contrast of the Kick off button on the other. */
  background:
    repeating-linear-gradient(to right,var(--hero-rule) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(to bottom,var(--hero-rule) 0 1px,transparent 1px 44px);
  /* Fading out to the left keeps it off the words and lets it read as depth
     rather than as a pattern laid over the type. */
  -webkit-mask-image:linear-gradient(105deg,transparent 0%,transparent 34%,#000 78%);
  mask-image:linear-gradient(105deg,transparent 0%,transparent 34%,#000 78%);
}
/* The card content sits above it. */
.home-choice.hero > *{position:relative;z-index:1}

.site-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
/* One line icon per card, bottom-right, out of the way of the words.

   The three cards carry a kicker, a title and a note each, and at a glance
   that is three identical blocks of text — the eye has to read to tell them
   apart. A shape per card is something to recognise before reading. Inline
   SVG rather than a sprite or a font: no request, nothing to version, and it
   takes currentColor so it follows the theme without a second rule. */
.hc-icon{
  position:absolute;right:14px;bottom:12px;width:34px;height:34px;
  color:var(--pitch-deep);opacity:.28;pointer-events:none;
}
:root[data-theme="dark"] .hc-icon{opacity:.34}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hc-icon{opacity:.34}
}

/* The note must not run under the icon. */
.home-choice.col .hc-note{padding-right:40px}

.home-choice.col{
  width:100%;text-align:left;display:flex;flex-direction:column;
  padding:16px 17px;min-height:132px;
  /* The icon is positioned against this card, not against whatever ancestor
     happens to be positioned further up. */
  position:relative;
}
.home-choice.col .hc-kicker{
  display:block;font-size:11px;letter-spacing:.11em;color:var(--pitch);margin-bottom:5px;
}
.home-choice.col .hc-title{display:block;font-size:17px;line-height:1.25}
.home-choice.col .hc-note{display:block;font-size:12.5px;margin-top:4px}
/* Pushed to the bottom so the three cards' state lines sit on one line
   whatever length the titles are. */
.home-choice.col .hc-state{display:block;margin-top:auto;padding-top:8px;font-size:12.5px}
.home-choice.col.soon .hc-kicker{color:var(--ink-faint)}

@media (max-width:860px){
  .site-row{grid-template-columns:1fr}
  .home-choice.col{min-height:0}
}


/* How to play is a real page, so it is a link rather than a button. Styled to
   match its neighbours in the bar. */
.site-navlink{
  color:var(--ink-soft);font-size:14.5px;padding:8px 10px;border-radius:6px;
  text-decoration:none;display:flex;align-items:center;min-height:var(--tap);
}
/* On a server-rendered page the tabs are all links, and the current one is
   marked the same way a button tab is on the landing: where you are is a
   fact about state, and it is the one place green earns its keep here. */
.site-navlink.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--pitch)}
/* The masthead as a link, on the pages that are not the game itself: it goes
   back to the game and looks like the masthead does everywhere else. */
a.site-mast{text-decoration:none;color:var(--ink)}

/* The heading a screen reader and a search engine read. Every game shows its
   name in the masthead, which is furniture; this is the one H1 that says what
   the page IS. Shared because two games now carry one. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ============ THE GAME'S OWN IDENTITY ============
 *
 * Five games opened on the same screen with a different word at the top: same
 * green, same shape, no mark. A player arriving from the hub — which HAS worn
 * a colour per game since it was built — met a promise the games did not keep.
 *
 * COLOUR IS NEVER THE ONLY CARRIER. Each game has a mark, a name and a
 * breadcrumb; the accent is the fourth signal, not the first. That is a rule
 * for colour blindness before it is a rule for design, and it is why the mark
 * is a shape rather than a coloured square.
 */
.site-ident{
  max-width:1080px;margin:0 auto;padding:16px 20px 0;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.ident-mark{
  flex:0 0 auto;width:52px;height:52px;border-radius:13px;
  background:var(--accent);color:var(--accent-on);
  display:flex;align-items:center;justify-content:center;
}
.ident-mark svg{width:60%;height:60%;display:block}
.ident-say{min-width:0}
/* FOOTBALL / CROSSWORD. The theme is the first path segment and the site says
   so out loud — there will be other themes, and a player who arrives on a game
   should be able to see where they are without reading the URL. */
.site-crumb{
  font-family:var(--disp);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 1px;
}
.site-crumb b{color:var(--accent-ink);font-weight:700}
.site-ident .site-mast{font-size:clamp(24px,4.4vw,34px);letter-spacing:.01em;
  text-transform:uppercase;line-height:1}
/* THE XI BADGE IS SIZED IN THE MASTHEAD IT SITS IN. It was written for a 20px
   bar and kept its 17px and its .72 line-height when the name grew to 34px —
   so the badge sat small and low against a display-sized word, which reads as
   a mistake rather than a mark. It scales with its parent now. */
.site-ident .site-xi{font-size:.55em;line-height:1;padding:.14em .3em;
  border-radius:.22em;vertical-align:.12em}
.ident-sub{margin:3px 0 0;font-size:14.5px;color:var(--ink-soft)}

/* ============ THE TWO STREAKS ============
 *
 * BOTH ARE NEW, and both are derived rather than stored: the day record this
 * device already keeps says which games were finished on which day, and for a
 * signed-in player the server's season_play table says the same. Nothing new
 * is written, so nothing can drift out of step with the season.
 *
 * They are DIFFERENT FACTS and are labelled as such — a game streak is this
 * game on consecutive days, the daily streak is any game on consecutive days —
 * because two numbers side by side with one word between them is how somebody
 * comes to believe their crossword run is seven when it is four.
 */
.home-streaks{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
}
.home-streaks[hidden]{display:none}
.streak{display:flex;align-items:center;gap:11px;padding:12px 14px;min-width:0}
.streak + .streak{border-left:1px solid var(--line)}
.streak svg{flex:0 0 auto;width:22px;height:22px;color:var(--accent-ink)}
.st-say{min-width:0}
.st-l{display:block;font-size:12px;color:var(--ink-soft);line-height:1.2}
.st-n{display:block;font-family:var(--disp);font-weight:700;font-size:20px;
  color:var(--ink);line-height:1.15}
/* A run of nothing is not a zero to be proud of; it is an invitation. */
.streak.none .st-n{color:var(--ink-faint);font-size:15px}

/* ============ THE SEASON, QUIETLY ============
 * It belongs to the family rather than to this game, so it sits at the bottom
 * and is the only card here that does not wear the accent. */
.home-season{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.home-season[hidden]{display:none}
.hs-say{flex:1 1 220px;min-width:0}
.hs-k{font-family:var(--disp);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 2px}
.hs-line{margin:0;font-size:14.5px;color:var(--ink)}
.hs-note{margin:2px 0 0;font-size:13px;color:var(--ink-soft)}
.hs-go{
  margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:9px 15px;font-size:14px;min-height:var(--tap);
  text-decoration:none;display:inline-flex;align-items:center;
}
.hs-go:hover,.hs-go:focus-visible{border-color:var(--accent-ink);color:var(--accent-ink)}

/* ============ MOBILE: THE ACTION COMES FIRST ============
 * The brief's one measurable requirement — "the primary action appears early
 * on a real phone". The identity row collapses to a single line, the mark
 * shrinks, and nothing decorative is allowed above the fold. */
@media (max-width:640px){
  .site-ident{padding:12px 16px 0;gap:11px}
  .ident-mark{width:42px;height:42px;border-radius:11px}
  .ident-sub{font-size:13.5px}
  .home-streaks{grid-template-columns:1fr 1fr}
  .streak{padding:10px 12px;gap:9px}
  .st-n{font-size:18px}
  .home-season{padding:12px 14px}
  .hs-go{margin-left:0;width:100%;justify-content:center}
}


/* ============ THE LANDING'S BOXES MEASURE THEMSELVES ============
 *
 * A side card was 409px inside a 373px column on HiLo: the card stretches to
 * the column, then its own 18px of padding is ADDED, because that game's
 * stylesheet carries no global box-sizing reset and this file assumed one.
 * The page then scrolled sideways at 1024px — on a layout that has been in
 * production for weeks, which is how long it has been doing it.
 *
 * Set here, on the landing's own components, rather than as a global `*` rule:
 * a reset dropped into a shared file reaches every board in every game, and
 * the grids are laid out in pixels that were measured under the rules they
 * have now. */
.site-ident,.ident-mark,.home-choice,.side-card,.home-streaks,.streak,
.home-season,.site-wrap,.site-bar,.home-club,.home-club select{box-sizing:border-box}


/* ============ THE ACTIVE TAB'S MARK SITS UNDER ITS WORD ============
 *
 * The marker was an inset shadow on the button box, and the box is 44px tall
 * because that is the tap floor — so on a phone the line drew thirteen pixels
 * below the label and read as a stray rule under the row rather than as the
 * tab you are on. The tap target is unchanged; only the mark moved. */
.site-nav button{position:relative}
.site-nav button.on{box-shadow:none}
.site-nav button.on::after{
  content:"";position:absolute;left:8px;right:8px;bottom:9px;height:2px;
  background:var(--accent-ink);border-radius:2px;
}

/* And the room above the fold. Sixty pixels of nothing sat between the tabs
   and today's card on a phone — the one place the brief measures, since the
   primary action has to be reachable without scrolling. */
@media (max-width:640px){
  .site-wrap{padding-top:14px}
}

/* ==== THE GAME PAGE IN THREE BLOCKS: Daily, Other boards, Streaks ============
   The owner, 27 Sep 2026, approving the mockup: "keep the form row, go ahead".
   The tab row went (How to play is a link by the name), the form is one row
   under the streaks rather than a card, "Play as" left the page, and the boards
   that were "More to play" sit behind one Other boards card. */
.ident-how{margin-left:auto;align-self:center;font-size:14px;font-weight:600;
  color:var(--pitch-ink,var(--pitch));text-decoration:underline;text-underline-offset:3px}
/* Only where the bar has dropped its own How to play (xi-chrome.css, under
   430px): above that the bar says it, and saying it twice is clutter. */
@media (min-width: 431px) { .ident-how{display:none} }
/* The form row spans both streaks, under them. */
.home-form{grid-column:1 / -1;display:flex;align-items:center;gap:10px;
  padding:9px 14px 11px;border-top:1px solid var(--line)}
.home-form .hf-l{font-size:12px;color:var(--ink-soft);flex:0 0 auto}
.home-form .home-run{margin:0;min-height:0;flex:1 1 auto;justify-content:flex-start}
/* One card that opens the boards behind it. */
.home-choice.other-card{display:flex;flex-direction:column;align-items:flex-start;
  width:100%;text-align:left;position:relative;padding-right:44px;margin-top:12px}
.other-card .oc-chev{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:26px;line-height:1;color:var(--ink-faint)}
.other-boards{margin-top:12px}
.other-boards[hidden]{display:none}
.ob-back{background:none;border:0;padding:6px 0;margin:0 0 8px;font:inherit;font-size:14px;
  font-weight:600;color:var(--pitch-ink,var(--pitch));cursor:pointer;min-height:var(--tap,44px)}
/* Opened: the boards take the page; the daily, the card and the streaks wait
   behind the back button. */
body.other-open .site-grid,body.other-open .other-card{display:none}

/* ==== HOW TO PLAY IS A PLACE YOU GO, NOT TEXT ON THE PAGE ====================
   The owner, 27 Sep 2026: "remove the how to play text on the larger screen.
   How to play should only be a section to click into". The rules sat under
   the landing as a long block of prose on every screen wide enough to show
   it. Now #how is shown only as the TARGET of a link -- the bar's How to play,
   or the one by the game's name on a phone -- and opens over the page, the
   height of the screen and scrolling in itself, with its Back link at the top.
   Leaving the target (Back, or the browser's back) closes it.
   This is what every game already did on a LOCKED play screen (each game's
   own "body.locked #how:target" rule); it is the landing's rule now too, once,
   here, for every game that has a #how section. The text stays in the page, so
   a search engine and a screen reader still read it. */
#how:not(:target){display:none}
#how:target{display:block;position:fixed;inset:0;z-index:60;margin:0;max-width:none;
  overflow:auto;overscroll-behavior:contain;background:var(--paper);
  padding:14px 16px 40px;box-sizing:border-box}
#how:target>*{max-width:760px;margin-left:auto;margin-right:auto}
#how:target .how-back{display:flex;width:max-content;align-items:center;min-height:var(--tap,44px);
  padding:0 16px;margin-bottom:10px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink);font-family:var(--disp);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none}

/* ==== ONE COLUMN, THEN MORE GAMES ============================================
   The owner, 27 Sep 2026, from the iPad: "I think we can make this a singular
   column, not 2 -- Daily, Other boards, Streaks. Then a little break and
   maybe show all the other games as a quick select". The two columns left the
   streaks floating beside the daily with the page's whole lower half empty.
   Scoped to the landing that has the Other boards card (:has(#homeOther)),
   which is the family's new landing; a game not yet moved to it keeps its own
   layout until it is. The column is held to a readable width and the page's
   ident sits over it. */
.site-wrap:has(#homeOther){max-width:760px}
.site-grid:has(#homeOther){grid-template-columns:1fr;gap:10px}
/* The streaks are one block, not a card beside the daily. */
.site-grid:has(#homeOther) .site-side{gap:10px}
/* THE BREAK, AND THE QUICK SELECT: every other listed game in this theme,
   drawn by shared/xi-menu.js from the team sheet. Chips, two or three across,
   each the game's shirt number and its name. */
.more-games{margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line)}
.mg-head{margin:0 0 10px;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.mg-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.mg-chip{display:flex;align-items:center;gap:10px;min-height:var(--tap,44px);padding:8px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
  text-decoration:none;font-weight:600;font-size:14.5px;box-sizing:border-box}
.mg-chip:hover{border-color:var(--pitch)}
.mg-chip:focus-visible{outline:none;box-shadow:var(--ring)}
.mg-n{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--pitch);color:var(--on-pitch,#fff);font-family:var(--disp);font-weight:700;font-size:13px}
.mg-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Other boards opens in place of the daily and the streaks; the quick select
   goes with them, since Back is the way out of that screen. */
body.other-open .more-games{display:none}
@media (max-width:430px){
  /* minmax(0,1fr), NOT 1fr: a 1fr track will not shrink below its content,
     and a name is nowrap, so two long ones ("Crossword XI: Friends", "Who Am
     I XI: Friends") pushed the page to 446px on a 375px phone and cut every
     card off (found by the Friends Word Search session, 28 Sep 2026). With the
     track allowed to shrink, the name ellipsises instead. */
  .mg-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg-chip{font-size:13.5px;padding:8px 10px;gap:8px;min-width:0}
}
/* The game's name sits over the column it names, not at the old width. */
body:has(#homeOther) .site-ident{max-width:760px}
/* THE GAME'S PICTURE, SCALED, at the left of its chip: the hub card's art,
   cropped to its middle, where each picture's motif sits. */
.mg-chip.has-art{padding:6px 12px 6px 6px}
.mg-art{flex:none;width:72px;height:44px;border-radius:7px;overflow:hidden;background:var(--pitch)}
.mg-art img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.9)}
.mg-chip.has-art .mg-n{width:22px;height:22px;font-size:12px}
@media (max-width:430px){
  .mg-chip.has-art{flex-wrap:wrap;padding:6px;gap:6px 8px}
  .mg-art{width:100%;height:auto;aspect-ratio:5/2}
  .mg-art img{transform:scale(1.5)}
}