/* Playground game masthead: one look for every game, taken from Binary Sudoku.
   Games link this file and use the markup below; do not restyle it per game.

   <header class="masthead">
     <div class="brand">
       <!-- optional brand mark, e.g. Binary Sudoku's .punchmark -->
       <div>
         <h1 class="title">Game name</h1>
         <p class="tagline">short line, lowercase</p>
       </div>
     </div>
     <div class="masthead-right">
       <a class="back" href="../">← Projects</a>
     </div>
   </header>

   Tokens: uses --line, --surface, --muted and --text; games that call their text
   colour --ink still work through the fallbacks. Checked by tools/check-game-header.mjs
   (runs from the push guard). */

.masthead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;margin-bottom:22px;
}
.masthead .brand{display:flex;align-items:center;gap:14px}
/* brand mark: Binary Sudoku's punchmark, verbatim. A 3x4 grid of cells; each game lights its own
   pattern with <i class="on"> and sets --mark-color to its accent (Binary uses --state-one). */
.masthead .punchmark{
  width:34px;height:44px;flex:none;
  border:1px solid var(--line);
  background:var(--surface);
  clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);
  gap:2px;padding:5px 4px;
}
.masthead .punchmark i{border-radius:1px;background:transparent;border:1px solid var(--line)}
.masthead .punchmark i.on{background:var(--mark-color, var(--muted));border-color:var(--mark-color, var(--muted))}
.masthead .title{
  font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight:400;
  font-size:clamp(27px,5.2vw,42px);
  letter-spacing:-.018em;
  line-height:1;margin:0;
  color:var(--text, var(--ink));
}
.masthead .tagline{
  margin:5px 0 0;color:var(--muted);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-family:Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", ui-monospace, monospace;
}
.masthead-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.masthead .back{
  display:inline-flex;align-items:center;
  height:38px;padding:0 13px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:2px;text-decoration:none;
  font:500 12px/1 Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", ui-monospace, monospace;
  letter-spacing:.08em;text-transform:uppercase;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
@media (hover: hover){ .masthead .back:hover{color:var(--text, var(--ink));border-color:var(--muted)} }
/* the "⋯" button on the right, from Binary: opens the game's rules / help */
.masthead .dots{
  appearance:none;cursor:pointer;
  width:38px;height:38px;flex:none;
  border:1px solid var(--line);background:var(--surface);color:var(--text, var(--ink));
  border-radius:2px;
  font:600 18px/1 "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.masthead .dots[aria-expanded="true"]{background:var(--mark-color, var(--muted));border-color:var(--mark-color, var(--muted));color:var(--surface)}