/* Fall of Shot — the game skin. Load AFTER studio.css. These are the exact colours already deployed on privacy.html and delete-account.html (server/public/, game session's territory — do not edit those files; this file follows them, not the other way round). Keeping the values identical is what makes the policy pages read as part of the game rather than as a legal annexe from somewhere else. Dark in both OS themes, deliberately: the policy pages are unconditionally dark and a game about gunnery at sea is allowed to have a look. The STUDIO shell is the part that follows the reader's preference. WHY A PLAIN :root IS ENOUGH to beat studio.css's @media (prefers-color-scheme: dark) block: a media query adds no specificity. Both selectors are :root, so the one declared LAST wins, in both themes. That makes the load order in the load-bearing — studio.css first, always. Everything here is a token override plus the board motif. If a rule here starts restyling a shared component, that component's problem belongs in studio.css. */ :root{ --paper:#141C24; --ink:#F2F6FA; --ink-soft:#93A7B8; --rule:#2C3D4D; --card:#1B2733; --accent:#C9922E; --accent-soft:#1B2733; --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.35); } /* The masthead wordmark is the STUDIO's, even on a game page — it is the link home. On the dark skin it takes the soft ink so it stops competing with the game's own title. */ .wordmark{color:var(--ink-soft)} /* ---- the board motif ---------------------------------------------------- */ /* Inline SVG, not a screenshot. Reasons, in order: 1. The hosting doc §1 meters egress at 360 MB/day free and says the gallery is where that goes. This costs about a kilobyte and compresses to less. 2. There are no approved screenshots yet, and a page with an empty gallery reads worse than a page that never promised one. 3. It is honest — it is a diagram of the board, not a picture of the game pretending to be one. The gallery slot is below this, commented, ready for real images in WebP. */ .motif{ display:block;width:100%;height:auto; margin:8px 0 4px;border-radius:12px; border:1px solid var(--rule); background:#0F161D; } .motif-caption{color:var(--ink-soft);font-size:14px;margin:8px 0 28px}