/* The game's shared look — begun as the ADR-APP-006 Phase C prototype sheet, moved to ui/ and rethemed to the website's palette by ADR-WEB-002 D2: the game now sits inside a site page, so its colors are the site's (soft cream paper, indigo brand, deep ink blue in the dark theme — the values in the site's _sass/minima.scss). The font stack leads with DM Sans, the site's body face; pages that load it from Google Fonts get the match, pages opened off disk fall back to the system face. */ :root { --bg: #f2f0ea; --surface: #fdfcf8; --ink: #2c2a26; --muted: #6b6b78; --line: #d3cfc3; --black-cell: #1c2130; --filled: #dde4f4; --filled-ink: #2b3f6e; --preview: #c2cde8; --accent: #3b5998; --bad: #c0392b; --good: #1f8b4c; } /* The dark palette applies twice: when the system asks for dark and the player hasn't overridden it, and when the shell's theme setting says dark outright (data-theme is set on by the settings screen and by each page's head snippet). The two blocks below must stay identical — CSS has no way to name one block from two conditions without a preprocessor, and this game builds nothing. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #151925; --surface: #1c2130; --ink: #eae7df; --muted: #9aa0b2; --line: #3a4156; --black-cell: #0b0d15; --filled: #2b3f6e; --filled-ink: #dbe4f8; --preview: #3c5185; --accent: #4b6cb7; --bad: #ef7d70; --good: #58c98a; } } :root[data-theme="dark"] { --bg: #151925; --surface: #1c2130; --ink: #eae7df; --muted: #9aa0b2; --line: #3a4156; --black-cell: #0b0d15; --filled: #2b3f6e; --filled-ink: #dbe4f8; --preview: #3c5185; --accent: #4b6cb7; --bad: #ef7d70; --good: #58c98a; } * { box-sizing: border-box; } body { margin: 0; padding: 0.6rem 0.6rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--bg); color: var(--ink); font: 16px/1.45 "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; gap: 0.5rem; min-height: 100vh; min-height: 100dvh; } /* --- top bar ------------------------------------------------------------ */ .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .bar select, .bar button { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--surface); color: var(--ink); cursor: pointer; min-height: 2.2rem; } /* `width: 0` is what actually lets a