/* Shared page style for every game: white page, monospace text, the canvas centred with crisp pixels. */
: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, "SF Mono", Menlo, Consolas, 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; }

#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; }
.dots { display: flex; gap: 3px; margin-top: 2px; }
.dots i { width: 6px; height: 6px; background: var(--ink); }
.dots i.off { opacity: .16; }

.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; }
#bottom { bottom: max(14px, env(safe-area-inset-bottom)); align-items: flex-end; }
#status { color: var(--muted); }
#mute { pointer-events: auto; white-space: nowrap; font: inherit; color: var(--muted); background: none; border: 0; padding: 10px; margin: -10px; cursor: pointer; }
#mute:hover, #mute:focus-visible { color: var(--ink); }

/* menu and rules, added by shell.js */
.sh-link { font: inherit; color: var(--muted); background: none; border: 0; padding: 10px; margin: 0; cursor: pointer; }
.sh-link:hover, .sh-link:focus-visible, .sh-link[aria-expanded="true"] { color: var(--ink); }
#sh-menu { position: fixed; top: max(4px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 5; text-align: center; }
#sh-list { list-style: none; margin: 0; padding: 4px 0; background: var(--paper); border: 1px solid var(--ink); min-width: 150px; text-align: left; }
#sh-list[hidden] { display: none; }
#sh-list a, #sh-list span { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
#sh-list a:hover, #sh-list a:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
#sh-list a[aria-current="page"]::after { content: "•"; }
#sh-list span { color: #b3afa7; }
#sh-rules-open { position: fixed; top: max(4px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); z-index: 5; }
#sh-rules { width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--ink); color: var(--ink); background: var(--paper); font: inherit; }
#sh-rules::backdrop { background: rgba(255, 255, 255, .72); }
#sh-rules h2 { margin: 0 0 10px; font: inherit; font-weight: 600; }
#sh-rules ol { margin: 0 0 8px; padding-left: 18px; }
#sh-rules li { margin-bottom: 8px; }
#sh-rules .sh-credit { margin: 0 0 8px; color: var(--muted); }
#sh-rules .sh-credit a { color: inherit; }
#sh-rules form { text-align: right; }
/* a game on a site of its own shows its name where the menu would be */
.sh-name { margin: 0; padding: 10px; font: inherit; color: var(--muted); }
#sh-rules .sh-link { margin: 0 -10px -10px; color: var(--ink); }

/* site only: the Buy Me a Coffee link, under Rules */
#coffee { position: fixed; top: calc(max(4px, env(safe-area-inset-top)) + 30px); right: max(6px, env(safe-area-inset-right)); z-index: 5; text-decoration: none; }