/* 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; }
.daily-card { border: 2px solid #2C2C2C; }
.daily-card:hover { border-color: #3D3D3D; }
.daily-card .dc-line { color: #B4B4B4; }
.daily-card.done .dc-pill { background: #282200; }
.diff-card { border: 2px solid #2C2C2C; }
.diff-label { color: #717171; border-bottom: 1px solid #282828; }
.diff-row { border-bottom: 1px solid #282828; }
.diff-row:hover { background: #1D1D1D; }
.icon-btn { background: #25242A; }
.icon-btn:hover { background: #2E2B39; }
.combo-chip { background: #181818; }
.combo-tip { background: #E7E7E7; color: #181818; }
.combo-tip::after { border-top-color: #E7E7E7; }
.board { background: #181818; }
.board .cell { background: #181818; }
.board .cell.ripple::after { background: #9B9B9B; }
.hint-card { background: #1A1912; }
.hint-card .pips i { background: #383106; }
.wstrip { background: #181818; border: 2px solid #D1D1D1; }
.ztarget .zring { background: #181818; }
.score-fly { text-shadow: 0 0 6px rgba(24,24,24,0.9); }
.overlay.pause { background: #1B1B19; border: 2px solid #B4B4B4; }
.overlay.pause .pause-frame { border: 2px dashed rgba(115,108,100,0.45); }
.overlay.pause .pause-sub { color: #736C64; }
.overlay.win { background: #181818; border: 2px solid #DCDCDC; }
.win-mini { border: 2px solid #DCDCDC; background: #181818; }
.pill { background: #181818; border: 2px solid #6F6F73; }
.break-row { border-bottom: 1px solid #3A3A3A; }
.break-total { border-top: 2px solid #DCDCDC; }
.best-row { border-bottom: 1px solid #3A3A3A; }
.overlay .btn-white { background: #181818; }
.action .badge { color: #181818; }
.sheet { background: #181818; }
.set-card { border: 2px solid #28282C; background: #181818; }
.set-card .opt { border-bottom: 1px solid #28282C; }
.set-card button.opt:hover { background: #1B1B1B; }
.radio { border: 2px solid #3C3C41; }
.switch { background: #2E2E31; border: 2px solid #616165; }
.switch::after { background: #181818; border: 2px solid #616165; }

/* ── 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; }
/* Game over is a saturated pink sheet in BOTH themes (app: "the pink game-over
   rule keeps its own fill/rim/ink"), so its white button stays white. */
.overlay.lose .btn-white { background: #FFFFFF; }
/* app HowToPlay/lesson ring: the gold glow is quieter on a dark page
   ('0 0 5px 1px rgba(255,196,0,0.4)' against light's 7px 2px 0.6). */
.board .cell.hint-target::before { box-shadow: 0 0 5px 1px rgba(255,196,0,0.4); }
.ztarget .zhalo { box-shadow: 0 0 12px 7px rgba(255,196,0,0.55); }