/* GENERATED by scripts/build-guide.mjs canary — do not edit; re-run the script.
   The page look (the "charcoal" board scheme, the game's default), the Canary tokens (the
   --cn-* block on #canary-game-screen, moved onto the figure) and the app's own .cn-* tile rules
   (only those the lifted tiles use). */
.cg-page {
  --pgr-bg: radial-gradient(125% 120% at 50% -10%,#1c1e24 0%,#141519 58%,#0d0e11 100%);
  --pgr-seat: rgba(255,255,255,.025);
  --pgr-panel: rgba(255,255,255,.04);
  --pgr-line: rgba(255,255,255,.075);
  --pgr-txt: #e9e8e4;
  --pgr-dim: #83858b;
  --pgr-track: rgba(255,255,255,.07);
  --pgr-sel: oklch(.74 .14 152);
  --pgr-btn: linear-gradient(180deg,#333841,#22252b);
  --pgr-btnTxt: #e9e8e4;
  --pgr-bubbleBg: #2b2d33;
  --pgr-bubbleTxt: #f1f0ec;
  --pgr-selBg: oklch(.74 .14 152 / .16);
  --pgr-gold: oklch(.80 .15 85);
  --pgr-solid: #15161b;
  --pgr-goldBg: color-mix(in oklch, oklch(.80 .15 85) 16%, transparent);
  --cg-base: #141519;
}
.cn-gbox {
  --cn-c1: oklch(.72 .09 60);
  --cn-c2: oklch(.72 .07 240);
  --cn-c3: oklch(.80 .08 130);
  --cn-c4: oklch(.74 .07 20);
  --cn-lamp: oklch(.80 .13 78);
  --cn-gold: oklch(.88 .14 88);
  --cn-danger: oklch(.64 .20 25);
  --cn-accent: oklch(.74 .14 152);
  --cn-line: var(--pgr-line, rgba(238,241,236,.14));
  --cn-dim: color-mix(in oklab, var(--pgr-txt, #eef1ec) 55%, transparent);
  --cn-tile: color-mix(in oklab, #fff 5.5%, transparent);
  --cn-tileline: color-mix(in oklab, #fff 9%, transparent);
  --cn-floor: rgba(0,0,0,.34);
  --cn-panel: color-mix(in oklab, #fff 3%, transparent);
  --cn-onaccent: #0d0e11;
  --cn-die: 64px;
  --cn-n1: oklch(.78 .12 250);
  --cn-n2: oklch(.80 .12 152);
  --cn-n3: oklch(.80 .13 78);
  --cn-n4: oklch(.74 .13 310);
  --cn-n5: oklch(.73 .15 40);
  --cn-n6: oklch(.78 .11 195);
  --cn-n7: oklch(.80 .05 300);
  --cn-n8: oklch(.70 .02 260);
}
.cn-cell { -webkit-tap-highlight-color: transparent; }
.cn-stat { font-size: 12px; font-weight: 600; color: var(--cn-dim); white-space: nowrap; }
.cn-stat-mines { color: var(--cn-danger); }
.cn-statsep { width: 1px; height: 13px; flex: 0 0 auto; background: var(--cn-line); }
.cn-grid { display: grid; flex: 0 0 auto; grid-template-columns: repeat(6, var(--cn-cell, 78px)); grid-auto-rows: var(--cn-cell, 78px); gap: var(--cn-cellgap, 5px); padding: var(--cn-gridpad, 9px); border: 2px solid var(--cn-line); border-radius: 12px; background: var(--cn-floor); }
.cn-cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 0px; border-radius: var(--cn-cellr, 12px); font-family: inherit; font-weight: 800; font-size: var(--cn-cellfs, 30px); line-height: 1; }
.cn-undug { cursor: pointer; border: 1px solid var(--cn-tileline); background: var(--cn-tile); box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px inset; }
.cn-undug.is-lit { background: oklch(0.33 0.045 70); border-color: oklch(0.62 0.1 70); }
.cn-undug.is-cross { background: oklch(0.42 0.09 70); border-color: var(--cn-lamp); box-shadow: 0 0 22px -6px var(--cn-lamp), inset 0 1px 0 rgba(255,255,255,.14); }
.cn-mult { position: absolute; top: 4px; right: 6px; font-size: var(--cn-multfs, 12px); font-weight: 800; line-height: 1; color: oklch(0.78 0.1 75); }
.cn-undug.is-cross .cn-mult { color: oklch(0.86 0.13 85); }
.cn-dug { background: var(--cn-floor); border: 1px solid rgba(255, 255, 255, 0.043); color: transparent; }
.cn-dug[data-n="1"] { color: var(--cn-n1); }
.cn-dug[data-n="2"] { color: var(--cn-n2); }
.cn-dug[data-n="3"] { color: var(--cn-n3); }
.cn-dug[data-n="4"] { color: var(--cn-n4); }
.cn-dug[data-n="5"] { color: var(--cn-n5); }
.cn-dug[data-n="6"] { color: var(--cn-n6); }
.cn-dug[data-n="7"] { color: var(--cn-n7); }
.cn-dug[data-n="8"] { color: var(--cn-n8); }
.cn-boom { background: oklch(0.3 0.1 25); border: 1px solid oklch(0.55 0.17 25); }
.cn-mine { width: 40%; height: 40%; border-radius: 50%; background: rgb(13, 14, 17); box-shadow: 0 0 0 3px var(--cn-danger), 0 0 22px 2px color-mix(in oklab, var(--cn-danger) 50%, transparent); }