/* GENERATED by site-internal/gen-dark-css.js from the light stylesheets.
   Do not edit by hand: change the light colour and re-run the script.
   Hand-tuned dark rules are the HAND block at the end of this file. */
:root { --accent: #BD8EEE; --accent-dark: #D2A7FE; --text: #E7E7E7; --muted: #8C8C91; --quiet: #6B6C70; --border: #282828; --hair: #282828; --rule: #B4B4B4; --bg: #181818; --paper-2: #202020; --card: #181818; --line: #DCDCDC; }
.wordmark .wm-sub { color: #A97BF0; }
.nav { background: rgba(24,24,24,0.94); }
.nav-guides .np a:hover { background: #222026; }
.nav-links a.cta { color: #181818; background: #E7E7E7; border: 1.5px solid #E7E7E7; }
.nav-links a.cta:hover { color: #181818; background: #FFFFFF; }
@media (max-width: 720px) {
  .nav.has-menu .nav-end a.cta { color: #181818; background: #E7E7E7; border: 1.5px solid #E7E7E7; }
  .nav.has-menu .nav-links a:active { background: #202021; }
  .nav.has-menu .nav-links .mc { color: #4C4C51; }
  .nav.has-menu .nav-links a.active, .nav.has-menu .nav-guides .np a.active { background: #222026; }
  .nav.has-menu .nav-guides .np { background: #1E1E20; }
  .nav.has-menu .nav-guides .np a { border-bottom-color: #29292C; }
  .nav.has-menu .nav-guides .np a.active:hover { background: #222026; }
  .nav.has-menu .nav-guides .np a:active { background: #252528; }
}
.btn-primary { background: #E7E7E7; color: #181818; border-color: #E7E7E7; }
.btn-primary:hover { background: #FFFFFF; border-color: #FFFFFF; }
.btn-ghost { border-color: #343437; }
.store-badge { background: #FFFFFF; color: #181818; border: 1px solid #FFFFFF; }
.store-badge svg { fill: #181818; }
.lsec a { text-decoration-color: #3D3D41; }

/* ── HAND ─────────────────────────────────────────────────────────────── */
:root { color-scheme: dark; }
body { background: #1D1D1D; color: #E7E7E7; }
/* The main "Play" buttons (black in light mode) are the app's purple New
   puzzle button in dark mode, not an inverted near-white slab. Kasey picked
   this from three mock-ups on Sept 26 2026 (turquoise, purple, charcoal). */
.nav-links a.cta, .nav.has-menu .nav-end a.cta, .btn-primary { background: #8662E2; color: #FFFFFF; border-color: #6248A5; }
.nav-links a.cta:hover, .nav.has-menu .nav-end a.cta:hover, .btn-primary:hover { background: #9575E8; color: #FFFFFF; border-color: #6248A5; }
/* Phone menu chevrons keep their bubble colour on a dark sheet (the generated
   rule above greys every chevron, and it lands after the light colour rules). */
@media (max-width: 720px) {
  .nav.has-menu .nav-links .mc1 { color: #FF5A45; } .nav.has-menu .nav-links .mc2 { color: #FF8A26; } .nav.has-menu .nav-links .mc3 { color: #F5CE1B; }
  .nav.has-menu .nav-links .mc5 { color: #4CC22F; } .nav.has-menu .nav-links .mc6 { color: #1CC9DB; }
  .nav.has-menu .nav-links .mc7 { color: #5B9CFF; } .nav.has-menu .nav-links .mc8 { color: #A9ACF8; }
  .nav.has-menu .nav-links .mc9 { color: #A58AF0; }
  .nav.has-menu .nav-links a.active .mc { color: inherit; }
}
/* Store badges stay BLACK on a dark page, with Google's grey outline: the
   official badge artwork is the black one, and it is what players recognise. */
.store-badge { background: #000000; color: #FFFFFF; border: 1px solid #A6A6A6; }
.store-badge svg { fill: #FFFFFF; }