/* © 2026 MEK.txt. All rights reserved. Part of the MEK design system; not licensed for reuse. */
/* MEK design system · part: game menus
   The game kit's menus: a list of big items with a pixel ▶ cursor on the current one, and the screens they sit on: a
   title screen (the name, "Press any key", then the menu), a pause menu in a dialog, a game-over screen. Opt-in: link
   it after mek.css and css/parts/extrude.css, with js/extrude.js and js/game-menu.js. In the mek.parts layer, so a project's CSS wins. */

@layer mek.parts {

/* ---------- Dials ---------- */
/* on every themed area too, so a box in another theme works these out from its own colours */
:root, [data-theme] {
  --gm-item: var(--text);              /* an item: 900 */
  --gm-on: var(--text-strong);         /* the current item: 1000 */
  --gm-off: var(--line);               /* an item that can't be picked: 400 */
  --gm-cursor: var(--accent);          /* the ▶ */
  --gm-edge: var(--500);               /* a boxed screen's edge: 500, a frame that holds the scene, as the dialogue box */
  --gm-title: var(--text-strong);      /* a screen's name */
  --gm-title-font: var(--font-blackletter);   /* its face: MEKZANTINE, sharp on its 18px grid (72, 54, 36) */
  --gm-over: var(--bad);               /* the name on the game-over screen */
  /* The ▶: the pages caret's drawing (assets/icons), drawn 2× beside 24px type. Embedded, as masks only load from the page's origin. */
  --gm-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M5 3h1v1h-1zM5 4h2v1h-2zM5 5h3v1h-3zM5 6h4v1h-4zM5 7h5v1h-5zM5 8h4v1h-4zM5 9h3v1h-3zM5 10h2v1h-2zM5 11h1v1h-1z'/%3E%3C/svg%3E");
}

/* ---------- Menu ----------
   <div class="gm" aria-label="Title"><button>New game</button><button>Continue</button><button disabled>Options</button></div>
   Items in Tall 24 (crisp) on 36px rows, ink 900; the current one (.on) 1000 with the ▶ before it in the accent, 30px
   (the 15px caret at 2×); on a centred screen, centred, with a ▶ on each side pointing in (below). The ▶'s room is always kept, so nothing moves. The pointer over an item makes it current,
   as in a game: at once, like the arrows. Can't be picked (disabled): 400, skipped. Picked: the item blinks twice,
   a beat each, then it counts (js/game-menu.js); at once under reduced motion. */
.gm { display: grid; width: fit-content; max-width: 100%; }
.gm > :is(button, a) { display: grid; grid-template-columns: 30px auto; align-items: center; gap: 6px; margin: 0; padding: 0 8px 0 0;
  border: 0; background: none; font: var(--text-lg)/36px var(--font-display); -webkit-font-smoothing: none;
  color: var(--gm-item); text-align: left; text-decoration: none; cursor: pointer; }
.gm > :is(button, a)::before { content: ""; width: 30px; height: 30px; background: var(--gm-cursor); visibility: hidden;
  -webkit-mask: var(--gm-caret) 0 0 / 30px 30px no-repeat; mask: var(--gm-caret) 0 0 / 30px 30px no-repeat; }
.gm > .on { color: var(--gm-on); }
.gm > .on::before { visibility: inherit; }   /* hidden with its menu while a screen waits */
.gm > :is(:disabled, [aria-disabled="true"]) { color: var(--gm-off); cursor: default; }
.gm > .picked { animation: mek-blink var(--dur-beat) steps(1, end) 2; }
/* On a centred screen (a title, a pause, a game over), the menu is centred too, every item on the screen's own line,
   and the current one has a ▶ on each side pointing in at its word (the right one the left mirrored). Both rooms are
   always kept, so nothing moves. A menu on its own (a list in a side panel) keeps its ▶ at the left. */
:is(.gm-screen, .gm-pause) .gm { justify-items: center; }
:is(.gm-screen, .gm-pause) .gm > :is(button, a) { grid-template-columns: 30px auto 30px; padding: 0; text-align: center; }
:is(.gm-screen, .gm-pause) .gm > :is(button, a)::after { content: ""; width: 30px; height: 30px; background: var(--gm-cursor); visibility: hidden;
  -webkit-mask: var(--gm-caret) 0 0 / 30px 30px no-repeat; mask: var(--gm-caret) 0 0 / 30px 30px no-repeat; scale: -1 1; }
:is(.gm-screen, .gm-pause) .gm > .on::after { visibility: inherit; }

/* ---------- Screen ----------
   <section class="gm-screen px-box" aria-label="Title screen">
     <h2 class="gm-title extrude">Lamplight</h2><p class="gm-sub">A MEK.txt game</p>
     <p class="gm-press">Press any key</p>
     <div class="gm">…</div>
     <p class="gm-foot">© 2026 MEK.txt</p>
   </section>
   A column, centred, 24px apart, 48px 24px inside. With .px-box: a box on the ground with a 500 edge (--gm-edge),
   nothing changing on hover; without, it's just the column, for a whole page. The name in MEKZANTINE 72 (54 under 640px),
   crisp, on its 18px grid (--gm-title-font), and extruded: give it .extrude, from the Extruded type part (one font
   pixel deep, with the shine; flat in Light); a line under it in 14, 700. With .gm-press it starts waiting: "Press any key" blinks in the accent where
   the menu will be; a key or a click on the screen (it takes the focus) brings the menu in its place, so nothing
   moves. The foot in Mono 12, 700. .over: the game-over screen, its name in --bad. */
/* Framed (data-frame, the motifs part: css/parts/motif.css): the frame is its edge, a step under its strongest tone
   (--frame-line), and the same air inside the frame's sides (--frame-t, -r, -b, -l: 1px for a plain box, so it comes
   out as above: not .frame-pad, whose air is one value round). --edge-to follows --edge: nothing changes on hover. */
.gm-screen { display: grid; grid-template-areas: "title" "sub" "menu" "foot"; justify-items: center; align-content: center;
  gap: var(--space-6); text-align: center;
  padding: calc(var(--frame-t, 1px) - 1px + var(--space-12)) calc(var(--frame-r, 1px) - 1px + var(--space-6))
    calc(var(--frame-b, 1px) - 1px + var(--space-12)) calc(var(--frame-l, 1px) - 1px + var(--space-6));
  --fill: var(--bg); --fill-to: var(--bg); --edge: var(--frame-line, var(--gm-edge)); --edge-to: var(--edge); }
.gm-screen > .gm-title { grid-area: title; }
.gm-screen > .gm-sub { grid-area: sub; }   /* a full 24px under the name: Tall descenders reach past its line box at 72 */
.gm-screen > :is(.gm, .gm-press) { grid-area: menu; }
.gm-screen > .gm-foot { grid-area: foot; }
.gm-title { margin: 0; font: var(--text-3xl)/var(--leading-blackletter) var(--gm-title-font); color: var(--gm-title); -webkit-font-smoothing: none; }
@media (max-width: 640px) { .gm-title { font-size: calc(3 * 18px); } }   /* --bp-phone. 54: MEKZANTINE's grid, not Dosage's 48 */
.gm-sub { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.gm-foot { margin: 0; font: var(--text-crisp)/1 var(--font-mono); color: var(--text-muted); }
.gm-press { margin: 0; align-self: center; font: var(--text-lg)/36px var(--font-display); color: var(--gm-cursor); -webkit-font-smoothing: none; }
.gm-screen.waiting { cursor: pointer; }
.gm-screen.waiting > .gm-press { animation: mek-blink var(--dur-loop) steps(1, end) infinite; }
.gm-screen.waiting > .gm, .gm-screen:not(.waiting) > .gm-press { visibility: hidden; }
.gm-screen.over > .gm-title, .gm-pause.over .gm-title { color: var(--gm-over); }

/* ---------- Pause ----------
   <dialog class="dialog px-box gm-pause" aria-label="Paused"><h2 class="gm-title extrude">Paused</h2><div class="gm">…</div></dialog>
   The core dialog, narrow and tall: as wide as its menu with 16px at the sides, 32px above and below, centred;
   the name in MEKZANTINE 36 up top, the menu down low, 64px under it. Esc
   resumes (the dialog's own). Picking an item closes it with the item's value as its returnValue; data-stay keeps it. */
.dialog.gm-pause { width: fit-content; text-align: center;   /* narrow and tall: 32px above and below, 16px at the sides (inside a frame's, framed) */
  padding: calc(var(--frame-t, 1px) - 1px + var(--space-8)) calc(var(--frame-r, 1px) - 1px + var(--space-4))
    calc(var(--frame-b, 1px) - 1px + var(--space-8)) calc(var(--frame-l, 1px) - 1px + var(--space-4));
  --fill: var(--bg); --fill-to: var(--bg); --edge: var(--frame-line, var(--gm-edge)); --edge-to: var(--edge); }
.gm-pause .gm-title { font-size: var(--text-xl); }   /* 36: on both faces' grids */
.gm-pause .gm { margin: var(--space-16) auto 0; }   /* 64px: the name up top, the menu down low */

}