/*
 * Memory Games frame: the one shared layout, tokens and type for the hub
 * and both games (plans 011, 012). Games link it as /mg/frame.css (the build
 * injects the <link>); never copy it. Dark is the default theme; light only
 * with <html data-theme="light"> (mg:theme = light).
 *
 * Every screen is a .mg-screen grid:
 *   .mg-bar      56px: ‹ (.mg-back) | title (.mg-title) | ☰ / ✕ (.mg-menu)
 *   .mg-notice   0 or 1 line under the bar
 *   .mg-content  centred, scrolls if long (.is-list: left-aligned)
 *   .mg-actions  160px: .mg-hint (48px) 8px above .mg-primary (64px)
 * At 390x844 the .mg-primary box is x24 y756 w342 h64 (tools/e2e/slot.mjs); at any size it is the
 * frame (min(100%, 640px), centred) minus 24px each side, 64px tall, 24px above the safe area.
 * The only motion is one 160ms opacity fade (.mg-fade). Bar and slot never move.
 * Lexend: SIL OFL 1.1, fonts/OFL.txt.
 * Created: 2026-10-21 · Plan: docs/plans/012-build-011-ui.md
 */
@font-face {
  font-family: "MG Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/lexend-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mg-font: "MG Lexend", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Fluid (plan 016 iPad): --mg-grow is 0 for a frame 390px wide or less and grows with the
     frame to 250px at its 640px cap, so the 390 phone is unchanged and every wider screen scales
     smoothly (no per-device breakpoints). Type and art add a share of it. */
  --mg-grow: clamp(0px, min(100vw, var(--mg-col)) - 390px, 250px);
  --mg-size-display: calc(40px + var(--mg-grow) * 0.032);  /* Level N: 40 → 48 */
  --mg-size-title: calc(24px + var(--mg-grow) * 0.016);    /* bar title, buttons, card names: 24 → 28 */
  --mg-size-body: calc(17px + var(--mg-grow) * 0.008);     /* everything else: 17 → 19 */
  --mg-line: 1.35;

  --mg-safe-top: env(safe-area-inset-top, 0px);
  /* The real safe area only (plan 014): the primary is 24px above it, 0 on desktop. The 0.4.1
     16px touch floor put the slot at y740 on phones. */
  --mg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mg-gutter: 24px;
  --mg-col: 640px;          /* the frame cap, centred (plan 016 iPad; was 480, 560 on desktop) */
  --mg-bar-h: 56px;
  --mg-icon-btn: 48px;
  --mg-primary-h: 64px;
  --mg-primary-gap: 24px;   /* primary bottom edge to the safe-area bottom */
  --mg-hint-h: 48px;
  --mg-action-zone: 160px;  /* 16 + hint 48 + 8 + primary 64 + 24 */
  --mg-radius: 20px;
  --mg-radius-sm: 12px;
  --mg-fade: 160ms;

  /* dark (default) */
  --mg-bg: #131a16;
  --mg-surface: #1b2520;
  --mg-surface-2: #24312a;
  --mg-text: #e9efe9;
  --mg-text-muted: #a3b2a7;
  --mg-border: #33443a;
  --mg-primary: #3a7d58;
  --mg-on-primary: #f4f8f5;
  --mg-mark: #6fd39a;
  --mg-sun: #f2c84b;        /* level-up only */
  --mg-amber: #e8a640;      /* wrong, never red */
  --mg-danger: #ff8a7a;     /* grown-up errors */
  --mg-focus: #8fb0ff;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --mg-bg: #f3f5f1;
  --mg-surface: #ffffff;
  --mg-surface-2: #e7ece6;
  --mg-text: #18201b;
  --mg-text-muted: #56625a;
  --mg-border: #cfd8d0;
  --mg-primary: #1e7b45;
  --mg-on-primary: #ffffff;
  --mg-mark: #1e7b45;
  --mg-sun: #a86a00;
  --mg-amber: #9a5b00;
  --mg-danger: #b42318;
  --mg-focus: #2f5bd3;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { :root { --mg-fade: 0ms; } }

/* ------------------------------------------------------------ base */
html, body { margin: 0; background: var(--mg-bg); color: var(--mg-text); }
body { font: 400 var(--mg-size-body)/var(--mg-line) var(--mg-font); -webkit-text-size-adjust: 100%; }

/* ------------------------------------------------------------ screen */
.mg-screen, .mg-screen *, .mg-screen *::before, .mg-screen *::after { box-sizing: border-box; }
.mg-screen {
  position: relative;
  width: 100%; max-width: var(--mg-col); margin-inline: auto;
  /* The small viewport: the slot stays above the browser's bars even when they slide back in
     (100dvh can be taller than what is visible). 100vh where svh is unknown. */
  height: 100vh; height: 100svh; overflow: hidden;
  display: grid;
  grid-template-rows: calc(var(--mg-safe-top) + var(--mg-bar-h)) auto minmax(0, 1fr) var(--mg-action-zone) var(--mg-safe-bottom);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bar" "notice" "content" "actions" ".";
  background: var(--mg-bg); color: var(--mg-text);
  font: 400 var(--mg-size-body)/var(--mg-line) var(--mg-font);
}
.mg-screen[hidden] { display: none; }
.mg-screen [hidden] { display: none; }   /* beats the slot classes' display; .mg-icon and .mg-primary keep their cell below */

/* bar: three fixed cells; an empty cell keeps its width so the title never shifts */
.mg-bar {
  grid-area: bar; padding: var(--mg-safe-top) 4px 0;
  display: grid; grid-template-columns: var(--mg-icon-btn) minmax(0, 1fr) var(--mg-icon-btn);
  align-items: center; gap: 8px;
}
.mg-title {
  grid-column: 2; grid-row: 1; margin: 0; text-align: center;
  font-size: var(--mg-size-title); font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mg-title.is-sun { color: var(--mg-sun); }
.mg-icon {
  width: var(--mg-icon-btn); height: var(--mg-icon-btn); padding: 0; margin: 0;
  border: 0; border-radius: var(--mg-radius-sm);
  display: grid; place-items: center; background: none; color: var(--mg-text);
  font: inherit; text-decoration: none; cursor: pointer;
}
.mg-icon svg { width: 26px; height: 26px; }
.mg-icon[hidden] { display: grid; visibility: hidden; }   /* the cell stays */
.mg-back { grid-column: 1; grid-row: 1; }
.mg-menu { grid-column: 3; grid-row: 1; }

.mg-notice {
  grid-area: notice; margin: 0 var(--mg-gutter); padding: 8px 12px;
  border-radius: var(--mg-radius-sm);
  background: var(--mg-surface-2); color: var(--mg-text-muted); text-align: center;
}
.mg-notice:empty, .mg-notice[hidden] { display: none; }

.mg-content {
  grid-area: content; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px var(--mg-gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center;
}
.mg-content.is-list { justify-content: flex-start; align-items: stretch; text-align: left; }
.mg-content > * { flex-shrink: 0; }

.mg-display { margin: 0; font-size: var(--mg-size-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.mg-muted { color: var(--mg-text-muted); }
.mg-sun { color: var(--mg-sun); }

/* action zone: hint row and primary slot are reserved even when empty */
.mg-actions {
  grid-area: actions;
  padding: 16px var(--mg-gutter) var(--mg-primary-gap);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--mg-hint-h) var(--mg-primary-h); row-gap: 8px;
  justify-items: center;
}
.mg-hint {
  grid-row: 1; grid-column: 1; width: 100%; min-height: var(--mg-hint-h); margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--mg-text-muted);
}
.mg-primary {
  grid-row: 2; grid-column: 1; width: 100%; height: var(--mg-primary-h); margin: 0; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: var(--mg-radius);
  background: var(--mg-primary); color: var(--mg-on-primary);
  font: 600 var(--mg-size-title)/1 var(--mg-font); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mg-primary:active { filter: brightness(0.92); }
.mg-primary:disabled { opacity: 0.5; cursor: default; }
.mg-primary[hidden] { display: flex; visibility: hidden; }  /* an empty slot keeps its place */
/* the one text button in the hint row */
.mg-text-btn {
  min-height: var(--mg-hint-h); padding: 0 16px; margin: 0; border: 0; background: none;
  color: var(--mg-text-muted); font: 500 var(--mg-size-body)/1 var(--mg-font);
  text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer;
}

:is(.mg-icon, .mg-primary, .mg-text-btn, .mg-card, .mg-row, .mg-switch):focus-visible {
  outline: 3px solid var(--mg-focus); outline-offset: 3px;
}

/* ------------------------------------------------------------ parts */
/* a list row (menus, settings, progress): a button when it goes somewhere */
.mg-row {
  width: 100%; min-height: 56px; margin: 0; padding: 8px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 0; border-bottom: 1px solid var(--mg-border); background: none;
  color: var(--mg-text); font: inherit; text-align: left; text-decoration: none;
}
button.mg-row, a.mg-row { cursor: pointer; }
.mg-row .mg-chev { width: 20px; height: 20px; flex: none; color: var(--mg-text-muted); }
/* on/off switch: <button class="mg-switch" role="switch" aria-checked="false"> */
/* The tap target is 52x44 (plan 016 iPad); the drawn track stays 52x32 (::before) and the -6px
   margins keep the row's layout as it was. */
.mg-switch {
  position: relative; flex: none; width: 52px; height: 44px; padding: 0; margin: -6px 0;
  border: 0; border-radius: 16px; background: none; cursor: pointer;
}
.mg-switch::before {
  content: ""; position: absolute; inset: 6px 0;
  border-radius: 16px; border: 1px solid var(--mg-border); background: var(--mg-surface-2);
}
.mg-switch::after {
  content: ""; position: absolute; top: 10px; left: 4px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--mg-text-muted);
}
.mg-switch[aria-checked="true"]::before { background: var(--mg-primary); border-color: var(--mg-primary); }
.mg-switch[aria-checked="true"]::after { left: 24px; background: var(--mg-on-primary); }

/* ☰ panel: a full .mg-screen over the page; ✕ takes ☰'s cell; fades, never slides */
.mg-panel.mg-screen { position: fixed; inset: 0; z-index: 50; margin-inline: auto; box-shadow: 0 0 0 100vmax var(--mg-bg); }

/* ------------------------------------------------------------ motion */
.mg-fade { animation: mg-fade var(--mg-fade) ease-out both; }
@keyframes mg-fade { from { opacity: 0; } }