/* Page and shell styles shared by every game. A game adds its own rules in a <style> after this file. */
:root { --ink: #1c1b19; --muted: #8b877f; --paper: #fff; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--paper); color: var(--ink); }
body { font: 13px/1.35 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; overflow: hidden; }
#stage { position: fixed; inset: 0; display: grid; place-items: center; }
canvas { display: block; image-rendering: pixelated; touch-action: none; cursor: pointer; outline: none; }
.hud { position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); display: flex; justify-content: space-between; gap: 16px; pointer-events: none; }
#scores { position: fixed; top: max(14px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); display: grid; gap: 2px; pointer-events: none; }
#scores b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
#scores span { color: var(--muted); font-variant-numeric: tabular-nums; }
#bottom { bottom: max(14px, env(safe-area-inset-bottom)); align-items: flex-end; }
#status { color: var(--muted); }
button { pointer-events: auto; font: inherit; color: var(--muted); background: none; border: 0; padding: 10px; margin: -10px; cursor: pointer; }
button:hover, button:focus-visible { color: var(--ink); }

/* ?still: the picture alone, for a card on the landing page */
html.mg-still, html.mg-still body { background: transparent; }
html.mg-still body > :not(#stage) { display: none !important; }
html.mg-still canvas { cursor: inherit; }

/* shell: game menu (top centre), rules popup (top right), credits (bottom centre) */
.mg-link { font: inherit; color: var(--muted); background: none; border: 0; padding: 10px; margin: 0; cursor: pointer; }
.mg-link:hover, .mg-link:focus-visible, .mg-link[aria-expanded="true"] { color: var(--ink); }
#mg-menu .mg-hint { display: block; margin-top: 2px; font-size: 11px; color: #b3afa7; }
#mg-menu .mg-link:hover .mg-hint, #mg-menu .mg-link:focus-visible .mg-hint { color: var(--muted); }
#mg-menu { position: fixed; top: max(4px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 5; text-align: center; }
#mg-list { list-style: none; margin: 0; padding: 4px 0; background: var(--paper); border: 1px solid var(--ink); min-width: 150px; text-align: left; }
#mg-list[hidden] { display: none; }
#mg-list a, #mg-list span { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
#mg-list a:hover, #mg-list a:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
#mg-list a[aria-current="page"]::after { content: "•"; }
#mg-list span { color: #b3afa7; }
#mg-rules-open { position: fixed; top: max(4px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); z-index: 5; }
#mg-rules { width: min(340px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--ink); color: var(--ink); background: var(--paper); font: inherit; }
#mg-rules::backdrop { background: rgba(255, 255, 255, .72); }
#mg-rules h2 { margin: 0 0 10px; font: inherit; font-weight: 600; }
#mg-rules ol { margin: 0 0 8px; padding-left: 18px; }
#mg-rules li { margin-bottom: 8px; }
#mg-rules form { text-align: right; }
#mg-rules .mg-link { margin: 0 -10px -10px; color: var(--ink); }
#mg-credits { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 16px; color: var(--muted); white-space: nowrap; pointer-events: none; }
#mg-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; pointer-events: auto; }
#mg-credits a:hover, #mg-credits a:focus-visible { color: var(--ink); }
/* long end-of-game status lines run towards the centre, so the credits step above them */
@media (max-width: 1200px) { #mg-credits { bottom: max(38px, calc(env(safe-area-inset-bottom) + 24px)); } }
@media (max-width: 600px) { #mg-credits { bottom: max(72px, calc(env(safe-area-inset-bottom) + 58px)); } }