/* The games, and the shell they sit in.
   ───────────────────────────────────────────────────────────────────────
   A game on robolsmath.com is part of the site and is not inside it. Same
   domain, same account, same palette and the same two faces, but none of
   the site's furniture: no navigation bar, no mobile tab bar, no streak,
   no rating in the corner, no link anywhere on the site that leads here.
   Somebody playing a game is not browsing the archive, and a game that
   borrowed the site's chrome would keep inviting them to stop playing.

   This file is the shell every page under /games shares: the thin bar at
   the top, the width the content sits in, and the foot. It assumes
   styles.css is loaded before it, because that is where the palette, the
   fonts and the light and dark themes are declared. A game's own board
   belongs in its own stylesheet, not here. */

/* ══ THE BAR ══
   Sixty pixels like the site's nav, so moving between the two does not
   jump, but it carries only three things: the way back to the site, the
   theme, and who is playing. */
.gm-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
.gm-top{border-bottom:1px solid var(--line);background:var(--surface);}
.gm-top-in{max-width:1000px;margin:0 auto;padding:0 32px;height:60px;
  display:flex;align-items:center;gap:16px;}
.gm-top-right{display:flex;align-items:center;gap:14px;margin-left:auto;}

/* The mark is a link home, and "Games" is not: it is where you already
   are, and a link to the current page is a small lie. */
.gm-mark{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.gm-mark .glyph{height:26px;width:auto;display:block;}
.gm-mark .glyph-dark{display:none;}
html[data-theme="dark"] .gm-mark .glyph-light{display:none;}
html[data-theme="dark"] .gm-mark .glyph-dark{display:block;}
.gm-here{font-family:'Newsreader',serif;font-size:16.5px;font-weight:500;color:var(--ink);}
.gm-sep{color:var(--line-2);font-size:15px;}

/* Who is playing. A name rather than an avatar: the point of it is to say
   that progress is being kept, and a face does not say that. */
.gm-who{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:200px;transition:color .15s;}
.gm-who:hover{color:var(--ink);}
.gm-who.gm-anon{font-weight:500;padding:7px 15px;border:1px solid var(--line-2);
  border-radius:3px;color:var(--ink);}
.gm-who.gm-anon:hover{border-color:var(--ink);}

/* ══ THE PAGE ══ */
.gm-wrap{max-width:1000px;margin:0 auto;padding:0 32px;width:100%;flex:1;}
.gm-page{padding:52px 0 96px;animation:fade .32s ease;}

/* ══ THE LIST ══
   Modelled on nytimes.com/games, which is what this section has been aimed
   at since it was a hub listing nothing. What makes that page work is that
   every game is a colour and a drawing before it is a word, so the one you
   came for is found without reading. A card is a coloured face carrying the
   mark and the name, and a pill under it saying what can be done with it.

   The colours are this site's own. Each face sets --face and --face-ink
   from a pair declared in styles.css, so a card is legible in light and in
   dark without a second set of values to keep in step. js/games/catalog.js
   chooses which pair. */
.gm-list{display:grid;gap:16px;margin-top:6px;max-width:720px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}

.gm-card{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:7px;overflow:hidden;background:var(--surface);
  transition:border-color .15s,transform .15s,box-shadow .15s;}
.gm-card:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 6px 20px -12px var(--ink);}

/* The face. Everything that identifies the game is on it and nothing else
   is, which is what keeps a row of them scannable. */
.gm-card-face{position:relative;background:var(--face);color:var(--face-ink);
  padding:30px 18px 24px;display:flex;flex-direction:column;align-items:center;
  gap:12px;}
.gm-card-mark{display:block;}
.gm-card-mark svg{width:46px;height:46px;display:block;}
.gm-card-name{font-family:'Newsreader',serif;font-size:21px;font-weight:600;
  line-height:1.2;text-align:center;color:var(--face-ink);}

/* Daily, in the corner, the way NYT puts New there. */
.gm-card-note{position:absolute;top:10px;right:10px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:3px 7px;border-radius:3px;
  background:var(--surface);color:var(--face-ink);opacity:.9;}

/* The pill is not a button. The whole card is the link, so this says what
   happens rather than offering a second place to click. */
.gm-card-foot{padding:12px;}
.gm-pill{display:block;text-align:center;padding:9px 12px;border-radius:999px;
  border:1px solid var(--line-2);font-size:13px;color:var(--ink);
  transition:border-color .15s,background .15s;}
.gm-card:hover .gm-pill{border-color:var(--ink);background:var(--surface-2);}

/* Nothing here yet, said in a way that does not look like a fault. */
.gm-empty{border:1px dashed var(--line-2);border-radius:3px;padding:52px 28px;
  text-align:center;background:var(--surface);}
.gm-empty-line{font-family:'Newsreader',serif;font-size:19px;color:var(--ink);margin-bottom:8px;}
.gm-empty-note{font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:420px;
  margin:0 auto;}

/* ══ THE FOOT ══
   Deliberately thin. The way back to the site is the only thing on it
   that a player might want. */
.gm-foot{border-top:1px solid var(--line);background:var(--surface);margin-top:56px;}
.gm-foot-in{max-width:1000px;margin:0 auto;padding:18px 32px;display:flex;
  flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;}
.gm-foot-links{display:flex;flex-wrap:wrap;gap:18px;}
.gm-foot-links a{font-size:13px;color:var(--ink-2);transition:color .15s;}
.gm-foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.gm-foot-legal{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  color:var(--ink-3);}

@media (max-width:640px){
  .gm-top-in,.gm-wrap,.gm-foot-in{padding-left:20px;padding-right:20px;}
  .gm-page{padding:38px 0 64px;}
  /* The card carries no padding of its own any more; the face does. */
  .gm-card-face{padding:26px 16px 20px;}
}

/* On a game's own page the bar carries one more step: the way back to the
   hub, and then the game. "Games" is a link there because it is somewhere
   else; on the hub itself it is not, because it is where you already are. */
a.gm-here{transition:color .15s;}
a.gm-here:hover{color:var(--brass);}
.gm-here{white-space:nowrap;}

/* On a phone the third step costs more than it gives: a two line bar, to
   say "Games" on the way to a name that is already in the title. The mark
   still goes home and the back gesture still goes to the hub. */
@media (max-width:640px){
  a.gm-here,a.gm-here + .gm-sep{display:none;}
}

/* A game's bar carries two more buttons than the hub's, the how-to and the
   figures, and at 375 that is ten pixels more than there is. The gaps give
   them up first, and then the name, which is the only thing on the bar that
   can be shortened without being lost: the title of the page says it too,
   and the board underneath says it louder. Everything else is a control. */
.gm-top-in span.gm-here{flex:0 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;}
@media (max-width:480px){
  .gm-top-in{gap:9px;}
  .gm-top-right{gap:8px;}
  .gm-here{font-size:15px;}
  .gm-who{max-width:92px;}
}
@media (max-width:400px){
  /* "Playing as somebody" goes; the streak beside it already says there is
     an account. "Sign in" stays, because that one is the whole point. */
  .gm-who:not(.gm-anon){display:none;}
}