/* ========================================================================= CITY RIVALS — city board surfaces ------------------------------------------------------------------------- Six cities, six boards. The rules are identical everywhere; only the surface changes, so a player who has played Alpine Ridge recognises it from across the room without reading a single label. The shell puts data-city="" on when a match starts. Everything below is a variable swap: the rules that paint the board live in styles.css and are shared by all six. --felt ground of the board — what shows through the 2px gaps --rim the board's outer border --tile a normal tile's face --tile-2 corner tiles, and the lit state (hover / you-are-here) --tile-ink district name >= 4.5:1 on --tile and --tile-2 --tile-sub price line and icon >= 3:1 on --tile --centre ground of the hole in the middle --city-accent one colour per city; the you-are-here ring and the centre Flat fills only. No gradient, no texture, no glow, no image. Eight set colours sit on top of these faces and every one of them has to stay readable, so no city face is ever light enough in dark theme, or dark enough in light theme, to swallow a band. ORDER MATTERS: the shared default blocks carry the same specificity as the per-city blocks that follow them, so a default must never be moved below the cities it is a fallback for. ========================================================================= */ /* ---- dark: shared default, and Metro Heights ---------------------------- Metro is the measuring stick, so the default IS Metro: cool neutral, glass and steel, nothing to notice. Every other city is a departure from this. */ :root, body[data-city]{ --felt:#232936; --rim:#2f3646; --tile:#161a23; --tile-2:#1e2330; --tile-ink:#aeb8ca; --tile-sub:#7c889f; --centre:#0e1116; --city-accent:#5b8cff; } /* Harbour Bay — cold water in the gaps, weathered timber on the corners. The felt is a shade lighter than the tiles so the grid reads as water between planks rather than as a shadow. */ body[data-city="bay"]{ --felt:#1b2c33; --rim:#2c4650; --tile:#131e24; --tile-2:#2a3230; --tile-ink:#b8c7cd; --tile-sub:#7f939a; --centre:#0f1c21; --city-accent:#59b7c9; } /* Neon District — the darkest tiles of the six, so the one hot colour on the board carries. Violet-black squares with violet light in the seams between them; the accent is the only saturated thing on the surface. */ body[data-city="neon"]{ --felt:#241b38; --rim:#3a2b60; --tile:#100c19; --tile-2:#1c1529; --tile-ink:#c8bede; --tile-sub:#8d82a3; --centre:#08060d; --city-accent:#ff3f7f; } /* Alpine Ridge — the pale one, and the only board whose felt is lighter than its tiles: the grid reads as ice seams cut between slabs. Thin air, high light, nothing warm anywhere. */ body[data-city="alpine"]{ --felt:#3d4a5e; --rim:#55647c; --tile:#29313f; --tile-2:#353f50; --tile-ink:#dde5f0; --tile-sub:#9aa8bd; --centre:#212a3a; --city-accent:#7fd4ec; } /* Crown Quarter — the only warm board. Deep baize under mahogany squares in a brass frame: a club table, aged, expensive, slightly out of date. */ body[data-city="crown"]{ --felt:#1e2e22; --rim:#4a3d23; --tile:#241c16; --tile-2:#302519; --tile-ink:#e0d3bd; --tile-sub:#a08f74; --centre:#101a13; --city-accent:#d8b25c; } /* Orbit Station — clinical. Near-black ground with a machined steel rim that is far lighter than the felt, and the coldest, brightest ink of the six. Instrument panel, not a room. */ body[data-city="orbit"]{ --felt:#0a0f16; --rim:#3a5c7d; --tile:#151e2b; --tile-2:#212d3e; --tile-ink:#d3e0ee; --tile-sub:#8b9bb0; --centre:#0c141f; --city-accent:#7ac8ff; } /* ========================================================================= LIGHT THEME A light board is paper and table, not a washed-out dark board: the tiles go to near-white and the city speaks through the felt, the rim and the accent instead of through the tile face. ========================================================================= */ body.theme-light[data-city]{ --felt:#c3ccd9; --rim:#aeb9ca; --tile:#ffffff; --tile-2:#e9eef6; --tile-ink:#1b2230; --tile-sub:#5c6880; --centre:#e6eaf1; --city-accent:#2a5fc0; } /* the darkest, most saturated felt of the light set: the board sits in water, and the corners are bleached timber */ body.theme-light[data-city="bay"]{ --felt:#96b4c2; --rim:#7c9dad; --tile:#f6fafb; --tile-2:#e6dcc7; --tile-ink:#16262e; --tile-sub:#4f6570; --centre:#cfe0e6; --city-accent:#0f6f86; } body.theme-light[data-city="neon"]{ --felt:#a99cc6; --rim:#8d80ac; --tile:#fffcff; --tile-2:#ece4f8; --tile-ink:#1e1630; --tile-sub:#5d5079; --centre:#ded4f0; --city-accent:#d1006b; } /* the white-out: the palest centre and the faintest grid of the six, held together by a cold blue rim so it is still an object on the table */ body.theme-light[data-city="alpine"]{ --felt:#c5d9ea; --rim:#a8c4da; --tile:#ffffff; --tile-2:#eaf3fb; --tile-ink:#16232e; --tile-sub:#55677a; --centre:#f2f8fd; --city-accent:#0d7ea8; } body.theme-light[data-city="crown"]{ --felt:#c3b195; --rim:#a08d6d; --tile:#fdfaf3; --tile-2:#f0e5cf; --tile-ink:#241d13; --tile-sub:#6a5a41; --centre:#ebe0c9; --city-accent:#8a6a12; } /* the hardest edges of the light set: steel felt, dark rim, white tiles — high definition rather than high colour */ body.theme-light[data-city="orbit"]{ --felt:#aebdcd; --rim:#8ba0b5; --tile:#ffffff; --tile-2:#e6edf5; --tile-ink:#101922; --tile-sub:#4e5f75; --centre:#ccd8e4; --city-accent:#0f5f93; } /* The three hard-coded light-board values in styles.css that these tokens used to fight with have been removed, so nothing needs re-pointing here: the base rules already read --felt, --tile, --tile-2 and --centre in both themes, and the per-city light blocks above simply change what those are. */ /* ========================================================================= HIGH CONTRAST A city is decoration and decoration never outranks legibility. Under body.contrast the two text tokens collapse to full --ink and the you-are-here ring collapses with them, exactly as they would with no city set at all. The faces stay — they are dark in dark theme and near-white in light theme, so ink lands at 9:1 or better on every one of them. ========================================================================= */ body.contrast[data-city], body.theme-light.contrast[data-city]{ --tile-ink:var(--ink); --tile-sub:var(--ink); --city-accent:var(--ink); }